/* GENERATED by build/port_captured.py - do not hand-edit.
   Every rule is a verbatim port of an inline style, style-hover or
   style-focus from the Claude Design prototype.
   Layer order is declared in css/fonts.css; it reproduces the
   prototype's real precedence, where inline styles beat the page's own
   stylesheet and JS-applied hover beats both. */

@layer proto-scoped {
:root{
    --cream:#EAE3D6;
    --paper:#F4F0E8;
    --ink:#3B3128;
    --brown:#494134;
    --slate:#6B6459;
    --mist:#9dacb5;
    --line:#DCD4C5;
    --serif:'STIX Two Text', Georgia, serif;
    --sans:'neue-haas-grotesk-text','Neue Haas Grotesk Text Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @keyframes heroFade{from{opacity:0}to{opacity:1}}
  @keyframes quoteRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  body{font-family:var(--sans);font-weight:300;background:var(--paper);color:var(--ink);font-size:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased}
  img{display:block;width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  .label{font-size:var(--eyebrow);letter-spacing:.28em;text-transform:uppercase;font-weight:400;color:var(--brown)}
  h1,h2,h3{font-family:var(--serif);font-weight:400}

  header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding: 26px var(--margin-page);background:rgba(244,240,232,.92);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
  header.scrolled{border-bottom-color:var(--line)}
  .nav-logo img{width:190px}
  .logo-mark{display:none;width:32px}


  .btn{display:inline-block;font-size:var(--eyebrow);letter-spacing:.28em;text-transform:uppercase;border:1px solid var(--ink);padding:16px 42px;transition:all .3s;font-weight:400;cursor:pointer;background:transparent;font-family:var(--sans)}
  .btn:hover{background:var(--ink);color:var(--paper)}
  .btn-solid{background:var(--ink);color:var(--paper)}
  .btn-solid:hover{background:var(--brown);border-color:var(--brown)}

  .hero{position:relative;height:70vh;min-height:420px;overflow:hidden;margin-top:76px}
  .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroFade 2400ms cubic-bezier(.25,.46,.45,.94) both}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  .product{display:grid;grid-template-columns:7fr 5fr;gap:80px;margin:0 auto;padding: var(--space-5) var(--margin-page) var(--space-5) var(--margin-page);align-items:start}
  .product .crumb{font-size:var(--eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--slate);margin-bottom:24px;display:block}
  .product h1{font-size:var(--h1);line-height:1.14;margin-bottom:16px}
  .product .specs{font-size:var(--small);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:28px}
  .product p{color:var(--warm-gray);margin-bottom:16px}
  .buy{padding:0;position:sticky;top:120px}
  .buy .price{font-family:var(--serif);font-size:32px;margin-bottom:4px}
  .buy .price-note{font-size:var(--small);color:var(--slate);margin-bottom:26px}
  .buy ul{list-style:none;margin-bottom:30px;font-size:var(--small)}
  .buy ul li{padding:9px 0;border-top:1px solid var(--line);line-height:1.5}
  .buy .btn{width:100%;text-align:center}
  .buy .fine{font-size:var(--eyebrow);color:var(--slate);margin-top:16px;text-align:center}

  .gallery{margin:0 auto;padding: 0 var(--margin-page) var(--space-5) var(--margin-page);display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .gallery img{aspect-ratio:4/3;object-fit:cover}

  .custom{background:var(--ink);color:var(--cream);text-align:center;padding:var(--space-6) var(--margin-page)}
  .custom h2{color:var(--cream);font-size:var(--h2);margin:14px 0 18px}
  .custom p{color:var(--line);max-width:54ch;margin:0 auto 36px}
  .custom .label{color:var(--mist);display:block}
  .custom .btn{border-color:rgba(234,227,214,.4);color:var(--cream)}
  .custom .btn:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
  .foot-inner{margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px}
  .foot-inner img{width:60px;filter:invert(93%) sepia(8%) saturate(300%) hue-rotate(340deg) brightness(103%)}
  .foot-inner .fine{font-size:var(--eyebrow);letter-spacing:.18em;text-transform:uppercase;color:rgba(234,227,214,.55)}
  .foot-links{display:flex;flex-direction:column;gap:8px}
  .foot-links a{font-size:var(--small);border-bottom:1px solid rgba(234,227,214,.3);width:fit-content;padding-bottom:2px}

  @media(max-width:900px){
    header{padding:20px 24px}
    .nav-logo img{width:150px}
    [data-mq="nav-links"]{gap:18px!important}
    [data-mq="band"]{grid-template-columns:1fr!important;gap:44px!important}
    [data-mq="footer"]{grid-template-columns:1fr!important;gap:28px!important}
      [data-mq="footer"] h2{margin-bottom:12px!important}
      [data-mq="footer"]>div{transform:none!important}
      [data-mq="footer-bottom"]{flex-direction:column!important;gap:6px!important;align-items:flex-start!important}
    .product{grid-template-columns:1fr;gap:44px;padding: 60px var(--margin-page) 60px var(--margin-page)}
    .buy{position:static}
    .gallery{grid-template-columns:1fr;padding: 0 var(--margin-page) 60px var(--margin-page)}
    .hero{height:52vh}
    .custom{padding:70px 24px}
  }
  @media(max-width:640px){
    .logo-full{display:none}
    .nav-logo .logo-mark{display:block}
  }
}

@layer proto-inline {
.rh-s1{position: fixed; top: 0px; left: 0px; right: 0px; z-index: 20; background: rgba(244, 240, 232, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line)}
.rh-s2{margin: 0px auto; padding: 0 0 0 0; height: 76px; display: flex; align-items: center; justify-content: space-between}
.rh-s3{height: 26px; display: block}
.rh-s4{display: flex; gap: 40px; align-items: center}
.rh-s5{font-size: var(--small); letter-spacing: 0.06em; text-decoration: none; color: var(--brown)}
.rh-s6{position: absolute; inset: 0px; background: linear-gradient(to top, rgba(43, 29, 19, 0.55), rgba(43, 29, 19, 0.15) 55%, rgba(43, 29, 19, 0.05))}
.rh-s7{position: absolute; left: 0px; right: 0px; bottom: 0px; margin: 0px; padding: 0 0 var(--space-4) 0; animation: 1800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms 1 normal both running quoteRise}
.rh-s8{margin: 0px auto}
.rh-s9{font-family: var(--serif); font-size: var(--h3); line-height: 1.45; font-weight: 400; margin: 0px; color: rgb(244, 240, 232)}
.rh-s10{display: block; margin-top: 14px; font-style: normal; font-size: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 240, 232, 0.75)}
.rh-s11{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 26px}
.rh-s12{font-family: var(--sans); font-size: var(--eyebrow); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 400; padding: 12px 2px; white-space: nowrap; cursor: pointer; background: var(--ink); color: var(--paper); border: 1px solid var(--line); transition: background 250ms, color 250ms}
.rh-s13{font-family: var(--sans); font-size: var(--eyebrow); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 400; padding: 12px 2px; white-space: nowrap; cursor: pointer; background: transparent; color: var(--brown); border: 1px solid var(--line); transition: background 250ms, color 250ms}
.rh-s14{font-size: var(--eyebrow); color: var(--slate); margin: -14px 0px 26px; line-height: 1.6}
.rh-s15{grid-template-columns: none; display: flex; align-items: stretch; gap: 20px; opacity: 0; transform: translateY(16px); transition: opacity 1600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.rh-s16{aspect-ratio: 1422 / 1106; object-fit: unset; flex: 1286 1 0px; min-width: 0px; width: auto; height: auto; cursor: zoom-in}
.rh-s17{aspect-ratio: 1233 / 1276; object-fit: unset; flex: 966 1 0px; min-width: 0px; width: auto; height: auto; cursor: zoom-in}
.rh-s18{margin: -70px auto 0px; padding: 14px 0 0 0; font-size: var(--eyebrow); letter-spacing: 0.06em; color: var(--slate)}
.rh-s19{margin: 0px auto; padding: 70px 0 90px 0}
.rh-s20{display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: start; opacity: 0; transform: translateY(16px); transition: opacity 1600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.rh-s21{color: var(--warm-gray); margin-bottom: 16px}
.rh-s22{color: var(--warm-gray); margin-bottom: 0px}
.rh-s23{width: 190px; margin: 0px auto}
.rh-s24{width: 100%; height: auto; display: block; cursor: zoom-in}
.rh-s25{margin: 22px 0px 0px; font-size: var(--small); line-height: 1.7; color: var(--slate)}
.rh-s26{margin-top: 30px; border-top: 1px solid var(--line)}
.rh-s27{margin-top: 56px; opacity: 0; transform: translateY(16px); transition: opacity 1600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.rh-s28{margin-bottom: 18px}
.rh-s29{position: relative; overflow: hidden; cursor: crosshair}
.rh-s30{width: 100%; height: auto; display: block}
.rh-s31{position: absolute; width: 260px; height: 260px; border: 1px solid rgba(26, 22, 18, 0.35); box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 36px; background: var(--paper) url('/assets/proj/ranch-plan-full.png') no-repeat; pointer-events: none; display: none; z-index: 5}
.rh-s32{margin-top: 96px; display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start}
.rh-s33{width: 180px; margin: 0px auto}
.rh-s34{width: 190px; height: 230px; object-fit: cover; object-position: center center; display: block; cursor: zoom-in}
.rh-s35{padding: var(--space-4) 0 var(--space-4) 0; border-top: 1px solid var(--line)}
.rh-s36{margin: 0px auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap}
.rh-s37{font-size: var(--small); letter-spacing: 0.06em; color: var(--slate)}
.rh-s38{color: var(--ink); text-align: right}
.rh-s39{display: block; font-size: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate)}
.rh-s40{display: block; font-family: var(--serif); font-size: var(--h4); margin-top: 6px}
.rh-s41{opacity: 0; transform: translateY(16px); transition: opacity 1600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1600ms cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.rh-s42{font-size: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; margin: -14px auto 36px; white-space: nowrap; max-width: none}
.rh-s43{background: var(--ink); color: var(--cream); padding: 0px}
.rh-s44{margin: 0px auto; padding: var(--space-5) 0 var(--space-4) 0; display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr; gap: 24px; align-items: start}
.rh-s45{height: 22px; width: auto; filter: invert(93%) sepia(8%) saturate(300%) hue-rotate(340deg) brightness(103%)}
.rh-s46{font-size: var(--eyebrow); font-family: var(--sans); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(234, 227, 214, 0.65); margin: 0px 0px 30px}
.rh-s47{display: flex; flex-direction: column; gap: 12px; font-size: var(--small)}
.rh-s48{color: var(--cream); text-decoration: none}
.rh-s49{transform: translateX(-18px)}
.rh-s50{color: rgba(234, 227, 214, 0.85)}
.rh-s51{margin: 0px auto; padding: var(--space-4) 0 var(--space-4) 0; display: flex; justify-content: space-between; gap: 16px; font-size: var(--small); letter-spacing: 0.02em; color: rgba(234, 227, 214, 0.55)}
}

@layer proto-state {
.rh-h1:hover,a:hover .rh-h1,a:focus-visible .rh-h1{color:var(--ink)}
.rh-h2:hover,a:hover .rh-h2,a:focus-visible .rh-h2{color:var(--brown)}
.rh-h3:hover,a:hover .rh-h3,a:focus-visible .rh-h3{text-decoration:underline;text-underline-offset:3px}
}