/* ═══════════════════════════════════════
   RESPONSIVE STYLES — shared by all pages
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small)
═══════════════════════════════════════ */

/* ─── Hamburger Button (hidden on desktop) ─── */
.hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  width:36px;height:36px;cursor:pointer;background:none;border:none;padding:0;
  z-index:200;position:relative;
}
.hamburger span{
  display:block;width:22px;height:1.5px;background:var(--white);
  transition:transform 0.3s,opacity 0.3s;margin:3px 0;
}
.hamburger.active span:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg);}

/* ─── Mobile Nav Overlay ─── */
.nav-overlay{
  display:none;position:fixed;inset:0;z-index:99;
  background:rgba(13,27,42,0.97);backdrop-filter:blur(20px);
  flex-direction:column;justify-content:center;align-items:center;
  opacity:0;pointer-events:none;transition:opacity 0.35s;
}
.nav-overlay.active{opacity:1;pointer-events:all;}
.nav-overlay ul{list-style:none;text-align:center;padding:0;margin:0;}
.nav-overlay ul li{margin:16px 0;}
.nav-overlay ul li a{
  font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;
  color:var(--white);text-decoration:none;letter-spacing:1px;
  transition:color 0.2s;
}
.nav-overlay ul li a:hover{color:var(--gold);}
.nav-overlay .nav-switch-btn{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);background:rgba(201,169,110,0.1);
  border:1px solid rgba(201,169,110,0.3);padding:10px 24px;cursor:pointer;
  margin-top:24px;transition:background 0.2s;text-decoration:none;display:inline-block;
}
.nav-overlay .nav-switch-btn:hover{background:rgba(201,169,110,0.2);}

/* Hotel-mode overlay */
body.hotel-page .nav-overlay{background:rgba(26,15,8,0.97);}


/* ════════════════════════════════
   TABLET — max-width: 1024px
════════════════════════════════ */
@media(max-width:1024px){

  /* Nav: show hamburger, hide desktop links */
  .hamburger{display:flex;}
  .nav-links{display:none !important;}
  .nav-overlay{display:flex;}
  nav{padding:0 32px;height:64px;}
  .nav-logo img{height:28px;}
  .nav-logo{margin-right:0;}

  /* ─ Landing ─ */
  #landing{flex-direction:column;}
  .land-panel{padding:40px 32px;min-height:50vh;}
  .land-panel:hover{flex:1;}
  .land-divider{
    top:50%;bottom:auto;left:0;right:0;width:auto;height:1px;
    background:linear-gradient(to right,transparent,rgba(255,255,255,0.22) 25%,rgba(255,255,255,0.22) 75%,transparent);
  }
  .land-logo{padding-top:32px;}
  .land-logo img{height:36px;}
  .panel-title{font-size:clamp(32px,6vw,52px);min-height:unset !important;}
  .panel-desc{opacity:1;transform:translateY(0);}

  /* ─ Hero (Logistics) ─ */
  #hero{min-height:600px;}
  .hero-content{padding:0 32px 80px;max-width:100%;}
  .hero-scroll-indicator{right:32px;bottom:32px;}

  /* ─ Hotel Hero ─ */
  .h-hero-content{padding:0 32px 80px;max-width:100%;}

  /* ─ Intro ─ */
  #intro{grid-template-columns:1fr;gap:40px;padding:80px 32px;}
  #h-intro{grid-template-columns:1fr;gap:40px;padding:80px 32px;}

  /* ─ Services (Logistics) ─ */
  #services{padding:80px 32px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .service-card:nth-child(2){border-right:none;}

  /* ─ Services (Hotels) ─ */
  #h-services{padding:80px 32px;}
  .h-services-grid{grid-template-columns:1fr;}

  /* ─ Why ─ */
  #why{padding:80px 32px;}
  .why-top{grid-template-columns:1fr;gap:40px;}
  .why-cards{grid-template-columns:repeat(2,1fr);}
  #h-why{padding:80px 32px;}
  #h-why .why-top{flex-direction:column;gap:40px;}
  .h-why-cards{grid-template-columns:repeat(2,1fr);}

  /* ─ Track Record (Logistics) ─ */
  #track-record{padding:80px 32px;}
  .project-row{grid-template-columns:60px 1fr;gap:16px;padding:24px 12px;margin:0 -12px;}
  .project-tag,.project-meta{display:none;}

  /* ─ Track Record (Hotels) ─ */
  #h-projects{padding:80px 32px;}
  .h-project-row{grid-template-columns:60px 1fr;gap:12px;}
  .h-project-tag,.h-project-meta{display:none;}

  /* ─ Team ─ */
  #team{padding:80px 32px;}
  .team-grid{grid-template-columns:1fr;}
  #h-team{padding:80px 32px;}
  .h-team-grid{grid-template-columns:1fr;}
  .h-highlights-grid{grid-template-columns:repeat(2,1fr);}

  /* ─ Recognition ─ */
  #recognition{padding:80px 32px;}
  .recognition-grid{grid-template-columns:repeat(2,1fr);gap:24px;}

  /* ─ Portfolio (Hotels) ─ */
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}

  /* ─ Contact ─ */
  #contact{padding:80px 32px 60px;}
  .contact-info-grid{grid-template-columns:1fr;gap:32px;}
  #h-contact{padding:80px 32px 60px;}

  /* ─ Section headers ─ */
  .section-header{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:48px;}
  .section-header-right{text-align:left;max-width:100%;}

  /* ─ Footer ─ */
  footer{flex-direction:column;align-items:flex-start;gap:16px;}
}


/* ════════════════════════════════
   MOBILE — max-width: 768px
════════════════════════════════ */
@media(max-width:768px){

  /* Landing */
  .land-panel{padding:32px 24px;min-height:45vh;}
  .land-logo{padding-top:24px;}
  .land-logo img{height:30px;}
  .panel-title{font-size:clamp(28px,8vw,44px);}
  .panel-desc{font-size:12px;max-width:100%;margin-bottom:24px;}
  .panel-label{font-size:9px;}

  /* Nav */
  nav{padding:0 24px;height:56px;}
  .nav-logo img{height:24px;}
  .nav-logo-divider{height:20px;}
  .nav-sector{font-size:8px;}
  .nav-overlay ul li a{font-size:26px;}

  /* Hero */
  #hero{min-height:auto;height:85vh;}
  .hero-content{padding:0 24px 60px;}
  .hero-title{margin-bottom:20px;}
  .hero-desc{font-size:14px;max-width:100%;margin-bottom:32px;}
  .hero-eyebrow{font-size:10px;letter-spacing:3px;margin-bottom:16px;}
  .hero-scroll-indicator{display:none;}

  /* Hotel Hero */
  #h-hero{min-height:auto;height:85vh;}
  .h-hero-content{padding:0 24px 60px;}
  .h-hero-title{margin-bottom:20px;}
  .h-hero-desc{font-size:14px;max-width:100%;margin-bottom:32px;}
  .h-hero-eyebrow{font-size:10px;letter-spacing:3px;margin-bottom:16px;}

  /* Intro */
  #intro{padding:60px 24px;}
  #h-intro{padding:60px 24px;}

  /* Services */
  #services{padding:60px 24px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .service-card{border-right:none;border-bottom:1px solid var(--silver-light);padding:24px 16px;}
  .service-card:nth-child(odd){border-right:1px solid var(--silver-light);}
  .service-card:nth-last-child(-n+2){border-bottom:none;}
  .service-num{font-size:9px;letter-spacing:2px;}
  .service-title{font-size:clamp(16px,4.5vw,22px);}
  .service-desc{font-size:10px;margin-bottom:10px;}
  .service-items li{font-size:11px;padding-bottom:3px;}
  #h-services{padding:60px 24px;}

  /* Why */
  #why{padding:60px 24px;}
  .why-top-right{grid-template-columns:1fr !important;gap:20px;}
  .why-cards{grid-template-columns:1fr;}
  #h-why{padding:60px 24px;}
  #h-why .why-top-right{grid-template-columns:1fr;gap:16px;}
  .h-why-cards{grid-template-columns:1fr;}

  /* Track Record */
  #track-record{padding:60px 24px;}
  .project-row{grid-template-columns:40px 1fr;gap:12px;padding:20px 8px;margin:0 -8px;}
  .project-name{font-size:18px;}
  .project-name span{font-size:10px;}
  #h-projects{padding:60px 24px;}

  /* Team */
  #team{padding:60px 24px;}
  .team-card{padding:32px 24px;}
  .team-name{font-size:28px;}
  #h-team{padding:60px 24px;}
  .h-team-card{padding:32px 24px;}
  .h-highlights-grid{grid-template-columns:1fr;}

  /* Recognition */
  #recognition{padding:60px 24px;}
  .recognition-grid{grid-template-columns:1fr;gap:16px;}
  .recognition-card{padding:28px 24px;}

  /* Portfolio */
  .portfolio-grid{grid-template-columns:1fr;}

  /* Contact */
  #contact{padding:60px 24px 48px;}
  #h-contact{padding:60px 24px 48px;}

  /* Section header */
  .section-header{margin-bottom:36px;padding-bottom:28px;}

  /* Stats */
  .stat-num{font-size:40px;}
  .stat-unit{font-size:18px;}
}


/* ════════════════════════════════
   SMALL MOBILE — max-width: 480px
════════════════════════════════ */
@media(max-width:480px){

  /* Landing */
  .land-panel{padding:28px 20px;}
  .panel-title{font-size:clamp(24px,7vw,36px);}
  .panel-cta{font-size:9px;}

  /* Hero */
  .hero-content{padding:0 20px 48px;}
  .h-hero-content{padding:0 20px 48px;}

  /* Sections */
  #intro, #h-intro{padding:48px 20px;}
  #services, #h-services{padding:48px 20px;}
  .service-card{padding:20px 12px;}
  .service-title{font-size:clamp(14px,4vw,19px);}
  .service-items li{font-size:10px;}
  #why, #h-why{padding:48px 20px;}
  #track-record, #h-projects{padding:48px 20px;}
  #team, #h-team{padding:48px 20px;}
  #recognition{padding:48px 20px;}
  #contact, #h-contact{padding:48px 20px 40px;}

  /* Nav overlay */
  .nav-overlay ul li a{font-size:22px;}
  .nav-overlay ul li{margin:12px 0;}

  /* Footer */
  footer{padding-top:24px;}
  .footer-logo-name{font-size:16px;letter-spacing:4px;}
  footer p{font-size:9px;}
}