*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#1F1F1D;
  --paper:#FFFFFF;
  --stone:#C8C9C2;
  --mist:#F2F2EF;
  --body:#35352F;
  --light:#F4F3EF;
  --acc:#C9A46A;
  --scrim:#2B2B28;
  --pad:clamp(1.25rem,5vw,4rem);
}

html,body{max-width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--body);
  font-family:'Jost',system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--light);color:var(--ink);padding:.7rem 1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}

.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.mlabel{
  font-family:'Cormorant Garamond',serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.8rem;
  color:var(--stone);
  margin:0;
}
.mlabel--dim{color:#8f9089}

/* side rail */
.siderail{
  position:fixed;left:0;top:0;height:100%;width:52px;z-index:60;
  display:none;align-items:center;justify-content:center;pointer-events:none;
}
.siderail span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'Cormorant Garamond',serif;text-transform:uppercase;
  letter-spacing:.42em;font-size:.72rem;color:rgba(244,243,239,.55);
  white-space:nowrap;
}
@media(min-width:1024px){.siderail{display:flex}}

/* topbar */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(to bottom,rgba(31,31,29,.55),rgba(31,31,29,0));
  border-bottom:1px solid rgba(200,201,194,0);
  transition:background .5s ease,border-color .5s ease;
}
.topbar.is-solid{
  background:rgba(27,27,25,.9);
  border-bottom:1px solid rgba(201,164,106,.28);
}
.topbar__inner{
  max-width:1240px;margin:0 auto;
  padding:.7rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
@media(min-width:1024px){.topbar__inner{padding-left:calc(var(--pad) + 40px)}}

/* logo lockup — the submark is black artwork on white, so it is seated
   on a small light plate rather than blended (blend is unreliable over
   a translucent header) */
.lockup{display:flex;align-items:center;gap:.75rem;min-width:0}
.lockup__plate{
  flex:none;display:grid;place-items:center;
  width:38px;height:38px;padding:3px;
  background:var(--light);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.lockup__plate img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.lockup__word{
  font-family:'Cormorant Garamond',serif;
  text-transform:uppercase;letter-spacing:.24em;
  font-size:.74rem;color:var(--light);white-space:nowrap;
}
@media(max-width:520px){
  .lockup__plate{width:32px;height:32px}
  .lockup__word{font-size:.58rem;letter-spacing:.14em;white-space:normal;line-height:1.5}
}

.topbar__right{display:flex;align-items:center;gap:.6rem;min-width:0}
.status{display:none;align-items:center;gap:.5rem;font-family:'Cormorant Garamond',serif;
  text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;color:var(--stone)}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--acc);display:inline-block;
  box-shadow:0 0 0 0 rgba(201,164,106,.5);animation:pulse 3.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,164,106,.45)}70%{box-shadow:0 0 0 8px rgba(201,164,106,0)}100%{box-shadow:0 0 0 0 rgba(201,164,106,0)}}
@media(min-width:960px){.status{display:flex;margin-right:.6rem}}

.topbar__tel{
  color:var(--light);font-size:.95rem;letter-spacing:.06em;
  border-bottom:1px solid rgba(201,164,106,.5);padding-bottom:2px;margin-right:.4rem;
  transition:color .3s,border-color .3s;
}
.topbar__tel:hover{color:var(--acc);border-color:var(--acc)}
@media(max-width:700px){.topbar__tel{display:none}}

.ico{
  width:40px;height:40px;display:grid;place-items:center;flex:none;
  color:var(--stone);transition:color .3s ease,transform .3s ease;
}
.ico svg{width:19px;height:19px;fill:currentColor}
.ico:hover{color:var(--acc);transform:translateY(-2px)}
.ico--lg{width:48px;height:48px}
.ico--lg svg{width:23px;height:23px}

/* hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  /* pushed right so the logo watermark baked into the top-left of the
     source photograph is cropped out of frame */
  object-position:68% 62%;
  transform:scale(1.06);
  animation:kb 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kb{from{transform:scale(1.05)}to{transform:scale(1.16)}}

.hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(100deg,rgba(31,31,29,.92) 0%,rgba(31,31,29,.80) 26%,rgba(43,43,40,.46) 56%,rgba(43,43,40,.24) 100%),
    linear-gradient(to top,rgba(31,31,29,.80) 0%,rgba(43,43,40,0) 46%),
    linear-gradient(to bottom,rgba(31,31,29,.55) 0%,rgba(43,43,40,0) 22%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;opacity:.14;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}

.hero__inner{
  width:100%;max-width:1240px;margin:0 auto;
  padding:clamp(7rem,14vw,10rem) var(--pad) clamp(6rem,10vw,7rem);
}
@media(min-width:1024px){.hero__inner{padding-left:calc(var(--pad) + 40px)}}

.hero__col{max-width:46rem;min-width:0}

.hero__mark{
  display:inline-grid;place-items:center;
  width:clamp(62px,7vw,92px);height:clamp(62px,7vw,92px);
  padding:6px;background:var(--light);
  box-shadow:0 14px 40px rgba(15,15,13,.45);
  margin:0 0 clamp(1.3rem,3vw,2.2rem);
}
.hero__mark img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

.hero__title{
  font-weight:200;
  font-size:clamp(2.5rem,7vw,6.5rem);
  line-height:1.0;
  letter-spacing:.02em;
  color:var(--light);
  margin:0;
  text-wrap:balance;
  text-shadow:0 2px 44px rgba(18,18,16,.55);
}
.hero__sub{
  font-family:'Cormorant Garamond',serif;
  text-transform:uppercase;letter-spacing:.24em;
  font-size:clamp(.76rem,1.5vw,.95rem);
  color:var(--stone);
  margin:clamp(1.4rem,3vw,2.2rem) 0 0;
  max-width:34rem;line-height:1.9;
}
.hero__note{
  font-size:.9rem;letter-spacing:.05em;color:rgba(244,243,239,.62);
  margin:.6rem 0 0;font-weight:300;
}

.hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.8rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  background:var(--ink);color:var(--light);
  border:1px solid rgba(201,164,106,.6);
  padding:1.05rem 1.7rem;
  font-size:.95rem;font-weight:400;letter-spacing:.1em;
  box-shadow:0 16px 40px rgba(15,15,13,.4);
  transition:background .35s,border-color .35s,transform .35s;
  min-height:52px;
}
.btn:hover{background:#2a2a26;border-color:var(--acc);transform:translateY(-2px)}
.btn .glyph{width:16px;height:16px;fill:var(--acc);flex:none}

.txtlink{
  position:relative;color:var(--light);
  font-size:.98rem;letter-spacing:.1em;
  padding:.5rem 0;min-height:44px;display:inline-flex;align-items:center;
}
.txtlink::after{
  content:"";position:absolute;left:0;bottom:.35rem;height:1px;width:100%;
  background:var(--acc);transform:scaleX(1);transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.txtlink:hover::after{transform:scaleX(.4)}
.txtlink--sm{font-size:.85rem;color:var(--stone)}

/* entrance — CSS only, never dependent on JS */
.reveal{opacity:0;transform:translateY(20px);animation:rise .95s cubic-bezier(.2,.7,.2,1) forwards}
.hero__col > .reveal:nth-child(1){animation-delay:.10s}
.hero__col > .reveal:nth-child(2){animation-delay:.22s}
.hero__col > .reveal:nth-child(3){animation-delay:.38s}
.hero__col > .reveal:nth-child(4){animation-delay:.48s}
.hero__col > .reveal:nth-child(5){animation-delay:.60s}
@keyframes rise{to{opacity:1;transform:none}}

/* contact */
.contact{
  background:var(--ink);
  padding:clamp(3.5rem,9vw,8rem) 0 clamp(3.5rem,8vw,7rem);
  position:relative;z-index:3;
}
.contact::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,rgba(201,164,106,.75),rgba(201,164,106,0) 62%);
}
.contact__grid{display:grid;gap:clamp(2.5rem,6vw,5rem)}
@media(min-width:900px){
  .contact__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
}
.contact__head{min-width:0}

/* overlapping image card — layered depth against the hero above */
.crop{margin:0;position:relative;min-width:0}
.crop__img{
  width:100%;height:clamp(200px,32vw,380px);
  object-fit:cover;object-position:62% 100%;
  filter:grayscale(.28) contrast(1.04);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.crop::after{
  content:"";position:absolute;inset:auto -14px -14px auto;
  width:38%;height:42%;border:1px solid rgba(201,164,106,.45);
  pointer-events:none;
}
.crop__cap{
  font-family:'Cormorant Garamond',serif;text-transform:uppercase;
  letter-spacing:.22em;font-size:.68rem;color:rgba(200,201,194,.7);
  margin-top:.9rem;
}
@media(min-width:900px){
  .crop{margin-top:calc(-1 * clamp(4rem,9vw,9rem))}
}

.contact__body{min-width:0}
.contact__body .mlabel{margin-bottom:clamp(1.4rem,3vw,2.2rem)}

.bigline{
  display:flex;align-items:center;gap:1rem;min-width:0;
  color:var(--light);
  padding:.4rem 0;
  transition:color .3s;
  overflow-wrap:break-word;
}
.bigline span{
  font-weight:300;
  font-size:clamp(1.4rem,2.6vw,2.05rem);
  letter-spacing:.04em;
  min-width:0;overflow-wrap:anywhere;
}
.bigline .email{font-size:clamp(1.02rem,2.2vw,1.65rem)}
.bigline:hover{color:var(--acc)}
.glyph--acc{width:20px;height:20px;fill:var(--acc);flex:none}

.rule{border:0;height:1px;background:linear-gradient(to right,rgba(201,164,106,.5),rgba(201,164,106,.06));margin:1.4rem 0}

.signup{margin-top:clamp(2.4rem,5vw,3.4rem);max-width:26rem}
.signup .mlabel{display:block;margin-bottom:.8rem}
.signup__row{display:flex;align-items:center;border-bottom:1px solid rgba(200,201,194,.35);min-width:0}
.signup input{
  flex:1;min-width:0;background:transparent;border:0;
  color:var(--light);font-family:'Jost',sans-serif;font-weight:300;
  font-size:1rem;padding:.85rem 0;letter-spacing:.04em;
}
.signup input::placeholder{color:rgba(200,201,194,.55)}
.signup input:focus{outline:none}
.signup__row:focus-within{border-color:var(--acc)}
.signup button{
  background:transparent;border:0;color:var(--acc);cursor:pointer;
  width:48px;height:48px;display:grid;place-items:center;flex:none;
  transition:transform .3s;
}
.signup button svg{width:22px;height:22px;stroke:currentColor}
.signup button:hover{transform:translateX(4px)}

.socials{display:flex;gap:.4rem;margin-top:clamp(2rem,4vw,2.8rem);margin-left:-.6rem}

/* footer */
.foot{background:#171715;padding:2.2rem 0 5.8rem;border-top:1px solid rgba(200,201,194,.1)}
@media(min-width:700px){.foot{padding-bottom:2.4rem}}
.foot__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem;
}
.lockup--foot .lockup__plate{width:30px;height:30px;box-shadow:none}
.foot__copy{margin:0;font-size:.78rem;letter-spacing:.08em;color:rgba(200,201,194,.6)}
.foot__links{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}

/* mobile action bar */
.mobilebar{
  position:fixed;bottom:0;left:0;right:0;z-index:110;
  display:grid;grid-template-columns:1fr 1fr;
  background:rgba(27,27,25,.95);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid rgba(201,164,106,.32);
}
.mobilebar a{
  min-height:56px;display:grid;place-items:center;
  color:var(--light);font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:'Cormorant Garamond',serif;
}
.mobilebar a+a{border-left:1px solid rgba(200,201,194,.18);color:var(--acc)}
@media(min-width:700px){.mobilebar{display:none}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  .hero__media img{transform:scale(1.02)}
}