:root{
  --ink:#140F0E;
  --text:#F5EAE4;
  --red:#C0342C;
  --flame:#F0C9C2;
  --panel:#221615;
  --hair:#3A2A27;
  --body-soft:#EADCD4;
  --hair-flame:#B98A80;
}

*{box-sizing:border-box;}

html{margin:0;padding:0;}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  background-color:#140F0E;
  color:#F5EAE4;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;}
a{transition:color .2s ease, background-color .2s ease, border-color .2s ease;}

/* ============ TWO-ROW NAVIGATION ============ */
.two-row-nav{
  position:sticky;
  top:0;
  z-index:60;
  background-color:#140F0E;
  border-bottom:2px solid #C0342C;
}
.two-row-nav.scrolled{
  box-shadow:0 6px 16px rgba(0,0,0,0.45);
}
.nav-row-1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:12px 24px;
  border-bottom:1px solid #3A2A27;
}
.brand{
  font-size:20px;
  font-weight:800;
  letter-spacing:2px;
  color:#F5EAE4;
  text-decoration:none;
}
.brand:hover{color:#F0C9C2;}
.nav-tools{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-cta{
  display:inline-block;
  background-color:#C0342C;
  color:#F5EAE4;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.5px;
  text-decoration:none;
  border-radius:3px;
}
.nav-cta:hover{background-color:#A92B24;}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  background-color:transparent;
  border:1px solid #3A2A27;
  border-radius:3px;
  cursor:pointer;
  padding:0 9px;
}
.nav-toggle span{
  display:block;
  height:2px;
  background-color:#F5EAE4;
  border-radius:2px;
}
.nav-row-2{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  max-width:1200px;
  margin:0 auto;
  padding:10px 24px 12px;
}
.nav-row-2 a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#F5EAE4;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.4px;
  text-decoration:none;
  padding:6px 14px;
  border-bottom:2px solid transparent;
}
.nav-row-2 a::before{
  content:"";
  width:6px;
  height:6px;
  background-color:#C0342C;
  flex:none;
}
.nav-row-2 a:hover{color:#F0C9C2;}
.nav-row-2 a.active{border-bottom-color:#C0342C;color:#F5EAE4;}

/* ============ FULL-BLEED COLOR BLOCK HERO ============ */
.block-hero{
  background-color:#C0342C;
  padding:96px 24px 60px;
  width:100%;
}
.hero-inner{
  max-width:1200px;
  margin:0 auto;
  text-align:left;
}
.eyebrow-chip{
  display:inline-block;
  background-color:#F0C9C2;
  color:#140F0E;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
  padding:9px 16px;
  border-radius:2px;
  margin-bottom:28px;
}
.block-hero h1{
  font-family:Georgia,"Times New Roman",serif;
  color:#F5EAE4;
  font-size:clamp(40px,6vw,66px);
  line-height:1.06;
  font-weight:700;
  margin:0 0 28px;
  max-width:1000px;
}
.hero-copy{
  color:#F5EAE4;
  font-size:18px;
  line-height:1.7;
  max-width:680px;
  margin:0 0 18px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:34px;
}
.btn{
  display:inline-block;
  padding:15px 28px;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.5px;
  text-decoration:none;
  border-radius:3px;
  border:2px solid transparent;
}
.btn-primary{
  background-color:#221615;
  color:#F5EAE4;
}
.btn-primary:hover{background-color:#2C1C1A;}
.btn-outline{
  background-color:transparent;
  color:#F5EAE4;
  border-color:#F5EAE4;
}
.btn-outline:hover{background-color:#F5EAE4;color:#140F0E;}
.btn-panel{
  background-color:#221615;
  color:#F5EAE4;
}
.btn-panel:hover{background-color:#2C1C1A;}

.fireworks{
  display:flex;
  align-items:center;
  gap:44px;
  margin-top:60px;
}
.firework{
  position:relative;
  width:44px;
  height:44px;
}
.firework::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:12px;
  margin:-6px 0 0 -6px;
  background-color:#F0C9C2;
  border-radius:50%;
}
.firework span{
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:20px;
  margin:-10px 0 0 -1px;
  background-color:#F5EAE4;
  border-radius:1px;
}
.firework span:nth-child(1){transform:rotate(0deg);}
.firework span:nth-child(2){transform:rotate(120deg);}
.firework span:nth-child(3){transform:rotate(240deg);}

/* ============ MAGAZINE COLLAGE ============ */
.collage-section{
  background-color:#140F0E;
  padding:100px 24px 88px;
}
.collage-inner{
  max-width:1200px;
  margin:0 auto;
}
.eyebrow{
  display:block;
  color:#F0C9C2;
  font-size:12px;
  font-weight:800;
  letter-spacing:2.2px;
  text-transform:uppercase;
}
.collage-section h2{
  font-family:Georgia,"Times New Roman",serif;
  color:#F5EAE4;
  font-size:clamp(30px,4vw,44px);
  line-height:1.15;
  margin:12px 0 24px;
}
.lead-copy{
  color:#EADCD4;
  font-size:18px;
  line-height:1.75;
  max-width:840px;
  margin:0 0 20px;
}
.approach-copy{
  color:#EADCD4;
  line-height:1.75;
  max-width:880px;
  margin:0 0 20px;
}
.collage-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  margin-top:44px;
}
.tile{
  background-color:#221615;
  border:1px solid #3A2A27;
  padding:36px 32px;
}
.tile-icon{
  display:block;
  width:26px;
  height:26px;
  background-color:#C0342C;
  margin-bottom:22px;
}
.tile h3{
  font-family:Georgia,"Times New Roman",serif;
  color:#F5EAE4;
  font-size:23px;
  line-height:1.25;
  margin:0 0 14px;
}
.tile p{
  color:#EADCD4;
  line-height:1.75;
  margin:0;
}
.tile-1{grid-column:span 7;}
.tile-2{grid-column:span 5;}
.tile-3{grid-column:span 5;}
.tile-4{grid-column:span 4;}
.tile-5{grid-column:span 3;}

/* ============ METRIC BAND ============ */
.metric-band{
  background-color:#F0C9C2;
  padding:72px 24px;
  color:#140F0E;
}
.metric-inner{
  max-width:1200px;
  margin:0 auto;
}
.metric-intro{
  color:#140F0E;
  font-size:18px;
  line-height:1.7;
  max-width:660px;
  margin:0 0 44px;
}
.metrics{
  display:flex;
}
.metric{
  flex:1;
  padding:0 34px;
  text-align:center;
}
.metric + .metric{
  border-left:1px solid #B98A80;
}
.metric-num{
  color:#C0342C;
  font-family:Georgia,"Times New Roman",serif;
  font-size:48px;
  font-weight:700;
  line-height:1;
}
.metric-label{
  color:#140F0E;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-top:12px;
}

/* ============ CTA BAND ============ */
.cta-band{
  background-color:#C0342C;
  padding:96px 24px;
  text-align:center;
}
.cta-inner{
  max-width:780px;
  margin:0 auto;
}
.cta-band h2{
  font-family:Georgia,"Times New Roman",serif;
  color:#F5EAE4;
  font-size:clamp(28px,4vw,40px);
  line-height:1.2;
  margin:0 0 18px;
}
.cta-band p{
  color:#F5EAE4;
  font-size:17px;
  line-height:1.75;
  margin:0 0 36px;
}

/* ============ TWO-COLUMN WIDE FOOTER ============ */
.two-col-footer{
  background-color:#221615;
  padding:68px 24px 48px;
}
.footer-grid{
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:56px;
  max-width:1200px;
  margin:0 auto;
}
.footer-brand{
  display:block;
  font-size:27px;
  font-weight:800;
  letter-spacing:2.5px;
  color:#F0C9C2;
  margin:0 0 18px;
}
.footer-blurb{
  color:#EADCD4;
  line-height:1.75;
  margin:0 0 22px;
  max-width:560px;
}
.legal-line{
  color:#C9B8B0;
  font-size:14px;
  line-height:1.8;
  margin:0;
}
.legal-line a{color:#F5EAE4;text-decoration:none;}
.legal-line a:hover{color:#F0C9C2;text-decoration:underline;}
.footer-contact h4{
  color:#F5EAE4;
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.8px;
  margin:0 0 18px;
}
.footer-contact p{
  color:#EADCD4;
  margin:0 0 8px;
}
.footer-contact a{
  color:#EADCD4;
  text-decoration:none;
}
.footer-contact a:hover{color:#F0C9C2;text-decoration:underline;}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:22px;
}
.footer-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#F5EAE4;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
.footer-links a::before{
  content:"";
  width:6px;
  height:6px;
  background-color:#C0342C;
  flex:none;
}
.footer-links a:hover{color:#F0C9C2;}

/* ============ PAGE HERO (secondary pages) ============ */
.page-hero{
  background-color:#221615;
  border-bottom:4px solid #C0342C;
  padding:76px 24px 58px;
}
.page-hero-inner{
  max-width:1000px;
  margin:0 auto;
}
.page-hero h1{
  font-family:Georgia,"Times New Roman",serif;
  color:#F5EAE4;
  font-size:clamp(32px,5vw,52px);
  line-height:1.15;
  margin:14px 0 20px;
}
.page-hero p{
  color:#EADCD4;
  font-size:17px;
  line-height:1.75;
  max-width:780px;
  margin:0;
}

/* ============ SERVICES PAGE ============ */
.services-section{
  background-color:#140F0E;
  padding:88px 24px 40px;
}
.services-inner{
  max-width:1000px;
  margin:0 auto;
}
.service-block{
  padding:40px 0 48px;
  border-bottom:1px solid #3A2A27;
}
.service-block h2{
  font-family:Georgia,"Times New Roman",serif;
  color:#F5EAE4;
  font-size:27px;
  line-height:1.25;
  margin:0 0 16px;
  padding-left:16px;
  border-left:4px solid #C0342C;
}
.service-block p{
  color:#EADCD4;
  line-height:1.78;
  margin:0 0 18px;
}
.check-list{
  list-style:none;
  margin:0;
  padding:0;
}
.check-list li{
  color:#EADCD4;
  line-height:1.7;
  padding:6px 0 6px 24px;
  position:relative;
}
.check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  width:7px;
  height:7px;
  background-color:#C0342C;
}
.process-block{
  background-color:#221615;
  border:1px solid #3A2A27;
  padding:52px 24px;
  margin-top:72px;
}
.process-inner{
  max-width:1000px;
  margin:0 auto;
}
.process-block h2{
  font-family:Georgia,"Times New Roman",serif;
  color:#F5EAE4;
  font-size:28px;
  margin:0 0 14px;
}
.process-block > .process-inner > p{
  color:#EADCD4;
  line-height:1.75;
  max-width:820px;
  margin:0 0 40px;
}
.process-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.process-step{
  padding-top:18px;
  border-top:3px solid #C0342C;
}
.process-step .step-num{
  display:block;
  color:#F0C9C2;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.process-step h3{
  color:#F5EAE4;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  margin:0 0 10px;
}
.process-step p{
  color:#EADCD4;
  line-height:1.7;
  margin:0;
}

/* ============ CONTACT PAGE ============ */
.contact-section{
  background-color:#140F0E;
  padding:88px 24px 96px;
}
.contact-inner{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
.contact-info h2,
.contact-form-wrap h2{
  font-family:Georgia,"Times New Roman",serif;
  color:#F5EAE4;
  font-size:26px;
  margin:0 0 20px;
}
.contact-info p{
  color:#EADCD4;
  line-height:1.8;
  margin:0 0 14px;
}
.contact-info a{
  color:#F0C9C2;
  text-decoration:none;
}
.contact-info a:hover{text-decoration:underline;}
.info-block{
  border-left:3px solid #C0342C;
  padding-left:18px;
  margin-bottom:26px;
}
.info-block h3{
  color:#F5EAE4;
  font-size:15px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.2px;
  margin:0 0 8px;
}
.info-block p{margin:0 0 4px;}

.contact-form{
  margin-top:8px;
}
.form-field{
  margin-bottom:20px;
}
.form-field label{
  display:block;
  color:#F5EAE4;
  font-size:13px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.form-field input,
.form-field textarea{
  width:100%;
  background-color:#221615;
  border:1px solid #3A2A27;
  border-radius:3px;
  color:#F5EAE4;
  font-family:inherit;
  font-size:16px;
  padding:14px;
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:#C0342C;
}
.form-field textarea{min-height:150px;resize:vertical;}
.form-status{
  color:#F0C9C2;
  font-size:15px;
  line-height:1.6;
  margin:16px 0 0;
}

.faq-block{
  background-color:#221615;
  border:1px solid #3A2A27;
  padding:52px 24px;
}
.faq-inner{
  max-width:1000px;
  margin:0 auto;
}
.faq-inner h2{
  font-family:Georgia,"Times New Roman",serif;
  color:#F5EAE4;
  font-size:28px;
  margin:0 0 28px;
}
.faq-item{
  background-color:#140F0E;
  border:1px solid #3A2A27;
  margin-bottom:16px;
}
.faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  color:#F5EAE4;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  padding:20px 22px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq-question::after{
  content:"+";
  color:#C0342C;
  font-size:24px;
  font-weight:700;
  flex:none;
}
.faq-item.open .faq-question::after{content:"-";}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.faq-item.open .faq-answer{max-height:500px;}
.faq-answer p{
  color:#EADCD4;
  line-height:1.75;
  padding:0 22px 24px;
  margin:0;
}

/* ============ SCROLL REVEAL ============ */
.fade-up{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
}
.fade-up.visible{
  opacity:1;
  transform:none;
}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .tile-1,.tile-2,.tile-3,.tile-4,.tile-5{grid-column:span 6;}
  .process-steps{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:860px){
  .nav-toggle{
    display:flex;
  }
  .nav-row-2{
    flex-direction:column;
    align-items:stretch;
    max-height:0;
    overflow:hidden;
    padding:0 24px;
    transition:max-height .35s ease;
  }
  .two-row-nav.open .nav-row-2{
    max-height:480px;
    padding:12px 24px 16px;
  }
  .nav-row-2 a{
    padding:12px 4px;
    border-bottom:1px solid #3A2A27;
  }
  .nav-row-2 a.active{border-bottom:1px solid #C0342C;}
  .footer-grid{grid-template-columns:1fr;gap:40px;}
  .contact-inner{grid-template-columns:1fr;gap:48px;}
}

@media (max-width:760px){
  .block-hero{padding:72px 20px 48px;}
  .fireworks{gap:28px;}
  .metrics{flex-direction:column;gap:34px;}
  .metric + .metric{border-left:none;border-top:1px solid #B98A80;padding-top:34px;}
  .collage-section{padding:72px 20px 64px;}
  .cta-band{padding:72px 20px;}
  .two-col-footer{padding:56px 20px 40px;}
  .services-section{padding:64px 20px 32px;}
  .contact-section{padding:64px 20px 72px;}
  .contact-inner{gap:40px;}
  .process-steps{grid-template-columns:1fr;gap:26px;}
  .page-hero{padding:56px 20px 44px;}
  .metric-band{padding:56px 20px;}
  .metric-intro{margin-bottom:34px;}
}

@media (max-width:640px){
  .tile{grid-column:span 12;}
  .hero-actions .btn{width:100%;text-align:center;}
  .collage-grid{gap:18px;}
}