/* Selected direction: a bright consultation scene and two quiet principles. */
.promise.section{
  container-type:inline-size;
  padding:0;
  background:#faf8f3;
  color:#243f35;
  scroll-margin-top:0;
}
.promise-scene{
  position:relative;
  min-height:48.02cqw;
  isolation:isolate;
  background:#f7f5f0;
}
.promise-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  z-index:-1;
}
.promise-copy{
  position:relative;
  width:43.5%;
  padding:8.75cqw 0 4cqw 9.2cqw;
}
.promise-kicker{
  margin:0 0 2cqw -2.4cqw;
  font-family:var(--serif);
  font-size:clamp(12px,1.06cqw,18px);
  font-weight:600;
  line-height:1.7;
  letter-spacing:.15em;
  white-space:nowrap;
  color:#35403b;
}
.promise-kicker span[lang]{text-transform:uppercase;letter-spacing:.2em}
.promise-quote{
  margin:0;
  font-family:var(--serif);
  font-size:4.75cqw;
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.035em;
}
.promise-quote span{display:block;white-space:nowrap}
.promise-quote span:first-child{text-indent:-1em}
.promise-description{
  max-width:32cqw;
  margin:2.2cqw 0 0;
  font-size:clamp(15px,1.35cqw,22px);
  line-height:1.7;
  font-weight:400;
  color:#3b403a;
}
.promise-consult{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:52px;
  width:16cqw;
  margin-top:3.25cqw;
  padding:10px 22px;
  border:1px solid transparent;
  border-radius:999px;
  background:#214b3b;
  color:#fffdf7;
  font-family:var(--serif);
  font-size:clamp(16px,1.22cqw,21px);
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s,transform .2s;
}
.promise-consult img{width:24px;height:24px;flex:none;filter:invert(1)}
.promise-consult:hover{background:#153a2c;transform:translateY(-2px)}
.promise-consult:active{transform:translateY(0)}
.promise-consult:focus-visible{outline:3px solid #a84d27;outline-offset:5px}
.promise-author{
  margin:1.4cqw 0 0;
  font-family:var(--serif);
  font-size:clamp(15px,1.22cqw,20px);
  line-height:1.6;
  letter-spacing:.07em;
  color:#545951;
}
.promise-principles{display:grid;grid-template-columns:1fr 1fr}
.promise-principle{
  position:relative;
  min-width:0;
  padding:3.55cqw 3cqw 5cqw 9.6cqw;
}
.promise-principle + .promise-principle::before{
  content:"";
  position:absolute;
  left:0;
  top:3.1cqw;
  bottom:4.2cqw;
  border-left:1px solid #b3b8af;
}
.promise-principle + .promise-principle{padding-left:10.3cqw}
.promise-value{
  margin:0 0 .55cqw;
  font-size:clamp(16px,1.2cqw,20px);
  font-weight:600;
  line-height:1.6;
}
.promise-principle h3{
  margin:0;
  font-family:var(--serif);
  font-size:2.85cqw;
  font-weight:900;
  line-height:1.5;
  letter-spacing:-.04em;
}
.promise-detail{
  margin:.2cqw 0 0;
  font-family:var(--serif);
  font-size:clamp(16px,1.5cqw,24px);
  line-height:1.75;
  color:#60625b;
}
@media (min-width:821px) and (max-width:1100px){
  .promise-copy{padding-top:7cqw;padding-bottom:5cqw}
  .promise-scene{min-height:53cqw}
  .promise-description{font-size:15px;line-height:1.8}
  .promise-consult{width:auto;min-width:180px;margin-top:2cqw}
  .promise-author{margin-top:14px}
  .promise-principle{padding-left:7cqw}
  .promise-principle h3{font-size:2.9cqw}
}
@media (max-width:820px){
  .promise-scene{display:flex;flex-direction:column;min-height:0;background:#faf8f3}
  .promise-copy{order:0;width:100%;padding:42px 24px 30px}
  .promise-kicker{margin:0 0 24px;font-size:12px;letter-spacing:.1em;white-space:normal}
  .promise-kicker span[lang]{letter-spacing:.15em}
  .promise-quote{font-size:clamp(31px,7.8vw,52px);line-height:1.4;letter-spacing:-.045em}
  .promise-quote span:first-child{text-indent:0}
  .promise-description{max-width:530px;margin-top:24px;font-size:16px;line-height:1.85}
  .promise-consult{width:220px;min-height:52px;margin-top:26px;font-size:17px}
  .promise-author{margin-top:16px;font-size:16px}
  .promise-photo{position:relative;inset:auto;order:1;z-index:0;height:clamp(250px,65vw,400px);object-position:right center}
  .promise-principles{grid-template-columns:1fr;padding:4px 24px 30px}
  .promise-principle,.promise-principle + .promise-principle{padding:28px 0}
  .promise-principle + .promise-principle::before{top:0;bottom:auto;left:0;right:0;border-left:0;border-top:1px solid #c8ccc2}
  .promise-value{margin-bottom:8px;font-size:15px}
  .promise-principle h3{font-size:clamp(23px,5.8vw,32px);line-height:1.5;letter-spacing:-.045em}
  .promise-detail{margin-top:6px;font-size:16px;line-height:1.8}
}
@media (prefers-reduced-motion:reduce){
  .promise-consult{transition:none}
  .promise-consult:hover{transform:none}
}