@font-face {
    font-family: 'FranklinGothic-Book';
    src: url('fonts/FranklinGothic-Book.eot');
    src: url('fonts/FranklinGothic-Book.eot?#iefix') format('embedded-opentype'),
        url('fonts/FranklinGothic-Book.woff2') format('woff2'),
        url('fonts/FranklinGothic-Book.woff') format('woff'),
        url('fonts/FranklinGothic-Book.ttf') format('truetype'),
        url('fonts/FranklinGothic-Book.svg#FranklinGothic-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FranklinGothic-Demi';
    src: url('fonts/FranklinGothic-Demi.eot');
    src: url('fonts/FranklinGothic-Demi.eot?#iefix') format('embedded-opentype'),
        url('fonts/FranklinGothic-Demi.woff2') format('woff2'),
        url('fonts/FranklinGothic-Demi.woff') format('woff'),
        url('fonts/FranklinGothic-Demi.ttf') format('truetype'),
        url('fonts/FranklinGothic-Demi.svg#FranklinGothic-Demi') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}





/* ───── Variables + base ───── */
:root{--pin:#fff;--box:#5e6045}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{ font-family: 'FranklinGothic-Book';background:#000;color:#fff}
p { font-family: 'FranklinGothic-Book'; font-size:1.5vw;}
a{color:inherit;text-decoration:none}

/* ───── Header layout ───── */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(0,0,0,0);                 /* start transparent */
  transition:background .25s ease; 
	padding-bottom:6px;
}
.header-row{display:flex;width:100%}
.logo-block{display:flex;align-items:stretch}
.color-box{width:12px;height:100%;background:#707055}
.logo{width:140px;margin:18px;height:auto}

.nav-grid{display:flex;flex:1;border-bottom:1px solid var(--pin);
          margin-top:25px;margin-bottom:40px}
.nav-item{display:flex;align-items:center;justify-content:center;
          border-left:1px solid var(--pin);flex:1 1 0}
.nav-item:first-child{border-left:none}
.nav-item.menu{flex:0 0 auto}
.nav-item a{
  width:100%;text-align:center;font-weight:300;padding:12px 2rem;
  font-size:20px;line-height:1;color:#fff;text-decoration:none
}

.hamburger{display:inline-flex;flex-direction:column;gap:6px;padding:12px 18px;
           background:none;border:none;cursor:pointer}
.hamburger span{width:28px;height:3px;background:var(--pin)}

.tagline{margin:-30px 20px 0 0;text-align:right;font-size:20px;font-weight:300;letter-spacing:.02em}



body.light{background:#fff;color:#000}                 /* optional */

.site-header.light        {background:#fff}
.site-header.light .nav-grid{border-color:#707055}
.site-header.light .color-box{background:#707055}
.site-header.light .nav-item{border-left:1px solid #707055}
.site-header.light .nav-item a{color:#0B1030}           /* navy text */
.site-header.light .hamburger span{background:#000}
.site-header.light .tagline{color:#000}

body.light {margin-top:112px;}

/* ───── Drawer ───── */
.drawer{position:fixed;top:0;right:-100%;height:100%;width:100%;max-width:20vw;
        background:#000;border-left:1px solid var(--pin);padding:80px 40px 40px;
        display:flex;flex-direction:column;gap:2rem;transition:right .3s ease;
        z-index:1500}
.drawer.open{right:0}
.drawer a{font-size:1.2rem;font-weight:300; color:#FFF!important}
.drawer-close{position:absolute;top:30px;right:20px;font-size:2rem;background:none;
              border:none;color:#fff;cursor:pointer;line-height:1}

/* ===== HERO (static) ===== */
.hero{position:relative;width:100%;overflow:hidden}
.hero-img{width:100%;height:auto;display:block;object-fit:contain; margin-top:20px;}


/* ===== HERO slideshow (fade loop, “contain”) ===== */
.hero-slideshow{
  position:relative;
  width:100%;
  height:50vw;               /* adjust as you like */
  max-height:800px;          /* optional cap       */
  overflow:hidden;
}

/* inner frame */
.slideshow{position:absolute;inset:0}

/* every img shares timeline; stagger delays */
.slideshow .slide-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;        /* show entire photo */
  object-position:center;
  opacity:0;
  animation:slideFade 24s infinite;
}

/* first image also sets natural height */
.slideshow .slide-img.first{
  position:relative;         /* keep space */
  animation-delay:0s;
}

.slideshow .slide-img:nth-child(2){animation-delay:8s}
.slideshow .slide-img:nth-child(3){animation-delay:16s}

/* fade timeline: 0‑4 % in • 4‑28 % stay • 28‑32 % out */
@keyframes slideFade{
  0%,32%,100% {opacity:0}
  4%,28%      {opacity:.95}
}

/* optional: taller hero on phones */
@media(max-width:900px){
  .hero-slideshow{height:70vw}
}


/* ───── Values / purpose block ───── */
.values-block{padding:4vw 6vw;background:#fff;color:#000}
.values-rule{border:0;border-top:2px solid #707055;margin:0 0 2.5vw}
.values-wrap{display:grid;grid-template-columns:1fr minmax(26%,28%);gap:0}
.values-head{font-size:13vw;line-height:12vw;letter-spacing:-.3vw;color:#bbb;
             font-weight:400;transform:scaleX(.90);transform-origin:left top}
.values-fig{margin:0;text-align:right}
.values-fig img{width:100%;height:auto;display:block}
.values-copy{font-size:2vw;line-height:2.5vw;margin-top:2.5vw}

/* ───── Mobile ≤900px ───── */
@media(max-width:900px){
  .logo{width:120px;margin:18px}
  .nav-grid{justify-content:flex-end;margin:0;border:0;border-bottom:1px solid var(--pin)}
  .nav-item:not(.menu){display:none}
  .hamburger{padding:12px 18px}
  .tagline{margin-top:10px}
  .drawer{max-width:100%}
	.drawer a{font-size:7vw;font-weight:300; color:#FFF!important}
  .values-wrap{grid-template-columns:1fr}
  .values-fig{text-align:left;margin-top:2vw}
  .values-copy{font-size:5vw; line-height:6vw;}
	
	.hero-img {margin-top: 100px;}
	
	.values-fig img {margin-left: -5vw;}
	
	.values-block .values-fig {display:none;}
	
	.values-head {
font-size: 17vw;
line-height: 14vw;
		
	}
}
/* ===== SECTION: Page Head ===== */
.page-head{margin:160px 6vw 0;font-size:clamp(3rem,10vw,9rem);line-height:.85;font-weight:300}
.page-rule{border:0;border-top:2px solid var(--pin);margin:1.5rem 6vw 2rem;width:calc(100% - 12vw)}

/* ===== SECTION: Products Hero (unchanged bg) ===== */
.products-hero{
  position:relative;
  min-height:75vw;
  padding:0 6vw 60px;                /* header space handled above */
  display:grid;grid-template-columns:1fr;align-content:start;
  background:url("images/products/plain-cup-hero.jpg") top center / 100% auto no-repeat;
}
.products-content{position:relative;z-index:1;max-width:520px}
.products-content{position:relative;z-index:1;max-width:520px}
.prod-title{font-size:clamp(3rem,10vw,9rem);line-height:.85;font-weight:300}
.prod-rule{border:0;border-top:2px solid var(--pin);margin:1.5rem 0 2rem;width:100%}
.prod-intro{font-size:1.5vw;line-height:2vw;margin-bottom:15vw;max-width:40ch; padding-top:3vw;}
.prod-sub{font-size:3vw;font-weight:300;margin-bottom:1rem; }
.prod-desc{font-size:1.5vw;line-height:2vw;}

/*  ≤900px  */
@media(max-width:900px){
  .products-hero{
    grid-template-columns:1fr;gap:2vw;padding:120px 6vw 60px;
    background-position:center top;
  }
	
	.prod-intro{font-size:3.5vw;line-height:5vw; margin-bottom:5vw;}
	
	.products-hero {padding:0 55% 0 15px; }
	
	.prod-sub {font-size:6vw;}
	
	.prod-desc {font-size:4vw;line-height:5vw;}
}




/* === Custom Printed Cups hero === */
.custom-cups{
  position:relative;
  min-height:100vh;                         /* full viewport like first hero */
  padding:0 6vw 60px;
  display:grid;grid-template-columns:1fr;align-content:start;
  background:url("images/products/custom-printed-hero.jpg") top center / 100% auto no-repeat;
}

/* reuse .products-content typography; nothing else to tweak */

/* ≤900 px keep same adjustments as first hero */
@media(max-width:900px){
  .custom-cups{padding: 70vw 6vw 60px;background-position:center top; min-height:0;}
}


/* === Custom Cups: full-width two-column text === */
.custom-cups .products-content{
  max-width:none;          /* let it span the section */
  width:100%;
  column-count:2;
  column-gap:4vw;          /* space between the columns */
}

/* headline stays full width */
.custom-cups .prod-sub{break-inside:avoid-column}

/* collapse to single column on small screens */
@media(max-width:900px){
  .custom-cups .products-content{
    column-count:1;
  }
}



/* === Cup Lids & Straws hero === */
/* tweak --left / --right / --gap in-line or via media-queries to move the “gap” */
.lids-straws{
  --left:62%;          /* width of left column  */
  --right:38%;         /* width of right column */
  --gap:4vw;           /* space between them    */

  position:relative;
  min-height:100vh;
  padding:0 6vw 60px;
  display:grid;
  grid-template-columns:minmax(0,var(--left)) minmax(0,var(--right));
  column-gap:var(--gap);
  align-content:start;
  background:url("images/strawcup.jpg") top center / 100% auto no-repeat;
}

/* text blocks stay above the image */
.lids-col,
.straws-col{position:relative;z-index:1}

/* right column headlines align right on desktop */
.straws-col .prod-sub{text-align:right}

/* ===== Mobile ≤900px ===== */
@media (max-width:900px){
  .lids-straws{
    grid-template-columns:1fr;
    padding: 80vw 6vw 60px;
    background-position:center top;
  }
  .straws-col .prod-sub{text-align:left}
}




/*  SECTION: What’s Good intro  */
.wg-intro{padding:20px 6vw 80px}

.wg-author{font-size:1.1rem;margin-bottom:.8rem}
.wg-rule  {border:0;border-top:2px solid #707055;margin:0 0 2rem}

.wg-head  {font-size:clamp(4rem,12vw,12rem);line-height:.9;
           color:#bbb;font-weight:300;margin:0 0 2rem}

.wg-sub   {font-size:2rem;font-weight:700;margin:0 0 1rem;color:#0B1030}
.wg-p     {font-size:1.25rem;line-height:1.55;margin:0 0 1.6rem}

@media(max-width:900px){
  .wg-head{font-size:14vw}
  .wg-p   {font-size:1.1rem}
	
	
	.tagline {font-size:4vw;}
	.values-wrap, .values-copy {padding:4vw 0;}
	
	.prod-intro {font-size:4vw; line-height:5vw;}
	.products-hero {padding-left:6vw;}
}

.white-bg {background-color:#FFF;}
 

@media(min-width:1400px){

	.values-wrap {width: 1242.5625px;}
	.values-head {font-size: 183.169998px;
height: 583.53125px;
letter-spacing: -4.227px;
line-height: 169.080002px;}
	.values-block {padding-bottom: 56.360001px;
		margin-left: auto;
margin-right: auto;
padding-left: 84.540001px;
padding-right: 84.540001px;
padding-top: 56.360001px;
width: 1409px;}
	.values-copy{font-size: 28.18px;
height: 140px;
line-height: 35.224998px;
margin-block-end: 0px;
margin-block-start: 35.21875px;
margin-bottom: 0px;
margin-inline-end: 0px;
margin-inline-start: 0px;
margin-left: auto;
margin-right: auto;
		display:block;
margin-top: 35.21875px;}
	
	.wg-intro {padding-bottom: 80px;
padding-left: 84px;
padding-right: 84px;
padding-top: 20px;
width: 1400px;}
	
	.wg-head {font-size: 168px;
line-height: 151.199997px;}
	
	.wg-sub {font-size: 32px;
font-weight: 700;}
	
	.wg-intro {padding-bottom: 80px;
padding-left: 96.059998px;
padding-right: 96.059998px;
padding-top: 20px;
width: 1400px; margin:0 auto;}
}