/* =========================================================
   RESPONSIVE.CSS
   CLEAN / FINAL VERSION
========================================================= */


/* =========================================================
   TABLET / MOBILE — 920px
========================================================= */

@media (max-width:920px){

  /* -------------------------------------------------------
     OWNER
  ------------------------------------------------------- */

  #owner .owner-photo{
    margin:auto;
  }

  #owner .owner-photo::before{
    top:-12px;
    left:-12px;
    right:12px;
    bottom:12px;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero{
    grid-template-columns:1fr;
  }

  .hero-copy{
    margin:0;
    padding:56px 24px;
    max-width:none;
  }


  /* -------------------------------------------------------
     STATS
  ------------------------------------------------------- */

  .stats .container{
    grid-template-columns:repeat(2,1fr);
  }

  .stat{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.12);
    padding-bottom:14px;
  }


  /* -------------------------------------------------------
     ABOUT / FACTORIES
  ------------------------------------------------------- */

  .about .container,
  .factories-block .container{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     STEPS
  ------------------------------------------------------- */

  .steps{
    grid-template-columns:1fr 1fr;
    row-gap:30px;
  }

  .step-number::after{
    display:none;
  }


  /* -------------------------------------------------------
     BUSINESS
  ------------------------------------------------------- */

  .business .container{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     PRODUCTS
  ------------------------------------------------------- */

  .products-full .grid{
    grid-template-columns:1fr 1fr;
  }


  /* -------------------------------------------------------
     SUSTAINABILITY / CONTENT
  ------------------------------------------------------- */

  .sustain .grid,
  .content-list{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     CONTACT
  ------------------------------------------------------- */

  .contact-grid{
    grid-template-columns:1fr;
  }

  .contact-form{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     FOOTER STRIP
  ------------------------------------------------------- */

  .foot-strip .container{
    grid-template-columns:1fr 1fr;
  }


  /* -------------------------------------------------------
     MOBILE NAVIGATION
  ------------------------------------------------------- */

  .nav-links{
    position:fixed;
    top:78px;
    left:0;
    right:0;

    background:#fff;

    flex-direction:column;
    align-items:flex-start;

    padding:20px 24px;

    border-bottom:1px solid var(--line);

    display:none;

    gap:16px;

    z-index:60;
  }

  .nav-links.open{
    display:flex;
  }

  .burger{
    display:block;
  }

  nav .btn-primary{
    display:none;
  }


  /* -------------------------------------------------------
     COUNTRY GRID
  ------------------------------------------------------- */

  .country-grid{
    grid-template-columns:repeat(4,1fr);
  }


  /* -------------------------------------------------------
     CONTENT LIST
  ------------------------------------------------------- */

  .content-list-4{
    grid-template-columns:1fr 1fr;
  }


  /* -------------------------------------------------------
     TWO COLUMN CARDS
  ------------------------------------------------------- */

  .two-col-cards{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     STEPS 8
  ------------------------------------------------------- */

  .steps-8{
    grid-template-columns:repeat(4,1fr);
    row-gap:30px;
  }


  /* -------------------------------------------------------
     PHOTO GRID
  ------------------------------------------------------- */

  .photo-grid-static{
    grid-template-columns:repeat(2,1fr);
  }


  /* -------------------------------------------------------
     FEATURE / GALLERY / CAREER
  ------------------------------------------------------- */

  .feature-grid{
    grid-template-columns:1fr 1fr;
  }

  .gallery-grid{
    grid-template-columns:1fr 1fr;
  }

  .content-list-5{
    grid-template-columns:1fr 1fr;
  }

  .career-hero h1{
    font-size:30px;
  }


  /* -------------------------------------------------------
     OWNER MOBILE LAYOUT
  ------------------------------------------------------- */

  #owner .container{
    grid-template-columns:1fr;

    grid-template-areas:
      "title"
      "photo"
      "desc";

    row-gap:16px;
  }

  .about-stats{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     RESERVE SPACE FOR FLOATING BUTTONS
  ------------------------------------------------------- */

  footer.site{
    padding-bottom:60px;
  }

  /* -------------------------------------------------------
     FLOATING CONTACT BUTTON
  ------------------------------------------------------- */

  .mobile-contact-btn{
    display:flex !important;

    align-items:center;
    justify-content:center;

    gap:8px;

    position:fixed !important;

    bottom:18px !important;
    left:18px !important;

    z-index:9999 !important;

    padding:12px 18px;

    min-height:44px;

    border-radius:30px;

    background:#c9a24b !important;
    color:#0b2148 !important;

    border:1px solid rgba(11,33,72,.12);

    font-size:13px;
    font-weight:700;

    text-decoration:none;

    box-shadow:
      0 10px 26px rgba(11,33,72,.25);
  }

  .mobile-contact-btn svg{
    color:#0b2148 !important;
    stroke:#0b2148 !important;
  }


  /* -------------------------------------------------------
     FLOATING MENU BUTTON
  ------------------------------------------------------- */

  .side-float-trigger{
    display:flex !important;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    gap:4px;

    position:fixed !important;

    bottom:18px !important;
    right:18px !important;

    z-index:10000 !important;

    width:48px;
    height:48px;

    padding:0;

    border-radius:50%;

    background:#0b2148 !important;

    border:none;

    cursor:pointer;

    box-shadow:
      0 10px 26px rgba(11,33,72,.30);
  }

  .side-float-trigger span{
    display:block;

    width:19px;
    height:2px;

    background:#fff;

    border-radius:2px;
  }


  /* -------------------------------------------------------
     MOBILE SIDE FLOAT BACKDROP
  ------------------------------------------------------- */

  .side-float-backdrop{
    display:block;

    position:fixed;

    inset:0;

    z-index:10001;

    background:rgba(9,26,59,.40);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    opacity:0;
    pointer-events:none;

    transition:
      opacity .3s ease;
  }

  .side-float-backdrop.open{
    opacity:1;
    pointer-events:auto;
  }


  /* -------------------------------------------------------
     MOBILE SIDE FLOAT PANEL
  ------------------------------------------------------- */

  .side-float{
    position:fixed;

    top:50%;
    left:50%;
    right:auto;

    width:min(320px,86vw);

    max-height:80vh;

    overflow-y:auto;

    z-index:10002;

    transform:
      translate(-50%,-50%)
      scale(.92);

    opacity:0;

    pointer-events:none;

    transition:
      opacity .3s ease,
      transform .3s ease;
  }

  .side-float.open{
    opacity:1;

    pointer-events:auto;

    transform:
      translate(-50%,-50%)
      scale(1);
  }


  /* -------------------------------------------------------
     MOBILE SIDE FLOAT CLOSE
  ------------------------------------------------------- */

  .side-float-close{
    display:block;

    position:absolute;

    top:10px;
    right:14px;

    background:none;

    border:none;

    font-size:22px;

    color:var(--muted);

    cursor:pointer;

    line-height:1;
  }

}


/* =========================================================
   MOBILE — 600px
========================================================= */

@media (max-width:600px){

  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero-copy h1{
    font-size:32px;
  }


  /* -------------------------------------------------------
     PAGE HEADER
  ------------------------------------------------------- */

  .page-header h1{
    font-size:28px;
  }


  /* -------------------------------------------------------
     PRODUCTS
  ------------------------------------------------------- */

  .products-full .grid{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     COUNTRY GRID
  ------------------------------------------------------- */

  .country-grid{
    grid-template-columns:1fr 1fr;
  }


  /* -------------------------------------------------------
     CONTENT LIST
  ------------------------------------------------------- */

  .content-list-4{
    grid-template-columns:1fr;
  }

  .content-list-2,
  .content-list-3{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     STEPS
  ------------------------------------------------------- */

  .steps-4,
  .steps-8{
    grid-template-columns:1fr 1fr;
    row-gap:30px;
  }

  .steps-5{
    grid-template-columns:1fr 1fr;
    row-gap:30px;
  }

  .steps-6{
    grid-template-columns:1fr 1fr;
    row-gap:30px;
  }


  /* -------------------------------------------------------
     SAMPLE STATS
  ------------------------------------------------------- */

  .sample-stats{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     UNIT GRID
  ------------------------------------------------------- */

  .unit-grid{
    grid-template-columns:1fr;
  }

  .sample-stats[style]{
    grid-template-columns:1fr 1fr !important;
  }

  .sample-stats .stat-block{
    min-width:0;
  }

  .sample-stats .stat-block div[style]{
    font-size:12px !important;
    line-height:1.5 !important;
  }

  .stat-block{
  text-align:center;padding:20px;border-radius:14px;
  background:linear-gradient(180deg,#fff,#f7f9fc);border:1px solid var(--line);
  min-width:0;overflow-wrap:break-word;
}


  /* -------------------------------------------------------
     MINI GALLERY
  ------------------------------------------------------- */

  .mini-gallery{
    grid-template-columns:1fr 1fr;
  }


  /* -------------------------------------------------------
     DESTINATION LABEL
  ------------------------------------------------------- */

  .dest-label{
    font-size:10px;
  }


  /* -------------------------------------------------------
     VISUAL STACK
  ------------------------------------------------------- */

  .visual-stack{
    gap:14px;
  }


  /* -------------------------------------------------------
     FEATURE / GALLERY
  ------------------------------------------------------- */

  .feature-grid,
  .gallery-grid,
  .content-list-5{
    grid-template-columns:1fr;
  }


  /* -------------------------------------------------------
     PREMIUM MOBILE TABS
  ------------------------------------------------------- */

  .tab-bar{
    display:grid;

    grid-template-columns:
      repeat(2,1fr);

    gap:12px;

    width:100%;
    max-width:320px;

    margin:20px auto 4px;

    background:transparent;

    padding:0;

    border:none;
  }

  .tab-panel{
    padding-top:16px !important;
  }

  .tab-btn{
    width:100%;
    height:50px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:12px;

    background:#fff;

    border:1px solid var(--line);

    box-shadow:
      0 8px 22px rgba(11,33,72,.08);

    transition:.25s;
  }

  .tab-btn:hover{
    transform:translateY(-2px);
  }

  .tab-btn.active{
    background:var(--navy);

    color:#fff;

    border-color:var(--navy);

    box-shadow:
      0 12px 30px rgba(11,33,72,.28);
  }

  .tab-btn:last-child{
    grid-column:1 / span 2;

    width:100%;
  }


  /* -------------------------------------------------------
     SMALL SCREEN FLOATING BUTTONS
  ------------------------------------------------------- */

  .mobile-contact-btn{
    left:12px !important;
    bottom:12px !important;

    min-width:88px;

    min-height:42px;

    padding:10px 14px;

    font-size:11px;
  }

  .side-float-trigger{
    right:12px !important;
    bottom:12px !important;

    width:44px;
    height:44px;
  }

}


/* =========================================================
   LARGE DESKTOP — 1700px
========================================================= */

@media (min-width:1700px){

  .container{
    max-width:1600px;
  }

}

.hero{
  grid-template-columns:1fr;
}

.hero-copy{
  margin:0;
  padding:56px 24px;
  max-width:none;
}

@media (max-width:600px){

  .hero{
    min-height:525px !important;

    background-size:cover !important;
    background-position:64% center !important;

    background-image:
      linear-gradient(180deg, rgba(11,33,72,.55) 0%, rgba(11,33,72,.72) 45%, rgba(11,33,72,.85) 100%),
      url('../images/hero.jpg') !important;
  }

  .hero-copy .eyebrow{
    color:#f0d9a8 !important;
  }

  .hero-copy h1,
  .hero-copy p{
    color:#fff !important;
  }

  .hero-copy p{
    color:rgba(255,255,255,.85) !important;
  }

  .hero-copy{
    padding:
      34px 20px 28px !important;
  }

  .hero-copy h1{
    font-size:34px !important;
    line-height:1.08 !important;
    margin-bottom:13px !important;
  }

  .hero-copy p{
    font-size:13.5px !important;
    line-height:1.55 !important;
    margin-bottom:20px !important;
    max-width:320px !important;
  }

  .hero-actions .btn{
    min-height:42px !important;
    padding:0 16px !important;
    font-size:11.5px !important;
  }

  .hero-actions .btn-primary{
    background:#c9a24b !important;
    color:#0b2148 !important;
    border-color:#c9a24b !important;
  }

  .hero-actions .btn-outline{
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.6) !important;
  }
}

@media (max-width:380px){

  .hero{
    min-height:505px !important;
    background-position:65% center !important;
  }

  .hero-copy h1{
    font-size:31px !important;
  }

  .hero-copy p{
    font-size:13px !important;
  }
}