:root {
  --paper: #faf8f2;
  --ink: #242920;
  --green: #435c3d;
  --line: #cccfc1;
  --soft: #eaf0e2;
  --serif: Georgia, "Times New Roman", serif;
}
* {box-sizing: border-box}
body {margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 "Segoe UI", Arial, sans-serif}
.wrap {width: min(1180px, 89%); margin-inline: auto}
a {color: var(--green); text-underline-offset: .2em}
a:focus-visible, button:focus-visible {outline: 3px solid #997542; outline-offset: 4px}
.site-header {border-bottom: 1px solid var(--line)}
.mast, .foot, .nav, .foot nav, .actions, .section-head, .card-top {display: flex; align-items: center}
.mast, .foot, .section-head, .card-top {justify-content: space-between}
.mast {min-height: 82px; gap: 24px}
.brand, .nav a, .button, .text-link, .card, .entry, .foot a {text-decoration: none}
.brand {display: inline-block; white-space: nowrap; color: var(--ink); font: 650 clamp(20px, 1.7vw, 25px)/1.2 "Segoe UI",Arial,sans-serif; letter-spacing: -.035em}
.nav {gap: clamp(14px, 2.5vw, 36px)}
.nav a, .foot a {font-size: 14px; font-weight: 600; color: var(--ink)}
.nav a:last-child {border: 1px solid var(--green); border-radius: 30px; padding: 7px 18px; color: var(--green)}
.nav a:hover, .nav a[aria-current], .foot a:hover, .text-link:hover {text-decoration: underline}
.hero {display: grid; grid-template-columns: 1.45fr .85fr; align-items: center; gap: 6%; padding-block: clamp(44px,5vw,74px)}
h1,h2,h3 {font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance}
h1 {font-size: clamp(42px,5.3vw,80px); letter-spacing: -.052em}
h2 {font-size: clamp(35px,3.4vw,52px); letter-spacing: -.045em}
h3 {font-size: clamp(25px,2.2vw,34px); letter-spacing: -.032em}
h1 em {color: var(--green); font-weight: 400}
.kicker {margin: 0; color: var(--green); font: 600 11px/1.45 "Courier New", monospace; text-transform: uppercase; letter-spacing: .13em}
.hero-label {margin-bottom: 24px; display: flex; align-items: center; gap: 10px}
.hero-label i {width: 8px; height: 8px; border-radius: 50%; background: #819460}
.intro, .lead {font-size: clamp(17px,1.5vw,21px); max-width: 54ch; line-height: 1.6; color: #4c5149}
.intro {margin: 23px 0 29px; max-width: 49ch}
.actions {gap: 25px; flex-wrap: wrap}
.button {display: inline-flex; justify-content: center; align-items: center; gap: 17px; padding: 13px 23px; border: 0; background: var(--green); color: white; border-radius: 30px; cursor: pointer; font: 600 15px/1.45 "Segoe UI",sans-serif}
.button:hover {background: #30472c}
.text-link {color: var(--green); font-size: 15px; font-weight: 650}
.portrait {margin: 0; position: relative; align-self: center; padding: 9px 9px 0; background: #f3f1e9; border: 1px solid #cbccbe; transform: rotate(2deg); box-shadow: 4px 6px 0 #e9e8df}
.portrait img {display: block; width: 100%; height: clamp(275px,24vw,365px); object-fit: cover; object-position: center 34%; filter: saturate(.78)}
figcaption {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 11px 5px 13px}
figcaption strong {font: italic 17px var(--serif)}
figcaption span {font: 11px "Courier New", monospace; color: var(--green)}
.service-band {padding: 44px 0 48px; background: #edf0e6; border-block: 1px solid var(--line)}
.section-head {margin: 8px 0 26px; align-items: baseline; gap: 14px}
.cards {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px}
.card {padding: 23px; border: 1px solid #c6cdbd; border-radius: 9px; color: var(--ink); background: #fbfaf5}
.card:hover, .entry:hover {background: #f3f5e9}
.card-top {margin-bottom: 22px; color: var(--green); font-size: 21px}
.icon {display: grid; place-items: center; background: #e6edd9; border-radius: 10px; width: 44px; height: 44px}
.icon svg {width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.45; stroke-linejoin: round; stroke-linecap: round}
.card p,.entry p {margin: 10px 0 0; color: #50574a; line-height: 1.5}
.journal,.page,main>.article {padding-block: 62px}
.journal-index h1 {margin-top: 12px}
.journal-index .entries {margin-top: 40px}
.entry {display: grid; grid-template-columns: minmax(115px,1fr) 4fr auto; align-items: baseline; gap: 22px; padding: 25px 7px; border-top: 1px solid var(--line); color: var(--ink)}
.entry:last-child {border-bottom: 1px solid var(--line)}
.article {max-width: 780px; margin-inline: auto; font-size: 18px; overflow-wrap: break-word}
.article h1,.page h1 {font-size: clamp(40px,4.6vw,67px)}
.article h2,.page h2 {margin-top: 1.15em; font-size: clamp(29px,3vw,41px)}
.article h3 {margin-block: 1.2em .4em}
.article section {border-top: 1px solid var(--line); margin-top: 2em; scroll-margin-top: 1.5em}
.article li + li {margin-top: .5em}
.article blockquote,.article aside {margin: 1.8em 0; padding: 1em 1.5em; background: var(--soft); border-left: 3px solid var(--green)}
.contact-layout {display: grid; grid-template-columns: 1fr 1.2fr; gap: 8%; margin-top: 2em}
.contact-form {display: grid; gap: 8px}
.contact-form input,.contact-form select,.contact-form textarea {width: 100%; font: inherit; padding: .55em .7em; color: var(--ink); background: #fffef9; border: 1px solid #959d8d; border-radius: 5px}
.contact-form label {margin-top: 8px}
.contact-form .button {justify-self: start; margin-top: .7em}
.site-footer {border-top: 1px solid var(--line)}
.foot {padding-block: 28px; gap: 18px; flex-wrap: wrap}
.foot nav {gap: 20px; flex-wrap: wrap}
@media(max-width: 800px){
  .wrap {width: 91%}
  .hero {grid-template-columns: 1.35fr .8fr; gap: 5%}
  .portrait img {height: 260px}
  .card {padding: 18px}
}
@media(max-width: 650px){
  .mast {flex-wrap: wrap; gap: 11px; padding: 14px 0}
  .nav {width: 100%; justify-content: space-between; gap: 6px}
  .nav a {font-size: 13px}
  .nav a:last-child {padding: 4px 10px}
  .hero,.cards,.contact-layout {grid-template-columns: 1fr}
  .hero {gap: 32px; padding-block: 36px}
  .hero-label {margin-bottom: 16px}
  .portrait {width: min(90%,370px); margin: 0 auto}
  .portrait img {height: 245px}
  .entry {grid-template-columns: 1fr auto; gap: 8px}
  .entry .kicker {grid-column: 1/-1}
  .section-head {flex-wrap: wrap}
  .card-top {margin-bottom: 14px}
  .journal,.page,main>.article {padding-block: 36px}
}

.brand img {vertical-align: middle; margin: -5px 9px 0 0}

.consult {--deep: #164e49; --rule: #cbd5cd; color: #182f2d}
.consult h1,.consult h2,.consult h3 {font-family: "Segoe UI",Arial,sans-serif; font-weight: 620; letter-spacing: -.045em; text-wrap: pretty}
.consult h1 {margin: 15px 0 18px; font-size: clamp(40px,4.6vw,68px); line-height: 1.04}
.consult h2 {font-size: clamp(30px,3vw,45px)}
.consult h3 {font-size: clamp(23px,2vw,30px); line-height: 1.13}
.consult .button {background: var(--deep)}
.consult .text-link,.consult .kicker {color: var(--deep)}
.consult-intro {display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 6%; padding-block: clamp(38px,5vw,74px)}
.consult-lead {max-width: 52ch; font-size: clamp(17px,1.45vw,21px); color: #4a5751; margin: 0 0 25px}
.consult-outcome {background: var(--deep); color: #fafff5; border-radius: 14px; padding: clamp(22px,2.5vw,35px)}
.consult-author {display: flex; align-items: center; gap: 12px}
.consult-author img {border-radius: 50%; object-fit: cover}
.consult-author small {display: block; color: #cee0d6}
.consult-outcome h2 {font-size: 24px; margin: 23px 0 10px}
.consult-outcome ul {margin: 0; padding-left: 1.15em}
.consult-outcome li {margin-top: 6px; line-height: 1.45}
.consult-outcome li::marker {color: #e6b16c}
.consult-gallery {padding: 48px 0; background: #eaf0ea}
.consult-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 24px}
.consult-grid article {background: #fffefa; border: 1px solid var(--rule); border-radius: 9px; padding: clamp(18px,2vw,30px)}
.consult-grid h3 {margin: 14px 0 10px}
.consult-grid article p:not(.kicker) {color: #42514c; margin: 0 0 12px; line-height: 1.52}
.consult-grid article p:last-child {margin: 0; border-top: 1px solid var(--rule); padding-top: 12px}
.consult-formats {padding: 56px 0 32px}
.consult-formats h2 {margin-bottom: 22px}
.consult-formats div {display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 4%; align-items: baseline; border-top: 1px solid var(--rule); padding: 24px 0; scroll-margin-top: 20px}
.consult-formats p,.consult-close p {margin: 0; max-width: 61ch}
.consult-formats a {color: var(--deep); font-weight: 600}
.consult-close {padding: 28px 0 54px; border-top: 1px solid var(--rule)}
.consult-close p {margin: 14px 0 21px}
@media(max-width: 920px){.consult-grid {grid-template-columns: repeat(2,minmax(0,1fr))}}
@media(max-width: 700px){
  .consult-intro,.consult-grid,.consult-formats div {grid-template-columns: 1fr}
  .consult-intro {gap: 25px}
  .consult h1 br {display: none}
  .consult-formats div {gap: 10px}
}

.portrait-stage {align-self: center; perspective: 850px; min-width: 0}
@media (prefers-reduced-motion: no-preference) {
  .portrait {
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotateZ(2deg);
    transition: transform .45s ease-out, box-shadow .35s ease-out;
  }
  .portrait.is-tilting {transition-duration: .14s; box-shadow: 5px 10px 18px #30362924}
  .portrait.is-rocking {animation: portrait-rock .55s ease-in-out}
}
@keyframes portrait-rock {
  0%, 100% {transform: rotateZ(2deg)}
  32% {transform: rotateY(-6deg) rotateZ(-1deg)}
  70% {transform: rotateY(3deg) rotateZ(3deg)}
}