/* The Ivy Hacker — ivyhacker.com
   Palette + type system lifted from the approved site sketch / booklet:
   near-black, ice blue, thin spaced caps (Selawik), Georgia body. */

@font-face{
  font-family:'Selawik';
  src:url('fonts/selawkl.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Selawik';
  src:url('fonts/selawksl.woff2') format('woff2');
  font-weight:350;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Selawik';
  src:url('fonts/selawk.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Selawik';
  src:url('fonts/selawksb.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --ink:#0a0e12; --panel:#10161c; --raise:#141c24; --line:#1d2733;
  --text:#e8edf1; --dim:#8fa3b0; --ice:#a8cfe0; --steel:#5a7484;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Selawik','Segoe UI',Arial,sans-serif;
  --mono:Consolas,'Courier New',monospace;
}

*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--serif);font-size:16px;line-height:1.7;
  margin:0;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--ice);text-decoration:none;border-bottom:1px dotted var(--steel)}
a:hover{border-bottom-color:var(--ice)}

.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;gap:28px;
  padding:26px 0 24px;font-family:var(--sans);
}
.nav .mark{display:flex;align-items:center;gap:12px;border:0;color:var(--ice)}
.mark svg{display:block;width:30px;height:34px}
.mark span{
  font-size:11px;font-weight:350;letter-spacing:.32em;text-transform:uppercase;
  color:var(--text);white-space:nowrap;
}
.nav-links{display:flex;gap:24px;margin-left:8px}
.nav-links a{
  font-size:10px;font-weight:350;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid transparent;padding-bottom:3px;
}
.nav-links a:hover{color:var(--text)}
.nav-links a.on{color:var(--text);border-bottom-color:var(--ice)}
.cta{
  margin-left:auto;font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  background:var(--ice);padding:11px 18px;border-bottom:0;white-space:nowrap;
}
.cta:hover{background:#c2dfec;border-bottom:0}

/* ---------- shared atoms ---------- */
.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,var(--ice),rgba(168,207,224,0) 70%)}
section{padding:64px 0 8px}
.eyebrow{
  font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ice);margin:0 0 14px;
}
h2{
  font-family:var(--sans);font-weight:300;text-transform:uppercase;
  letter-spacing:.24em;font-size:22px;line-height:1.5;margin:0 0 22px;color:var(--text);
}
p{margin:0 0 18px;color:var(--dim);max-width:64ch}
p strong{color:var(--text)}
blockquote{
  margin:0 0 18px;padding:2px 0 2px 18px;border-left:1px solid var(--ice);
  color:var(--text);font-style:italic;max-width:60ch;
}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px}
.hero h1{
  font-family:var(--sans);font-weight:300;text-transform:uppercase;
  letter-spacing:.3em;font-size:clamp(30px,5.4vw,54px);line-height:1.45;
  margin:0;color:var(--text);
}
.hero h1 .hl{color:var(--ice)}
.hero .tagline{
  font-family:var(--sans);font-weight:350;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim);margin:22px 0 0;max-width:none;
}
.hero .motto{
  font-family:var(--sans);font-weight:300;font-size:15px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ice);margin:34px 0 0;max-width:none;
}
.hero .fees-line{
  font-family:var(--mono);font-size:12px;color:var(--steel);margin:12px 0 0;max-width:none;
}
.hero .seen{
  font-family:var(--sans);font-size:9.5px;font-weight:350;letter-spacing:.28em;
  text-transform:uppercase;color:var(--steel);margin:40px 0 0;max-width:none;
}
.hero .seen b{color:var(--dim);font-weight:600}

/* ---------- story grid (text + video) ---------- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.video{
  position:relative;aspect-ratio:16/9;border:1px solid var(--line);
  background:var(--raise);overflow:hidden;cursor:pointer;
}
.video img{width:100%;height:100%;object-fit:cover;opacity:.85}
.video .scrim{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;background:rgba(10,14,18,.35);
}
.video:hover .scrim{background:rgba(10,14,18,.2)}
.play{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--ice);
  display:flex;align-items:center;justify-content:center;color:var(--ice);
  font-family:var(--sans);font-size:16px;padding-left:5px;
  background:rgba(10,14,18,.55);
}
.video .vlabel{
  font-family:var(--sans);font-size:9px;font-weight:350;letter-spacing:.26em;
  text-transform:uppercase;color:var(--text);text-shadow:0 1px 8px #0a0e12;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- book row ---------- */
.book{
  display:flex;gap:20px;margin-top:30px;align-items:center;
  border:1px solid var(--line);background:var(--panel);padding:18px 20px;max-width:520px;
}
.book img{width:74px;height:auto;border:1px solid var(--line)}
.book p{margin:0;font-size:14px}

/* ---------- booking band ---------- */
.band{
  margin:44px 0 22px;border:1px solid var(--steel);
  background:linear-gradient(180deg,#16222c,var(--panel));
  padding:28px 30px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.band .band-title{
  font-family:var(--sans);font-weight:300;font-size:16px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text);
}
.band p{margin:8px 0 0;font-size:13.5px;max-width:52ch}
.band .cta{margin-left:auto}
@media(max-width:700px){.band .cta{margin-left:0}}

/* ---------- doors ---------- */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
.door{
  border:1px solid var(--line);background:var(--raise);padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:10px;min-height:158px;border-bottom:1px solid var(--line);
}
.door:hover{border-color:var(--steel)}
.door b{
  font-family:var(--sans);font-weight:350;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text);
}
.door p{margin:0;font-size:13px;flex:1}
.door span{
  font-family:var(--sans);font-size:9px;font-weight:350;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ice);
}

/* ---------- who: tabs ---------- */
.tabs{display:flex;border:1px solid var(--line);font-family:var(--sans);margin:8px 0 40px}
.tabs a{
  flex:1;text-align:center;padding:14px 6px;font-size:10px;font-weight:350;
  letter-spacing:.22em;text-transform:uppercase;color:var(--steel);
  border-right:1px solid var(--line);border-bottom:0;
}
.tabs a:last-child{border-right:0}
.tabs a:hover{color:var(--dim)}
.tabs a.on{background:var(--raise);color:var(--ice);box-shadow:inset 0 -1px 0 var(--ice)}
.tabs .short{display:none}
@media(max-width:560px){
  .tabs .long{display:none}
  .tabs .short{display:inline}
}
.panel{display:none}
.panel.on{display:block}

.fees-note{font-family:var(--mono);font-size:12.5px;color:var(--steel);margin:0 0 6px;max-width:none}
.fees-note a{font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;font-size:10px;margin-left:10px}

/* ---------- tips (accordions) ---------- */
.tips-h{
  font-family:var(--sans);font-weight:300;font-size:15px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--text);margin:40px 0 14px;
}
details.tip{border:1px solid var(--line);background:var(--raise);margin-top:12px}
details.tip summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 18px;cursor:pointer;list-style:none;
  font-family:var(--sans);font-weight:350;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text);
}
details.tip summary::-webkit-details-marker{display:none}
details.tip summary::after{content:'+';color:var(--ice);font-size:16px;font-family:var(--sans);flex:none}
details.tip[open] summary::after{content:'−'}
details.tip .a{padding:2px 18px 8px}
details.tip .a p{font-size:14.5px}

/* ---------- lists ---------- */
ol.plan,ul.offer-list{margin:0 0 18px;padding-left:22px;color:var(--dim);max-width:62ch}
ol.plan li,ul.offer-list li{margin-bottom:8px}

.qlist{list-style:none;margin:0 0 26px;padding:0;max-width:62ch}
.qlist li{
  border-left:1px solid var(--ice);padding:4px 0 4px 16px;margin-bottom:12px;
  color:var(--text);font-style:italic;
}

/* ---------- ghost button / exit ramps ---------- */
.ghost{
  display:inline-block;font-family:var(--sans);font-size:10px;font-weight:350;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ice);
  border:1px solid var(--steel);padding:11px 20px;margin-top:8px;
}
.ghost:hover{border-color:var(--ice)}

/* ---------- fees page ---------- */
.fee-lede{font-size:17px}
.est-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.est{border:1px solid var(--line);background:var(--panel);padding:22px 24px}
.est h3{
  font-family:var(--sans);font-weight:350;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ice);margin:0 0 16px;
}
.est p{font-size:14px}
.est .row{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:12px 0 0;margin:0 0 12px}
.est .row:first-of-type{border-top:0;padding-top:0}
.est .row .k{color:var(--dim);font-size:14px;max-width:38ch}
.est .row .v{font-family:var(--mono);font-size:12px;color:var(--text);white-space:nowrap}
.est .hrs{font-family:var(--mono);font-size:12.5px;color:var(--text);white-space:nowrap}

/* ---------- contact form ---------- */
.cform{max-width:560px;margin-top:34px;display:flex;flex-direction:column;gap:18px}
.cform label{display:flex;flex-direction:column;gap:8px}
.cform label span{
  font-family:var(--sans);font-weight:350;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--dim);
}
.cform input,.cform textarea{
  font-family:var(--serif);font-size:15px;color:var(--text);
  background:var(--raise);border:1px solid var(--line);padding:12px 14px;
  border-radius:0;outline:none;resize:vertical;
}
.cform input:focus,.cform textarea:focus{border-color:var(--steel)}
.cform .hp{position:absolute;left:-9999px;top:-9999px}
.cform-foot{display:flex;align-items:center;gap:20px;margin-top:6px}
.cform-foot .cta{margin-left:0;border:0;cursor:pointer}
.cform-foot .cta:disabled{opacity:.5;cursor:default}
#contact-status{margin:0;font-size:13.5px;color:var(--ice)}

/* ---------- footer ---------- */
footer{margin-top:70px;border-top:1px solid var(--line);padding:30px 0 48px}
footer .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
footer .fmark{
  font-family:var(--sans);font-weight:350;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim);
}
footer .flinks{display:flex;gap:20px;margin-left:auto;font-family:var(--sans)}
footer .flinks a{font-size:9.5px;font-weight:350;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
footer .flinks a:hover{color:var(--ice)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .doors{grid-template-columns:repeat(2,1fr)}
  .est-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nav{flex-wrap:wrap;gap:16px}
  .nav-links{gap:16px}
  .cta{margin-left:0}
  .hero{padding:48px 0 40px}
}