:root{
 --beige:#e9dfcf;
 --beige2:#f4eee4;
 --paper:#fbf8f1;
 --cream:#f7f1e7;
 --brown:#342c25;
 --brown2:#51463c;
 --gold:#b58b4c;
 --gold2:#d0aa68;
 --muted:#786f66;
 --line:#d9cec0;
 --soft:#eee6da;
 --white:#fffdf8;
}

*{
 box-sizing:border-box;
}

html{
 scroll-behavior:smooth;
}

body{
 margin:0;
 background:var(--beige2);
 color:var(--brown);
 font-family:"DM Sans",sans-serif;
 overflow-x:hidden;
}

a{
 text-decoration:none;
 color:inherit;
}

img{
 display:block;
 width:100%;
}

.container{
 width:min(1200px,94vw);
 margin:auto;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav{
 position:fixed;
 z-index:50;
 top:0;
 left:0;
 right:0;
 padding:7px 0;
 transition:.35s;
}

.nav.scrolled{
 background:rgba(244,238,228,.91);
 backdrop-filter:blur(18px);
 border-bottom:1px solid rgba(81,70,60,.12);
}

.navrow{
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.logo{
 display:block;
}

.logo img{
 height:52px;
 width:auto;
 max-width:300px;
 object-fit:contain;
 object-position:left center;
}

.links{
 display:flex;
 gap:22px;
 font:500 10px "Plus Jakarta Sans";
 color:#71675e;
}

.links a:hover{
 color:var(--gold);
}

.navbtn{
 border:1px solid #aa9d8e;
 border-radius:100px;
 padding:8px 13px;
 font:600 9px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
}


/* =========================================================
   HERO
========================================================= */

.hero{
 min-height:82svh;
 position:relative;
 display:flex;
 align-items:center;
 overflow:hidden;
 background:var(--beige);
}

.hero:before{
 content:"";
 position:absolute;
 width:68vw;
 height:68vw;
 max-width:850px;
 max-height:850px;
 border-radius:50%;
 right:-25vw;
 top:50%;
 transform:translateY(-50%);
 background:rgba(255,253,248,.42);
 border:1px solid rgba(181,139,76,.17);
}

.hero:after{
 content:"";
 position:absolute;
 width:52vw;
 height:52vw;
 max-width:650px;
 max-height:650px;
 border-radius:50%;
 right:-16vw;
 top:50%;
 transform:translateY(-50%);
 border:1px solid rgba(181,139,76,.14);
}

.hero-photo{
 position:absolute;
 z-index:1;
 width:42vw;
 height:62vh;
 right:8vw;
 top:19vh;
 overflow:hidden;
 border-radius:26px;
 box-shadow:0 26px 70px rgba(52,44,37,.15);
}

.hero-photo img{
 height:100%;
 object-fit:cover;
 filter:saturate(.7) sepia(.04);
 animation:photo 1.2s ease both;
}

@keyframes photo{
 from{
  opacity:.2;
  transform:scale(1.07);
 }
 to{
  opacity:1;
  transform:scale(1);
 }
}

.hero-content{
 position:relative;
 z-index:3;
 padding:105px 0 55px;
}

.eyebrow{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.22em;
 text-transform:uppercase;
 color:var(--gold);
}

.hero h1{
 font:700 clamp(64px,10.5vw,148px)/.79 "Plus Jakarta Sans";
 letter-spacing:-.085em;
 margin:16px 0 24px;
 max-width:850px;
}

.hero h1 span{
 color:var(--gold);
}

.hero-bottom{
 display:flex;
 justify-content:space-between;
 align-items:end;
 max-width:720px;
 gap:30px;
}

.hero-copy{
 max-width:500px;
 color:#6f675f;
 font-size:13px;
 line-height:1.65;
}

.btn{
 display:inline-flex;
 align-items:center;
 gap:10px;
 background:var(--brown);
 color:var(--white);
 padding:14px 19px;
 border-radius:100px;
 font:700 10px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
 transition:.3s;
}

.btn:hover{
 background:var(--brown2);
 transform:translateY(-2px);
}

.hero-note{
 position:absolute;
 z-index:3;
 right:4vw;
 bottom:29px;
 font:8px "Plus Jakarta Sans";
 letter-spacing:.16em;
 color:#8d8276;
 text-transform:uppercase;
}


/* =========================================================
   MARQUEE BAND
========================================================= */

.band{
 background:var(--brown);
 color:#f8f1e7;
 overflow:hidden;
 white-space:nowrap;
}

.bandtrack{
 display:inline-flex;
 gap:43px;
 padding:9px 0;
 font:600 9px "Plus Jakarta Sans";
 letter-spacing:.15em;
 text-transform:uppercase;
 animation:marq 24s linear infinite;
}

@keyframes marq{
 to{
  transform:translateX(-50%);
 }
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

section{
 padding:68px 0;
}

.intro{
 background:var(--paper);
}

.grid2{
 display:grid;
 grid-template-columns:.65fr 1.65fr;
 gap:45px;
}

.label{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.21em;
 text-transform:uppercase;
 color:var(--gold);
}

.title{
 font:600 clamp(44px,5.8vw,81px)/.9 "Plus Jakarta Sans";
 letter-spacing:-.07em;
 margin:0 0 18px;
}

.title span{
 color:var(--gold);
}

.copy{
 font-size:14px;
 line-height:1.7;
 color:var(--muted);
 max-width:710px;
}

.line{
 margin-top:22px;
 border-top:1px solid var(--line);
 padding-top:14px;
 font:500 9px "Plus Jakarta Sans";
 letter-spacing:.14em;
 color:#8b8177;
}


/* =========================================================
   WORK / GALLERY
========================================================= */

.work{
 background:var(--beige2);
}

.workhead{
 display:flex;
 justify-content:space-between;
 align-items:end;
 gap:30px;
 margin-bottom:32px;
}

.workhead h2{
 font:600 clamp(48px,6.5vw,92px)/.82 "Plus Jakarta Sans";
 letter-spacing:-.08em;
 margin:10px 0 0;
}

.workhead h2 span{
 color:var(--gold);
}

.workhead p{
 max-width:340px;
 color:var(--muted);
 font-size:11px;
 line-height:1.65;
}

.gallery{
 display:grid;
 grid-template-columns:1.3fr .7fr;
 gap:10px;
}

.item{
 position:relative;
 overflow:hidden;
 background:#ded3c4;
 border-radius:16px;
}

.item img{
 height:100%;
 object-fit:cover;
 filter:saturate(.74);
 transition:1s cubic-bezier(.2,.8,.2,1);
}

.item:hover img{
 transform:scale(1.045);
 filter:saturate(.9);
}

.item:after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(
  transparent 55%,
  rgba(52,44,37,.58)
 );
}

.item1{
 height:520px;
}

.item2{
 height:250px;
 margin-top:45px;
}

.item3{
 height:250px;
 margin-top:-20px;
}

.item4,
.item5{
 height:300px;
 margin-top:8px;
}

.item6{
 grid-column:1/3;
 height:340px;
 margin-top:0;
}

.info{
 position:absolute;
 z-index:2;
 left:15px;
 right:15px;
 bottom:13px;
 display:flex;
 justify-content:space-between;
 color:white;
}

.info strong{
 font:600 10px "Plus Jakarta Sans";
 letter-spacing:.13em;
 text-transform:uppercase;
}

.info small{
 font:600 15px "Plus Jakarta Sans";
 color:#f0d49e;
}

.worknote{
 text-align:center;
 padding:52px 0 5px;
}

.worknote h3{
 font:500 clamp(32px,5vw,64px)/.98 "Plus Jakarta Sans";
 letter-spacing:-.06em;
 max-width:850px;
 margin:auto;
}

.worknote span{
 color:var(--gold);
}


/* =========================================================
   SERVICES
========================================================= */

.services{
 background:var(--brown);
 color:var(--white);
}

.services .label{
 color:var(--gold2);
}

.services .title{
 color:white;
}

.service{
 display:grid;
 grid-template-columns:40px 1fr 300px 16px;
 gap:14px;
 align-items:center;
 border-top:1px solid rgba(255,253,248,.14);
 padding:19px 0;
 transition:.3s;
}

.service:last-child{
 border-bottom:1px solid rgba(255,253,248,.14);
}

.service:hover{
 background:rgba(255,255,255,.035);
 padding-left:7px;
}

.service b{
 color:var(--gold2);
 font:600 10px "Plus Jakarta Sans";
}

.service h3{
 font:600 21px "Plus Jakarta Sans";
 margin:0;
}

.service p{
 font-size:10px;
 line-height:1.7;
 color:#c6bbb0;
 margin:0;
}

.arrow{
 color:var(--gold2);
}


/* =========================================================
   EXPORT
========================================================= */

.export{
 background:var(--paper);
 position:relative;
 overflow:hidden;
}

.export:before{
 content:"GLOBAL";
 position:absolute;
 right:-5vw;
 top:25px;
 font:800 clamp(100px,18vw,260px)/.8 "Plus Jakarta Sans";
 letter-spacing:-.09em;
 color:rgba(181,139,76,.055);
 pointer-events:none;
}

.exporthead{
 display:grid;
 grid-template-columns:1fr .8fr;
 gap:40px;
 align-items:end;
 margin-bottom:35px;
}

.exporthead h2{
 font:600 clamp(48px,6.6vw,92px)/.82 "Plus Jakarta Sans";
 letter-spacing:-.08em;
 margin:14px 0 0;
}

.exporthead h2 span{
 color:var(--gold);
}

.exportlead{
 max-width:430px;
 color:var(--muted);
 font-size:13px;
 line-height:1.9;
}

.exportgrid{
 display:grid;
 grid-template-columns:1.2fr .8fr;
 gap:10px;
}

.exportcard{
 background:var(--soft);
 border:1px solid rgba(181,139,76,.17);
 border-radius:16px;
 padding:24px;
 min-height:205px;
 position:relative;
 overflow:hidden;
}

.exportcard.dark{
 background:var(--brown);
 color:var(--white);
}

.exportcard h3{
 font:600 24px/1.05 "Plus Jakarta Sans";
 letter-spacing:-.045em;
 margin:12px 0 9px;
}

.exportcard p{
 margin:0;
 max-width:500px;
 font-size:11px;
 line-height:1.65;
 color:var(--muted);
}

.exportcard.dark p{
 color:#c8bdb2;
}

.exportnum{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.18em;
 color:var(--gold);
 text-transform:uppercase;
}

.exportsteps{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:1px;
 margin-top:10px;
 border:1px solid var(--line);
 border-radius:16px;
 overflow:hidden;
 background:var(--line);
}

.exportstep{
 background:var(--paper);
 padding:19px 16px;
 min-height:120px;
}

.exportstep b{
 display:block;
 font:600 10px "Plus Jakarta Sans";
 color:var(--gold);
 margin-bottom:17px;
}

.exportstep strong{
 display:block;
 font:600 14px "Plus Jakarta Sans";
 margin-bottom:8px;
}

.exportstep span{
 font-size:10px;
 line-height:1.65;
 color:var(--muted);
}

.exportbadge{
 position:absolute;
 right:28px;
 bottom:25px;
 border:1px solid rgba(181,139,76,.38);
 border-radius:100px;
 padding:10px 13px;
 font:600 8px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
 color:var(--gold);
}

.exportcta{
 margin-top:10px;
 background:var(--gold);
 color:var(--white);
 border-radius:16px;
 padding:23px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
}

.exportcta strong{
 font:600 clamp(25px,3vw,38px)/1 "Plus Jakarta Sans";
 letter-spacing:-.05em;
}

.exportcta p{
 margin:7px 0 0;
 color:#f3e2c5;
 font-size:11px;
 line-height:1.7;
}

.exportcta .btn{
 background:var(--brown);
}


/* =========================================================
   EXPORT MINI
========================================================= */

.exportmini{
 background:var(--cream);
 padding:45px 0;
 border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
}

.exportmini-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:1px;
 background:var(--line);
 border:1px solid var(--line);
}

.exportmini-item{
 background:var(--cream);
 padding:24px;
}

.exportmini-item strong{
 display:block;
 font:600 14px "Plus Jakarta Sans";
 margin-bottom:7px;
}

.exportmini-item span{
 font-size:10px;
 line-height:1.7;
 color:var(--muted);
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy{
 background:var(--soft);
}

.philogrid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:45px;
 align-items:center;
}

.philosophy h2{
 font:600 clamp(44px,5.7vw,78px)/.9 "Plus Jakarta Sans";
 letter-spacing:-.07em;
 margin:14px 0 24px;
}

.philosophy h2 span{
 color:var(--gold);
}

.philosophy p{
 font-size:14px;
 line-height:1.9;
 color:#6f7771;
}

.softcard{
 background:rgba(255,253,248,.58);
 border:1px solid rgba(181,139,76,.2);
 padding:24px;
 min-height:260px;
 border-radius:16px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
}

.softtop{
 display:flex;
 justify-content:space-between;
 font:8px "Plus Jakarta Sans";
 letter-spacing:.13em;
 color:#8a8178;
}

.rings{
 width:145px;
 height:145px;
 border-radius:50%;
 border:1px solid rgba(181,139,76,.42);
 margin:auto;
 position:relative;
 display:grid;
 place-items:center;
}

.rings:before,
.rings:after{
 content:"";
 position:absolute;
 border:1px solid rgba(181,139,76,.25);
 border-radius:50%;
 inset:16px;
}

.rings:after{
 inset:40px;
 border-color:rgba(181,139,76,.42);
}

.rings span{
 font:600 30px "Plus Jakarta Sans";
 color:var(--gold);
}

.softbottom{
 font:8px "Plus Jakarta Sans";
 letter-spacing:.1em;
 color:#8b8177;
 line-height:1.8;
}


/* =========================================================
   CONTACT / CTA
========================================================= */

.cta{
 background:var(--gold);
 color:var(--white);

 position:relative;
 overflow:hidden;

 padding:75px 0 80px;

 text-align:center;
}

.cta:before{
 content:"R";

 position:absolute;
 right:-6%;
 bottom:-17%;

 font:700 42vw/.7 "Plus Jakarta Sans";

 color:rgba(255,253,248,.08);

 pointer-events:none;
}

.ctain{
 position:relative;
 z-index:2;

 width:min(1200px,94vw);

 margin-left:auto;
 margin-right:auto;

 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
}


/* =========================================================
   CONTACT HEADING
========================================================= */

.cta .label{
 color:#f6dfb1;
 text-align:center;
}

.cta h2{
 font:700 clamp(60px,9vw,125px)/.78 "Plus Jakarta Sans";

 letter-spacing:-.09em;

 margin:14px auto 24px;

 text-align:center;
}

.contact-intro{
 width:100%;
 max-width:560px;

 margin:0 auto 55px;

 color:#f1dfc1;

 font-size:13px;
 line-height:1.7;

 text-align:center;
}


/* =========================================================
   CONTACT DETAILS
   FULL GROUP CENTERED
   NO BOXES
========================================================= */

.contact-details {
    width: 100%;
    max-width: 1200px; /* Limits the max width so it doesn't stretch too wide on desktop */
    margin: 0 auto 100px;
    display: grid;
    
    /* Using minmax allows columns to shrink smoothly on smaller screens */
    grid-template-columns: 
        minmax(250px, 330px) 
        minmax(140px, 170px) 
        minmax(140px, 170px) 
        minmax(140px, 170px);
    
    gap: 40px;
    align-items: start;
    
    /* This centers the grid columns inside the grid container */
    justify-content: center; 
    
    text-align: left;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.contact-item{
 width:100%;
 min-width:0;

 margin:0;
 padding:0;

 background:none !important;
 border:none !important;
 border-radius:0 !important;
 box-shadow:none !important;

 display:block;

 text-align:left;
}


/* =========================================================
   CONTACT LABEL
========================================================= */

.contact-label{
 display:block;

 margin:0 0 12px;

 font:700 9px "Plus Jakarta Sans";

 letter-spacing:.18em;

 line-height:1.4;

 text-transform:uppercase;

 color:#f6dfb1;

 text-align:left;
}


/* =========================================================
   CONTACT TEXT
========================================================= */

.contact-item p{
 margin:0;
 padding:0;

 font:500 11px/1.75 "DM Sans",sans-serif;

 color:#f1dfc1;

 text-align:left;

 overflow-wrap:anywhere;
}


/* =========================================================
   CONTACT LINKS
========================================================= */

.contact-item a{
 color:#fffdf8;

 text-decoration:none;

 transition:
  color .25s ease,
  opacity .25s ease;
}

.contact-item a:hover{
 color:var(--brown);

 opacity:.9;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.cta .btn{
 display:inline-flex;

 margin:0 auto;

 background:var(--brown);

 color:var(--white);
}

.cta .btn:hover{
 background:var(--brown2);
}


/* =========================================================
   FOOTER
========================================================= */

footer{
 background:#29231e;

 color:#9c9186;

 padding:18px 0;

 font-size:9px;

 letter-spacing:.12em;
}

.foot{
 display:flex;

 justify-content:space-between;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{
 opacity:0;

 transform:translateY(28px);

 transition:.8s cubic-bezier(.2,.8,.2,1);
}

.reveal.show{
 opacity:1;

 transform:none;
}


/* =========================================================
   TABLET - 1100px
========================================================= */

@media(max-width:1100px){

 .contact-details{
  width:100%;
  max-width:760px;

  grid-template-columns:
      minmax(280px,2fr)
      minmax(140px,1fr);

  gap:35px 55px;

  margin-left:auto;
  margin-right:auto;

  align-items:start;
 }

}


/* =========================================================
   TABLET - 850px
========================================================= */

@media(max-width:850px){

 .links{
  display:none;
 }

 .hero .container{
  padding-top:100px;
 }

 .hero{
  min-height:76svh;
 }

 .hero-photo{
  width:48vw;
  height:50vh;
  right:2vw;
  top:24vh;
  opacity:.75;
 }

 .hero:before{
  right:-42vw;
 }

 .hero:after{
  right:-35vw;
 }

 .hero-bottom{
  display:block;
 }

 .hero-copy{
  margin-bottom:25px;
 }

 .hero-note{
  display:none;
 }

 .grid2,
 .philogrid{
  grid-template-columns:1fr;
  gap:30px;
 }

 .workhead{
  display:block;
 }

 .workhead p{
  margin-top:20px;
 }

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

 .item1{
  grid-column:1/3;
  height:400px;
 }

 .item2,
 .item3,
 .item4,
 .item5{
  height:260px;
  margin:0;
 }

 .item6{
  grid-column:1/3;
  height:310px;
 }

 .service{
  grid-template-columns:35px 1fr 16px;
  padding:16px 0;
 }

 .service p{
  grid-column:2/4;
 }

 .service h3{
  font-size:22px;
 }

 .exporthead{
  grid-template-columns:1fr;
  gap:20px;
 }

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

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

 .exportcta{
  display:block;
 }

 .exportcta .btn{
  margin-top:20px;
 }


 /* CONTACT */

 .contact-details{
  width:100%;
  max-width:700px;

  grid-template-columns:
      minmax(260px,2fr)
      minmax(140px,1fr);

  gap:35px 45px;

  margin-left:auto;
  margin-right:auto;
 }

}


/* =========================================================
   MOBILE - 560px
========================================================= */

@media(max-width:560px){

 section{
  padding:42px 0;
 }

 .hero .container{
  padding-top:90px;
 }

 .hero-photo{
  width:70vw;
  height:42vh;
  right:-15vw;
  top:29vh;
  opacity:.38;
 }

 .hero h1{
  font-size:58px;
  margin-bottom:20px;
 }

 .hero-copy{
  font-size:12px;
 }

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

 .item1,
 .item2,
 .item3,
 .item4,
 .item5,
 .item6{
  grid-column:auto;
  border-radius:14px;
 }

 .item1{
  height:370px;
 }

 .item2,
 .item3,
 .item4,
 .item5,
 .item6{
  height:300px;
 }

 .worknote{
  padding-top:38px;
 }

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

 .exportcard{
  padding:20px;
 }

 .exportstep{
  padding:17px 14px;
 }

 .softcard{
  min-height:230px;
 }


 /* =====================================================
    CONTACT MOBILE
 ===================================================== */

 .cta{
  padding:55px 0 60px;
 }

 .cta h2{
  font-size:58px;

  margin:14px auto 22px;
 }

 .contact-intro{
  max-width:400px;

  margin:0 auto 42px;

  font-size:12px;

  line-height:1.7;
 }

 .contact-details{
  width:100%;
  max-width:400px;

  display:grid;

  grid-template-columns:1fr;

  gap:30px;

  margin-left:auto;
  margin-right:auto;

  text-align:left;
 }

 .contact-item{
  width:100%;
 }

 .contact-label{
  margin-bottom:9px;

  font-size:9px;
 }

 .contact-item p{
  font-size:11px;

  line-height:1.7;
 }

 .cta .btn{
  display:inline-flex;
 }


 footer{
  padding:18px 0;
 }

}


/* =========================================================
   VERY SMALL MOBILE - 380px
========================================================= */

@media(max-width:380px){

 .cta{
  padding:48px 0 55px;
 }

 .cta h2{
  font-size:52px;
 }

 .contact-details{
  width:100%;
  max-width:90vw;

  gap:27px;
 }

 .contact-item p{
  font-size:10.5px;
 }

}:root{
 --beige:#e9dfcf;
 --beige2:#f4eee4;
 --paper:#fbf8f1;
 --cream:#f7f1e7;
 --brown:#342c25;
 --brown2:#51463c;
 --gold:#b58b4c;
 --gold2:#d0aa68;
 --muted:#786f66;
 --line:#d9cec0;
 --soft:#eee6da;
 --white:#fffdf8;
}

*{
 box-sizing:border-box;
}

html{
 scroll-behavior:smooth;
}

body{
 margin:0;
 background:var(--beige2);
 color:var(--brown);
 font-family:"DM Sans",sans-serif;
 overflow-x:hidden;
}

a{
 text-decoration:none;
 color:inherit;
}

img{
 display:block;
 width:100%;
}

.container{
 width:min(1200px,94vw);
 margin:auto;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav{
 position:fixed;
 z-index:50;
 top:0;
 left:0;
 right:0;
 padding:7px 0;
 transition:.35s;
}

.nav.scrolled{
 background:rgba(244,238,228,.91);
 backdrop-filter:blur(18px);
 border-bottom:1px solid rgba(81,70,60,.12);
}

.navrow{
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.logo{
 display:block;
}

.logo img{
 height:52px;
 width:auto;
 max-width:300px;
 object-fit:contain;
 object-position:left center;
}

.links{
 display:flex;
 gap:22px;
 font:500 10px "Plus Jakarta Sans";
 color:#71675e;
}

.links a:hover{
 color:var(--gold);
}

.navbtn{
 border:1px solid #aa9d8e;
 border-radius:100px;
 padding:8px 13px;
 font:600 9px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
}


/* =========================================================
   HERO
========================================================= */

.hero{
 min-height:82svh;
 position:relative;
 display:flex;
 align-items:center;
 overflow:hidden;
 background:var(--beige);
}

.hero:before{
 content:"";
 position:absolute;
 width:68vw;
 height:68vw;
 max-width:850px;
 max-height:850px;
 border-radius:50%;
 right:-25vw;
 top:50%;
 transform:translateY(-50%);
 background:rgba(255,253,248,.42);
 border:1px solid rgba(181,139,76,.17);
}

.hero:after{
 content:"";
 position:absolute;
 width:52vw;
 height:52vw;
 max-width:650px;
 max-height:650px;
 border-radius:50%;
 right:-16vw;
 top:50%;
 transform:translateY(-50%);
 border:1px solid rgba(181,139,76,.14);
}

.hero-photo{
 position:absolute;
 z-index:1;
 width:42vw;
 height:62vh;
 right:8vw;
 top:19vh;
 overflow:hidden;
 border-radius:26px;
 box-shadow:0 26px 70px rgba(52,44,37,.15);
}

.hero-photo img{
 height:100%;
 object-fit:cover;
 filter:saturate(.7) sepia(.04);
 animation:photo 1.2s ease both;
}

@keyframes photo{
 from{
  opacity:.2;
  transform:scale(1.07);
 }
 to{
  opacity:1;
  transform:scale(1);
 }
}

.hero-content{
 position:relative;
 z-index:3;
 padding:105px 0 55px;
}

.eyebrow{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.22em;
 text-transform:uppercase;
 color:var(--gold);
}

.hero h1{
 font:700 clamp(64px,10.5vw,148px)/.79 "Plus Jakarta Sans";
 letter-spacing:-.085em;
 margin:16px 0 24px;
 max-width:850px;
}

.hero h1 span{
 color:var(--gold);
}

.hero-bottom{
 display:flex;
 justify-content:space-between;
 align-items:end;
 max-width:720px;
 gap:30px;
}

.hero-copy{
 max-width:500px;
 color:#6f675f;
 font-size:13px;
 line-height:1.65;
}

.btn{
 display:inline-flex;
 align-items:center;
 gap:10px;
 background:var(--brown);
 color:var(--white);
 padding:14px 19px;
 border-radius:100px;
 font:700 10px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
 transition:.3s;
}

.btn:hover{
 background:var(--brown2);
 transform:translateY(-2px);
}

.hero-note{
 position:absolute;
 z-index:3;
 right:4vw;
 bottom:29px;
 font:8px "Plus Jakarta Sans";
 letter-spacing:.16em;
 color:#8d8276;
 text-transform:uppercase;
}


/* =========================================================
   MARQUEE BAND
========================================================= */

.band{
 background:var(--brown);
 color:#f8f1e7;
 overflow:hidden;
 white-space:nowrap;
}

.bandtrack{
 display:inline-flex;
 gap:43px;
 padding:9px 0;
 font:600 9px "Plus Jakarta Sans";
 letter-spacing:.15em;
 text-transform:uppercase;
 animation:marq 24s linear infinite;
}

@keyframes marq{
 to{
  transform:translateX(-50%);
 }
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

section{
 padding:68px 0;
}

.intro{
 background:var(--paper);
}

.grid2{
 display:grid;
 grid-template-columns:.65fr 1.65fr;
 gap:45px;
}

.label{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.21em;
 text-transform:uppercase;
 color:var(--gold);
}

.title{
 font:600 clamp(44px,5.8vw,81px)/.9 "Plus Jakarta Sans";
 letter-spacing:-.07em;
 margin:0 0 18px;
}

.title span{
 color:var(--gold);
}

.copy{
 font-size:14px;
 line-height:1.7;
 color:var(--muted);
 max-width:710px;
}

.line{
 margin-top:22px;
 border-top:1px solid var(--line);
 padding-top:14px;
 font:500 9px "Plus Jakarta Sans";
 letter-spacing:.14em;
 color:#8b8177;
}


/* =========================================================
   WORK / GALLERY
========================================================= */

.work{
 background:var(--beige2);
}

.workhead{
 display:flex;
 justify-content:space-between;
 align-items:end;
 gap:30px;
 margin-bottom:32px;
}

.workhead h2{
 font:600 clamp(48px,6.5vw,92px)/.82 "Plus Jakarta Sans";
 letter-spacing:-.08em;
 margin:10px 0 0;
}

.workhead h2 span{
 color:var(--gold);
}

.workhead p{
 max-width:340px;
 color:var(--muted);
 font-size:11px;
 line-height:1.65;
}

.gallery{
 display:grid;
 grid-template-columns:1.3fr .7fr;
 gap:10px;
}

.item{
 position:relative;
 overflow:hidden;
 background:#ded3c4;
 border-radius:16px;
}

.item img{
 height:100%;
 object-fit:cover;
 filter:saturate(.74);
 transition:1s cubic-bezier(.2,.8,.2,1);
}

.item:hover img{
 transform:scale(1.045);
 filter:saturate(.9);
}

.item:after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(
  transparent 55%,
  rgba(52,44,37,.58)
 );
}

.item1{
 height:520px;
}

.item2{
 height:250px;
 margin-top:45px;
}

.item3{
 height:250px;
 margin-top:-20px;
}

.item4,
.item5{
 height:300px;
 margin-top:8px;
}

.item6{
 grid-column:1/3;
 height:340px;
 margin-top:0;
}

.info{
 position:absolute;
 z-index:2;
 left:15px;
 right:15px;
 bottom:13px;
 display:flex;
 justify-content:space-between;
 color:white;
}

.info strong{
 font:600 10px "Plus Jakarta Sans";
 letter-spacing:.13em;
 text-transform:uppercase;
}

.info small{
 font:600 15px "Plus Jakarta Sans";
 color:#f0d49e;
}

.worknote{
 text-align:center;
 padding:52px 0 5px;
}

.worknote h3{
 font:500 clamp(32px,5vw,64px)/.98 "Plus Jakarta Sans";
 letter-spacing:-.06em;
 max-width:850px;
 margin:auto;
}

.worknote span{
 color:var(--gold);
}


/* =========================================================
   SERVICES
========================================================= */

.services{
 background:var(--brown);
 color:var(--white);
}

.services .label{
 color:var(--gold2);
}

.services .title{
 color:white;
}

.service{
 display:grid;
 grid-template-columns:40px 1fr 300px 16px;
 gap:14px;
 align-items:center;
 border-top:1px solid rgba(255,253,248,.14);
 padding:19px 0;
 transition:.3s;
}

.service:last-child{
 border-bottom:1px solid rgba(255,253,248,.14);
}

.service:hover{
 background:rgba(255,255,255,.035);
 padding-left:7px;
}

.service b{
 color:var(--gold2);
 font:600 10px "Plus Jakarta Sans";
}

.service h3{
 font:600 21px "Plus Jakarta Sans";
 margin:0;
}

.service p{
 font-size:10px;
 line-height:1.7;
 color:#c6bbb0;
 margin:0;
}

.arrow{
 color:var(--gold2);
}


/* =========================================================
   EXPORT
========================================================= */

.export{
 background:var(--paper);
 position:relative;
 overflow:hidden;
}

.export:before{
 content:"GLOBAL";
 position:absolute;
 right:-5vw;
 top:25px;
 font:800 clamp(100px,18vw,260px)/.8 "Plus Jakarta Sans";
 letter-spacing:-.09em;
 color:rgba(181,139,76,.055);
 pointer-events:none;
}

.exporthead{
 display:grid;
 grid-template-columns:1fr .8fr;
 gap:40px;
 align-items:end;
 margin-bottom:35px;
}

.exporthead h2{
 font:600 clamp(48px,6.6vw,92px)/.82 "Plus Jakarta Sans";
 letter-spacing:-.08em;
 margin:14px 0 0;
}

.exporthead h2 span{
 color:var(--gold);
}

.exportlead{
 max-width:430px;
 color:var(--muted);
 font-size:13px;
 line-height:1.9;
}

.exportgrid{
 display:grid;
 grid-template-columns:1.2fr .8fr;
 gap:10px;
}

.exportcard{
 background:var(--soft);
 border:1px solid rgba(181,139,76,.17);
 border-radius:16px;
 padding:24px;
 min-height:205px;
 position:relative;
 overflow:hidden;
}

.exportcard.dark{
 background:var(--brown);
 color:var(--white);
}

.exportcard h3{
 font:600 24px/1.05 "Plus Jakarta Sans";
 letter-spacing:-.045em;
 margin:12px 0 9px;
}

.exportcard p{
 margin:0;
 max-width:500px;
 font-size:11px;
 line-height:1.65;
 color:var(--muted);
}

.exportcard.dark p{
 color:#c8bdb2;
}

.exportnum{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.18em;
 color:var(--gold);
 text-transform:uppercase;
}

.exportsteps{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:1px;
 margin-top:10px;
 border:1px solid var(--line);
 border-radius:16px;
 overflow:hidden;
 background:var(--line);
}

.exportstep{
 background:var(--paper);
 padding:19px 16px;
 min-height:120px;
}

.exportstep b{
 display:block;
 font:600 10px "Plus Jakarta Sans";
 color:var(--gold);
 margin-bottom:17px;
}

.exportstep strong{
 display:block;
 font:600 14px "Plus Jakarta Sans";
 margin-bottom:8px;
}

.exportstep span{
 font-size:10px;
 line-height:1.65;
 color:var(--muted);
}

.exportbadge{
 position:absolute;
 right:28px;
 bottom:25px;
 border:1px solid rgba(181,139,76,.38);
 border-radius:100px;
 padding:10px 13px;
 font:600 8px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
 color:var(--gold);
}

.exportcta{
 margin-top:10px;
 background:var(--gold);
 color:var(--white);
 border-radius:16px;
 padding:23px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
}

.exportcta strong{
 font:600 clamp(25px,3vw,38px)/1 "Plus Jakarta Sans";
 letter-spacing:-.05em;
}

.exportcta p{
 margin:7px 0 0;
 color:#f3e2c5;
 font-size:11px;
 line-height:1.7;
}

.exportcta .btn{
 background:var(--brown);
}


/* =========================================================
   EXPORT MINI
========================================================= */

.exportmini{
 background:var(--cream);
 padding:45px 0;
 border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
}

.exportmini-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:1px;
 background:var(--line);
 border:1px solid var(--line);
}

.exportmini-item{
 background:var(--cream);
 padding:24px;
}

.exportmini-item strong{
 display:block;
 font:600 14px "Plus Jakarta Sans";
 margin-bottom:7px;
}

.exportmini-item span{
 font-size:10px;
 line-height:1.7;
 color:var(--muted);
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy{
 background:var(--soft);
}

.philogrid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:45px;
 align-items:center;
}

.philosophy h2{
 font:600 clamp(44px,5.7vw,78px)/.9 "Plus Jakarta Sans";
 letter-spacing:-.07em;
 margin:14px 0 24px;
}

.philosophy h2 span{
 color:var(--gold);
}

.philosophy p{
 font-size:14px;
 line-height:1.9;
 color:#6f7771;
}

.softcard{
 background:rgba(255,253,248,.58);
 border:1px solid rgba(181,139,76,.2);
 padding:24px;
 min-height:260px;
 border-radius:16px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
}

.softtop{
 display:flex;
 justify-content:space-between;
 font:8px "Plus Jakarta Sans";
 letter-spacing:.13em;
 color:#8a8178;
}

.rings{
 width:145px;
 height:145px;
 border-radius:50%;
 border:1px solid rgba(181,139,76,.42);
 margin:auto;
 position:relative;
 display:grid;
 place-items:center;
}

.rings:before,
.rings:after{
 content:"";
 position:absolute;
 border:1px solid rgba(181,139,76,.25);
 border-radius:50%;
 inset:16px;
}

.rings:after{
 inset:40px;
 border-color:rgba(181,139,76,.42);
}

.rings span{
 font:600 30px "Plus Jakarta Sans";
 color:var(--gold);
}

.softbottom{
 font:8px "Plus Jakarta Sans";
 letter-spacing:.1em;
 color:#8b8177;
 line-height:1.8;
}


/* =========================================================
   CONTACT / CTA
========================================================= */

.cta{
 background:var(--gold);
 color:var(--white);

 position:relative;
 overflow:hidden;

 padding:75px 0 80px;

 text-align:center;
}

.cta:before{
 content:"R";

 position:absolute;
 right:-6%;
 bottom:-17%;

 font:700 42vw/.7 "Plus Jakarta Sans";

 color:rgba(255,253,248,.08);

 pointer-events:none;
}

.ctain{
 position:relative;
 z-index:2;

 width:min(1200px,94vw);

 margin-left:auto;
 margin-right:auto;

 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
}


/* =========================================================
   CONTACT HEADING
========================================================= */

.cta .label{
 color:#f6dfb1;
 text-align:center;
}

.cta h2{
 font:700 clamp(60px,9vw,125px)/.78 "Plus Jakarta Sans";

 letter-spacing:-.09em;

 margin:14px auto 24px;

 text-align:center;
}

.contact-intro{
 width:100%;
 max-width:560px;

 margin:0 auto 55px;

 color:#f1dfc1;

 font-size:13px;
 line-height:1.7;

 text-align:center;
}


/* =========================================================
   CONTACT DETAILS
   FULL GROUP CENTERED
   NO BOXES
========================================================= */

.contact-details {
    width: 100%;
    max-width: 1200px; /* Limits the max width so it doesn't stretch too wide on desktop */
    margin: 0 auto 100px;
    display: grid;
    
    /* Using minmax allows columns to shrink smoothly on smaller screens */
    grid-template-columns: 
        minmax(250px, 330px) 
        minmax(140px, 170px) 
        minmax(140px, 170px) 
        minmax(140px, 170px);
    
    gap: 40px;
    align-items: start;
    
    /* This centers the grid columns inside the grid container */
    justify-content: center; 
    
    text-align: left;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.contact-item{
 width:100%;
 min-width:0;

 margin:0;
 padding:0;

 background:none !important;
 border:none !important;
 border-radius:0 !important;
 box-shadow:none !important;

 display:block;

 text-align:left;
}


/* =========================================================
   CONTACT LABEL
========================================================= */

.contact-label{
 display:block;

 margin:0 0 12px;

 font:700 9px "Plus Jakarta Sans";

 letter-spacing:.18em;

 line-height:1.4;

 text-transform:uppercase;

 color:#f6dfb1;

 text-align:left;
}


/* =========================================================
   CONTACT TEXT
========================================================= */

.contact-item p{
 margin:0;
 padding:0;

 font:500 11px/1.75 "DM Sans",sans-serif;

 color:#f1dfc1;

 text-align:left;

 overflow-wrap:anywhere;
}


/* =========================================================
   CONTACT LINKS
========================================================= */

.contact-item a{
 color:#fffdf8;

 text-decoration:none;

 transition:
  color .25s ease,
  opacity .25s ease;
}

.contact-item a:hover{
 color:var(--brown);

 opacity:.9;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.cta .btn{
 display:inline-flex;

 margin:0 auto;

 background:var(--brown);

 color:var(--white);
}

.cta .btn:hover{
 background:var(--brown2);
}


/* =========================================================
   FOOTER
========================================================= */

footer{
 background:#29231e;

 color:#9c9186;

 padding:18px 0;

 font-size:9px;

 letter-spacing:.12em;
}

.foot{
 display:flex;

 justify-content:space-between;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{
 opacity:0;

 transform:translateY(28px);

 transition:.8s cubic-bezier(.2,.8,.2,1);
}

.reveal.show{
 opacity:1;

 transform:none;
}


/* =========================================================
   TABLET - 1100px
========================================================= */

@media(max-width:1100px){

 .contact-details{
  width:100%;
  max-width:760px;

  grid-template-columns:
      minmax(280px,2fr)
      minmax(140px,1fr);

  gap:35px 55px;

  margin-left:auto;
  margin-right:auto;

  align-items:start;
 }

}


/* =========================================================
   TABLET - 850px
========================================================= */

@media(max-width:850px){

 .links{
  display:none;
 }

 .hero .container{
  padding-top:100px;
 }

 .hero{
  min-height:76svh;
 }

 .hero-photo{
  width:48vw;
  height:50vh;
  right:2vw;
  top:24vh;
  opacity:.75;
 }

 .hero:before{
  right:-42vw;
 }

 .hero:after{
  right:-35vw;
 }

 .hero-bottom{
  display:block;
 }

 .hero-copy{
  margin-bottom:25px;
 }

 .hero-note{
  display:none;
 }

 .grid2,
 .philogrid{
  grid-template-columns:1fr;
  gap:30px;
 }

 .workhead{
  display:block;
 }

 .workhead p{
  margin-top:20px;
 }

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

 .item1{
  grid-column:1/3;
  height:400px;
 }

 .item2,
 .item3,
 .item4,
 .item5{
  height:260px;
  margin:0;
 }

 .item6{
  grid-column:1/3;
  height:310px;
 }

 .service{
  grid-template-columns:35px 1fr 16px;
  padding:16px 0;
 }

 .service p{
  grid-column:2/4;
 }

 .service h3{
  font-size:22px;
 }

 .exporthead{
  grid-template-columns:1fr;
  gap:20px;
 }

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

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

 .exportcta{
  display:block;
 }

 .exportcta .btn{
  margin-top:20px;
 }


 /* CONTACT */

 .contact-details{
  width:100%;
  max-width:700px;

  grid-template-columns:
      minmax(260px,2fr)
      minmax(140px,1fr);

  gap:35px 45px;

  margin-left:auto;
  margin-right:auto;
 }

}


/* =========================================================
   MOBILE - 560px
========================================================= */

@media(max-width:560px){

 section{
  padding:42px 0;
 }

 .hero .container{
  padding-top:90px;
 }

 .hero-photo{
  width:70vw;
  height:42vh;
  right:-15vw;
  top:29vh;
  opacity:.38;
 }

 .hero h1{
  font-size:58px;
  margin-bottom:20px;
 }

 .hero-copy{
  font-size:12px;
 }

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

 .item1,
 .item2,
 .item3,
 .item4,
 .item5,
 .item6{
  grid-column:auto;
  border-radius:14px;
 }

 .item1{
  height:370px;
 }

 .item2,
 .item3,
 .item4,
 .item5,
 .item6{
  height:300px;
 }

 .worknote{
  padding-top:38px;
 }

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

 .exportcard{
  padding:20px;
 }

 .exportstep{
  padding:17px 14px;
 }

 .softcard{
  min-height:230px;
 }


 /* =====================================================
    CONTACT MOBILE
 ===================================================== */

 .cta{
  padding:55px 0 60px;
 }

 .cta h2{
  font-size:58px;

  margin:14px auto 22px;
 }

 .contact-intro{
  max-width:400px;

  margin:0 auto 42px;

  font-size:12px;

  line-height:1.7;
 }

 .contact-details{
  width:100%;
  max-width:400px;

  display:grid;

  grid-template-columns:1fr;

  gap:30px;

  margin-left:auto;
  margin-right:auto;

  text-align:left;
 }

 .contact-item{
  width:100%;
 }

 .contact-label{
  margin-bottom:9px;

  font-size:9px;
 }

 .contact-item p{
  font-size:11px;

  line-height:1.7;
 }

 .cta .btn{
  display:inline-flex;
 }


 footer{
  padding:18px 0;
 }

}


/* =========================================================
   VERY SMALL MOBILE - 380px
========================================================= */

@media(max-width:380px){

 .cta{
  padding:48px 0 55px;
 }

 .cta h2{
  font-size:52px;
 }

 .contact-details{
  width:100%;
  max-width:90vw;

  gap:27px;
 }

 .contact-item p{
  font-size:10.5px;
 }

}:root{
 --beige:#e9dfcf;
 --beige2:#f4eee4;
 --paper:#fbf8f1;
 --cream:#f7f1e7;
 --brown:#342c25;
 --brown2:#51463c;
 --gold:#b58b4c;
 --gold2:#d0aa68;
 --muted:#786f66;
 --line:#d9cec0;
 --soft:#eee6da;
 --white:#fffdf8;
}

*{
 box-sizing:border-box;
}

html{
 scroll-behavior:smooth;
}

body{
 margin:0;
 background:var(--beige2);
 color:var(--brown);
 font-family:"DM Sans",sans-serif;
 overflow-x:hidden;
}

a{
 text-decoration:none;
 color:inherit;
}

img{
 display:block;
 width:100%;
}

.container{
 width:min(1200px,94vw);
 margin:auto;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav{
 position:fixed;
 z-index:50;
 top:0;
 left:0;
 right:0;
 padding:7px 0;
 transition:.35s;
}

.nav.scrolled{
 background:rgba(244,238,228,.91);
 backdrop-filter:blur(18px);
 border-bottom:1px solid rgba(81,70,60,.12);
}

.navrow{
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.logo{
 display:block;
}

.logo img{
 height:52px;
 width:auto;
 max-width:300px;
 object-fit:contain;
 object-position:left center;
}

.links{
 display:flex;
 gap:22px;
 font:500 10px "Plus Jakarta Sans";
 color:#71675e;
}

.links a:hover{
 color:var(--gold);
}

.navbtn{
 border:1px solid #aa9d8e;
 border-radius:100px;
 padding:8px 13px;
 font:600 9px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
}


/* =========================================================
   HERO
========================================================= */

.hero{
 min-height:82svh;
 position:relative;
 display:flex;
 align-items:center;
 overflow:hidden;
 background:var(--beige);
}

.hero:before{
 content:"";
 position:absolute;
 width:68vw;
 height:68vw;
 max-width:850px;
 max-height:850px;
 border-radius:50%;
 right:-25vw;
 top:50%;
 transform:translateY(-50%);
 background:rgba(255,253,248,.42);
 border:1px solid rgba(181,139,76,.17);
}

.hero:after{
 content:"";
 position:absolute;
 width:52vw;
 height:52vw;
 max-width:650px;
 max-height:650px;
 border-radius:50%;
 right:-16vw;
 top:50%;
 transform:translateY(-50%);
 border:1px solid rgba(181,139,76,.14);
}

.hero-photo{
 position:absolute;
 z-index:1;
 width:42vw;
 height:62vh;
 right:8vw;
 top:19vh;
 overflow:hidden;
 border-radius:26px;
 box-shadow:0 26px 70px rgba(52,44,37,.15);
}

.hero-photo img{
 height:100%;
 object-fit:cover;
 filter:saturate(.7) sepia(.04);
 animation:photo 1.2s ease both;
}

@keyframes photo{
 from{
  opacity:.2;
  transform:scale(1.07);
 }
 to{
  opacity:1;
  transform:scale(1);
 }
}

.hero-content{
 position:relative;
 z-index:3;
 padding:105px 0 55px;
}

.eyebrow{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.22em;
 text-transform:uppercase;
 color:var(--gold);
}

.hero h1{
 font:700 clamp(64px,10.5vw,148px)/.79 "Plus Jakarta Sans";
 letter-spacing:-.085em;
 margin:16px 0 24px;
 max-width:850px;
}

.hero h1 span{
 color:var(--gold);
}

.hero-bottom{
 display:flex;
 justify-content:space-between;
 align-items:end;
 max-width:720px;
 gap:30px;
}

.hero-copy{
 max-width:500px;
 color:#6f675f;
 font-size:13px;
 line-height:1.65;
}

.btn{
 display:inline-flex;
 align-items:center;
 gap:10px;
 background:var(--brown);
 color:var(--white);
 padding:14px 19px;
 border-radius:100px;
 font:700 10px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
 transition:.3s;
}

.btn:hover{
 background:var(--brown2);
 transform:translateY(-2px);
}

.hero-note{
 position:absolute;
 z-index:3;
 right:4vw;
 bottom:29px;
 font:8px "Plus Jakarta Sans";
 letter-spacing:.16em;
 color:#8d8276;
 text-transform:uppercase;
}


/* =========================================================
   MARQUEE BAND
========================================================= */

.band{
 background:var(--brown);
 color:#f8f1e7;
 overflow:hidden;
 white-space:nowrap;
}

.bandtrack{
 display:inline-flex;
 gap:43px;
 padding:9px 0;
 font:600 9px "Plus Jakarta Sans";
 letter-spacing:.15em;
 text-transform:uppercase;
 animation:marq 24s linear infinite;
}

@keyframes marq{
 to{
  transform:translateX(-50%);
 }
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

section{
 padding:68px 0;
}

.intro{
 background:var(--paper);
}

.grid2{
 display:grid;
 grid-template-columns:.65fr 1.65fr;
 gap:45px;
}

.label{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.21em;
 text-transform:uppercase;
 color:var(--gold);
}

.title{
 font:600 clamp(44px,5.8vw,81px)/.9 "Plus Jakarta Sans";
 letter-spacing:-.07em;
 margin:0 0 18px;
}

.title span{
 color:var(--gold);
}

.copy{
 font-size:14px;
 line-height:1.7;
 color:var(--muted);
 max-width:710px;
}

.line{
 margin-top:22px;
 border-top:1px solid var(--line);
 padding-top:14px;
 font:500 9px "Plus Jakarta Sans";
 letter-spacing:.14em;
 color:#8b8177;
}


/* =========================================================
   WORK / GALLERY
========================================================= */

.work{
 background:var(--beige2);
}

.workhead{
 display:flex;
 justify-content:space-between;
 align-items:end;
 gap:30px;
 margin-bottom:32px;
}

.workhead h2{
 font:600 clamp(48px,6.5vw,92px)/.82 "Plus Jakarta Sans";
 letter-spacing:-.08em;
 margin:10px 0 0;
}

.workhead h2 span{
 color:var(--gold);
}

.workhead p{
 max-width:340px;
 color:var(--muted);
 font-size:11px;
 line-height:1.65;
}

.gallery{
 display:grid;
 grid-template-columns:1.3fr .7fr;
 gap:10px;
}

.item{
 position:relative;
 overflow:hidden;
 background:#ded3c4;
 border-radius:16px;
}

.item img{
 height:100%;
 object-fit:cover;
 filter:saturate(.74);
 transition:1s cubic-bezier(.2,.8,.2,1);
}

.item:hover img{
 transform:scale(1.045);
 filter:saturate(.9);
}

.item:after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(
  transparent 55%,
  rgba(52,44,37,.58)
 );
}

.item1{
 height:520px;
}

.item2{
 height:250px;
 margin-top:45px;
}

.item3{
 height:250px;
 margin-top:-20px;
}

.item4,
.item5{
 height:300px;
 margin-top:8px;
}

.item6{
 grid-column:1/3;
 height:340px;
 margin-top:0;
}

.info{
 position:absolute;
 z-index:2;
 left:15px;
 right:15px;
 bottom:13px;
 display:flex;
 justify-content:space-between;
 color:white;
}

.info strong{
 font:600 10px "Plus Jakarta Sans";
 letter-spacing:.13em;
 text-transform:uppercase;
}

.info small{
 font:600 15px "Plus Jakarta Sans";
 color:#f0d49e;
}

.worknote{
 text-align:center;
 padding:52px 0 5px;
}

.worknote h3{
 font:500 clamp(32px,5vw,64px)/.98 "Plus Jakarta Sans";
 letter-spacing:-.06em;
 max-width:850px;
 margin:auto;
}

.worknote span{
 color:var(--gold);
}


/* =========================================================
   SERVICES
========================================================= */

.services{
 background:var(--brown);
 color:var(--white);
}

.services .label{
 color:var(--gold2);
}

.services .title{
 color:white;
}

.service{
 display:grid;
 grid-template-columns:40px 1fr 300px 16px;
 gap:14px;
 align-items:center;
 border-top:1px solid rgba(255,253,248,.14);
 padding:19px 0;
 transition:.3s;
}

.service:last-child{
 border-bottom:1px solid rgba(255,253,248,.14);
}

.service:hover{
 background:rgba(255,255,255,.035);
 padding-left:7px;
}

.service b{
 color:var(--gold2);
 font:600 10px "Plus Jakarta Sans";
}

.service h3{
 font:600 21px "Plus Jakarta Sans";
 margin:0;
}

.service p{
 font-size:10px;
 line-height:1.7;
 color:#c6bbb0;
 margin:0;
}

.arrow{
 color:var(--gold2);
}


/* =========================================================
   EXPORT
========================================================= */

.export{
 background:var(--paper);
 position:relative;
 overflow:hidden;
}

.export:before{
 content:"GLOBAL";
 position:absolute;
 right:-5vw;
 top:25px;
 font:800 clamp(100px,18vw,260px)/.8 "Plus Jakarta Sans";
 letter-spacing:-.09em;
 color:rgba(181,139,76,.055);
 pointer-events:none;
}

.exporthead{
 display:grid;
 grid-template-columns:1fr .8fr;
 gap:40px;
 align-items:end;
 margin-bottom:35px;
}

.exporthead h2{
 font:600 clamp(48px,6.6vw,92px)/.82 "Plus Jakarta Sans";
 letter-spacing:-.08em;
 margin:14px 0 0;
}

.exporthead h2 span{
 color:var(--gold);
}

.exportlead{
 max-width:430px;
 color:var(--muted);
 font-size:13px;
 line-height:1.9;
}

.exportgrid{
 display:grid;
 grid-template-columns:1.2fr .8fr;
 gap:10px;
}

.exportcard{
 background:var(--soft);
 border:1px solid rgba(181,139,76,.17);
 border-radius:16px;
 padding:24px;
 min-height:205px;
 position:relative;
 overflow:hidden;
}

.exportcard.dark{
 background:var(--brown);
 color:var(--white);
}

.exportcard h3{
 font:600 24px/1.05 "Plus Jakarta Sans";
 letter-spacing:-.045em;
 margin:12px 0 9px;
}

.exportcard p{
 margin:0;
 max-width:500px;
 font-size:11px;
 line-height:1.65;
 color:var(--muted);
}

.exportcard.dark p{
 color:#c8bdb2;
}

.exportnum{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.18em;
 color:var(--gold);
 text-transform:uppercase;
}

.exportsteps{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:1px;
 margin-top:10px;
 border:1px solid var(--line);
 border-radius:16px;
 overflow:hidden;
 background:var(--line);
}

.exportstep{
 background:var(--paper);
 padding:19px 16px;
 min-height:120px;
}

.exportstep b{
 display:block;
 font:600 10px "Plus Jakarta Sans";
 color:var(--gold);
 margin-bottom:17px;
}

.exportstep strong{
 display:block;
 font:600 14px "Plus Jakarta Sans";
 margin-bottom:8px;
}

.exportstep span{
 font-size:10px;
 line-height:1.65;
 color:var(--muted);
}

.exportbadge{
 position:absolute;
 right:28px;
 bottom:25px;
 border:1px solid rgba(181,139,76,.38);
 border-radius:100px;
 padding:10px 13px;
 font:600 8px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
 color:var(--gold);
}

.exportcta{
 margin-top:10px;
 background:var(--gold);
 color:var(--white);
 border-radius:16px;
 padding:23px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
}

.exportcta strong{
 font:600 clamp(25px,3vw,38px)/1 "Plus Jakarta Sans";
 letter-spacing:-.05em;
}

.exportcta p{
 margin:7px 0 0;
 color:#f3e2c5;
 font-size:11px;
 line-height:1.7;
}

.exportcta .btn{
 background:var(--brown);
}


/* =========================================================
   EXPORT MINI
========================================================= */

.exportmini{
 background:var(--cream);
 padding:45px 0;
 border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
}

.exportmini-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:1px;
 background:var(--line);
 border:1px solid var(--line);
}

.exportmini-item{
 background:var(--cream);
 padding:24px;
}

.exportmini-item strong{
 display:block;
 font:600 14px "Plus Jakarta Sans";
 margin-bottom:7px;
}

.exportmini-item span{
 font-size:10px;
 line-height:1.7;
 color:var(--muted);
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy{
 background:var(--soft);
}

.philogrid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:45px;
 align-items:center;
}

.philosophy h2{
 font:600 clamp(44px,5.7vw,78px)/.9 "Plus Jakarta Sans";
 letter-spacing:-.07em;
 margin:14px 0 24px;
}

.philosophy h2 span{
 color:var(--gold);
}

.philosophy p{
 font-size:14px;
 line-height:1.9;
 color:#6f7771;
}

.softcard{
 background:rgba(255,253,248,.58);
 border:1px solid rgba(181,139,76,.2);
 padding:24px;
 min-height:260px;
 border-radius:16px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
}

.softtop{
 display:flex;
 justify-content:space-between;
 font:8px "Plus Jakarta Sans";
 letter-spacing:.13em;
 color:#8a8178;
}

.rings{
 width:145px;
 height:145px;
 border-radius:50%;
 border:1px solid rgba(181,139,76,.42);
 margin:auto;
 position:relative;
 display:grid;
 place-items:center;
}

.rings:before,
.rings:after{
 content:"";
 position:absolute;
 border:1px solid rgba(181,139,76,.25);
 border-radius:50%;
 inset:16px;
}

.rings:after{
 inset:40px;
 border-color:rgba(181,139,76,.42);
}

.rings span{
 font:600 30px "Plus Jakarta Sans";
 color:var(--gold);
}

.softbottom{
 font:8px "Plus Jakarta Sans";
 letter-spacing:.1em;
 color:#8b8177;
 line-height:1.8;
}


/* =========================================================
   CONTACT / CTA
========================================================= */

.cta{
 background:var(--gold);
 color:var(--white);

 position:relative;
 overflow:hidden;

 padding:75px 0 80px;

 text-align:center;
}

.cta:before{
 content:"R";

 position:absolute;
 right:-6%;
 bottom:-17%;

 font:700 42vw/.7 "Plus Jakarta Sans";

 color:rgba(255,253,248,.08);

 pointer-events:none;
}

.ctain{
 position:relative;
 z-index:2;

 width:min(1200px,94vw);

 margin-left:auto;
 margin-right:auto;

 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
}


/* =========================================================
   CONTACT HEADING
========================================================= */

.cta .label{
 color:#f6dfb1;
 text-align:center;
}

.cta h2{
 font:700 clamp(60px,9vw,125px)/.78 "Plus Jakarta Sans";

 letter-spacing:-.09em;

 margin:14px auto 24px;

 text-align:center;
}

.contact-intro{
 width:100%;
 max-width:560px;

 margin:0 auto 55px;

 color:#f1dfc1;

 font-size:13px;
 line-height:1.7;

 text-align:center;
}


/* =========================================================
   CONTACT DETAILS
   FULL GROUP CENTERED
   NO BOXES
========================================================= */

.contact-details {
    width: 100%;
    max-width: 1200px; /* Limits the max width so it doesn't stretch too wide on desktop */
    margin: 0 auto 100px;
    display: grid;
    
    /* Using minmax allows columns to shrink smoothly on smaller screens */
    grid-template-columns: 
        minmax(250px, 330px) 
        minmax(140px, 170px) 
        minmax(140px, 170px) 
        minmax(140px, 170px);
    
    gap: 40px;
    align-items: start;
    
    /* This centers the grid columns inside the grid container */
    justify-content: center; 
    
    text-align: left;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.contact-item{
 width:100%;
 min-width:0;

 margin:0;
 padding:0;

 background:none !important;
 border:none !important;
 border-radius:0 !important;
 box-shadow:none !important;

 display:block;

 text-align:left;
}


/* =========================================================
   CONTACT LABEL
========================================================= */

.contact-label{
 display:block;

 margin:0 0 12px;

 font:700 9px "Plus Jakarta Sans";

 letter-spacing:.18em;

 line-height:1.4;

 text-transform:uppercase;

 color:#f6dfb1;

 text-align:left;
}


/* =========================================================
   CONTACT TEXT
========================================================= */

.contact-item p{
 margin:0;
 padding:0;

 font:500 11px/1.75 "DM Sans",sans-serif;

 color:#f1dfc1;

 text-align:left;

 overflow-wrap:anywhere;
}


/* =========================================================
   CONTACT LINKS
========================================================= */

.contact-item a{
 color:#fffdf8;

 text-decoration:none;

 transition:
  color .25s ease,
  opacity .25s ease;
}

.contact-item a:hover{
 color:var(--brown);

 opacity:.9;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.cta .btn{
 display:inline-flex;

 margin:0 auto;

 background:var(--brown);

 color:var(--white);
}

.cta .btn:hover{
 background:var(--brown2);
}


/* =========================================================
   FOOTER
========================================================= */

footer{
 background:#29231e;

 color:#9c9186;

 padding:18px 0;

 font-size:9px;

 letter-spacing:.12em;
}

.foot{
 display:flex;

 justify-content:space-between;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{
 opacity:0;

 transform:translateY(28px);

 transition:.8s cubic-bezier(.2,.8,.2,1);
}

.reveal.show{
 opacity:1;

 transform:none;
}


/* =========================================================
   TABLET - 1100px
========================================================= */

@media(max-width:1100px){

 .contact-details{
  width:100%;
  max-width:760px;

  grid-template-columns:
      minmax(280px,2fr)
      minmax(140px,1fr);

  gap:35px 55px;

  margin-left:auto;
  margin-right:auto;

  align-items:start;
 }

}


/* =========================================================
   TABLET - 850px
========================================================= */

@media(max-width:850px){

 .links{
  display:none;
 }

 .hero .container{
  padding-top:100px;
 }

 .hero{
  min-height:76svh;
 }

 .hero-photo{
  width:48vw;
  height:50vh;
  right:2vw;
  top:24vh;
  opacity:.75;
 }

 .hero:before{
  right:-42vw;
 }

 .hero:after{
  right:-35vw;
 }

 .hero-bottom{
  display:block;
 }

 .hero-copy{
  margin-bottom:25px;
 }

 .hero-note{
  display:none;
 }

 .grid2,
 .philogrid{
  grid-template-columns:1fr;
  gap:30px;
 }

 .workhead{
  display:block;
 }

 .workhead p{
  margin-top:20px;
 }

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

 .item1{
  grid-column:1/3;
  height:400px;
 }

 .item2,
 .item3,
 .item4,
 .item5{
  height:260px;
  margin:0;
 }

 .item6{
  grid-column:1/3;
  height:310px;
 }

 .service{
  grid-template-columns:35px 1fr 16px;
  padding:16px 0;
 }

 .service p{
  grid-column:2/4;
 }

 .service h3{
  font-size:22px;
 }

 .exporthead{
  grid-template-columns:1fr;
  gap:20px;
 }

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

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

 .exportcta{
  display:block;
 }

 .exportcta .btn{
  margin-top:20px;
 }


 /* CONTACT */

 .contact-details{
  width:100%;
  max-width:700px;

  grid-template-columns:
      minmax(260px,2fr)
      minmax(140px,1fr);

  gap:35px 45px;

  margin-left:auto;
  margin-right:auto;
 }

}


/* =========================================================
   MOBILE - 560px
========================================================= */

@media(max-width:560px){

 section{
  padding:42px 0;
 }

 .hero .container{
  padding-top:90px;
 }

 .hero-photo{
  width:70vw;
  height:42vh;
  right:-15vw;
  top:29vh;
  opacity:.38;
 }

 .hero h1{
  font-size:58px;
  margin-bottom:20px;
 }

 .hero-copy{
  font-size:12px;
 }

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

 .item1,
 .item2,
 .item3,
 .item4,
 .item5,
 .item6{
  grid-column:auto;
  border-radius:14px;
 }

 .item1{
  height:370px;
 }

 .item2,
 .item3,
 .item4,
 .item5,
 .item6{
  height:300px;
 }

 .worknote{
  padding-top:38px;
 }

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

 .exportcard{
  padding:20px;
 }

 .exportstep{
  padding:17px 14px;
 }

 .softcard{
  min-height:230px;
 }


 /* =====================================================
    CONTACT MOBILE
 ===================================================== */

 .cta{
  padding:55px 0 60px;
 }

 .cta h2{
  font-size:58px;

  margin:14px auto 22px;
 }

 .contact-intro{
  max-width:400px;

  margin:0 auto 42px;

  font-size:12px;

  line-height:1.7;
 }

 .contact-details{
  width:100%;
  max-width:400px;

  display:grid;

  grid-template-columns:1fr;

  gap:30px;

  margin-left:auto;
  margin-right:auto;

  text-align:left;
 }

 .contact-item{
  width:100%;
 }

 .contact-label{
  margin-bottom:9px;

  font-size:9px;
 }

 .contact-item p{
  font-size:11px;

  line-height:1.7;
 }

 .cta .btn{
  display:inline-flex;
 }


 footer{
  padding:18px 0;
 }

}


/* =========================================================
   VERY SMALL MOBILE - 380px
========================================================= */

@media(max-width:380px){

 .cta{
  padding:48px 0 55px;
 }

 .cta h2{
  font-size:52px;
 }

 .contact-details{
  width:100%;
  max-width:90vw;

  gap:27px;
 }

 .contact-item p{
  font-size:10.5px;
 }

}:root{
 --beige:#e9dfcf;
 --beige2:#f4eee4;
 --paper:#fbf8f1;
 --cream:#f7f1e7;
 --brown:#342c25;
 --brown2:#51463c;
 --gold:#b58b4c;
 --gold2:#d0aa68;
 --muted:#786f66;
 --line:#d9cec0;
 --soft:#eee6da;
 --white:#fffdf8;
}

*{
 box-sizing:border-box;
}

html{
 scroll-behavior:smooth;
}

body{
 margin:0;
 background:var(--beige2);
 color:var(--brown);
 font-family:"DM Sans",sans-serif;
 overflow-x:hidden;
}

a{
 text-decoration:none;
 color:inherit;
}

img{
 display:block;
 width:100%;
}

.container{
 width:min(1200px,94vw);
 margin:auto;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav{
 position:fixed;
 z-index:50;
 top:0;
 left:0;
 right:0;
 padding:7px 0;
 transition:.35s;
}

.nav.scrolled{
 background:rgba(244,238,228,.91);
 backdrop-filter:blur(18px);
 border-bottom:1px solid rgba(81,70,60,.12);
}

.navrow{
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.logo{
 display:block;
}

.logo img{
 height:52px;
 width:auto;
 max-width:300px;
 object-fit:contain;
 object-position:left center;
}

.links{
 display:flex;
 gap:22px;
 font:500 10px "Plus Jakarta Sans";
 color:#71675e;
}

.links a:hover{
 color:var(--gold);
}

.navbtn{
 border:1px solid #aa9d8e;
 border-radius:100px;
 padding:8px 13px;
 font:600 9px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
}


/* =========================================================
   HERO
========================================================= */

.hero{
 min-height:82svh;
 position:relative;
 display:flex;
 align-items:center;
 overflow:hidden;
 background:var(--beige);
}

.hero:before{
 content:"";
 position:absolute;
 width:68vw;
 height:68vw;
 max-width:850px;
 max-height:850px;
 border-radius:50%;
 right:-25vw;
 top:50%;
 transform:translateY(-50%);
 background:rgba(255,253,248,.42);
 border:1px solid rgba(181,139,76,.17);
}

.hero:after{
 content:"";
 position:absolute;
 width:52vw;
 height:52vw;
 max-width:650px;
 max-height:650px;
 border-radius:50%;
 right:-16vw;
 top:50%;
 transform:translateY(-50%);
 border:1px solid rgba(181,139,76,.14);
}

.hero-photo{
 position:absolute;
 z-index:1;
 width:42vw;
 height:62vh;
 right:8vw;
 top:19vh;
 overflow:hidden;
 border-radius:26px;
 box-shadow:0 26px 70px rgba(52,44,37,.15);
}

.hero-photo img{
 height:100%;
 object-fit:cover;
 filter:saturate(.7) sepia(.04);
 animation:photo 1.2s ease both;
}

@keyframes photo{
 from{
  opacity:.2;
  transform:scale(1.07);
 }
 to{
  opacity:1;
  transform:scale(1);
 }
}

.hero-content{
 position:relative;
 z-index:3;
 padding:105px 0 55px;
}

.eyebrow{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.22em;
 text-transform:uppercase;
 color:var(--gold);
}

.hero h1{
 font:700 clamp(64px,10.5vw,148px)/.79 "Plus Jakarta Sans";
 letter-spacing:-.085em;
 margin:16px 0 24px;
 max-width:850px;
}

.hero h1 span{
 color:var(--gold);
}

.hero-bottom{
 display:flex;
 justify-content:space-between;
 align-items:end;
 max-width:720px;
 gap:30px;
}

.hero-copy{
 max-width:500px;
 color:#6f675f;
 font-size:13px;
 line-height:1.65;
}

.btn{
 display:inline-flex;
 align-items:center;
 gap:10px;
 background:var(--brown);
 color:var(--white);
 padding:14px 19px;
 border-radius:100px;
 font:700 10px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
 transition:.3s;
}

.btn:hover{
 background:var(--brown2);
 transform:translateY(-2px);
}

.hero-note{
 position:absolute;
 z-index:3;
 right:4vw;
 bottom:29px;
 font:8px "Plus Jakarta Sans";
 letter-spacing:.16em;
 color:#8d8276;
 text-transform:uppercase;
}


/* =========================================================
   MARQUEE BAND
========================================================= */

.band{
 background:var(--brown);
 color:#f8f1e7;
 overflow:hidden;
 white-space:nowrap;
}

.bandtrack{
 display:inline-flex;
 gap:43px;
 padding:9px 0;
 font:600 9px "Plus Jakarta Sans";
 letter-spacing:.15em;
 text-transform:uppercase;
 animation:marq 24s linear infinite;
}

@keyframes marq{
 to{
  transform:translateX(-50%);
 }
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

section{
 padding:68px 0;
}

.intro{
 background:var(--paper);
}

.grid2{
 display:grid;
 grid-template-columns:.65fr 1.65fr;
 gap:45px;
}

.label{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.21em;
 text-transform:uppercase;
 color:var(--gold);
}

.title{
 font:600 clamp(44px,5.8vw,81px)/.9 "Plus Jakarta Sans";
 letter-spacing:-.07em;
 margin:0 0 18px;
}

.title span{
 color:var(--gold);
}

.copy{
 font-size:14px;
 line-height:1.7;
 color:var(--muted);
 max-width:710px;
}

.line{
 margin-top:22px;
 border-top:1px solid var(--line);
 padding-top:14px;
 font:500 9px "Plus Jakarta Sans";
 letter-spacing:.14em;
 color:#8b8177;
}


/* =========================================================
   WORK / GALLERY
========================================================= */

.work{
 background:var(--beige2);
}

.workhead{
 display:flex;
 justify-content:space-between;
 align-items:end;
 gap:30px;
 margin-bottom:32px;
}

.workhead h2{
 font:600 clamp(48px,6.5vw,92px)/.82 "Plus Jakarta Sans";
 letter-spacing:-.08em;
 margin:10px 0 0;
}

.workhead h2 span{
 color:var(--gold);
}

.workhead p{
 max-width:340px;
 color:var(--muted);
 font-size:11px;
 line-height:1.65;
}

.gallery{
 display:grid;
 grid-template-columns:1.3fr .7fr;
 gap:10px;
}

.item{
 position:relative;
 overflow:hidden;
 background:#ded3c4;
 border-radius:16px;
}

.item img{
 height:100%;
 object-fit:cover;
 filter:saturate(.74);
 transition:1s cubic-bezier(.2,.8,.2,1);
}

.item:hover img{
 transform:scale(1.045);
 filter:saturate(.9);
}

.item:after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(
  transparent 55%,
  rgba(52,44,37,.58)
 );
}

.item1{
 height:520px;
}

.item2{
 height:250px;
 margin-top:45px;
}

.item3{
 height:250px;
 margin-top:-20px;
}

.item4,
.item5{
 height:300px;
 margin-top:8px;
}

.item6{
 grid-column:1/3;
 height:340px;
 margin-top:0;
}

.info{
 position:absolute;
 z-index:2;
 left:15px;
 right:15px;
 bottom:13px;
 display:flex;
 justify-content:space-between;
 color:white;
}

.info strong{
 font:600 10px "Plus Jakarta Sans";
 letter-spacing:.13em;
 text-transform:uppercase;
}

.info small{
 font:600 15px "Plus Jakarta Sans";
 color:#f0d49e;
}

.worknote{
 text-align:center;
 padding:52px 0 5px;
}

.worknote h3{
 font:500 clamp(32px,5vw,64px)/.98 "Plus Jakarta Sans";
 letter-spacing:-.06em;
 max-width:850px;
 margin:auto;
}

.worknote span{
 color:var(--gold);
}


/* =========================================================
   SERVICES
========================================================= */

.services{
 background:var(--brown);
 color:var(--white);
}

.services .label{
 color:var(--gold2);
}

.services .title{
 color:white;
}

.service{
 display:grid;
 grid-template-columns:40px 1fr 300px 16px;
 gap:14px;
 align-items:center;
 border-top:1px solid rgba(255,253,248,.14);
 padding:19px 0;
 transition:.3s;
}

.service:last-child{
 border-bottom:1px solid rgba(255,253,248,.14);
}

.service:hover{
 background:rgba(255,255,255,.035);
 padding-left:7px;
}

.service b{
 color:var(--gold2);
 font:600 10px "Plus Jakarta Sans";
}

.service h3{
 font:600 21px "Plus Jakarta Sans";
 margin:0;
}

.service p{
 font-size:10px;
 line-height:1.7;
 color:#c6bbb0;
 margin:0;
}

.arrow{
 color:var(--gold2);
}


/* =========================================================
   EXPORT
========================================================= */

.export{
 background:var(--paper);
 position:relative;
 overflow:hidden;
}

.export:before{
 content:"GLOBAL";
 position:absolute;
 right:-5vw;
 top:25px;
 font:800 clamp(100px,18vw,260px)/.8 "Plus Jakarta Sans";
 letter-spacing:-.09em;
 color:rgba(181,139,76,.055);
 pointer-events:none;
}

.exporthead{
 display:grid;
 grid-template-columns:1fr .8fr;
 gap:40px;
 align-items:end;
 margin-bottom:35px;
}

.exporthead h2{
 font:600 clamp(48px,6.6vw,92px)/.82 "Plus Jakarta Sans";
 letter-spacing:-.08em;
 margin:14px 0 0;
}

.exporthead h2 span{
 color:var(--gold);
}

.exportlead{
 max-width:430px;
 color:var(--muted);
 font-size:13px;
 line-height:1.9;
}

.exportgrid{
 display:grid;
 grid-template-columns:1.2fr .8fr;
 gap:10px;
}

.exportcard{
 background:var(--soft);
 border:1px solid rgba(181,139,76,.17);
 border-radius:16px;
 padding:24px;
 min-height:205px;
 position:relative;
 overflow:hidden;
}

.exportcard.dark{
 background:var(--brown);
 color:var(--white);
}

.exportcard h3{
 font:600 24px/1.05 "Plus Jakarta Sans";
 letter-spacing:-.045em;
 margin:12px 0 9px;
}

.exportcard p{
 margin:0;
 max-width:500px;
 font-size:11px;
 line-height:1.65;
 color:var(--muted);
}

.exportcard.dark p{
 color:#c8bdb2;
}

.exportnum{
 font:700 9px "Plus Jakarta Sans";
 letter-spacing:.18em;
 color:var(--gold);
 text-transform:uppercase;
}

.exportsteps{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:1px;
 margin-top:10px;
 border:1px solid var(--line);
 border-radius:16px;
 overflow:hidden;
 background:var(--line);
}

.exportstep{
 background:var(--paper);
 padding:19px 16px;
 min-height:120px;
}

.exportstep b{
 display:block;
 font:600 10px "Plus Jakarta Sans";
 color:var(--gold);
 margin-bottom:17px;
}

.exportstep strong{
 display:block;
 font:600 14px "Plus Jakarta Sans";
 margin-bottom:8px;
}

.exportstep span{
 font-size:10px;
 line-height:1.65;
 color:var(--muted);
}

.exportbadge{
 position:absolute;
 right:28px;
 bottom:25px;
 border:1px solid rgba(181,139,76,.38);
 border-radius:100px;
 padding:10px 13px;
 font:600 8px "Plus Jakarta Sans";
 letter-spacing:.1em;
 text-transform:uppercase;
 color:var(--gold);
}

.exportcta{
 margin-top:10px;
 background:var(--gold);
 color:var(--white);
 border-radius:16px;
 padding:23px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
}

.exportcta strong{
 font:600 clamp(25px,3vw,38px)/1 "Plus Jakarta Sans";
 letter-spacing:-.05em;
}

.exportcta p{
 margin:7px 0 0;
 color:#f3e2c5;
 font-size:11px;
 line-height:1.7;
}

.exportcta .btn{
 background:var(--brown);
}


/* =========================================================
   EXPORT MINI
========================================================= */

.exportmini{
 background:var(--cream);
 padding:45px 0;
 border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
}

.exportmini-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:1px;
 background:var(--line);
 border:1px solid var(--line);
}

.exportmini-item{
 background:var(--cream);
 padding:24px;
}

.exportmini-item strong{
 display:block;
 font:600 14px "Plus Jakarta Sans";
 margin-bottom:7px;
}

.exportmini-item span{
 font-size:10px;
 line-height:1.7;
 color:var(--muted);
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy{
 background:var(--soft);
}

.philogrid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:45px;
 align-items:center;
}

.philosophy h2{
 font:600 clamp(44px,5.7vw,78px)/.9 "Plus Jakarta Sans";
 letter-spacing:-.07em;
 margin:14px 0 24px;
}

.philosophy h2 span{
 color:var(--gold);
}

.philosophy p{
 font-size:14px;
 line-height:1.9;
 color:#6f7771;
}

.softcard{
 background:rgba(255,253,248,.58);
 border:1px solid rgba(181,139,76,.2);
 padding:24px;
 min-height:260px;
 border-radius:16px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
}

.softtop{
 display:flex;
 justify-content:space-between;
 font:8px "Plus Jakarta Sans";
 letter-spacing:.13em;
 color:#8a8178;
}

.rings{
 width:145px;
 height:145px;
 border-radius:50%;
 border:1px solid rgba(181,139,76,.42);
 margin:auto;
 position:relative;
 display:grid;
 place-items:center;
}

.rings:before,
.rings:after{
 content:"";
 position:absolute;
 border:1px solid rgba(181,139,76,.25);
 border-radius:50%;
 inset:16px;
}

.rings:after{
 inset:40px;
 border-color:rgba(181,139,76,.42);
}

.rings span{
 font:600 30px "Plus Jakarta Sans";
 color:var(--gold);
}

.softbottom{
 font:8px "Plus Jakarta Sans";
 letter-spacing:.1em;
 color:#8b8177;
 line-height:1.8;
}


/* =========================================================
   CONTACT / CTA
========================================================= */

.cta{
 background:var(--gold);
 color:var(--white);

 position:relative;
 overflow:hidden;

 padding:75px 0 80px;

 text-align:center;
}

.cta:before{
 content:"R";

 position:absolute;
 right:-6%;
 bottom:-17%;

 font:700 42vw/.7 "Plus Jakarta Sans";

 color:rgba(255,253,248,.08);

 pointer-events:none;
}

.ctain{
 position:relative;
 z-index:2;

 width:min(1200px,94vw);

 margin-left:auto;
 margin-right:auto;

 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
}


/* =========================================================
   CONTACT HEADING
========================================================= */

.cta .label{
 color:#f6dfb1;
 text-align:center;
}

.cta h2{
 font:700 clamp(60px,9vw,125px)/.78 "Plus Jakarta Sans";

 letter-spacing:-.09em;

 margin:14px auto 24px;

 text-align:center;
}

.contact-intro{
 width:100%;
 max-width:560px;

 margin:0 auto 55px;

 color:#f1dfc1;

 font-size:13px;
 line-height:1.7;

 text-align:center;
}


/* =========================================================
   CONTACT DETAILS
   FULL GROUP CENTERED
   NO BOXES
========================================================= */

.contact-details {
    width: 100%;
    max-width: 1200px; /* Limits the max width so it doesn't stretch too wide on desktop */
    margin: 0 auto 100px;
    display: grid;
    
    /* Using minmax allows columns to shrink smoothly on smaller screens */
    grid-template-columns: 
        minmax(250px, 330px) 
        minmax(140px, 170px) 
        minmax(140px, 170px) 
        minmax(140px, 170px);
    
    gap: 40px;
    align-items: start;
    
    /* This centers the grid columns inside the grid container */
    justify-content: center; 
    
    text-align: left;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.contact-item{
 width:100%;
 min-width:0;

 margin:0;
 padding:0;

 background:none !important;
 border:none !important;
 border-radius:0 !important;
 box-shadow:none !important;

 display:block;

 text-align:left;
}


/* =========================================================
   CONTACT LABEL
========================================================= */

.contact-label{
 display:block;

 margin:0 0 12px;

 font:700 9px "Plus Jakarta Sans";

 letter-spacing:.18em;

 line-height:1.4;

 text-transform:uppercase;

 color:#f6dfb1;

 text-align:left;
}


/* =========================================================
   CONTACT TEXT
========================================================= */

.contact-item p{
 margin:0;
 padding:0;

 font:500 11px/1.75 "DM Sans",sans-serif;

 color:#f1dfc1;

 text-align:left;

 overflow-wrap:anywhere;
}


/* =========================================================
   CONTACT LINKS
========================================================= */

.contact-item a{
 color:#fffdf8;

 text-decoration:none;

 transition:
  color .25s ease,
  opacity .25s ease;
}

.contact-item a:hover{
 color:var(--brown);

 opacity:.9;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.cta .btn{
 display:inline-flex;

 margin:0 auto;

 background:var(--brown);

 color:var(--white);
}

.cta .btn:hover{
 background:var(--brown2);
}


/* =========================================================
   FOOTER
========================================================= */

footer{
 background:#29231e;

 color:#9c9186;

 padding:18px 0;

 font-size:9px;

 letter-spacing:.12em;
}

.foot{
 display:flex;

 justify-content:space-between;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{
 opacity:0;

 transform:translateY(28px);

 transition:.8s cubic-bezier(.2,.8,.2,1);
}

.reveal.show{
 opacity:1;

 transform:none;
}


/* =========================================================
   TABLET - 1100px
========================================================= */

@media(max-width:1100px){

 .contact-details{
  width:100%;
  max-width:760px;

  grid-template-columns:
      minmax(280px,2fr)
      minmax(140px,1fr);

  gap:35px 55px;

  margin-left:auto;
  margin-right:auto;

  align-items:start;
 }

}


/* =========================================================
   TABLET - 850px
========================================================= */

@media(max-width:850px){

 .links{
  display:none;
 }

 .hero .container{
  padding-top:100px;
 }

 .hero{
  min-height:76svh;
 }

 .hero-photo{
  width:48vw;
  height:50vh;
  right:2vw;
  top:24vh;
  opacity:.75;
 }

 .hero:before{
  right:-42vw;
 }

 .hero:after{
  right:-35vw;
 }

 .hero-bottom{
  display:block;
 }

 .hero-copy{
  margin-bottom:25px;
 }

 .hero-note{
  display:none;
 }

 .grid2,
 .philogrid{
  grid-template-columns:1fr;
  gap:30px;
 }

 .workhead{
  display:block;
 }

 .workhead p{
  margin-top:20px;
 }

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

 .item1{
  grid-column:1/3;
  height:400px;
 }

 .item2,
 .item3,
 .item4,
 .item5{
  height:260px;
  margin:0;
 }

 .item6{
  grid-column:1/3;
  height:310px;
 }

 .service{
  grid-template-columns:35px 1fr 16px;
  padding:16px 0;
 }

 .service p{
  grid-column:2/4;
 }

 .service h3{
  font-size:22px;
 }

 .exporthead{
  grid-template-columns:1fr;
  gap:20px;
 }

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

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

 .exportcta{
  display:block;
 }

 .exportcta .btn{
  margin-top:20px;
 }


 /* CONTACT */

 .contact-details{
  width:100%;
  max-width:700px;

  grid-template-columns:
      minmax(260px,2fr)
      minmax(140px,1fr);

  gap:35px 45px;

  margin-left:auto;
  margin-right:auto;
 }

}


/* =========================================================
   MOBILE - 560px
========================================================= */

@media(max-width:560px){

 section{
  padding:42px 0;
 }

 .hero .container{
  padding-top:90px;
 }

 .hero-photo{
  width:70vw;
  height:42vh;
  right:-15vw;
  top:29vh;
  opacity:.38;
 }

 .hero h1{
  font-size:58px;
  margin-bottom:20px;
 }

 .hero-copy{
  font-size:12px;
 }

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

 .item1,
 .item2,
 .item3,
 .item4,
 .item5,
 .item6{
  grid-column:auto;
  border-radius:14px;
 }

 .item1{
  height:370px;
 }

 .item2,
 .item3,
 .item4,
 .item5,
 .item6{
  height:300px;
 }

 .worknote{
  padding-top:38px;
 }

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

 .exportcard{
  padding:20px;
 }

 .exportstep{
  padding:17px 14px;
 }

 .softcard{
  min-height:230px;
 }


 /* =====================================================
    CONTACT MOBILE
 ===================================================== */

 .cta{
  padding:55px 0 60px;
 }

 .cta h2{
  font-size:58px;

  margin:14px auto 22px;
 }

 .contact-intro{
  max-width:400px;

  margin:0 auto 42px;

  font-size:12px;

  line-height:1.7;
 }

 .contact-details{
  width:100%;
  max-width:400px;

  display:grid;

  grid-template-columns:1fr;

  gap:30px;

  margin-left:auto;
  margin-right:auto;

  text-align:left;
 }

 .contact-item{
  width:100%;
 }

 .contact-label{
  margin-bottom:9px;

  font-size:9px;
 }

 .contact-item p{
  font-size:11px;

  line-height:1.7;
 }

 .cta .btn{
  display:inline-flex;
 }


 footer{
  padding:18px 0;
 }

}


/* =========================================================
   VERY SMALL MOBILE - 380px
========================================================= */

@media(max-width:380px){

 .cta{
  padding:48px 0 55px;
 }

 .cta h2{
  font-size:52px;
 }

 .contact-details{
  width:100%;
  max-width:90vw;

  gap:27px;
 }

 .contact-item p{
  font-size:10.5px;
 }

}