/* ==========================================================================
   HAPPYCASTLE — HAPPY CASTLE ANIMATION TECHNOLOGY CO., LIMITED
   An animation workshop inside a castle tower at night.
   Palette: Castle Night #1D1B22 | Limestone #EDEAE2 | Tangerine Flame #F07E1A
            Pen Graphite #8B8FA0 | Panel Mulch #26242C | Gate Iron #2E2C35
            Cel Cream #F3EBDC
   This sheet uses only solid hex colors and zero opacity decimals.
   ========================================================================== */

:root{
  --night:#1D1B22;
  --limestone:#EDEAE2;
  --graphite:#8B8FA0;
  --mulch:#26242C;
  --gate:#2E2C35;
  --cream:#F3EBDC;
  --flame:#F07E1A;
  --flame-deep:#C85F12;
  --frost:#FFFFFF;
  --ink:#11100F;
  --joint:#3A3742;
  --scrim:#17151B;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-size:16px;
  font-family:Georgia,"Iowan Old Style",Palatino,"Book Antiqua",serif;
  background-color:var(--night);
  color:var(--limestone);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:var(--flame);text-decoration:none;}
a:hover{color:var(--cream);}
em{font-style:italic;}
strong{color:var(--cream);font-weight:bold;}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px;}

.eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:13px;
  font-weight:bold;
  color:var(--flame);
  margin-bottom:16px;
}

/* ==========================================================================
   1. DRAWBRIDGE NAVIGATION
   ========================================================================== */
.drawbridge{
  position:sticky;
  top:0;
  z-index:80;
  background-color:var(--night);
  border-bottom:2px solid var(--gate);
}
.drawbridge-rail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px 12px;
  padding:12px 0;
}
.brand-cell{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-plate{
  background-color:var(--flame);
  color:var(--ink);
  border-radius:6px;
  padding:8px 12px;
  font-weight:bold;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:18px;
}
.brand-plate a{color:var(--ink);}
.brand-plate a:hover{color:var(--cream);}

.portcullis{
  position:relative;
  width:32px;
  height:32px;
  display:block;
  background-color:var(--scrim);
  border:1px solid var(--graphite);
  border-radius:4px;
}
.portcullis i{
  position:absolute;
  width:3px;
  background-color:var(--graphite);
  display:block;
}
.portcullis i.v{margin:3px 0;}
.portcullis i.v:nth-child(1){left:5px;top:2px;bottom:2px;}
.portcullis i.v:nth-child(2){left:11px;top:2px;bottom:2px;}
.portcullis i.v:nth-child(3){left:17px;top:2px;bottom:2px;}
.portcullis i.v:nth-child(4){left:23px;top:2px;bottom:2px;}
.portcullis i.h{height:3px;width:12px;left:50%;top:50%;transform:translate(-50%,-50%);}

.stone-links{display:flex;align-items:center;gap:10px;}
.stone-links .stone-item{list-style:none;}
.stone-links .stone-link{
  display:block;
  padding:9px 18px;
  background-color:var(--gate);
  color:var(--limestone);
  border-radius:5px;
  font-weight:bold;
  letter-spacing:.5px;
}
.stone-links .stone-link:hover{background-color:var(--flame);color:var(--ink);}
.stone-links .stone-link.is-tall{padding:12px 16px;}
.stone-links .stone-link.is-short{padding:7px 16px;}

.raise-gate{
  margin-left:14px;
  background-color:var(--flame);
  color:var(--ink);
  border-radius:20px;
  padding:10px 18px;
  font-weight:bold;
  letter-spacing:1px;
}
.raise-gate:hover{background-color:var(--cream);color:var(--ink);}

.pennant-strand{
  position:relative;
  height:6px;
  background-color:var(--gate);
}
.pennant-strand::before,
.pennant-strand::after{
  content:"";
  position:absolute;
  top:-12px;
  width:0;
  height:0;
}
.pennant-strand::before{
  left:9%;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:16px solid var(--flame);
}
.pennant-strand::after{
  left:18%;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:14px solid var(--cream);
}

.gate-toggle-button{
  display:none;
}

@media (max-width:900px){
  .gate-toggle-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background-color:var(--flame);
    border:none;
    color:var(--ink);
    font-size:22px;
    font-weight:bold;
    height:44px;
    width:44px;
    border-radius:6px;
  }
  .stone-links{
    display:none;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:4px 0 10px 0;
  }
  .stone-links.nav-open{display:flex;}
  .stone-links .stone-link{text-align:center;}
  .raise-gate{margin:0;margin-left:8px;}
  .nav-cta-holder{margin-left:0;}
}

/* ==========================================================================
   2. CEL STACK HERO
   ========================================================================== */
.celstack{background-color:var(--night);}

.shot-band{
  position:relative;
  min-height:520px;
  background-color:var(--scrim);
  overflow:hidden;
}
.shot-stage{position:absolute;inset:0;}
.background-painting{position:absolute;inset:0;}
.background-painting .paint-colors{position:absolute;inset:0;}
.background-painting .bg-tint{position:absolute;border-radius:2px;}
.bg-tint.t1{left:0;top:0;width:100%;height:100%;background-color:#151219;}
.bg-tint.t2{left:8%;bottom:34%;width:24%;height:44%;
  background-color:#1F1B26;
  -webkit-clip-path:polygon(0 0,100% 8%,100% 100%,0 100%);
  clip-path:polygon(0 0,100% 8%,100% 100%,0 100%);}
.bg-tint.t3{right:7%;bottom:40%;width:30%;height:40%;
  background-color:#211C29;
  -webkit-clip-path:polygon(6% 0,94% 4%,100% 12%,100% 100%,0 100%,0 10%);
  clip-path:polygon(6% 0,94% 4%,100% 12%,100% 100%,0 100%,0 10%);}
.bg-tint.t4{left:30%;right:30%;bottom:30%;height:22%;
  background-color:#201A25;}
.moon-bar{position:absolute;top:14%;right:24%;width:74px;height:74px;
  border-radius:50%;background-color:#2B2634;}
.pennant-f1{position:absolute;left:13%;top:30%;width:22px;height:30px;
  background-color:var(--flame);
  -webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 62%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 60%);}
.pennant-f2{position:absolute;top:24%;right:10%;width:26px;height:34px;
  background-color:var(--graphite);
  -webkit-clip-path:polygon(0 0,100% 0,100% 100%,50% 58%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 58%);}

.cel-stage{position:absolute;inset:0;}
.hero-cel{
  position:absolute;
  width:74%;
  max-width:760px;
  height:62%;
  top:16%;
  left:50%;
  margin-left:-37%;
  border-radius:8px;
  box-shadow:0 10px 0 var(--night);
}
.hero-cel .peg-holes{display:flex;gap:10px;padding-top:14px;}
.hero-cel .peg-holes i{width:8px;height:8px;border-radius:50%;
  background-color:var(--night);margin-left:22px;}
.hero-cel .cel-title{
  position:absolute;
  right:18px;
  top:10px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:bold;
  color:var(--ink);
}
.hero-cel.cel-bg{background-color:#3A2C1F;z-index:1;transform:translate(-70px,-22px) rotate(-2deg);}
.hero-cel.cel-bg .cel-title{color:var(--cream);}
.hero-cel.cel-paint{background-color:#4A3A2C;z-index:2;transform:translate(-35px,-10px) rotate(-1deg);}
.hero-cel.cel-paint .cel-title{color:var(--cream);}
.hero-cel.cel-fx{background-color:var(--cream);z-index:3;transform:translate(6px,4px) rotate(1deg);}
.hero-cel.cel-line{background-color:var(--limestone);z-index:4;transform:translate(44px,18px) rotate(2deg);}
.hero-cel.cel-fx .cel-title,
.hero-cel.cel-line .cel-title{color:var(--ink);}

.paint-pot{position:absolute;z-index:6;width:26px;height:40px;}
.paint-pot .potrin{position:absolute;inset:8px 0 0 0;
  border-radius:3px 3px 8px 8px;overflow:hidden;}
.paint-pot .potrin::before{content:"";position:absolute;left:3px;transform:rotate(30deg);}
.paint-pot.pot-flame .potrin{background-color:var(--flame);}
.paint-pot.pot-flame .potrin::before{display:none;}
.paint-pot .potbrush{position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  width:9px;height:10px;border-radius:2px;
  background-color:var(--graphite);border:1px solid var(--night);}
.paint-pot.pot-graphite .potrin{background-color:var(--graphite);}
.paint-pot.pj{top:26%;right:19%;}
.paint-pot.pk{top:44%;right:15%;}
@media (max-width:760px){
  .hero-cel{width:88%;margin-left:-44%;top:8%;height:70%;}
  .celstage-blurb{display:none;}
  .paint-pot{display:none;}
}

.desk-slab{
  position:relative;
  background-color:var(--mulch);
  border-top:3px solid var(--gate);
}
.desk-hero{padding:52px 0 60px 0;display:flex;gap:34px;align-items:flex-start;}
.desk-hero .h1plate{flex:1 1 560px;}
.desk-hero h1{
  font-size:56px;
  line-height:1.02;
  font-weight:bold;
  color:var(--limestone);
  margin:4px 0 18px 0;
}
.scene-stamp{
  display:inline-block;
  margin:0 0 8px 18px;
  background-color:var(--flame);
  color:var(--ink);
  border-radius:50%;
  width:46px;height:46px;
  line-height:46px;
  text-align:center;
  font-size:13px;
  font-weight:bold;
  letter-spacing:1px;
  vertical-align:middle;
}
.desk-hero .lead{
  font-size:19px;
  color:var(--limestone);
  max-width:640px;
  margin-bottom:26px;
}
.desk-hero .lead em{color:var(--flame);}
.desk-hero .lead-buttons{display:flex;gap:16px;flex-wrap:wrap;}
.button-plate,.button-outline{
  display:inline-block;
  border-radius:6px;
  font-weight:bold;
  letter-spacing:.5px;
  line-height:1.2;
}
.button-plate{
  background-color:var(--flame);
  color:var(--ink);
  padding:15px 26px;
}
.button-plate:hover{background-color:var(--cream);color:var(--ink);}
.button-outline{
  border:2px solid var(--limestone);
  color:var(--limestone);
  padding:13px 24px;
}
.button-outline:hover{background-color:var(--limestone);color:var(--ink);}

.desk-reel{
  flex:0 1 300px;
  background-color:var(--scrim);
  border:1px solid var(--gate);
  border-radius:10px;
  padding:20px;
}
.desk-reel .reel-head{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:14px;
  font-weight:bold;
}
.desk-reel .peg-bar{
  margin:10px 0;
  background-color:var(--cream);
  border-radius:6px;
  padding:8px 6px;
  display:flex;
  gap:6px;
  justify-content:center;
}
.desk-reel .peg-bar i{width:7px;height:7px;border-radius:50%;
  background-color:var(--scrim);}
.desk-reel .reel-dial{
  height:14px;
  border-radius:7px;
  background-color:var(--gate);
  position:relative;
  overflow:hidden;
}
.desk-reel .reel-dial::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:43%;
  background-color:var(--flame);
}
.filmstills{display:flex;gap:4px;margin-top:12px;}
.filmstills i{
  width:22px;height:30px;border-radius:2px;
  background-color:var(--gate);
  border:1px solid var(--joint);
}
.filmstills i:nth-child(2n){background-color:var(--flame-deep);}
.desk-reel .reel-note{font-size:13px;color:var(--graphite);margin-top:10px;}

.kick-strip{background-color:var(--gate);}
.stats-band{
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:18px;
  padding:22px 24px;
}
.stat-fig{color:var(--limestone);font-weight:bold;}
.stat-fig .stat-big{font-size:30px;color:var(--flame);display:block;}
.stat-fig .stat-lab{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--graphite);}
.stats-band .stat-sep{color:var(--flame);font-weight:bold;align-self:center;}
@media (max-width:640px){.stats-band .stat-sep{display:none;}}

@media (max-width:760px){
  .desk-hero{flex-direction:column;}
  .desk-hero h1{font-size:38px;}
  .desk-reel{flex-basis:auto;width:100%;}
}

/* ==========================================================================
   REVEAL (JS adds the .js class to html; without JS everything stays visible)
   ========================================================================== */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s ease,transform .85s ease;
}
html.js [data-reveal].is-revealed{
  opacity:1;
  transform:none;
}

/* ==========================================================================
   3. CEL LEDGER ROWS
   ========================================================================== */
.cel-record{background-color:var(--night);}
.clerk-head{padding:70px 0 10px 0;}
.clerk-head h2{font-size:40px;color:var(--limestone);margin-bottom:10px;}
.clerk-head .ledger-lead{color:var(--graphite);max-width:720px;}

.cel-roster{padding:40px 0 30px 0;}
.ledger-row{
  position:relative;
  margin:0 0 26px 0;
  background-color:var(--mulch);
  border:1px solid var(--joint);
  border-left:5px solid var(--flame);
  border-radius:8px;
  padding:24px 26px 24px 96px;
  min-height:120px;
}
.ledger-row.is-shifted{margin-left:40px;}
.ledger-row .scene-chip{
  position:absolute;
  left:18px;
  top:26px;
  width:58px;height:58px;
  border-radius:50%;
  background-color:var(--flame);
  color:var(--ink);
  font-weight:bold;
  font-size:12px;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.ledger-row h3{font-size:22px;color:var(--cream);margin-bottom:8px;}
.ledger-row .row-copy{color:var(--limestone);}
.ledger-row .row-copy p{margin-bottom:10px;}
.ledger-row .file-link{font-weight:bold;letter-spacing:.5px;}
.mini-stack{
  position:absolute;
  right:20px;
  top:18px;
  width:26px;height:26px;
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:center;
}
.mini-stack i{display:block;width:100%;border-radius:3px;height:7px;}
.mini-stack i.s1{background-color:var(--cream);}
.mini-stack i.s2{background-color:var(--flame);}
.mini-stack i.s3{background-color:var(--graphite);}
.dot-trio{
  position:absolute;
  right:-8px;
  bottom:-8px;
  width:34px;
  height:34px;
}
.dot-trio i{
  position:absolute;
  width:13px;height:13px;border-radius:50%;
  border:1px solid var(--joint);
}
.dot-trio i.d1{background-color:var(--flame);left:0;bottom:0;}
.dot-trio i.d2{background-color:var(--graphite);left:10px;bottom:0;}
.dot-trio i.d3{background-color:var(--cream);left:5px;bottom:15px;}
@media (max-width:640px){
  .ledger-row{padding-left:26px;padding-top:96px;}
  .ledger-row .scene-chip{left:14px;top:14px;}
  .ledger-row .mini-stack{top:auto;bottom:18px;right:18px;}
  .ledger-row.is-shifted{margin-left:0;}
}

/* ==========================================================================
   4. STATEMENT ROW
   ========================================================================== */
.pledge-strip{background-color:var(--flame);color:var(--ink);}
.pledge-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  padding:34px 24px;
}
.pledge-figure{font-size:64px;font-weight:bold;line-height:1;}
.pledge-figure small{
  display:block;
  font-size:17px;
  font-weight:bold;
  letter-spacing:2px;
  text-transform:uppercase;
}
.pledge-copy{flex:1 1 420px;color:var(--ink);max-width:560px;}
.pledge-copy p{margin-bottom:8px;font-size:18px;font-weight:bold;}
@media (max-width:640px){.pledge-figure{font-size:46px;}}

/* ==========================================================================
   5. SEQUENCE FLOW
   ========================================================================== */
.production-line{background-color:var(--gate);}
.prod-inner{padding:60px 24px 70px 24px;}
.prod-inner .eyebrow{color:var(--cream);}
.prod-inner > h2{color:var(--limestone);font-size:34px;margin-bottom:8px;}
.prod-inner .prod-lead{color:var(--graphite);max-width:720px;}
.seq-rail{
  position:relative;
  margin-top:46px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
.seq-rail::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:44px;
  border-top:3px dashed var(--flame);
}
.seq-stop{position:relative;text-align:center;}
.seq-stop .peg-chip{
  position:relative;
  z-index:2;
  margin:0 auto 14px auto;
  width:74px;height:74px;
  border-radius:50%;
  background-color:var(--mulch);
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--flame);
  font-weight:bold;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.2;
  border:2px solid var(--flame);
}
.seq-stop .peg-glyph{
  position:absolute;
  left:50%;top:-16px;
  transform:translateX(-50%);
  font-size:15px;
  color:var(--cream);
  background-color:var(--gate);
  padding:1px 7px;
  border-radius:4px;
}
.seq-stop h4{color:var(--cream);font-size:17px;margin-bottom:8px;}
.seq-stop p{color:var(--graphite);font-size:14px;}
.seq-stop.is-locked .peg-chip{
  background-color:var(--flame);
  color:var(--ink);
  border-color:var(--cream);
}
@media (max-width:820px){
  .seq-rail{grid-template-columns:repeat(2,1fr);}
  .seq-rail::before{display:none;}
}

/* ==========================================================================
   6. ACCENT / BOOKING BAND
   ========================================================================== */
.booking-strip{background-color:var(--flame);color:var(--ink);}
.booking-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
  padding:36px 24px;
}
.book-mark{
  display:inline-block;
  border:3px double var(--ink);
  padding:4px 10px;
  font-weight:bold;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:14px;
  background-color:var(--flame);
}
.booking-inner .book-copy{flex:1 1 400px;}
.booking-inner .book-copy h2{font-size:27px;color:var(--ink);margin:6px 0;}
.booking-inner .book-copy p{color:var(--ink);font-weight:bold;}
.booking-inner .book-cta{
  background-color:var(--limestone);
  color:var(--ink);
  border-radius:6px;
  padding:16px 26px;
  font-weight:bold;
  letter-spacing:.5px;
}
.booking-inner .book-cta:hover{background-color:var(--ink);color:var(--limestone);}

/* ==========================================================================
   SERVICES PREVIEW (homepage strip is via rally band; secondary detail lives
   on services.html which reuses panel classes)
   ========================================================================== */
.panel-bench{background-color:var(--night);}
.bench-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding:44px 0;
}
.bench-card{
  background-color:var(--mulch);
  border-top:5px solid var(--flame);
  border-radius:8px;
  padding:24px;
}
.bench-card h3{color:var(--cream);font-size:21px;margin:6px 0 10px 0;}
.bench-card p{color:var(--limestone);}
.bench-card .card-num{
  width:34px;height:34px;
  background-color:var(--gate);
  border:1px solid var(--flame);
  color:var(--flame);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;
}
.bench-card ul{margin-top:14px;}
.bench-card ul li{
  color:var(--graphite);
  padding:6px 0;
  border-bottom:1px dashed var(--joint);
  font-size:15px;
}
.bench-card ul li strong{color:var(--limestone);}
@media (max-width:820px){.bench-grid{grid-template-columns:1fr;}}

/* Services page deep-list */
.rail-bench{background-color:var(--night);}
.service-article{padding:60px 0;}
.service-article .service-item{
  background-color:var(--mulch);
  border-left:6px solid var(--flame);
  border-radius:10px;
  padding:30px 30px 30px 118px;
  margin-bottom:30px;
  position:relative;
}
.service-article .service-item .scene-chip{
  position:absolute;left:26px;top:30px;
  width:64px;height:64px;border-radius:50%;
  background-color:var(--gate);
  color:var(--flame);
  border:2px solid var(--flame);
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:16px;
}
.service-article h2{color:var(--limestone);font-size:30px;margin-bottom:10px;}
.service-article h3{color:var(--cream);font-size:21px;margin:16px 0 8px 0;}
.service-article p{color:var(--limestone);margin-bottom:12px;}
.service-article ul{margin:0 0 14px 20px;list-style:square;}
.service-article ul li{color:var(--limestone);margin-bottom:6px;}
.service-article .process-note{color:var(--graphite);font-style:italic;margin-bottom:6px;}
@media (max-width:660px){
  .service-article .service-item{padding-left:26px;padding-top:104px;}
  .service-article .service-item .scene-chip{left:20px;top:20px;}
}
.proc-band{background-color:var(--gate);border-radius:12px;padding:30px;margin:40px 0;}
.proc-band h3{color:var(--cream);font-size:26px;}
.proc-band .step-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:20px;}
.step-card{background-color:var(--mulch);border-top:4px solid var(--flame);
  border-radius:6px;padding:16px;}
.step-card .st-num{color:var(--flame);font-weight:bold;letter-spacing:2px;}
.step-card h4{color:var(--cream);margin:4px 0;}
.step-card p{color:var(--graphite);font-size:14px;}
@media (max-width:820px){.proc-band .step-row{grid-template-columns:1fr 1fr;}}

/* Service process cta helper (process overview) */
.process-frame{background-color:var(--mulch);border:2px dashed var(--flame);
  border-radius:14px;padding:32px;margin:44px 0;}
.process-frame h3{color:var(--cream);font-size:28px;}
.process-frame ol{margin:16px 0 0 22px;}
.process-frame ol li{color:var(--limestone);margin-bottom:10px;}
.process-frame ol li strong{color:var(--flame);}

/* ==========================================================================
   PROOF INTRO (homepage summary band opening)
   ========================================================================== */
.proof-intro{padding:64px 0 8px 0;}
.proof-intro > h2{font-size:36px;color:var(--limestone);max-width:760px;
  line-height:1.12;margin-bottom:20px;}
.proof-intro .proof-prose{display:grid;grid-template-columns:1fr 1fr;
  gap:26px;max-width:900px;}
.proof-intro .proof-prose p{color:var(--graphite);}
.proof-intro .proof-prose p:first-child{margin-top:6px;}
@media (max-width:820px){.proof-intro .proof-prose{grid-template-columns:1fr;}}

/* ==========================================================================
   7. CONTACT
   ========================================================================== */
.contact-spread{background-color:var(--night);padding:64px 0;}
.contact-columns{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;}
.form-look{border-radius:10px;background-color:var(--mulch);padding:26px;
  border-top:5px solid var(--flame);}
.field-row{margin-bottom:16px;}
.field-row label{display:block;color:var(--graphite);font-weight:bold;
  letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase;font-size:13px;}
.field-row input,.field-row select,.field-row textarea{
  width:100%;
  border-radius:6px;
  border:1px solid var(--joint);
  background-color:var(--scrim);
  color:var(--limestone);
  padding:12px 14px;
  font-family:inherit;
  font-size:16px;
}
.field-row input:focus,.field-row textarea:focus,.field-row select:focus{
  outline:none;
  border-color:var(--flame);
}
.field-row textarea{min-height:140px;resize:vertical;}
.field-note{color:#C99970;font-size:13px;margin-top:8px;}
.form-send{
  border:none;
  background-color:var(--flame);
  color:var(--ink);
  border-radius:6px;
  padding:14px 26px;
  font-weight:bold;
  letter-spacing:.5px;
  font-size:16px;
}
.form-send:hover{background-color:var(--cream);color:var(--ink);}
.form-confirm{border-radius:8px;background-color:var(--gate);border:1px solid var(--joint);
  padding:16px;margin-top:16px;color:var(--limestone);display:none;}
.form-confirm strong{color:var(--flame);}

.side-info{display:flex;flex-direction:column;gap:0;}
.info-card{background-color:var(--mulch);border-radius:8px;padding:22px;margin-bottom:18px;
  border-left:4px solid var(--flame);}
.info-card h4{color:var(--cream);text-transform:uppercase;letter-spacing:2px;
  font-size:14px;margin-bottom:10px;}
.info-card .place-name{color:var(--limestone);font-weight:bold;font-size:18px;}
.info-card p{color:var(--limestone);}
.info-card a{font-weight:bold;}
.hours-line{display:flex;justify-content:space-between;color:var(--limestone);
  padding:6px 0;border-bottom:1px dashed var(--joint);font-size:15px;}
.hours-line span:last-child{color:var(--cream);font-weight:bold;}
.faq-mini{margin-top:4px;}
.faq-mini details{border:1px solid var(--joint);border-radius:8px;background-color:var(--gate);
  margin-bottom:12px;overflow:hidden;}
.faq-mini summary{cursor:pointer;color:var(--cream);font-weight:bold;padding:14px 16px;}
.faq-mini details p{color:var(--limestone);padding:0 16px 16px 16px;}
@media (max-width:840px){.contact-columns{grid-template-columns:1fr;}}

/* ==========================================================================
   8. PAINT SHELF FOOTER
   ========================================================================== */
.paintshelf{background-color:var(--night);}
.paintshelf .shelf-motto{background-color:var(--scrim);color:var(--cream);
  text-align:center;letter-spacing:6px;text-transform:uppercase;
  padding:18px 10px;font-weight:bold;font-size:15px;}
.pot-row{display:flex;align-items:center;justify-content:center;gap:18px;
  background-color:var(--gate);padding:14px 24px;border-top:2px solid var(--joint);}
.pot{width:16px;height:30px;border-radius:2px 2px 5px 5px;position:relative;}
.pot::before{content:"";position:absolute;top:-7px;left:-2px;right:-2px;height:7px;
  border-radius:2px 2px 0 0;background-color:var(--joint);}
.pot.p-flame{background-color:var(--flame);}
.pot.p-graphite{background-color:var(--graphite);}
.pot.p-cream{background-color:var(--cream);}
.pot.p-mix{background-color:#6E4A2E;}
.pot.p-deep{background-color:var(--flame-deep);}

.footer-links{background-color:var(--night);}
.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:40px 24px 30px 24px;}
.footer-title{color:var(--flame);text-transform:uppercase;letter-spacing:2px;
  font-size:14px;font-weight:bold;margin-bottom:12px;}
.footer-columns ul li{margin-bottom:8px;}
.footer-columns ul li a{color:var(--limestone);}
.footer-columns ul li a:hover{color:var(--flame);}
.footer-columns p{color:var(--graphite);}
@media (max-width:720px){.footer-columns{grid-template-columns:1fr;}}

.nameplate{background-color:var(--limestone);color:var(--ink);
  border-top:4px solid var(--flame);}
.nameplate-inner{padding:30px 24px 26px 24px;text-align:center;}
.nameplate-inner .firm{font-weight:bold;font-size:22px;letter-spacing:2px;margin-bottom:6px;}
.nameplate-inner .firm-line{color:#3A3734;margin:2px 0;font-size:15px;}
.nameplate-inner .firm-line strong{color:var(--ink);}
.copyright-line{color:var(--ink);}
.copyright-line .flame-text{color:#B6510C;font-weight:bold;}

/* ==========================================================================
   TYPOGRAPHY SHARED
   ========================================================================== */
.page-head{background-color:var(--mulch);border-bottom:3px solid var(--gate);
  padding:66px 0 50px 0;}
.page-head h1{font-size:46px;color:var(--limestone);}
.page-head .crumb{color:var(--graphite);margin-top:10px;font-size:15px;}
.page-head .crumb a{color:var(--flame);}
@media (max-width:640px){.page-head h1{font-size:34px;}}