/* Sycamore — small editorial details.
   All ornaments are decorative, static and contained within their section. */

:root {
  --detail-olive: #566519;
  --detail-line: #c9cdb9;
  --detail-seed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cg stroke='%237e8f2a' stroke-width='1'%3E%3Cpath d='M81 143C75 103 22 103 16 28c50 5 72 44 65 115Z'/%3E%3Cpath d='M81 143C73 89 106 40 145 17c8 53-12 108-64 126Z'/%3E%3Cpath d='M81 143 36 51M81 143l45-94'/%3E%3C/g%3E%3C/svg%3E");
}

/* A small botanical stroke introduces the editorial labels. */
.eyebrow {color:var(--detail-olive)}
.eyebrow::before {
  display:inline-block;
  flex-shrink:0;
  width:24px;
  height:8px;
  background:none;
  border:1px solid currentColor;
  border-radius:0 100% 0 100%;
  opacity:.8;
  vertical-align:middle;
}
.section--dark .eyebrow::before {background:none}
.hero__copy > .eyebrow {gap:.8rem}
.hero__media::before {
  content:"";
  position:absolute;
  z-index:3;
  inset:110px 24px 24px;
  border:1px solid rgba(255,255,255,.38);
  border-left:0;
  pointer-events:none;
}
.hero__media .tag,.col-img .tag {
  border-radius:3px;
  border:1px solid rgba(255,255,255,.65);
  border-left:3px solid var(--green);
}
.hero__media .tag b,.col-img .tag b {color:var(--detail-olive)}
.hero__scroll {gap:1rem}
.hero__scroll i {width:64px}

/* Interior headings end on a rule with a tiny olive terminal. */
.page-hero {overflow:hidden}
.page-hero > .wrap {position:relative;padding-bottom:2rem}
.page-hero > .wrap::after {
  content:"";
  position:absolute;
  bottom:0;
  left:var(--gutter);
  right:var(--gutter);
  height:4px;
  background:
    linear-gradient(var(--green),var(--green)) right center/28px 3px no-repeat,
    linear-gradient(var(--line),var(--line)) left center/100% 1px no-repeat;
  pointer-events:none;
}
.hero__seed {opacity:.075}

/* The same seed drawing links the statement and closing invitation. */
.statement .wrap {position:relative}
.statement .wrap::after {
  content:"";
  position:absolute;
  width:clamp(96px,13vw,176px);
  aspect-ratio:1;
  right:var(--gutter);
  top:50%;
  transform:translateY(-50%);
  background:var(--detail-seed) center/contain no-repeat;
  opacity:.5;
  pointer-events:none;
}
.statement .big {z-index:1}
.statement--bridge .big {padding-left:1.3rem;border-left:2px solid var(--green)}
.statement--bridge .wrap::after {opacity:.38}
.col-img,.feature__media {position:relative}
.col-img::after,.feature__media::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:12px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:3px;
  pointer-events:none;
}
.feature__num {
  display:grid;
  place-items:center;
  top:23px;
  left:23px;
  width:36px;
  height:36px;
  background:var(--cream);
  border:1px solid rgba(255,255,255,.7);
  color:var(--detail-olive);
  mix-blend-mode:normal;
  font-size:.86rem;
}
.feature__body h2,.feature__body h3 {text-wrap:balance}
.feature__body > .eyebrow {gap:.75rem}
.link-arrow {text-underline-offset:6px}
.link-arrow::after {transform:scaleX(1);background:var(--detail-line)}
.link-arrow:hover::after,.link-arrow:focus-visible::after {background:var(--detail-olive)}

/* Fine indexing and a botanical silhouette on the dark service panel. */
.section--dark {position:relative;isolation:isolate;overflow:hidden}
.section--dark::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:190px;
  height:190px;
  top:32px;
  right:var(--gutter);
  background:var(--detail-seed) center/contain no-repeat;
  opacity:.25;
  pointer-events:none;
}
.service-row .num {
  display:grid;
  place-items:center;
  align-self:start;
  width:2.3rem;
  height:2.3rem;
  border:1px solid #4c5434;
  border-radius:50%;
  font-size:.79rem;
  line-height:1;
}
.service-row h3 {text-wrap:balance}
.service-rows {border-top-color:#5a613b}
.service-row:last-child {border-bottom-color:#5a613b}
.service-row:hover .num {border-color:var(--green-bright)}

/* Portraits and gallery groups receive a little print-like structure. */
.member {
  position:relative;
  padding-top:1.65rem;
  background:
    linear-gradient(var(--green),var(--green)) left top/40px 2px no-repeat,
    linear-gradient(var(--line),var(--line)) left top/100% 1px no-repeat;
}
.member__photo {outline:1px solid rgba(250,249,244,.7);outline-offset:-8px}
.member__name {text-wrap:balance}
.member__role {margin-top:.45rem}
.group-label {gap:.85rem}
.group-label::before {
  content:"";
  flex:0 0 7px;
  width:7px;
  height:7px;
  background:var(--green);
  border-radius:0 70% 0 70%;
}
.gallery figure {background:var(--paper);border:1px solid var(--line)}
.gallery figcaption {border-top:2px solid #7e8f2a}
.brand-grid {border-radius:6px}
.brand-grid a::after {
  content:"";
  position:absolute;
  right:12px;
  bottom:12px;
  width:5px;
  height:5px;
  border:1px solid #c9cdb9;
  pointer-events:none;
}
.brand-grid a:hover::after,.brand-grid a:focus-visible::after {background:var(--green);border-color:var(--green)}

/* Correspondence-style form and quiet footer details. */
.contact-info {padding-left:1.35rem;border-left:1px solid var(--detail-line)}
.contact-info dt {color:var(--detail-olive)}
.contact-info dd:first-of-type a {text-decoration:underline;text-decoration-color:var(--detail-line);text-underline-offset:6px}
.form {border-top:3px solid var(--green);border-radius:5px 5px var(--radius-lg) var(--radius-lg)}
.field label {color:#51564a}
.cta-band .wrap::after {
  content:"";
  position:absolute;
  width:clamp(120px,22vw,240px);
  aspect-ratio:1;
  bottom:-22px;
  right:12px;
  background:var(--detail-seed) center/contain no-repeat;
  opacity:.3;
  pointer-events:none;
}
.cta-band .wrap > * {position:relative;z-index:1}
.cta-band .wrap {border:1px solid #3c432b}
.site-footer::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--green) 0 12%,#464d31 12% 33%,transparent 33%);
  pointer-events:none;
}
.footer-col h4,.footer-heading {display:flex;align-items:center;gap:.6rem;color:#c4c9b8}
.footer-col h4::before,.footer-heading::before {content:"";width:12px;height:1px;background:var(--green-bright)}
.footer-bottom {border-top:1px solid rgba(126,143,42,.1)}
.footer-word {-webkit-text-stroke:1px rgba(255,255,255,.13);color:transparent}

@media (min-width:981px) {
  .statement .big {max-width:calc(100% - 220px)}
  .statement .big--quote {max-width:min(30ch,calc(100% - 190px))}
  .statement--bridge .big {max-width:min(36ch,calc(100% - 190px))}
}

@media (max-width:980px) {
  .hero__media::before {inset:12px;border-left:1px solid rgba(255,255,255,.38);border-radius:4px}
  .statement .wrap::after {width:90px;right:var(--gutter);top:auto;bottom:-30px;transform:none;opacity:.14}
}

@media (max-width:760px) {
  .hero__media .tag,.col-img .tag {left:1.1rem;bottom:1.1rem;max-width:calc(100% - 2.2rem)}
  .page-hero > .wrap {padding-bottom:1.65rem}
  .page-hero > .wrap::after {background-size:20px 3px,100% 1px}
  .statement--bridge .big {padding-left:1rem}
  .statement .wrap::after {width:76px;opacity:.12}
  .section--dark::before {width:112px;height:112px;top:28px;opacity:.24}
  .service-row .num {width:2rem;height:2rem;margin-bottom:.35rem}
  .col-img::after,.feature__media::after {inset:9px}
  .feature__num {top:18px;left:18px;width:30px;height:30px;font-size:.75rem}
  .member {padding-top:1.35rem}
  .cta-band .wrap::after {width:120px;bottom:-20px;right:0;opacity:.2}
  .footer-word {-webkit-text-stroke-color:rgba(255,255,255,.18)}
}

@media (forced-colors:active) {
  .hero__media::before,.col-img::after,.feature__media::after,
  .statement .wrap::after,.section--dark::before,.cta-band .wrap::after,
  .brand-grid a::after,.site-footer::before {display:none}
  .footer-word {-webkit-text-stroke:0;color:CanvasText}
}