/* 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 {
html{scroll-behavior:smooth}
    section[id]{scroll-margin-top:100px}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased}
    a{color:var(--ink)}
    a:hover{color:var(--brown)}
    @keyframes heroFade{from{opacity:0}to{opacity:1}}
    @keyframes quoteRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
    @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
    @media(max-width:860px){
      [data-mq="nav-links"]{gap:18px!important;flex-wrap:wrap!important;justify-content:flex-end}
      [data-mq="form"]{grid-template-columns:1fr!important}
      [data-mq="contact-grid"]{grid-template-columns:1fr!important;gap:44px!important}
      [data-mq="contact-grid"]>div{position:static!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}
    }
}

@layer proto-inline {
.iq-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)}
.iq-s2{margin: 0px auto; padding: 0 0 0 0; height: 76px; display: flex; align-items: center; justify-content: space-between}
.iq-s3{height: 26px; display: block}
.iq-s4{display: flex; gap: 40px; align-items: center}
.iq-s5{font-size: var(--small); letter-spacing: 0.06em; text-decoration: none; color: var(--brown)}
.iq-s6{margin: 76px 0px 0px; position: relative}
.iq-s7{height: 56vh; min-height: 380px; overflow: hidden}
.iq-s8{width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; animation: 2400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal both running heroFade}
.iq-s9{position: absolute; inset: 0px; background: linear-gradient(to top, rgba(43, 29, 19, 0.62), rgba(43, 29, 19, 0.2) 55%, rgba(43, 29, 19, 0.05))}
.iq-s10{position: absolute; left: 0px; right: 0px; bottom: 0px; margin: 0px; padding: 0 0 44px 0; animation: 1800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms 1 normal both running quoteRise}
.iq-s11{margin: 0px auto}
.iq-s12{font-family: var(--serif); font-size: var(--h3); line-height: 1.45; font-weight: 400; margin: 0px; color: rgb(244, 240, 232)}
.iq-s13{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)}
.iq-s14{background: var(--cream); padding: var(--space-5) 0 var(--space-5) 0}
.iq-s15{margin: 0px auto; display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start}
.iq-s16{position: sticky; top: 120px}
.iq-s17{font-size: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); margin: 0px 0px 14px}
.iq-s18{font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; font-size: var(--h2); line-height: 1.15; margin: 0px}
.iq-s19{margin: 22px 0px 0px; max-width: var(--measure); color: var(--gray)}
.iq-s20{margin: 22px 0px 0px; font-size: var(--small); color: var(--gray)}
.iq-s21{color: var(--ink); text-decoration: underline; text-underline-offset: 3px}
.iq-s22{margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 44px; align-items: start}
.iq-s23{display: block; font-size: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px}
.iq-s24{color: rgb(163, 75, 58)}
.iq-s25{width: 100%; box-sizing: border-box; height: 40px; border-top: 0px; border-right: 0px; border-bottom: 1px solid var(--line); border-left: 0px; border-image: initial; background: transparent; font-family: var(--sans); font-size: var(--body); line-height: 1.4; color: var(--ink); padding: 10px 0px; border-radius: 0px}
.iq-s26{width: 100%; box-sizing: border-box; height: 40px; border-top: 0px; border-right: 0px; border-bottom: 1px solid var(--line); border-left: 0px; border-image: initial; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2Ij48cGF0aCBkPSJNMCAwbDUgNiA1LTZ6IiBmaWxsPSIjOEE3QTZBIi8+PC9zdmc+) right center no-repeat transparent; font-family: var(--sans); font-size: var(--body); line-height: 1.4; color: var(--ink); padding: 10px 26px 10px 0px; border-radius: 0px; appearance: none; cursor: pointer}
.iq-s27{grid-column: 1 / -1}
.iq-s28{display: block; font-size: var(--eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); margin-bottom: 4px}
.iq-s29{margin: 0px 0px 6px; font-size: var(--eyebrow); letter-spacing: 0.02em; color: var(--gray); text-transform: none}
.iq-s30{width: 100%; border-top: 0px; border-right: 0px; border-bottom: 1px solid var(--line); border-left: 0px; border-image: initial; background: transparent; font-family: var(--sans); font-size: var(--body); color: var(--ink); padding: 10px 0px; border-radius: 0px; resize: vertical; min-height: 64px; line-height: 1.6}
.iq-s31{margin: 6px 0px 0px; font-size: var(--eyebrow); letter-spacing: 0.06em; color: var(--gray)}
.iq-s32{grid-column: 1 / -1; justify-self: start; margin-top: 8px; font-family: var(--sans); font-size: var(--small); letter-spacing: 0.06em; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 15px 34px; cursor: pointer; transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.iq-s33{background: var(--ink); color: var(--cream); padding: 0px}
.iq-s34{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}
.iq-s35{height: 22px; width: auto; filter: invert(93%) sepia(8%) saturate(300%) hue-rotate(340deg) brightness(103%)}
.iq-s36{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}
.iq-s37{display: flex; flex-direction: column; gap: 12px; font-size: var(--small)}
.iq-s38{color: var(--cream); text-decoration: none}
.iq-s39{transform: translateX(-18px)}
.iq-s40{color: rgba(234, 227, 214, 0.85)}
.iq-s41{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 {
.iq-h1:hover,a:hover .iq-h1,a:focus-visible .iq-h1{color:var(--ink)}
.iq-h2:hover,a:hover .iq-h2,a:focus-visible .iq-h2{color:var(--brown)}
.iq-h3:hover,a:hover .iq-h3,a:focus-visible .iq-h3{transform:translateY(-2px);background:var(--brown);border-color:var(--brown)}
.iq-h4:hover,a:hover .iq-h4,a:focus-visible .iq-h4{text-decoration:underline;text-underline-offset:3px}
.iq-f1:focus{outline:none;border-bottom-color:var(--ink)}
}