/*
 * HKA corner language.
 * The logo mixes soft corners with sharp ones — curved where a stroke turns,
 * crisp where it cuts. Surfaces follow the same rule: each panel, button and
 * image rounds one diagonal pair of corners (top-left + bottom-right) and
 * keeps the opposite pair sharp.
 */

/* Buttons */
.main-btn,
a.main-btn {
  border-radius: 18px 0 18px 0;
  overflow: hidden;
}
.small-btn {
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

/* Imagery */
.pages__single .pages__img,
.story__image img.wp-post-image,
.vision__image img,
.team__image img {
  border-radius: 28px 0 28px 0;
}

/* Panels — no overflow:hidden here: the map-pin tile (.contact__icon)
   deliberately protrudes above the card and must stay visible. */
.contact__box {
  border-radius: 28px 0 28px 0;
}
.contact__icon {
  border-radius: 10px 0 10px 0;
}

/* Story page: keep the line-art decoration off Henry's face — it sits
   beside and below the portrait, overlapping only the photo's edge. */
.story__photo {
  position: relative;
}
/* Desktop: Henry's portrait follows the reader down the story column.
   The theme's .website-wrapper{overflow:hidden auto} would hijack the sticky
   context (it makes the wrapper the nearest scrollport without actually
   scrolling); overflow-x:clip clips the off-canvas line art without creating
   a scroll container, so sticky tracks the real page scroll. */
@media (min-width: 901px) {
  .website-wrapper {
    overflow: visible;
    overflow-x: clip;
  }
  .story__photo {
    position: sticky;
    top: 120px;
  }
}
.story__image .story-shape {
  width: 58%;
  top: auto;
  bottom: -7%;
  right: -30%;
}
@media (max-width: 900px) {
  .story__image .story-shape {
    width: 48%;
    right: -12%;
    bottom: -10%;
  }
}

/* Story page: secondary photo inside the text column (Alexandria, 2013) */
.story__moment {
  margin: 44px 0;
}
.story__moment img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px 0 28px 0;
}
.story__moment figcaption {
  margin-top: 12px;
  font-family: 'Din Pro', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #c8aa87;
}

/* Small tan rules pick up a hint of the same softness */
.hka-work__item::before,
.hka-quote blockquote::before {
  border-radius: 2px 0 2px 0;
}

/* Portrait-orientation story photo: cap its width so it doesn't tower */
.story__moment--portrait {
  max-width: 420px;
}