:root{
  --navy:#16233A; --ink:#101317; --charcoal:#1B2027;
  --ivory:#EDEAE1; --concrete:#D9D4C7; --paper:#F6F4EE;
  --steel:#8A8F98; --text-dark:#2B2E33; --text-light:#C9CBCE;
  --amber:#D9791F; --gold:#E8B74C; --white:#FFFFFF;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:104px;
  --dur:420ms; --ease:cubic-bezier(.22,.61,.36,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  background:var(--paper); color:var(--text-dark);
  font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:600; line-height:0.98; letter-spacing:-0.01em;}
.label{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber); font-weight:600;}
.label--dark{color:var(--gold);}
.container{max-width:1480px; margin:0 auto; padding:0 var(--sp-4);}
@media (max-width:768px){.container{padding:0 var(--sp-3);}}
.rule{height:1px; background:rgba(0,0,0,0.12);}
.rule--dark{background:rgba(255,255,255,0.14);}
::selection{background:var(--amber); color:var(--white);}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--sp-4); padding-top:calc(22px + env(safe-area-inset-top,0px));
  transition:background var(--dur) var(--ease), padding var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(16,19,23,0.92); backdrop-filter:blur(10px); padding-top:calc(14px + env(safe-area-inset-top,0px)); padding-bottom:14px; border-color:rgba(255,255,255,0.08);}
.nav-brand{display:flex; align-items:center; gap:12px;}
.nav-brand img{height:34px; width:auto;}
.nav-brand-text{display:flex; flex-direction:column; line-height:1.1;}
.nav-brand-text b{font-family:'Space Grotesk'; font-size:14px; letter-spacing:0.04em; color:#fff;}
.nav-brand-text span{font-size:10px; letter-spacing:0.16em; color:var(--gold); text-transform:uppercase;}
.nav-links{display:flex; gap:var(--sp-4); align-items:center; flex-wrap:nowrap;}
.nav-links a{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-light); transition:color var(--dur); white-space:nowrap;}
.nav-links a:hover, .nav-links a.active{color:var(--white);}
.nav-links a.active{color:var(--amber);}
.nav-cta{border:1px solid rgba(255,255,255,0.45); color:#fff; padding:10px 20px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; transition:all var(--dur) var(--ease); white-space:nowrap;}
.nav-cta:hover{background:#fff; color:var(--ink);}
.nav-burger{display:none; flex-direction:column; gap:5px; width:26px;}
.nav-burger span{height:2px; background:#fff; width:100%; transition:transform var(--dur), opacity var(--dur);}
/* Compact tier: shrink spacing/type before dropping to the hamburger, so ordinary laptop widths keep the full menu */
@media (max-width:1600px){
  .nav{padding-left:var(--sp-3); padding-right:var(--sp-3);}
  .nav-links{gap:22px;}
  .nav-links a{font-size:11px;}
  .nav-brand-text span{display:none;}
  .nav-cta{padding:9px 16px;}
}
@media (max-width:1100px){
  .nav-links{position:fixed; inset:0; height:100vh; height:100dvh; background:var(--ink); flex-direction:column; justify-content:flex-start; gap:var(--sp-3);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-16px);
    transition:opacity 360ms var(--ease), transform 360ms var(--ease), visibility 0s linear 360ms;
    flex-wrap:nowrap; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:calc(96px + env(safe-area-inset-top,0px)) 24px calc(120px + env(safe-area-inset-bottom,0px));}
  .nav-links.open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity 360ms var(--ease), transform 360ms var(--ease);}
  .nav-links a{font-size:20px;}
  .nav-cta{position:fixed; bottom:calc(36px + env(safe-area-inset-bottom,0px)); left:50%; transform:translate(-50%, 40px); opacity:0; pointer-events:none; transition:all 480ms var(--ease) 120ms; z-index:201;}
  .nav-links.open ~ .nav-cta{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
  .nav-burger{display:flex; padding:10px; margin:-10px;}
}
@media (max-width:480px){
  .stat-row{grid-template-columns:1fr !important;}
}

/* ---------- Page system ---------- */
.page{display:none;}
.page.active{display:block;}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink);}
.hero-media{position:absolute; inset:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); filter:saturate(0.9) brightness(0.62);
  animation:heroZoom 26s var(--ease) forwards;}
@keyframes heroZoom{from{transform:scale(1.12);} to{transform:scale(1);}}
.hero-media::after{content:'';position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,19,23,.55) 0%, rgba(16,19,23,.25) 38%, rgba(16,19,23,.85) 100%);}
.hero-content{position:relative; z-index:2; width:100%; padding:0 var(--sp-4) 88px; display:grid; grid-template-columns:1fr auto; gap:var(--sp-5); align-items:end;}
.hero-eyebrow{opacity:0; animation:riseIn 900ms var(--ease) 300ms forwards;}
.hero-title{color:#fff; font-size:clamp(40px,9vw,132px); text-transform:uppercase; margin-top:14px;
  opacity:0; animation:riseIn 1000ms var(--ease) 480ms forwards;}
.hero-sub{color:var(--text-light); max-width:520px; font-size:17px; margin-top:22px;
  opacity:0; animation:riseIn 900ms var(--ease) 720ms forwards;}
.hero-meta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; opacity:0; animation:riseIn 900ms var(--ease) 900ms forwards;}
@keyframes riseIn{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);}}
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; border:1px solid rgba(255,255,255,0.5); color:#fff; transition:all var(--dur) var(--ease); white-space:nowrap;}
.btn:hover{background:#fff; color:var(--ink);}
.btn--solid{background:var(--amber); border-color:var(--amber); color:#fff;}
.btn--solid:hover{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.btn--dark{border-color:rgba(20,20,20,0.35); color:var(--text-dark);}
.btn--dark:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn svg{transition:transform var(--dur) var(--ease);}
.btn:hover svg{transform:translateX(5px);}

.hero-frame{position:relative; width:min(320px,32vw); border:1px solid rgba(255,255,255,0.55); padding:22px;
  opacity:0; transform:translateY(24px) scale(0.97); animation:frameIn 1200ms var(--ease) 1000ms forwards;}
@keyframes frameIn{to{opacity:1; transform:translateY(0) scale(1);}}
.hero-frame .label{color:var(--gold);}
.hero-frame h4{color:#fff; font-size:20px; margin-top:10px; text-transform:uppercase;}
.hero-frame p{color:var(--text-light); font-size:12.5px; margin-top:10px; line-height:1.55;}
@media (max-width:860px){.hero-content{grid-template-columns:1fr; padding-bottom:64px;} .hero-frame{display:none;}}
@media (max-width:600px){
  .hero-content{padding-left:var(--sp-3); padding-right:var(--sp-3); padding-bottom:48px;}
  .hero-meta{gap:10px;}
  .btn{padding:13px 18px; font-size:11px;}
}

.scroll-cue{position:absolute; bottom:26px; left:var(--sp-4); z-index:2; display:flex; align-items:center; gap:10px; color:var(--text-light); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;}
.scroll-cue .dot{width:1px; height:26px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;}
.scroll-cue .dot::after{content:'';position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--amber); animation:dotMove 1.8s ease-in-out infinite;}
@keyframes dotMove{50%{top:100%;} 100%{top:100%;}}
.hero-counter{position:absolute; bottom:26px; right:var(--sp-4); z-index:2; color:var(--text-light); font-size:12px; letter-spacing:.08em;}
.hero-counter b{color:#fff;}
@media (max-width:600px){.scroll-cue,.hero-counter{display:none;}}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 900ms var(--ease), transform 900ms var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Section scaffolding ---------- */
section{position:relative;}
.sec{padding:var(--sp-6) 0;}
.sec--dark{background:var(--ink); color:var(--text-light);}
.sec--dark h2, .sec--dark h3{color:#fff;}
.sec--navy{background:var(--navy); color:var(--text-light);}
.sec--navy h2, .sec--navy h3{color:#fff;}
.sec-head{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:end; margin-bottom:var(--sp-5);}
.sec-head h2{font-size:clamp(34px,5vw,68px); text-transform:uppercase;}
.sec-head p{font-size:15px; max-width:420px; opacity:.85;}
@media (max-width:800px){.sec-head{grid-template-columns:1fr;}}
.page-hero{padding:calc(var(--sp-6) + 60px) 0 var(--sp-5); background:var(--ink); color:#fff;}
.page-hero h1{font-size:clamp(40px,7vw,88px); text-transform:uppercase;}
.page-hero .label{margin-bottom:16px; display:block;}
.page-hero p{max-width:560px; color:var(--text-light); margin-top:20px; font-size:16px;}
@media (max-width:600px){
  .sec{padding:56px 0;}
  .page-hero{padding:calc(88px + env(safe-area-inset-top,0px)) 0 40px;}
  .sec-head{margin-bottom:var(--sp-4);}
}

/* ---------- About ---------- */
.about-grid{display:grid; grid-template-columns:7fr 4fr; gap:var(--sp-5);}
.about-grid .statement{font-size:clamp(28px,4vw,46px); text-transform:uppercase; color:#fff;}
.about-grid .statement em{font-style:normal; color:var(--amber);}
.about-copy{font-size:15.5px; color:var(--text-light); margin-top:var(--sp-4); max-width:480px;}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.15); padding-top:var(--sp-3);}
.stat b{display:block; font-family:'Space Grotesk'; font-size:clamp(30px,4vw,46px); color:#fff;}
.stat span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);}
.about-side img{width:100%; aspect-ratio:4/5; object-fit:cover;}
.about-side .cap{font-size:11.5px; color:var(--steel); margin-top:10px; letter-spacing:.03em;}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;} .stat-row{grid-template-columns:1fr 1fr;}}

/* ---------- Services (editorial rows) ---------- */
.svc-row{display:grid; grid-template-columns:80px 1fr 220px 40px; align-items:center; gap:var(--sp-4);
  padding:34px 0; border-top:1px solid rgba(0,0,0,.12); cursor:pointer; transition:padding var(--dur) var(--ease);}
.svc-row:last-child{border-bottom:1px solid rgba(0,0,0,.12);}
.svc-num{font-family:'Space Grotesk'; font-size:14px; color:var(--amber);}
.svc-title{font-family:'Space Grotesk'; font-size:clamp(22px,3vw,34px); text-transform:uppercase; transition:transform var(--dur) var(--ease);}
.svc-desc{font-size:14px; color:var(--steel); max-width:320px;}
.svc-arrow{transition:transform var(--dur) var(--ease);}
.svc-row:hover{padding-left:14px;}
.svc-row:hover .svc-title{transform:translateX(6px); color:var(--amber);}
.svc-row:hover .svc-arrow{transform:rotate(45deg);}
@media (max-width:760px){.svc-row{grid-template-columns:40px 1fr 30px; gap:var(--sp-3);} .svc-desc{display:none;}}
@media (max-width:600px){.svc-row{padding:22px 0;}}

/* ---------- Fleet strip ---------- */
.fleet-strip{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--sp-2); margin-top:var(--sp-5);}
.fleet-strip img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}
.fleet-strip figure figcaption{font-size:11.5px; color:var(--steel); margin-top:8px; letter-spacing:.03em;}
@media (max-width:760px){.fleet-strip{grid-template-columns:1fr;}}

/* ---------- Projects ---------- */
.proj{display:grid; gap:var(--sp-5); margin-top:var(--sp-2);}
.proj-item{display:grid; grid-template-columns:8fr 3fr; gap:var(--sp-4); align-items:center;}
.proj-item.flip{grid-template-columns:3fr 8fr;}
.proj-item.flip .proj-media{order:2;}
.proj-media{overflow:hidden;}
.proj-media img{width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease);}
.proj-media:hover img{transform:scale(1.045);}
.proj-num{font-family:'Space Grotesk'; font-size:13px; color:var(--amber);}
.proj-title{font-size:clamp(22px,3vw,36px); text-transform:uppercase; margin-top:10px;}
.proj-meta{font-size:12px; color:var(--steel); letter-spacing:.04em; margin-top:10px;}
.proj-desc{font-size:14px; margin-top:16px; color:var(--text-dark); opacity:.8; max-width:340px;}
@media (max-width:820px){.proj-item, .proj-item.flip{grid-template-columns:1fr;} .proj-item.flip .proj-media{order:0;}}

/* ---------- Gallery ---------- */
.gallery-grid{columns:3 260px; column-gap:var(--sp-2);}
.gallery-grid img{width:100%; margin-bottom:var(--sp-2); break-inside:avoid; cursor:zoom-in; transition:opacity var(--dur);}
.gallery-grid img:hover{opacity:.85;}
@media (max-width:700px){.gallery-grid{columns:2 160px;}}
.lightbox{position:fixed; inset:0; background:rgba(10,11,13,.94); z-index:500; display:none; align-items:center; justify-content:center; padding:40px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw; max-height:86vh; object-fit:contain;}
.lightbox-close{position:absolute; top:26px; right:var(--sp-4); color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; border:1px solid rgba(255,255,255,.4); padding:10px 18px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:center;}
@media (max-width:860px){.grid-2{grid-template-columns:1fr; gap:var(--sp-4);}}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);}
@media (max-width:860px){.grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.grid-4{grid-template-columns:1fr;}}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2);}
@media (max-width:760px){.grid-3{grid-template-columns:1fr 1fr;}}
@media (max-width:420px){.grid-3{grid-template-columns:1fr;}}
.grid-portal{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--sp-5);}
@media (max-width:860px){.grid-portal{grid-template-columns:1fr;}}
.contact-info dt{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-top:var(--sp-3);}
.contact-info dd{font-size:20px; font-family:'Space Grotesk'; color:#fff; margin-top:6px;}
.social-row{display:flex; gap:14px; margin-top:var(--sp-4);}
.social-row a{width:44px; height:44px; border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; transition:all var(--dur);}
.social-row a:hover{background:#fff; border-color:#fff;}
.social-row a:hover svg{fill:var(--ink);}
.field{margin-bottom:18px;}
.field label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); display:block; margin-bottom:8px;}
.field input, .field select, .field textarea{width:100%; background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; padding:13px 14px; font:inherit; font-size:14px; transition:border-color var(--dur);}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--amber); outline:none;}
.field textarea{resize:vertical; min-height:90px;}
.form-msg{font-size:13px; margin-top:14px; color:var(--gold); display:none;}
.form-msg.show{display:block;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- Portal ---------- */
.portal-wrap{max-width:460px;}
.tab-row{display:flex; gap:0; border-bottom:1px solid rgba(0,0,0,.15); margin-bottom:var(--sp-4);}
.tab-btn{padding:14px 0; margin-right:34px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); border-bottom:2px solid transparent; transition:color var(--dur);}
.tab-btn.active{color:var(--text-dark); border-color:var(--amber);}
.portal-panel{display:none;}
.portal-panel.active{display:block;}
.field--light label{color:#7c7f85;}
.field--light input, .field--light select, .field--light textarea{border-color:rgba(0,0,0,.22); color:var(--text-dark);}
.field--light input:focus,.field--light textarea:focus{border-color:var(--amber);}
.dash-card{border:1px solid rgba(0,0,0,.14); padding:var(--sp-4); margin-bottom:var(--sp-3);}
.dash-card h4{font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;}
.status-pill{display:inline-block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; background:rgba(217,121,31,.12); color:var(--amber); margin-top:10px;}
.empty-state{border:1px dashed rgba(0,0,0,.2); padding:var(--sp-4); text-align:center; color:var(--steel); font-size:13.5px;}

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:var(--text-light); padding:var(--sp-6) 0 var(--sp-3);}
.footer-top{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-5); padding-bottom:var(--sp-5);}
.footer-brand{font-family:'Space Grotesk'; color:#fff; font-size:26px; text-transform:uppercase; margin-bottom:14px;}
.footer-col h5{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
.footer-col a{display:block; font-size:13.5px; margin-bottom:10px; color:var(--text-light); transition:color var(--dur);}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:var(--sp-3); border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:var(--steel); flex-wrap:wrap; gap:10px;}
@media (max-width:800px){.footer-top{grid-template-columns:1fr 1fr; row-gap:var(--sp-4);}}
@media (max-width:480px){.footer-top{grid-template-columns:1fr; gap:var(--sp-4);} .footer-bottom{flex-direction:column; align-items:flex-start;}}

/* ---------- Cursor removed for reliability; use system cursor ---------- */

@keyframes logoPulse{0%{opacity:0; transform:scale(.94);}55%{opacity:1; transform:scale(1);}100%{opacity:1;}}