/* Crawford Hills — High-Country Editorial: one viewport, forest green, warm brass, ivory type, and quiet motion. */
:root { --green: #20352d; --ivory: #faf8f0; --brass: #d0ad73; --panel: #e7e4da; --muted: #66746b; --ease: cubic-bezier(.23,1,.32,1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow: hidden; background: var(--green); color: var(--green); font-family: "DM Sans", Arial, sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.landing-stage { background: var(--green); color: var(--ivory); height: 100dvh; min-height: 560px; overflow: hidden; position: relative; }
.hero-media { bottom: -2%; left: -2%; position: absolute; right: -2%; top: -2%; transform: translate3d(calc(var(--pointer-x, 0) * -8px), calc(var(--pointer-y, 0) * -5px), 0) scale(1.06); transition: transform 1.2s var(--ease); }
.hero-media img { height: 100%; object-fit: cover; object-position: center; width: 100%; }
.hero-overlay { background: linear-gradient(90deg, rgba(12,27,23,.85), rgba(16,33,27,.44) 44%, rgba(10,25,21,.08)), linear-gradient(0deg, rgba(10,24,20,.55), transparent 48%); inset: 0; position: absolute; }
.hero-mist { background: radial-gradient(ellipse at 44% 61%, rgba(207,218,204,.13), transparent 30%), linear-gradient(105deg, transparent 25%, rgba(213,220,207,.07) 50%, transparent 70%); inset: -20%; mix-blend-mode: screen; opacity: .6; position: absolute; transform: translate3d(calc(var(--pointer-x, 0) * 10px), calc(var(--pointer-y, 0) * 6px), 0); }
.hero-grain { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); inset: 0; mix-blend-mode: soft-light; opacity: .16; pointer-events: none; position: absolute; }
.site-header { align-items: center; color: var(--ivory); display: flex; height: 92px; justify-content: space-between; left: 0; padding: 0 clamp(1.25rem, 5vw, 6rem); position: absolute; right: 0; top: 0; z-index: 3; }
.brand-lockup { align-items: center; display: inline-flex; gap: 12px; min-width: 220px; }.brand-mark { filter: brightness(0) invert(1); height: 42px; object-fit: contain; width: 42px; }.brand-copy { display: flex; flex-direction: column; gap: 2px; }.brand-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; font-weight: 600; letter-spacing: .015em; line-height: .9; }.brand-detail { font-size: 8px; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.header-meta { align-items: center; display: flex; font-size: 9px; gap: 14px; letter-spacing: .16em; margin-left: auto; margin-right: clamp(2rem, 5vw, 6rem); opacity: .68; text-transform: uppercase; }.header-rule { background: rgba(250,248,240,.45); height: 1px; width: 35px; }.header-cta, .hero-scroll { align-items: center; border: 0; color: currentColor; display: inline-flex; font-size: 11px; gap: 9px; letter-spacing: .14em; text-transform: uppercase; }.header-cta { background: transparent; border-bottom: 1px solid rgba(250,248,240,.55); padding: 0 0 8px; transition: border-color .2s ease, transform .2s ease; }.header-cta:hover { border-color: var(--brass); transform: translateY(-2px); }
.hero-content { display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 5rem clamp(1.25rem, 5vw, 6rem) 2rem; position: relative; z-index: 2; }.hero-kicker, .hero-caption, .hero-index, .hero-scroll, .hero-note { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }.hero-kicker { align-items: center; display: flex; gap: 10px; margin-bottom: 28px; opacity: .78; }.dot { background: #b28a52; border-radius: 50%; height: 6px; width: 6px; }.hero-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(4.15rem, 8.5vw, 9rem); font-weight: 500; letter-spacing: -.045em; line-height: .83; margin: 0; max-width: 800px; }.hero-title em, h2 em { color: var(--brass); font-style: italic; font-weight: 400; }.hero-subtitle { color: rgba(250,248,240,.83); font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.55; margin: 34px 0 0; max-width: 310px; }.hero-scroll { background: transparent; margin-top: clamp(3.4rem, 9vh, 6.25rem); opacity: .88; padding: 0; width: fit-content; }.hero-scroll-circle { align-items: center; border: 1px solid rgba(250,248,240,.5); border-radius: 50%; display: inline-flex; font-size: 17px; height: 32px; justify-content: center; transition: background .2s ease, color .2s ease; width: 32px; }.hero-scroll:hover .hero-scroll-circle { background: var(--ivory); color: var(--green); }
.hero-index { align-items: center; bottom: 47px; display: flex; gap: 10px; opacity: .6; position: absolute; right: clamp(1.25rem, 5vw, 6rem); z-index: 3; }.hero-index-rule { background: rgba(250,248,240,.5); display: inline-block; height: 1px; width: 42px; }.hero-caption { bottom: 47px; left: clamp(1.25rem, 5vw, 6rem); opacity: .56; position: absolute; z-index: 3; }.hero-note { align-items: center; bottom: 47px; display: flex; gap: 11px; position: absolute; right: 50%; transform: translateX(50%); z-index: 3; }.hero-note-line { background: #b28a52; height: 1px; width: 35px; }
.contact-backdrop { background: rgba(16,30,25,.58); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .35s ease; z-index: 10; }.contact-backdrop.is-open { opacity: 1; pointer-events: auto; }.contact-panel { background: var(--panel); bottom: 0; color: var(--green); max-width: 620px; overflow-y: auto; padding: 38px clamp(1.35rem, 4vw, 3.75rem) 36px; position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform .55s var(--ease); width: min(620px, 100%); z-index: 11; }.contact-panel.is-open { transform: translateX(0); }.panel-header { align-items: flex-start; display: flex; justify-content: space-between; }.section-label { align-items: center; color: var(--muted); display: flex; font-size: 10px; gap: 12px; letter-spacing: .18em; padding-top: 14px; text-transform: uppercase; }.section-label-line { background: #b28a52; display: inline-block; height: 1px; width: 42px; }.close-button { background: transparent; border: 0; color: var(--green); font-size: 28px; font-weight: 300; line-height: 1; padding: 2px 7px; }.panel-intro { margin: clamp(3.8rem, 9vh, 6.5rem) 0 42px; }.panel-intro h2 { color: var(--green); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(3.6rem, 6vw, 5.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .86; margin: 0; }.panel-intro p { color: var(--muted); line-height: 1.6; margin: 30px 0 21px; max-width: 315px; }.contact-email { border-bottom: 1px solid #b28a52; display: inline-flex; font-size: 12px; padding-bottom: 8px; }
.contact-form { display: flex; flex-direction: column; gap: 21px; }.form-row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }.contact-form label { display: flex; flex-direction: column; gap: 8px; }.contact-form label > span { color: var(--muted); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }.contact-form input, .contact-form select, .contact-form textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(32,53,45,.28); border-radius: 0; color: var(--green); outline: 0; padding: 7px 0 10px; resize: vertical; transition: border-color .2s ease; width: 100%; }.contact-form input::placeholder, .contact-form textarea::placeholder { color: #879087; }.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #66746b 50%), linear-gradient(135deg, #66746b 50%, transparent 50%); background-position: calc(100% - 8px) 15px, 100% 15px; background-repeat: no-repeat; background-size: 6px 6px, 6px 6px; }.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--green); }.submit-button, .text-button { align-items: center; border: 0; display: inline-flex; font-size: 11px; gap: 16px; letter-spacing: .13em; text-transform: uppercase; width: fit-content; }.submit-button { background: var(--green); color: #f3f0e8; justify-content: space-between; margin-top: 7px; min-width: 215px; padding: 16px 18px; transition: background .2s ease, transform .2s ease; }.submit-button:hover { background: #385a4a; transform: translateY(-2px); }.submit-button:disabled { cursor: wait; opacity: .65; }.form-note { color: #879087; font-size: 10px; letter-spacing: .08em; margin: -3px 0 0; text-transform: none; }.form-error { color: #8b4a3b; font-size: 12px; line-height: 1.5; margin: -3px 0 0; }.form-error a { text-decoration: underline; }.form-success { align-items: flex-start; display: flex; flex-direction: column; padding: 25px 0; }.success-icon { align-items: center; background: var(--green); border-radius: 50%; color: #f3f0e8; display: inline-flex; height: 38px; justify-content: center; width: 38px; }.form-success h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 42px; font-weight: 500; letter-spacing: -.03em; line-height: .95; margin: 32px 0 13px; }.form-success p { color: var(--muted); line-height: 1.6; margin: 0 0 28px; max-width: 310px; }.text-button { background: transparent; border-bottom: 1px solid #b28a52; color: var(--green); padding: 0 0 7px; }
@media (max-width: 760px) { body { overflow: auto; }.landing-stage { min-height: 100svh; }.site-header { height: 75px; padding-left: 1.25rem; padding-right: 1.25rem; }.brand-lockup { min-width: 0; }.brand-detail { display: none; }.brand-name { font-size: 23px; }.brand-mark { height: 36px; width: 36px; }.header-meta { display: none; }.header-cta { font-size: 9px; }.hero-content { padding-left: 1.25rem; padding-right: 1.25rem; }.hero-title { font-size: clamp(4.1rem, 18vw, 6.2rem); }.hero-subtitle { max-width: 245px; }.hero-scroll { margin-top: 55px; }.hero-index { bottom: 28px; right: 1.25rem; }.hero-caption { bottom: 28px; font-size: 8px; left: 1.25rem; }.hero-note { display: none; }.contact-panel { padding-top: 25px; }.panel-intro { margin: 48px 0 35px; }.panel-intro h2 { font-size: clamp(3.2rem, 15vw, 5rem); }.form-row { display: flex; flex-direction: column; gap: 21px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hero-media, .hero-mist, .contact-backdrop, .contact-panel, .submit-button, .header-cta { transition: none; } }