/* Homepage: full-bleed aerial hero with an overlapping navy panel,
   a text service strip, an editorial service index and a layered photo set.
   Builds on the tokens in styles.css. Flexbox only; overlap comes from negative margins. */

:root {
  --stage-height: clamp(24rem, 66vh, 40rem);
  --stage-height-mobile: 62vw;
  --panel-width: 52rem;
  --panel-overlap: 15rem;
  --panel-overlap-tablet: 9rem;
  --panel-overlap-mobile: 3rem;
  --size-statement: clamp(1.75rem, 1rem + 2.2vw, 3rem);
  --size-index: clamp(1.375rem, 1rem + 1vw, 2rem);
  --size-panel-title: clamp(2.125rem, 1.4rem + 1.9vw, 3rem);
  --leading-statement: 1.2;
  --index-media: 34%;
  --index-media-tablet: 40%;
  --ratio-index: 3 / 2;
  --ratio-tall: 3 / 4;
  --mosaic-overlap: 4.5rem;
  --mosaic-drop: 6rem;
  --mosaic-side: 44%;
  --mosaic-side-tablet: 80%;
  --strip-basis: calc((100% - 3 * var(--space-6)) / 4);
  --strip-basis-half: calc((100% - var(--space-6)) / 2);
  --width-statement: 54rem;
  --color-panel-rule: #23395a;
}
html[lang="th"] {
  --size-panel-title: clamp(1.875rem, 1.3rem + 1.6vw, 2.625rem);
  --leading-statement: 1.45;
}

/* Hero stage */
.stage { display: flex; flex-direction: column; }
.stage-photo { display: flex; height: var(--stage-height); }
.stage-image { width: var(--width-full); height: var(--width-full); object-fit: cover; object-position: center 40%; }
.stage-body { display: flex; justify-content: center; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.stage-inner { display: flex; flex-direction: column; gap: var(--space-7); width: var(--width-full); max-width: var(--width-content); min-width: var(--basis-zero); }
.stage-panel { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--panel-width); margin-top: calc(-1 * var(--panel-overlap)); padding: var(--space-7); background: var(--color-navy); color: var(--color-on-dark); }
.stage-label { margin: var(--space-0); font-family: var(--font-mono); font-size: var(--size-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent-on-dark); }
.stage-title { font-size: var(--size-panel-title); color: var(--color-on-dark); }
.stage-lead { margin: var(--space-0); font-size: var(--size-md); color: var(--color-on-dark-soft); }
.stage-panel .button-row { padding-top: var(--space-3); }
.stage-panel .button-primary { background: var(--color-white); color: var(--color-navy); }
.stage-panel .button-primary:hover { background: var(--color-gray-wash); }
.stage-panel .button-secondary { color: var(--color-on-dark); border-color: var(--color-on-dark-soft); }
.stage-panel .button-secondary:hover { background: var(--color-navy-line); }

/* Service strip: four service names as plain links */
.strip { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-0); padding: var(--space-0); list-style: none; }
.strip-item { display: flex; flex: var(--basis-zero) var(--basis-zero) var(--strip-basis); min-width: var(--basis-zero); border-top: var(--border-mid) solid var(--color-navy); }
.strip-link { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); color: var(--color-navy); text-decoration: none; }
.strip-name { font-family: var(--font-display); font-size: var(--size-md); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.strip-text { font-size: var(--size-sm); color: var(--color-ink-soft); }
.strip-link:hover .strip-name { color: var(--color-accent-strong); }

/* Statement */
.statement { display: flex; flex-direction: column; gap: var(--space-6); }
.statement-text { margin: var(--space-0); max-width: var(--width-statement); font-family: var(--font-display); font-size: var(--size-statement); font-weight: var(--weight-medium); line-height: var(--leading-statement); color: var(--color-navy); }
.statement-row { display: flex; gap: var(--space-8); align-items: flex-start; padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-gray-line); }
.statement-body { display: flex; flex-direction: column; gap: var(--space-4); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); max-width: var(--width-text); color: var(--color-ink-soft); }
.statement-body p { margin: var(--space-0); }
.name-list { display: flex; flex-direction: column; gap: var(--space-4); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); margin: var(--space-0); }
.name-item { display: flex; flex-direction: column; gap: var(--space-1); }
.name-label { font-family: var(--font-mono); font-size: var(--size-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gray); }
.name-value { margin: var(--space-0); font-weight: var(--weight-medium); color: var(--color-navy); }
.name-value-thai { margin: var(--space-0); font-family: var(--font-thai); font-weight: var(--weight-medium); color: var(--color-navy); }

/* Service index: one row per service, separated by rules */
.index { display: flex; flex-direction: column; margin: var(--space-0); padding: var(--space-0); list-style: none; border-bottom: var(--border-thin) solid var(--color-gray-line); }
.index-row { display: flex; align-items: center; gap: var(--space-8); padding-block: var(--space-6); border-top: var(--border-thin) solid var(--color-gray-line); }
.index-body { display: flex; flex-direction: column; gap: var(--space-3); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.index-title { font-size: var(--size-index); color: var(--color-navy); }
.index-text { margin: var(--space-0); max-width: var(--width-text); color: var(--color-ink-soft); }
.index-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding-top: var(--space-2); }
.index-media { display: flex; flex: var(--basis-zero) var(--basis-zero) var(--index-media); min-width: var(--basis-zero); }
.index-media .photo { aspect-ratio: var(--ratio-index); }

/* Field work: layered photo set on deep navy */
.section-deep { background: var(--color-navy-deep); color: var(--color-on-dark); }
.section-deep .section-title { color: var(--color-on-dark); }
.section-deep .section-lead { color: var(--color-on-dark-soft); }
.section-deep .photo-caption { color: var(--color-on-dark-soft); }
.section-deep .photo { background: var(--color-navy); }
.section-deep .text-link { color: var(--color-accent-on-dark); border-bottom-color: var(--color-accent-on-dark); }
.mosaic { display: flex; align-items: flex-start; }
.mosaic-main { display: flex; flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.mosaic-side { display: flex; flex-direction: column; gap: var(--space-5); flex: var(--basis-zero) var(--basis-zero) var(--mosaic-side); min-width: var(--basis-zero); margin-top: var(--mosaic-drop); margin-left: calc(-1 * var(--mosaic-overlap)); }
.mosaic-pair { display: flex; gap: var(--space-5); padding: var(--space-5); background: var(--color-navy-deep); }
.mosaic-pair .photo { aspect-ratio: var(--ratio-tall); }
.section-foot { display: flex; }

/* Enquiry */
.enquiry { display: flex; gap: var(--space-8); align-items: flex-start; }
.enquiry-text { display: flex; flex-direction: column; gap: var(--space-4); flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); }
.enquiry-steps { display: flex; flex-direction: column; flex: var(--grow-one) var(--grow-one) var(--basis-zero); min-width: var(--basis-zero); margin: var(--space-0); padding: var(--space-0); list-style: none; }
.enquiry-step { display: flex; gap: var(--space-4); align-items: baseline; padding-block: var(--space-4); border-top: var(--border-thin) solid var(--color-gray-line); color: var(--color-ink); }
.enquiry-steps .button-row { padding-top: var(--space-5); }

/* Tablet */
@media (max-width: 1023px) {
  .stage-panel { margin-top: calc(-1 * var(--panel-overlap-tablet)); padding: var(--space-7) var(--space-6) var(--space-6); }
  .strip-item { flex-basis: var(--strip-basis-half); }
  .statement-row { flex-direction: column; gap: var(--space-6); }
  .index-row { gap: var(--space-6); }
  .index-media { flex-basis: var(--index-media-tablet); }
  .mosaic { flex-direction: column; }
  .mosaic-main { flex-basis: auto; width: var(--width-full); }
  .mosaic-side { flex-basis: auto; align-self: flex-end; width: var(--mosaic-side-tablet); margin-top: calc(-1 * var(--mosaic-overlap)); margin-left: var(--space-0); }
  .enquiry { flex-direction: column; gap: var(--space-6); }
  .enquiry-steps { width: var(--width-full); }
}

/* Mobile */
@media (max-width: 639px) {
  .stage-photo { height: var(--stage-height-mobile); }
  .stage-body { padding-left: var(--space-0); padding-right: var(--space-0); }
  .stage-inner { gap: var(--space-6); }
  .stage-panel { margin-top: calc(-1 * var(--panel-overlap-mobile)); margin-right: var(--gutter); padding: var(--space-6) var(--gutter); }
  .strip { padding-inline: var(--gutter); gap: var(--space-4); }
  .strip-item { flex-basis: var(--width-full); }
  .strip-text { display: none; }
  .index-row { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .index-media { order: -1; flex-basis: auto; }
  .mosaic-side { width: var(--width-full); margin-top: var(--space-5); }
  .mosaic-pair { padding: var(--space-0); gap: var(--space-3); }
}