:root {
  --forest: #183d35;
  --forest-deep: #102d29;
  --mint: #e7eee5;
  --paper: #f7f5ef;
  --white: #fffefa;
  --ink: #1e302d;
  --muted: #687570;
  --lime: #d0e16e;
  --orange: #d68157;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.65; }
img { max-width: 100%; }
a { color: inherit; }
.top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 12px max(6vw, calc((100vw - 1280px) / 2)); background: var(--forest-deep); color: var(--white); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #a9b8a9; border-radius: 50%; color: var(--lime); font: italic 1.25rem var(--serif); }
.logo-name { font-size: .72rem; font-weight: 700; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); }
nav a { color: #e5ebe5; font-size: .86rem; text-decoration: none; transition: color .2s ease; }
nav a:hover, nav a:focus { color: var(--lime); }
nav .nav-cta { padding: 8px 16px; border: 1px solid #83988a; border-radius: 99px; }
.menu-button { display: none; padding: 8px 12px; border: 1px solid #a9b8a9; border-radius: 3px; background: transparent; color: white; font: inherit; }
.hero { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 7vw; min-height: 600px; padding: 82px max(8vw, calc((100vw - 1160px) / 2)) 96px; overflow: hidden; background: var(--mint); }
.hero::after { position: absolute; right: -110px; bottom: -240px; width: 500px; height: 500px; border: 1px solid #cbd9ca; border-radius: 50%; content: ''; }
.hero-copy, .hero-visual { position: relative; z-index: 1; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; color: #557169; font-size: .73rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-line { width: 34px; height: 1px; background: var(--orange); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { max-width: 650px; margin: 0 0 25px; color: var(--forest-deep); font: 500 clamp(3.2rem, 6.8vw, 6.3rem)/.99 var(--serif); letter-spacing: -.055em; }
h1 em, h2 em { color: #587668; font-weight: 400; }
.hero-intro { max-width: 490px; color: #4f625b; font-size: 1.05rem; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; gap: 18px; padding: 12px 19px; border: 1px solid var(--forest); border-radius: 3px; background: var(--forest); color: var(--white); font-size: .88rem; font-weight: 700; text-decoration: none; transition: background .2s, transform .2s; }
.button:hover, .button:focus { transform: translateY(-2px); background: var(--forest-deep); }
.button span { color: var(--lime); font-size: 1.1rem; }
.quiet-link, .text-link { color: var(--forest); font-size: .86rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hero-note { margin: 30px 0 0; color: #687a71; font-size: .73rem; letter-spacing: .07em; text-transform: uppercase; }
.hero-visual { max-width: 540px; justify-self: end; width: 100%; padding: 20px 24px 25px 0; }
.visual-backdrop { position: absolute; top: 0; right: 0; width: 85%; height: 86%; background: #c8d6c1; }
.hero-image { position: relative; z-index: 1; width: 88%; margin: 25px 0 0 5%; padding: 9px 9px 0; background: var(--white); box-shadow: 0 25px 45px #1a33232b; transform: rotate(-2deg); }
.hero-image img { display: block; width: 100%; height: clamp(270px, 32vw, 400px); object-fit: cover; }
.hero-image figcaption { display: flex; flex-direction: column; padding: 11px 9px 15px; line-height: 1.35; }
.hero-image figcaption span { color: var(--muted); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.hero-image figcaption b { margin-top: 3px; font: 1.1rem var(--serif); }
.visual-stamp { position: absolute; z-index: 2; right: -2%; bottom: 13%; display: grid; width: 92px; height: 92px; align-content: center; border-radius: 50%; background: var(--orange); color: white; font: italic .9rem/1.2 var(--serif); text-align: center; transform: rotate(9deg); }
.visual-index { position: absolute; right: 1%; bottom: 0; color: #65776e; font-size: .7rem; letter-spacing: .12em; }
.section-shell { max-width: 1160px; margin: 0 auto; padding-right: 30px; padding-left: 30px; }
.about { padding-top: 104px; padding-bottom: 92px; }
.section-kicker { gap: 12px; margin-bottom: 24px; }
.section-kicker span:first-child { color: var(--orange); font-family: var(--serif); font-size: .95rem; letter-spacing: 0; }
.about-main { display: grid; grid-template-columns: 1.05fr .75fr; gap: 9%; align-items: start; }
.about h2, .projects h2, .approach h2, .skills-band h2, .contact h2 { margin-bottom: 0; color: var(--forest-deep); font: 500 clamp(2.45rem, 4.2vw, 4.1rem)/1.08 var(--serif); letter-spacing: -.04em; }
.about-copy { padding-top: 9px; color: #52625c; font-size: .96rem; }
.about-copy p { margin-bottom: 17px; }
.about-copy .text-link { display: inline-block; margin-top: 5px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 35px; }
.about-tags span { padding: 7px 14px; border: 1px solid #d2d8cf; border-radius: 99px; color: #50625b; font-size: .76rem; }
.projects { padding: 83px 0 0; background: var(--white); }
.projects-heading { margin-bottom: 43px; }
.projects-title { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.projects-title p { max-width: 330px; margin: 0 0 7px; color: var(--muted); font-size: .92rem; }
.project { display: grid; grid-template-columns: .78fr 1.22fr; gap: 8%; align-items: center; padding: 73px max(8vw, calc((100vw - 1160px) / 2)); }
.project-garden { background: #eef1e8; }
.project-copy { max-width: 450px; }
.project-type { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; color: var(--orange); font: 1rem var(--serif); }
.project-type span { color: #64736b; font: 700 .69rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.project h3 { margin: 0 0 18px; color: var(--forest-deep); font: 500 clamp(2.7rem, 4.5vw, 4.6rem)/.98 var(--serif); letter-spacing: -.04em; }
.project-copy > p:not(.project-type) { color: #57675f; font-size: .94rem; }
.project-detail { margin: 24px 0; padding-left: 15px; border-left: 2px solid var(--orange); }
.project-detail span { color: #728078; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-detail p { margin: 3px 0 0; color: #44564e; font-size: .86rem; }
.project-disclaimer { margin-top: 18px; color: #78827c !important; font-size: .75rem !important; font-style: italic; }
.project-gallery { position: relative; display: grid; grid-template-columns: 1.1fr .78fr; align-items: center; gap: 16px; min-height: 370px; }
.project-gallery figure { margin: 0; padding: 8px 8px 0; background: var(--white); box-shadow: 0 12px 35px #30433720; }
.project-gallery img { display: block; width: 100%; object-fit: cover; }
.project-gallery figcaption { padding: 8px 4px 10px; color: #69766e; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }
.gallery-large { transform: rotate(-2deg); }
.gallery-large img { height: 315px; }
.gallery-small { margin-top: 95px !important; transform: rotate(3deg); }
.gallery-small img { height: 220px; }
.project-flex { grid-template-columns: .9fr 1.1fr; background: #f8f5ee; }
.flex-visual { position: relative; display: flex; min-height: 340px; flex-direction: column; justify-content: space-between; padding: 30px 36px; overflow: hidden; background: var(--forest); color: #f6f4e9; }
.flex-visual::before, .flex-visual::after { position: absolute; border: 1px solid #ffffff2b; border-radius: 50%; content: ''; }
.flex-visual::before { top: -90px; right: -70px; width: 330px; height: 330px; }
.flex-visual::after { right: 1%; bottom: -235px; width: 450px; height: 450px; }
.flex-small, .flex-big, .flex-line, .flex-end { position: relative; z-index: 1; }
.flex-small { color: var(--lime); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.flex-big { margin: 28px 0; font: italic clamp(3.4rem, 6vw, 5.4rem)/.85 var(--serif); letter-spacing: -.05em; }
.flex-line { width: 70px; height: 1px; background: var(--orange); }
.flex-end { align-self: end; color: #dae2d8; font-size: .76rem; line-height: 1.4; text-align: right; }
.approach { padding-top: 105px; padding-bottom: 105px; }
.approach-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 47px; }
.approach-heading p { max-width: 330px; margin: 0 0 6px; color: var(--muted); font-size: .92rem; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #cfd5cc; }
.steps article { min-height: 174px; padding: 20px 18px 0 0; }
.steps article + article { padding-left: 19px; border-left: 1px solid #cfd5cc; }
.steps article > span { color: var(--orange); font: 1.05rem var(--serif); }
.steps h3 { margin: 17px 0 5px; color: var(--forest); font: 1.42rem var(--serif); }
.steps p { max-width: 210px; margin: 0; color: #687570; font-size: .81rem; }
.skills-band { padding: 72px 0; background: var(--forest); color: var(--white); }
.skills-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: center; }
.section-kicker.light { color: #d1ded4; }
.skills-band h2 { color: var(--white); font-size: clamp(2.3rem, 3.8vw, 3.6rem); }
.skills-layout .section-kicker span:first-child { color: var(--lime); }
.skills-list { display: flex; flex-wrap: wrap; gap: 10px; }
.skills-list span { padding: 9px 15px; border: 1px solid #577168; border-radius: 99px; color: #e8eee5; font-size: .8rem; }
.contact { padding-top: 92px; padding-bottom: 98px; }
.contact-label { display: flex; align-items: center; justify-content: space-between; }
.contact-spark { color: var(--orange); font-size: 2rem; }
.contact-content { display: grid; grid-template-columns: 1fr .62fr; gap: 10%; align-items: end; }
.contact h2 em { color: #587668; }
.contact-content > div { padding-bottom: 9px; }
.contact-content p { max-width: 400px; color: #596960; font-size: .95rem; }
.button-light { border-color: var(--forest); }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px max(6vw, calc((100vw - 1280px) / 2)); background: var(--forest-deep); color: #d9e1db; font-size: .75rem; }
.footer-name { color: var(--white); font: italic 1.25rem var(--serif); text-decoration: none; }
.footer-name span { color: var(--lime); }
.back-top { color: #d9e1db; text-decoration: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

@media (max-width: 850px) {
  .hero { gap: 35px; padding-right: 6vw; padding-left: 6vw; }
  .hero h1 { font-size: clamp(3rem, 7vw, 5rem); }
  .project { gap: 5%; padding-right: 6vw; padding-left: 6vw; }
  .project-gallery { min-height: 300px; }
  .gallery-large img { height: 260px; }
  .gallery-small img { height: 190px; }
}
@media (max-width: 650px) {
  .top { min-height: 68px; padding: 10px 6%; flex-wrap: wrap; }
  .menu-button { display: block; }
  nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 6px; }
  nav.open { display: flex; }
  nav a { padding: 11px 0; border-top: 1px solid #38564c; }
  nav .nav-cta { margin-top: 8px; padding: 9px 14px; border: 1px solid #83988a; text-align: center; }
  .hero { grid-template-columns: 1fr; gap: 35px; padding: 58px 7% 74px; }
  .hero h1 { font-size: clamp(3.35rem, 13vw, 5.5rem); }
  .hero-intro { font-size: .96rem; }
  .hero-visual { width: min(100%, 470px); justify-self: center; }
  .hero-image img { height: 290px; }
  .visual-stamp { right: -1%; bottom: 11%; }
  .section-shell { padding-right: 7%; padding-left: 7%; }
  .about { padding-top: 70px; padding-bottom: 65px; }
  .about-main, .projects-title, .approach-heading, .skills-layout, .contact-content { grid-template-columns: 1fr; display: grid; gap: 24px; }
  .about-main { gap: 20px; }
  .about h2, .projects h2, .approach h2, .contact h2 { font-size: clamp(2.7rem, 11vw, 4rem); }
  .about-tags { margin-top: 25px; }
  .projects { padding-top: 66px; }
  .projects-heading { margin-bottom: 27px; }
  .projects-title { gap: 16px; }
  .projects-title p, .approach-heading p { margin-bottom: 0; }
  .project, .project-flex { grid-template-columns: 1fr; gap: 28px; padding: 50px 7%; }
  .project-gallery { min-height: 285px; }
  .gallery-large img { height: 245px; }
  .gallery-small { margin-top: 65px !important; }
  .gallery-small img { height: 175px; }
  .flex-visual { min-height: 290px; }
  .approach { padding-top: 70px; padding-bottom: 70px; }
  .approach-heading { margin-bottom: 30px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps article { min-height: 150px; }
  .steps article + article { padding-left: 15px; }
  .steps article:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid #cfd5cc; }
  .steps article:nth-child(4) { border-top: 1px solid #cfd5cc; }
  .skills-band { padding: 55px 0; }
  .skills-list { gap: 8px; }
  .skills-list span { padding: 8px 11px; font-size: .75rem; }
  .contact { padding-top: 65px; padding-bottom: 70px; }
  .contact-content { gap: 20px; }
  footer { flex-wrap: wrap; padding: 18px 7%; }
  footer > span { width: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }