/* ============================================================
   PRIMEWOOD FENCES — header & buttons (Oakâme-blended)
   Loaded last; overrides site.css where needed.
   ============================================================ */

/* ---------- two-tier header ---------- */
.site-header{padding:0;background:transparent;border-bottom:0}
.site-header.scrolled{background:transparent;border-bottom:0;padding:0}

/* top utility strip */
.topbar{overflow:hidden;border-bottom:1px solid rgba(255,255,255,.18);
  max-height:48px;transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .35s,border-color .4s}
.topbar__in{display:flex;align-items:center;justify-content:space-between;height:48px;gap:20px}
.topbar__tag,.topbar__meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);display:inline-flex;align-items:center;gap:.7em;white-space:nowrap}
.topbar__meta .dot{width:5px;height:5px;border-radius:50%;background:var(--wood-2)}
.lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.lang b{color:#fff;font-weight:500}
.lang span{color:rgba(255,255,255,.45)}
.lang .sep{color:rgba(255,255,255,.3)}
.site-header.scrolled .topbar{max-height:0;opacity:0;border-color:transparent}

/* main bar */
.headerbar{transition:background .4s,box-shadow .45s,margin .45s cubic-bezier(.16,1,.3,1),border-radius .45s,border-color .4s;
  border:1px solid transparent;border-radius:0}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;transition:height .4s}
.site-header.scrolled .headerbar{
  margin:12px clamp(12px,3vw,28px) 0;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-color:var(--line);border-radius:100px;
  box-shadow:0 14px 40px -22px rgba(33,30,24,.4)}
.site-header.scrolled .header__in{height:60px;padding-inline:clamp(18px,2.4vw,30px)}

/* color states */
.site-header.scrolled .brand,.site-header.scrolled .nav a,.site-header.scrolled .lang b{color:var(--ink)}
.site-header.scrolled .lang span{color:var(--ink-3)}
.site-header.scrolled .topbar__tag,.site-header.scrolled .topbar__meta{color:var(--ink-2)}
.site-header.scrolled .burger span{color:var(--ink)}

/* header utilities cluster */
.header__utils{display:flex;align-items:center;gap:18px}

/* ---------- PILL BUTTONS (label roll) ---------- */
.btn{border-radius:100px;padding:0;overflow:hidden;height:48px;line-height:1;gap:0}
.btn .btn__t{position:relative;display:block;height:1.5em;overflow:hidden;padding:0 28px}
.btn .btn__t > span{display:block;line-height:1.5em;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.btn .btn__t > span + span{position:absolute;top:100%;left:28px;right:28px}
.btn:hover .btn__t > span{transform:translateY(-100%)}
.btn--sm{height:40px;font-size:13px}
.btn--sm .btn__t{padding:0 20px}
.btn--sm .btn__t > span + span{left:20px;right:20px}
.btn--arrow{padding-right:0;display:inline-flex;align-items:center}
.btn--arrow .btn__ar{align-self:stretch;height:auto}
.btn .btn__ar{display:inline-flex;align-items:center;justify-content:center;width:46px;height:100%;flex:none;
  border-left:1px solid rgba(255,255,255,.22)}
.btn--light .btn__ar{border-left-color:rgba(33,30,24,.14)}
.btn .btn__ar svg{width:15px;height:15px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.btn:hover .btn__ar svg{transform:translateX(3px)}
.btn--arrow .btn__t{display:flex;align-items:center;justify-content:center;text-align:center}

/* header pill CTA sits on hero (light) then flips on scroll */
.header-cta{height:42px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.header-cta:hover{background:#fff;color:var(--ink);border-color:#fff}
.header-cta .btn__ar{border-left-color:rgba(255,255,255,.3)}
.header-cta:hover .btn__ar{border-left-color:rgba(33,30,24,.14)}
.site-header.scrolled .header-cta{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.site-header.scrolled .header-cta:hover{background:var(--wood);border-color:var(--wood);color:#fff}
.site-header.scrolled .header-cta .btn__ar{border-left-color:rgba(255,255,255,.22)}

@media (max-width:1200px){
  .header__utils .lang{display:none}
}
@media (max-width:1080px){
  .nav{gap:22px}
  .brand .sub{letter-spacing:.22em}
}
@media (max-width:760px){
  .topbar{display:none}
  .header__utils{display:none}
  .header__in{height:64px}
  .site-header.scrolled .headerbar{margin:8px 8px 0}
}