:root{
  --parlor-mist:#EFF1EA;
  --clip-ink:#2B2E28;
  --roller-plum:#7E4152;
  --parlor-pine:#2B2E28;
  --linen-drawer:#E3E7DA;
  --comb-beige:#D9D0BE;
  --talc-white:#F7F8F3;
  --barrette-gold:#C2A15C;
}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-size:16px;
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  background-color:var(--parlor-mist);
  color:var(--clip-ink);
  line-height:1.65;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.2;
  margin:0 0 0.6em;
  color:var(--clip-ink);
}

a{color:var(--roller-plum);text-decoration:none;}
a:hover{text-decoration:underline;}

p{margin:0 0 1.1em;}

/* ============ ROLLER RACK HEADER ============ */
.rollerrack{
  background-color:var(--parlor-pine);
  border-bottom:6px solid var(--comb-beige);
  padding:18px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
}

.rollerrack-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-roller{
  width:86px;
  height:34px;
  border-radius:18px;
  background-color:var(--roller-plum);
  position:relative;
  flex:none;
}
.brand-roller::after{
  content:"";
  position:absolute;
  top:14px;
  left:10px;
  right:10px;
  height:4px;
  background-color:var(--talc-white);
  border-radius:2px;
}

.rollerrack-brand-text{
  color:var(--talc-white);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.06rem;
  font-weight:bold;
  letter-spacing:0.02em;
}

.rollerrack-links{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.roller-link{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--talc-white);
  font-size:0.95rem;
  padding:6px 10px 6px 6px;
  border-radius:20px;
  background-color:var(--linen-drawer);
  color:var(--clip-ink);
}
.roller-link:hover{text-decoration:none;background-color:var(--talc-white);}

.roller-cyl{
  width:26px;
  height:26px;
  border-radius:50%;
  background-color:var(--roller-plum);
  border:3px solid var(--linen-drawer);
  box-shadow:0 0 0 2px var(--roller-plum);
  flex:none;
  position:relative;
}
.roller-cyl::after{
  content:"";
  position:absolute;
  top:3px;
  left:8px;
  width:4px;
  height:10px;
  background-color:var(--talc-white);
  border-radius:2px;
}

.roller-link.dia-1 .roller-cyl{width:22px;height:22px;}
.roller-link.dia-2 .roller-cyl{width:26px;height:26px;}
.roller-link.dia-3 .roller-cyl{width:30px;height:30px;}
.roller-link.dia-4 .roller-cyl{width:24px;height:24px;}
.roller-link.dia-5 .roller-cyl{width:28px;height:28px;}

.nav-toggle{
  display:none;
  background-color:var(--roller-plum);
  color:var(--talc-white);
  border:none;
  border-radius:8px;
  padding:10px 16px;
  font-size:1rem;
  cursor:pointer;
}

/* ============ STYLING COUNTER HERO ============ */
.stylingcounter{
  padding:52px 26px 0;
  max-width:1140px;
  margin:0 auto;
}

.counter-headline{
  font-size:3.1rem;
  line-height:1.08;
  margin-bottom:8px;
}
.counter-headline .set-word{
  display:block;
  font-size:5.4rem;
  color:var(--roller-plum);
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:0.01em;
}

.counter-copy{
  max-width:720px;
  font-size:1.12rem;
}
.counter-inline-cta{
  display:inline-block;
  color:var(--roller-plum);
  font-weight:bold;
  border-bottom:2px solid var(--barrette-gold);
}
.counter-inline-cta:hover{text-decoration:none;border-bottom-color:var(--roller-plum);}

.counter-scene{
  margin-top:34px;
  background-color:var(--linen-drawer);
  border:2px solid var(--parlor-pine);
  border-radius:6px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
  overflow:hidden;
}

.scene-panel{
  padding:24px 20px;
  border-right:2px solid var(--comb-beige);
}
.scene-panel:last-child{border-right:none;}

.scene-label{
  font-family:Georgia,"Times New Roman",serif;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--roller-plum);
  margin-bottom:14px;
}

/* mannequin head */
.mannequin{
  width:128px;
  height:150px;
  margin:6px auto 0;
  position:relative;
}
.mannequin-head{
  width:104px;
  height:118px;
  background-color:#4A4E43;
  border-radius:52px 52px 46px 46px;
  margin:0 auto;
  position:relative;
}
.mannequin-hair{
  position:absolute;
  top:-6px;
  left:-8px;
  width:120px;
  height:70px;
  background-color:var(--roller-plum);
  border-radius:60px 60px 24px 24px;
}
.mannequin-neck{
  width:34px;
  height:24px;
  background-color:#4A4E43;
  margin:-4px auto 0;
}
.mannequin-stand{
  width:10px;
  height:26px;
  background-color:var(--parlor-pine);
  margin:0 auto;
}
.mannequin-base{
  width:70px;
  height:12px;
  background-color:var(--parlor-pine);
  border-radius:6px;
  margin:0 auto;
}
.mannequin-pick{
  position:absolute;
  bottom:6px;
  right:-14px;
  width:8px;
  height:80px;
  background-color:var(--barrette-gold);
  border-radius:4px;
  transform:rotate(24deg);
}

/* roller bank */
.rollerbank{
  background-color:var(--talc-white);
  border:2px solid var(--parlor-pine);
  border-radius:6px;
  padding:12px 10px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.bank-peg{
  display:flex;
  justify-content:center;
}
.bank-roller{
  width:34px;
  height:56px;
  border-radius:8px;
  background-color:var(--roller-plum);
  position:relative;
  border-top:6px solid var(--parlor-pine);
}
.bank-roller::after{
  content:"";
  position:absolute;
  bottom:10px;
  left:6px;
  right:6px;
  height:3px;
  background-color:var(--talc-white);
}
.bank-roller.clip-top::before{
  content:"";
  position:absolute;
  top:-14px;
  left:11px;
  width:12px;
  height:12px;
  background-color:var(--talc-white);
  border:2px solid var(--parlor-pine);
  border-radius:2px;
}
.rattail-comb{
  grid-column:1 / -1;
  height:10px;
  background-color:var(--comb-beige);
  border-radius:5px;
  margin-top:8px;
  position:relative;
}
.rattail-comb::after{
  content:"";
  position:absolute;
  right:-6px;
  top:-3px;
  width:16px;
  height:16px;
  background-color:var(--talc-white);
  border:2px solid var(--parlor-pine);
  border-radius:2px;
}

/* clips + brush */
.clip-tray{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.duckbill{
  width:14px;
  height:54px;
  background-color:var(--clip-ink);
  border-radius:4px 4px 8px 8px;
  position:relative;
}
.duckbill::after{
  content:"";
  position:absolute;
  top:8px;
  left:4px;
  width:6px;
  height:20px;
  background-color:var(--talc-white);
  border-radius:3px;
}
.clip-tray .duckbill:nth-child(2){transform:rotate(6deg);}
.clip-tray .duckbill:nth-child(3){transform:rotate(-5deg);}
.clip-tray .duckbill:nth-child(4){transform:rotate(4deg);}
.clip-tray .duckbill:nth-child(5){transform:rotate(-3deg);}

.round-brush{
  width:96px;
  height:96px;
  border-radius:50%;
  background-color:var(--comb-beige);
  margin:0 auto;
  border:10px solid var(--parlor-pine);
  position:relative;
}
.round-brush::after{
  content:"";
  position:absolute;
  top:34px;
  left:34px;
  width:28px;
  height:28px;
  border-radius:50%;
  background-color:var(--talc-white);
  border:3px solid var(--parlor-pine);
}

.counter-cta-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background-color:var(--roller-plum);
  color:var(--talc-white);
  padding:18px 26px;
  font-size:1.1rem;
  font-weight:bold;
  letter-spacing:0.02em;
}
.counter-cta-bar:hover{text-decoration:none;background-color:#6d3847;}
.cta-arrow{font-size:1.4rem;}

/* draped cape hint */
.cape-drape{
  height:26px;
  background-color:var(--roller-plum);
  max-width:1140px;
  margin:0 auto;
  border-radius:0 0 40px 40px;
}

/* ============ PIN CARD LADDER ============ */
.pincard-section{
  max-width:1140px;
  margin:0 auto;
  padding:70px 26px 30px;
  position:relative;
}
.cord-rail{
  position:absolute;
  top:38px;
  left:26px;
  right:26px;
  height:3px;
  background-color:var(--comb-beige);
}
.pincard{
  position:relative;
  display:block;
  background-color:var(--talc-white);
  border:2px solid var(--parlor-pine);
  border-radius:4px;
  padding:22px 22px 20px;
  margin-bottom:26px;
}
.pincard-mark{
  position:absolute;
  top:-16px;
  left:-16px;
  width:40px;
  height:40px;
  border-radius:50%;
  background-color:var(--clip-ink);
  color:var(--talc-white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Georgia,serif;
  font-size:1.2rem;
  font-weight:bold;
}
.pincard-pin{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background-color:var(--roller-plum);
}
.pincard-tick{
  position:absolute;
  width:36px;
  height:4px;
  background-color:var(--barrette-gold);
  border-radius:2px;
}
.pincard h3{
  font-size:1.4rem;
  margin-bottom:8px;
}

.pincard-1{width:64%;margin-left:0;}
.pincard-2{width:52%;margin-left:34%;}
.pincard-3{width:58%;margin-left:10%;}
.pincard-4{width:48%;margin-left:40%;}
.pincard-5{width:62%;margin-left:4%;}
.pincard-6{width:54%;margin-left:30%;}

.pincard-1 .pincard-pin{top:16px;right:16px;}
.pincard-3 .pincard-pin{bottom:16px;left:16px;}
.pincard-1 .pincard-tick{bottom:14px;right:22px;}
.pincard-2 .pincard-tick{top:18px;right:18px;}
.pincard-3 .pincard-tick{bottom:16px;right:22px;}
.pincard-4 .pincard-tick{top:16px;left:18px;}
.pincard-5 .pincard-tick{bottom:14px;left:22px;}
.pincard-6 .pincard-tick{top:18px;right:18px;}

/* ============ PART LINE BAND ============ */
.partlineband{
  background-color:var(--parlor-pine);
  padding:20px 26px;
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}
.partline-rule{
  position:relative;
  width:230px;
  height:5px;
  background-color:var(--talc-white);
  border-radius:3px;
  flex:none;
}
.partline-rule .tick{
  position:absolute;
  top:-8px;
  width:4px;
  background-color:var(--barrette-gold);
  border-radius:2px;
}
.partline-rule .tick-1{left:40px;height:20px;}
.partline-rule .tick-2{left:110px;height:28px;}
.partline-rule .tick-3{left:180px;height:16px;}
.partline-text{
  color:var(--talc-white);
  font-size:1.05rem;
  margin:0;
}

/* ============ CONTENT SECTIONS ============ */
.content-well{
  max-width:1000px;
  margin:0 auto;
  padding:60px 26px;
}
.content-well h2{
  font-size:2rem;
  border-bottom:3px solid var(--comb-beige);
  padding-bottom:10px;
  margin-bottom:22px;
}

.service-woven{
  background-color:var(--linen-drawer);
  border-left:8px solid var(--roller-plum);
  padding:20px 24px;
  margin-bottom:22px;
  border-radius:0 6px 6px 0;
}
.service-woven h3{font-size:1.3rem;margin-bottom:6px;}

/* ============ APRON POCKET FOOTER ============ */
.apronpocket{
  background-color:var(--parlor-pine);
  color:var(--talc-white);
  padding:56px 26px 0;
  margin-top:40px;
}
.apron-inner{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:44px;
  padding-bottom:40px;
}
.apron-blurb{
  background-color:var(--talc-white);
  color:var(--clip-ink);
  padding:24px;
  border-radius:6px;
}
.apron-blurb .apron-brand{
  font-family:Georgia,serif;
  font-size:1.3rem;
  font-weight:bold;
  margin-bottom:10px;
  color:var(--parlor-pine);
}
.apron-brand-roller{
  display:inline-block;
  width:34px;
  height:14px;
  background-color:var(--roller-plum);
  border-radius:7px;
  margin-right:8px;
  vertical-align:middle;
}
.apron-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}
.apron-col-head{
  font-family:Georgia,serif;
  color:var(--barrette-gold);
  font-size:0.85rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.apron-col-head .roller-glyph{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  background-color:var(--roller-plum);
  margin-right:8px;
}
.apron-links{
  list-style:none;
  margin:0;
  padding:0;
}
.apron-links li{margin-bottom:10px;}
.apron-links a{
  color:var(--talc-white);
  font-size:1rem;
}
.apron-links a:hover{text-decoration:underline;}

.apron-base{
  background-color:var(--comb-beige);
  color:var(--clip-ink);
  padding:16px 26px;
}
.apron-base-inner{
  max-width:1140px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px 30px;
  align-items:center;
  font-size:0.92rem;
}
.apron-base .comb-glyph{
  display:inline-block;
  width:14px;
  height:14px;
  background-color:var(--parlor-pine);
  border-radius:2px;
  margin-right:6px;
  vertical-align:middle;
}
.apron-base a{color:var(--roller-plum);}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.no-js .reveal,
.reveal.force-visible{
  opacity:1;
  transform:none;
}

/* ============ ACCORDION ============ */
.accordion{
  border:2px solid var(--parlor-pine);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:14px;
  background-color:var(--talc-white);
}
.accordion-head{
  width:100%;
  text-align:left;
  background-color:var(--linen-drawer);
  border:none;
  border-bottom:2px solid var(--comb-beige);
  padding:16px 20px;
  font-size:1.05rem;
  font-family:Georgia,serif;
  color:var(--clip-ink);
  cursor:pointer;
}
.accordion-body{
  padding:0 20px;
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
}
.accordion.open .accordion-body{
  max-height:520px;
  padding:16px 20px;
}

/* ============ FORMS ============ */
.form-field{margin-bottom:18px;}
.form-field label{
  display:block;
  font-weight:bold;
  margin-bottom:6px;
  font-size:0.95rem;
}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border:2px solid var(--parlor-pine);
  border-radius:6px;
  background-color:var(--talc-white);
  color:var(--clip-ink);
  font-size:1rem;
  font-family:inherit;
}
.form-field textarea{min-height:150px;resize:vertical;}
.form-submit{
  background-color:var(--roller-plum);
  color:var(--talc-white);
  border:none;
  border-radius:6px;
  padding:15px 34px;
  font-size:1.05rem;
  font-weight:bold;
  cursor:pointer;
}
.form-submit:hover{background-color:#6d3847;}
.form-status{
  margin-top:16px;
  padding:12px 16px;
  border-radius:6px;
  background-color:var(--linen-drawer);
  border-left:6px solid var(--roller-plum);
  display:none;
}

.info-block{
  background-color:var(--linen-drawer);
  padding:22px 24px;
  border-radius:6px;
  margin-bottom:18px;
}
.info-block h3{margin-top:0;}

/* ============ SERVICES / GENERIC PAGE ============ */
.page-hero{
  background-color:var(--linen-drawer);
  border-bottom:6px solid var(--comb-beige);
  padding:48px 26px 40px;
}
.page-hero-inner{max-width:1000px;margin:0 auto;}
.page-hero h1{font-size:2.6rem;margin-bottom:10px;}
.page-hero p{font-size:1.1rem;max-width:760px;}

.process-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  margin-top:24px;
}
.process-step{
  background-color:var(--talc-white);
  border:2px solid var(--parlor-pine);
  border-top:6px solid var(--roller-plum);
  border-radius:6px;
  padding:20px 22px;
}
.step-num{
  font-family:Georgia,serif;
  color:var(--barrette-gold);
  font-size:0.85rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:6px;
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .counter-scene{grid-template-columns:1fr;}
  .scene-panel{border-right:none;border-bottom:2px solid var(--comb-beige);}
  .scene-panel:last-child{border-bottom:none;}
  .apron-inner{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .counter-headline .set-word{font-size:3.6rem;}
  .counter-headline{font-size:2.2rem;}
}

@media (max-width:680px){
  .nav-toggle{display:inline-block;}
  .rollerrack-links{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .rollerrack-links.open{display:flex;}
  .roller-link{width:100%;box-sizing:border-box;border-radius:8px;}
  .pincard-1,.pincard-2,.pincard-3,
  .pincard-4,.pincard-5,.pincard-6{
    width:100%;
    margin-left:0;
  }
  .partlineband{flex-direction:column;align-items:flex-start;}
  .apron-columns{grid-template-columns:1fr;}
  .counter-headline .set-word{font-size:2.8rem;}
}