/* ===========================================================================
   Design 13 — Showcase
   Section-level rebuild: lead-capture hero, process steps, featured before/after
   with thumbnail switcher, services as TABS, rotating testimonial. New order.
   Forest green + cream + coral. Gabarito display · Hanken Grotesk body.
   =========================================================================== */
:root {
  --bg:#faf7f0; --tint:#eef3ea; --panel:#ffffff; --dark:#1f2a24;
  --green:#2f6b54; --green-dk:#234f3f; --coral:#e2674a; --coral-dk:#c8512f; --gold2:#dca44e;
  --ink:#22251f; --ink-soft:#5f6358; --line:#e6e1d4; --line-dk:rgba(255,255,255,.13);
  --r:16px; --r-sm:11px;
  --shadow:0 16px 36px -22px rgba(34,49,40,.32); --shadow-lg:0 30px 60px -26px rgba(34,49,40,.42);
  --maxw:1160px; --fd:"Gabarito", system-ui, sans-serif; --fb:"Hanken Grotesk", system-ui, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; font-family:var(--fb); color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--fd); color:var(--ink); line-height:1.08; margin:0 0 .4em; font-weight:700; letter-spacing:-.01em; }
p { margin:0 0 1rem; }
a { color:var(--green-dk); text-decoration:none; }
img { display:block; max-width:100%; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.narrow { max-width:760px; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:16px; top:12px; z-index:100; background:var(--green); color:#fff; padding:8px 14px; border-radius:8px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--fb); font-weight:700; font-size:.96rem; padding:.8rem 1.5rem; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s; white-space:nowrap; }
.btn-lg { padding:.98rem 1.9rem; font-size:1.05rem; }
.btn-block { width:100%; }
.btn-primary { background:var(--coral); color:#fff; box-shadow:0 12px 26px -12px rgba(226,103,74,.6); }
.btn-primary:hover { background:var(--coral-dk); transform:translateY(-2px); }

.site-header { position:sticky; top:0; z-index:50; background:rgba(250,247,240,.92); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:box-shadow .25s,border-color .25s; }
.site-header.is-stuck { box-shadow:0 8px 26px -20px rgba(34,49,40,.5); border-color:var(--line); }
.header-inner { display:flex; align-items:center; gap:1.25rem; height:78px; }
.brand-logo { height:46px; width:auto; display:block; }
.brand-logo-footer { height:116px; width:auto; margin-bottom:.8rem; }
.nav { margin-left:auto; display:flex; align-items:center; gap:1.6rem; }
.nav a { color:var(--ink); font-weight:600; font-size:.95rem; }
.nav a:hover { color:var(--green); }
.nav .nav-cta { display:none; }
.header-call { margin-left:1rem; }
.nav-toggle { display:none; }

/* ===== hero: lead capture ===== */
.hero { background:linear-gradient(180deg,var(--tint),var(--bg)); padding-top:clamp(2.5rem,5vw,4rem); }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-bottom:clamp(2.5rem,5vw,4rem); }
.eyebrow { font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; color:var(--green); margin-bottom:1rem; }
.hero h1 { font-size:clamp(2.4rem,5vw,3.9rem); }
.hero .lead { font-size:clamp(1.1rem,2vw,1.3rem); color:var(--ink-soft); max-width:40ch; }
.hero-points { list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
.hero-points li { font-weight:600; color:var(--ink); display:flex; align-items:center; gap:.45rem; }
.hero-points li::before { content:"✓"; color:#fff; background:var(--green); width:20px; height:20px; border-radius:50%; display:grid; place-content:center; font-size:.7rem; }
.quote-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow-lg); }
.quote-card h2 { font-size:1.5rem; margin-bottom:.2rem; }
.quote-sub { color:var(--ink-soft); font-size:.95rem; margin-bottom:1.1rem; }
.field { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.8rem; }
.quote-card label { font-weight:700; font-size:.8rem; color:var(--ink-soft); }
.quote-card input, .quote-card select { font:inherit; padding:.72rem .85rem; border:1.5px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); width:100%; }
.quote-card input:focus, .quote-card select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(47,107,84,.15); }
.form-note { margin:.6rem 0 0; color:var(--green-dk); font-weight:700; font-size:.9rem; }
.quote-or { text-align:center; color:var(--ink-soft); font-size:.9rem; margin:.8rem 0 0; }
.quote-call { font-weight:700; color:var(--green-dk); }
.trust-strip { background:var(--green); color:#fff; }
.trust-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:1rem 24px; }
.trust-inner span { font-size:.95rem; opacity:.95; } .trust-inner strong { color:#fff; }
.trust-inner span:first-child { color:var(--gold2); }

/* ===== sections ===== */
.section { padding:clamp(3rem,7vw,5.5rem) 0; }
.section-tint { background:var(--tint); }
.section-dark { background:var(--dark); color:#dde3dd; }
.section-dark h2 { color:#fff; } .section-dark .section-sub { color:#a9b3aa; }
.section-head { max-width:680px; margin:0 0 clamp(2rem,4vw,3rem); }
.section-head.center { margin-inline:auto; text-align:center; }
.kicker { font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; color:var(--coral-dk); margin:0 0 .6rem; }
.kicker.light { color:var(--gold2); } .center-k { text-align:center; }
h2 { font-size:clamp(1.9rem,3.7vw,2.8rem); }
.section-sub { color:var(--ink-soft); font-size:1.06rem; }

/* ===== process steps ===== */
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:none; }
.steps li { position:relative; padding-top:.5rem; }
.step-n { display:grid; place-content:center; width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff; font-family:var(--fd); font-weight:700; font-size:1.2rem; margin-bottom:1rem; }
.steps li:not(:last-child)::after { content:""; position:absolute; top:23px; left:46px; right:-1.2rem; height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 8px, transparent 8px 16px); }
.steps h3 { font-size:1.2rem; }
.steps p { margin:0; color:var(--ink-soft); }

/* ===== featured work showcase ===== */
.work-wrap .section-head { color:#dde3dd; }
.showcase { display:grid; grid-template-columns:1fr 240px; gap:1.4rem; align-items:stretch; }
.ba-feature { --pos:50%; position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:var(--r); box-shadow:var(--shadow-lg); margin:0; background:#2a3a31; }
.ba { position:relative; }
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--pos); width:3px; background:#fff; transform:translateX(-50%); pointer-events:none; }
.ba-handle::after { content:"⇄"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; background:#fff; color:var(--green); border-radius:50%; display:grid; place-content:center; box-shadow:var(--shadow); }
.ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ba-tag { position:absolute; top:14px; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.55); padding:.28rem .65rem; border-radius:999px; pointer-events:none; }
.ba-before-tag { left:14px; } .ba-after-tag { right:14px; background:var(--coral); }
.ba-feature figcaption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.7)); color:#fff; font-weight:600; padding:2rem 1rem .9rem; }
.thumbs { display:flex; flex-direction:column; gap:.8rem; }
.thumb { flex:1; display:flex; align-items:center; gap:.7rem; background:#26332b; border:2px solid transparent; border-radius:var(--r-sm); padding:.5rem; cursor:pointer; color:#dde3dd; font-weight:600; font-family:var(--fb); text-align:left; transition:border-color .18s, background .18s; }
.thumb img { width:70px; height:54px; object-fit:cover; border-radius:8px; flex:none; }
.thumb span { font-size:.95rem; }
.thumb:hover { background:#2d3d33; }
.thumb.is-active { border-color:var(--coral); background:#2d3d33; }

/* ===== services tabs ===== */
.tabs { display:grid; grid-template-columns:280px 1fr; gap:2rem; align-items:start; }
.tablist { display:flex; flex-direction:column; gap:.4rem; }
.tab { text-align:left; background:var(--panel); border:1px solid var(--line); border-left:3px solid transparent; border-radius:10px; padding:.9rem 1.1rem; font-family:var(--fb); font-weight:700; font-size:1rem; color:var(--ink-soft); cursor:pointer; transition:all .15s; }
.tab:hover { color:var(--ink); }
.tab.is-active { color:var(--green-dk); border-left-color:var(--coral); background:#fff; box-shadow:var(--shadow); }
.tabpanels { position:relative; }
.tabpanel { display:none; }
.tabpanel.is-active { display:grid; grid-template-columns:1.1fr .9fr; gap:1.8rem; align-items:center; animation:fade .35s ease; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.tp-text h3 { font-size:1.6rem; }
.tp-text p { color:var(--ink-soft); }
.tp-text ul { margin:0 0 1.3rem; padding:0; list-style:none; display:grid; gap:.5rem; }
.tp-text li { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.tp-text li::before { content:"✓"; color:var(--green); font-weight:800; }
.tp-img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); box-shadow:var(--shadow); }

/* ===== reviews rotator ===== */
.qrotator { max-width:760px; margin:0 auto; text-align:center; }
.quotes { position:relative; min-height:200px; display:grid; }
.quote { grid-area:1/1; margin:0; opacity:0; visibility:hidden; transition:opacity .4s ease; pointer-events:none; }
.quote.is-active { opacity:1; visibility:visible; pointer-events:auto; }
.quote .stars { color:var(--gold2); letter-spacing:.15em; font-size:1.2rem; margin-bottom:1rem; }
.quote p { font-family:var(--fd); font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.35; color:var(--ink); font-weight:600; }
.quote cite { display:block; margin-top:1.2rem; font-style:normal; font-weight:700; color:var(--green-dk); }
.dots { display:flex; justify-content:center; gap:.6rem; margin-top:1.2rem; }
.dot { width:11px; height:11px; border-radius:50%; border:0; background:var(--line); cursor:pointer; transition:background .2s, transform .2s; }
.dot.is-active { background:var(--coral); transform:scale(1.2); }

/* ===== areas ===== */
.areas-band { text-align:center; }
.areas-band .area-list { list-style:none; padding:0; margin:1.4rem 0; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.areas-band .area-list li { background:var(--tint); border:1px solid var(--line); border-radius:999px; padding:.5rem 1.1rem; font-weight:600; color:var(--green-dk); }

/* ===== faq ===== */
.faq { display:grid; gap:.7rem; }
.faq-item { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:var(--fd); font-size:1.12rem; font-weight:700; color:var(--ink); padding:1.1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq-i { position:relative; flex:none; width:18px; height:18px; }
.faq-i::before,.faq-i::after { content:""; position:absolute; background:var(--coral); border-radius:2px; transition:transform .2s; }
.faq-i::before { top:8px; left:0; width:18px; height:2px; }
.faq-i::after { top:0; left:8px; width:2px; height:18px; }
.faq-q[aria-expanded="true"] .faq-i::after { transform:scaleY(0); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-a p { margin:0; padding:0 1.3rem 1.2rem; color:var(--ink-soft); }

/* ===== contact ===== */
.contact-band { text-align:center; max-width:720px; margin:0 auto; background:var(--green); color:#fff; border-radius:var(--r); padding:clamp(2.4rem,5vw,3.6rem); }
.contact-band h2 { color:#fff; }
.contact-band p { color:rgba(255,255,255,.9); }
.contact-lines { display:flex; flex-direction:column; gap:.3rem; margin:1.2rem 0 1.6rem; }
.big-link { color:#fff; font-family:var(--fd); font-weight:700; font-size:1.4rem; }
.big-link:hover { color:var(--gold2); }
.contact-band .btn-primary { background:#fff; color:var(--green-dk); }
.contact-band .btn-primary:hover { background:var(--gold2); color:var(--green-dk); }

/* ===== footer ===== */
.site-footer { background:var(--green-dk); color:#bcd0c6; padding:clamp(2.5rem,5vw,3.5rem) 0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.footer-meta { color:#88a195; font-size:.9rem; }
.site-footer h4 { color:#fff; font-family:var(--fd); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8rem; }
.site-footer a { color:#bcd0c6; } .site-footer a:hover { color:#fff; }
.site-footer p { margin:.3rem 0; }
.footer-areas { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.25rem .8rem; color:#bcd0c6; font-size:.92rem; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); margin-top:2.5rem; padding-top:1.4rem; font-size:.86rem; color:#88a195; }

[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity:1; transform:none; }

/* ===== responsive ===== */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .steps li:nth-child(2)::after { display:none; }
  .showcase { grid-template-columns:1fr; }
  .thumbs { flex-direction:row; }
  .thumb { flex:1; flex-direction:column; text-align:center; }
  .thumb img { width:100%; height:64px; }
  .tabs { grid-template-columns:1fr; }
  .tablist { flex-direction:row; overflow-x:auto; padding-bottom:.4rem; }
  .tab { white-space:nowrap; border-left:0; border-bottom:3px solid transparent; }
  .tab.is-active { border-left:0; border-bottom-color:var(--coral); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .header-call { display:none; }
  .steps li::after { display:none !important; }
  .nav { position:fixed; inset:78px 0 auto 0; flex-direction:column; align-items:stretch; background:#fff; border-bottom:1px solid var(--line); padding:1rem 24px 1.4rem; gap:.1rem; transform:translateY(-130%); transition:transform .3s ease; box-shadow:var(--shadow-lg); }
  body.nav-open .nav { transform:none; }
  .nav a { padding:.8rem 0; border-bottom:1px solid var(--line); }
  .nav .nav-cta { display:block; color:var(--coral-dk); }
  .nav-toggle { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; margin-left:auto; width:46px; height:46px; background:none; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
  .nav-toggle span { display:block; width:22px; height:2px; background:var(--green-dk); margin:0 auto; transition:transform .25s,opacity .2s; }
  body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:560px) {
  .steps, .footer-grid { grid-template-columns:1fr; }
  .tabpanel.is-active { grid-template-columns:1fr; }
  .thumbs { flex-direction:column; }
  .thumb { flex-direction:row; }
  .thumb img { width:70px; height:54px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } [data-reveal] { opacity:1; transform:none; transition:none; } }