/* Fonts: headings = Manrope, cursive = Protest Riot, paragraphs = DM Sans (loaded in index.html) */
:root{
  --cream:#fff8ec;--white:#fff;--ink:#1f1a17;--black:#0a0a0a;--amber:#f6b827;--amber-d:#e49a10;--muted:#5f5953;
  --disp:"Manrope",system-ui,sans-serif;--body:"DM Sans",system-ui,sans-serif;--script:"Protest Riot","Comic Sans MS",cursive;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cream:#fff8ec;--white:#fff}}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0}
body{background:var(--cream);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1320px;margin:0 auto;
	  /* padding:0 28px */
	 }
.script{font-family:var(--script);font-weight:400;letter-spacing:0}
.eyebrow{font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: #DF8D16;
justify-content: center;}
.eyebrow svg{width:16px;height:16px}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.03em;line-height:1.02}

/* header */
.top{padding:38px 0 34px}
.crumb{display:flex;gap:6px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.crumb a{color:inherit;text-decoration:none;display:flex;gap:6px;align-items:center}
.crumb a:hover,.crumb a:focus-visible{color:var(--ink)}
.crumb b{color:var(--amber-d);font-weight:700}
.top h1{font-size:clamp(52px,8vw,84px);font-weight:800}
.top h1 .script{color:var(--amber);font-size:.9em}

/* intro */
.intro{background:var(--white);padding:76px 0 110px}
.intro .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:center}
.packets{position:relative;
		 /* aspect-ratio:1.1; */
		 display:grid;place-items:center}
/* .packets::before{content:"";position:absolute;inset:8% 4%;background:radial-gradient(closest-side,#fde7a8,transparent);border-radius:50%} */
.packets svg{position:relative;width:100%;height:auto;filter:drop-shadow(0 22px 22px rgba(0,0,0,.22))}
.intro h2{font-size:clamp(34px,4.4vw,32px);font-weight:700;margin-bottom:22px;max-width:24ch}
.intro p{margin-bottom:14px;max-width:60ch;font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 29.25px;
  letter-spacing: 0;
  color: #242322A6;}

  .para{margin-bottom:14px;max-width:60ch;font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 29.25px;
    letter-spacing: 0;
    color: #242322A6;
    background-color: #fbf7ee;
    padding: 24px;
  }
.intro p.lead{color:var(--ink);font-weight:600}
.intro p strong{color:var(--ink)}

/* mission */
.mission{background:#FCBF23;padding:78px 0 70px;position:relative;text-align:center}
.mission .eyebrow{color:var(--ink)}
.mission h2{font-size:clamp(44px,6.4vw,72px);font-weight:800;margin:14px 0 52px;text-align: -webkit-center;}
.mission h2 .script{display:block;color:#fff;font-size:72px;margin-top:6px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:32px;text-align:left;max-width:1320px;margin:0 auto}
.card{border-radius:14px;padding:34px 30px 32px}
.card small{display:block;font-size:13px;font-weight:500;margin-bottom:22px;opacity:.85}
.card h3{font-size:clamp(26px,3vw,24px);font-weight:600;line-height:1.1;margin-bottom:26px}
.card p{font-size:14.5px;line-height:1.7}
.card.dark{background:var(--black);color:#fff}
.card.dark p{font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 29.25px;
  letter-spacing: 0;
  color: #ffffffa6;}

.card.light{background:#fff}
.card.light p{font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 29.25px;
  letter-spacing: 0;
  color: #000000a6;}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px;display:block}

/* story */
/* our stories */

.our-stories{
padding:60px 0 60px;
text-align:center;
}

.our-stories .eyebrow{
color:var(--amber-d);
}

.our-stories h2{
font-size:clamp(42px,6.6vw,72px);
font-weight:700;
margin:20px auto 56px;
max-width:15ch;
text-align:-webkit-center;
}

.our-stories h2 .script{
color:var(--amber);
font-size:72px;
white-space:nowrap;
}
.duo.s{max-width:1320px}
.pc{border-radius:26px;padding:34px 38px;min-height:210px}
.pc small{display:block;font-size:13px;margin-bottom:22px;opacity:.8}
.pc p{font-size:clamp(20px,2.3vw,24px);font-weight:500;line-height:1.4;letter-spacing:-.01em}
.pc.a{background:#fff !important;border:1px solid #f0e6d3}
.pc.b{background:var(--ink)!important;color:#fff}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:left;margin-top:62px;padding-top:44px;border-top:1px solid #efe3cd}
.trio h4{font-size:24px;font-weight:600;margin-bottom:8px;text-align: center;}
.trio p{margin-bottom: 14px;
  max-width: 60ch;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 29.25px;
  letter-spacing: 0;
  color: #242322A6;
  max-width:34ch;
  text-align: center;
}

/* header */
/* =========================
   GIFTING HERO SECTION
========================= */

.gifting-hero {
  width: 100%;
  background: #fffbf0;
  padding: 46px 0 38px;
  border-bottom: 1px solid #dddddc;
}

.gifting-hero-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Breadcrumb */
.gifting-breadcrumb {
  display: flex;
  align-items: center;
  height: 18px;
  color:#999999;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  line-height: 1;
}

.back-arrow {
  margin-right: 7px;
  color: #99938d;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}

.home-text {
  color: #99938d;
}

.slash {
  margin: 0 2px;
 color: #df8d16;
}

.products-text {
  color: #df8d16;
}

/* Main heading */
.gifting-title {
  margin: 19px 0 0;

  color: #242322;
  font-family: "Manrope", sans-serif;
  font-size: 72px;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -3.5px;
}

.gifting-title span {
  color: #f8b719;
  font-family: "Protest Riot", cursive;
  font-weight: 400;
  letter-spacing: -2px;
}

.cats-bottom-svg {
  width: 100%;
  margin-top: -21px;
}
.yk-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* cta */
.cta{background:var(--amber);position:relative;padding:190px 0 100px;margin-top:70px}
.cta .wave{top:-1px;bottom:auto;transform:scaleY(-1);height:120px}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta .eyebrow{margin-bottom:16px}
.cta h2{font-size:clamp(50px,8vw,96px);font-weight:800}
.cta h2 .script{display:block;color:#fff;font-size:.9em;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:18px 30px;border-radius:999px;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:#000}
.btn:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn svg{width:12px;height:12px}
.foot{background:var(--ink);color:#bdb6ac;text-align:center;font-size:12.5px;padding:22px}

@media (max-width:860px){
  /* .intro .wrap,.duo,.trio{grid-template-columns:1fr} */
  .intro{padding:48px 0 48px}
  .mission{padding:48px 0}
  .trio{gap:26px}
  .cta{padding-top:150px}
  .wave{height:70px}
	.mission h2{margin: 14px 0 28px;}
	.mission h2 .script{font-size:50px;}
	.our-stories h2{margin: 20px auto 25px;}
	
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


@media (max-width:560px){
.intro .wrap{
	    grid-template-columns: 1fr;
}
	.duo {
		    grid-template-columns: 1fr
	}
	.our-stories h2 .script{
		font-size:42px;
	}
	.trio {
		  grid-template-columns: 1fr
}
	.gifting-title{
		    font-size:46px;
		    margin: 12px 0 0;
	}
	.gifting-breadcrumb{
		font-size:10px;
	}
	.gifting-hero{
		    padding: 24px 0 24px;
	}
	.intro h2{
		    font-size: 24px;
		    margin-bottom:16px;
	}
	.intro p.lead{
		    font-weight: 500;
	}
	.intro p{
	font-size: 18px;
    line-height: 25px;
		margin-bottom: 16px;
	}
	.lead{
		margin: 16px 0;
	}
	.card h3{
		font-size:24px;
		    margin-bottom: 16px;
	}
	.card{
		padding:24px;
	}
	.pc{
		padding:24px;
	}
}