:root{
  --ink:      #0F241B;
  --moss:     #2C5C4B;
  --canvas:   #FAF9F5;
  --paper:    #EFEEE7;
  --marigold: #E9A63C;
  --rope:     #BDB49F;
  --ink-70:   rgba(15,36,27,.70);
  --bs-body-font-family: 'Karla', system-ui, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--canvas);
  --bs-primary: var(--moss);
  --bs-border-radius: 2px;
}

body{ background:var(--canvas); color:var(--ink); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; }

.display-face{
  font-family:'Archivo', system-ui, sans-serif;
  font-variation-settings:'wdth' 112,'wght' 800;
  line-height:.98; letter-spacing:-.02em; text-wrap:balance;
}
.spec{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
h2.display-face{ font-size:clamp(2rem,4.6vw,3.4rem); }
h3.display-face{ font-size:1.4rem; font-variation-settings:'wdth' 100,'wght' 700; letter-spacing:-.01em; }

.eyebrow{ color:var(--marigold); display:flex; align-items:center; gap:.75rem; }
.eyebrow::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.35; max-width:5rem; }

.section{ padding:clamp(4rem,9vw,7.5rem) 0; }
.section-dark{ background:var(--ink); color:var(--canvas); }
.section-dark .lead-muted{ color:rgba(250,249,245,.72); }
.lead-muted{ color:rgba(15,36,27,.68); }

.valance{
  height:30px; position:relative; z-index:3; margin-top:-30px;
  background:radial-gradient(circle at 50% 0, var(--canvas) 15px, transparent 15.5px) repeat-x;
  background-size:40px 30px;
}
.valance-ink{
  background:radial-gradient(circle at 50% 0, var(--ink) 15px, transparent 15.5px) repeat-x;
  background-size:40px 30px;
}

/* Navbar */
.nav-makita{ transition:background-color .3s ease, box-shadow .3s ease; }
.nav-makita .nav-link{
  color:rgba(250,249,245,.82); font-weight:500; font-size:.95rem;
  padding:.4rem .85rem; border-bottom:1px solid transparent;
}
.nav-makita .nav-link:hover, .nav-makita .nav-link:focus-visible{ color:var(--canvas); border-bottom-color:var(--marigold); }
.nav-makita .nav-link.active{ color:var(--canvas); border-bottom-color:var(--marigold); }
.nav-makita.is-stuck{ background:var(--ink); box-shadow:0 1px 0 rgba(250,249,245,.12); }
.navbar-toggler{ border-color:rgba(250,249,245,.3); }
.nav-dropdown{ position:relative; }
.nav-sub{
  display:none; position:absolute; top:100%; left:0; min-width:220px;
  background:var(--ink); border:1px solid rgba(250,249,245,.1); border-top:2px solid var(--marigold);
  list-style:none; padding:.5rem 0; margin:0; z-index:1050;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.4);
}
.nav-dropdown:hover .nav-sub{ display:block; }
.nav-sub li a{
  display:block; padding:.55rem 1.25rem; color:rgba(250,249,245,.75);
  text-decoration:none; font-size:.9rem; font-weight:500;
  transition:background .2s, color .2s;
}
.nav-sub li a:hover{ background:rgba(250,249,245,.08); color:var(--canvas); }
@media (max-width:991.98px){
  .nav-sub{ position:static; border:0; box-shadow:none; border-top:0; padding-left:1rem; display:none; background:transparent; }
  .nav-dropdown:hover .nav-sub{ display:none; }
  .nav-dropdown.open .nav-sub{ display:block; }
  .nav-sub li a{ padding:.4rem .75rem; font-size:.85rem; }
}
.brand-mark{ height:40px; width:auto; }
.brand-name{
  font-family:'Archivo', system-ui, sans-serif;
  font-variation-settings:'wdth' 112,'wght' 800;
  font-size:1.15rem; color:var(--canvas); line-height:1.1; letter-spacing:-.01em;
}
.brand-sub{
  display:block; font-variation-settings:'wdth' 100,'wght' 500;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(250,249,245,.6);
}
@media (max-width:575.98px){ .brand-name{ font-size:1rem; } .brand-sub{ font-size:.6rem; } }

/* Page hero (inner pages) */
.page-hero{
  position:relative; background:var(--ink); overflow:hidden;
  padding:clamp(8rem,14vw,10rem) 0 clamp(4.5rem,8vw,6.5rem);
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:url("/images/gallery/20240308.webp") center/cover no-repeat;
  opacity:.18;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(2.4rem,6vw,4.2rem); color:var(--canvas); }
.page-hero p{ color:rgba(250,249,245,.72); }
.page-hero .valance{ margin-top:0; position:absolute; bottom:0; left:0; right:0; }

/* Buttons */
.btn-makita{
  --bs-btn-padding-y:.85rem; --bs-btn-padding-x:1.9rem;
  font-weight:700; font-size:.95rem; letter-spacing:.01em; border-radius:2px;
  border:1px solid transparent; transition:transform .15s ease, background-color .2s ease;
}
.btn-sun{ background:var(--marigold); color:var(--ink); }
.btn-sun:hover, .btn-sun:focus-visible{ background:#F4B65A; color:var(--ink); transform:translateY(-2px); }
.btn-ghost{ border-color:rgba(250,249,245,.8); color:var(--canvas); background:rgba(250,249,245,.12); }
.btn-ghost:hover, .btn-ghost:focus-visible{ background:var(--canvas); color:var(--ink); transform:translateY(-2px); }
.btn-ink{ background:var(--ink); color:var(--canvas); }
.btn-ink:hover, .btn-ink:focus-visible{ background:var(--moss); color:var(--canvas); transform:translateY(-2px); }
.btn-moss{ background:var(--moss); color:var(--canvas); }
.btn-moss:hover, .btn-moss:focus-visible{ background:var(--ink); color:var(--canvas); transform:translateY(-2px); }

/* Fact strip */
.factbar{ background:var(--moss); color:var(--canvas); }
.factbar .spec{ color:rgba(250,249,245,.62); }
.factbar strong{ font-family:'Archivo'; font-variation-settings:'wdth' 105,'wght' 700; font-size:1.05rem; display:block; }

/* Service cards */
.svc{
  height:100%; background:var(--canvas); border:1px solid var(--rope);
  padding:2rem 1.75rem 1.75rem; position:relative;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.svc:hover{ transform:translateY(-4px); border-color:var(--ink); box-shadow:0 14px 30px -22px rgba(15,36,27,.6); }
.svc .spec{ color:var(--moss); display:block; margin-bottom:1rem; }
.svc::before{ content:""; position:absolute; top:-1px; left:-1px; width:44px; height:4px; background:var(--marigold); }
.svc p{ color:rgba(15,36,27,.72); font-size:.98rem; margin-bottom:0; }

/* Numbers */
.stat-n{
  font-family:'Archivo'; font-variation-settings:'wdth' 120,'wght' 800;
  font-size:clamp(2.6rem,6vw,4rem); line-height:1; color:var(--marigold);
}
.stat-l{ color:rgba(250,249,245,.7); }
.stat + .stat{ border-left:1px solid rgba(250,249,245,.16); }
@media (max-width:767.98px){ .stat:nth-child(odd){ border-left:0; } }

/* Gallery shots */
.shot{ position:relative; overflow:hidden; background:var(--paper); border:0; padding:0; width:100%; display:block; }
.shot img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .5s ease; }
.shot.tall img{ aspect-ratio:4/5.4; }
.gallery-filter{ background:var(--canvas);color:var(--ink);border:1px solid var(--rope); }
.gallery-filter:hover{ background:var(--paper);color:var(--ink); }
.gallery-filter.active{ background:var(--ink);color:var(--canvas);border-color:var(--ink); }
.shot::after{ content:""; position:absolute; inset:0; background:var(--ink); opacity:0; transition:opacity .35s ease; }
.shot:hover img, .shot:focus-visible img{ transform:scale(1.06); }
.shot:hover::after, .shot:focus-visible::after{ opacity:.28; }
.shot:focus-visible{ outline:3px solid var(--marigold); outline-offset:3px; }

/* Forms */
.form-control, .form-select{
  background:transparent; border:0; border-bottom:1px solid var(--rope); border-radius:0;
  padding:.7rem .1rem; color:var(--ink); font-size:1rem;
}
.form-control:focus, .form-select:focus{
  background:transparent; border-bottom-color:var(--marigold); box-shadow:0 1px 0 var(--marigold); color:var(--ink);
}
.form-control::placeholder{ color:rgba(15,36,27,.38); }
.form-label{ font-family:'DM Mono', monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--moss); margin-bottom:.15rem; }
.quote-panel{ background:var(--paper); padding:clamp(1.75rem,4vw,3rem); border-top:4px solid var(--marigold); }

/* Footer */
.foot a{ color:rgba(250,249,245,.72); text-decoration:none; }
.foot a:hover, .foot a:focus-visible{ color:var(--marigold); }
.foot h4{ font-family:'DM Mono', monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--marigold); margin-bottom:1rem; }

/* Social icons */
.social-icon{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(250,249,245,.25);
  display:grid; place-items:center; color:rgba(250,249,245,.7);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.social-icon:hover, .social-icon:focus-visible{
  background:var(--marigold); color:var(--ink); border-color:var(--marigold);
}


/* Motion / a11y */
.reveal{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
a:focus-visible, button:focus-visible, .btn:focus-visible{ outline:3px solid var(--marigold); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* Testimonials */
.testi-card{
  background:var(--paper); padding:2rem 2rem 1.75rem; position:relative; height:100%;
  border-left:3px solid var(--marigold);
}
.testi-stars{ color:var(--marigold); font-size:.9rem; letter-spacing:.1em; margin-bottom:.75rem; }
.testi-text{ font-size:1.05rem; font-style:italic; color:var(--ink); margin-bottom:1.25rem; line-height:1.7; }
.testi-author{ display:flex; align-items:center; gap:.75rem; }
.testi-avatar{
  width:44px; height:44px; border-radius:50%; background:var(--moss); color:var(--canvas);
  display:grid; place-items:center; font-family:'Archivo'; font-weight:700; font-size:.9rem; flex-shrink:0;
}
.testi-name{ font-weight:700; font-size:.95rem; margin-bottom:0; }
.testi-role{ font-size:.82rem; color:var(--ink-70); margin-bottom:0; }

/* Trust strip */
.trust-strip{ background:var(--paper); border-top:1px solid var(--rope); border-bottom:1px solid var(--rope); }
.trust-item{
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; padding:1rem;
}
.trust-icon{
  width:48px; height:48px; background:var(--moss); border-radius:50%;
  display:grid; place-items:center;
}
.trust-icon svg{ width:22px; height:22px; }
.trust-label{ font-family:'DM Mono', monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-70); }

/* Google review badge */
.g-review{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--canvas); border:1px solid var(--rope); padding:.6rem 1.25rem .6rem .85rem;
  border-radius:2px;
}
.g-review-score{
  font-family:'Archivo'; font-variation-settings:'wdth' 112,'wght' 800;
  font-size:1.5rem; line-height:1; color:var(--ink);
}
.g-review-stars{ color:var(--marigold); font-size:.85rem; letter-spacing:.05em; }
.g-review-count{ font-size:.78rem; color:var(--ink-70); }

/* WhatsApp chat bubble */
.wa-float{
  position:fixed; right:1rem; bottom:1rem; z-index:1040;
  display:flex; align-items:center; gap:.65rem;
  transition:transform .2s ease;
}
.wa-float:hover, .wa-float:focus-visible{ transform:translateY(-3px); text-decoration:none; }
.wa-btn{
  background:#25D366; color:#0F241B; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; box-shadow:0 8px 24px -8px rgba(0,0,0,.5); flex-shrink:0;
}
.wa-label{
  background:var(--ink); color:var(--canvas); font-size:.82rem; font-weight:600;
  padding:.45rem .9rem; border-radius:2px; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  animation:waPulse 4s ease-in-out infinite;
}
@keyframes waPulse{
  0%,100%{ opacity:1; transform:translateX(0); }
  50%{ opacity:.85; transform:translateX(-3px); }
}
@media (max-width:575.98px){ .wa-label{ display:none; } }

/* FAQ accordion */
.faq-item{
  border:1px solid var(--rope); margin-bottom:-1px; background:var(--canvas);
  transition:box-shadow .2s ease;
}
.faq-item:first-child{ border-top-left-radius:2px; border-top-right-radius:2px; }
.faq-item:last-child{ border-bottom-left-radius:2px; border-bottom-right-radius:2px; }
.faq-btn{
  width:100%; text-align:left; background:transparent; border:0;
  padding:1.25rem 3rem 1.25rem 1.5rem; font-weight:700; font-size:1.05rem;
  color:var(--ink); cursor:pointer; position:relative;
}
.faq-btn::after{
  content:"+"; position:absolute; right:1.25rem; top:50%; transform:translateY(-50%);
  font-family:'Archivo'; font-size:1.3rem; color:var(--moss); transition:transform .25s ease;
}
.faq-btn[aria-expanded="true"]::after{ content:"\2212"; }
.faq-body{
  max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease;
  padding:0 1.5rem;
}
.faq-body.open{ max-height:500px; padding:0 1.5rem 1.25rem; }
.faq-body p{ color:var(--ink-70); margin-bottom:0; }

/* Pricing badge */
.price-badge{
  display:inline-flex; align-items:baseline; gap:.3rem;
  background:var(--marigold); color:var(--ink); padding:.3rem .75rem;
  font-family:'DM Mono', monospace; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600; margin-bottom:1rem;
}
.price-badge .price-from{ font-family:'Archivo'; font-weight:800; font-size:.95rem; letter-spacing:0; text-transform:none; }

/* CTA banner */
.cta-banner{
  background:var(--moss); padding:2.5rem; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:1.5rem;
}
.cta-banner h3{ color:var(--canvas); margin-bottom:0; }
.cta-banner p{ color:rgba(250,249,245,.75); margin-bottom:0; max-width:28rem; }