/* ============================================================
   O MOCHO CARPINTEIRO — Design System
   Marcenaria & tornearia artesanal · Coimbra, Portugal
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Brand palette (from 23_Codigo.Cores) */
  --green:#004225;         /* verde escuro */
  --green-800:#01351d;
  --green-900:#012718;
  --orange:#e89f31;        /* laranja  */
  --orange-600:#d8891a;
  --brown:#72450b;         /* castanho */
  --brown-soft:#8a5d24;

  /* Neutrals — warm paper */
  --paper:#faf7f1;
  --cream:#f3ede2;
  --cream-2:#ece3d4;
  --ink:#201e19;
  --muted:#6f675c;
  --line:#e3d9c8;
  --line-soft:#efe8dc;
  --white:#ffffff;

  /* Type — Arial Nova is the brand typeface (body/UI); Fraunces serif
     is used for display titles only */
  --sans:"Arial Nova","Arial","Helvetica Neue",Helvetica,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;

  /* Rhythm */
  --wrap:1280px;
  --gutter:clamp(20px,5vw,64px);
  --radius:2px;
  --radius-lg:6px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(32,30,25,.04),0 12px 40px -24px rgba(32,30,25,.25);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;font-family:var(--sans);
  color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

/* ---------- Typography scale ---------- */
.display{font-family:var(--serif);font-weight:340;line-height:1.02;letter-spacing:-.01em;
  font-optical-sizing:auto;font-variation-settings:"SOFT" 0,"WONK" 0}
.eyebrow{display:inline-flex;align-items:center;gap:.75em;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:4px}
.eyebrow::before{content:"";width:19px;height:19px;flex:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='none' stroke='%2372450b' stroke-width='30' stroke-linecap='round' stroke-linejoin='round'><path d='M78 175 C78 96 98 74 142 106 C188 136 216 150 256 150 C296 150 324 136 370 106 C414 74 434 96 434 175 L434 350 C434 420 392 452 330 452 L182 452 C120 452 78 420 78 350 Z'/><circle cx='192' cy='250' r='52'/><circle cx='320' cy='250' r='52'/><path d='M226 214 C238 232 274 232 286 214'/><circle cx='192' cy='250' r='15' fill='%2372450b' stroke='none'/><circle cx='320' cy='250' r='15' fill='%2372450b' stroke='none'/><path d='M256 292 L294 335 L256 378 L218 335 Z' fill='%2372450b' stroke='none'/></svg>") center/contain no-repeat}
.eyebrow--light{color:#e8c98f}
.eyebrow--light::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='none' stroke='%23e8c98f' stroke-width='30' stroke-linecap='round' stroke-linejoin='round'><path d='M78 175 C78 96 98 74 142 106 C188 136 216 150 256 150 C296 150 324 136 370 106 C414 74 434 96 434 175 L434 350 C434 420 392 452 330 452 L182 452 C120 452 78 420 78 350 Z'/><circle cx='192' cy='250' r='52'/><circle cx='320' cy='250' r='52'/><path d='M226 214 C238 232 274 232 286 214'/><circle cx='192' cy='250' r='15' fill='%23e8c98f' stroke='none'/><circle cx='320' cy='250' r='15' fill='%23e8c98f' stroke='none'/><path d='M256 292 L294 335 L256 378 L218 335 Z' fill='%23e8c98f' stroke='none'/></svg>")}
.lede{font-size:clamp(1.05rem,1.6vw,1.32rem);line-height:1.55;color:var(--ink)}
.muted{color:var(--muted)}
.serif{font-family:var(--serif)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,132px)}
.section--tight{padding-block:clamp(44px,6vw,80px)}
.bleed{width:100%}
.hr{height:1px;background:var(--line);border:0;margin:0}
.center{text-align:center}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce{background:var(--green);color:#f4ead6;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;overflow:hidden}
.marquee{display:flex;overflow:hidden}
.marquee__track{display:flex;flex:none;min-width:100%;animation:marquee 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;flex:none;padding-block:10px}
.marquee__group>span{padding:0 26px;white-space:nowrap}
.marquee__group b{color:var(--orange);font-weight:700}
.marquee__dot{width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}
  .marquee{justify-content:center}.marquee__group+.marquee__group{display:none}}

/* ============================================================
   HEADER
   ============================================================ */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line-soft);transition:border-color .3s,background .3s,box-shadow .3s}
.header.is-stuck{border-bottom-color:var(--line);background:rgba(255,255,255,.96);
  box-shadow:0 8px 24px -20px rgba(32,30,25,.35)}
.nav{display:flex;align-items:center;gap:24px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__mark{height:38px;width:auto}
.brand__name{display:flex;flex-direction:column;line-height:1}
.brand__name b{font-size:.95rem;letter-spacing:.14em;color:#000;font-weight:700;text-transform:uppercase}
.brand__name span{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brown);margin-top:4px}

.nav__links{display:flex;gap:6px;margin-inline:auto}
.nav__links a{position:relative;padding:10px 14px;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);font-weight:600;border-radius:2px;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1.5px;
  background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--green)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

.nav__tools{display:flex;align-items:center;gap:2px;flex:none}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--ink);
  transition:background .2s,color .2s}
.icon-btn:hover{background:var(--cream);color:var(--green)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;border-radius:8px;
  background:var(--orange);color:#3a2400;font-size:.6rem;font-weight:800;display:grid;place-items:center;padding:0 3px}
.icon-btn{position:relative}
.nav__burger{display:none}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(20,18,15,.4);opacity:0;transition:opacity .35s}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:var(--paper);
  transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;
  padding:22px;box-shadow:-20px 0 60px -30px rgba(0,0,0,.5)}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.drawer__links{margin-top:18px;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.drawer__links a{padding:18px 4px;font-size:1.4rem;font-family:var(--serif);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;color:var(--green)}
.drawer__links a span{font-size:.8rem;color:var(--muted)}
.drawer__foot{margin-top:auto;font-size:.8rem;color:var(--muted);line-height:1.7}
.drawer__foot a{color:var(--green);text-decoration:underline}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 28px;font-size:.92rem;letter-spacing:.005em;text-transform:none;font-weight:600;
  border-radius:100px;transition:transform .2s var(--ease),background .25s,color .25s,box-shadow .25s;
  will-change:transform}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--green);color:#f4ead6}
.btn--primary:hover{background:var(--green-800);box-shadow:0 14px 30px -16px rgba(0,66,37,.7)}
.btn--ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn--ghost:hover{background:var(--green);color:#f4ead6}
.btn--orange{background:var(--orange);color:#3a2400}
.btn--orange:hover{background:var(--orange-600)}
.btn--sm{padding:11px 20px;font-size:.85rem}
.btn--block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-size:.95rem;letter-spacing:0;
  text-transform:none;font-weight:600;color:var(--green);border-bottom:1.5px solid transparent;
  padding-bottom:3px;transition:border-color .25s,gap .25s}
.link-arrow:hover{border-color:var(--green);gap:.9em}
.link-arrow svg{width:15px;height:15px;transition:transform .25s}
.link-arrow:hover svg{transform:translateX(3px)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  color:#faf5ea;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.5) 74%,rgba(0,0,0,.88) 100%)}
.hero__inner{padding-bottom:clamp(44px,7vw,88px);padding-top:120px;width:100%}
.hero__eyebrow{color:#e8c98f;font-size:.9rem;letter-spacing:.01em;text-transform:none;font-weight:500;
  display:flex;align-items:center;gap:.7em;margin-bottom:22px}
.hero__eyebrow::before{content:"";width:30px;height:1px;background:#e8c98f;opacity:.8}
.hero h1{font-family:var(--serif);font-weight:330;font-size:clamp(2.7rem,7vw,6rem);line-height:.98;
  letter-spacing:-.015em;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--orange)}
.hero__sub{margin-top:24px;max-width:46ch;font-size:clamp(1rem,1.4vw,1.18rem);color:#efe3cf;line-height:1.55}
.hero__cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.hero__cta .btn--ghost{color:#faf5ea;box-shadow:inset 0 0 0 1.5px rgba(250,245,234,.6)}
.hero__cta .btn--ghost:hover{background:#faf5ea;color:var(--green)}
.hero__scroll{position:absolute;right:var(--gutter);bottom:34px;z-index:2;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:#e8c98f;writing-mode:vertical-rl;display:flex;
  align-items:center;gap:14px}
.hero__scroll::after{content:"";width:1px;height:48px;background:linear-gradient(#e8c98f,transparent);
  animation:scrollpulse 2.4s var(--ease) infinite}
@keyframes scrollpulse{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* Page hero (interior) */
.phero{padding-top:clamp(60px,8vw,110px);padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid var(--line)}
.phero__grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:clamp(24px,5vw,64px)}
.phero h1{font-family:var(--serif);font-weight:330;font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.02;
  letter-spacing:-.015em;color:var(--green);white-space:nowrap}
.phero p{max-width:34ch;color:var(--muted);text-align:right;justify-self:end}
.crumbs{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:.6em;align-items:center}
.crumbs a:hover{color:var(--green)}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.shead{display:grid;grid-template-columns:1.5fr 1fr;align-items:end;gap:clamp(24px,4vw,64px);
  margin-bottom:clamp(30px,4vw,56px)}
.shead__t{max-width:none}
.shead h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.08;
  letter-spacing:-.01em;color:var(--green);margin-top:16px;max-width:15ch}
.shead p{color:var(--muted);max-width:40ch;padding-bottom:6px;text-align:right;justify-self:end}

/* ============================================================
   INTRO STATEMENT
   ============================================================ */
.statement{text-align:center}
.statement .big{font-family:var(--serif);font-weight:330;font-size:clamp(1.7rem,3.4vw,2.85rem);
  line-height:1.18;letter-spacing:-.01em;color:var(--ink);max-width:22ch;margin-inline:auto}
.statement .big b{color:inherit;font-weight:inherit;font-style:italic}
.statement__meta{color:var(--muted);font-size:1.05rem;max-width:52ch;margin:26px auto 0}

/* ============================================================
   CATEGORY GRID ("O QUE FAZEMOS")
   ============================================================ */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.cat{background:var(--paper);padding:40px 24px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:20px;min-height:196px;transition:background .3s;position:relative}
.cat:hover{background:var(--cream)}
.cat__ico{width:56px;height:56px;color:var(--green);transition:transform .45s var(--ease)}
.cat:hover .cat__ico{transform:translateY(-5px) scale(1.04)}
.cat__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.cat h3{font-size:1.14rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;
  transition:color .25s}
.cat:hover h3{color:var(--green)}
.cat h3 svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;color:var(--brown);
  opacity:0;width:0;transition:.3s var(--ease)}
.cat:hover h3 svg{opacity:1;width:16px}

/* ============================================================
   NEXT DROP
   ============================================================ */
.drop{display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:#f2e7d2;
  margin-block:clamp(44px,5.5vw,80px)}
.drop__media{position:relative;min-height:clamp(360px,40vw,560px)}
.drop__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop__body{display:flex;align-items:center;
  padding-block:clamp(40px,5vw,72px);
  padding-left:clamp(28px,4vw,64px);
  padding-right:max(var(--gutter),calc((100vw - 1280px) / 2 + var(--gutter)))}
.drop__inner{width:100%;max-width:540px}
.drop__tag{display:inline-flex;align-items:center;gap:.6em;font-size:.9rem;letter-spacing:.01em;
  text-transform:none;font-weight:600;color:var(--orange)}
.drop__pulse{width:8px;height:8px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(232,159,49,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,159,49,.55)}70%{box-shadow:0 0 0 12px rgba(232,159,49,0)}100%{box-shadow:0 0 0 0 rgba(232,159,49,0)}}
.drop h2{font-family:var(--serif);font-weight:340;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.05;
  margin:18px 0 14px;color:#fdf6e7}
.drop p{color:#d8caae;max-width:42ch}
.dropform{margin-top:28px;max-width:440px}
.dropform__row{display:flex;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(244,234,214,.24);
  border-radius:100px;padding:6px 6px 6px 20px}
.dropform input{flex:1;background:none;border:0;color:#fdf6e7;font-size:.95rem;outline:none;min-width:0}
.dropform input::placeholder{color:#b8ab90}
.dropform .btn--orange{white-space:nowrap;padding:12px 20px}
.dropform__note{margin-top:12px;font-size:.78rem;color:#c3b590}
.dropform.is-done .dropform__row{display:none}
.dropform__ok{display:none;align-items:center;gap:12px;font-family:var(--serif);font-size:1.3rem;
  color:var(--orange);line-height:1.3}
.dropform.is-done .dropform__ok{display:flex}
.dropform__ok svg{width:30px;height:30px;flex:none}

/* ============================================================
   PORTFOLIO / OPEN GALLERY
   ============================================================ */
.pf{columns:3;column-gap:14px}
.pf__item{width:100%;break-inside:avoid;margin-bottom:14px;border-radius:var(--radius-lg);overflow:hidden;
  position:relative;background:var(--cream)}
.pf__item img{width:100%;height:auto;transition:transform .8s var(--ease),filter .5s}
.pf__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,20,12,.42));
  opacity:0;transition:opacity .4s}
.pf__item:hover img{transform:scale(1.04)}
.pf__item:hover::after{opacity:1}
.pf__cap{position:absolute;left:16px;bottom:14px;z-index:2;color:#faf5ea;font-size:.8rem;letter-spacing:.05em;
  opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.pf__item:hover .pf__cap{opacity:1;transform:none}

/* ============================================================
   MATÉRIA-PRIMA CAROUSEL
   ============================================================ */
.woods{position:relative}
.woods__viewport{overflow:hidden;cursor:grab}
.woods__viewport:active{cursor:grabbing}
.woods__track{display:flex;gap:16px;will-change:transform;
  padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  padding-right:var(--gutter)}
.wood{flex:0 0 auto;width:min(64vw,240px)}
.wood__img{aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream);
  position:relative}
.wood__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wood:hover .wood__img img{transform:scale(1.05)}
.wood__meta{padding:16px 2px 2px}
.wood__no{display:block;font-size:.72rem;color:var(--brown);letter-spacing:.06em;font-weight:600;opacity:.65}
.wood h3{font-size:1.1rem;font-weight:600;margin-top:6px}
.wood i{display:block;font-style:italic;color:var(--muted);font-size:.86rem;font-family:var(--serif);margin-top:3px}
.wood__color{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--muted)}
.wood__swatch{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);flex:none}
.woods__nav{display:flex;gap:10px}
.woods__btn{width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);
  display:grid;place-items:center;color:var(--green);background:var(--paper);transition:.25s}
.woods__btn:hover{background:var(--green);color:#f4ead6;box-shadow:inset 0 0 0 1.5px var(--green)}
.woods__btn svg{width:20px;height:20px}

/* Madeiras full grid */
.grid-madeiras{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
@media (max-width:900px){.grid-madeiras{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.grid-madeiras{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ============================================================
   ATELIER BAND
   ============================================================ */
.atelier{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,48px);align-items:center}
.atelier__imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.atelier__imgs figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream)}
.atelier__imgs img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.atelier__imgs figure:first-child{grid-row:span 2;aspect-ratio:auto}
.atelier__imgs figure:first-child img{aspect-ratio:3/4;height:100%}
.atelier__body h2{font-family:var(--serif);font-weight:340;font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.05;color:var(--green);margin:14px 0 18px}
.atelier__body p+p{margin-top:16px}
.atelier__body .link-arrow{margin-top:26px}

/* ============================================================
   SPLIT (marca / artesão on Sobre)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.split--rev .split__media{order:2}
.split__media{border-radius:var(--radius-lg);overflow:hidden;background:var(--cream)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__body h2{font-family:var(--serif);font-weight:340;font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.06;color:var(--green);margin:14px 0 20px}
.split__body p{color:#3a352d}
.split__body p+p{margin-top:16px}

.pull{font-family:var(--serif);font-weight:330;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.2;
  color:var(--green);max-width:20ch}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:8px}
.value{background:var(--cream);border-radius:var(--radius-lg);padding:clamp(34px,3.6vw,52px);
  display:flex;flex-direction:column;min-height:230px;transition:background .35s}
.value:hover{background:var(--cream-2)}
.value h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.2vw,1.9rem);
  color:var(--green);line-height:1.1;margin:0}
.value p{color:#6b6258;font-size:.98rem;line-height:1.6;margin-top:auto;padding-top:24px;max-width:32ch}

/* ============================================================
   SHOP
   ============================================================ */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-block:22px;
  border-bottom:1px solid var(--line);position:sticky;top:73px;background:rgba(250,247,241,.92);
  backdrop-filter:blur(8px);z-index:40}
.chip{padding:9px 18px;font-size:.9rem;letter-spacing:0;text-transform:none;font-weight:500;
  border-radius:100px;color:var(--muted);box-shadow:inset 0 0 0 1.4px var(--line);transition:.22s}
.chip:hover{color:var(--green);box-shadow:inset 0 0 0 1.4px var(--green)}
.chip.is-active{background:var(--green);color:#f4ead6;box-shadow:inset 0 0 0 1.4px var(--green)}
.chip .c{opacity:.6;margin-left:.4em;font-size:.9em}
.filters__count{margin-left:auto;font-size:.8rem;color:var(--muted)}

.grid-p{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px)}
.pcard{position:relative;display:flex;flex-direction:column}
.pcard__media{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--cream);margin-bottom:16px}
.pcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .5s}
.pcard__media img.b{opacity:0}
.pcard:hover .pcard__media img.a{opacity:0}
.pcard:hover .pcard__media img.b{opacity:1;transform:scale(1.04)}
.pcard__media img.only:hover{transform:scale(1.05)}
.pcard:hover .pcard__media img.only{transform:scale(1.05)}
.pcard__flag{position:absolute;top:14px;left:14px;z-index:2;background:var(--paper);color:var(--green);
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:6px 11px;border-radius:100px}
.pcard__flag--sold{background:var(--ink);color:#f4ead6}
.pcard__fav{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(250,247,241,.85);display:grid;place-items:center;color:var(--green);opacity:0;transform:translateY(-4px);
  transition:.28s}
.pcard:hover .pcard__fav{opacity:1;transform:none}
.pcard__fav svg{width:18px;height:18px}
.pcard__quick{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;opacity:0;transform:translateY(10px);
  transition:.32s var(--ease)}
.pcard:hover .pcard__quick{opacity:1;transform:none}
.pcard__type{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);font-weight:700}
.pcard h3{font-size:1.1rem;font-weight:600;margin:7px 0 4px}
.pcard__wood{font-size:.85rem;color:var(--muted);font-family:var(--serif);font-style:italic}
.pcard__price{margin-top:10px;font-size:.95rem;color:var(--ink);display:flex;align-items:baseline;gap:.5em}
.pcard__price .u{font-size:.72rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.is-hidden{display:none!important}

/* ============================================================
   INFO / ACCORDION
   ============================================================ */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 4px;text-align:left}
.acc__head h3{font-family:var(--serif);font-weight:360;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--green)}
.acc__sign{width:34px;height:34px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--line);
  display:grid;place-items:center;color:var(--green);transition:.3s}
.acc__sign svg{width:16px;height:16px;transition:transform .3s}
.acc__item.is-open .acc__sign{background:var(--green);color:#f4ead6}
.acc__item.is-open .acc__sign svg{transform:rotate(45deg)}
.acc__panel{overflow:hidden;height:0;transition:height .35s var(--ease)}
.acc__inner{padding:0 4px 28px;max-width:70ch;color:#3a352d}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.cinfo__block+.cinfo__block{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.cinfo h3{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brown);font-weight:700;margin-bottom:12px}
.cinfo a.big,.cinfo p.big{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--green);line-height:1.3}
.cinfo a.big:hover{text-decoration:underline}
.cinfo p{color:#3a352d}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--line);
  display:grid;place-items:center;color:var(--green);transition:.24s}
.socials a:hover{background:var(--green);color:#f4ead6}
.socials svg{width:19px;height:19px}

.form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3.4vw,44px);box-shadow:var(--shadow)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;font:inherit;font-size:.95rem;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,66,37,.1)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2372450b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.form__foot{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form__foot .fineprint{font-size:.78rem;color:var(--muted);max-width:34ch}
.form__ok{display:none;text-align:center;padding:20px}
.form__ok svg{width:52px;height:52px;color:var(--green);margin-bottom:16px}
.form__ok h3{font-family:var(--serif);font-size:1.7rem;color:var(--green);margin-bottom:10px}
.form.is-sent .form__grid,.form.is-sent .form__foot{display:none}
.form.is-sent .form__ok{display:block}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#fff;border-top:1px solid var(--line);color:#3a352d}
.footer__cta{background:var(--cream);border-bottom:1px solid var(--line);
  padding-block:clamp(48px,7vw,96px);text-align:center}
.footer__cta .big{font-family:var(--serif);font-weight:330;font-size:clamp(1.7rem,4vw,3rem);
  line-height:1.12;color:var(--green);max-width:20ch;margin:0 auto 26px}
.footer__main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-block:clamp(44px,6vw,72px)}
.footer__brand .brand{margin-bottom:18px}
.footer__brand p{font-size:.92rem;color:var(--muted);max-width:40ch;line-height:1.7}
.fcol h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brown);font-weight:700;margin-bottom:16px}
.fcol a,.fcol span{display:block;padding:6px 0;font-size:.92rem;color:#3a352d;transition:color .2s}
.fcol a:hover{color:var(--green)}
.fcol .strong{font-family:var(--serif);font-size:1.05rem;color:var(--green)}
.badge-craft{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius-lg)}
.badge-craft img{width:52px;height:52px;object-fit:contain;border-radius:4px;flex:none}
.badge-craft div{font-size:.78rem;line-height:1.4}
.badge-craft b{color:var(--green)}
.footer__bar{border-top:1px solid var(--line);padding-block:22px;display:flex;justify-content:space-between;
  align-items:center;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.footer__bar nav{display:flex;gap:20px;flex-wrap:wrap}
.footer__bar a:hover{color:var(--green)}
.footer__pay{display:flex;align-items:center;gap:8px}
.footer__pay span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .footer__main{grid-template-columns:1fr 1fr;gap:32px}
  .footer__brand{grid-column:1/-1}
  .pf{columns:2}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__tools{margin-left:auto}
  .nav__burger{display:grid}
  .brand__name{display:none}
  .drop{grid-template-columns:1fr}
  .drop__media{min-height:280px;order:-1}
  .drop__body{padding-left:var(--gutter);padding-right:var(--gutter)}
  .drop__inner{max-width:none}
  .atelier{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:28px}
  .split--rev .split__media{order:0}
  .grid-p{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .phero__grid{grid-template-columns:1fr}
  .phero h1{white-space:normal}
  .phero p{text-align:left;justify-self:start;margin-top:4px}
  .filters{top:65px}
  .shead{grid-template-columns:1fr;align-items:start;gap:16px}
  .shead h2{max-width:20ch}
  .shead p{text-align:left;justify-self:start}
}
@media (max-width:560px){
  :root{--gutter:20px}
  .nav{min-height:64px}
  .brand__mark{height:32px}
  .form__grid{grid-template-columns:1fr}
  .pf{columns:1}
  .grid-p{grid-template-columns:1fr 1fr;gap:12px}
  .pcard h3{font-size:1rem}
  .footer__main{grid-template-columns:1fr}
  .hero__scroll{display:none}
  .btn{padding:12px 22px}
}