/* ============================================================
   Contact page styles — Aiden Lee
   Black page (#0e0e0e) matching the rest of the site.
   Fonts: Didot (display) + Swiss721Bold (.lab).
   ============================================================ */

:root{
  --red: #9b1120;
  --red-hover: #b3162a;
  --red-lift: #ab182c;
  --red-lift-hover: #c01f34;
  --red-deep: #8a0f1e;
  --ink: #0e0e0e;
  --ink-2: #0c0b0a;
  --cream: #f4efe4;
  --muted: #9a9284;
  --muted-2: #6f685c;
  --hairline: rgba(244,239,228,0.14);
  --hairline-strong: rgba(244,239,228,0.32);
}

.contact-main .lab{
  font-family:"Swiss721Bold","Swiss 721",Helvetica,Arial,sans-serif;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.contact-main{
  position:relative;
  background:#0e0e0e;
  color:var(--cream);
  min-height:100vh;
  padding:0;
  z-index:2;
}

/* Subtle grain overlay reused from the site */
.contact-main .grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'><filter%20id='n'><feTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/><feColorMatrix%20type='saturate'%20values='0'/></filter><rect%20width='100%'%20height='100'%20filter='url(%23n)'/></svg>");background-size:150px 150px}

/* Solid black canvas — no gradients, no vignette */

/* ---------- Hero ---------- */
.contact-hero{
  position:relative;
  padding:18vh clamp(24px,8vw,160px) 4vh;
  display:flex;
  align-items:flex-end;
  min-height:88vh;
  z-index:1;
}
.contact-inner{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  position:relative;
}
.contact-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:var(--muted);
  margin-bottom:34px;
  letter-spacing:.26em;
}
.contact-eyebrow-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px rgba(155,17,32,0.18);
  animation:contact-pulse 2.4s ease-in-out infinite;
}
@keyframes contact-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(155,17,32,0.18);transform:scale(1);}
  50%{box-shadow:0 0 0 8px rgba(155,17,32,0.05);transform:scale(1.18);}
}

.contact-title{
  font-family:Didot,serif;
  font-weight:400;
  font-size:clamp(64px,12vw,200px);
  line-height:.92;
  letter-spacing:.005em;
  color:var(--cream);
  text-transform:uppercase;
  margin:0 0 36px;
  -webkit-font-smoothing:antialiased;
}
.contact-title .oh{display:block;overflow:hidden;line-height:.96;}
.contact-title .oh__inner{display:block;will-change:transform;}
.contact-title-italic{
  font-style:italic;
  text-transform:uppercase;
  color:var(--cream);
  display:inline-block;
  padding-left:.2em;
}
.contact-title-italic::first-letter{color:var(--red-hover);}

.contact-lede{display:none;}

/* Reveal animation for hero */
.contact-hero .oh__inner{
  animation:contact-rise 1.05s cubic-bezier(.16,1,.3,1) both;
}
.contact-hero .oh:nth-child(1) .oh__inner{animation-delay:.05s;}
.contact-hero .oh:nth-child(2) .oh__inner{animation-delay:.18s;}
.contact-eyebrow{
  opacity:0;
  transform:translateY(14px);
  animation:contact-fade .9s cubic-bezier(.2,1,.3,1) forwards;
  animation-delay:.32s;
}
@keyframes contact-rise{
  from{transform:translateY(112%);}
  to{transform:translateY(0);}
}
@keyframes contact-fade{
  to{opacity:1;transform:translateY(0);}
}

/* ---------- Card grid ---------- */
.contact-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--hairline);
  padding:0 clamp(24px,8vw,160px);
  margin:0 auto;
  max-width:1480px;
  gap:0;
}
.contact-card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:14px 22px;
  padding:42px 24px;
  border-bottom:1px solid var(--hairline);
  border-right:1px solid var(--hairline);
  color:var(--cream);
  text-decoration:none;
  transition:background .45s ease, padding .45s ease;
  overflow:hidden;
}
.contact-card:nth-child(even){border-right:none;}
.contact-card--static{cursor:default;}

.contact-card::before{display:none;}

.contact-card-num{
  grid-row:1;
  font-size:11px;
  color:var(--red);
  letter-spacing:.22em;
}
.contact-card-label{
  grid-row:1;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.26em;
}
.contact-card-value{
  grid-row:2;
  grid-column:1 / -1;
  font-family:Didot,serif;
  font-weight:400;
  font-size:clamp(22px,2.6vw,38px);
  line-height:1.1;
  letter-spacing:.01em;
  color:var(--cream);
  margin-top:8px;
  position:relative;
  transition:transform .5s cubic-bezier(.16,1,.3,1), color .35s ease;
  display:inline-block;
  transform-origin:left center;
}
a.contact-card:hover .contact-card-value{
  transform:translateX(8px);
  color:#fff;
}
.contact-card-arrow{
  grid-row:2;
  grid-column:3;
  align-self:end;
  justify-self:end;
  font-size:13px;
  color:var(--cream);
  transform:translate(0,0);
  transition:transform .5s cubic-bezier(.16,1,.3,1), color .35s ease;
}
a.contact-card:hover .contact-card-arrow{
  transform:translate(6px,-6px);
  color:var(--red-hover);
}
.contact-card-meta{
  grid-row:3;
  grid-column:1 / -1;
  font-size:9px;
  color:var(--muted-2);
  letter-spacing:.24em;
  margin-top:6px;
}

@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-card{border-right:none;padding:34px 8px;}
}

/* ---------- Form ---------- */
.contact-form-wrap{
  position:relative;
  z-index:1;
  padding:6vh clamp(24px,8vw,160px) 14vh;
  max-width:1480px;
  margin:0 auto;
}
.contact-form-inner{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  align-items:flex-start;
}
.contact-form-head{position:sticky;top:140px;}
.contact-form-eyebrow{
  display:inline-block;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.26em;
  margin-bottom:18px;
}
.contact-form-title{
  font-family:Didot,serif;
  font-weight:400;
  font-size:clamp(36px,4.2vw,64px);
  line-height:1.02;
  letter-spacing:.005em;
  color:var(--cream);
  margin:0 0 18px;
  text-transform:none;
}
.contact-form-note{
  font-family:"Swiss721Bold","Swiss 721",Helvetica,Arial,sans-serif;
  font-weight:700;
  font-size:11px;
  line-height:1.85;
  color:rgba(244,239,228,0.72);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0;
  max-width:38ch;
}
.contact-form-note .dash{
  font-family:"Swiss721Bold","Swiss 721",Helvetica,Arial,sans-serif;
  font-weight:700;
  display:inline-block;
  margin:0 .35em;
  color:var(--cream);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.contact-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.contact-field{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}
.contact-field-label{
  font-size:9px;
  color:var(--muted);
  letter-spacing:.26em;
}
.contact-input{
  appearance:none;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline-strong);
  padding:14px 0 14px;
  font:inherit;
  font-family:Didot,serif;
  font-size:clamp(18px,1.5vw,22px);
  color:var(--cream);
  outline:none;
  transition:border-color .35s ease, padding .35s ease;
  border-radius:0;
}
.contact-input:focus{
  border-bottom-color:var(--red-hover);
}
.contact-textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.4;
}
.contact-select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cream) 50%),
    linear-gradient(135deg, var(--cream) 50%, transparent 50%);
  background-position:calc(100% - 16px) center, calc(100% - 10px) center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:30px;
}

/* ---------- Custom select ---------- */
.field--select{z-index:40;}
.select{position:relative;}
.select__trigger{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0 12px;cursor:pointer;border-bottom:1px solid var(--hairline);color:var(--cream);font-family:Didot,serif;font-size:22px;transition:border-color .25s ease;}
.select__trigger:hover,.select[data-open="true"] .select__trigger{border-bottom-color:rgba(244,239,228,0.45);}
.select__trigger:focus-visible{outline:1px solid rgba(244,239,228,0.5);outline-offset:4px;}
.select__arrow{flex:none;color:var(--muted);transition:transform .25s ease,color .25s ease;}
.select[data-open="true"] .select__arrow{transform:rotate(180deg);color:var(--cream);}
.select__menu{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;margin:0;padding:6px 0;list-style:none;background:#161513;border:1px solid var(--hairline);box-shadow:0 24px 48px rgba(0,0,0,0.6);max-height:280px;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:transform .3s cubic-bezier(.3,.7,.3,1),opacity .25s ease,visibility 0s linear .3s;}
.select[data-open="true"] .select__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease,visibility 0s;}
.select__option{padding:13px 18px;font-family:Didot,serif;font-size:18px;color:var(--cream);opacity:.8;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,opacity .15s ease;}
.select__option:hover,.select__option.is-active{background:#1f1c19;opacity:1;}
.select__option.is-selected{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%239b1120' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;}

.contact-form-foot{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:6px;
  flex-wrap:wrap;
}
.contact-submit{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:10px 22px;
  border:1px solid var(--cream);
  border-radius:999px;
  background:transparent;
  color:var(--cream);
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  cursor:pointer;
  transition:background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
}
.contact-submit:hover{
  background:var(--red);
  border-color:var(--red);
  color:#f4efe4;
  transform:translateY(-1px);
}
.contact-submit:active{transform:translateY(0);}
.contact-form-sent{
  font-size:10px;
  color:var(--muted);
  letter-spacing:.22em;
  opacity:0;
  animation:contact-fade .6s cubic-bezier(.2,1,.3,1) forwards;
}
.contact-form-error{
  font-size:10px;
  color:#d97773;
  letter-spacing:.18em;
  margin:0;
}
.contact-submit:disabled{opacity:.7;cursor:default;}

@media (max-width:900px){
  .contact-form-inner{grid-template-columns:1fr;gap:40px;}
  .contact-form-head{position:static;}
}
@media (max-width:600px){
  .contact-row{grid-template-columns:1fr;}
  .contact-hero{min-height:auto;padding-top:14vh;padding-bottom:6vh;}
}

/* ---------- Page footer ---------- */
.contact-foot{
  position:relative;
  z-index:1;
  border-top:1px solid var(--hairline);
  padding:24px clamp(24px,8vw,160px);
  margin-top:0;
}
.contact-foot-inner{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  max-width:1480px;
  margin:0 auto;
  flex-wrap:wrap;
}
.contact-foot .lab{
  font-size:10px;
  color:var(--muted);
  letter-spacing:.24em;
}
.contact-foot a{
  color:var(--muted);
  transition:color .35s ease;
}
.contact-foot a:hover{color:var(--cream);}

@media (max-width:600px){
  .contact-foot-inner{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .contact-eyebrow,
  .contact-lede,
  .contact-hero .oh__inner,
  .contact-eyebrow-dot{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}