
/* ─── Leaflet CSS overrides ─── counteract global * reset ─── */
.leaflet-container { font-family: 'DM Sans', sans-serif; }
.leaflet-tile-pane img,
.leaflet-container img {
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.leaflet-container .leaflet-tile {
  margin: 0 !important;
  padding: 0 !important;
}
.leaflet-control-zoom a {
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  text-decoration: none;
  color: #333;
}
.leaflet-popup-content-wrapper {
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-popup-close-button {
  width: 18px !important;
  height: 18px !important;
  padding: 4px !important;
}
.oss-marker-office,
.oss-marker-hub,
.oss-marker-port {
  background: none !important;
  border: none !important;
}
.leaflet-control-attribution {
  font-size: 10px !important;
  padding: 2px 6px !important;
}
.leaflet-container a { color: #0078A8; }
.leaflet-container .leaflet-control-zoom-in,
.leaflet-container .leaflet-control-zoom-out {
  font-size: 18px;
  font-weight: bold;
}


:root{
  --bg:#fff;--bg-alt:#f6f5f2;--bg-card:#edece8;
  --navy:#1a1a2e;--crimson:#8b1a1a;--crimson2:#b22222;
  --gold:#9a7a2e;--muted:#6b6b6b;--border:rgba(0,0,0,0.09);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--navy);overflow-x:hidden}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--crimson)}

/* ─── NAV ─── */
nav{
  position:static;height:clamp(40px,10vw,56px);padding:0 clamp(16px,5vw,42px);z-index:10000;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,0.97);border-radius:0;
  transition:all .3s;box-shadow:none;
}
nav.scrolled{
  position:fixed;top:clamp(6px,1.5vw,16px);left:clamp(16px,5vw,42px);right:clamp(16px,5vw,42px);
  border-radius:clamp(6px,1.5vw,16px);box-shadow:0 4px 32px rgba(0,0,0,0.08);z-index:10000;
}
nav.inner-page-nav{
  position:fixed;top:clamp(6px,1.5vw,16px);left:clamp(16px,5vw,42px);right:clamp(16px,5vw,42px);
  border-radius:clamp(6px,1.5vw,16px);box-shadow:0 4px 32px rgba(0,0,0,0.08);z-index:10000;
}
.nav-logo{cursor:pointer;display:flex;align-items:center}
.nav-logo img{height:clamp(26px,6vw,38px);width:auto;background:transparent}
.nav-links{display:flex;align-items:center;gap:clamp(8px,3vw,25px);list-style:none;margin:0;padding:0;}
.nav-links li{display:flex;align-items:center;margin:0;padding:0;}
.nav-links a{
  color:#999;text-decoration:none;font-size:clamp(6px,1.3vw,10px);letter-spacing:clamp(0.6px,0.2vw,1.8px);
  text-transform:uppercase;transition:color .2s;cursor:pointer;font-weight:500;display:flex;align-items:center;
}
.nav-links a:hover{color:var(--navy)}
.nav-links a.active{color:var(--crimson)}
.nav-cta{
  padding:clamp(4px,1vw,8px) clamp(8px,2vw,18px);background:var(--crimson)!important;color:#fff!important;
  border-radius:2px!important;font-size:clamp(6px,1.3vw,10px);
}
.nav-cta:hover{background:var(--crimson2)!important}

/* ─── PAGES ─── */
.page{display:block}

.hero-spacer{height:clamp(52px,12vw,88px);background:var(--bg-alt)} /* spacer above hero so fixed nav doesn't overlap video — matches page-hero bg */

/* ─── HERO ─── */
.hero{
  position:relative;width:100%;aspect-ratio:16/9;max-height:100vh;
  display:flex;align-items:flex-end;overflow:hidden;
  background:#0a0e1a; /* fallback colour */
}
/* CSS animated fallback shown when video can't load */
.hero-bg-anim{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#06091a 0%,#0d1830 40%,#1a0a0a 100%);
}
.hero-bg-anim::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 60% 40%,rgba(139,26,26,.18) 0%,transparent 70%),
    radial-gradient(ellipse 60% 80% at 20% 80%,rgba(15,40,90,.35) 0%,transparent 60%);
  animation:bgPulse 8s ease-in-out infinite alternate;
}
@keyframes bgPulse{from{opacity:.6}to{opacity:1}}
/* horizontal scan lines for texture */
.hero-bg-anim::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.012) 3px,rgba(255,255,255,.012) 4px);
  pointer-events:none;
}
/* The actual video — sits on top of the anim fallback */
.hero video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}
/* Dark gradient overlay so text is always readable */
.hero-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(4,8,22,.55) 0%,
      rgba(4,8,22,.1) 30%,
      rgba(4,8,22,.1) 55%,
      rgba(4,8,22,.8) 100%);
}
.hero-grid-lines{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(rgba(139,26,26,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,26,26,.08) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black,transparent);
}
.hero-content{
  position:relative;z-index:3;padding:clamp(20px,5vh,60px) clamp(20px,8vw,80px) clamp(40px,10vh,100px);max-width:clamp(220px,32vw,500px);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--crimson);
  margin-bottom:18px;white-space:nowrap;
  animation:fadeUp .8s ease forwards;opacity:0;animation-delay:.1s;
}
.hero-eyebrow::before{content:'';width:28px;height:1px;background:var(--crimson)}
.hero-eyebrow::after{content:'';width:28px;height:1px;background:var(--crimson)}
h1.hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(20px,8vw,118px);
  line-height:.91;letter-spacing:-.5px;
  color:#fff;margin-bottom:26px;
  animation:fadeUp .8s ease forwards;opacity:0;animation-delay:.2s;
}
h1.hero-title em{font-style:normal;color:#d04040;display:block}
h1.hero-title span{display:block}
.hero-sub{
  font-family:'Libre Baskerville',serif;font-size:clamp(10px,1.8vw,14px);line-height:1.7;
  color:rgba(255,255,255,.78);max-width:500px;margin-bottom:44px;
  animation:fadeUp .8s ease forwards;opacity:0;animation-delay:.35s;
}
.hero-actions{
  display:flex;gap:14px;align-items:center;
  animation:fadeUp .8s ease forwards;opacity:0;animation-delay:.5s;
}
.hero-stats{
  position:absolute;right:clamp(16px,8vw,80px);bottom:clamp(40px,10vh,100px);z-index:3;
  display:flex;flex-direction:column;gap:clamp(12px,2vh,22px);
  animation:fadeUp .8s ease forwards;opacity:0;animation-delay:.65s;
}
.h-stat{text-align:right;border-right:2px solid var(--crimson);padding-right:16px}
.h-stat-num{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,5vw,50px);line-height:1;color:#fff}
.h-stat-label{font-size:clamp(8px,1.2vw,11px);letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero-scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:clamp(8px,1vw,11px);letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.45);
  animation:fadeIn 1s ease forwards 1s;opacity:0;
}
.scroll-line{
  width:1px;height:34px;
  background:linear-gradient(to bottom,#c04040,transparent);
  animation:scrollBob 1.6s ease-in-out infinite;
}
@keyframes scrollBob{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.6);opacity:.4}}

/* ─── BUTTONS ─── */
.btn-primary{
  padding:clamp(10px,1.5vw,14px) clamp(22px,3vw,34px);background:var(--crimson);color:#fff;
  text-decoration:none;font-size:clamp(9px,1.2vw,11px);letter-spacing:clamp(1.5px,0.3vw,2.5px);text-transform:uppercase;
  border:none;cursor:pointer;display:inline-block;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  box-shadow:inset 0 0 0 1px #fff;transition:background .2s,transform .2s;
}
.btn-primary:hover{background:var(--crimson2);transform:translateY(-2px)}
.btn-ghost{
  padding:clamp(10px,1.5vw,14px) clamp(22px,3vw,34px);background:transparent;color:#fff;
  text-decoration:none;font-size:clamp(9px,1.2vw,11px);letter-spacing:clamp(1.5px,0.3vw,2.5px);text-transform:uppercase;
  border:none;cursor:pointer;
  display:inline-block;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  box-shadow:inset 0 0 0 1px #fff;transition:all .2s;
}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(255,255,255,.07)}
.btn-dark{
  padding:clamp(10px,1.5vw,13px) clamp(20px,2.5vw,30px);background:var(--navy);color:#fff;text-decoration:none;
  font-size:clamp(9px,1.2vw,11px);letter-spacing:clamp(1.2px,0.2vw,2px);text-transform:uppercase;
  border:none;cursor:pointer;display:inline-block;transition:all .2s;
}
.btn-dark:hover{background:#262646;transform:translateY(-1px)}
.btn-outline{
  padding:clamp(10px,1.5vw,13px) clamp(20px,2.5vw,30px);background:transparent;color:var(--crimson);
  border:1px solid var(--crimson);text-decoration:none;
  font-size:clamp(9px,1.2vw,11px);letter-spacing:clamp(1.2px,0.2vw,2px);text-transform:uppercase;
  cursor:pointer;display:inline-block;transition:all .2s;
}
.btn-outline:hover{background:var(--crimson);color:#fff}
.btn-white{
  padding:clamp(10px,1.5vw,14px) clamp(20px,2.5vw,32px);background:#fff;color:var(--crimson);text-decoration:none;
  font-size:clamp(9px,1.2vw,11px);letter-spacing:clamp(1.2px,0.2vw,2px);text-transform:uppercase;
  border:none;cursor:pointer;display:inline-block;font-weight:600;transition:all .2s;
}
.btn-white:hover{background:rgba(255,255,255,.9);transform:translateY(-2px)}
.btn-ghost-w{
  padding:clamp(10px,1.5vw,14px) clamp(20px,2.5vw,32px);background:transparent;color:#fff;text-decoration:none;
  font-size:clamp(9px,1.2vw,11px);letter-spacing:clamp(1.2px,0.2vw,2px);text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4);cursor:pointer;
  display:inline-block;transition:all .2s;
}
.btn-ghost-w:hover{border-color:#fff;background:rgba(255,255,255,.09)}

/* ─── SERVICES STRIP ─── */
.services-strip{background:var(--crimson);padding:20px 60px;overflow:visible;}
.services-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
  max-width:1400px;margin:0 auto;
}
.services-grid .service-item{
  width:clamp(120px,14vw,180px);flex-shrink:0;flex-grow:0;
}

.service-item{
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;font-size:clamp(9px,1.6vw,14px);letter-spacing:0px;color:#333;
  text-align:center;text-transform:capitalize;line-height:1.4;
  position:relative;padding:20px 15px;border:2px solid rgba(255,255,255,0.3);border-radius:8px;
  background:#fff;color:#333;transition:all 0.3s ease;cursor:pointer;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.service-item:hover{
  background:#fff;border-color:var(--crimson);color:var(--crimson);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.service-item i{
  font-size:clamp(20px,3vw,32px);color:var(--crimson);
}
.service-item:hover i{
  color:var(--crimson);transform:scale(1.1);
}
.service-item svg{
  color:var(--crimson);flex-shrink:0;transition:transform 0.2s;
}
.service-item:hover svg{
  transform:scale(1.15);
}



/* ─── PARTNERS GRID (4 rows × 6 cols) ─── */
.partners-wrap{padding:64px 60px;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.partners-label{
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:#aaa;text-align:center;margin-bottom:40px;
}
.partners-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
  max-width:1400px;margin:0 auto;
}
.partner-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 14px;
  background:transparent; /* transparent background */
  border:1px solid rgba(0,0,0,.08);border-radius:6px;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.partner-card:hover{
  border-color:rgba(139,26,26,.22);
  box-shadow:0 4px 18px rgba(0,0,0,.07);
  transform:translateY(-3px);
}
.partner-logo-wrap{
  height:44px;display:flex;align-items:center;justify-content:center;width:100%;
}
.partner-logo-wrap img{
  max-height:40px;max-width:130px;width:auto;
  object-fit:contain;display:block;
  /* remove any white fill from SVGs that have it */
  background:transparent;
}
.partner-text-logo{
  font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;
  color:var(--navy);
}
.partner-name{
  font-size:10px;letter-spacing:1.2px;color:#aaa;
  text-transform:uppercase;text-align:center;line-height:1.4;
}

/* ─── PARTNERS CAROUSEL (2 SCROLLING ROWS) ─── */
.partners-carousel-wrap{padding:64px 60px;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.partners-carousel-label{
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:#555;text-align:center;margin-bottom:40px;
}
.partners-carousel-row{
  margin-bottom:40px;overflow:hidden;width:100%;
}
.partners-scroll-track{
  display:flex;gap:20px;animation:scrollLoop 60s linear infinite;width:max-content;
}
.partner-carousel-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 14px;min-width:160px;
  background:transparent;
  border:1px solid rgba(0,0,0,.08);border-radius:6px;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  flex-shrink:0;
}
.partner-carousel-card:hover{
  border-color:rgba(139,26,26,.22);
  box-shadow:0 4px 18px rgba(0,0,0,.07);
  transform:translateY(-3px);
}
.partner-carousel-card .partner-logo-wrap{
  height:44px;display:flex;align-items:center;justify-content:center;width:100%;
}
.partner-carousel-card .partner-logo-wrap img{
  max-height:40px;max-width:130px;width:auto;
  object-fit:contain;display:block;
  background:transparent;
}
.partner-carousel-name{
  font-size:10px;letter-spacing:1.2px;color:#aaa;
  text-transform:uppercase;text-align:center;line-height:1.4;
  margin-top:8px;max-width:150px;min-height:28px;display:flex;align-items:center;justify-content:center;word-break:break-word;
}
@keyframes scrollLoop{
  0%{transform:translateX(0)}
  100%{transform:translateX(calc(-50%))}
}

/* ─── CERTIFICATIONS STRIP ─── */
.certs-strip{
  background:var(--bg);padding:54px 60px;
  border-bottom:1px solid var(--border);
  display:flex;justify-content:center;
}
.certs-inner{
  display:flex;align-items:stretch;justify-content:center;
  gap:28px;flex-wrap:wrap;
  max-width:1200px;width:100%;
}
.certs-eyebrow{
  flex-basis:100%;text-align:center;
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:#aaa;margin-bottom:6px;
}
.cert-card{
  display:flex;align-items:flex-start;gap:18px;padding:24px 26px;
  border:1px solid var(--border);border-radius:6px;background:#fff;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  max-width:100%;flex:1 1 0;min-width:0;min-height:140px;
}
.cert-card:hover{
  border-color:rgba(10,39,71,.25);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transform:translateY(-2px);
}
.cert-logo-wrap{
  width:80px;height:80px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.cert-logo-wrap img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;background:transparent;
}
.cert-meta{display:flex;flex-direction:column;min-width:0}
.cert-title{
  font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1.4px;
  color:var(--navy);line-height:1.05;
}
.cert-sub{
  font-size:11px;letter-spacing:1.2px;text-transform:none;
  color:var(--muted);margin-top:4px;line-height:1.6;
}

/* Footer cert row with logo chips */
.f-cert-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.f-cert-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);border-radius:4px;
}
.f-cert-badge img{height:26px;width:auto;display:block;flex-shrink:0}
.f-cert-badge span{
  font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#888;
  white-space:nowrap;
}

@media(max-width:1199px){
  .certs-strip{padding:44px 28px}
  .certs-inner{gap:32px}
}
@media(max-width:768px){
  .certs-strip{padding:36px 18px}
  .certs-inner{gap:16px;flex-direction:column}
  .cert-card{width:100%;max-width:360px;padding:14px 18px;gap:14px}
  .cert-logo-wrap{width:60px;height:60px}
  .cert-title{font-size:16px}
  .cert-sub{font-size:10px}
}
@media(max-width:480px){
  .certs-strip{padding:26px 14px}
  .cert-logo-wrap{width:50px;height:50px}
  .cert-title{font-size:14px;letter-spacing:1px}
  .cert-sub{font-size:9px;letter-spacing:1.2px}
  .cert-card{padding:12px 14px;gap:12px}
}

/* ─── SECTIONS ─── */
section{padding:96px 60px}
.alt-bg{background:var(--bg-alt)}
.dark-section{background:var(--navy)}
.dark-section .section-label{color:rgba(255,255,255,.45)}
.dark-section .section-title{color:#fff}
.dark-section .about-text p{color:rgba(255,255,255,.72)}
.dark-section .btn-dark{background:#fff;color:var(--navy)}
.dark-section .btn-outline{border-color:rgba(255,255,255,.4);color:#fff}
.dark-section .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.dark-section .tl-row{border-bottom-color:rgba(255,255,255,.1)}
.dark-section .tl-yr{color:var(--crimson)}
.dark-section .tl-txt{color:rgba(255,255,255,.65)}
.dark-section .about-img-cap{color:rgba(255,255,255,.5)}
.dark-section .stats-row{border-top-color:rgba(255,255,255,.1)}
.dark-section .stat-box{border-right-color:rgba(255,255,255,.1)}
.dark-section .stat-box-num{color:#fff}
.dark-section .stat-box-lbl{color:rgba(255,255,255,.45)}
.dark-section .testi-grid{background:rgba(255,255,255,.06)}
.dark-section .testi{background:rgba(255,255,255,.05)}
.dark-section .testi-quote{color:rgba(255,255,255,.75)}
.dark-section .testi-author{color:#fff}
.dark-section .testi-role{color:rgba(255,255,255,.45)}
.dark-section .divider{background:linear-gradient(to right,transparent,rgba(255,255,255,.1),transparent)}
.section-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--crimson);margin-bottom:14px}
.section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(38px,5vw,66px);
  line-height:.95;letter-spacing:.5px;color:var(--navy);margin-bottom:32px;
}
.divider{height:1px;background:linear-gradient(to right,transparent,rgba(0,0,0,.1),transparent);margin:0 60px}

/* ─── ABOUT ─── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.about-text p{font-size:15px;line-height:1.9;color:#444;margin-bottom:20px}
.about-img-wrap{position:relative;overflow:hidden}
.about-img-wrap img{width:100%;height:400px;object-fit:cover;display:block}
.about-img-cap{
  position:absolute;bottom:0;left:0;right:0;padding:20px 24px;
  background:linear-gradient(to top,rgba(6,10,24,.9),transparent);
  font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:2px;color:#fff;
}
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);margin-top:56px;
}
.stat-box{padding:32px 24px;text-align:center;border-right:1px solid var(--border)}
.stat-box:last-child{border-right:none}
.stat-box-num{font-family:'Bebas Neue',sans-serif;font-size:46px;color:var(--crimson);line-height:1}
.stat-box-lbl{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.timeline{margin-top:36px}
.tl-row{display:flex;gap:18px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.tl-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.tl-yr{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;color:var(--crimson);min-width:62px}
.tl-txt{font-size:14px;line-height:1.7;color:#555;padding-top:2px}

/* ─── SERVICES GRID ─── */
.svc-intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:60px}
.svc-intro-desc{font-family:'Libre Baskerville',serif;font-size:16px;line-height:1.85;color:#555}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,0,0,.07)}
.svc-card{
  background:var(--bg);padding:40px 34px;position:relative;overflow:hidden;
  transition:background .2s;cursor:pointer;
}
.svc-card:hover{background:var(--bg-alt)}
.svc-bg-num{
  font-family:'Bebas Neue',sans-serif;font-size:88px;line-height:1;
  color:rgba(0,0,0,.04);position:absolute;top:8px;right:16px;letter-spacing:-3px;
}
.svc-icon{width:32px;height:32px;color:var(--crimson);margin-bottom:18px}
.svc-name{font-family:'Bebas Neue',sans-serif;font-size:23px;letter-spacing:.8px;margin-bottom:10px;color:var(--navy)}
.svc-desc{font-size:13px;line-height:1.75;color:#666}
.svc-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--crimson);
  transition:gap .2s;
}
.svc-card:hover .svc-more{gap:12px}

/* ─── WHY CHOOSE ─── */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:52px}
.why-num{font-family:'Bebas Neue',sans-serif;font-size:58px;color:rgba(0,0,0,.04);line-height:1;margin-bottom:-14px}
.why-icon{width:38px;height:38px;color:var(--crimson);margin-bottom:18px}
.why-ttl{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.8px;margin-bottom:10px;color:var(--navy)}
.why-txt{font-size:13px;line-height:1.75;color:#666}

/* ─── TESTIMONIALS ─── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,0,0,.06);margin-top:44px}
.testi{background:var(--bg-alt);padding:40px 32px}
.testi-quote{
  font-family:'Libre Baskerville',serif;font-style:italic;
  font-size:14px;line-height:1.85;color:#444;margin-bottom:26px;
}
.testi-quote::before{
  content:'"';font-size:54px;color:var(--crimson);opacity:.2;
  line-height:0;vertical-align:-22px;margin-right:3px;
}
.testi-author{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:1px;color:var(--navy)}
.testi-role{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ─── IMAGE STRIP ─── */
.img-strip{position:relative;height:340px;overflow:hidden;background:var(--navy)}
.img-strip img{width:100%;height:100%;object-fit:cover;opacity:.55;display:block}
.img-strip-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(6,10,24,.88),rgba(6,10,24,.2) 55%,transparent);
}
.img-strip-content{position:absolute;left:60px;top:50%;transform:translateY(-50%);max-width:500px}
.img-strip-content .section-label{color:rgba(255,255,255,.5)}
.img-strip-content .section-title{color:#fff;font-size:clamp(30px,4vw,52px);margin-bottom:12px}
.img-strip-content p{font-family:'Libre Baskerville',serif;font-size:14px;line-height:1.75;color:rgba(255,255,255,.72)}

/* ─── CTA STRIP ─── */
.cta-strip{
  background:var(--crimson);padding:60px 60px;
  display:flex;align-items:center;justify-content:space-between;gap:36px;
}
.cta-txt{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,4vw,50px);letter-spacing:2px;color:#fff;line-height:1}
.cta-sub{font-size:13px;color:rgba(255,255,255,.72);margin-top:7px}
.cta-btns{display:flex;gap:12px;flex-shrink:0}

/* ─── FOOTER ─── */
footer{background:#111320;padding:68px 60px 0}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;
  gap:52px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-desc{font-size:13px;line-height:1.75;color:#72728a;margin:16px 0 22px;max-width:264px}
.f-col-ttl{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:2px;margin-bottom:18px;color:#e8e8e8}
.f-links{list-style:none}
.f-links li{margin-bottom:9px}
.f-links a{font-size:13px;color:#72728a;text-decoration:none;cursor:pointer;transition:color .2s}
.f-links a:hover{color:#d06060}
.f-contact{display:flex;align-items:flex-start;gap:9px;margin-bottom:11px;color:#72728a;font-size:13px;line-height:1.55}
.f-contact a{color:#72728a;text-decoration:none}
.f-icon{width:15px;height:15px;flex-shrink:0;color:#8b1a1a;margin-top:2px}
.footer-bottom{padding:22px 0;display:flex;justify-content:space-between;align-items:center}
.footer-bottom p{font-size:12px;color:#4a4a5a}
.f-badge{padding:4px 10px;border:1px solid rgba(255,255,255,.1);font-size:10px;letter-spacing:2px;color:#4a4a5a;text-transform:uppercase}

/* ─── PAGE HERO (inner pages) ─── */
.page-hero{padding:126px 60px 60px;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.page-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(46px,6vw,78px);line-height:.94;letter-spacing:.5px;color:var(--navy);margin-top:10px}
.page-hero p{font-family:'Libre Baskerville',serif;font-size:16px;line-height:1.8;color:#555;max-width:540px;margin-top:16px}
.page-hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* ─── SERVICES DETAIL BLOCKS ─── */
.sdb{display:grid;grid-template-columns:340px 1fr;border-bottom:1px solid var(--border)}
.sdb:last-child{border-bottom:none}
.sdb-left{
  padding:52px 44px;background:var(--bg-alt);border-right:1px solid var(--border);
  position:relative;overflow:hidden;
}
.sdb-left-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.13;transition:opacity .4s;
}
.sdb:hover .sdb-left-img{opacity:.2}
.sdb-left-inner{position:relative;z-index:1}
.sdb-num{font-size:10px;letter-spacing:3px;color:var(--crimson);text-transform:uppercase;margin-bottom:8px}
.sdb-title{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:2px;line-height:1.05;color:var(--navy)}
.sdb-bar{margin-top:22px;width:40px;height:3px;background:var(--crimson)}
.sdb-right{padding:52px 44px}
.sdb-desc{font-family:'Libre Baskerville',serif;font-size:16px;line-height:1.85;color:#444;margin-bottom:34px}
.sdb-items{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sdb-item{padding:13px 16px;background:var(--bg-card);border-left:3px solid var(--crimson);font-size:13px;color:#444}
.sdb-item strong{display:block;font-size:11.5px;font-weight:600;color:var(--navy);margin-bottom:2px;letter-spacing:.2px}

/* ─── PORT LOCATIONS PAGE ─── */
.portloc-hero{padding:126px 60px 56px;background:var(--navy)}
.portloc-hero .section-label{color:rgba(255,255,255,.45)}
.portloc-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(50px,7vw,86px);line-height:.91;color:#fff;margin-top:10px}
.portloc-hero p{font-family:'Libre Baskerville',serif;font-size:16px;line-height:1.8;color:rgba(255,255,255,.68);max-width:540px;margin-top:16px}

/* Offices with maps */
.offices-section{padding:80px 60px;background:var(--bg-alt)}
.offices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.office-card{background:#fff;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.office-map{height:220px;overflow:hidden}
.office-map iframe{width:100%;height:100%;border:none;display:block}
.office-body{padding:22px 22px 26px}
.office-type{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--crimson);margin-bottom:5px}
.office-city{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:1.5px;color:var(--navy)}
.office-addr{font-size:13px;color:#666;line-height:1.7;margin-top:8px}
.office-phone{margin-top:10px}
.office-phone a{font-size:13px;color:var(--crimson);text-decoration:none;font-weight:500}

/* State sections */
.state-band{padding:52px 60px;border-bottom:1px solid var(--border)}
.state-band:last-of-type{border-bottom:none}
.state-band:nth-child(even){background:var(--bg-alt)}
.state-header{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.state-emoji{font-size:28px;line-height:1}
.state-name{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:2px;color:var(--navy)}
.state-meta{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.port-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.port-card{
  background:var(--bg);border:1px solid var(--border);padding:18px 20px;
  border-left:4px solid var(--crimson);transition:all .2s;
}
.port-card:hover{background:var(--bg-card);transform:translateX(3px);border-color:rgba(139,26,26,.4)}
.port-card-name{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.8px;color:var(--navy);margin-bottom:4px}
.port-card-info{font-size:12px;color:#888;line-height:1.55}
.port-badge{
  display:inline-block;margin-top:8px;font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--crimson);
  border:1px solid rgba(139,26,26,.22);padding:2px 7px;border-radius:2px;
}

/* ─── PORTS PAGE (old, now portloc replaces) ─── */
.ports-layout{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:start;margin-top:36px}

/* ─── CONTACT ─── */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:68px;align-items:start;margin-top:44px}
.c-block{margin-bottom:30px}
.c-lbl{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--crimson);margin-bottom:5px}
.c-val{font-family:'Bebas Neue',sans-serif;font-size:25px;letter-spacing:.8px;color:var(--navy)}
.c-val a{color:inherit;text-decoration:none}
.c-sub{font-size:13px;line-height:1.65;color:#666;margin-top:3px}
.c-form{background:var(--bg-alt);padding:44px 40px;border:1px solid var(--border)}
.c-form-ttl{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;margin-bottom:30px;color:var(--navy)}
.f-group{margin-bottom:20px}
.f-label{display:block;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#999;margin-bottom:6px}
.f-input,.f-textarea,.f-select{
  width:100%;background:#fff;border:1px solid var(--border);
  color:var(--navy);padding:12px 15px;
  font-family:'DM Sans',sans-serif;font-size:14px;
  outline:none;transition:border-color .2s;
  -webkit-appearance:none;border-radius:0;
}
.f-input:focus,.f-textarea:focus,.f-select:focus{border-color:var(--crimson)}
.f-textarea{resize:vertical;min-height:110px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.js .fade-in{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ─── HAMBURGER MENU ─── */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  width:36px;height:36px;padding:6px;position:relative;z-index:10001;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hamburger span{
  display:block;width:22px;height:2px;background:var(--navy);
  transition:all .3s ease;border-radius:1px;
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:9999;opacity:0;transition:opacity .3s;
}
.mobile-overlay.show{display:block;opacity:1}

/* ─── RESPONSIVE ─── */

/* --- WIDESCREEN (1600px+) --- */
@media(min-width:1600px){
  section,.alt-bg,.offices-section{padding:110px 100px}
  .page-hero,.portloc-hero{padding:140px 100px 70px}
  .hero-content{max-width:600px;padding:0 100px 110px}
  .partners-wrap,.partners-carousel-wrap{padding:80px 100px}
  .services-strip{padding:26px 100px}
  .state-band{padding:60px 100px}
  .cta-strip{padding:72px 100px}
  footer{padding:80px 100px 0}
  .divider{margin:0 100px}
  .img-strip-content{left:100px}
  .services-grid{max-width:1600px}
  .svc-grid{max-width:1600px;margin-left:auto;margin-right:auto}
  .why-grid{max-width:1600px}
  .testi-grid{max-width:1600px}
  .footer-grid{max-width:1600px}
  .about-grid{max-width:1400px;gap:96px}
  .contact-grid{max-width:1400px}
    #aus-port-map{height:720px!important}
}

/* --- LARGE DESKTOP (1200-1599px) --- default styling mostly fine */
@media(min-width:1200px) and (max-width:1599px){
  /* tweak nothing radical, just ensure max-widths */
}

/* --- SMALL DESKTOP / LARGE TABLET (961-1199px) --- */
@media(max-width:1199px){
  .partners-grid{grid-template-columns:repeat(4,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .offices-grid{grid-template-columns:repeat(2,1fr)}
  .sdb{grid-template-columns:280px 1fr}
  .footer-grid{grid-template-columns:2fr 1fr 1fr;gap:36px}
  .footer-grid > div:last-child{grid-column:1/-1}
}

/* --- TABLET (769-960px) --- */
@media(max-width:960px){
  section,.alt-bg,.offices-section{padding:56px 28px}
  .page-hero,.portloc-hero{padding:112px 28px 44px}
  .state-band{padding:44px 28px}
  .hero-content{padding:0 28px 72px;max-width:400px}
  .hero-stats{position:absolute;left:auto;right:28px;bottom:28px;flex-direction:row;gap:18px}
  .h-stat{text-align:center;border-right:none;border-bottom:2px solid var(--crimson);padding-right:0;padding-bottom:8px}
  .h-stat-num{font-size:clamp(20px,5vw,28px)}
  .h-stat-label{font-size:clamp(7px,1.6vw,9px);letter-spacing:1.5px}
  .partners-wrap,.partners-carousel-wrap{padding:48px 28px}
  .partners-grid{grid-template-columns:repeat(3,1fr)}
  .services-strip{padding:18px 28px}
  .services-grid{gap:12px}
  .service-item{padding:16px 10px;font-size:12px}
  .service-item svg{width:28px;height:28px}
  .about-grid,.svc-intro,.contact-grid,  .svc-grid,.testi-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr;gap:24px}
  .stats-row{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .sdb{grid-template-columns:1fr}
  .sdb-left{padding:36px 28px}
  .sdb-right{padding:36px 28px}
  .offices-grid{grid-template-columns:1fr}
  .cta-strip{flex-direction:column;padding:44px 28px;text-align:center}
  .cta-btns{justify-content:center}
  .img-strip{height:280px}
  .img-strip-content{left:28px;max-width:380px}
  .ports-layout{grid-template-columns:1fr}
  .divider{margin:0 28px}
  footer{padding:56px 28px 0}
  /* Inline style grid overrides */
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1fr 1fr 1fr;gap:0;height:220px"]{grid-template-columns:1fr 1fr!important;height:auto!important}
  [style*="grid-template-columns:1fr 1fr;gap:0;height:200px"]{grid-template-columns:1fr!important;height:auto!important}
  /* Photo banner height scaling */
  [style*="height:380px"]{height:280px!important}
  [style*="height:340px"]{height:240px!important}
  /* Map size */
  #aus-port-map{height:480px!important}
}

/* --- SMALL TABLET / LARGE PHONE (481-768px) --- */
@media(max-width:768px){
  /* Show hamburger, hide nav links */
  .hamburger{display:flex}
  .nav-links{
    position:fixed;top:0;right:-100%;width:280px;height:100vh;
    background:#fff;flex-direction:column;align-items:flex-start;
    padding:80px 32px 32px;gap:0;z-index:10001;
    box-shadow:-4px 0 24px rgba(0,0,0,.12);
    transition:right .35s ease;
  }
  .nav-links.open{right:0}
  .nav-links li{width:100%;padding:14px 0;border-bottom:1px solid var(--border)}
  .nav-links a{
    font-size:14px!important;letter-spacing:2px!important;
    color:var(--navy)!important;width:100%;
  }
  .nav-links a:hover{color:var(--crimson)!important}
  .nav-cta{
    margin-top:16px;text-align:center;width:100%;
    padding:14px 18px!important;font-size:13px!important;
  }
  nav{padding:0 16px;height:52px}
  nav.scrolled,nav.inner-page-nav{
    left:10px;right:10px;top:8px;border-radius:10px;
  }

  section,.alt-bg,.offices-section{padding:48px 18px}
  .page-hero{padding:100px 18px 36px}
  .portloc-hero{padding:100px 18px 36px}
  .page-hero h1{font-size:42px}
  .portloc-hero h1{font-size:46px}

  .hero{aspect-ratio:auto;min-height:85vh}
  /* Extra bottom padding so absolute hero-stats never overlap hero text/buttons */
  .hero-content{padding:0 18px 110px;max-width:100%}
  h1.hero-title{font-size:48px}
  .hero-sub{font-size:13px;margin-bottom:28px}
  .hero-actions{flex-direction:row;flex-wrap:wrap;gap:10px;align-items:flex-start}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{text-align:center;font-size:clamp(9px,1.8vw,11px);padding:clamp(8px,1.5vw,12px) clamp(14px,2.5vw,24px);white-space:nowrap}
  .hero-scroll{display:none}

  .services-strip{padding:16px 14px}
  .services-grid{gap:8px}
  .services-grid .service-item{width:calc(25% - 8px);padding:12px 8px;font-size:10px;gap:6px;min-height:0}
  .service-item svg{width:22px;height:22px}

  .partners-wrap,.partners-carousel-wrap{padding:40px 18px}
  .partners-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .partner-card{padding:14px 8px}
  .partner-logo-wrap{height:34px}
  .partner-logo-wrap img{max-height:30px;max-width:90px}
  .partner-name{font-size:8px;letter-spacing:.8px}
  .partner-carousel-card{padding:14px 8px;min-width:120px}
  .partner-carousel-card .partner-logo-wrap{height:34px}
  .partner-carousel-card .partner-logo-wrap img{max-height:30px;max-width:90px}
  .partner-carousel-name{font-size:8px;max-width:110px;min-height:22px}

  .about-grid{gap:28px}
  .about-img-wrap img{height:260px}
  .section-title{font-size:38px;margin-bottom:22px}
  .stat-box{padding:20px 14px}
  .stat-box-num{font-size:34px}
  .stat-box-lbl{font-size:9px;letter-spacing:1.5px}

  .svc-grid{grid-template-columns:1fr!important}
  .svc-card{padding:30px 22px}
  .svc-intro-desc{font-size:14px}

  .img-strip{height:240px}
  .img-strip-content{left:18px;max-width:75%}
  .img-strip-content .section-title{font-size:28px}

  .why-grid{grid-template-columns:1fr 1fr;gap:20px}
  .testi-grid{grid-template-columns:1fr!important}

  .cta-strip{padding:40px 18px}
  .cta-txt{font-size:32px;text-align:center}
  .cta-btns{flex-direction:column;width:100%}
  .cta-btns .btn-white,.cta-btns .btn-ghost-w{text-align:center;width:100%}

  .footer-grid{grid-template-columns:1fr!important;gap:28px}
  footer{padding:48px 18px 0}
  .footer-bottom{flex-direction:column;gap:12px;align-items:flex-start;padding:18px 0}

    .contact-grid{grid-template-columns:1fr!important}
  .c-form{padding:28px 22px}
  .f-row{grid-template-columns:1fr}

  .state-band{padding:36px 18px}
  .port-cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .offices-grid{grid-template-columns:1fr}

  .sdb{grid-template-columns:1fr}
  .sdb-left{padding:28px 22px}
  .sdb-right{padding:28px 22px}
  .sdb-items{grid-template-columns:1fr}

  .divider{margin:0 18px}
  #aus-port-map{height:400px!important}

  /* Photo gallery inline grids */
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr!important}
  /* Photo banner height scaling */
  [style*="height:380px"]{height:220px!important}
  [style*="height:340px"]{height:200px!important}
  /* Inner page photo grids to 2 or 1 col */
  [style*="grid-template-columns:1fr 1fr 1fr;gap:0"]{grid-template-columns:1fr 1fr!important}
}

/* --- PHONE (0-480px) --- */
@media(max-width:480px){
  nav{height:48px;padding:0 12px}
  nav.scrolled,nav.inner-page-nav{left:6px;right:6px;top:6px;border-radius:8px}
  .nav-logo img{height:24px}
  .nav-links{width:100%;right:-100%}
  .nav-links.open{right:0}

  .hero{min-height:75vh}
  /* Larger bottom padding clears the absolute-positioned stats row on phones */
  .hero-content{padding:0 14px 92px}
  h1.hero-title{font-size:36px}
  .hero-sub{font-size:12px;margin-bottom:24px}
  .hero-eyebrow{font-size:9px;letter-spacing:2.5px}
  .hero-stats{right:14px;left:14px;bottom:14px;gap:8px;justify-content:space-between}
  .h-stat{padding-bottom:6px;flex:1;min-width:0}
  .h-stat-num{font-size:18px}
  .h-stat-label{font-size:7px;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  section,.alt-bg,.offices-section{padding:36px 14px}
  .page-hero{padding:88px 14px 28px}
  .portloc-hero{padding:88px 14px 28px}
  .page-hero h1{font-size:34px}
  .portloc-hero h1{font-size:38px}
  .page-hero p,.portloc-hero p{font-size:14px}

  .section-label{font-size:9px;letter-spacing:3px;margin-bottom:10px}
  .section-title{font-size:30px;margin-bottom:18px}

  .services-strip{padding:12px 10px}
  .services-grid{gap:6px}
  .services-grid .service-item{width:calc(33.33% - 6px);padding:10px 6px;font-size:9px;gap:4px;border-width:1px;border-radius:5px}
  .service-item svg{width:18px;height:18px}

  .partners-wrap,.partners-carousel-wrap{padding:32px 14px}
  .partners-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}
  .partner-card{padding:12px 6px;border-radius:4px}
  .partner-logo-wrap{height:28px}
  .partner-logo-wrap img{max-height:24px;max-width:70px}
  .partner-name{font-size:7px;letter-spacing:.6px}
  .partner-text-logo{font-size:14px!important;letter-spacing:1px!important}
  .partner-carousel-card{min-width:100px;padding:12px 6px}
  .partner-carousel-card .partner-logo-wrap{height:28px}
  .partner-carousel-card .partner-logo-wrap img{max-height:24px;max-width:70px}
  .partner-carousel-name{font-size:7px;max-width:90px;min-height:20px}

  .about-img-wrap img{height:200px}
  .stats-row{grid-template-columns:1fr 1fr}
  .stat-box{padding:16px 10px}
  .stat-box-num{font-size:28px}
  .stat-box-lbl{font-size:8px;letter-spacing:1px}

  .svc-card{padding:24px 18px}
  .svc-bg-num{font-size:60px}
  .svc-name{font-size:20px}

  .img-strip{height:200px}
  .img-strip-content{left:14px;max-width:85%}
  .img-strip-content .section-title{font-size:24px}
  .img-strip-content p{font-size:12px}

  .why-grid{grid-template-columns:1fr!important;gap:18px}
  .why-num{font-size:42px}
  .why-ttl{font-size:18px}

  .testi{padding:28px 18px}
  .testi-quote{font-size:13px}

  .cta-strip{padding:32px 14px}
  .cta-txt{font-size:26px}
  .cta-sub{font-size:12px}

      .news-card   
  footer{padding:36px 14px 0}
  .footer-desc{font-size:12px}
  .f-col-ttl{font-size:15px}
  .f-links a{font-size:12px}
  .f-contact{font-size:12px}
  .footer-bottom p{font-size:10px}

  .divider{margin:0 14px}
  #aus-port-map{height:300px!important}

  .state-band{padding:28px 14px}
  .state-name{font-size:26px}
  .port-cards{grid-template-columns:1fr}

  .sdb-title{font-size:28px}
  .sdb-desc{font-size:14px}
  .sdb-items{grid-template-columns:1fr}

  .c-val{font-size:20px}
  .c-form{padding:22px 16px}
  .c-form-ttl{font-size:24px}
  .f-row{grid-template-columns:1fr}

  .office-map{height:160px}
  .office-body{padding:16px 16px 20px}
  .office-city{font-size:20px}

  /* Photo gallery inline grids */
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr!important}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr!important}
  /* Photo banner height scaling — stack on phone */
  [style*="height:380px"]{height:auto!important}
  [style*="height:340px"]{height:auto!important}
  [style*="grid-template-columns:1fr 1fr 1fr;gap:0"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1fr 1fr;gap:0"]{grid-template-columns:1fr!important}
}

/* --- PHOTO BANNER CHILDREN (ensure stacked items have height) --- */
@media(max-width:480px){
  [style*="height:380px"] > div,
  [style*="height:340px"] > div{
    min-height:180px!important;
  }
  [style*="height:380px"] > div img,
  [style*="height:340px"] > div img{
    height:180px!important;width:100%!important;object-fit:cover!important;
  }
}
@media(min-width:481px) and (max-width:768px){
  [style*="height:380px"] > div,
  [style*="height:340px"] > div{
    min-height:140px!important;
  }
}

/* --- GLOBAL IMAGE RESPONSIVENESS --- */
img{max-width:100%;height:auto}
.hero video{max-width:none}
.leaflet-tile-pane img,.leaflet-container img{max-width:none!important;height:auto!important}

/* Page hero photo banners responsive */
.page-hero[style*="background-image"] {background-size:cover!important;background-position:center!important}

/* --- TOUCH TARGETS --- */
@media(pointer:coarse){
  .btn-primary,.btn-ghost,.btn-dark,.btn-outline,.btn-white,.btn-ghost-w{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
    .nav-links a{min-height:44px;display:flex;align-items:center}
  .port-card{min-height:44px}
}

/* --- PARTNER CAROUSEL SPEED on small screens --- */
@media(max-width:768px){
  .partners-scroll-track{animation-duration:40s}
}
@media(max-width:480px){
  .partners-scroll-track{animation-duration:30s}
}

/* --- PRINT --- */
@media print{
  nav,.hero-scroll,.hamburger,.mobile-overlay,.cta-strip{display:none!important}
  section{padding:20px!important}
  .page{display:block!important}
  body{color:#000}
}

/* ─── RESPONSIVE FIXES ───
   Targeted overrides to eliminate overlap/overflow/glitches at portrait phone
   and narrow-tablet sizes. Layered on top of existing breakpoints. */

/* Hero: prevent the title from being cut off at the top on narrow screens.
   The base layout uses `align-items:flex-end` + `overflow:hidden`, so when the
   content is taller than the hero box it overflows UP and gets clipped.
   On narrow viewports, anchor content from the top, give nav clearance, and
   let the hero grow with its content while keeping a min-height floor. */
@media(max-width:960px){
  .hero{
    align-items:flex-start!important;     /* anchor content from the top */
    height:auto!important;                /* let hero grow with content */
    aspect-ratio:auto!important;
    overflow:visible!important;           /* never clip the title */
  }
  .hero-content{
    padding-top:clamp(60px,12vw,90px)!important;   /* clearance under nav */
    padding-bottom:140px!important;                /* clearance for absolute stats */
    width:100%;max-width:100%;
  }
  /* Prevent absolute layers from being clipped if overflow:visible reveals them */
  .hero-bg-anim,.hero video,.hero-overlay,.hero-grid-lines{
    border-radius:0;
  }
}
@media(max-width:480px){
  .hero{min-height:auto!important}        /* drop the 75vh floor on phones */
  .hero-content{
    padding-top:72px!important;
    padding-bottom:120px!important;
    padding-left:14px!important;padding-right:14px!important;
  }
  h1.hero-title{font-size:34px}
  h1.hero-title span{display:block;line-height:1.05}
}
@media(max-width:375px){
  .hero-content{
    padding-top:64px!important;
    padding-bottom:110px!important;
  }
  h1.hero-title{font-size:30px}
}

@media(max-width:768px){
  /* Australia map wrapper has inline padding:80px 60px 40px — cut on tablet */
  [style*="padding:80px 60px 40px"]{padding:48px 18px 32px!important}
  /* Map legend overlay: tighter on narrow screens */
  #aus-port-map + div{font-size:10px;padding:8px 10px!important;gap:8px!important}
  /* Featured photo-gallery tile inline spans cause uneven rows on a 2-col mobile grid */
  [style*="grid-column:span 2"][style*="grid-row:span 2"]{
    grid-column:span 2!important;grid-row:auto!important;aspect-ratio:16/9!important;
  }
}

@media(max-width:480px){
  /* Hero eyebrow can be too wide for the narrow column on phones */
  .hero-eyebrow{white-space:normal;text-align:left}
  .hero-eyebrow::before,.hero-eyebrow::after{width:18px}

  /* Allow hero buttons to flex on phones */
  .hero-actions{flex-wrap:wrap}

  /* Hero stats: spread evenly and never overrun the container */
  .hero-stats{left:14px!important;right:14px!important;width:auto;gap:6px;justify-content:space-between}
  .h-stat{padding-right:0;padding-left:6px;border-right:none;border-left:2px solid var(--crimson);text-align:left}
  .h-stat:first-child{padding-left:0;border-left:none}

  /* Reset featured tile spans on small phones so the 2-col gallery stacks evenly */
  [style*="grid-column:span 2"][style*="grid-row:span 2"]{
    grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3!important;
  }

  /* Australia map wrapper — even tighter padding on phones */
  [style*="padding:80px 60px 40px"]{padding:36px 14px 24px!important}

  /* Map legend: stack below map so it never overlaps tiles */
  #aus-port-map + div{
    position:relative!important;left:0!important;bottom:0!important;
    margin:8px 0;width:auto;border-radius:0 0 6px 6px;
  }

  /* Buttons should not assume short labels */
  .btn-dark,.btn-outline,.btn-white,.btn-ghost-w{
    white-space:normal;line-height:1.25;
  }

  /* Long page-hero/portloc-hero titles can overflow on narrow viewports */
  .page-hero h1,.portloc-hero h1{word-break:break-word;hyphens:auto}
  h1.hero-title{word-break:break-word}

  /* Inline section padding: 60px or 80px sides — cap horizontal overflow */
  [style*="padding:60px 60px"]{padding:36px 14px!important}
  [style*="padding:80px 60px"]{padding:36px 14px!important}

  /* Long names shouldn't push containers wider */
  .partner-carousel-name,.partner-name{overflow-wrap:anywhere}
}

/* Very narrow phones (iPhone SE / older Android, <=375px) */
@media(max-width:375px){
  nav{padding:0 10px}
  .nav-logo img{height:22px}

  .hero-content{padding:0 12px 100px}
  h1.hero-title{font-size:32px}
  .hero-sub{font-size:11.5px;margin-bottom:20px}
  .hero-eyebrow{font-size:8.5px;letter-spacing:2px}

  .h-stat-num{font-size:16px}
  .h-stat-label{font-size:6.5px;letter-spacing:.6px}

  /* Services strip: 3 per row with tighter padding */
  .services-grid{gap:5px}
  .services-grid .service-item{width:calc(33.33% - 4px);padding:8px 4px;font-size:8.5px;gap:3px}
  .service-item svg{width:16px;height:16px}

  /* Partner carousel cards even narrower */
  .partner-carousel-card{min-width:88px;padding:10px 5px}
  .partner-carousel-card .partner-logo-wrap img{max-width:60px}
  .partner-carousel-name{font-size:6.5px;max-width:78px}

  /* QR contact cards: stack so they never spill past 100% width */
  [style*="min-width:140px"][style*="max-width:200px"]{
    min-width:100%!important;max-width:100%!important;flex:1 1 100%!important;
  }

  /* Section title scale-down */
  .section-title{font-size:26px;margin-bottom:14px}
  .page-hero h1{font-size:30px}
  .portloc-hero h1{font-size:32px}
  .cta-txt{font-size:22px}

  /* Footer-bottom items shouldn't bunch */
  .footer-bottom{gap:8px}

  /* Force inline 4-col / 3-col / 2fr-1fr / 1fr-1fr grids to single column */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}

  /* Featured tile fully spans 1 col */
  [style*="grid-column:span 2"]{grid-column:auto!important}
  [style*="grid-row:span 2"]{grid-row:auto!important}
}

/* Cert cards: stack vertically on narrow screens, fully centered */
@media(max-width:960px){
  /* Force vertical stack starting at narrow tablets */
  .certs-inner{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:center!important;          /* center cards horizontally */
    justify-content:flex-start!important;
    gap:18px!important;
    width:100%!important;
  }
  .certs-eyebrow{
    flex-basis:auto!important;
    width:100%;text-align:center;
    margin-bottom:4px;
  }
  .cert-card{
    flex:0 0 auto!important;               /* neutralize flex:1 1 0 from base rule */
    align-self:center!important;
    display:flex!important;
    width:100%!important;
    max-width:420px!important;
    min-height:0!important;                /* let content drive height */
    margin:0 auto!important;
  }
  .cert-card .cert-meta{flex:1 1 auto;min-width:0}
  .cert-card .cert-title{line-height:1.15}
}
@media(max-width:480px){
  .certs-strip{padding:24px 14px}
  .certs-eyebrow{letter-spacing:2.5px;font-size:9px}
  .cert-card{
    max-width:100%!important;
    padding:14px 14px;gap:12px;
    align-items:center;
  }
  .cert-card .cert-sub{line-height:1.55}
}
@media(max-width:375px){
  .cert-card{flex-direction:column!important;align-items:flex-start!important;padding:14px;gap:10px}
  .cert-logo-wrap{width:44px!important;height:44px!important}
  .cert-card .cert-meta{width:100%}
  .cert-card .cert-title{font-size:13px}
  .cert-card .cert-sub{font-size:9px}
}

/* Universal safety net — prevent any element from causing horizontal overflow */
html,body{max-width:100vw}
img,video,iframe{max-width:100%}

/* Tablet 481-960px: shore up hero stats so they never collide with hero content */
@media(min-width:481px) and (max-width:960px){
  .hero-content{padding-bottom:130px}
  .hero-stats{left:28px;right:28px;justify-content:space-between;gap:14px}
  .h-stat{flex:1;min-width:0}
  .h-stat-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* ── Added: multi-page nav dropdown, breadcrumbs ── */
.nav-links li.has-dropdown{position:relative}
.nav-links .dropdown{
  /* No margin-top here on purpose: a gap between the link and the menu is an
     unhoverable dead zone that closes the menu before the cursor reaches it.
     The box starts flush against the link (top:100%) and the old gap is now
     internal padding-top, so the whole path from link to menu items stays
     inside one continuously-hoverable box. */
  display:none;position:absolute;top:100%;left:0;min-width:250px;
  background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.14);
  padding:14px 8px 8px;z-index:10001;
}
.nav-links li.has-dropdown:hover .dropdown,
.nav-links li.has-dropdown:focus-within .dropdown{display:block}
.nav-links .dropdown li{width:100%}
.nav-links .dropdown a{display:block;padding:9px 14px;font-size:12.5px;letter-spacing:0;border-radius:6px;white-space:nowrap;color:var(--navy)}
.nav-links .dropdown a:hover{background:var(--bg-alt);color:var(--crimson)}
@media (max-width:900px){
  .nav-links .dropdown{position:static;box-shadow:none;border:none;padding-top:4px;padding-left:14px;display:block!important}
}

.breadcrumb{
  font-size:11.5px;letter-spacing:.5px;color:#8a8a8a;padding:14px clamp(18px,5vw,60px) 0;
  max-width:1400px;margin:0 auto;
}
.breadcrumb a{color:#8a8a8a;text-decoration:none;border-bottom:1px dotted #ccc}
.breadcrumb a:hover{color:var(--crimson)}
.breadcrumb .bc-sep{margin:0 4px;color:#ccc}

.intro-copy{max-width:760px;font-family:'Libre Baskerville',serif;font-size:15px;line-height:1.85;color:#444;padding:0 clamp(18px,5vw,60px);margin:0 auto 8px}
.intro-copy + .intro-copy{margin-top:-10px}
.page-section-wrap{max-width:1400px;margin:0 auto;padding:36px clamp(18px,5vw,60px) 10px}
.cross-links{display:flex;flex-wrap:wrap;gap:10px;padding:0 clamp(18px,5vw,60px) 50px;max-width:1400px;margin:0 auto}
.cross-links a{
  font-size:12px;letter-spacing:.5px;padding:9px 16px;border:1px solid var(--border);border-radius:20px;
  color:var(--navy);text-decoration:none;background:#fff;
}
.cross-links a:hover{border-color:var(--crimson);color:var(--crimson)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;max-width:1400px;margin:0 auto;padding:10px clamp(18px,5vw,60px) 50px}
.hub-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:26px 24px;transition:box-shadow .2s,transform .2s;display:block;text-decoration:none;color:inherit}
.hub-card:hover{box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-3px)}
.hub-card .hc-num{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--crimson);opacity:.35;line-height:1}
.hub-card h3{font-family:'DM Sans',sans-serif;font-size:17px;margin:10px 0 8px;color:var(--navy)}
.hub-card p{font-family:'Libre Baskerville',serif;font-size:13px;line-height:1.7;color:#666}
.hub-card .hc-more{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--crimson);margin-top:12px;display:inline-block}
figure.local-photo{margin:0}
figure.local-photo figcaption{font-size:11px;color:#999;margin-top:6px}

/* ── Hero: static photo background (replaces the old video) ── */
.hero-bg-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 60%;z-index:1;
}
/* ── Hero: guarantee the box is tall enough for its own content.
   The old aspect-ratio(16/9) + max-height:100vh box could come out
   shorter than the eyebrow+title+subtitle+buttons+stats stack on very
   common laptop viewports (~1024-1400px wide, ~720-800px tall), and
   since the block is bottom-anchored (align-items:flex-end) inside an
   overflow:hidden box, the overflow was the TITLE - it got clipped off
   above the box and hidden behind the fixed nav. A firm min-height
   below the box's own overflow:hidden means the title always has room,
   confirmed against the actual measured content height across common
   desktop sizes. The sub-960px responsive rules already switch to
   height:auto and don't need this. ── */
@media (min-width:961px){
  .hero{min-height:1000px}
}
@media (max-width:960px){
  .hero-bg-photo{border-radius:0}
}
