@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --navy:#16283D;
  --navy-2:#1F3A54;
  --chalk:#F5F6F2;
  --ink:#1B2733;
  --slate:#5B6B78;
  --line:#D7DBD4;
  --blue:#4A7FA5;
  --brass:#A9793C;
  --brass-light:#F1E4D0;
  --white:#FFFFFF;
  --radius:6px;
  --font-display:'Fraunces', serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

html,body{overflow-x:hidden;max-width:100%;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--chalk);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--blue);}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0 0 .5em;color:var(--navy);}
p{margin:0 0 1em;color:var(--slate);}
.container{max-width:1080px;margin:0 auto;padding:0 20px;}
.mono{font-family:var(--font-mono);}

/* Skip link */
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100;}
.skip-link:focus{left:10px;top:10px;}

/* Header */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--white);
  position:sticky;top:0;z-index:20;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:20px;
  color:var(--navy);text-decoration:none;
}
.brand-mark{
  width:26px;height:26px;border:1.5px solid var(--navy);
  position:relative;flex-shrink:0;
}
.brand-mark::before,.brand-mark::after{
  content:"";position:absolute;background:var(--brass);
}
.brand-mark::before{width:100%;height:1.5px;top:50%;left:0;transform:translateY(-50%);}
.brand-mark::after{height:100%;width:1.5px;left:50%;top:0;transform:translateX(-50%);}
nav.primary-nav{display:flex;gap:28px;}
nav.primary-nav a{
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;
}
nav.primary-nav a:hover{color:var(--blue);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;}

/* Hero — blueprint panel */
.hero{
  background:var(--navy);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:28px 28px;
  color:#fff;
  padding:56px 0 64px;
  position:relative;
}
.hero .container{position:relative;}
.eyebrow-line{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;
  color:#B9C7D3;margin-bottom:18px;text-transform:uppercase;
}
.eyebrow-line::before{content:"";flex:0 0 26px;height:1px;background:#B9C7D3;}
.hero h1{
  color:#fff;font-size:clamp(30px,4.4vw,46px);max-width:760px;margin-bottom:14px;
}
.hero p.lede{color:#C9D3DA;max-width:600px;font-size:17px;margin-bottom:0;}

/* Registration corner marks — signature motif */
.blueprint-frame{
  position:relative;
  border:1px solid rgba(255,255,255,.18);
  padding:28px 24px;
  margin-top:36px;
  background:rgba(255,255,255,.03);
}
.blueprint-frame .tick{position:absolute;width:14px;height:14px;}
.blueprint-frame .tick::before,.blueprint-frame .tick::after{content:"";position:absolute;background:var(--brass);}
.tick.tl{top:-1px;left:-1px;}
.tick.tr{top:-1px;right:-1px;}
.tick.bl{bottom:-1px;left:-1px;}
.tick.br{bottom:-1px;right:-1px;}
.tick::before{width:14px;height:2px;}
.tick::after{width:2px;height:14px;}
.tick.tl::before,.tick.tl::after{top:0;left:0;}
.tick.tr::before{top:0;right:0;}
.tick.tr::after{top:0;right:0;}
.tick.bl::before{bottom:0;left:0;}
.tick.bl::after{bottom:0;left:0;}
.tick.br::before{bottom:0;right:0;}
.tick.br::after{bottom:0;right:0;}

/* Calculator layout */
.calc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;}
@media (max-width:820px){.calc-grid{grid-template-columns:1fr;}}

.field{margin-bottom:16px;}
.field-label-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px;gap:10px;flex-wrap:wrap;
}
.field-label-row label{
  font-size:13px;color:#B9C7D3;font-family:var(--font-mono);letter-spacing:.02em;
}
.field-number-wrap{
  display:flex;align-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:4px;background:rgba(255,255,255,.06);
  overflow:hidden;flex:0 0 auto;
}
.field-number-wrap .field-prefix,.field-number-wrap .field-suffix{
  color:#B9C7D3;font-family:var(--font-mono);font-size:14px;padding:0 6px;user-select:none;
}
.field-number{
  width:96px;text-align:right;padding:6px 6px;border:none;background:transparent;
  color:#fff;font-family:var(--font-mono);font-size:14px;outline:none;
}
.field-number-wrap .field-suffix{padding-right:9px;}
.field-number-wrap .field-prefix{padding-left:9px;}
/* Remove native number spinner arrows for a cleaner look */
.field-number::-webkit-outer-spin-button,.field-number::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.field-number{-moz-appearance:textfield;}
.field-number-wrap:focus-within{border-color:var(--brass);}
.field input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:3px;
  background: linear-gradient(to right, var(--brass) 0%, var(--brass) var(--fill,0%), rgba(255,255,255,.18) var(--fill,0%), rgba(255,255,255,.18) 100%);
  cursor:pointer;
  outline:none;
}
.field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--brass);
  border:2px solid #fff;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.field input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--brass);border:2px solid #fff;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.field input[type="range"]::-moz-range-track{
  height:6px;border-radius:3px;background:transparent;
}
.field input[type="number"],.field select{
  width:100%;padding:9px 10px;border:1px solid rgba(255,255,255,.25);
  border-radius:4px;background:rgba(255,255,255,.06);color:#fff;
  font-family:var(--font-mono);font-size:15px;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.toggle-row{display:flex;gap:8px;margin-bottom:16px;}
.toggle-row button{
  flex:1;padding:9px 6px;border:1px solid rgba(255,255,255,.25);background:transparent;
  color:#B9C7D3;border-radius:4px;font-family:var(--font-mono);font-size:13.5px;cursor:pointer;
}
.toggle-row button.active{background:var(--brass);border-color:var(--brass);color:#1B2733;font-weight:500;}

/* Results panel */
.results-panel{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.15);
  border-radius:2px;
  padding:0;
}
.result-total{
  padding:20px;border-bottom:1px dashed rgba(255,255,255,.25);
}
.result-total .amount{font-family:var(--font-mono);font-size:40px;color:#fff;font-weight:500;line-height:1;}
.result-total .label{font-size:12.5px;color:#B9C7D3;text-transform:uppercase;letter-spacing:.06em;margin-top:6px;font-family:var(--font-mono);}
.breakdown{padding:6px 20px 20px;}
.breakdown-row{
  display:flex;justify-content:space-between;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.12);font-size:14.5px;
}
.breakdown-row .name{color:#C9D3DA;display:flex;align-items:center;gap:8px;}
.swatch{width:9px;height:9px;flex:0 0 9px;}
.breakdown-row .amt{color:#fff;font-family:var(--font-mono);}
.bar{height:10px;display:flex;overflow:hidden;margin-top:14px;border-radius:2px;background:rgba(255,255,255,.08);}
.bar span{height:100%;}

/* Sections */
section.block{padding:56px 0;}
section.block.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.dimension-label{
  font-family:var(--font-mono);font-size:12.5px;color:var(--brass);
  text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.dimension-label::before{content:"";width:22px;height:1px;background:var(--brass);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media (max-width:760px){.two-col{grid-template-columns:1fr;gap:8px;}}

.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;}
@media (max-width:700px){.stat-cards{grid-template-columns:1fr;}}
.stat-card{background:#fff;border:1px solid var(--line);padding:18px 18px;}
.stat-card .num{font-family:var(--font-mono);font-size:24px;color:var(--navy);}
.stat-card .lbl{font-size:13px;color:var(--slate);margin-top:4px;}

/* Amortization table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);margin-top:20px;}
table.amort{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:13.5px;min-width:560px;}
table.amort th{
  text-align:right;background:var(--navy);color:#fff;padding:10px 12px;font-weight:500;
  position:sticky;top:0;
}
table.amort th:first-child,table.amort td:first-child{text-align:left;}
table.amort td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line);}
table.amort tr:nth-child(even){background:#FAFAF7;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);padding:16px 0;}
.faq-item summary{cursor:pointer;font-weight:500;color:var(--navy);font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:20px;color:var(--brass);}
.faq-item[open] summary::after{content:"\2212";}
.faq-item p{margin-top:10px;}

/* Ad slots */
.ad-slot{
  background:#EFEFEA;border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
  min-height:100px;color:var(--slate);font-family:var(--font-mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;margin:32px 0;
}
.ad-slot.leaderboard{min-height:90px;}
.ad-slot.rectangle{min-height:250px;max-width:336px;margin-left:auto;margin-right:auto;}

/* Footer */
footer.site-footer{
  background:var(--navy);color:#B9C7D3;padding:40px 0 24px;font-size:14px;
}
footer.site-footer a{color:#DCE4E9;}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:28px;}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;}
.footer-note{border-top:1px solid rgba(255,255,255,.15);padding-top:18px;font-size:12.5px;color:#8FA0AC;}

/* Light-background card with corner ticks — for use outside the dark hero */
.info-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  padding:32px 28px;
  margin-top:8px;
}
.info-card .tick::before,.info-card .tick::after{background:var(--brass);}
.contact-row{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line);
}
.contact-row:last-child{border-bottom:none;}
.contact-row .icon{
  width:36px;height:36px;flex:0 0 36px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--brass);
  font-family:var(--font-mono);font-size:15px;
}
.contact-row .label{font-size:12.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);margin-bottom:2px;}
.contact-row .value{font-size:16px;color:var(--navy);}
.contact-row .value a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--brass);}
.contact-row .value a:hover{color:var(--brass);}

.self-serve-list{list-style:none;margin:0;padding:0;}
.self-serve-list li{padding:10px 0;border-bottom:1px solid var(--line);}
.self-serve-list li:last-child{border-bottom:none;}
.self-serve-list a{color:var(--navy);text-decoration:none;font-weight:500;}
.self-serve-list a:hover{color:var(--blue);}
.self-serve-list .sub{display:block;font-size:13.5px;color:var(--slate);font-weight:400;margin-top:2px;}
.btn{
  display:inline-block;padding:12px 22px;border-radius:4px;
  font-family:var(--font-mono);font-size:14px;text-decoration:none;
  border:1px solid var(--navy);color:var(--navy);
}
.btn.brass{background:var(--brass);border-color:var(--brass);color:#fff;}

@media (max-width:760px){
  nav.primary-nav{display:none;}
  .nav-toggle{display:inline-flex;}
  .stat-cards{gap:12px;}
}

@media (max-width:480px){
  .blueprint-frame{padding:20px 14px;margin-top:24px;}
  .hero{padding:40px 0 48px;}
  .field-number{width:80px !important;}
  .field-number-wrap{max-width:100%;}
  .container{padding:0 14px;}
  .field-row{grid-template-columns:1fr;}
}