/* ═══════════════════════════════════════════
   vartanian.com — domain sale landing page
   ═══════════════════════════════════════════ */

:root{
  --paper:    #FBFAF8;
  --paper-2:  #F3F1EB;
  --ink:      #1A1917;
  --ink-soft: #45423C;
  --muted:    #6E6A63;
  --muted-2:  #96918A;
  --line:     rgba(26,25,23,.13);
  --line-2:   rgba(26,25,23,.24);
  --accent:   #8C6A38;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --gut: clamp(1.25rem, 5vw, 3rem);
  --sect: clamp(4.5rem, 10vw, 8rem);
  --r: 3px;
  --ease: cubic-bezier(.16,1,.3,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.06rem);
  line-height:1.68;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
::selection{ background:var(--ink); color:var(--paper); }

.tld{ color:var(--accent); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-weight:500;
}
.skip:focus{ left:1rem; top:1rem; }

/* layout ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:800px; }

.section{ padding-block:var(--sect); position:relative; }
:where(section[id]){ scroll-margin-top:84px; }
.section--alt{ background:var(--paper-2); border-block:1px solid var(--line); }

/* type ------------------------------------------------------ */
.kicker{
  font-size:.71rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.4rem;
}

.h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.85rem,1.3rem + 2.5vw,3rem);
  line-height:1.16; letter-spacing:-.02em;
  margin:0 0 1.4rem; text-wrap:balance;
}

.lede{
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
  line-height:1.66; color:var(--muted);
  max-width:60ch; margin:0 0 3rem;
}

/* nav ------------------------------------------------------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:900;
  transition:background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(251,250,248,.86);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line);
}
.nav__inner{ display:flex; align-items:center; gap:2rem; height:66px; }
.nav__mark{
  font-family:var(--sans); font-size:1rem; font-weight:500;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none;
  margin-right:auto;
}

/* buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.7rem 1.35rem;
  background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-size:.86rem; font-weight:500;
  letter-spacing:.01em; text-decoration:none;
  border:1px solid var(--ink); border-radius:var(--r);
  cursor:pointer; white-space:nowrap;
  transition:background .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.btn:hover{ background:#33302B; border-color:#33302B; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:.52rem 1rem; font-size:.8rem; }
.btn--lg{ padding:.95rem 1.9rem; font-size:.92rem; }
.btn--full{ width:100%; }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* hero ------------------------------------------------------ */
.hero{
  padding-top:clamp(7.5rem,16vh,11rem);
  padding-bottom:clamp(3.5rem,7vw,5.5rem);
}
.hero__inner{ text-align:center; }

.eyebrow{
  font-size:.71rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 clamp(1.25rem,3vw,1.9rem);
}

.hero__mark{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(2.5rem,.9rem + 8.8vw,6.8rem);
  line-height:1; letter-spacing:-.045em;
  margin:0 0 clamp(1.4rem,3vw,2rem);
  word-break:break-word;
}

.hero__lede{
  font-size:clamp(1.04rem,.98rem + .45vw,1.3rem);
  line-height:1.6; color:var(--muted);
  max-width:46ch; margin:0 auto clamp(2rem,4vw,2.75rem);
  text-wrap:pretty;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-bottom:1.5rem; }
@media (max-width:460px){
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
}

.hero__note{ font-size:.8rem; color:var(--muted-2); margin:0; }

/* facts ----------------------------------------------------- */
.facts{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  margin:clamp(3rem,7vw,4.5rem) auto 0;
  max-width:620px;
}
@media (max-width:560px){ .facts{ grid-template-columns:1fr; } }

.fact{ background:var(--paper); padding:1.4rem 1.25rem; text-align:center; }
.fact dt{
  font-size:.66rem; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:.55rem;
}
.fact dd{
  font-family:var(--serif); font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem);
  font-weight:400; line-height:1; letter-spacing:-.02em;
  margin:0; color:var(--ink);
}

/* form ------------------------------------------------------ */
.form{ margin-top:.25rem; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:600px){ .row{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.2rem; display:flex; flex-direction:column; }
.field label{
  font-size:.75rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.55rem;
}
.req{ color:var(--accent); }
.opt{
  text-transform:none; letter-spacing:.01em;
  font-weight:300; color:var(--muted-2); font-size:.74rem;
}

input[type=text],input[type=email],select,textarea{
  width:100%; font-family:inherit; font-size:.96rem; font-weight:300;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:.82rem 1rem;
  transition:border-color .22s, box-shadow .22s;
}
textarea{ resize:vertical; min-height:106px; line-height:1.6; }
input::placeholder,textarea::placeholder{ color:#B4AFA7; }

input:hover,select:hover,textarea:hover{ border-color:#9C968D; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(140,106,56,.14);
}

select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238C6A38' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
select:invalid{ color:#B4AFA7; }

.money{ position:relative; }
.money__sym{
  position:absolute; left:1rem; top:50%; translate:0 -50%;
  color:var(--muted); font-size:.96rem; pointer-events:none;
}
.money input{ padding-left:2.05rem; }

.err{
  display:block; min-height:1.1rem; margin-top:.35rem;
  font-size:.78rem; color:#B4402A;
}
input[aria-invalid=true],select[aria-invalid=true]{ border-color:#B4402A; }

.check{
  display:flex; gap:.75rem; align-items:flex-start;
  font-size:.86rem; line-height:1.55; color:var(--muted);
  cursor:pointer; margin:.5rem 0 .25rem;
}
.check input{
  appearance:none; flex:none;
  width:18px; height:18px; margin-top:.15rem;
  border:1px solid var(--line-2); border-radius:2px;
  background:var(--paper); cursor:pointer;
  transition:background .2s, border-color .2s;
}
.check input:checked{ background:var(--ink); border-color:var(--ink); }
.check input:checked::after{
  content:""; display:block;
  width:5px; height:9px; margin:2px auto 0;
  border:solid var(--paper); border-width:0 2px 2px 0;
  rotate:45deg;
}

#submitBtn{ margin-top:1.6rem; }
.btn__spin{
  display:none; width:15px; height:15px;
  border:2px solid rgba(251,250,248,.3); border-top-color:var(--paper);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ rotate:360deg; } }
.btn.is-busy{ pointer-events:none; opacity:.7; }
.btn.is-busy .btn__spin{ display:block; }

.form__foot{ margin:1rem 0 0; text-align:center; font-size:.78rem; color:var(--muted-2); }

.formMsg{ margin-top:1.2rem; }
.formMsg:empty{ display:none; }
.formMsg .ok,.formMsg .bad{
  padding:1.05rem 1.3rem; border-radius:var(--r);
  font-size:.92rem; line-height:1.6;
}
.formMsg .ok{ background:var(--paper); border:1px solid var(--line-2); color:var(--ink); }
.formMsg .bad{ background:#FBF0ED; border:1px solid #E0B4A8; color:#8E3320; }

/* steps ----------------------------------------------------- */
.steps{ list-style:none; counter-reset:s; margin:0 0 clamp(3rem,6vw,4.5rem); padding:0; }
.step{
  counter-increment:s; position:relative;
  padding:0 0 2rem 3.5rem;
  border-left:1px solid var(--line); margin-left:1rem;
}
.step:last-child{ border-left-color:transparent; padding-bottom:0; }
.step::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:-.15rem; translate:-50% 0;
  width:2.3rem; height:2.3rem;
  display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line-2); border-radius:50%;
  font-family:var(--serif); font-size:.75rem; color:var(--accent);
}
.step h3{
  font-family:var(--serif); font-weight:400; font-size:1.16rem;
  margin:0 0 .35rem; letter-spacing:-.005em;
}
.step p{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.65; }
.step strong{ color:var(--ink); font-weight:500; }

/* footer ---------------------------------------------------- */
.foot{ border-top:1px solid var(--line); padding-block:2.75rem; }
.foot__inner{ text-align:center; }
.foot__mark{ font-family:var(--sans); font-size:.94rem; font-weight:500; letter-spacing:-.02em; display:inline-block; margin-bottom:1rem; }
.foot__legal{
  max-width:56ch; margin:0 auto .9rem;
  font-size:.78rem; line-height:1.65; color:var(--muted-2);
}
.foot__copy{ margin:0; font-size:.75rem; color:var(--muted-2); }

/* reveal ---------------------------------------------------- */
.reveal{
  opacity:0; translate:0 18px;
  transition:opacity .8s var(--ease), translate .8s var(--ease);
  transition-delay:calc(var(--d,0) * 80ms);
}
.reveal.is-in{ opacity:1; translate:0 0; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; translate:none; transition:none; }
  .btn:hover{ transform:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}