/* Home: dune hero, selected work on the sand, offer teaser, Start a Project call, scroll storyboard.
   `--screen` (shell.css) is one viewport under the sticky header. */

/* ---------- Dune imagery: one picture per phase, the matching one shown ---------- */

.hm-dunes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hm-dunes > picture {
  display: none;
}
[data-phase="dawn"] .hm-dunes > [data-for="dawn"],
[data-phase="noon"] .hm-dunes > [data-for="noon"],
[data-phase="dusk"] .hm-dunes > [data-for="dusk"],
[data-phase="night"] .hm-dunes > [data-for="night"] {
  display: block;
}
/* The render's sky is the page background, so the image can sit lower than the box top without a seam: the horizon
   lands under the copy and the nearest dunes run off the bottom. */
.hm-dunes img {
  position: absolute;
  inset-inline: 0;
  top: var(--dune-top, 0);
  width: 100%;
  max-width: none;
  height: auto;
}
.hm-stage {
  --dune-top: 2.5rem;
}
/* The hero's sand thins into the page below it, as the scene does when it scrolls away. */
.hm-hero .hm-stage {
  mask-image: linear-gradient(to bottom, var(--color-text) 72%, transparent);
}
@media (max-width: 40rem) {
  .hm-stage {
    --dune-top: 7.5rem;
  }
}

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

.hm-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--screen);
  overflow: hidden;
}
.hm-hero__copy {
  position: relative;
  padding-block-start: var(--space-3xl);
}
/* The display role (.t-display), allowed to grow a step past its cap on wide screens. */
.hm-hero__title {
  max-width: 12em;
  margin-block: var(--space-s) var(--space-l);
  font-size: clamp(calc(var(--type-display-size) * 0.62), 6.2vw, calc(var(--type-display-size) * 1.1));
}
.hm-hero__lead {
  max-width: 34rem;
}
.hm-hero__actions {
  --cluster: var(--space-s);
  margin-block-start: var(--space-xl);
}
.hm-hero__foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-block-start: auto;
  padding-block-end: var(--space-xl);
}

/* A quiet pill over the sand: the wind hint, the scroll cue. */
.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-background) 78%, transparent);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  text-decoration: none;
}
.hm-chip .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-text-muted);
}
.hm-chip--scroll {
  margin-inline-start: auto;
}
.hm-chip--scroll::after {
  content: "↓";
  color: var(--color-accent-text);
}

@media (max-width: 40rem) {
  .hm-hero__copy {
    padding-block-start: var(--space-xl);
  }
  .hm-hero__title {
    margin-block: var(--space-xs) var(--space-m);
  }
  .hm-hero__actions {
    margin-block-start: var(--space-l);
  }
  .hm-hero__foot {
    padding-block-end: var(--space-l);
  }
  .hm-chip--scroll {
    display: none;
  }
}

/* ---------- Selected work ---------- */

.hm-work {
  position: relative;
  padding-block: var(--section);
}
/* The live tier's work stands on the settled field (the storyboard's last frame). */
.hm-work--floor {
  padding-block-end: 14rem;
}
.hm-floor {
  top: auto;
  height: 36rem;
  mask-image: linear-gradient(to top, transparent, var(--color-text) 30%);
}
.hm-floor img {
  top: auto;
  bottom: -6rem;
}

.hm-work__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-l) var(--grid-gap);
  align-items: end;
  margin-block-end: var(--space-2xl);
}
.hm-work__intro {
  --stack: var(--space-s);
  max-width: 30rem;
}

.hm-cases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* On the sand, the cards stand at the heights of a dune profile; the still tier lines them up. */
.hm-work--floor .hm-case:nth-child(4n + 2),
.hm-board .hm-case:nth-child(4n + 2) {
  margin-block-start: 4rem;
}
.hm-work--floor .hm-case:nth-child(4n + 3),
.hm-board .hm-case:nth-child(4n + 3) {
  margin-block-start: 1.5rem;
}
.hm-work--floor .hm-case:nth-child(4n + 4),
.hm-board .hm-case:nth-child(4n + 4) {
  margin-block-start: 5.5rem;
}

.hm-case__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--rule);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  transition: border-color 0.15s var(--ease);
}
.hm-case__inner:hover {
  border-color: var(--color-text-muted);
}
.hm-case__inner:has(:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
/* The cover rounds its own top corners (no clipping parent: clipped edges rasterize differently run to run). */
.hm-case__media {
  aspect-ratio: 16 / 10;
  border-start-start-radius: calc(var(--radius-m) - 1px);
  border-start-end-radius: calc(var(--radius-m) - 1px);
  background: var(--color-line);
}
.hm-case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.hm-case__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m) var(--space-l) var(--space-l);
}
.hm-case__body .tag {
  margin-block-end: var(--space-xs);
}
/* The title's link covers the whole card. */
.hm-case__title a {
  text-decoration: none;
}
.hm-case__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hm-case__title a:focus-visible {
  outline: none;
}

/* Surfacing through the sand: the card is clipped at its resting line and slides up past it; the line is soft. */
.hm-case[data-rising] {
  overflow: clip;
  mask-image: linear-gradient(to top, transparent, var(--color-text) 2.5rem);
}
.hm-case[data-rising] .hm-case__inner {
  transform: translateY(calc((1 - var(--rise)) * 100%));
}

@media (max-width: 64rem) {
  .hm-work__head {
    grid-template-columns: minmax(0, 1fr);
  }
  .hm-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: the cards become rows (cover beside its title), one under another. */
@media (max-width: 40rem) {
  .hm-work--floor {
    padding-block-end: 10rem;
  }
  .hm-floor {
    height: 24rem;
  }
  .hm-floor img {
    bottom: -2rem;
  }
  .hm-work__head {
    margin-block-end: var(--space-xl);
  }
  .hm-cases {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s);
  }
  .hm-work--floor .hm-case.hm-case,
  .hm-board .hm-case.hm-case {
    margin-block-start: 0;
  }
  .hm-case__inner {
    flex-direction: row;
    align-items: stretch;
  }
  .hm-case__media {
    flex: none;
    width: 42%;
    aspect-ratio: auto;
    min-height: 100%;
    border-start-end-radius: 0;
    border-end-start-radius: calc(var(--radius-m) - 1px);
  }
  .hm-case__body {
    justify-content: center;
    padding: var(--space-s) var(--space-m);
  }
  .hm-case__body .tag {
    margin-block-end: var(--space-2xs);
    font-size: 0.75rem;
  }
  .hm-case__title {
    font-size: calc(var(--type-h3-size) * 0.75);
  }
  .hm-case[data-rising] .hm-case__inner {
    transform: translateY(calc((1 - var(--rise-m)) * 100%));
  }
}

/* ---------- Offer teaser ---------- */

.hm-offers-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl) var(--grid-gap);
  align-items: start;
}
.hm-offers-head {
  --stack: var(--space-m);
  max-width: 28rem;
}
.hm-offers-head .link--arrow {
  margin-block-start: var(--space-xs);
}
.hm-offers {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The main offer, the bundle: first and largest, on a night panel as on Services (never a second accent). */
.hm-feature {
  display: grid;
  gap: var(--space-l);
  padding: var(--space-2xl);
  margin-block-end: var(--space-s);
  border-radius: var(--radius-m);
  background: var(--color-background);
  color: var(--color-text);
}
/* At night the whole page is already dark: the panel rises one step instead. */
html[data-phase="night"] .hm-feature {
  background: var(--color-surface);
  border: var(--rule);
}
.hm-feature__name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}
.hm-feature__body {
  max-width: 34rem;
}
.hm-feature__tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding-block-start: var(--space-l);
  border-block-start: var(--rule);
}
.hm-feature__tier {
  display: grid;
  gap: var(--space-2xs);
}
.hm-feature__tier dd {
  margin: 0;
}

/* The other two offers: one row each, under the panel. */
.hm-offer {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-xl);
  align-items: baseline;
  padding: var(--space-xl) var(--space-m);
  border-block-end: var(--rule);
}
.hm-offer__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* A starting price's figure, in a heading size but light, as a number rather than a title. */
.hm-amount {
  font-weight: var(--font-weight-light);
}

@media (max-width: 64rem) {
  .hm-offers-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 40rem) {
  .hm-feature {
    padding: var(--space-xl) var(--space-l);
  }
  .hm-offer {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: var(--space-s);
  }
  .hm-offer__body {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .hm-offer__name {
    grid-column: 1;
    grid-row: 1;
  }
  .hm-offer__price {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- Start a Project ---------- */

/* Straight after the offers: the call answers them, so no second section gap. */
.hm-cta-section {
  padding-block-start: 0;
}
.hm-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2xl);
  padding: var(--space-4xl) var(--space-3xl);
  border-radius: var(--radius-m);
  background: var(--color-text);
  color: var(--color-background);
}
/* The brand's contour pattern (contourLayer), faint behind the call. The panel inverts the page (dark in light
   phases, light in dark ones), so the shared dark-phase boost would bury its text: one strength in every phase. */
.hm-cta .hm-cta__contours {
  object-position: 30% 40%;
  opacity: 0.3;
}
.hm-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-width: 38rem;
}
.hm-cta .btn--secondary {
  color: var(--color-background);
  border-color: currentColor;
}
.hm-cta .btn--secondary:hover {
  background: var(--color-background);
  color: var(--color-text);
}
.hm-cta a:focus-visible {
  outline-color: var(--color-background);
}

@media (max-width: 64rem) {
  .hm-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}
@media (max-width: 40rem) {
  .hm-cta {
    padding: var(--space-2xl) var(--space-l);
  }
  .hm-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Design notes: placement only; the note is shared (.design-note) ---------- */

.hm-note {
  margin-block: var(--space-2xl);
}

/* ---------- Scroll storyboard: one viewport per frame ---------- */

.hm-screen {
  position: relative;
  height: var(--screen);
  overflow: hidden;
  border-block-end: var(--rule);
}
/* The headline scrolling off the top, fading as it goes. */
.hm-screen__hero {
  position: absolute;
  inset-inline: 0;
  top: 0;
  transform: translateY(-11rem);
  opacity: 0.32;
}
.hm-screen__work {
  position: absolute;
  inset-inline: 0;
  bottom: 7rem;
}
[data-frame="1"] .hm-screen__work {
  bottom: 5rem;
}
[data-frame="3"] .hm-screen__work {
  bottom: 9rem;
}
.hm-board .hm-work__intro .t-muted {
  max-width: 28rem;
}

@media (max-width: 40rem) {
  .hm-screen__hero {
    transform: translateY(-9rem);
  }
  /* Phones pin the work from the top: rows still under the sand run off the bottom of the screen. */
  .hm-screen__work,
  [data-frame="1"] .hm-screen__work,
  [data-frame="3"] .hm-screen__work {
    top: var(--space-xl);
    bottom: auto;
  }
  [data-frame="1"] .hm-screen__work {
    top: 23rem;
  }
  /* Halfway down the second screen the heading is already passing under the header. */
  [data-frame="3"] .hm-screen__work {
    top: -2.5rem;
  }
  /* A phone frame keeps the heading and drops the intro, so all four rows fit once they are up. */
  .hm-board .hm-work__intro .t-muted {
    display: none;
  }
}