

:root{

  --bar-h:70px;

  --hero-inset:24px;

  --nav-shift:clamp(0px,6vw,110px);
}

.header{
  position:sticky;top:0;z-index:50;
  background:var(--c-ivory);
  color:var(--c-graphite);
  transition:background-color .35s ease,color .35s ease,box-shadow .3s ease;
}
.header__inner{
  position:relative;
  max-width:none;
  padding:0 var(--hero-inset);
  transition:max-width .35s ease,margin .35s ease,padding .35s ease,
             background-color .35s ease,border-radius .35s ease,box-shadow .35s ease;
}
.header__bar{
  display:flex;align-items:center;gap:var(--sp-3);
  height:var(--bar-h);

  transition:height .35s ease;
}

.header__inner::after{
  content:"";
  position:absolute;left:var(--hero-inset);right:var(--hero-inset);bottom:0;
  height:1px;background:var(--c-line);
  transition:background-color .35s ease,opacity .35s ease;
}

.header--scrolled{background:transparent;box-shadow:none}
.header--scrolled .header__inner{
  max-width:var(--container);
  margin:10px auto;
  padding:0 var(--sp-3);
  background:rgba(245,240,228,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(28,22,16,.16);
}

.header--scrolled .header__inner::after{opacity:0}
.header--scrolled .header__bar{height:calc(var(--bar-h) - 8px)}

.header--scrolled{--nav-shift:0px}
.header--scrolled .header__addr{display:none}

.header--over:not(.header--scrolled){

  background:rgba(10,14,22,.36);
  color:var(--c-on-dark);
  box-shadow:none;
}
.header--over:not(.header--scrolled) .header__inner::after{
  background:rgba(198,147,75,.75);
}

@media (min-width:900px) and (min-aspect-ratio:11/10){
  .header--over:not(.header--scrolled){--bar-h:80.5px}
  .header--over:not(.header--scrolled) .brand__mark{height:calc(var(--bar-h) - 30px)}

  .header--over:not(.header--scrolled){
    background:
      linear-gradient(90deg,
        rgba(10,14,22,0) 55%,
        rgba(10,14,22,.30) 100%),
      rgba(10,14,22,.36);
  }

  .header--over:not(.header--scrolled) .header__addr{
    padding:7px 12px;
    border-radius:var(--radius-s);
    background:rgba(10,14,22,.70);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
  }
}

.brand{
  display:flex;align-items:center;gap:10px;
  min-width:0;flex:0 0 auto;
}
.brand__mark{flex:0 0 auto;display:block;height:calc(var(--bar-h) - 26px)}
.brand__mark img{display:block;height:100%;width:auto}

.brand__mark img.brand__mark--gold{display:none}
.header--over:not(.header--scrolled) .brand__mark img.brand__mark--gold{display:block}
.header--over:not(.header--scrolled) .brand__mark img.brand__mark--ink{display:none}

.brand__text{display:flex;flex-direction:column;gap:3px;min-width:0}

.brand__name{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(.95rem,1.25vw,1.15rem);line-height:1;
  letter-spacing:.10em;text-transform:uppercase;white-space:nowrap;
}

.brand__tag{
  font-family:var(--font-sans);
  font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--c-gold);white-space:nowrap;line-height:1;
}
.header--over:not(.header--scrolled) .brand__name{color:var(--c-gold-soft)}
.header--over:not(.header--scrolled) .brand__tag{color:var(--c-gold-soft);opacity:.85}

.nav{

  display:flex;align-items:center;gap:var(--sp-3);flex:0 0 auto;

  margin-left:auto;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
}

@media (min-width:900px) and (min-aspect-ratio:11/10){
  .header__bar::after{
    content:"";order:1;
    flex:0 1 var(--nav-shift);min-width:0;
    margin-left:calc(-1 * var(--sp-3));
  }
  .header__side{order:2}
  .burger{order:3}
}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;gap:6px;
  padding:10px 0;
  font-weight:600;letter-spacing:inherit;white-space:nowrap;
  color:inherit;
  border-bottom:2px solid transparent;
  transition:border-color .2s,color .2s;
}
.nav__link:hover{border-bottom-color:var(--c-gold)}
.header--over:not(.header--scrolled) .nav__link{color:var(--c-on-dark)}
.header--over:not(.header--scrolled) .nav__link:hover{color:var(--c-gold-soft)}

.nav__item--has-menu > .nav__link::after{
  content:"";width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  opacity:.55;
}

.nav__panel{
  position:absolute;top:100%;left:calc(-1 * var(--sp-2));
  z-index:60;min-width:240px;
  padding:var(--sp-2);
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-m);
  box-shadow:0 18px 40px rgba(28,22,16,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;

  text-transform:none;letter-spacing:normal;
}
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel{opacity:1;visibility:visible;transform:none}

.nav__sub{position:relative}
.nav__sub > a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.875rem;line-height:1.3;font-weight:600;
  margin:0 -10px;padding:8px 10px;border-radius:6px;
  color:var(--c-graphite);
  transition:color .16s ease,background-color .16s ease;
}

.nav__sub--has > a::after{
  content:"";width:5px;height:5px;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.5;
}
.nav__sub > a:hover,
.nav__sub > a:focus-visible{background:var(--c-ivory-deep);color:var(--c-green);outline:none}

.nav__subpanel{
  position:absolute;top:calc(-1 * var(--sp-2));left:100%;
  z-index:61;min-width:230px;
  margin-left:var(--sp-1);
  padding:var(--sp-2);
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-m);
  box-shadow:0 18px 40px rgba(28,22,16,.16);
  opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav__sub:hover > .nav__subpanel,
.nav__sub:focus-within > .nav__subpanel{opacity:1;visibility:visible;transform:none}

.nav__sub--flip > .nav__subpanel{
  left:auto;right:100%;margin-left:0;margin-right:var(--sp-1);
  transform:translateX(6px);
}
.nav__sub--flip:hover > .nav__subpanel,
.nav__sub--flip:focus-within > .nav__subpanel{transform:none}

.nav__group{display:grid;gap:2px}
.nav__group-title{
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--c-gold);margin-bottom:2px;
}

.nav__panel > a,
.nav__subpanel > a{
  display:block;font-size:.875rem;line-height:1.3;
  margin:0 -10px;padding:6px 10px;border-radius:6px;
  color:var(--c-graphite-soft);
  transition:color .16s ease,background-color .16s ease;
}
.nav__panel > a:hover,.nav__panel > a:focus-visible,
.nav__subpanel > a:hover,.nav__subpanel > a:focus-visible{
  background:var(--c-ivory-deep);color:var(--c-green);outline:none;
}

.header__side{
  display:flex;align-items:center;gap:var(--sp-2);
  margin-left:auto;flex:0 0 auto;
}

.header__addr{
  font-style:normal;
  font-size:.75rem;line-height:1.35;font-weight:500;
  color:var(--c-graphite-soft);white-space:nowrap;text-align:right;
}

.header--over:not(.header--scrolled) .header__addr{color:var(--c-on-dark)}

.header__call{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:var(--c-green);color:var(--c-on-dark);
  font-size:.8125rem;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:lining-nums;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease;
}
.header__call:hover{background:var(--c-green-hover)}
.header__call svg{width:13px;height:13px;flex:0 0 auto}

.header--over:not(.header--scrolled) .header__call{
  background:transparent;border:1px solid var(--c-on-dark);color:var(--c-on-dark);
}

.header--over:not(.header--scrolled) .header__call:hover{
  background:var(--c-on-dark);color:#1B1305;
}

.collection-links{display:flex;gap:var(--sp-2);font-size:var(--fs-small)}
.collection-links a{display:inline-flex;align-items:center;gap:6px}
.collection-links .pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--c-green);color:var(--c-on-dark);
  border-radius:999px;font-size:.6875rem;font-weight:700;
}
.collection-links .pill:empty{display:none}

.nav .collection-links{display:none}

.burger{
  display:none;
  background:none;border:0;cursor:pointer;
  padding:10px;line-height:0;color:inherit;
}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;margin:4px 0}

@media (min-width:900px) and (max-width:1439px){
  :root{--nav-shift:clamp(0px,3vw,44px)}
}

@media (min-width:900px) and (max-width:1359px){
  :root{--nav-shift:0px}
  .nav{gap:var(--sp-2);font-size:.625rem;letter-spacing:.1em}
}

@media (min-width:900px) and (max-width:1279px){
  .header__addr{display:none}
}
@media (min-width:900px) and (max-width:1059px){
  .brand__tag{display:none}
}

@media (min-width:900px) and (max-width:1535px){
  .header__call svg{display:none}
  .header__call{padding:9px 14px}
}
@media (min-width:900px) and (max-width:1439px){
  .header__call{font-size:.75rem;padding:9px 12px}
}
@media (min-width:900px) and (max-width:989px){
  .header__call{padding:0;width:38px;height:38px;justify-content:center;border-radius:50%}
  .header__call svg{display:block;width:16px;height:16px}
  .header__call-text{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}

@media (max-width:899px),(max-aspect-ratio:11/10){
  :root{--bar-h:58px}
  .header__inner{padding:0 var(--sp-3)}
  .header__bar{gap:var(--sp-2)}
  .brand__mark{height:34px}
  .brand__name{font-size:.85rem;letter-spacing:.07em}
  .brand__tag{font-size:.4375rem;letter-spacing:.2em}

  .header__addr{display:none}
  .header__side{margin-left:auto;gap:var(--sp-1)}

  .header__call{padding:0;width:38px;height:38px;justify-content:center;border-radius:50%}
  .header__call svg{width:16px;height:16px}
  .header__call-text{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .burger{display:block}

  .header--scrolled .header__inner{
    max-width:none;
    margin:8px var(--sp-2);
    padding:0 var(--sp-2);
    border-radius:12px;
  }
  .header--scrolled .header__bar{height:calc(var(--bar-h) - 4px)}

  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    max-height:calc(100svh - 100%);
    overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;align-items:stretch;gap:0;
    margin:0;
    background:var(--c-ivory);
    padding:var(--sp-2) var(--sp-3) var(--sp-4);
    border-top:1px solid var(--c-line);
    border-bottom:1px solid var(--c-line);
    box-shadow:0 18px 40px rgba(28,22,16,.16);
    font-size:var(--fs-small);letter-spacing:normal;text-transform:none;
    color:var(--c-graphite);
  }
  .nav.is-open{display:flex}

  .header--scrolled .nav{
    left:var(--sp-2);right:var(--sp-2);
    border-radius:0 0 12px 12px;border-top:0;
  }
  .header--over:not(.header--scrolled) .nav__link{color:var(--c-graphite)}
  .header--over:not(.header--scrolled) .nav__link:hover{color:var(--c-green)}

  .nav__item + .nav__item{border-top:1px solid var(--c-line)}
  .nav__link{padding:14px 0;font-size:1rem;border-bottom:0;text-transform:none;letter-spacing:normal}
  .nav__item--has-menu > .nav__link::after{display:none}

  .nav__panel,.nav__subpanel{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:0;
    padding:0 0 var(--sp-2) var(--sp-2);
    background:transparent;border:0;box-shadow:none;border-radius:0;
  }
  .nav__sub > a{font-size:.9375rem;margin:0;padding:8px 0;border-radius:0}
  .nav__sub--has > a::after{display:none}
  .nav__panel > a,
  .nav__subpanel > a{margin:0;padding:7px 0;font-size:.9375rem;border-radius:0}

}

@media (max-width:899px),(max-aspect-ratio:11/10){
  .nav .collection-links{
    display:flex;gap:var(--sp-3);font-size:1rem;
    padding-top:var(--sp-3);margin-top:var(--sp-2);
    border-top:1px solid var(--c-line);
  }
}

.phone-modal{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:20px}
.phone-modal[hidden]{display:none}
.phone-modal__backdrop{position:absolute;inset:0;background:rgba(28,22,16,.55);backdrop-filter:blur(2px)}
.phone-modal__box{
  position:relative;z-index:1;
  width:min(400px,100%);
  background:var(--c-ivory);color:var(--c-graphite);
  border:1px solid var(--c-line);border-radius:var(--radius-m);
  box-shadow:0 24px 60px rgba(28,22,16,.32);
  padding:32px 32px 26px;text-align:center;
}
.phone-modal__close{
  position:absolute;top:10px;right:12px;
  width:34px;height:34px;border:0;background:transparent;
  font-size:1.6rem;line-height:1;color:var(--c-graphite-soft);cursor:pointer;
}
.phone-modal__close:hover{color:var(--c-graphite)}
.phone-modal__for{
  margin:0 0 6px;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--c-gold);
}
.phone-modal__title{
  font-family:var(--font-display);font-weight:500;
  font-size:1.5rem;line-height:1.2;margin:0 0 18px;
}

.phone-modal__number{
  display:block;margin:0 0 22px;
  font-size:1.75rem;font-weight:700;letter-spacing:.01em;line-height:1.2;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--c-graphite);text-decoration:none;white-space:nowrap;
  user-select:all;
}
.phone-modal__number:hover{color:var(--c-green)}
.phone-modal__copy{width:100%;justify-content:center}

.phone-modal .phone-modal__copy.is-done{background:var(--c-gold);border-color:var(--c-gold);color:#1B1305}
.phone-modal__status{min-height:1.2em;margin:10px 0 0;font-size:.8125rem;color:var(--c-graphite-soft)}

body.is-phone-modal-open{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .phone-modal__box{animation:phone-modal-in .18s ease-out}
  @keyframes phone-modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
}

@media (max-width:359px){
  .header__inner{padding:0 12px}
  .header__bar{gap:8px}
  .brand{gap:8px}
  .brand__mark{height:30px}
  .brand__name{font-size:.8rem}
  .brand__tag{display:none}
  .burger{padding:10px 8px}
  .header--scrolled .header__inner{margin:8px;padding:0 10px}
}
