:root { --ink: #63432f; --ink-deep: #402719; --sand: #f8eddd; --cream: #fffaf2; --clay: #bc8b50; --clay-soft: #e5c59b; --line: rgba(99,67,47,.22); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; font-size: 16px; }
a { color: inherit; text-decoration: none; }
.topline { background: var(--ink-deep); color: #f9ead7; text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 10px 20px; }
.site-header { min-height: 82px; padding: 13px 5.2vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,250,242,.92); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.brand-coyote { border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; height: 44px; width: 44px; font-family: Georgia,serif; font-weight: 800; font-size: 15px; }
.brand b { display: block; font-family: Rye, Georgia, serif; font-size: 14px; font-weight: 400; }
.brand small { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .21em; }
nav { display: flex; align-items: center; gap: 28px; font-weight: 600; font-size: 14px; }
nav a:not(.nav-call) { transition: color .2s; } nav a:not(.nav-call):hover { color: var(--clay); }
.nav-call, .button { border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 13px 18px; font-weight: 700; transition: transform .2s, background .2s; }
.nav-call { background: var(--ink); color: var(--sand); padding: 12px 16px; } .nav-call:hover, .button:hover { transform: translateY(-2px); }
.menu-toggle { display: none; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; }
.hero { min-height: 640px; overflow: hidden; position: relative; padding: 96px 8vw 94px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; background: var(--sand); }
.hero-copy { position: relative; z-index: 2; max-width: 650px; }
.eyebrow, .section-kicker { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 700; }
.eyebrow span { display: inline-block; width: 30px; height: 2px; vertical-align: middle; margin: 0 9px 3px 0; background: currentColor; }
h1,h2,h3 { margin: 0; } h1, h2 { font-family: Rye, Georgia, serif; font-weight: 400; letter-spacing: -.02em; line-height: 1.12; }
h1 { font-size: clamp(48px,6.4vw,88px); max-width: 690px; } h1 em, h2 em { color: var(--clay); font-style: normal; }
.hero-text { max-width: 505px; margin: 27px 0 30px; font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; gap: 28px; align-items: center; }
.button-dark { background: var(--ink); color: var(--sand); padding: 16px 21px; }
.button span { font-size: 20px; font-weight: 400; }.text-link { font-weight: 700; border-bottom: 1px solid var(--ink); padding: 5px 0; }.text-link span { margin-left: 8px; }
.hero-art { margin-left: auto; width: min(100%,580px); position: relative; padding: 28px; transform: rotate(2.5deg); }
.hero-art::before { content: ""; position: absolute; inset: 6% 0; border: 1px solid rgba(99,67,47,.3); transform: rotate(-5deg); }.hero-art img { position: relative; display:block; width: 100%; box-shadow: 15px 17px 0 rgba(99,67,47,.14); }
.art-label { position:absolute; z-index: 2; right: 1px; top: 3%; color: var(--cream); background: var(--ink-deep); padding: 13px; font: 13px/1.15 Rye,serif; text-transform: uppercase; transform: rotate(8deg); text-align:center; }
.stamp { width: 84px; height: 84px; position:absolute; z-index: 2; bottom: -4px; left: -1px; display:grid; place-content:center; text-align:center; border: 2px dashed var(--ink); border-radius: 50%; font: 11px/1.05 Rye,serif; color: var(--ink); background: var(--clay-soft); transform: rotate(-15deg); }
.sun { position:absolute; width: 740px;height:740px; border-radius:50%; right:-310px; bottom:-335px; background: var(--clay-soft); opacity:.65; }.scroll-note { position: absolute; bottom: 27px; left: 8vw; font-size: 11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }.scroll-note span { margin-left: 7px; }
.marquee { overflow: hidden; white-space: nowrap; background: var(--ink); color: var(--sand); font: 23px/1 Rye,serif; text-transform: uppercase; padding: 17px 0; }.marquee div { display: inline-block; animation: slide 22s linear infinite; }.marquee i { color: var(--clay); padding: 0 15px; font-style: normal; } @keyframes slide { to { transform: translateX(-50%); } }
.section-pad { padding: 110px 8vw; }.intro { display:grid; grid-template-columns: .7fr 1.3fr; gap: 10vw; background:var(--cream); }.section-kicker { color:var(--clay); }.intro h2,.section-heading h2,.work h2 { font-size: clamp(38px,4.8vw,66px); }.intro p { max-width:640px; font-size:19px; line-height:1.7; margin:23px 0 27px; }.dark { color: var(--ink); }
.services { background: #ead6b7; }.section-heading { display:grid; grid-template-columns:.7fr 1.3fr; margin-bottom:44px; }.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.service-card { min-height:310px; padding:25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; display:flex; flex-direction:column; transition: background .2s,color .2s; }.service-card:hover,.service-card.featured { background:var(--ink); color:var(--sand); }.number { font:13px Rye,serif; color:var(--clay); }.service-icon { margin: 40px 0 auto; font-size:31px; color:var(--clay); }.service-card h3 { font:26px/1 Rye,serif; letter-spacing:-.02em; }.service-card p { margin:14px 0 0; line-height:1.5; font-size:14px; }
.work { background: var(--cream); }.work-top { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:42px; }.work-top p { max-width:360px; line-height:1.6; }.portfolio-grid { display:grid; grid-template-columns: 1.08fr .92fr .92fr; gap:18px; }.portfolio-card { min-height:380px; padding:23px; position:relative; display:flex; flex-direction:column; overflow:hidden; transition: transform .25s; }.portfolio-card:hover { transform: translateY(-6px); }.portfolio-type,.portfolio-more { position:relative; z-index:1; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }.portfolio-more { margin-top:auto; }.portfolio-mark { position:relative; z-index:1; margin:auto 0; font: clamp(36px,4vw,61px)/.9 Rye,serif; }.card-one { background:#31463e; color:#f2e9d7; }.card-one::after { content:""; position:absolute;width:350px;height:350px;border:33px solid #d59950;border-radius:50%;right:-128px;top:60px; }.card-two { background:#c3764f; color:#fff6e8; }.card-two::after { content:"";position:absolute;bottom:-50px;right:-20px;width:330px;height:180px;background:#573529;clip-path:polygon(0 100%,23% 38%,45% 70%,68% 0,100% 100%);opacity:.82; }.script { font-family:Georgia,serif;font-style:italic;font-weight:700;line-height:.9; }.card-three { background:#e5c08d; color:#563a27; }.card-three::after { content:"✦";position:absolute;right:15px;bottom:-20px;font-size:180px;color:#b2733e;opacity:.5; }.portfolio-mark small{font:17px DM Sans,sans-serif;letter-spacing:.16em; }.portfolio-note { margin:28px 0 0; text-align:right; }.portfolio-note a { font-weight:700; border-bottom:1px solid var(--ink); }
.contact { background:#ead6b7; display:grid; grid-template-columns: .9fr 1.1fr; gap:8vw; align-items:start; }.contact h2 { font-size:clamp(39px,4.5vw,61px); }.contact-copy p { max-width:470px; line-height:1.7; margin:22px 0 33px; }.contact-phone { display:inline-flex; flex-direction:column; gap:6px; padding-bottom:6px; border-bottom:1px solid var(--ink); font-weight:700; font-size:20px; }.contact-phone span { font-size:11px; text-transform:uppercase; letter-spacing:.12em; }.contact-form { background:var(--cream); padding:30px; display:grid; grid-template-columns:1fr 1fr; gap:18px; box-shadow:10px 10px 0 rgba(99,67,47,.12); }.contact-form label { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.contact-form input,.contact-form textarea { display:block; width:100%; padding:12px 0 10px; border:0; border-bottom:1px solid var(--line); background:transparent; border-radius:0; outline:0; color:var(--ink-deep); font:16px DM Sans,Arial,sans-serif; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--ink); }.contact-form label:nth-of-type(3),.contact-form label:nth-of-type(4),.form-button,.form-status { grid-column:1/-1; }.contact-form textarea { resize:vertical; min-height:88px; }.optional { color:var(--clay); font-weight:500; }.honeypot { position:absolute; left:-9999px; opacity:0; }.form-button { border:0; cursor:pointer; justify-self:start; margin-top:3px; }.form-button:disabled { cursor:wait; opacity:.75; transform:none; }.form-status { min-height:20px; margin:0; color:var(--ink); font-size:14px; line-height:1.4; }
.callout { padding:100px 8vw; background:var(--ink-deep); color:var(--sand); position:relative; overflow:hidden; }.callout h2 { max-width:850px;font-size:clamp(45px,6vw,76px);margin:0 0 30px; }.callout h2 em { color:var(--clay-soft); }.button-light { background:var(--sand);color:var(--ink-deep); padding:16px 21px; }.callout-star { position:absolute;right:7vw;top:35px;color:var(--clay);font-size:clamp(100px,17vw,250px);opacity:.22; }
footer { padding:45px 8vw 24px; display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:start;background:var(--sand); }.footer-brand { font:24px Rye,serif; }.footer-brand span{display:block;color:var(--clay);font-size:17px;margin-top:4px; }.footer-phone { font-weight:700;justify-self:end; }.copyright { grid-column:1/-1;margin-top:33px;padding-top:15px;border-top:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.1em; }
@media (max-width: 850px) { .site-header { padding:12px 6vw; }.menu-toggle{display:block;} nav { display:none; position:absolute;top:81px;left:0;right:0;padding:22px 6vw 27px;background:var(--cream);border-bottom:1px solid var(--line);align-items:stretch;flex-direction:column;gap:20px; }.site-header.nav-open nav{display:flex;}.nav-call{width:max-content;}.hero { min-height:auto;grid-template-columns:1fr;padding:70px 7vw 75px; }.hero-art{width:min(100%,490px);margin:55px auto 0;}.scroll-note{display:none;}.intro,.section-heading,.contact{grid-template-columns:1fr;gap:20px;}.section-pad{padding:75px 7vw;}.service-grid{grid-template-columns:repeat(2,1fr);}.work-top{display:block;}.work-top p{margin-top:20px;}.portfolio-grid{grid-template-columns:1fr 1fr;}.portfolio-card:first-child{grid-column:1/-1;}.callout{padding:78px 7vw;} footer{padding:40px 7vw 22px;grid-template-columns:1fr auto;}footer p{grid-column:1/-1;grid-row:2;margin:0;}.footer-phone{grid-column:2;grid-row:1;}.copyright{margin-top:15px;} }
@media (max-width: 520px) { .topline{font-size:9px}.brand-coyote{height:38px;width:38px}.brand b{font-size:11px} .hero{padding-top:56px}.hero-text{font-size:16px}.hero-actions{gap:18px;align-items:flex-start;flex-direction:column}.hero-art{margin-top:38px;padding:16px}.art-label{font-size:10px}.section-pad{padding:62px 6vw}.service-grid,.portfolio-grid,.contact-form{grid-template-columns:1fr}.portfolio-card:first-child{grid-column:auto}.service-card{min-height:255px}.portfolio-card{min-height:310px}.portfolio-note{text-align:left;line-height:1.6}.contact-form{padding:23px}.callout{padding:65px 6vw}.callout-star{right:-10px}.footer-phone{font-size:13px}.footer-brand{font-size:18px} }