*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--black:#0a0a0a;--yellow:#FEDA00;--steel:#1E2D40;--white:#ffffff;--offwhite:#F7F6F2;}
html{scroll-behavior:smooth}
body{font-family:'Barlow',sans-serif;background:var(--black);color:var(--white);overflow-x:hidden}

/* HERO */
.page-hero{margin-top:64px;background:var(--black);padding:64px 96px 48px;border-bottom:1px solid rgba(255,255,255,.06)}
.page-hero-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;color:#FEDA00;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.page-hero-eyebrow::before{content:'';width:24px;height:2px;background:#FEDA00;display:inline-block}
.page-hero-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,6vw,80px);font-weight:800;text-transform:uppercase;color:#ffffff;line-height:.95;letter-spacing:-.02em;margin-bottom:16px}
.page-hero-title span{color:#FEDA00}
.page-hero-sub{font-size:16px;color:rgba(255,255,255,.5);max-width:560px;line-height:1.6;margin-bottom:32px}
.hero-anchors{display:flex;gap:8px;flex-wrap:wrap}
.hero-anchor{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none;padding:8px 16px;border:1px solid rgba(255,255,255,.15);border-radius:2px;transition:all .2s}
.hero-anchor:hover{color:var(--yellow);border-color:var(--yellow)}

/* STRIPE */
.stripe{height:4px;background:repeating-linear-gradient(90deg,#FEDA00 0px,#FEDA00 24px,#0a0a0a 24px,#0a0a0a 32px)}

/* SHARED EYEBROW */
.section-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.section-eyebrow::before{content:'';width:24px;height:2px;display:inline-block}
.section-eyebrow.on-dark{color:var(--yellow)}
.section-eyebrow.on-dark::before{background:var(--yellow)}
.section-eyebrow.on-light{color:#8a6f00}
.section-eyebrow.on-light::before{background:#8a6f00}
.section-headline{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,4vw,56px);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.02em;margin-bottom:24px; color: #fff;}
.section-headline span{color:var(--yellow)}
/* On light background — headline in black, span in dark gold */
.section-headline.on-light{color:var(--black)}
.section-headline.on-light span{color:#8a6f00}

/* BLOCKING THE SEAMS — off-white bg, dark text */
.bricking-section{background:var(--offwhite);padding:80px 96px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.intro-body{font-size:15px;color:#444;line-height:1.75;margin-bottom:16px}
.intro-body strong{color:#111;font-weight:600}

/* DIAGRAM ROTATOR — transparent on off-white */
.diagram-rotator{display:flex;flex-direction:column;align-items:center;gap:24px}
.diagram-main{display:flex;align-items:center;justify-content:center;gap:32px;width:100%}
.diagram-frame{position:relative;height:520px;width:238px;flex-shrink:0}
.diagram-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s ease}
.diagram-slide.active{opacity:1}
.diagram-slide img{height:100%;width:auto;object-fit:contain;display:block}
.diagram-side-label{display:flex;flex-direction:column;justify-content:center;gap:4px}
.diagram-count{font-family:'Barlow Condensed',sans-serif;font-size:104px;font-weight:900;color:var(--black);line-height:.85;letter-spacing:-.04em}
.diagram-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#888;max-width:140px;line-height:1.3}
.diagram-dots{display:flex;gap:8px;align-items:center;justify-content:center}
.diagram-dot{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.15);border:none;cursor:pointer;padding:0;transition:background .3s}
.diagram-dot.active{background:var(--black)}

/* HOW IT WORKS */
.how-section{background:var(--steel);padding:80px 96px;border-bottom:1px solid rgba(255,255,255,.06)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.step-card{background:rgba(0,0,0,.3);padding:40px 32px;position:relative}
.step-num{font-family:'Barlow Condensed',sans-serif;font-size:72px;font-weight:900;color:rgba(254,218,0,.12);line-height:1;letter-spacing:-.04em;margin-bottom:16px}
.step-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;color:var(--white);margin-bottom:12px;letter-spacing:.02em}
.step-title span{color:var(--yellow)}
.step-body{font-size:14px;color:rgba(255,255,255,.5);line-height:1.7}
.step-bar{position:absolute;top:0;left:0;width:3px;height:100%;background:var(--yellow)}

/* VIDEO SECTION */
.video-section{background:var(--black);padding:80px 96px 0}
.video-section-header{margin-bottom:56px}
.video-intro{font-size:15px;color:rgba(255,255,255,.5);max-width:600px;line-height:1.7;margin-top:16px}
.video-block{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:2px;align-items:stretch}
.video-block.reverse{direction:rtl}
.video-block.reverse>*{direction:ltr}
.yt-wrap{position:relative;width:100%;padding-bottom:56.25%;background:#000;overflow:hidden}
.yt-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.yt-thumb{position:absolute;inset:0;cursor:pointer;overflow:hidden}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.yt-thumb:hover img{transform:scale(1.03)}
.yt-thumb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:background .2s}
.yt-thumb:hover .yt-thumb-overlay{background:rgba(0,0,0,.2)}
.yt-play{width:72px;height:72px;background:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.yt-thumb:hover .yt-play{transform:scale(1.1)}
.yt-play svg{width:28px;height:28px;fill:var(--black);margin-left:5px}
.video-info{background:var(--steel);padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.video-info.yellow{background:var(--steel)}
.video-tag{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:12px}
.video-info.yellow .video-tag{color:rgba(255,255,255,.4)}
.video-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(28px,3vw,42px);font-weight:800;text-transform:uppercase;color:var(--white);line-height:.95;letter-spacing:-.02em;margin-bottom:20px}
.video-info.yellow .video-title{color:var(--white)}
.video-desc{font-size:14px;color:rgba(255,255,255,.55);line-height:1.7;max-width:380px}
.video-info.yellow .video-desc{color:rgba(255,255,255,.55)}
.video-pallet-count{font-family:'Barlow Condensed',sans-serif;font-size:72px;font-weight:900;color:rgba(254,218,0,.12);line-height:.85;letter-spacing:-.04em;margin-bottom:8px}
.video-info.yellow .video-pallet-count{color:rgba(254,218,0,.12)}

/* CTA */
.section-cta{background:var(--yellow);padding:64px 96px;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.cta-headline{font-family:'Barlow Condensed',sans-serif;font-size:clamp(28px,3.5vw,48px);font-weight:800;text-transform:uppercase;color:var(--black);line-height:1;margin-bottom:10px}
.cta-sub{font-size:15px;color:rgba(0,0,0,.65);line-height:1.6}
.btn-dark{background:var(--black);color:var(--yellow);font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:18px 40px;border:none;cursor:pointer;border-radius:2px;text-decoration:none;display:inline-block;white-space:nowrap;transition:background .2s}
.btn-dark:hover{background:#222}

@media screen and (max-width: 780px) {
	.page-hero,
	.section-cta,
	.bricking-section,
	.how-section,
	.video-section {
		padding: 50px 40px;
	}
	.section-cta {
		display: block;
	}
	.bricking-section {
		display: block;
	}
	.steps-grid {
		display: block;
	}
	.step-card {
		margin: auto auto 25px;
	}
	.video-block {
		display: block;
		margin: auto auto 25px;
	}
	.video-block.reverse {
		direction: ltr;
	}
}