/* =========================================================
   Aroha — HOME / FIGMA-ALIGNED VERSION
   Used with index-corrected.html and existing global.css
   Photography / illustration is supplied as ONE composite image.
========================================================= */

.page-home { overflow-x: clip; }
.page-home main { overflow: clip; }
.page-home .section-kicker { font-size: 10px; font-weight: 600; letter-spacing: .17em; }
.page-home .button { min-height: 44px; }

/* 01 — HERO / FULL FIGMA COMPOSITION ------------------------ */
.home-hero {
  position: relative;
  isolation: isolate;
  background: #fff;
  overflow: hidden;
}

/* The 1440 × 1243 artwork ALREADY includes the shoreline, fine line art
   and the white space. Never crop it with a fixed height or cover. */
.hero-visual {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  overflow: visible;
  background: #fff;
}
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* Pull both text columns onto the WHITE LOWER PART of the artwork. */
.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(45px, 7vw, 115px);
  align-items: start;
  margin-top: clamp(-310px, -15vw, -180px);
  padding-bottom: clamp(70px, 7vw, 125px);
}
.hero-copy {
  max-width: 530px;
  padding-top: clamp(125px, 11vw, 190px);
}
.hero-copy p {
  margin: 0 0 23px;
  color: var(--color-text);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.46;
}
.hero-copy p:last-of-type { margin-bottom: 0; }
.hero-actions { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.hero-actions .button { background: #fff; }
.hero-heading { min-width: 0; text-align: center; }
.hero-heading h1 {
  font-size: clamp(69px, 7.5vw, 128px);
  line-height: .96;
  letter-spacing: -.038em;
  font-weight: 400;
}
.hero-heading em { font-weight: 400; }

/* 02 — INTRODUCTION ---------------------------------------- */
.home-introduction { background: #fff; padding-top: clamp(85px, 9vw, 145px); }
.introduction-heading { text-align: center; margin: 0 auto clamp(50px, 6vw, 90px); }
.introduction-heading .section-kicker { margin-bottom: clamp(58px, 6.5vw, 105px); }
.introduction-heading h2 { font-size: clamp(58px, 5.8vw, 104px); line-height: .98; letter-spacing: -.032em; }
.introduction-layout { width: min(930px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(42px, 7vw, 118px); padding-bottom: clamp(95px, 10vw, 170px); }
.introduction-copy p { margin: 0 0 26px; color: var(--color-text); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.43; }
.introduction-copy .introduction-closing { font-weight: 600; margin-top: 30px; }
.introduction-visual { width: 100%; height: clamp(360px, 39vw, 670px); background: #fff; overflow: hidden; }
.introduction-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* 03 — FOUR QUESTIONS -------------------------------------- */
.home-questions { background: #fff; padding: clamp(80px, 8vw, 130px) 0 clamp(90px, 9vw, 150px); }
.questions-heading { text-align: center; margin: 0 auto 70px; }
.questions-heading .section-kicker { margin-bottom: 27px; }
.questions-heading h2 { font-size: clamp(53px, 5.5vw, 94px); line-height: .96; }
.questions-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.question-card { min-width: 0; padding: 5px clamp(17px, 2.6vw, 42px) 10px; border-left: 1px solid var(--color-border); }
.question-card:first-child { border-left: 0; padding-left: 0; }
.question-card:last-child { padding-right: 0; }
.question-icon { display: flex; align-items: center; height: 56px; margin-bottom: 23px; }
.question-icon img { width: 46px; height: 46px; object-fit: contain; }
.question-card h3 { margin: 0 0 11px; font: 600 12px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em; }
.question-card h4 { margin: 0 0 13px; min-height: 55px; font: 400 clamp(25px, 2vw, 34px)/1.03 var(--font-heading); }
.question-card p { max-width: 280px; font-size: 12px; line-height: 1.55; color: var(--color-text-secondary); }

/* SHARED HORIZONTAL SLIDER ------------------------------- */
.slider-shell { position: relative; width: 100%; min-width: 0; }
.slider-track {
  --track-gap: clamp(20px, 3vw, 48px);
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--track-gap);
  padding: 8px var(--page-gutter) 16px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-gutter);
  scrollbar-width: thin; scrollbar-color: rgba(32,24,21,.22) transparent;
  -webkit-overflow-scrolling: touch;
}
.slider-track > article { flex: 0 0 auto; scroll-snap-align: start; }
.slider-track:focus-visible { outline-offset: -3px; }
.slider-track::-webkit-scrollbar { height: 5px; }
.slider-track::-webkit-scrollbar-thumb { background: rgba(32,24,21,.20); border-radius: 4px; }
.slider-controls { display: flex; justify-content: flex-end; gap: 10px; padding: 17px var(--page-gutter) 0; }
.slider-arrow { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; font-size: 19px; line-height: 1; transition: background .25s ease, color .25s ease; }
.slider-arrow:hover { background: var(--color-earth-dark); color: #fff; }

/* 04 — SELECTED WORK --------------------------------------- */
.home-work { background: #fff; padding: clamp(85px, 9vw, 145px) 0 clamp(85px, 9vw, 140px); }
.work-heading { text-align: center; margin-bottom: clamp(60px, 7vw, 105px); }
.work-heading .section-kicker { margin-bottom: 45px; }
.work-heading h2 { font-size: clamp(60px, 6.1vw, 105px); line-height: .96; }
.work-grid { --track-gap: clamp(25px, 4vw, 60px); }
.work-card { width: clamp(250px, 25.5vw, 390px); min-width: 0; }
.work-card-image { display: block; width: 100%; aspect-ratio: .92 / 1; overflow: hidden; background: var(--color-sand); }
.work-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .75s var(--ease-out); }
.work-card-image:hover img { transform: scale(1.04); }
.work-card-content { padding-top: 17px; }
.work-category { margin-bottom: 11px; font-size: 9px; font-weight: 600; line-height: 1.45; color: var(--color-text); }
.work-card h3 { margin: 0 0 10px; font: 650 clamp(15px, 1.3vw, 19px)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: -.015em; }
.work-card p { font-size: clamp(11px, .88vw, 13px); line-height: 1.35; color: var(--color-text); }

/* 05 — EXPERTISE ------------------------------------------- */
.home-expertise { background: #fff; padding: clamp(80px, 8vw, 125px) 0 clamp(80px, 8vw, 125px); }
.expertise-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px clamp(50px, 7vw, 120px); align-items: end; margin-bottom: clamp(70px, 7vw, 110px); }
.expertise-heading .section-kicker { grid-column: 1/-1; margin-bottom: 21px; }
.expertise-heading h2 { font-size: clamp(58px, 5.8vw, 100px); line-height: .96; }
.expertise-heading > p { max-width: 440px; padding-bottom: 8px; color: var(--color-text); font-size: clamp(12px, 1vw, 15px); line-height: 1.45; }
.expertise-grid { --track-gap: 0px; }
.expertise-card { width: clamp(255px, 27.5vw, 420px); min-height: 245px; padding: 0 clamp(23px, 4vw, 62px); border-left: 1px solid var(--color-border); }
.expertise-card:first-child { border-left: 0; padding-left: 0; }
.expertise-icon { height: 68px; display: flex; align-items: flex-start; margin-bottom: 3px; }
.expertise-icon img { width: 49px; height: 49px; object-fit: contain; }
.expertise-number { display: block; margin-bottom: 12px; font: 700 21px/1.2 var(--font-body); }
.expertise-card h3 { max-width: 330px; margin: 0 0 13px; font: 600 clamp(17px, 1.55vw, 23px)/1.14 var(--font-body); letter-spacing: -.018em; }
.expertise-card p { max-width: 330px; font-size: clamp(11px, .93vw, 13px); color: var(--color-text); line-height: 1.35; }
.expertise-action { display: flex; justify-content: center; margin-top: clamp(35px, 5vw, 78px); }

/* 06 — SCIENCE --------------------------------------------- */
.home-science { background: var(--color-paper); padding: clamp(90px, 9vw, 155px) 0 clamp(65px, 7vw, 110px); }
.science-top { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(45px, 7vw, 115px); align-items: start; margin-bottom: clamp(80px, 9vw, 160px); }
.science-heading .section-kicker { margin-bottom: clamp(46px, 5vw, 83px); }
.science-heading h2 { font-size: clamp(59px, 5.7vw, 101px); line-height: .96; }
.science-introduction { max-width: 630px; align-self: end; padding-top: 60px; }
.science-introduction p { font-size: clamp(12px, 1vw, 15px); line-height: 1.4; margin-bottom: 18px; color: var(--color-text); }
.science-introduction strong { font-weight: 700; }
.science-introduction .science-statement { font-weight: 700; margin-top: 22px; }
.science-grid { --track-gap: 14px; }
.science-card { width: clamp(260px, 24vw, 380px); padding: 24px 22px 27px; background: #fff; min-height: 390px; }
.science-image { width: min(78%, 210px); aspect-ratio: 1 / 1.04; margin: 0 auto 28px; overflow: hidden; border-radius: 39% 46% 44% 37% / 37% 44% 40% 45%; background: var(--color-stone); }
.science-card:nth-child(2) .science-image { border-radius: 45% 30% 42% 40% / 29% 40% 47% 40%; }
.science-card:nth-child(3) .science-image { border-radius: 35% 46% 40% 43% / 46% 34% 42% 40%; }
.science-card:nth-child(4) .science-image { border-radius: 42% 36% 48% 38% / 39% 48% 36% 42%; }
.science-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.science-category { display: block; margin-bottom: 12px; font: 600 9px/1.45 var(--font-body); color: var(--color-text); }
.science-card h3 { margin: 0 0 12px; font: 700 17px/1.2 var(--font-body); text-transform: uppercase; }
.science-card p { font-size: clamp(11px, .88vw, 13px); line-height: 1.4; color: var(--color-text); }

/* 07 — METHOD ---------------------------------------------- */
.home-method { position: relative; background: #fff; padding: clamp(80px, 8vw, 140px) 0; }
.method-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(45px, 7vw, 120px); align-items: center; }
.method-text { min-width: 0; }
.method-heading .section-kicker { margin-bottom: 30px; }
.method-heading h2 { font-size: clamp(55px, 5.1vw, 93px); line-height: .93; margin-bottom: 27px; }
.method-copy { max-width: 610px; }
.method-copy p { font-size: clamp(12px, .98vw, 14px); line-height: 1.52; color: var(--color-text); margin-bottom: 13px; }
.method-copy .method-statement { font-weight: 600; margin: 20px 0 24px; }
.method-copy .button { margin-top: 5px; }
.method-visual { width: 100%; aspect-ratio: 1.12 / 1; min-height: 340px; overflow: hidden; background: #fff; }
.method-background { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* 08–09 — ONE CONTINUOUS FIGMA COMPOSITION ------------------ */
.hospitality-commercial-composition { position: relative; isolation: isolate; background: #fff; }
.home-hospitality { position: relative; z-index: 2; padding: clamp(68px, 7vw, 110px) 0 clamp(20px, 2.8vw, 46px); background: #fff; }
.hospitality-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(60px, 12vw, 210px); align-items: start; }
.hospitality-heading { max-width: 460px; }
.hospitality-heading .section-kicker { margin-bottom: 32px; }
.hospitality-heading h2 { font-size: clamp(62px, 5.6vw, 100px); line-height: .92; margin-bottom: 28px; }
.hospitality-copy { max-width: 370px; }
.hospitality-copy p { color: var(--color-text); font-size: clamp(11px, .92vw, 13px); line-height: 1.43; }
.hospitality-memory { max-width: 460px; padding-top: 35px; }
.hospitality-memory p { font-size: clamp(12px, .97vw, 15px); line-height: 1.25; font-weight: 600; margin: 0 0 8px; color: var(--color-text); }
.hospitality-memory .hospitality-lead { font-weight: 700; margin-bottom: 22px; }

/* A white upper-left sweep exposes the section above the photographic rock.
   Clip only the photograph; do NOT tint the white area dark. */
.home-commercial { position: relative; z-index: 1; isolation: isolate; min-height: clamp(690px, 61vw, 1020px); margin: 0; background: #fff; color: #fff; overflow: hidden; }
.commercial-background { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  clip-path: polygon(0 27%, 7% 24%, 17% 21%, 30% 18%, 42% 14%, 54% 11%, 66% 8%, 80% 4%, 100% 0, 100% 100%, 0 100%); }
.commercial-background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.commercial-background::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(20,12,9,.04) 58%, rgba(20,12,9,.45) 100%); pointer-events: none; }
.commercial-layout { position: relative; z-index: 1; min-height: inherit; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding-top: clamp(65px, 7vw, 125px); padding-bottom: clamp(44px, 5vw, 80px); }
.commercial-heading { width: min(49%, 650px); text-align: center; }
.commercial-heading .section-kicker { color: #fff; margin-bottom: 20px; }
.commercial-heading h2 { font-size: clamp(60px, 6.1vw, 108px); line-height: .94; color: #fff; }
.commercial-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(45px, 6vw, 100px); align-self: stretch; margin-top: auto; padding-top: clamp(275px, 31vw, 530px); }
.commercial-copy-column { max-width: 555px; }
.commercial-copy p { color: #fff; font-size: clamp(11px, .98vw, 15px); line-height: 1.42; font-weight: 500; margin-bottom: 16px; }
.commercial-copy .commercial-statement { margin-top: 21px; font-size: clamp(17px, 1.6vw, 25px); font-weight: 700; line-height: 1.26; }

/* 10 — COLLECTIVE ------------------------------------------ */
.home-collective { background: var(--color-earth-dark); color: #fff; padding: clamp(125px, 12vw, 215px) 0 clamp(135px, 12vw, 220px); }
.collective-layout { width: min(650px, calc(100% - 2 * var(--page-gutter))); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
.collective-heading { width: 100%; margin-bottom: 35px; }
.collective-heading h2 { display: flex; align-items: flex-start; gap: 15px; font-size: 1rem; line-height: 1; font-weight: 400; }
.collective-initial { flex: 0 0 auto; display: block; font: 400 clamp(115px, 11vw, 195px)/.78 var(--font-heading); }
.collective-title { display: block; font: 400 clamp(43px, 4vw, 67px)/.98 var(--font-heading); letter-spacing: -.02em; padding-top: 9px; }
.collective-title em { font-style: italic; }
.collective-copy { width: min(490px, 100%); margin-left: clamp(0px, 1vw, 12px); }
.collective-copy p { color: rgba(255,255,255,.93); font-size: clamp(12px, 1vw, 15px); line-height: 1.35; margin-bottom: 20px; }
.collective-copy .button { margin-top: 20px; min-width: 160px; }

/* 11 — TABLET ---------------------------------------------- */
@media (max-width: 1100px) {
  .hero-heading h1 { font-size: clamp(63px, 7.3vw, 92px); }
  .hero-content { gap: 42px; }
  .expertise-heading { gap: 20px 50px; }
  .science-top { gap: 50px; }
  .method-layout { gap: 38px; }
  .hospitality-layout { gap: 60px; }
}

/* 12 — SMALL TABLET ---------------------------------------- */
@media (max-width: 800px) {
  .hero-visual { height: auto; overflow: visible; }
  .hero-image { width: 100%; height: auto; object-fit: contain; }
  .hero-content { margin-top: -80px; grid-template-columns: 1fr; gap: 35px; padding-bottom: 80px; }
  .hero-heading { grid-row: 1; text-align: right; }
  .hero-heading h1 { display: inline-block; font-size: clamp(59px, 10vw, 83px); }
  .hero-copy { grid-row: 2; padding-top: 15px; max-width: 590px; }
  .introduction-layout { gap: 35px; }
  .questions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 0; }
  .question-card:nth-child(odd) { border-left: 0; padding-left: 0; }
  .question-card:nth-child(even) { border-left: 1px solid var(--color-border); }
  .expertise-heading { grid-template-columns: 1fr; gap: 25px; }
  .expertise-heading .section-kicker { grid-column: 1; }
  .expertise-heading > p { max-width: 580px; }
  .science-top { grid-template-columns: 1fr; gap: 22px; }
  .science-heading .section-kicker { margin-bottom: 35px; }
  .science-introduction { padding-top: 0; }
  .method-layout { grid-template-columns: 1fr; }
  .method-visual { min-height: 0; }
  .hospitality-layout { grid-template-columns: 1fr 1fr; gap: 40px; }
  .home-hospitality { padding-bottom: 28px; }
  .home-commercial { min-height: 790px; }
  .commercial-background { clip-path: polygon(0 24%, 25% 19%, 50% 13%, 75% 6%, 100% 0, 100% 100%, 0 100%); }
  .commercial-layout { padding-top: 80px; }
  .commercial-heading { width: 55%; }
  .commercial-copy { padding-top: 310px; }
}

/* 13 — MOBILE ---------------------------------------------- */
@media (max-width: 600px) {
  .hero-visual { height: auto; }
  .hero-content { margin-top: -38px; padding-bottom: 66px; }
  .hero-heading h1 { font-size: clamp(48px, 12.5vw, 70px); }
  .hero-copy { padding-top: 12px; }
  .hero-copy p { font-size: 12px; line-height: 1.48; }
  .hero-actions { gap: 17px; margin-top: 25px; }
  .home-introduction { padding-top: 70px; }
  .introduction-heading { margin-bottom: 42px; }
  .introduction-heading .section-kicker { margin-bottom: 45px; }
  .introduction-heading h2 { font-size: clamp(47px, 10.8vw, 67px); }
  .introduction-layout { grid-template-columns: 1fr; gap: 0; padding-bottom: 70px; }
  .introduction-copy p { font-size: 12px; line-height: 1.55; }
  .introduction-visual { height: 270px; }
  .home-questions { padding: 75px 0; }
  .questions-heading { margin-bottom: 42px; }
  .questions-heading h2 { font-size: clamp(46px, 10vw, 65px); }
  .questions-grid { grid-template-columns: 1fr; gap: 0; }
  .question-card, .question-card:nth-child(even), .question-card:nth-child(odd) { padding: 27px 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .question-card h4 { min-height: 0; }
  .slider-track { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .slider-controls { padding-right: var(--page-gutter); }
  .home-work { padding: 80px 0; }
  .work-heading { margin-bottom: 45px; }
  .work-heading .section-kicker { margin-bottom: 28px; }
  .work-heading h2 { font-size: clamp(48px, 10.5vw, 65px); }
  .work-card { width: min(77vw, 330px); }
  .work-card h3 { font-size: 16px; }
  .home-expertise { padding: 76px 0; }
  .expertise-heading { margin-bottom: 48px; }
  .expertise-heading h2 { font-size: clamp(49px, 10.5vw, 69px); }
  .expertise-card { width: min(78vw, 315px); padding: 0 25px; }
  .expertise-card:first-child { padding-left: 0; }
  .expertise-action { margin-top: 38px; }
  .home-science { padding: 80px 0; }
  .science-heading h2 { font-size: clamp(49px, 10.5vw, 70px); }
  .science-top { margin-bottom: 54px; }
  .science-card { width: min(78vw, 330px); min-height: 365px; }
  .home-method { padding: 80px 0; }
  .method-heading h2 { font-size: clamp(47px, 10vw, 67px); }
  .method-visual { aspect-ratio: 1 / .85; }
  .home-hospitality { padding: 82px 0 28px; }
  .hospitality-layout { grid-template-columns: 1fr; gap: 40px; }
  .hospitality-heading h2 { font-size: clamp(52px, 11vw, 75px); }
  .hospitality-memory { padding-top: 0; }
  .home-commercial { min-height: 790px; margin-top: 0; }
  .commercial-background { clip-path: polygon(0 17%, 25% 13%, 50% 9%, 75% 4%, 100% 0, 100% 100%, 0 100%); }
  .commercial-layout { align-items: stretch; padding-top: 45px; padding-bottom: 32px; }
  .commercial-heading { width: 65%; margin-left: auto; text-align: right; }
  .commercial-heading h2 { font-size: clamp(43px, 10vw, 62px); }
  .commercial-copy { grid-template-columns: 1fr; gap: 14px; padding-top: 340px; }
  .commercial-copy p { font-size: 11px; line-height: 1.38; }
  .commercial-copy .commercial-statement { font-size: 18px; }
  .home-collective { padding: 105px 0 120px; }
  .collective-initial { font-size: clamp(95px, 23vw, 140px); }
  .collective-title { font-size: clamp(34px, 8.5vw, 51px); }
  .collective-heading h2 { gap: 10px; }
  .collective-copy p { font-size: 12px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .slider-track { scroll-behavior: auto; }
  .work-card-image img { transition: none; }
}