:root{
  --bg:#0a0a0b;
  --panel:#101012;
  --ink:#efece6;
  --dim:#8a8680;
  --faint:#767370;
  --line:#1f1f22;
  --accent:#bda37c;
  --max:1120px;
  --gut:32px;
  --nav:66px;
  --ease:cubic-bezier(.16,.84,.28,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

.idx{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.idx-a{color:var(--accent)}

h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.018em}
h2{font-size:clamp(25px,3.2vw,34px);line-height:1.18}
h2 em,h1 em{font-style:italic;color:var(--accent)}

.prog{
  position:fixed;top:0;left:0;height:1.5px;width:0;
  background:var(--accent);z-index:80;
  transition:width .1s linear;
  pointer-events:none;
}

.navbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--nav);display:flex;align-items:center;
  transition:background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.stuck{
  background:rgba(10,10,11,.78);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line);
}
.navbar .wrap{display:flex;align-items:baseline;justify-content:space-between;width:100%}
.mark{
  font-family:Georgia,serif;font-size:15.5px;
  letter-spacing:.42em;text-transform:uppercase;text-indent:.42em;
  color:var(--ink);text-decoration:none;
}
.navlinks{display:flex;gap:26px;align-items:baseline;flex-shrink:0}
.navlinks a{
  color:var(--dim);text-decoration:none;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  transition:color .3s;position:relative;
}
.navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--dim);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after{transform:scaleX(1)}
.navlinks a.on{color:var(--ink)}
.navlinks a.on::after{transform:scaleX(1);background:var(--accent)}

.btn{
  display:inline-block;background:var(--ink);color:var(--bg);
  padding:14px 28px;text-decoration:none;border:1px solid var(--ink);
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;font-family:inherit;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn-2{background:none;color:var(--dim);border-color:var(--line)}
.btn-2:hover{background:none;color:var(--ink);border-color:var(--dim)}
.actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}

.hero{
  display:grid;grid-template-columns:1fr 44vw;
  min-height:100vh;align-items:center;
}
.hero-copy{display:flex;justify-content:flex-end;padding:calc(var(--nav) + 40px) 56px 64px var(--gut)}
.hero-inner{max-width:540px;width:100%}
.hero h1{font-size:clamp(36px,4.8vw,60px);line-height:1.04;letter-spacing:-.028em;margin:22px 0 0}
.hero p{margin-top:26px;max-width:42ch;color:var(--dim);font-size:16.5px}
.hero-media{align-self:stretch;overflow:hidden;position:relative}
.hero-media img{will-change:transform}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,11,.6) 0%,rgba(10,10,11,0) 34%);
}
.scroll-cue{
  position:absolute;left:var(--gut);bottom:34px;
  display:flex;align-items:center;gap:12px;
}
.scroll-cue span{width:46px;height:1px;background:var(--faint);position:relative;overflow:hidden}
.scroll-cue span::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateX(-100%);animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

.phead{padding-top:calc(var(--nav) + 88px)}
.phead h1{font-size:clamp(32px,4.4vw,52px);line-height:1.06;margin-top:20px;max-width:17ch}
.phead p{margin-top:22px;color:var(--dim);max-width:52ch}

.sec{padding-top:120px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;gap:20px}
.rule{height:1px;background:var(--line);transform-origin:left;margin:0}

.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:34px 14px;align-items:start}
figure{grid-column:span 2}
.media{overflow:hidden;background:#141416}
figcaption{margin-top:11px;display:flex;justify-content:space-between;gap:10px}
figcaption .t{font-size:12.5px;color:var(--dim)}
.s3{grid-column:span 3}
.s4{grid-column:span 4}
.s6{grid-column:span 6}
.r32 .media{aspect-ratio:3/2}
.r34 .media{aspect-ratio:3/4}
.r11 .media{aspect-ratio:1/1}
.r45 .media{aspect-ratio:4/5}
.r219 .media{aspect-ratio:21/9}

.rate{
  display:grid;grid-template-columns:1.5fr 2fr 150px;gap:26px;align-items:baseline;
  padding:34px 0;border-top:1px solid var(--line);
  transition:background .5s var(--ease);
}
.rate:last-of-type{border-bottom:1px solid var(--line)}
.rate:hover{background:rgba(255,255,255,.012)}
.rate h3{font-size:23px}
.rate .inc{color:var(--dim);font-size:14.5px}
.rate .amt{font-family:Georgia,serif;font-size:34px;letter-spacing:-.02em;white-space:nowrap;text-align:right}
.rate .amt small{font-size:13px;color:var(--dim);letter-spacing:0;margin-left:3px}
.rate.hi .amt{color:var(--accent)}
.fine{margin-top:20px;font-size:12.5px;color:var(--dim)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.step{border-top:1px solid var(--line);padding-top:22px}
.step h4{font-weight:500;font-size:16px;margin:16px 0 9px}
.step p{color:var(--dim);font-size:14px}

.close{padding-top:140px;padding-bottom:130px}
.close h2{max-width:17ch;margin-bottom:16px}
.close p{color:var(--dim);max-width:44ch;margin-bottom:36px}

.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start;padding-top:70px}
.aside h4{font-weight:500;font-size:15px;margin-bottom:8px}
.aside .item{padding:22px 0;border-top:1px solid var(--line)}
.aside .item p{color:var(--dim);font-size:14px}

form{display:grid;gap:26px}
.field{display:grid;gap:9px}
.field label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.field label .req{color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:26px}

input,select,textarea{
  width:100%;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--line);
  padding:11px 0;font-family:inherit;font-size:15.5px;
  transition:border-color .4s var(--ease);
  border-radius:0;
}
textarea{resize:vertical;min-height:96px;line-height:1.5}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 11px) 20px,calc(100% - 6px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select option{background:var(--panel);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.field.err input,.field.err select,.field.err textarea{border-bottom-color:#a5544a}
.errmsg{font-size:11.5px;color:#a5544a;display:none}
.field.err .errmsg{display:block}

.formfoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.formfoot .note{font-size:12px;color:var(--faint);max-width:34ch}

.calslot{
  border:1px dashed var(--line);padding:40px 32px;text-align:center;
  background:rgba(255,255,255,.012);
}
.calslot h4{font-family:Georgia,serif;font-weight:400;font-size:20px;margin-bottom:10px}
.calslot p{color:var(--dim);font-size:14px;max-width:40ch;margin:0 auto 24px}

.concept{padding-top:96px}
.concept-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:20px}
.concept h3{font-size:26px}
.concept .why{color:var(--dim);font-size:14.5px;max-width:58ch;margin-top:10px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.trio .media{aspect-ratio:4/5}

.center-page{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;
  padding-top:var(--nav);
}
.timeline{margin-top:44px;display:grid;gap:0;max-width:520px}
.tl{display:grid;grid-template-columns:76px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.tl p{color:var(--dim);font-size:14px}
.tl strong{font-weight:500;font-size:15px;display:block;margin-bottom:4px}

footer{
  border-top:1px solid var(--line);padding:30px 0 46px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--faint);letter-spacing:.06em;
}
footer a{color:var(--faint);text-decoration:none;transition:color .3s}
footer a:hover{color:var(--dim)}

.js [data-reveal]{opacity:0;transform:translateY(22px)}
.js [data-reveal].in{
  opacity:1;transform:none;
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}

.js .media{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.js .media.in{clip-path:inset(0 0 0 0)}
.js .media img{transform:scale(1.11);transition:transform 1.5s var(--ease)}
.js .media.in img{transform:scale(1)}
.js .media.in:hover img{transform:scale(1.045);transition:transform .9s var(--ease)}

.js .rule{transform:scaleX(0);transition:transform 1.1s var(--ease)}
.js .rule.in{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-reveal].in{opacity:1;transform:none;transition:none}
  .js .media,.js .media.in{clip-path:none;transition:none}
  .js .media img,.js .media.in img{transform:none;transition:none}
  .js .rule,.js .rule.in{transform:none;transition:none}
  .scroll-cue span::after{animation:none}
  .prog{transition:none}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:44px var(--gut) 44px;justify-content:flex-start;order:2}
  .hero-inner{max-width:none}
  .hero-media{order:1;height:64vh;margin-top:var(--nav)}
  .hero-media::after{background:linear-gradient(180deg,rgba(10,10,11,.45),rgba(10,10,11,0) 42%)}
  .scroll-cue{display:none}
  .sec{padding-top:88px}
  .phead{padding-top:calc(var(--nav) + 56px)}
  .close{padding-top:96px;padding-bottom:84px}
  .grid{gap:26px 10px}
  .s3,.s4{grid-column:span 6}
  .s4.r32 .media{aspect-ratio:16/10}
  .steps{grid-template-columns:1fr;gap:0}
  .step{margin-top:26px}
  .rate{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .rate .amt{font-size:30px;text-align:left}
  .split{grid-template-columns:1fr;gap:52px;padding-top:52px}
  .trio{grid-template-columns:1fr;gap:10px}
  .center-page{min-height:0;padding-top:calc(var(--nav) + 72px);padding-bottom:80px}
}

@media (max-width:680px){
  .navlinks a:not(:last-child){display:none}
  .mark{font-size:14px;letter-spacing:.34em;text-indent:.34em}
}
@media (max-width:560px){
  :root{--gut:22px}
  figure{grid-column:span 3}
  .s6{grid-column:span 6}
  .row2{grid-template-columns:1fr;gap:26px}
  .navlinks{gap:18px}
  .btn{flex:1;text-align:center}
  .tl{grid-template-columns:1fr;gap:6px}
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}