/* =========================================================================
   CONSERVIA — Design System
   Conservação & Engenharia · institucional, sóbrio, técnico
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&display=swap');

/* ----------------------------------------------------------------- TOKENS */
:root{
  /* Brand + warm-neutral palette */
  --ink:        #1B1C18;   /* warm near-black, primary text   */
  --ink-soft:   #43443C;   /* secondary text                  */
  --muted:      #74746A;   /* captions / meta                 */
  --paper:      #F4EFE7;   /* warm off-white, light sections  */
  --paper-2:    #ECE4D6;   /* slightly deeper paper           */
  --white:      #FFFFFF;
  --line:       #DCD4C5;   /* hairline border (warm)          */
  --line-soft:  #E6DFD2;

  --green:      #1E5941;   /* CONSERVIA brand green (anchor)  */
  --green-700:  #194B38;
  --green-800:  #143C2C;   /* dark section base               */
  --green-900:  #0F2D21;   /* deepest forest                  */
  --green-line: #2E6A51;   /* hairline on dark                */

  --gold:       #BD9748;   /* CONSERVIA brand gold (excellence accent) */
  --gold-bright:#CBA85C;
  --gold-soft:  #D9C08A;   /* gold legible on dark            */

  /* Typography */
  --font:  "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Labels/eyebrows now use the grotesque (tracked uppercase) — no monospace */
  --mono:  "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --label-ls: .18em;

  --fs-mega: clamp(3.75rem, 11vw, 11rem);   /* hero numbers/words */
  --fs-h1:   clamp(2.6rem, 5.4vw, 5.25rem);
  --fs-h2:   clamp(2rem, 3.8vw, 3.5rem);
  --fs-h3:   clamp(1.45rem, 2.1vw, 2.1rem);
  --fs-h4:   clamp(1.2rem, 1.5vw, 1.45rem);
  --fs-lead: clamp(1.18rem, 1.7vw, 1.7rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.9375rem;
  --fs-label:0.75rem;

  /* Space */
  --gap: clamp(1.5rem, 4vw, 4rem);
  --pad-x: clamp(1.25rem, 5vw, 6.5rem);
  --sec-y: clamp(5rem, 11vw, 11rem);
  --maxw: 1480px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------- RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.58;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family:inherit; }
::selection{ background:var(--green); color:var(--paper); }

/* ----------------------------------------------------------------- TYPE */
.display{
  font-weight:700;
  line-height:.98;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.02; letter-spacing:-.02em; text-wrap:balance; }
.h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.05; letter-spacing:-.018em; text-wrap:balance; }
.h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.12; letter-spacing:-.012em; }
.h4{ font-size:var(--fs-h4); font-weight:600; line-height:1.2; letter-spacing:-.008em; }
.lead{ font-size:var(--fs-lead); line-height:1.32; letter-spacing:-.01em; color:var(--ink-soft); font-weight:400; text-wrap:pretty; }
.body-lg{ font-size:1.1875rem; line-height:1.55; }
.muted{ color:var(--muted); }

/* Mono technical label — the "concretude" voice */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--green);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  background:var(--gold);
  flex:none;
  transform:rotate(45deg);
}
.eyebrow--plain::before{ display:none; }
.on-dark .eyebrow, .eyebrow.on-dark{ color:var(--gold-soft); }

.mono{ font-family:var(--mono); letter-spacing:.02em; }
.mono-meta{
  font-family:var(--mono);
  font-size:var(--fs-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Big number / stat */
.statnum{
  font-weight:600;
  font-size:var(--fs-mega);
  line-height:.86;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.statnum .u{ font-size:.34em; font-weight:500; letter-spacing:-.01em; vertical-align:baseline; }
.statnum .pre{ font-size:.42em; font-weight:500; vertical-align:.55em; margin-right:.04em; }

/* ----------------------------------------------------------------- LAYOUT */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(3rem,6vw,6rem); }

.bg-paper{ background:var(--paper); color:var(--ink); }
.bg-paper-2{ background:var(--paper-2); color:var(--ink); }
.bg-white{ background:var(--white); color:var(--ink); }
.bg-green{ background:var(--green); color:var(--paper); }
.bg-dark{ background:var(--green-800); color:var(--paper); }
.bg-deep{ background:var(--green-900); color:var(--paper); }
.on-dark{ color:var(--paper); }
.on-dark .muted,.on-dark .lead{ color:#C9D3CB; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.on-dark .rule, .rule--dark{ background:var(--green-line); }

/* ----------------------------------------------------------------- BUTTONS */
.btn{
  --bg:var(--green); --fg:var(--paper); --bd:var(--green);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--mono);
  font-size:.8125rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:1.05em 1.6em;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover{ background:var(--green-900); border-color:var(--green-900); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--gold{ --bg:#A67D27; --fg:#FFFFFF; --bd:#A67D27; font-weight:600; }
.btn--gold:hover{ background:#8E6A1C; border-color:#8E6A1C; color:#FFFFFF; }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.on-dark .btn--ghost,.btn--ghost.on-dark{ --fg:var(--paper); --bd:var(--green-line); }
.on-dark .btn--ghost:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); }

/* ----------------------------------------------------------------- TAGS */
.tag{
  font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.14em; text-transform:uppercase;
  padding:.5em .85em; border:1px solid var(--line);
  color:var(--ink-soft); display:inline-flex; align-items:center; gap:.55em;
}
.tag--gold{ border-color:var(--gold); color:var(--green); }
.on-dark .tag{ border-color:var(--green-line); color:#C9D3CB; }

/* ----------------------------------------------------------------- PHOTO PLACEHOLDER */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, #2a2f25 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #3a4232, #232a1f);
  color:#cdd3c4;
}
.ph__tag{
  position:absolute; left:14px; bottom:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#cdd3c4; opacity:.9;
}
.img-cover{ width:100%; height:100%; object-fit:cover; }
.figcap{
  font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-top:.85rem; display:flex; gap:.7em; align-items:baseline;
}
.figcap::before{ content:""; width:18px; height:1px; background:var(--gold); display:inline-block; transform:translateY(-4px); }

/* ----------------------------------------------------------------- REVEAL (motion) */
/* Opacity flips INSTANTLY (never depends on a transition completing, so content
   can never get stuck invisible); only TRANSFORM is animated for the motion. */
html.js .reveal{ opacity:0; transform:translateY(26px); }
html.js .reveal.is-in{ opacity:1; transform:none; transition:transform .9s var(--ease); }
html.js .reveal-d1.is-in{ transition-delay:.08s; }
html.js .reveal-d2.is-in{ transition-delay:.16s; }
html.js .reveal-d3.is-in{ transition-delay:.24s; }
html.js .reveal-d4.is-in{ transition-delay:.32s; }

html.js .clip{ opacity:0; transform:scale(1.045); }
html.js .clip.is-in{ opacity:1; transform:none; transition:transform 1.1s var(--ease); }

@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js .clip{ opacity:1!important; transform:none!important; }
  html{ scroll-behavior:auto; }
}

/* ----------------------------------------------------------------- MENU TRIGGER */
.menu-btn{
  display:inline-flex; align-items:center; gap:.7rem; cursor:pointer;
  background:none; border:0; padding:.4rem 0; color:inherit;
  font-family:var(--font); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.menu-btn .bars{ display:inline-flex; flex-direction:column; gap:4px; width:24px; }
.menu-btn .bars i{ height:1.5px; width:100%; background:currentColor; display:block; transition:transform .4s var(--ease); }
.menu-btn:hover .bars i:first-child{ transform:translateX(4px); }

/* ----------------------------------------------------------------- OVERLAY MENU (pieterkoopt-style) */
.overlay{
  position:fixed; inset:0; z-index:120; background:var(--green-900); color:var(--paper);
  display:grid; grid-template-columns:1.35fr .65fr; 
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .8s var(--ease);
}
.overlay.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
@media(max-width:860px){ .overlay{ grid-template-columns:1fr; } }
.overlay__head{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:1.1rem var(--pad-x); }
.overlay__head .brand{ display:flex; align-items:center; gap:.75rem; color:var(--paper); text-decoration:none; }
.overlay__head .brand img{ width:48px; height:48px; flex:none; }
.overlay__head .brand__txt{ display:flex; flex-direction:column; }
.overlay__head .brand__name{ font-weight:700; letter-spacing:.16em; font-size:.95rem; }
.overlay__head .brand__sub{ font-size:.58rem; font-weight:500; letter-spacing:.24em; color:var(--gold-soft); margin-top:.3em; }
@media(max-width:600px){ .overlay__head .brand img{ width:40px; height:40px; } .overlay__head .brand__name{ font-size:.85rem; } }
.overlay__close{ background:none; border:0; cursor:pointer; color:var(--paper); font-family:var(--font); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:.6rem; }
.overlay__close .x{ position:relative; width:18px; height:18px; }
.overlay__close .x::before,.overlay__close .x::after{ content:""; position:absolute; top:50%; left:0; width:100%; height:1.5px; background:currentColor; }
.overlay__close .x::before{ transform:rotate(45deg); } .overlay__close .x::after{ transform:rotate(-45deg); }
.overlay__nav{ align-self:center; padding:6rem var(--pad-x) 3rem; }
.overlay__nav ol{ list-style:none; margin:0; padding:0; }
.overlay__nav li{ border-top:1px solid var(--green-line); }
.overlay__nav li:last-child{ border-bottom:1px solid var(--green-line); }
.overlay__nav a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:1.4rem;
  padding:clamp(.7rem,1.6vw,1.15rem) 0; color:var(--paper);
  transition:padding-left .4s var(--ease), color .3s;
}
.overlay__nav a:hover{ padding-left:1.2rem; color:var(--gold-soft); }
.overlay__nav .idx{ font-size:.72rem; font-weight:600; letter-spacing:.12em; color:var(--gold-soft); }
.overlay__nav .ttl{ font-size:clamp(2rem,4.6vw,3.5rem); font-weight:700; letter-spacing:-.02em; line-height:1; }
.overlay__nav .desc{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:#9FB0A2; }
.overlay__aside{ position:relative; overflow:hidden; }
.overlay__aside img{ width:100%; height:100%; object-fit:cover; }
.overlay__aside::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,45,33,.2),rgba(15,45,33,.85)); }
.overlay__contact{ position:absolute; z-index:2; left:0; bottom:0; padding:2rem var(--pad-x); }
.overlay__contact .lbl{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); }
.overlay__contact .val{ font-size:1.3rem; font-weight:600; margin-top:.4rem; }
@media(max-width:860px){ .overlay__aside{ display:none; } .overlay__nav{ padding-top:7rem; } }
body.menu-open{ overflow:hidden; }

/* ----------------------------------------------------------------- FAQ ACCORDION (beatushoehlen-style) */
.acc{ border-top:1px solid var(--line); }
.on-dark .acc, .acc--dark{ border-color:var(--green-line); }
.acc__item{ border-bottom:1px solid var(--line); }
.on-dark .acc__item,.acc--dark .acc__item{ border-color:var(--green-line); }
.acc__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; color:inherit;
  display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:center;
  padding:clamp(1.2rem,2.4vw,1.9rem) 0; font-family:var(--font);
  font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:600; letter-spacing:-.01em; line-height:1.25;
}
.acc__ico{ position:relative; width:20px; height:20px; flex:none; }
.acc__ico::before,.acc__ico::after{ content:""; position:absolute; top:50%; left:0; width:100%; height:2px; background:var(--gold); transition:transform .4s var(--ease); }
.acc__ico::after{ transform:rotate(90deg); }
.acc__item.open .acc__ico::after{ transform:rotate(0); }
.acc__a{ overflow:hidden; max-height:0; transition:max-height .5s var(--ease); }
.acc__a .inner{ padding:0 0 clamp(1.2rem,2vw,1.8rem); max-width:64ch; color:var(--muted); font-size:1.0625rem; line-height:1.6; }
.on-dark .acc__a .inner{ color:#CBD5CB; }

/* ----------------------------------------------------------------- HERO VIDEO -> PHOTO TRANSITION */
.hero__vid{ opacity:1; transition:opacity 1s var(--ease); }
.hero__media.to-photo .hero__vid{ opacity:0; }
.hero__sweep{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:linear-gradient(90deg, transparent, rgba(217,192,138,.5), transparent); transform:translateX(-120%); }
.hero__media.to-photo .hero__sweep{ animation:sweep 1s var(--ease) forwards; }
@keyframes sweep{ 0%{opacity:1; transform:translateX(-120%);} 100%{opacity:0; transform:translateX(120%);} }

/* ----------------------------------------------------------------- MASCOT FRAME */
.mascot{ position:relative; border:1px solid var(--line); overflow:hidden; }
.on-dark .mascot,.mascot--dark{ border-color:var(--green-line); }
.mascot img{ width:100%; height:100%; object-fit:cover; }
.mascot__tag{ position:absolute; left:1rem; bottom:1rem; z-index:2; font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--paper); background:rgba(15,45,33,.78); padding:.5em .85em; }

/* ----------------------------------------------------------------- SERVICE LIST (numbered) */
.svc{ list-style:none; margin:0; padding:0; }
.svc li{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid var(--line);
  transition:padding-left .4s var(--ease), color .3s var(--ease); }
.svc li:last-child{ border-bottom:1px solid var(--line); }
.svc li:hover{ padding-left:.6rem; color:var(--green); }
.svc .n{ font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.12em; color:var(--gold); font-variant-numeric:tabular-nums; }
.svc .t{ font-size:1.04rem; letter-spacing:-.005em; }
.on-dark .svc li,.svc--dark li{ border-color:var(--green-line); }
.on-dark .svc li:hover,.svc--dark li:hover{ color:var(--gold-soft); }

/* ----------------------------------------------------------------- FORM CONTROLS */
.form{ display:grid; gap:1.15rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media(max-width:560px){ .form__row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.field > label{ font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:.5em; }
.field > label .opt{ color:var(--muted); font-weight:500; letter-spacing:.1em; }
.control{
  font-family:var(--font); font-size:1rem; line-height:1.4; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:0;
  padding:.95em 1.05em; width:100%; -webkit-appearance:none; appearance:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.control::placeholder{ color:var(--muted); }
.control:hover{ border-color:var(--line); background:#FFFDFA; }
.control:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(30,89,65,.13); background:var(--white); }
.control:user-invalid{ border-color:#A2503A; box-shadow:0 0 0 3px rgba(162,80,58,.12); }
textarea.control{ resize:vertical; min-height:120px; }
select.control{
  cursor:pointer; padding-right:2.8em;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E5941' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.05em center;
}
select.control:invalid{ color:var(--muted); }
.form__note{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--muted); line-height:1.5; }
.form__success{ display:none; }
.form.is-sent .form__grid{ display:none; }
.form.is-sent .form__success{ display:block; }