/* ==========================================================================
   Artistic Dimension — Home
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.home-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(1.6rem, 1rem + 2.2vw, 3rem) clamp(2.6rem, 1.6rem + 3vw, 4.4rem);
}

.home-hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 72%;
  z-index: -1;
}

.home-hero__media img {
  animation: ad-hero-in 1.5s var(--ad-ease-out) both;
}

@keyframes ad-hero-in {
  from { opacity: 0; transform: scale(1.07); }
  to { opacity: 1; transform: none; }
}

.home-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(500px, 44vw, 720px);
}

.home-hero__content { max-width: 33.5rem; }

.home-hero__eyebrow { letter-spacing: .19em; }

.home-hero__title { margin-bottom: 0; }

.home-hero__lead {
  max-width: 32ch;
  margin-bottom: clamp(1.4rem, 2vw, 2rem);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.home-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(.8rem, 1.4vw, 1.2rem);
  margin-top: clamp(2rem, 3.4vw, 3.4rem);
  padding: clamp(.9rem, 1.4vw, 1.35rem) clamp(1.1rem, 1.8vw, 1.7rem);
  background: var(--ad-white);
  border: 1px solid var(--ad-line-soft);
  border-radius: var(--ad-r-sm);
  box-shadow: var(--ad-shadow-md);
  animation: ad-badge-in 1s var(--ad-ease-out) .5s both;
}

@keyframes ad-badge-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.home-hero__badge svg {
  width: clamp(28px, 2.6vw, 36px);
  height: auto;
  flex: none;
  stroke: var(--ad-gold);
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hero__badge-text {
  font-family: var(--ad-font-display);
  font-size: clamp(1rem, .9rem + .35vw, 1.22rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ad-ink);
}

.home-hero__badge-rule {
  display: block;
  width: 30px;
  height: 1px;
  margin-top: .6rem;
  background: var(--ad-gold);
  opacity: .7;
}

/* --------------------------------------------------------------------------
   Philosophy
   -------------------------------------------------------------------------- */

.home-philosophy { background: var(--ad-surface); }

.home-philosophy__inner {
  display: grid;
  grid-template-columns: minmax(0, 21%) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 3.4rem);
  align-items: start;
}

.home-philosophy__intro { max-width: 28rem; }

.home-philosophy__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-philosophy__grid > * {
  padding-inline: clamp(.7rem, 1.5vw, 1.7rem);
  border-left: 1px solid var(--ad-line);
}

.home-philosophy__grid > *:first-child { border-left: 0; }

.home-philosophy__link { margin-top: clamp(1.4rem, 2.4vw, 2.4rem); }

/* --------------------------------------------------------------------------
   Projects bento
   -------------------------------------------------------------------------- */

.home-projects { background: var(--ad-surface); padding-top: 0; }

.home-projects__inner {
  display: grid;
  grid-template-columns: minmax(0, 19%) minmax(0, 1fr);
  gap: clamp(1.4rem, 2.4vw, 2.6rem);
  align-items: start;
}

.home-projects__intro { max-width: 26rem; padding-top: clamp(1rem, 2vw, 2.4rem); }
.home-projects__link { margin-top: clamp(1.6rem, 3.6vw, 4rem); display: block; }

.home-bento {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.1fr;
  grid-template-rows: repeat(20, minmax(0, 1fr));
  gap: clamp(.55rem, .9vw, 1rem);
  height: clamp(430px, 40vw, 610px);
}

.home-bento__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ad-r);
  background: var(--ad-surface-2);
  transition: transform var(--ad-t) var(--ad-ease-out), box-shadow var(--ad-t) var(--ad-ease);
}

.home-bento__item img { width: 100%; height: 100%; object-fit: cover; }
.home-bento__item:hover { box-shadow: var(--ad-shadow-md); }

.home-bento__item--villa { grid-column: 1; grid-row: 1 / 13; }
.home-bento__item--corporate {
  grid-column: 1;
  grid-row: 14 / 21;
  margin-left: calc(-1 * clamp(1.4rem, 8vw, 8.5rem));
}
.home-bento__item--living { grid-column: 2; grid-row: 1 / 10; }
.home-bento__item--retail { grid-column: 2; grid-row: 11 / 21; }
.home-bento__item--kitchen { grid-column: 3; grid-row: 1 / 10; }
.home-bento__item--hotel { grid-column: 3; grid-row: 11 / 21; }

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.home-services {
  position: relative;
  background: var(--ad-page);
  isolation: isolate;
  overflow: hidden;
}

.home-services__media {
  position: absolute;
  top: clamp(1.2rem, 2.4vw, 2.6rem);
  /* Sit flush with the container edge rather than the viewport edge. */
  right: max(var(--ad-gutter), calc((100% - var(--ad-container)) / 2 + var(--ad-gutter)));
  width: clamp(220px, 28vw, 405px);
  height: clamp(230px, 27vw, 400px);
  z-index: -1;
}

.home-services__head {
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 26%);
  gap: clamp(1.4rem, 3vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 3.4vw, 3.6rem);
}

.home-services__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  /* Stop the six columns short of the still-life that sits at the container's
     right edge, so the two final columns never run underneath it. */
  max-width: 67%;
}

.home-services__grid > * {
  padding-inline: clamp(.55rem, 1.2vw, 1.35rem);
  border-left: 1px solid var(--ad-line);
}

.home-services__grid > *:first-child { border-left: 0; padding-left: 0; }

.home-services__grid .ad-feature__title--sm { min-height: 2.4em; }
.home-services__grid .ad-feature__text { max-width: 24ch; }

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */

.home-process { background: var(--ad-page); padding-top: clamp(2rem, 3vw, 3.4rem); }

.home-process__head { text-align: center; margin-bottom: clamp(2rem, 3.2vw, 3.2rem); }

.home-process__rail { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Locations
   -------------------------------------------------------------------------- */

.home-locations { background: var(--ad-page); }
.home-locations__head { text-align: center; margin-bottom: clamp(1.6rem, 2.6vw, 2.6rem); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .home-philosophy__inner,
  .home-projects__inner { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); }
  .home-services__head { grid-template-columns: minmax(0, 40%) minmax(0, 38%); }
  .home-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.6rem, 3vw, 2.4rem); max-width: 72%; }
  .home-services__grid > *:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .ad-locations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .home-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .home-hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(300px, 46vw, 460px);
    margin-top: clamp(1.8rem, 3vw, 2.6rem);
    z-index: 0;
    border-radius: var(--ad-r-lg);
    overflow: hidden;
  }
  .home-hero__content { max-width: 40rem; }
  .home-hero__badge { margin-top: clamp(1.4rem, 2.4vw, 2rem); }

  .home-philosophy__inner,
  .home-projects__inner { grid-template-columns: 1fr; }
  .home-philosophy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.6rem, 3vw, 2.2rem); }
  .home-philosophy__grid > *:nth-child(odd) { border-left: 0; padding-left: 0; }
  .home-projects { padding-top: var(--ad-section-y); }
  .home-projects__link { margin-top: 1.2rem; }
  /* Once the intro column stacks above the mosaic there is no copy for the
     wide tile to bleed into, so the outdent is removed. */
  .home-bento__item--corporate { margin-left: 0; }

  .home-services__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(220px, 34vw, 320px);
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
    border-radius: var(--ad-r-lg);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .home-services__head { grid-template-columns: 1fr; }
  /* The still-life is in normal flow below this breakpoint, so the columns
     can use the full width again. */
  .home-services__grid { max-width: none; }

  .home-process__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-process__rail::before { display: none; }
}

@media (max-width: 860px) {
  .home-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: clamp(140px, 26vw, 210px);
    height: auto;
  }
  .home-bento__item { grid-column: auto !important; grid-row: auto !important; margin-left: 0 !important; }
  .home-bento__item--villa { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
  .home-bento__item--corporate { grid-column: 1 / -1 !important; }
}

@media (max-width: 640px) {
  .home-philosophy__grid { grid-template-columns: 1fr; }
  .home-philosophy__grid > * { border-left: 0; padding-left: 0; }
  .home-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-services__grid > * { border-left: 0; padding-left: 0; padding-inline: 0; }
  .home-services__grid .ad-feature__title--sm { min-height: 0; }
  .home-process__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-locations { grid-template-columns: 1fr; }
  .home-hero__actions .ad-btn { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .home-bento { grid-template-columns: 1fr; }
  .ad-location { min-height: 0; }
}