/* Capital Home Solutions — Design System */
:root{
  --navy-950:#07131F;
  --navy-900:#0B1B2B;
  --navy-800:#112637;
  --navy-700:#1B3750;
  --navy-600:#2A4A68;
  --gold-500:#D4A24C;
  --gold-400:#E2B865;
  --gold-300:#EFCF89;
  --gold-200:#F5E1B0;
  --cream:#F5EEDF;
  --ivory:#FBF7EE;
  --paper:#FFFDF7;
  --ink:#0B1B2B;
  --ink-soft:#3A4A5C;
  --ink-mute:#6B7A8C;
  --line:rgba(11,27,43,.12);
  --line-strong:rgba(11,27,43,.22);
  --leaf:#2F5D4B;
  --brick:#B85C3C;
  --shadow-sm: 0 1px 2px rgba(11,27,43,.06), 0 2px 6px rgba(11,27,43,.04);
  --shadow-md: 0 8px 24px rgba(11,27,43,.08), 0 2px 8px rgba(11,27,43,.04);
  --shadow-lg: 0 24px 60px rgba(11,27,43,.14), 0 6px 18px rgba(11,27,43,.06);

  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter Tight", "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100vw;width:100%}
section,header,footer,main{max-width:100vw;overflow-x:clip}
.section{overflow:clip}
h1,h2,h3,h4,p,a,span,li{overflow-wrap:anywhere;word-break:normal}
body{
  font-family:var(--font-body);
  background:var(--ivory);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0}
img{max-width:100%;display:block}

/* Typography base */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-0.02em;margin:0;line-height:1.02}
p{margin:0;line-height:1.5}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:currentColor;opacity:.5;
}

/* Layout */
.container{max-width:1280px;margin:0 auto;padding:0 32px}
.section{padding:120px 0;position:relative}
.section-tight{padding:88px 0}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 24px;border-radius:999px;
  font-family:var(--font-body);font-weight:500;font-size:15px;
  letter-spacing:-0.01em;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--gold-500);color:var(--navy-900);box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 8px 20px rgba(212,162,76,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 28px rgba(212,162,76,.45)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--navy-900);color:var(--cream);border-color:var(--navy-900)}
.btn-dark{background:var(--navy-900);color:var(--cream)}
.btn-dark:hover{background:var(--navy-800)}
.btn svg{width:16px;height:16px}

/* Pill / tag */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  background:rgba(212,162,76,.14);
  color:var(--navy-900);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-500)}

/* Divider w/ label */
.rule{display:flex;align-items:center;gap:16px;color:var(--ink-mute)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line)}

/* Selection */
::selection{background:var(--gold-300);color:var(--navy-900)}

/* Responsive */
@media (max-width: 1100px){
  .nav-links{display:none !important}
  .nav-phone{display:none !important}
  .nav-hamburger{display:flex !important}
  .mobile-menu{display:block !important}
}
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr !important; gap:40px !important}
  .hero-scene{height:360px !important; order:2}
  .hero-copy{order:1}
  .section{padding:88px 0}
  .two-col{grid-template-columns:1fr !important; gap:48px !important}
  .four-col{grid-template-columns:repeat(2, 1fr) !important}
  .three-col{grid-template-columns:1fr !important}
  .compare-row{font-size:13px}
  .hero-form{grid-template-columns:1fr 1fr !important}
  .hero-form > button{grid-column:1/-1}
}
@media (max-width: 640px){
  .container{padding:0 16px; max-width:100vw}
  .section{padding:56px 0}
  *{max-width:100%}
  h1{font-size:clamp(32px, 9vw, 44px) !important; letter-spacing:-0.03em !important; overflow-wrap:break-word !important; hyphens:auto}
  h2{font-size:clamp(28px, 8vw, 40px) !important; letter-spacing:-0.02em !important; overflow-wrap:break-word}
  h3{font-size:clamp(20px, 5.5vw, 26px) !important}
  p{font-size:15px !important; line-height:1.55 !important}
  .eyebrow{font-size:10px !important}
  .hero-ornament{ transform: scale(.5); transform-origin: center; }

  /* Hero scene: center house, pin notice to top-left corner inside frame, card below */
  .hero-scene{
    height:auto !important;
    min-height:460px !important;
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    padding:60px 0 40px !important;
    position:relative !important;
  }
  .hero-scene > div:first-child{ /* ornament plate */
    inset:4% 8% !important;
    border-radius:24px !important;
  }
  .hero-scene img{max-width:78vw !important; max-height:240px !important; height:auto !important; width:auto !important; object-fit:contain; margin:0 auto !important}
  /* house wrapper - center */
  .hero-scene > div[style*="zIndex:2"], .hero-scene > div[style*="zIndex: 2"]{
    margin:0 auto !important; display:flex; justify-content:center; width:100%;
  }
  /* Notice stamp - pin inside top-left, not clipped */
  .hero-notice{
    transform:scale(.58) rotate(-6deg) !important;
    top:0 !important;
    left:-4px !important;
    transform-origin:top left !important;
  }
  /* Solution card - pin inside bottom-right, visible */
  .hero-solution{
    right:auto !important;
    left:8px !important;
    bottom:80px !important;
    max-width:calc(100vw - 48px) !important;
    width:auto !important;
    padding:14px 16px !important;
    font-size:12px !important;
  }
  .hero-solution [style*="fontSize"]{font-size:14px !important}
  /* Free/Confidential tag - center at bottom */
  .hero-scene > div:last-child{
    left:50% !important;
    transform:translateX(-50%) !important;
    bottom:6px !important;
    font-size:9.5px !important;
    padding:8px 14px !important;
    white-space:nowrap;
  }

  .stat-row{display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:12px !important; align-items:start !important; margin-top:32px !important}
  .stat-row > div[style*="width: 1px"]{display:none !important}
  .stat-row > div{min-width:0 !important}
  .stat-row [style*="fontSize: 34"], .stat-row [style*="fontSize:34"]{font-size:26px !important}
  .stat-row [style*="fontSize: 48"], .stat-row [style*="fontSize:48"]{font-size:26px !important}
  .consequence-grid{grid-template-columns:repeat(2, 1fr) !important; gap:10px !important}
  nav .btn{padding:8px 11px !important; font-size:11.5px !important}
  .nav-cta-text{display:none !important}
  .nav-cta-short{display:inline !important}
  .logo-sub{display:none !important}
  .logo-name{font-size:13px !important; max-width:none !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.1 !important}
  /* shrink nav chrome on mobile to free horizontal space */
  header .container > a > div:first-child{width:32px !important; height:32px !important; border-radius:8px !important}
  header .container > a > div:first-child svg{width:18px !important; height:18px !important}
  header .container > a{gap:8px !important}
  .nav-hamburger{width:34px !important; height:34px !important; border-radius:8px !important}
  header .container{gap:8px !important}
}
@media (max-width: 420px){
  .container{padding:0 14px}
  h1{font-size:30px !important}
  h2{font-size:26px !important}
  .hero-scene{min-height:420px !important; padding:56px 0 36px !important}
  .hero-scene img{max-width:72vw !important; max-height:210px !important}
  .hero-notice{transform:scale(.52) rotate(-6deg) !important; left:-8px !important}
  .hero-solution{max-width:calc(100vw - 32px) !important; font-size:11.5px !important; bottom:72px !important; left:6px !important}
  .hero-solution [style*="fontSize"]{font-size:13px !important}
  .stat-row [style*="fontSize: 34"], .stat-row [style*="fontSize:34"]{font-size:22px !important}
  .stat-row [style*="fontSize: 48"], .stat-row [style*="fontSize:48"]{font-size:22px !important}
}

/* Animations */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes floatSlow { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(1deg)} }
@keyframes spinY { from{transform:rotateY(0)} to{transform:rotateY(360deg)} }
@keyframes coinFlip { 0%{transform:rotateY(0) translateY(0)} 50%{transform:rotateY(180deg) translateY(-6px)} 100%{transform:rotateY(360deg) translateY(0)} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
@keyframes gleam { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* Noise overlay helper */
.noise{position:relative}
.noise::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><rect width='100%25' height='100%25' fill='rgba(0,0,0,0.02)'/></svg>");
}