:root {
  --butter: #fff3c9;
  --peach: #ffd9c7;
  --apricot: #f49b72;
  --tomato: #d95d45;
  --ink: #272b25;
  --olive: #6b7350;
  --line: rgba(39, 43, 37, .24);
  --display: 'Bodoni Moda', Georgia, serif;
  --body: 'Space Grotesk', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--butter); color: var(--ink); font: 15px/1.55 var(--body); }
a { color: inherit; text-decoration: none; }
.site { min-height: 100vh; padding-bottom: 92px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 5vw; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--tomato); color: var(--butter); border-radius: 50% 12% 50% 12%; font-weight: 700; }
.back-link, .meta { color: var(--olive); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
main { overflow: hidden; }
.hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center; min-height: 720px; padding: 7vw 9vw; background: var(--peach); }
.kicker { margin: 0 0 24px; color: var(--tomato); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 580px; margin-bottom: 30px; font: 500 clamp(62px, 9vw, 144px)/.79 var(--display); letter-spacing: -.07em; }
h1 em, h2 em { color: var(--tomato); font-style: italic; }
.intro { max-width: 360px; margin-bottom: 32px; color: var(--olive); font-size: 17px; }
.arrow-link { display: inline-flex; gap: 15px; align-items: center; color: var(--tomato); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.arrow-link span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--tomato); border-radius: 50%; font-size: 18px; }
.hero-visual { position: relative; min-height: 540px; }
.hero-visual img { position: absolute; width: 72%; height: 78%; right: 3%; top: 0; object-fit: cover; border-radius: 48% 48% 2% 2%; transform: rotate(4deg); }
.hero-visual::before { content: ''; position: absolute; width: 42%; height: 55%; left: 0; bottom: 2%; background: var(--apricot); clip-path: polygon(0 12%, 78% 0, 100% 86%, 18% 100%); }
.hero-visual::after { content: 'SA / 01'; position: absolute; right: 2%; bottom: 0; color: var(--tomato); font-size: 10px; letter-spacing: .2em; }
.section { padding: 105px 9vw; border-top: 1px solid var(--line); }
.section.alt { background: var(--olive); color: var(--butter); }
.section-head { display: grid; grid-template-columns: .6fr 1.4fr; gap: 7vw; margin-bottom: 58px; }
.section-head h2 { max-width: 750px; margin: 0; font: 500 clamp(48px, 6vw, 94px)/.84 var(--display); letter-spacing: -.06em; }
.section-head p { max-width: 330px; color: var(--olive); }
.alt .section-head p { color: rgba(255,243,201,.76); }
.project-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
.project { padding: 14px; background: var(--butter); color: var(--ink); }
.project:nth-child(2) { margin-top: 90px; background: var(--peach); }
.project img { display: block; width: 100%; height: 350px; object-fit: cover; }
.project:nth-child(2) img { height: 260px; clip-path: polygon(0 0, 100% 10%, 93% 100%, 7% 91%); }
.project small { display: block; margin: 18px 0 9px; color: var(--tomato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.project h3 { margin-bottom: 6px; font: 500 32px/.95 var(--display); }
.project p { margin: 0; color: var(--olive); font-size: 12px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.step { min-height: 270px; padding: 26px; background: var(--butter); color: var(--ink); }
.step:nth-child(2) { background: var(--peach); transform: translateY(30px); }
.step:nth-child(3) { background: var(--apricot); }
.step b { color: var(--tomato); font-size: 10px; letter-spacing: .15em; }
.step h3 { margin: 70px 0 12px; font: 500 30px/.9 var(--display); }
.step p { max-width: 240px; margin: 0; color: var(--olive); }
.bottom-nav { position: fixed; z-index: 10; left: 5vw; right: 5vw; bottom: 20px; display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border: 1px solid var(--ink); background: var(--butter); box-shadow: 6px 6px 0 var(--tomato); }
.bottom-nav a { padding: 8px 11px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bottom-nav a:hover, .bottom-nav a.active { background: var(--tomato); color: var(--butter); }
.page-hero { padding: 95px 9vw 90px; background: var(--peach); }
.page-hero h1 { max-width: 900px; margin-bottom: 20px; }
.page-hero p:last-child { max-width: 420px; margin-left: 18%; color: var(--olive); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.split img { width: 100%; height: 560px; object-fit: cover; border-radius: 0 38% 0 38%; }
.split h2 { margin-bottom: 22px; font: 500 clamp(44px, 5vw, 76px)/.87 var(--display); letter-spacing: -.05em; }
.split p { max-width: 420px; color: var(--olive); }
.detail-list { margin-top: 38px; border-top: 1px solid var(--line); }
.detail-list div { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.detail-list span:last-child { color: var(--tomato); }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; }
.contact-card { padding: 30px; background: var(--olive); color: var(--butter); }
.contact-card h2 { margin-bottom: 30px; font: 500 58px/.87 var(--display); }
.contact-card address { font-style: normal; color: rgba(255,243,201,.76); }
.contact-card a { color: var(--peach); }
.contact-form { display: grid; gap: 19px; }
.contact-form label { color: var(--olive); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; margin-top: 7px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; color: var(--ink); font: 15px var(--body); }
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form button { justify-self: start; padding: 14px 19px; border: 0; background: var(--tomato); color: var(--butter); cursor: pointer; font: 700 10px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.map { width: 100%; height: 330px; margin-top: 24px; border: 0; filter: saturate(.75); }
.form-status { min-height: 20px; color: var(--tomato); font-size: 12px; }
.portfolio-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: start; }
.portfolio-item { display: block; padding: 14px; background: var(--peach); }
.portfolio-item:nth-child(2) { margin-top: 90px; background: var(--apricot); }
.portfolio-item:nth-child(3) { background: var(--olive); color: var(--butter); }
.portfolio-item img { display: block; width: 100%; height: 300px; object-fit: cover; }
.portfolio-wide { grid-row: span 2; }
.portfolio-wide img { height: 640px; }
.portfolio-item div { padding: 18px 4px 5px; }
.portfolio-item small { color: var(--tomato); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.portfolio-item h2 { margin: 10px 0 5px; font: 500 34px/.92 var(--display); }
.portfolio-item p { margin: 0; font-size: 12px; }
.portfolio-item:nth-child(3) small { color: var(--peach); }
.award-list { border-top: 1px solid var(--line); }
.award { display: grid; grid-template-columns: 90px 1.2fr 1fr; gap: 24px; align-items: center; min-height: 100px; border-bottom: 1px solid var(--line); }
.award span { color: var(--olive); font-size: 11px; letter-spacing: .08em; }
.award strong { font: 500 clamp(24px, 3vw, 38px)/1 var(--display); }
.award span:last-child { text-align: right; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px 5vw; border-top: 1px solid var(--line); color: var(--olive); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 800px) { .hero, .split, .contact-layout { display: block; } .hero { padding: 75px 8vw; } .hero-visual { min-height: 410px; margin-top: 55px; } .hero-visual img { height: 78%; } .section, .page-hero { padding: 75px 8vw; } .section-head { display: block; } .section-head h2 { margin-bottom: 28px; } .project-grid, .portfolio-grid { display: block; } .project, .project:nth-child(2), .portfolio-item:nth-child(2) { margin: 0 0 18px; } .portfolio-wide img, .portfolio-item img { height: 330px; } .steps { display: block; } .step, .step:nth-child(2) { min-height: 210px; margin-bottom: 1px; transform: none; } .step h3 { margin-top: 45px; } .award { grid-template-columns: 55px 1fr; gap: 12px; padding: 18px 0; } .award span:last-child { grid-column: 2; text-align: left; } .bottom-nav { left: 3vw; right: 3vw; bottom: 12px; overflow-x: auto; justify-content: flex-start; gap: 2px; } .bottom-nav a { white-space: nowrap; padding: 8px 9px; font-size: 8px; } .page-hero p:last-child { margin-left: 0; } .split img { height: 390px; margin-bottom: 45px; } .contact-card { margin-bottom: 45px; } .footer { display: block; line-height: 2; } }

/* Sunroom Assembly_2: lilac, plum and saffron studio variant. */
:root { --butter: #f1e8ff; --peach: #e4d5fa; --apricot: #f2c45b; --tomato: #b33d82; --ink: #38244a; --olive: #705a83; --line: rgba(56, 36, 74, .25); --display: 'Arial Narrow', 'Trebuchet MS', sans-serif; --body: 'Courier New', monospace; }
body { font-size: 13px; letter-spacing: .02em; }
h1 { max-width: 700px; font-size: clamp(54px, 7vw, 112px); font-family: 'Arial Narrow', Impact, sans-serif; font-weight: 700; line-height: .88; letter-spacing: -.07em; text-transform: uppercase; }
h2 { font-family: 'Arial Narrow', Impact, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; }
.hero { min-height: 650px; background: #e4d5fa; grid-template-columns: 1.15fr .85fr; }
.hero-visual img { width: 78%; height: 68%; border-radius: 0; transform: rotate(0); border: 12px solid var(--butter); }
.hero-visual::before { background: var(--apricot); clip-path: polygon(0 0, 100% 0, 84% 100%, 8% 86%); }
.section.alt { background: #4b315d; }
.project, .step { background: #fff8f0; }
.project:nth-child(2), .step:nth-child(2) { background: #f7e8bd; }
.portfolio-item { background: #e4d5fa; }
.portfolio-item:nth-child(2) { background: var(--apricot); }
.portfolio-item:nth-child(3) { background: #4b315d; }
.bottom-nav { background: #fff8f0; box-shadow: -7px 7px 0 var(--tomato); }
.bottom-nav a { font-family: 'Courier New', monospace; font-size: 9px; }
.page-hero { background: #e4d5fa; }
.award strong, .portfolio-item h2, .project h3, .step h3 { font-family: 'Arial Narrow', Impact, sans-serif; font-weight: 700; text-transform: uppercase; }