/* ============================================================
   KINARA TIMBER — Premium redesign
   Dark architectural luxury · Marcellus + Jost · charcoal / brass / cream
   ============================================================ */

/* ---- Tokens ---------------------------------------------- */
:root{
  --ink:#14110d;
  --ink-2:#1b1711;
  --ink-3:#231e17;
  --cream:#f1eae0;
  --cream-2:#e7ddcd;
  --paper:#faf6ee;
  --brass:#bd9f63;
  --brass-2:#d8bd86;
  --brass-deep:#9c7f47;
  --text:#2a241c;
  --text-mut:#6c6253;
  --on-dark:#ece4d6;
  --on-dark-mut:#9b917f;
  --line-d:rgba(190,159,99,.22);
  --line-l:rgba(42,36,28,.14);

  --font-display:'Marcellus', serif;
  --font-body:'Jost', sans-serif;
  --font-italic:'Cormorant Garamond', serif;

  --maxw:1280px;
  --pad:clamp(1.4rem,5vw,5rem);
  --sec:clamp(5.5rem,11vw,9.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ----------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.08;letter-spacing:.005em}

/* ---- Shared atoms ---------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--brass-deep);
  display:inline-flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);display:inline-block}
.on-dark .eyebrow{color:var(--brass-2)}

.h-display{font-size:clamp(2.4rem,5.2vw,4.4rem)}
.h-section{font-size:clamp(2.1rem,4.2vw,3.5rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.75;color:var(--text-mut);font-weight:300}
.on-dark .lead{color:var(--on-dark-mut)}

.btn{
  --bc:var(--ink);
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-body);font-weight:400;font-size:.82rem;
  letter-spacing:.2em;text-transform:uppercase;
  padding:1.05rem 2.1rem;
  border:1px solid var(--bc);
  color:var(--ink);background:transparent;
  cursor:pointer;transition:.45s var(--ease);position:relative;
}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover .ar{transform:translateX(5px)}
.btn-solid{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.btn-solid:hover{background:var(--brass-2);border-color:var(--brass-2);color:var(--ink)}
.btn-ghost-light{--bc:rgba(236,228,214,.45);color:var(--on-dark)}
.btn-ghost-light:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:1.35rem;
  transition:.5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand img{height:64px;width:auto;transition:.5s var(--ease)}
.brand .logo-dark{display:none}
.nav{display:flex;align-items:center;gap:2.4rem}
.nav a{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark);font-weight:400;position:relative;padding-block:.3rem;
}
.nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brass);transition:width .4s var(--ease)
}
.nav a:not(.nav-cta):hover::after{width:100%}
.nav-cta{
  border:1px solid rgba(236,228,214,.4);padding:.7rem 1.3rem;color:var(--on-dark);
  transition:.4s var(--ease)
}
.nav-cta:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}

.site-header.solid{
  background:rgba(20,17,13,.92);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line-d);
  padding-block:.85rem;
}
.site-header.solid .brand img{height:46px}

.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:28px;height:1.5px;background:var(--on-dark);transition:.3s var(--ease)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(95deg,rgba(15,13,10,.94) 0%,rgba(15,13,10,.72) 36%,rgba(15,13,10,.30) 68%,rgba(15,13,10,.46) 100%),
    linear-gradient(0deg,rgba(15,13,10,.92) 2%,rgba(15,13,10,.05) 46%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(3rem,7vh,6rem);padding-top:9rem}
.hero__inner .wrap{width:100%}
.hero h1{
  color:var(--paper);
  font-size:clamp(2.9rem,7.4vw,6.4rem);
  line-height:1.02;letter-spacing:-.01em;
  max-width:15ch;margin-top:1.6rem;
}
.hero h1 em{font-style:normal;color:var(--brass-2)}
.hero .tagline{
  font-family:var(--font-italic);font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  color:var(--cream);margin-top:1.7rem;
}
.hero p.sub{max-width:46ch;margin-top:1.3rem;color:rgba(236,228,214,.82);font-size:clamp(1rem,1.3vw,1.15rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem}
.hero__guarantee{display:flex;align-items:center;gap:.6rem;margin-top:1.4rem;font-size:.82rem;color:rgba(236,228,214,.65)}
.hero__guarantee svg{width:16px;height:16px;stroke:var(--brass-2);flex-shrink:0}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:clamp(2.5rem,5vh,4.2rem);
  padding-top:1.8rem;border-top:1px solid rgba(236,228,214,.16);
}
.hero__meta span{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,228,214,.62)}
.hero__meta span b{color:var(--brass-2);font-weight:500}
.scroll-cue{
  position:absolute;right:var(--pad);bottom:clamp(3rem,7vh,6rem);z-index:3;
  writing-mode:vertical-rl;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(236,228,214,.6);display:flex;align-items:center;gap:1rem
}
.scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(var(--brass),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){.scroll-cue{display:none}}

/* ============================================================
   INTRO
   ============================================================ */
.intro{background:var(--cream)}
.intro__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.intro__copy h2{margin:1.6rem 0 1.8rem;font-size:clamp(1.9rem,3.4vw,3rem);max-width:18ch}
.intro__copy p{margin-bottom:1.3rem;color:var(--text-mut);max-width:54ch}
.intro__copy p strong{color:var(--text);font-weight:400}
.pull{
  font-family:var(--font-italic);font-style:italic;font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.35;color:var(--text);margin:2.2rem 0;padding-left:1.8rem;
  border-left:2px solid var(--brass);font-weight:500;
}
.intro__media{position:relative}
.intro__media img{width:100%;height:clamp(420px,62vh,640px);object-fit:cover}
.intro__media .tag{
  position:absolute;left:-1px;bottom:-1px;background:var(--ink);color:var(--on-dark);
  padding:1.1rem 1.6rem;max-width:62%;
}
.intro__media .tag b{display:block;font-family:var(--font-display);color:var(--brass-2);font-size:1.15rem;letter-spacing:.02em}
.intro__media .tag span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mut)}

/* ============================================================
   SECTION HEAD (shared)
   ============================================================ */
.shead{max-width:var(--maxw);margin-inline:auto}
.shead--center{text-align:center;max-width:760px;margin-inline:auto}
.shead--center .eyebrow{justify-content:center}
.shead h2{margin-top:1.3rem}
.shead p{margin-top:1.2rem}
.shead--split{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
@media(max-width:820px){.shead--split{grid-template-columns:1fr}}

/* ============================================================
   SERVICES  (light, numbered hairline grid)
   ============================================================ */
.services{background:var(--paper)}
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line-l)}
.svc{padding:2.6rem 2rem 2.6rem 0;border-right:1px solid var(--line-l);position:relative}
.svc:last-child{border-right:0}
.svc{padding-inline:2rem}
.svc:first-child{padding-left:0}
.svc__no{font-family:var(--font-display);font-size:.95rem;color:var(--brass-deep);letter-spacing:.1em}
.svc h3{font-size:1.45rem;margin:1.4rem 0 .9rem;white-space:nowrap}
.svc p{font-size:.95rem;color:var(--text-mut)}
.svc__icn{width:30px;height:30px;margin-top:1.6rem;color:var(--brass-deep)}
.svc__icn svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.2}
@media(max-width:980px){.services__grid{grid-template-columns:1fr 1fr}.svc{border-bottom:1px solid var(--line-l)}.svc:nth-child(2){border-right:0}.svc:nth-child(odd){padding-left:0}.svc:nth-child(even){padding-right:0;padding-left:2rem}}
@media(max-width:560px){.services__grid{grid-template-columns:1fr}.svc{border-right:0!important;padding:2rem 0!important}}

/* ============================================================
   WHY  (dark band, image + stacked points)
   ============================================================ */
.why{background:var(--ink);color:var(--on-dark);position:relative}
.why__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
.why__media{position:relative;align-self:stretch;min-height:420px}
.why__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.why__media .frame{position:absolute;inset:14px;border:1px solid rgba(236,228,214,.28);pointer-events:none}
.why__list{display:flex;flex-direction:column}
.why__item{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.8rem 0;border-top:1px solid var(--line-d)}
.why__item:last-child{border-bottom:1px solid var(--line-d)}
.why__item .no{font-family:var(--font-display);color:var(--brass-2);font-size:1.1rem}
.why__item h3{font-size:1.4rem;margin-bottom:.6rem;color:var(--cream)}
.why__item p{color:var(--on-dark-mut);font-size:.97rem;max-width:48ch}
@media(max-width:860px){.why__grid{grid-template-columns:1fr}.why__media{min-height:340px}}

/* ============================================================
   PRODUCTS  (collection gallery)
   ============================================================ */
.products{background:var(--cream)}
.coll{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.4vw,2.2rem);margin-top:clamp(3rem,6vw,4.5rem)}
.wood{position:relative;overflow:hidden;background:var(--ink);cursor:default}
.wood__img{aspect-ratio:4/5;overflow:hidden}
.wood__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.wood:hover .wood__img img{transform:scale(1.07)}
.wood__cap{position:absolute;inset:auto 0 0 0;padding:1.5rem;background:linear-gradient(0deg,rgba(15,13,10,.9) 8%,transparent);color:var(--on-dark)}
.wood__cap .row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.wood__cap h3{color:var(--paper);font-size:1.6rem}
.wood__cap .lat{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-2)}
.wood__cap p{font-size:.86rem;color:rgba(236,228,214,.78);margin-top:.5rem;max-height:0;opacity:0;overflow:hidden;transition:.55s var(--ease)}
.wood:hover .wood__cap p{max-height:6rem;opacity:1;margin-top:.7rem}
@media(max-width:900px){.coll{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.coll{grid-template-columns:1fr}.wood__cap p{max-height:6rem;opacity:1;margin-top:.7rem}}

/* ============================================================
   EXPERTISE  (alternating editorial rows)
   ============================================================ */
.expertise{background:var(--paper)}
.exrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line-l)}
.exrow:first-of-type{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line-l)}
.exrow__media{position:relative;overflow:hidden}
.exrow__media img{width:100%;height:clamp(340px,52vh,560px);object-fit:cover;transition:transform 1.1s var(--ease)}
.exrow:hover .exrow__media img{transform:scale(1.05)}
.exrow__no{position:absolute;top:0;left:0;background:var(--brass);color:var(--ink);font-family:var(--font-display);font-size:1.1rem;padding:.5rem 1.1rem}
.exrow:nth-child(even) .exrow__media{order:2}
.exrow__copy h3{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:.4rem}
.exrow__copy .place{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:1.4rem;display:block}
.exrow__copy .desc{color:var(--text-mut);margin-bottom:1.8rem;max-width:48ch}
.exrow__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.exrow__cols h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text);margin-bottom:.9rem;font-family:var(--font-body);font-weight:500}
.exrow__cols ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.exrow__cols li{font-size:.9rem;color:var(--text-mut);padding-left:1.3rem;position:relative;line-height:1.5}
.exrow__cols .risks li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border:1px solid var(--text-mut);transform:rotate(45deg)}
.exrow__cols .appr li::before{content:"✦";position:absolute;left:0;top:0;color:var(--brass-deep);font-size:.7rem}
@media(max-width:820px){.exrow{grid-template-columns:1fr;gap:1.8rem}.exrow:nth-child(even) .exrow__media{order:0}.exrow__cols{gap:1.4rem}}

/* ============================================================
   PROJECTS  (mosaic)
   ============================================================ */
.projects{background:var(--ink);color:var(--on-dark)}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:clamp(.8rem,1.4vw,1.2rem);margin-top:clamp(3rem,6vw,4.5rem)}
.mtile{position:relative;overflow:hidden}
.mtile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mtile:hover img{transform:scale(1.06)}
.mtile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,13,10,.55),transparent 55%);opacity:0;transition:.5s var(--ease)}
.mtile:hover::after{opacity:1}
.mtile .cap{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.mtile:hover .cap{opacity:1;transform:none}
.mtile .cap b{display:block;font-family:var(--font-display);color:var(--paper);font-size:1.2rem}
.mtile .cap span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-2)}
.t-a{grid-column:span 4;grid-row:span 2}
.t-b{grid-column:span 2;grid-row:span 2}
.t-c{grid-column:span 2;grid-row:span 2}
.t-d{grid-column:span 2;grid-row:span 2}
.t-e{grid-column:span 2;grid-row:span 2}
@media(max-width:760px){.mosaic{grid-template-columns:1fr 1fr}.t-a,.t-b,.t-c,.t-d,.t-e{grid-column:span 1;grid-row:span 1;aspect-ratio:1}.t-a{grid-column:span 2;aspect-ratio:16/10}}

/* ============================================================
   TEAM
   ============================================================ */
.team{background:var(--cream)}
.team__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);margin-top:clamp(3rem,6vw,4.5rem)}
.member{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.member__photo{width:clamp(150px,18vw,210px);aspect-ratio:3/3.4;background:var(--cream-2);overflow:hidden;position:relative}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.member__photo::after{content:"";position:absolute;inset:0;border:1px solid var(--line-l)}
.member h3{font-size:1.7rem}
.member .role{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);margin:.5rem 0 1.1rem}
.member p{font-family:var(--font-italic);font-style:italic;font-size:1.15rem;color:var(--text-mut);line-height:1.5}
@media(max-width:560px){.member{grid-template-columns:1fr;text-align:left}}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--ink-2);color:var(--on-dark);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background:url('img/wood-merbau.jpg') center/cover;opacity:.06;z-index:0}
.contact .wrap{position:relative;z-index:1}
.contact__top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:end}
.contact h2{margin-top:1.3rem;font-size:clamp(2.2rem,4.5vw,3.6rem);max-width:16ch}
.contact__lead{margin-top:1.3rem}
.contact__cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-start}
@media(min-width:821px){.contact__cta{justify-content:flex-end}}
.contact__channels{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);margin-top:clamp(3rem,6vw,4.5rem);border:1px solid var(--line-d)}
.chan{background:var(--ink-2);padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;transition:.45s var(--ease)}
.chan:hover{background:var(--ink-3)}
.chan__ic{width:26px;height:26px;color:var(--brass-2);margin-bottom:.6rem}
.chan__ic svg{width:100%;height:100%;fill:currentColor}
.chan span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mut)}
.chan b{font-family:var(--font-display);font-weight:400;font-size:1.2rem;color:var(--cream)}
.contact__locs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-top:0}
.loc{background:var(--ink-2);padding:1.8rem;display:flex;gap:1.1rem;align-items:flex-start;transition:.45s var(--ease)}
.loc:hover{background:var(--ink-3)}
.loc__ic{width:22px;height:22px;color:var(--brass-2);flex:none;margin-top:.2rem}
.loc__ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
.loc span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2)}
.loc b{font-family:var(--font-display);font-weight:400;font-size:1.05rem;color:var(--cream);display:block;margin:.3rem 0 .4rem}
.loc p{font-size:.86rem;color:var(--on-dark-mut);line-height:1.5}
@media(max-width:820px){.contact__top{grid-template-columns:1fr}.contact__channels{grid-template-columns:1fr}.contact__locs{grid-template-columns:1fr;border-top:1px solid var(--line-d)}}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:var(--on-dark-mut);padding-top:clamp(4rem,7vw,6rem)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3.5rem;border-bottom:1px solid var(--line-d)}
.foot__brand img{height:78px;margin-bottom:1.4rem}
.foot__brand p{max-width:38ch;font-size:.92rem}
.foot__brand .tl{font-family:var(--font-italic);font-style:italic;color:var(--brass-2);margin-top:1rem;font-size:1.1rem}
.foot__col h4{font-family:var(--font-body);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);margin-bottom:1.3rem}
.foot__col a{display:block;font-size:.92rem;margin-bottom:.7rem;transition:color .3s}
.foot__col a:hover{color:var(--brass-2)}
.foot__bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding-block:1.8rem;font-size:.78rem;letter-spacing:.06em}
@media(max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ============================================================
   MOBILE NAV
   ============================================================ */
@media(max-width:940px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(82vw,360px);background:var(--ink);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.8rem;
    padding:3rem;transform:translateX(100%);transition:transform .5s var(--ease);z-index:120;border-left:1px solid var(--line-d)}
  .nav.open{transform:none}
  .nav a{font-size:1rem}
  .burger{display:flex;z-index:130}
  .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* to-top */
.totop{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  width:46px;height:46px;border:1px solid var(--line-d);background:rgba(20,17,13,.8);color:var(--brass-2);
  backdrop-filter:blur(8px);cursor:pointer;opacity:0;transform:translateY(12px);transition:.45s var(--ease);font-size:1rem}
.totop.show{opacity:1;transform:none}
.totop:hover{background:var(--brass);color:var(--ink);border-color:var(--brass)}