:root{
  --bg:#ddd4bf;
  --bg-soft:#e7e0cf;
  --bg-deep:#1c130d;
  --bg-deep-2:#241a12;
  --ink:#25201a;
  --ink-soft:#5b5347;
  --cream:#f6f1e3;
  --red:#ed1c24;
  --red-dark:#84081f;
  --red-glow:rgba(195,18,46,.28);
  --gold:#a9875a;
  --line:rgba(37,32,26,.16);
  --line-cream:rgba(246,241,227,.18);
  --ff-display:'Cairo', sans-serif;
  --ff-script:'Mrs Saint Delafield', cursive;
  --ff-body:'Work Sans', sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:400;
  overflow-x:hidden;
  max-height: 100dvh;
  -webkit-font-smoothing:antialiased;
}
img{
	display:block;
	max-width:100%;
}

.wrap{
	max-width:1280px;
	margin:0 auto;
	padding:0 56px;
}



h1,h2,h3{
	font-family:var(--ff-display);
	text-transform:uppercase;
	line-height:.94;
	letter-spacing:.01em;
	font-weight:400;
}
.stroke{
  color:transparent;
  -webkit-text-stroke:1.5px var(--red);
}
.script {
	font-family:var(--ff-script);
	text-transform:none;
	font-weight:400;
	letter-spacing:0;
}

/* ===== reveal utility ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);}
.reveal-scale.in{opacity:1;transform:scale(1);}
.stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ===== HERO ===== */
.hero{
	position:relative;
	display:flex;
	align-items:center;
	padding-top:60px;
	padding-bottom:20px;
}
.hero-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	align-items:center;
}
.hero-head{
	position:relative;
}
.hero-head .line1{
	font-size:clamp(40px,5.4vw,74px);
	opacity:0;
	transform:translateY(40px);
	animation:riseIn .9s var(--ease) .25s forwards;
}
.hero-head .line2{
	font-size:clamp(40px,5.4vw,74px);
	color:var(--red);
	opacity:0;
	transform:translateY(40px);
	animation:riseIn .9s var(--ease) .42s forwards;
	display:flex;
	align-items:baseline;
	gap:18px;
	flex-wrap:wrap;
}
.hero-head .line2 .script{
	color:var(--ink);
	font-size:clamp(52px,7vw,96px);
	line-height:.7;
}
@keyframes riseIn{
	to{
		opacity:1;
		transform:translateY(0);
	}
}
.hero p.lede{
	margin-top:26px;
	max-width:420px;
	color:var(--ink-soft);
	font-size:15.5px;
	line-height:1.8;
	opacity:0;
	animation:riseIn .9s var(--ease) .6s forwards;
}
.logo{
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
  opacity: 0;
  transform:translateY(-30px);
  color:var(--red);font-weight:600;
  animation: riseOut .9s var(--ease) .6s forwards;
}
.logo img{
	width: 40%;
}
@keyframes riseOut{
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}
.hero-ctas{
	display:flex;
	gap:16px;
	margin-top:36px;
	opacity:0;
	animation:riseIn .9s var(--ease) .74s forwards;
}
.foot-social{
	display:flex;
	gap:14px;
	margin-top:24px;
}
.foot-social a{
	width:48px;
	height:48px;
	border:1px solid rgba(237,28,36,.25);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:.3s var(--ease);
}
.foot-social a:hover{
	background:var(--red);
	border-color:var(--red);
	transform:translateY(-3px);
}
.foot-social svg{
	width:30px;
	height:30px;
	stroke:var(--red);
}

.foot-social svg:hover{
	stroke:var(--cream);
}

.hero-visual{
	position:relative;
	opacity:0;
	transform:scale(1.6);
	animation:heroImgIn 1.3s var(--ease) .3s forwards;
}
@keyframes heroImgIn{
	to {
		opacity:1;
		transform:scale(1);
	}
}
.hero-frame{
  position:relative;border-radius:6px;overflow:hidden;
  box-shadow:0 40px 70px -30px rgba(28,19,13,.45);
}
.hero-frame img{width:100%;height:640px;object-fit:cover;transition:transform 1.2s var(--ease);}
.hero-frame:hover img{transform:scale(1.045);}
.hero-frame::after{
  content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,19,13,0) 0%,rgba(28,19,13,.5) 100%);
}
.badge-float{
  position:absolute;left:-30px;bottom:44px;background:var(--cream);padding:16px 22px;
  border-radius:4px;box-shadow:0 20px 40px -14px rgba(0,0,0,.3);display:flex;gap:12px;align-items:center;
  animation:floatY 5s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.badge-float .dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex-shrink:0;box-shadow:0 0 0 5px rgba(195,18,46,.15);}
.badge-float span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;}
.hero-corner{position:absolute;right:0;top:-8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:right;}

/* marbling vein svg divider */
.vein-divider{width:100%;height:30px;display:block;}
.vein-divider path{
  fill:none;stroke:var(--red);stroke-width:1.3;opacity:.55;
  stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.8s var(--ease);
}
.vein-divider.in path{stroke-dashoffset:0;}
.vein-divider.on-dark path{stroke:var(--gold);opacity:.5;}


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

.foot-bottom{
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:15px;
	padding-bottom: 10px;
	color:var(--red);
}

/* ===== responsive ===== */
@media(max-width:980px){
  .wrap{padding:0 26px;}
  .hero-grid{grid-template-columns:1fr;gap:50px;}
  .hero{padding-top:130px;}
  .hero-visual{order:1;}
  .hero-frame img{height:420px;}
}
@media(max-width:560px){
  .badge-float{left:12px;bottom:16px;}
}
@media (prefers-reduced-motion: reduce){
  *{
  	animation-duration:.01ms !important;
  	animation-iteration-count:1 !important;
  	transition-duration:.01ms !important;
  	scroll-behavior:auto !important;
  }
}