:root {
  --paper:#f8f7f3;
  --ink:#253f35;
  --text:#536059;
  --line:#d8dcd3;
  --sage:#e7ebe2;
  --white:#fff;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #a5743b;
  outline-offset:6px
}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.shell {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:10;
  background:var(--ink);
  color:white;
  padding:12px 18px
}
.skip-link:focus {
  top:12px
}
.site-header {
  border-bottom:1px solid var(--line)
}
.header-inner {
  min-height:115px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:1.4px
}
.brand:hover {
  text-decoration:none
}
.brand-sub {
  display:block;
  font-size:8px;
  font-weight:400;
  letter-spacing:2.1px;
  margin-top:8px
}
nav {
  display:flex;
  gap:37px;
  align-items:center;
  font-size:13px
}
.nav-contact {
  border-bottom:1px solid var(--ink);
  padding-bottom:7px
}
.nav-contact span {
  margin-left:21px
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:58px;
  align-items:center;
  padding-top:65px;
  padding-bottom:64px
}
.eyebrow {
  font-size:10px;
  letter-spacing:2.2px;
  font-weight:600;
  margin:0 0 24px;
  display:flex;
  align-items:center;
  gap:12px
}
.small-rule {
  width:26px;
  height:1px;
  background:currentColor
}
.hero h1 {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(48px,5.1vw,76px);
  line-height:1.08;
  letter-spacing:-2.8px;
  margin:0 0 26px
}
.hero h1 em {
  font-weight:400;
  color:#69816a
}
.hero-description {
  font-size:15px;
  line-height:1.9;
  color:var(--text);
  max-width:390px;
  margin:0 0 28px
}
.button {
  display:inline-flex;
  background:var(--ink);
  color:white;
  align-items:center;
  gap:29px;
  font-size:12px;
  padding:16px 20px;
  transition:background .2s
}
.button:hover {
  background:#3d5949;
  text-decoration:none
}
.button span {
  font-size:20px;
  line-height:1
}
.hero-note {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:37px
}
.hero-note>span {
  font-size:33px;
  font-weight:400;
  line-height:1;
  border-right:1px solid var(--line);
  padding-right:18px
}
.hero-note p {
  font-size:10px;
  line-height:1.7;
  color:var(--text);
  margin:0
}
.hero-note strong {
  font-weight:400
}
.hero-visual {
  position:relative;
  margin:0;
  align-self:stretch;
  min-height:510px
}
.hero-visual>img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  object-position:48% center
}
.hero-visual:after {
  content:'';
  position:absolute;
  top:15px;
  right:15px;
  width:45px;
  height:45px;
  border-top:1px solid #fff8;
  border-right:1px solid #fff8
}
.hero-visual figcaption {
  position:absolute;
  bottom:0;
  width:100%;
  padding:16px 20px;
  background:linear-gradient(transparent,#10251ec2);
  color:white;
  font-size:8px;
  letter-spacing:1.4px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:end;
  min-height:80px
}
.image-disclosure {
  font-size:8px;
  letter-spacing:.3px;
  opacity:.85
}
.image-corner {
  position:absolute;
  bottom:65px;
  right:25px;
  background:var(--paper);
  padding:17px 20px 13px;
  font-family:var(--serif);
  font-size:37px;
  line-height:1;
  text-align:center
}
.image-corner span {
  display:block;
  font-family:var(--sans);
  font-size:6px;
  letter-spacing:1.2px;
  margin-top:9px
}
.principles-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.principles-strip .shell {
  display:flex;
  justify-content:center;
  gap:68px;
  align-items:center;
  min-height:66px;
  font-size:11px;
  letter-spacing:.4px
}
.principles-strip [aria-hidden] {
  font-size:16px;
  color:#81917a
}
.section-space {
  padding-top:100px;
  padding-bottom:100px
}
.services {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px
}
h2 {
  font-family:var(--serif);
  font-size:clamp(35px,3.2vw,46px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-1.4px;
  margin:0 0 24px
}
.section-intro>p:last-child {
  max-width:330px;
  color:var(--text);
  font-size:14px;
  line-height:1.9
}
.service {
  display:grid;
  grid-template-columns:25px 1fr;
  gap:20px;
  padding:0 0 32px;
  border-bottom:1px solid var(--line)
}
.service+.service {
  padding-top:28px;
  padding-bottom:0;
  border-bottom:0
}
.service-number {
  font-size:10px;
  padding-top:8px;
  color:#7e8c7c
}
.service-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.service-heading h3 {
  font-family:var(--serif);
  font-size:27px;
  font-weight:400;
  margin:0
}
.service-heading svg {
  width:43px;
  height:43px;
  stroke:var(--ink);
  fill:none;
  stroke-width:1.1
}
.service p {
  font-size:13px;
  color:var(--text);
  line-height:1.9;
  margin:14px 0 18px;
  max-width:390px
}
.service-tag {
  font-size:8px;
  letter-spacing:1.5px
}
.approach {
  background:var(--ink);
  color:#f8f7f0
}
.approach-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  padding-block:80px
}
.approach .eyebrow {
  color:#c1cfb6
}
.approach h2 {
  font-size:47px
}
.approach-description {
  color:#c8d1c9;
  font-size:14px;
  max-width:330px;
  line-height:1.9
}
.line-mark {
  display:flex;
  gap:15px;
  align-items:center;
  width:165px;
  font-family:var(--serif);
  font-size:21px;
  margin-top:40px
}
.line-mark span {
  height:1px;
  flex:1;
  background:#738476
}
.approach-steps {
  margin:0;
  padding:0;
  list-style:none
}
.approach-steps li {
  display:flex;
  gap:25px;
  padding:23px 0;
  border-bottom:1px solid #ffffff26
}
.approach-steps li:first-child {
  padding-top:0
}
.approach-steps li:last-child {
  border-bottom:0;
  padding-bottom:0
}
.approach-steps li>span {
  font-size:10px;
  color:#a8bba1;
  padding-top:7px;
  white-space:nowrap
}
.approach-steps h3 {
  font-family:var(--serif);
  font-size:24px;
  font-weight:400;
  margin:0 0 8px
}
.approach-steps p {
  font-size:13px;
  color:#c8d1c9;
  line-height:1.8;
  margin:0;
  max-width:360px
}
.faq {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px
}
.faq-list details {
  border-bottom:1px solid var(--line)
}
.faq-list details:first-child {
  border-top:1px solid var(--line)
}
summary {
  cursor:pointer;
  list-style:none;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:23px 0
}
summary::-webkit-details-marker {
  display:none
}
summary span {
  font-size:20px;
  font-weight:400;
  transition:transform .2s
}
details[open] summary span {
  transform:rotate(45deg)
}
details p {
  font-size:13px;
  color:var(--text);
  margin:0 0 25px;
  line-height:1.9
}
details p a {
  text-decoration:underline
}
.contact {
  background:var(--sage);
  padding:55px 60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:50px
}
.contact h2 {
  font-size:42px;
  margin-bottom:15px
}
.contact p {
  font-size:13px;
  color:var(--text);
  margin-bottom:0
}
.contact-action>span {
  font-size:9px;
  letter-spacing:1.6px
}
.contact-action>a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #9eaf9d;
  padding:14px 0 20px;
  font-family:var(--serif);
  font-size:clamp(20px,2.5vw,34px);
  letter-spacing:-.7px
}
.contact-action>a span {
  font-family:var(--sans);
  font-size:29px;
  margin-left:16px
}
.contact-action>p {
  font-size:10px
}
.site-footer {
  padding-block:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font-size:9px;
  color:var(--text)
}
.footer-brand {
  display:flex;
  align-items:center;
  gap:15px;
  font-family:var(--serif);
  font-size:29px;
  color:var(--ink)
}
.footer-brand span {
  font-family:var(--sans);
  font-size:9px;
  line-height:1.5;
  max-width:95px
}
.site-footer>a:last-child {
  font-size:10px
}
.menu-toggle {
  display:none;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:12px;
  cursor:pointer
}
.menu-toggle span {
  margin-left:10px
}
.menu-toggle[hidden] {
  display:none
}
@media(min-width:1600px) {
  .hero {
    gap:80px;
    padding-block:80px
  }
  .hero-visual {
    min-height:580px
  }
}
@media(max-width:1100px) {
  .shell {
    width:calc(100% - 64px)
  }
  .hero {
    gap:30px
  }
  .hero h1 {
    font-size:59px
  }
  .hero-visual {
    min-height:480px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.5px
  }
  .button {
    gap:15px;
    font-size:11px
  }
  .principles-strip .shell {
    gap:35px
  }
  .services,.faq {
    gap:60px
  }
  .approach-inner {
    gap:65px
  }
  .contact {
    padding:45px 38px
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:20px
  }
  .shell {
    width:calc(100% - 40px)
  }
  .header-inner {
    min-height:88px;
    flex-wrap:wrap;
    gap:0;
    position:relative
  }
  .brand {
    font-size:10px;
    gap:10px;
    letter-spacing:1px
  }
  .brand img {
    width:32px;
    height:39px
  }
  .brand-sub {
    font-size:6px;
    letter-spacing:1.4px;
    margin-top:5px
  }
  nav {
    width:100%;
    justify-content:space-between;
    gap:16px;
    padding-bottom:20px;
    font-size:11px
  }
  nav[data-menu][data-open='false'] {
    display:none
  }
  nav[data-menu][data-open='true'] {
    display:flex
  }
  .menu-toggle:not([hidden]) {
    display:block
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:30px;
    padding-top:44px;
    padding-bottom:36px
  }
  .hero h1 {
    font-size:clamp(49px,10vw,68px);
    letter-spacing:-2px
  }
  .hero-description {
    font-size:14px;
    max-width:440px
  }
  .hero-note {
    margin-top:25px
  }
  .hero-visual {
    min-height:390px
  }
  .image-corner {
    font-size:30px;
    padding:14px 16px;
    right:18px;
    bottom:57px
  }
  .hero-visual figcaption {
    padding-inline:15px;
    font-size:7px;
    letter-spacing:1px
  }
  .image-disclosure {
    font-size:7px
  }
  .principles-strip .shell {
    gap:14px;
    justify-content:space-between;
    min-height:63px;
    font-size:9px;
    letter-spacing:0
  }
  .principles-strip [aria-hidden] {
    font-size:12px
  }
  .section-space {
    padding-block:60px
  }
  .services,.faq {
    grid-template-columns:1fr;
    gap:32px
  }
  h2 {
    font-size:37px
  }
  .section-intro>p:last-child {
    max-width:440px
  }
  .service {
    gap:14px
  }
  .approach-inner {
    grid-template-columns:1fr;
    gap:38px;
    padding-block:56px
  }
  .approach h2 {
    font-size:39px
  }
  .approach-description {
    max-width:430px
  }
  .line-mark {
    margin-top:25px
  }
  .approach-steps li {
    gap:19px
  }
  .contact {
    grid-template-columns:1fr;
    padding:35px 25px;
    gap:25px
  }
  .contact h2 {
    font-size:36px
  }
  .contact-action>a {
    font-size:clamp(22px,6.1vw,34px)
  }
  .contact-action>p {
    line-height:1.8
  }
  .site-footer {
    flex-wrap:wrap;
    gap:14px;
    padding-block:30px
  }
  .footer-brand {
    width:100%;
    font-size:27px
  }
  .site-footer p {
    margin:0
  }
  .site-footer>a:last-child {
    margin-left:auto
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}