/* ==========================================================================
   DELPIZZO ARQUITETURA E INTERIORES — Florianópolis, SC
   Spec mockup.

   ⚠ THEIR SITE COULD NOT BE FETCHED. delpizzoarquitetura.com.br returned an
     EMPTY BODY to a direct request and a 403 FORBIDDEN to a browser request on
     09/09/2026. NOTHING in this build was read from their own site. Every fact
     is [CONFIRM — secondary source]. That server behaviour is the first thing
     to check live: if Googlebot is being 403'd, the practice is invisible in
     search and does not know it.

   Reference: interior-finishing-contractor-ref-02 ("Inarche"). Its SPINE is
   followed closely — full-bleed interior hero with a single portfolio CTA,
   founder block with a signature, numeric stat row, parallax four-category
   band, benefit checklist. Its PALETTE AND REGISTER ARE REJECTED: orange-on-navy
   contractor energy is wrong for a boutique practice whose product is taste.

   ⚠ CONTRAST (WCAG 2.1 AA / eMAG):
       · Charcoal #22262A on Warm White #F7F5F1 ≈ 14.2:1 — AAA
       · Bronze #9A7B4F on Warm White ≈ 3.4:1 — FAILS body text. It is
         therefore restricted to LARGE type (≥24px), rules, stat figures and
         button fills. Body-size accents use #7A5F38 (≈ 5.0:1) instead.
       · Concrete #B9B5AE is a RULE colour and never carries text.
       · Every full-bleed hero pins a minimum scrim opacity — an image-led site
         is where overlaid text quietly fails contrast at some breakpoint.
   ========================================================================== */

:root{
  --charcoal:#22262A;
  --ink:#2C3A45;
  --white:#F7F5F1;
  --bronze:#9A7B4F;
  --bronze-lt:#C4A472;
  --bronze-dk:#7A5F38;      /* the body-size-safe bronze */
  --concrete:#B9B5AE;       /* rules only — never text */
  --linen:#E6E0D6;
  --body:#4A4F55;

  --g-soft:linear-gradient(180deg,var(--white) 0%,var(--linen) 100%);
  --g-dark:linear-gradient(155deg,var(--charcoal) 0%,var(--ink) 100%);
  --g-bronze:linear-gradient(135deg,var(--bronze) 0%,var(--bronze-lt) 100%);
  --g-scrim:linear-gradient(0deg,rgba(34,38,42,.60) 0%,rgba(34,38,42,.18) 55%,rgba(34,38,42,0) 100%);
  --g-card:linear-gradient(180deg,rgba(34,38,42,0) 46%,rgba(34,38,42,.76) 100%);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;

  --wrap:1320px;
  --gut:clamp(18px,4.4vw,60px);
  --r:2px;                       /* almost square — architectural, not soft */
  --ease:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--body);
  font-family:var(--sans);font-size:16.5px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.08;
  letter-spacing:-.014em;color:var(--charcoal)}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--bronze-dk);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--charcoal);color:var(--white);padding:12px 20px}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--n{max-width:920px}
.sec{padding-block:clamp(58px,8vw,132px);position:relative}
.sec--t{padding-block:clamp(34px,4.6vw,68px)}
.linen{background:var(--linen)}
.soft{background-image:var(--g-soft)}
.dark{background-image:var(--g-dark);color:#C3C8CD}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--white)}
.dark .lede{color:#AEB4BA}
.inkbg{background:var(--ink);color:#C3C8CD}
.inkbg h2,.inkbg h3{color:var(--white)}
.inkbg .lede{color:#AEB4BA}

.eyebrow{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bronze-dk);margin:0 0 18px}
.dark .eyebrow,.inkbg .eyebrow{color:var(--bronze-lt)}
.h-xl{font-size:clamp(2.6rem,6.4vw,5rem)}
.h-lg{font-size:clamp(2.1rem,4.2vw,3.4rem)}
.h-md{font-size:clamp(1.5rem,2.5vw,2.1rem)}
.h-sm{font-size:clamp(1.15rem,1.7vw,1.4rem)}
.lede{font-size:clamp(1rem,1.32vw,1.13rem);color:var(--body);max-width:62ch}
.sec-head{max-width:62ch;margin-bottom:clamp(30px,4vw,58px)}
.sec-head--row{max-width:none;display:flex;flex-wrap:wrap;gap:24px;
  justify-content:space-between;align-items:flex-end}
.rule{height:1px;background:var(--concrete);border:0;margin:0}

/* ---------- [CONFIRM] — this whole build is secondary-source ---------- */
.cfm{display:inline-block;border:1px dashed var(--bronze-dk);background:rgba(154,123,79,.10);
  color:var(--bronze-dk);padding:.05em .5em;border-radius:var(--r);
  font-size:.85em;font-weight:600;font-style:normal}
.dark .cfm,.inkbg .cfm,.pcard__i .cfm{border-color:var(--bronze-lt);
  background:rgba(196,164,114,.18);color:var(--bronze-lt)}
.cfm-note{border-left:3px solid var(--bronze);background:rgba(154,123,79,.07);
  padding:16px 20px;color:var(--bronze-dk);font-size:.92rem;margin:0 0 22px;max-width:66ch}
.dark .cfm-note,.inkbg .cfm-note{border-color:var(--bronze-lt);background:rgba(196,164,114,.12);color:var(--bronze-lt)}
/* the server finding gets its own, louder treatment — it outranks every design
   decision on this engagement */
.finding{border:1px solid var(--bronze);background:rgba(154,123,79,.07);
  padding:22px 24px;margin:0 0 24px}
.finding b{color:var(--charcoal);font-family:var(--serif);font-size:1.15rem;display:block;margin-bottom:8px}
.dark .finding b{color:var(--white)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--r);font-size:.76rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;background-image:var(--g-bronze);color:#fff;
  transition:transform .3s var(--ease),filter .3s var(--ease)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn--ghost{background:transparent;background-image:none;color:var(--charcoal);
  border:1px solid var(--charcoal)}
.btn--ghost:hover{background:var(--charcoal);color:var(--white)}
.dark .btn--ghost,.inkbg .btn--ghost,.hero .btn--ghost{color:var(--white);border-color:rgba(247,245,241,.7)}
.dark .btn--ghost:hover,.inkbg .btn--ghost:hover,.hero .btn--ghost:hover{background:var(--white);color:var(--charcoal)}
.btn--dark{background-image:var(--g-dark)}
.btn--sm{padding:10px 20px;font-size:.68rem}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- Utility topbar — minimal; a practice at this level does not shout */
.top{background:var(--charcoal);color:#A9AEB3;font-size:.77rem;padding-block:9px}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top a:hover{color:var(--white)}
.top__l,.top__r{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pills{display:flex;gap:10px}
.pills a.on{color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* ---------- Sticky header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:rgba(247,245,241,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--concrete);
  padding-block:18px;transition:padding .3s var(--ease)}
.hdr.is-stuck{padding-block:10px}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{font-family:var(--serif);font-size:1.55rem;font-weight:500;color:var(--charcoal);
  letter-spacing:.02em;line-height:1.05}
.brand small{display:block;font-family:var(--sans);font-size:.53rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--bronze-dk);font-weight:600}
.nav{display:flex;align-items:center;gap:22px}
.nav a{font-size:.77rem;font-weight:500;letter-spacing:.03em;color:var(--body);
  padding-block:5px;border-bottom:1px solid transparent;transition:.24s}
.nav a:hover,.nav a[aria-current]{color:var(--charcoal);border-bottom-color:var(--bronze)}
.hdr__r{display:flex;align-items:center;gap:12px}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1px;background:var(--charcoal);transition:.28s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:89;background:var(--white);display:flex;flex-direction:column;
  justify-content:center;gap:0;padding:100px var(--gut) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.32s var(--ease)}
.mnav.on{opacity:1;visibility:visible;transform:none}
.mnav a{font-family:var(--serif);font-size:clamp(1.6rem,6.6vw,2.4rem);color:var(--charcoal);
  padding-block:12px;border-bottom:1px solid var(--concrete)}

/* ---------- Hero — ONE photograph, no carousel, no slider, ONE CTA ---------- */
.hero{position:relative;min-height:min(92svh,880px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero__bg img{width:100%;height:112%;object-fit:cover}
/* minimum scrim opacity is PINNED, not tuned per image — overlaid text on a
   photography-led site is where AA quietly fails at some breakpoint */
.hero__scrim{position:absolute;inset:0;z-index:-1;background:var(--g-scrim)}
.hero__in{padding-block:0 clamp(56px,9vh,120px);max-width:860px}
.hero h1{color:var(--white);font-size:clamp(2.4rem,6vw,4.6rem);text-shadow:0 2px 40px rgba(34,38,42,.5)}
.hero p{color:rgba(247,245,241,.94);max-width:50ch;margin-top:20px;font-size:1.06rem}
.hero .eyebrow{color:var(--bronze-lt)}

/* ---------- Portfolio grid ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(22px,3vw,38px)}
.filters button{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 17px;border:1px solid var(--concrete);border-radius:var(--r);color:var(--body);
  transition:.24s var(--ease);background:transparent}
.filters button:hover{border-color:var(--charcoal);color:var(--charcoal)}
/* never colour-only: the active filter also fills and carries aria-pressed */
.filters button[aria-pressed="true"]{background:var(--charcoal);color:var(--white);border-color:var(--charcoal)}
.filters .grp{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--body);
  align-self:center;margin-right:4px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.pcard{display:block;position:relative;overflow:hidden;background:var(--linen);
  transition:transform .38s var(--ease)}
.pcard:hover{transform:translateY(-5px)}
.pcard[hidden]{display:none}
.pcard__i{position:relative;aspect-ratio:4/5;overflow:hidden}
.pcard__i img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard:hover .pcard__i img{transform:scale(1.05)}
.pcard__i::after{content:"";position:absolute;inset:0;background:var(--g-card)}
.pcard__t{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:var(--white)}
.pcard__t b{display:block;font-family:var(--serif);font-size:1.4rem;font-weight:500;margin-bottom:6px}
.pcard__t span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,241,.86)}
.pcount{font-size:.82rem;color:var(--body);margin-bottom:16px}

/* ---------- Project page ---------- */
.crumb{font-size:.76rem;letter-spacing:.06em;color:var(--body);margin-bottom:20px}
.crumb a{border-bottom:1px solid var(--concrete)}
.pmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);
  border-top:1px solid var(--concrete);border-bottom:1px solid var(--concrete);
  padding-block:26px;margin-block:clamp(26px,3.4vw,44px)}
.pmeta div b{display:block;font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze-dk);margin-bottom:7px}
.pmeta div span{font-size:.95rem;color:var(--charcoal)}
/* material palette — swatches ALWAYS carry a text label, never colour alone */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.5vw,20px)}
.sw{text-align:center}
.sw i{display:block;aspect-ratio:1;border:1px solid var(--concrete);margin-bottom:10px;
  background-size:cover;background-position:center}
.sw b{display:block;font-size:.82rem;color:var(--charcoal);font-weight:600}
.sw span{font-size:.74rem;color:var(--body)}
.seq{display:grid;gap:clamp(14px,2vw,26px)}
.seq figure{margin:0}
.seq img{width:100%;object-fit:cover}
.seq figcaption{font-size:.78rem;color:var(--body);padding-top:9px}
.credits{border-top:1px solid var(--concrete);padding-top:24px;display:grid;
  grid-template-columns:repeat(2,1fr);gap:14px 30px;font-size:.9rem}
.credits b{color:var(--charcoal);font-weight:600}

/* ---------- Before / after ----------
   Permitted here and worth saying why: CFM 1.974/2011's before/after ban applies
   to MEDICAL advertising and has no bearing on renovation. Rooms only, never
   people, in either frame. Drag divider PLUS a keyboard-operable toggle. */
.ba{position:relative;aspect-ratio:3/2;overflow:hidden;user-select:none;background:var(--linen)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 var(--x,50%))}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--white);
  z-index:3;transform:translateX(-1px)}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:var(--white);border:1px solid var(--concrete)}
.ba__range{position:absolute;inset:auto 0 0;z-index:4;width:100%;margin:0;opacity:0;height:44px;cursor:ew-resize}
.ba__lab{position:absolute;top:14px;z-index:3;background:rgba(34,38,42,.82);color:var(--white);
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px}
.ba__lab--b{left:14px}.ba__lab--a{right:14px}
.ba-wrap{display:grid;gap:14px}
.ba-toggle{display:flex;gap:8px}

/* ---------- Process ---------- */
.steps{display:grid;gap:0;border-top:1px solid var(--concrete)}
.step{display:grid;grid-template-columns:78px 1fr 1fr 1fr;gap:clamp(14px,2.4vw,34px);
  padding-block:26px;border-bottom:1px solid var(--concrete);align-items:start;
  transition:background .3s var(--ease)}
.step:hover{background:rgba(230,224,214,.44)}
.step__n{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--bronze)}
.step h3{font-size:1.16rem;margin-bottom:6px}
.step p{font-size:.88rem;margin:0}
.step dl{margin:0;font-size:.86rem}
.step dt{font-size:.64rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--bronze-dk);margin-bottom:5px}
.step dd{margin:0 0 12px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,5vw,4rem);
  line-height:1;color:var(--bronze-lt);font-weight:500}
.stat span{font-size:.86rem;display:block;margin-top:9px}
.stat em{display:block;font-style:normal;font-size:.74rem;color:#8E959B;margin-top:7px}

/* ---------- Parallax four-category band ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;z-index:2}
.cat{padding:clamp(28px,3.6vw,54px) clamp(18px,2.2vw,32px);
  border-right:1px solid rgba(247,245,241,.2);transition:background .34s var(--ease)}
.cat:last-child{border-right:0}
.cat:hover{background:rgba(247,245,241,.07)}
.cat b{display:block;font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.75rem);
  color:var(--white);margin-bottom:10px;font-weight:500}
.cat p{font-size:.87rem;margin:0 0 16px}
.cat a{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-lt);border-bottom:1px solid rgba(196,164,114,.5);padding-bottom:3px}
.parallax{position:absolute;inset:-12% 0;z-index:0;opacity:.20;will-change:transform}
.parallax img{width:100%;height:100%;object-fit:cover}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.member{border-top:2px solid var(--charcoal);padding-top:20px}
.member h3{font-size:1.2rem;margin-bottom:5px}
.member .role{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-dk);margin-bottom:12px}
.member p{font-size:.88rem;margin:0 0 10px}
.member .reg{font-size:.82rem;border-top:1px solid var(--concrete);padding-top:10px}
/* the signature block — real here rather than decorative, because the practice
   is sibling-founded with a named principal architect */
.sig{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.4rem);color:var(--charcoal);
  font-style:italic;border-top:1px solid var(--bronze);padding-top:18px;margin-top:26px;
  display:inline-block}
.sig small{display:block;font-family:var(--sans);font-style:normal;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-dk);margin-top:8px}

/* ---------- Press ---------- */
.press{border-top:1px solid var(--concrete)}
.press li{display:grid;grid-template-columns:150px 1fr auto;gap:clamp(12px,2vw,28px);
  padding-block:20px;border-bottom:1px solid var(--concrete);align-items:baseline;font-size:.94rem}
.press .when{font-size:.8rem;color:var(--body)}
.press b{color:var(--charcoal)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--concrete)}
.faq details{border-bottom:1px solid var(--concrete)}
.faq summary{padding:20px 44px 20px 0;font-family:var(--serif);font-size:1.16rem;
  color:var(--charcoal);cursor:pointer;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--bronze);font-size:1.5rem;transition:transform .24s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 0 20px;margin:0;font-size:.94rem;max-width:70ch}

/* ---------- Qualifying enquiry form ---------- */
.form{background:var(--white);border:1px solid var(--concrete);padding:clamp(24px,3.2vw,44px)}
.linen .form{background:var(--white)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.field label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--bronze-dk);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;padding:13px 0;font:inherit;font-size:.96rem;
  background:transparent;border:0;border-bottom:1px solid var(--concrete);border-radius:0;color:var(--charcoal)}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--bronze)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;margin:4px 0 20px}
.consent input{margin-top:5px;accent-color:var(--bronze)}
.consent a{color:var(--bronze-dk);text-decoration:underline}
.contactlist{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--concrete)}
.contactlist li{display:flex;justify-content:space-between;gap:18px;padding-block:14px;
  border-bottom:1px solid var(--concrete);font-size:.93rem}
.contactlist b{color:var(--charcoal);font-weight:600}

/* ---------- Testimonials — the section is REMOVED rather than filled.
   There is intentionally no testimonial-card styling in this file at all. ---- */

/* ---------- Footer ---------- */
.ftr{background-image:var(--g-dark);color:#A9AEB3;padding-block:clamp(50px,6.4vw,96px) 0}
.ftr h4{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bronze-lt);margin-bottom:18px;font-family:var(--sans)}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(24px,3.2vw,50px)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.88rem}
.ftr a:hover{color:var(--white)}
.ftr .brand{color:var(--white);display:block;margin-bottom:16px}
.ftr .brand small{color:var(--bronze-lt)}
.ftr__bot{margin-top:clamp(34px,4.4vw,62px);border-top:1px solid rgba(247,245,241,.18);
  padding-block:22px 30px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  align-items:center;font-size:.77rem;color:#8E959B}

/* ---------- Floating contact — DISCREET, not a large green bubble.
   The register here is different from the hospitality leads in this batch and
   a shouting button would undercut the work. ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:9px;
  background:var(--charcoal);color:var(--white);padding:13px 20px;border-radius:var(--r);
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:transform .28s var(--ease),background .28s}
.fab:hover{transform:translateY(-2px);background:var(--bronze-dk)}
.fab[data-unconfirmed]{background:var(--linen);color:var(--body);border:1px dashed var(--bronze-dk)}
.fab[data-unconfirmed]:hover{background:var(--linen);color:var(--body);transform:none}

/* ---------- LGPD ---------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--white);
  border-top:1px solid var(--charcoal);padding:20px var(--gut);
  transform:translateY(112%);transition:transform .38s var(--ease)}
.ck.on{transform:none}
.ck__in{max-width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1.5fr 1fr;
  gap:22px;align-items:center}
.ck p{font-size:.86rem;margin:0}
.ck a{color:var(--bronze-dk);text-decoration:underline}
.ck__opts{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;font-size:.82rem}
.ck__opts label{display:flex;gap:8px;align-items:center}
.ck__opts input{accent-color:var(--bronze)}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}

/* ---------- Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- Legal ---------- */
.legal{max-width:880px;margin-inline:auto;padding-block:clamp(46px,6vw,94px)}
.legal h2{margin:34px 0 12px;font-size:1.6rem}
.legal h3{margin:24px 0 10px;font-size:1.2rem}
.legal ul{padding-left:20px;display:grid;gap:8px;margin-bottom:18px}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.9rem}
.legal th,.legal td{border:1px solid var(--concrete);padding:11px 13px;text-align:left;vertical-align:top}
.legal th{background:var(--linen);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--charcoal);font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
  .pgrid,.team{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat:nth-child(2n){border-right:0}
  .cat:nth-child(-n+2){border-bottom:1px solid rgba(247,245,241,.2)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .pmeta{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:60px 1fr;row-gap:14px}
  .step dl{grid-column:2}
}
@media (max-width:820px){
  .ck__in{grid-template-columns:1fr}
  .ck__btns{justify-content:flex-start}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .swatches{grid-template-columns:repeat(3,1fr)}
  .press li{grid-template-columns:1fr;row-gap:6px}
  .sec-head--row{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  body{padding-bottom:0}
  .fab{right:14px;bottom:14px;padding:11px 16px;font-size:.66rem}
  .pgrid,.team,.stats,.cats,.fr,.ftr__grid,.credits{grid-template-columns:1fr}
  .cat{border-right:0;border-bottom:1px solid rgba(247,245,241,.2)}
  .cat:last-child{border-bottom:0}
  .pmeta{grid-template-columns:1fr;gap:18px}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .top__in{justify-content:center;text-align:center}
}

/* ---------- Reduced motion — disables the parallax band, the reveals and the
              gallery drift, per the accessibility note ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  .parallax{transform:none!important}
}

/* ---------------------------------------------------- responsive tables */
/* A data table with several prose columns has a min-content width far
   wider than a phone. Without its own scroll box it widens the whole
   document and the page scrolls sideways. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}

/* ------------------------------------------------- overflow guard
   Nothing may widen the document. Form controls and replaced elements
   cap at their container; flex/grid children get min-width:0 so they
   are allowed to shrink below their content width; and the header's
   right-hand cluster wraps on a phone rather than pushing the page
   sideways. */
input,select,textarea,img,svg,video,iframe{max-width:100%}
.form,.mapwrap,.split__t,.hdr__r,.head-right{min-width:0}
.form,.mapwrap,.split__t{max-width:100%}
@media (max-width:820px){
  .hdr__r,.head-right{flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem}
}

/* ------------------------------------------- legal-header-layout
   The LGPD privacy page is generated from a shared template and uses
   .hdr__cta for its header cluster. Most stylesheets in this batch define
   .hdr__r or .head-cta instead, so on those sites the cluster had no
   layout at all - block flow, and on a long brand name it ran off the
   screen. This defines it, keeps the back-link on one line, and lets the
   row wrap before anything overflows. */
.hdr__cta,.head-cta{display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.hdr__cta .btn,.head-cta .btn{white-space:nowrap}
.hdr__cta .lang,.head-cta .lang{display:inline-flex;gap:.35rem;flex:0 0 auto}
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.55rem}
  .hdr__in>.brand,.head-in>.brand{min-width:0;max-width:100%}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
  .hdr__cta,.head-cta{width:100%;justify-content:flex-start}
}

/* ------------------------------------------- project-page-cta
   The project pages carry a wide text CTA in the header that wraps onto
   two lines at 390px. The portfolio it points at is one tap away in the
   menu, so below 560px the button comes out and the label never breaks. */
.hdr__r .btn{white-space:nowrap}
@media (max-width:560px){
  .hdr__r .btn{display:none}
}