
:root{
  --bg:#F3EDE3;
  --bg2:#EEE4D6;
  --panel:#E4D7C5;
  --line:#C7B79F;
  --text:#2F2A26;
  --muted:#6F665E;
  --lime:#B4E543;
  --lime2:#8EBC33;
  --orange:#D8A15A;
  --silver:#E6E1D8;
  --tan:#F3EDE3;
  --tan2:#E4D7C5;
  --cream:#F8F4EC;
  --charcoal:#242321;
  --forest:#243326;
  --youtube:#8F2633;
  --youtube-dark:#741B26;
  --youtube-soft:#F5E9EB;
  --max:1220px;
  --radius:24px;
  --shadow:0 18px 44px rgba(76,61,46,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.48), transparent 30rem),
    radial-gradient(circle at 100% 28%, rgba(180,229,67,.025), transparent 30rem),
    linear-gradient(180deg,#F7F2E9,#F2EADF 46%,#EEE4D6);
  color:var(--text);
  line-height:1.55;
}
a{color:inherit}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 36px));margin:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:999;background:#fff;color:#000;padding:10px}
.site-header{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(16px);
  background:rgba(36,35,33,.94);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:24px}
.logo-wrap{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo-wrap img{height:44px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:10px 13px;border-radius:999px;text-decoration:none;color:#EAE4DC;font-weight:700;font-size:.95rem}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:#3A3631;color:#FAF8F3}
.nav-cta{background:linear-gradient(135deg,var(--lime),var(--lime2));color:#242321!important;box-shadow:0 8px 28px rgba(144,210,45,.18)}
.menu-btn{display:none;border:1px solid var(--line);background:#302D29;color:#FAF8F3;border-radius:12px;padding:10px 12px}
.hero{position:relative;overflow:hidden;padding:72px 0 34px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(180,229,67,.34);background:#302D29;padding:7px 11px;border-radius:999px;color:#EAF6C7;font-size:.86rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
h1{font-size:clamp(3.2rem,7vw,6.8rem);line-height:.86;letter-spacing:-.06em;margin:22px 0}
.hero h1 span{display:block;color:var(--lime);text-shadow:0 0 45px rgba(185,239,67,.13)}
.hero p{font-size:1.14rem;color:#62594F;max-width:690px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:14px;text-decoration:none;font-weight:850;border:1px solid #62594F;background:#302D29;color:#FAF8F3}
.btn.primary{background:linear-gradient(135deg,var(--lime),#8dd72f);color:#0a120c;border-color:transparent}
.btn.secondary:hover{border-color:#A9967C}
.hero-art{position:relative;min-height:570px}
.hero-art .card{position:absolute;inset:0;border-radius:36px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08)}
.hero-art img{height:100%;width:100%;object-fit:cover}
.hero-art:after{content:"";position:absolute;inset:auto -12% -20% 18%;height:38%;background:radial-gradient(ellipse,rgba(180,229,67,.10),transparent 65%);filter:blur(24px)}
.floating-badge{position:absolute;right:-4px;bottom:28px;width:190px;background:#2A2723EE;border:1px solid rgba(216,199,174,.34);padding:14px;border-radius:22px;box-shadow:var(--shadow)}
.floating-badge img{border-radius:16px}
.section{padding:78px 0}
.section.alt{background:linear-gradient(180deg,#FBF7F0,#F0E6D8)}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}
.kicker{color:var(--lime);font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem}
h2{font-size:clamp(2rem,4vw,3.7rem);letter-spacing:-.045em;line-height:1;margin:8px 0 0}
.section-head p{max-width:600px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.video-card,.article-card,.product-card,.feature-card{
  background:linear-gradient(180deg,#ECE1D2,#E2D3BE);
  border:1px solid rgba(87,74,60,.18);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(35,31,27,.14);
  transition:.25s ease;
}
.video-card:hover,.article-card:hover,.product-card:hover,.feature-card:hover{transform:translateY(-5px);border-color:rgba(180,229,67,.58)}
.thumb{aspect-ratio:16/10;overflow:hidden;background:#2A2723;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.thumb-link{display:block;text-decoration:none;color:inherit;position:relative;outline:none}
.thumb-link .thumb{cursor:pointer}
.thumb-link:focus-visible .thumb{box-shadow:inset 0 0 0 4px var(--youtube)}
.thumb-link:focus-visible{border-radius:18px}
.video-card:hover .thumb img{transform:scale(1.035)}
.pill{position:absolute;top:12px;left:12px;padding:6px 9px;border-radius:999px;background:#262320E8;border:1px solid rgba(255,255,255,.12);color:#FAF8F3;font-size:.78rem;font-weight:800}
.card-body{padding:18px}
.card-body h3{margin:0 0 8px;font-size:1.15rem;line-height:1.2}
.card-body p{margin:0;color:var(--muted);font-size:.94rem}
.card-link{display:inline-flex;margin-top:16px;text-decoration:none;color:#6E861E;font-weight:800}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{padding:26px}
.icon{height:46px;width:46px;border-radius:14px;display:grid;place-items:center;background:#DED0BC;border:1px solid rgba(80,72,63,.14);font-size:1.3rem}
.feature-card h3{margin:18px 0 7px}.feature-card p{margin:0;color:var(--muted)}
.banner{position:relative;border:1px solid rgba(246,163,19,.2);overflow:hidden;border-radius:32px;min-height:330px;display:grid;align-items:end;background:#242321}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.56}
.banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#242321 15%,rgba(36,35,33,.72),rgba(36,35,33,.22))}
.banner-copy{position:relative;z-index:2;padding:40px;max-width:650px}
.banner-copy h2{font-size:clamp(2.4rem,5vw,4.6rem)}
.banner-copy p{color:#F0E9DF}
.social-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.social{padding:20px;border-radius:18px;text-decoration:none;background:#F1E8DC;border:1px solid #B7A58E;font-weight:850;display:flex;justify-content:space-between}
.social:hover{border-color:#8FB634}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filter-btn{border:1px solid #B7A58E;background:#F6EFE6;color:#3E3933;border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer}
.filter-btn.active{background:var(--lime);color:#0a110c;border-color:var(--lime)}
.page-hero{padding:62px 0 34px}
.page-hero h1{font-size:clamp(3rem,7vw,6rem)}
.prose{max-width:820px;color:#ced7d0}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-card{padding:20px}
.product-card .product-art{aspect-ratio:4/3;border-radius:16px;background:radial-gradient(circle at 35% 30%,#F6EFE5,#DECDB6 72%);display:grid;place-items:center;color:#6B6259;font-size:3rem}
.product-card small{color:#7E7165}
.notice{padding:18px;border:1px solid #C2B099;background:#E8DDCC;border-radius:16px;color:#38332E}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px}
.form{display:grid;gap:13px}
.form label{font-weight:800}
.form input,.form textarea{width:100%;background:#F6EFE6;border:1px solid #C2B099;color:#242321;padding:13px;border-radius:12px}
.form textarea{min-height:150px;resize:vertical}
footer{border-top:1px solid rgba(216,199,174,.16);padding:46px 0;margin-top:50px;background:#1F1E1C}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px}
.footer-grid img{height:46px}
.footer-grid p,.footer-grid a{color:#C8BCAE}
.footer-links{display:grid;gap:9px}
.footer-links a{text-decoration:none}
.copyright{margin-top:30px;padding-top:20px;border-top:1px solid #4B453E;color:#9F9386;font-size:.9rem}
.reveal{opacity:0;transform:translateY(18px);transition:.55s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){
  .nav-links{display:none;position:absolute;left:18px;right:18px;top:70px;background:#282522F5;border:1px solid #5B544B;border-radius:18px;padding:12px;flex-direction:column;align-items:stretch}
  .nav-links.open{display:flex}.menu-btn{display:block}
  .hero-grid,.contact-grid{grid-template-columns:1fr}.hero-art{min-height:430px}
  .cards{grid-template-columns:repeat(2,1fr)}.feature-grid,.article-grid,.product-grid{grid-template-columns:1fr 1fr}
  .social-row{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .hero{padding-top:42px}.hero-art{min-height:360px}.floating-badge{width:130px}
  .cards,.feature-grid,.article-grid,.product-grid,.social-row,.footer-grid{grid-template-columns:1fr}
  .section{padding:56px 0}.section-head{display:block}.banner-copy{padding:26px}
  .logo-wrap img{height:36px}
}






/* V4 soft ivory-tan refinement — structure intentionally unchanged */
.hero,
.page-hero,
.section{
  color:#2F2A26;
}

.hero h1,
.page-hero h1,
.section h2{
  color:#2F2A26;
}

.hero h1 span{
  color:#78991F;
  text-shadow:none;
}

.hero p,
.page-hero .prose,
.section-head p{
  color:#6F665E;
}

.eyebrow{
  background:#E7DBC9;
  color:#514A43;
  border-color:rgba(111,137,37,.24);
}

.video-card,
.article-card,
.product-card,
.feature-card{
  color:#2F2A26;
  box-shadow:0 16px 36px rgba(82,67,52,.10);
}

.video-card .card-body p,
.article-card .card-body p,
.product-card p,
.feature-card p{
  color:#70665D;
}

.kicker,
.video-card .kicker,
.article-card .kicker,
.product-card .kicker,
.feature-card .kicker{
  color:#667E1E;
}

.card-link{
  color:#536B12;
}

.icon{
  background:#EFE5D9;
  color:#2F2A26;
  border-color:rgba(105,89,73,.12);
}

.social{
  background:#F1E8DC;
  color:#2F2A26;
  border-color:#CDBDA7;
}

.filter-btn{
  background:#F6EFE6;
  color:#3B352F;
  border-color:#CDBDA7;
}

.filter-btn.active{
  background:var(--lime);
  color:#242321;
  border-color:var(--lime);
}

.form label{
  color:#2F2A26;
}

.form input,
.form textarea{
  background:#FAF6F0;
  color:#2F2A26;
  border-color:#C2B099;
}

.form input::placeholder,
.form textarea::placeholder{
  color:#8A7F74;
}

.notice{
  background:#EFE3D3;
  border-color:#C2B099;
  color:#3B352F;
}

.banner,
.banner h2,
.banner .kicker,
.banner-copy,
.banner-copy p{
  color:#FAF8F3;
}

.site-header,
.site-header a,
.site-header .nav-links a,
footer,
footer strong{
  color:#FAF8F3;
}

.site-header .nav-links a:hover,
.site-header .nav-links a[aria-current="page"]{
  background:#393531;
  color:#FAF8F3;
}

footer{
  background:#1F1E1C;
}

footer p,
footer a{
  color:#C8BCAE;
}

.site-header{
  background:rgba(36,35,33,.95);
}

/* Preserve charcoal as framing only: header, footer and dark feature banner. */


/* V5 YouTube interaction + contrast polish */
.youtube-link{
  color:var(--youtube) !important;
  font-weight:900;
}
.youtube-link:hover{
  color:var(--youtube-dark) !important;
  text-decoration:underline;
  text-underline-offset:3px;
}

.site-header .nav-links a.nav-cta[data-social="youtube"]{
  background:var(--youtube) !important;
  color:#FFFFFF !important;
  border-color:var(--youtube) !important;
  box-shadow:0 8px 24px rgba(111,27,38,.20);
}
.site-header .nav-links a.nav-cta[data-social="youtube"]:hover{
  background:var(--youtube-dark) !important;
  color:#FFFFFF !important;
}

.social[data-social="youtube"]{
  background:var(--youtube);
  color:#FFFFFF;
  border-color:var(--youtube);
}
.social[data-social="youtube"]:hover{
  background:var(--youtube-dark);
  color:#FFFFFF;
  border-color:var(--youtube-dark);
}

footer a[data-social="youtube"]{
  color:#F05A61;
  font-weight:800;
}
footer a[data-social="youtube"]:hover{
  color:#FF7A80;
}

.video-card .thumb-link:hover img{
  transform:scale(1.045);
}
.video-card .thumb-link:hover .thumb::after{
  opacity:1;
}
.video-card .thumb::after{
  content:"▶";
  position:absolute;
  right:12px;
  bottom:12px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(213,40,50,.94);
  color:#FFFFFF;
  font-size:.9rem;
  line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  opacity:.92;
  transition:.2s ease;
  pointer-events:none;
}

.btn.secondary{
  color:#FAF8F3;
}
.pill{
  color:#FAF8F3;
}

.video-title-link{
  color:inherit;
  text-decoration:none;
}
.video-title-link:hover{
  color:var(--youtube);
}
.video-title-link:focus-visible{
  outline:2px solid var(--youtube);
  outline-offset:3px;
  border-radius:4px;
}
