/* =========================================================
   Raízes Versáteis — Atelier botânico / luxo natural editorial
   Mobile-first. Zero dependencies.
   ========================================================= */

:root{
  --paper:    #F3EEE3;
  --paper-2:  #EAE2D2;
  --ink:      #1C2418;
  --ink-soft: #44503C;
  --green:    #36513A;
  --green-deep:#1B2D20;
  --green-mid:#46613F;
  --clay:     #BE6A3C;
  --clay-2:   #A85A30;
  --sage:     #9DAE8C;
  --line:     rgba(28,36,24,.14);
  --line-light: rgba(243,238,227,.18);

  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-body: "Hanken Grotesk", system-ui, sans-serif;

  --wrap: 1200px;
  --gut: clamp(1.15rem, 5vw, 2.5rem);
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--green-deep); color:var(--paper); padding:.7em 1.2em; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--clay); outline-offset:3px; border-radius:3px; }

/* ---------- Typography ---------- */
h1,h2,h3{ font-family:var(--ff-display); font-weight:500; line-height:1.07; letter-spacing:-.015em; margin:0; }
h1 em,h2 em{ font-style:italic; color:var(--clay); }
.eyebrow{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--clay-2); margin:0 0 1rem;
}
.eyebrow-light{ color:var(--sage); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--ff-body); font-weight:600; font-size:1rem;
  padding:.95em 1.6em; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  text-align:center; line-height:1;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-clay{ background:var(--clay); color:#fff; box-shadow:0 8px 24px -10px rgba(190,106,60,.8); }
.btn-clay:hover{ background:var(--clay-2); }
.btn-green{ background:var(--green); color:var(--paper); }
.btn-green:hover{ background:var(--green-deep); }
.btn-ghost-light{ border-color:var(--line-light); color:var(--paper); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.08); }
.btn-block{ width:100%; }
.btn-wa{ background:#25D366; color:#fff; margin-top:.6rem; }
.btn-wa:hover{ background:#1da851; }

/* ---------- Blog: chips de categoria ---------- */
.blog-chips{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:0 0 2.2rem; }
.chip{
  font-family:var(--ff-body); font-size:.9rem; font-weight:600; cursor:pointer;
  padding:.5em 1.1em; border-radius:100px; border:1.5px solid var(--line); background:var(--paper);
  color:var(--ink-soft); transition:.2s;
}
.chip:hover{ border-color:var(--clay); color:var(--ink); }
.chip.active{ background:var(--green); border-color:var(--green); color:var(--paper); }
.post-card.is-hidden{ display:none; }

/* ---------- Blog: bloco "continue a explorar" ---------- */
.blog-explore{ padding-block:clamp(2.5rem,8vw,4rem) 0; text-align:center; }
.blog-explore .eyebrow{ margin-bottom:1rem; }
.blog-explore .btn{ margin:.4rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:68px; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{ height:42px; width:auto; flex:none; display:block; }
.footer-id{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.footer-id .brand-mark{ height:52px; margin-bottom:0; }
.footer-id .brand-name{ color:var(--paper); }
.brand-name{ font-family:var(--ff-display); font-size:.92rem; line-height:1.02; font-weight:500; letter-spacing:.01em; }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{ height:2px; width:100%; background:var(--ink); border-radius:2px; transition:.3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-menu{
  list-style:none; margin:0; padding:0;
  position:fixed; inset:68px 0 auto 0;
  background:var(--paper); border-bottom:1px solid var(--line);
  display:grid; gap:.2rem; padding:1rem var(--gut) 1.6rem;
  transform:translateY(-130%); transition:transform .35s cubic-bezier(.4,0,.2,1); visibility:hidden;
  box-shadow:0 24px 40px -24px rgba(0,0,0,.4);
}
.nav-menu.open{ transform:translateY(0); visibility:visible; }
.nav-menu a{ display:block; padding:.7rem .2rem; font-weight:500; font-size:1.1rem; border-bottom:1px solid var(--line); }
.nav-menu a:last-child{ border:none; }
.nav-cta{ color:var(--clay-2)!important; font-weight:700!important; }

/* ---------- Hero ---------- */
.hero{ position:relative; color:var(--paper); isolation:isolate; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background:url("assets/opt/hero-1.webp") center/cover no-repeat;
  transform:scale(1.04);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,33,23,.62) 0%, rgba(20,33,23,.55) 40%, rgba(20,33,23,.82) 100%);
}
.hero-inner{ padding-block:clamp(3.5rem, 14vw, 8rem); max-width:880px; }
.hero-title{
  font-size:clamp(2.6rem, 9vw, 5.4rem); font-weight:400; margin:.3rem 0 1.2rem;
}
.hero-sub{ font-size:clamp(1.05rem,3.4vw,1.3rem); max-width:48ch; color:rgba(243,238,227,.9); margin:0 0 2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.8rem; }
.hero-trust{
  list-style:none; margin:0; padding:1.6rem 0 0; border-top:1px solid var(--line-light);
  display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem;
}
.hero-trust li{ font-size:.95rem; color:rgba(243,238,227,.78); }
.hero-trust strong{ display:block; font-family:var(--ff-display); font-size:1.9rem; color:#fff; font-weight:500; line-height:1; }

/* ---------- City hero ---------- */
.city-hero{ position:relative; color:var(--paper); isolation:isolate; overflow:hidden; }
.city-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,33,23,.55) 0%, rgba(20,33,23,.7) 60%, rgba(20,33,23,.9) 100%);
}
.city-hero-inner{ padding-block:clamp(3rem,12vw,6.5rem); max-width:820px; }
.city-hero h1{ font-size:clamp(2.2rem,7.5vw,4.2rem); font-weight:400; margin:.6rem 0 1rem; }
.city-hero p{ font-size:clamp(1.02rem,3.2vw,1.2rem); color:rgba(243,238,227,.9); max-width:52ch; margin:0 0 1.8rem; }
.city-hero .hero-actions{ margin-bottom:0; }
.crumbs{ font-size:.85rem; letter-spacing:.06em; color:var(--sage); text-transform:uppercase; font-weight:600; }
.crumbs a{ color:rgba(243,238,227,.7); }
.crumbs a:hover{ color:#fff; }
.crumbs span{ margin:0 .4em; opacity:.5; }

/* ---------- Section heads ---------- */
.section-head{ max-width:720px; margin:0 auto clamp(2.2rem,6vw,3.5rem); text-align:center; }
.section-head--left{ margin-inline:0; text-align:left; }
.section-head h2,.intro h2,.faq-intro h2,.contact-copy h2{ font-size:clamp(2rem,6vw,3.2rem); }
.section-sub{ color:var(--ink-soft); font-size:1.08rem; margin:1rem 0 0; }

/* ---------- Intro ---------- */
.intro{ padding-block:clamp(3.5rem,10vw,6.5rem); }
.intro-grid{ display:grid; gap:2.5rem; }
.intro h2{ margin:.2rem 0 1.2rem; }
.lead{ font-size:1.15rem; color:var(--ink-soft); margin:0 0 1.6rem; }
.ticks{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.9rem; }
.ticks li{ position:relative; padding-left:2rem; font-weight:500; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.15em; width:1.3rem; height:1.3rem;
  background:var(--green); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/85% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/85% no-repeat;
}
.intro-media{ margin:0; position:relative; }
.intro-media img{ width:100%; border-radius:var(--radius); box-shadow:0 30px 60px -30px rgba(28,36,24,.55); }
.intro-media figcaption{
  position:absolute; left:1rem; bottom:1rem; background:var(--paper); color:var(--ink);
  font-size:.8rem; font-weight:600; letter-spacing:.03em; padding:.5em 1em; border-radius:100px;
}

/* ---------- Services (dark) ---------- */
.services{ background:var(--green-deep); color:var(--paper); padding-block:clamp(3.5rem,10vw,6.5rem); }
.services .section-sub{ color:rgba(243,238,227,.72); }
.service-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line-light); }
.service{
  display:flex; gap:1.2rem; align-items:baseline;
  padding:1.8rem 0; border-bottom:1px solid var(--line-light);
  transition:padding-left .3s ease;
}
.service:hover{ padding-left:.6rem; }
.service-num{ font-family:var(--ff-display); font-size:1.1rem; color:var(--clay); flex:none; font-weight:500; }
.service-body h3{ font-size:clamp(1.5rem,5vw,2.1rem); margin:0 0 .4rem; }
.service-body p{ margin:0; color:rgba(243,238,227,.74); max-width:60ch; }
.services-extra{ margin:2rem 0 0; color:rgba(243,238,227,.8); }
.services-extra strong{ color:#fff; }
.services-extra a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--clay); }
.service-body h3 a{ color:inherit; background:linear-gradient(var(--clay),var(--clay)) 0 100%/0 1.5px no-repeat; transition:background-size .3s; }
.service-body h3 a:hover{ background-size:100% 1.5px; }

/* ---------- Work gallery ---------- */
.work{ padding-block:clamp(3.5rem,10vw,6.5rem); }
.work .wrap{ margin-bottom:2.5rem; }
.gallery{ display:grid; grid-template-columns:1fr; gap:.7rem; padding-inline:var(--gut); }
.gallery figure{ margin:0; overflow:hidden; border-radius:10px; }
.gallery img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.gallery figure:hover img{ transform:scale(1.06); }

/* ---------- Portfolio listing ---------- */
.proj-list{ display:grid; gap:2rem; }
.project-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.project-card > a.pc-media{ display:block; overflow:hidden; }
.project-card .pc-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.project-card:hover .pc-media img{ transform:scale(1.05); }
.project-card .pc-body{ padding:1.6rem 1.5rem 1.9rem; }
.project-card h3{ font-size:clamp(1.5rem,4vw,2rem); margin:.4rem 0 .7rem; }
.project-card h3 a{ background:linear-gradient(var(--clay),var(--clay)) 0 100%/0 1.5px no-repeat; transition:background-size .3s; }
.project-card:hover h3 a{ background-size:100% 1.5px; }
.project-card p{ margin:0 0 1.2rem; color:var(--ink-soft); }
@media (min-width:760px){
  .project-card{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; }
  .project-card .pc-media,.project-card .pc-media img{ height:100%; aspect-ratio:auto; }
  .project-card.reverse .pc-media{ order:2; }
}

/* ---------- Project detail ---------- */
.proj-meta{ list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem 2.8rem; padding:1.4rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 0 2.2rem; }
.proj-meta dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:var(--clay-2); font-weight:700; }
.proj-meta dd{ margin:.25rem 0 0; font-family:var(--ff-display); font-size:1.15rem; }
.proj-body{ max-width:68ch; }
.proj-body p{ margin:0 0 1.1rem; }
.proj-body h2{ font-size:clamp(1.6rem,4.5vw,2.2rem); margin:2.2rem 0 1rem; }

.work-cta{ text-align:center; margin-top:2.6rem; }

/* Passos / como trabalhamos (mobile-first) */
.steps{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; gap:1.3rem; grid-template-columns:1fr; }
.steps li{ display:flex; gap:1rem; align-items:flex-start; }
.steps .step-n{ flex:none; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--green); color:var(--paper); display:grid; place-items:center; font-family:var(--ff-display); font-weight:600; }
.steps h3{ margin:.15rem 0 .25rem; font-size:1.12rem; }
.steps p{ margin:0; color:var(--ink-soft); }
@media(min-width:720px){ .steps{ grid-template-columns:1fr 1fr; gap:1.8rem 2.4rem; } }

/* Faixa CTA intermédia */
.cta-band{ background:var(--green-deep); color:var(--paper); text-align:center; padding:clamp(2rem,6vw,3rem); border-radius:var(--radius); margin:clamp(2.5rem,7vw,4rem) 0; }
.cta-band h2{ margin:0 0 .5rem; color:var(--paper); }
.cta-band p{ margin:0 auto 1.4rem; max-width:52ch; color:rgba(243,238,227,.85); }

/* ---------- Blog ---------- */
.post-date{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-2); font-weight:700; }
.city-hero .post-date{ color:var(--sage); margin-bottom:.6rem; }
.article a{ color:var(--clay-2); text-decoration:underline; text-underline-offset:2px; }
.article h2{ font-size:clamp(1.5rem,4.5vw,2.1rem); margin:2.3rem 0 1rem; }
.article ul{ margin:0 0 1.2rem; padding-left:1.1rem; }
.article li{ margin-bottom:.5rem; }
.article .post-lead{ font-size:1.2rem; color:var(--ink-soft); font-family:var(--ff-display); line-height:1.5; }
.post-card .pc-body .post-date{ margin-bottom:.3rem; display:block; }

/* ---------- Cities (clay band) ---------- */
.cities{ background:var(--paper-2); padding-block:clamp(3.5rem,10vw,6rem); }
.city-grid{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.city-grid a{
  display:flex; align-items:center; gap:1rem; padding:1.3rem 1.5rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--ff-display); font-size:1.4rem; font-weight:500;
  transition:.3s; position:relative;
}
.city-grid a span{ font-size:.85rem; font-family:var(--ff-body); font-weight:700; color:var(--clay); letter-spacing:.05em; }
.city-grid a:hover{ background:var(--green); color:var(--paper); transform:translateX(4px); border-color:var(--green); }
.city-grid a:hover span{ color:var(--sage); }

/* ---------- Testimonials ---------- */
.testimonials{ padding-block:clamp(3.5rem,10vw,6.5rem); }
.quote-grid{ display:grid; gap:1.2rem; }
.quote{
  margin:0; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem 1.8rem;
}
.quote-head{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.1rem; }
.quote-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; background:var(--paper); }
.quote-head figcaption{ font-family:var(--ff-display); font-weight:600; color:var(--ink); font-size:1.05rem; }
.stars{ color:var(--clay); letter-spacing:.12em; font-size:.9rem; }
.quote-head .stars{ margin-top:.15rem; }
.quote blockquote{ margin:0; font-family:var(--ff-display); font-size:1.18rem; line-height:1.45; color:var(--ink); }

/* ---------- FAQ ---------- */
.faq{ background:var(--green-deep); color:var(--paper); padding-block:clamp(3.5rem,10vw,6.5rem); }
.faq-grid{ display:grid; gap:2.2rem; }
.faq-intro h2{ margin:.2rem 0 .8rem; }
.faq-intro .section-sub{ color:rgba(243,238,227,.72); }
.faq-intro a{ color:var(--clay); text-decoration:underline; text-underline-offset:3px; }
.faq-list{ display:grid; gap:0; border-top:1px solid var(--line-light); }
.faq-item{ border-bottom:1px solid var(--line-light); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.3rem 2.4rem 1.3rem 0; position:relative;
  font-family:var(--ff-display); font-size:1.18rem; font-weight:500;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-size:1.6rem; color:var(--clay); transition:transform .3s; line-height:1;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-answer{ padding:0 0 1.4rem; color:rgba(243,238,227,.78); max-width:65ch; }
.faq-answer p{ margin:0; }

/* ---------- Contact ---------- */
.contact{ background:var(--green); color:var(--paper); padding-block:clamp(3.5rem,10vw,6.5rem); }
.contact-grid{ display:grid; gap:2.5rem; }
.contact-copy h2{ margin:.3rem 0 1rem; }
.contact-copy p{ color:rgba(243,238,227,.85); }
.contact-info{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.7rem; }
.contact-info a{ font-weight:600; font-size:1.1rem; border-bottom:1px solid transparent; }
.contact-info a:hover{ border-color:var(--clay); }

.contact-form{ background:var(--paper); color:var(--ink); padding:1.8rem; border-radius:var(--radius); display:grid; gap:1rem; }
.field{ display:grid; gap:.4rem; }
.field > span{ font-size:.82rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); }
.field input,.field textarea{
  font-family:var(--ff-body); font-size:1rem; color:var(--ink);
  padding:.85em 1em; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  width:100%; resize:vertical; transition:border-color .2s;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--clay); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin:.2rem 0 0; text-align:center; }
.form-status{ font-size:.92rem; margin:.2rem 0 0; text-align:center; font-weight:600; }
.form-status:empty{ display:none; }
.form-status.ok{ color:var(--green); }
.form-status.err{ color:#b23b3b; }
.form-status a{ text-decoration:underline; }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:1rem; }
.modal[hidden]{ display:none; }
.modal-overlay{ position:absolute; inset:0; background:rgba(18,26,16,.62); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s; }
.modal-card{
  position:relative; width:100%; max-width:460px; max-height:92vh; overflow-y:auto;
  background:var(--paper); border-radius:var(--radius); padding:2rem 1.6rem;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  transform:translateY(24px) scale(.98); opacity:0; transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .3s;
}
.modal.open .modal-overlay{ opacity:1; }
.modal.open .modal-card{ transform:none; opacity:1; }
.modal-card .eyebrow{ margin-bottom:.5rem; }
.modal-card h2{ font-size:1.9rem; margin:0 0 .5rem; }
.modal-lead{ color:var(--ink-soft); margin:0 0 1.4rem; font-size:.98rem; }
.modal-card .quote-form{ display:grid; gap:.85rem; }
.modal-close{
  position:absolute; top:.7rem; right:.7rem; width:40px; height:40px; border:none; cursor:pointer;
  background:var(--paper-2); color:var(--ink); border-radius:50%; font-size:1.5rem; line-height:1;
  display:grid; place-items:center; transition:background .2s;
}
.modal-close:hover{ background:var(--sage); color:#fff; }
@media (prefers-reduced-motion: reduce){
  .modal-overlay,.modal-card{ transition:none; }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(243,238,227,.78); padding-block:3.5rem 1.5rem; }
.footer-grid{ display:grid; gap:2rem; grid-template-columns:1fr 1fr; }
.footer-brand{ grid-column:1/-1; }
.footer-brand p{ margin:0; max-width:34ch; }
.footer-col h3{ font-family:var(--ff-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.15em; color:var(--sage); margin:0 0 1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer-col a:hover{ color:var(--paper); }
.footer-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(243,238,227,.12); font-size:.85rem; }
.footer-bottom p{ margin:0; }

/* ---------- Floating actions ---------- */
.floaters{ position:fixed; right:1rem; bottom:1rem; z-index:90; display:grid; gap:.6rem; }
.floater{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45); color:#fff; transition:transform .2s;
}
.floater:hover{ transform:scale(1.08); }
.floater-wa{ background:#25D366; }
.floater-call{ background:var(--green); }
.floater-mail{ background:var(--clay); }
.floater img{ width:26px; height:26px; }

/* ---------- Reveal animation ---------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* =========================================================
   TABLET  ≥ 720px
   ========================================================= */
@media (min-width:720px){
  .gallery{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .city-grid{ grid-template-columns:repeat(2,1fr); }
  .quote-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr 1fr; }
  .footer-brand{ grid-column:auto; }
  .contact-form{ padding:2.4rem; }
}

/* =========================================================
   DESKTOP  ≥ 960px
   ========================================================= */
@media (min-width:960px){
  body{ font-size:18px; }
  .nav-toggle{ display:none; }
  .nav-menu{
    position:static; transform:none; visibility:visible; background:none; border:none; box-shadow:none;
    display:flex; align-items:center; gap:.4rem; padding:0;
  }
  .nav-menu a{ border:none; font-size:.98rem; padding:.5rem .9rem; border-radius:100px; transition:background .2s; }
  .nav-menu a:hover{ background:var(--paper-2); }
  .nav-cta{ border:1.5px solid var(--clay); }

  .intro-grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:4rem; }
  .gallery{ grid-template-columns:repeat(4,1fr); }
  /* editorial: make first & sixth images span bigger */
  .gallery figure:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .gallery figure:nth-child(1) img{ aspect-ratio:auto; height:100%; }
  .gallery figure:nth-child(6){ grid-column:span 2; }
  .gallery figure:nth-child(6) img{ aspect-ratio:16/9; }

  .city-grid{ grid-template-columns:repeat(4,1fr); }
  .faq-grid{ grid-template-columns:.8fr 1.2fr; gap:4rem; align-items:start; }
  .faq-intro{ position:sticky; top:90px; }
  .contact-grid{ grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
}

@media (min-width:1100px){
  .hero-title{ font-size:5.4rem; }
}