/* =========================================================
   Aroha — EXPERTISE
   Page-specific styles; requires global.css.
   Image placeholders use ONE composed image per section.
   ========================================================= */

.page-expertise { background: #fff; overflow-x: clip; }
.page-expertise main { overflow: clip; }
.page-expertise .ex-kicker {
    display: block; font-family: var(--font-body); font-size: 11px; line-height: 1.5;
    font-weight: 600; letter-spacing: .19em; text-transform: uppercase;
}
.page-expertise h1, .page-expertise h2 { font-family: var(--font-heading); font-weight: 400; letter-spacing: -.035em; }
.page-expertise h2 em, .page-expertise h1 em { font-weight: 400; }
.page-expertise p { line-height: 1.48; }

/* The PDF's numbered lists read down the first column, then the next. */
.ex-list {
    list-style: none; margin: 0; padding: 0; counter-reset: ex-num;
    display: grid; gap: 12px 30px; align-content: start;
}
.ex-list-two { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(var(--list-rows), auto); grid-auto-flow: column; }
.ex-list-three { grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: repeat(var(--list-rows), auto); grid-auto-flow: column; }
.ex-list-one { grid-template-columns: 1fr; }
.ex-list li { counter-increment: ex-num; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 8px; align-items: baseline; font-size: 12px; font-weight: 500; line-height: 1.43; }
.ex-list li::before { content: counter(ex-num) ' /'; white-space: nowrap; font-size: 11px; font-weight: 500; }
.ex-list-label { font-size: 13px; font-weight: 500; }

/* 01 — Hero: the title sits in the WHITE CENTRAL SHAPE of the image. */
.ex-hero { background: #fff; }
.ex-hero-image {
    height: clamp(510px, 52vw, 800px); background: #fff url('assets/expertise-hero.png') center / cover no-repeat;
}
.ex-hero-intro { position: relative; max-width: 590px; margin: -165px auto 0; padding: 0 22px 140px; text-align: center; }
.ex-hero h1 { font-size: clamp(65px, 6vw, 110px); line-height: .9; margin: 0 auto 74px; }
.ex-hero-intro p { max-width: 530px; margin: 0 auto; font-size: 14px; line-height: 1.32; }

/* 02 — Strategy split: cream, divider at roughly 61% width. */
.ex-strategy { display: grid; grid-template-columns: 61% 39%; background: #f7f4f0; min-height: 680px; border-block: 1px solid var(--color-border); }
.ex-strategy-left { padding: clamp(75px, 8vw, 142px) clamp(45px, 6.8vw, 125px); }
.ex-strategy-left .ex-kicker { margin-bottom: 28px; }
.ex-strategy-left h2 { font-size: clamp(47px, 4.6vw, 81px); line-height: 1; margin-bottom: 80px; }
.ex-strategy-left .ex-list { max-width: 720px; }
.ex-strategy-right { display: flex; align-items: center; border-left: 1px solid var(--color-border); }
.ex-strategy-quote { width: 100%; padding: 76px clamp(40px, 5.5vw, 100px); border-top: 1px solid var(--color-border); }
.ex-strategy-quote p { max-width: 420px; font-size: clamp(21px, 2vw, 34px); line-height: 1.19; margin-bottom: 35px; }
.ex-strategy-quote p:last-child { margin-bottom: 0; }

/* 03 — Hospitality: white panel with two fine vertical boundaries. */
.ex-hospitality { background: #fff; }
.ex-bordered { width: min(1280px, calc(100% - 11%)); margin: 0 auto; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.ex-hospitality .ex-bordered { padding: clamp(90px, 9vw, 155px) clamp(45px, 9vw, 175px) 130px; }
.ex-hospitality .ex-kicker { margin-bottom: 26px; }
.ex-hospitality h2 { max-width: 970px; font-size: clamp(59px, 5.8vw, 108px); line-height: .96; margin-bottom: 80px; }
.ex-hospitality-columns { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(50px, 7vw, 125px); }
.ex-hospitality-questions { max-width: 400px; }
.ex-hospitality-lead { font-size: clamp(17px, 1.45vw, 25px); line-height: 1.18 !important; margin-bottom: 30px; }
.ex-hospitality-questions > p:not(.ex-hospitality-lead) { font-size: 14px; line-height: 1.23; }
.ex-hospitality-list .ex-list-label { margin-bottom: 20px; }
.ex-hospitality-list .ex-list { gap: 10px 19px; }
.ex-hospitality-list .ex-list li { font-size: 11px; }
.ex-hospitality-close { max-width: 970px; font-size: clamp(19px, 1.75vw, 30px); font-weight: 500; line-height: 1.22 !important; margin-top: 60px; }

/* 04 — Wellbeing: fixed visual left, content dark right. */
.ex-wellbeing { display: grid; grid-template-columns: 33% 67%; background: #211915; color: #fff; min-height: 760px; }
.ex-wellbeing-image { min-height: 740px; background: #544b43 url('assets/expertise-wellbeing.jpg') center / cover no-repeat; }
.ex-wellbeing-content { align-self: center; padding: 100px clamp(45px, 7.5vw, 145px); }
.ex-wellbeing .ex-kicker { margin-bottom: 30px; }
.ex-wellbeing h2 { font-size: clamp(62px, 5.4vw, 101px); line-height: .97; margin-bottom: 33px; }
.ex-wellbeing-content > p:not(.ex-list-label) { max-width: 680px; font-size: 13px; line-height: 1.36; margin-bottom: 37px; color: rgba(255,255,255,.88); }
.ex-wellbeing .ex-list-label { margin-bottom: 19px; }
.ex-wellbeing .ex-list { max-width: 770px; gap: 12px 18px; }
.ex-wellbeing .ex-list li { font-size: 11px; }
.ex-wellbeing .ex-wellbeing-conclusion { margin-top: 54px; margin-bottom: 0 !important; }

/* 05 — Architecture: centered on white with fine vertical borders. */
.ex-architecture { background: #fff; }
.ex-architecture-inner { padding: clamp(95px, 9vw, 165px) 25px 120px; text-align: center; }
.ex-architecture .ex-kicker { margin-bottom: 30px; }
.ex-architecture h2 { font-size: clamp(69px, 6.4vw, 119px); line-height: .92; margin-bottom: 54px; }
.ex-architecture h2 em { display: inline-block; padding-left: 1.4em; letter-spacing: .1em; }
.ex-architecture-intro { max-width: 600px; margin: 0 auto 64px; }
.ex-architecture-intro p { font-size: 14px; line-height: 1.25; margin-bottom: 25px; }
.ex-architecture .ex-list-label { margin-bottom: 26px; }
.ex-architecture-list { width: min(515px,100%); margin: 0 auto; gap: 11px 65px; text-align: left; }
.ex-architecture-list li { font-size: 11px; }
.ex-architecture-close { max-width: 650px; margin: 70px auto 0; font-size: clamp(19px, 1.7vw, 29px); line-height: 1.2 !important; font-weight: 500; }


/* =========================================================
   06 — CULTURE, ART & PLACE
========================================================= */

.ex-culture {
    position: relative;
    display: grid;
    grid-template-columns: 70% 30%;
    min-height: 760px;
    background: #f7f4f0;
    isolation: isolate;
    overflow: hidden;
}

.ex-culture-content {
    position: relative;
    z-index: 2;
    padding: 105px clamp(40px, 6.8vw, 120px);
}

.ex-culture .ex-kicker {
    margin-bottom: 28px;
}

.ex-culture h2 {
    font-size: clamp(62px, 5.2vw, 99px);
    line-height: .97;
    margin-bottom: 42px;
}

.ex-culture-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .87fr);
    gap: clamp(38px, 5vw, 90px);
}

.ex-culture-copy p {
    max-width: 445px;
    font-size: 13px;
    line-height: 1.36;
    margin-bottom: 22px;
}

.ex-culture-copy .ex-culture-statement {
    font-size: clamp(20px, 1.8vw, 31px);
    line-height: 1.13;
    margin-top: 60px;
}

.ex-culture-scope {
    padding-top: 5px;
}

.ex-culture-scope .ex-list-label {
    margin-bottom: 20px;
}

.ex-culture .ex-list {
    gap: 10px;
}

.ex-culture .ex-list li {
    font-size: 11px;
}

/* IMAGE — FULL PNG WITH TRANSPARENT LINE ART */

.ex-culture-image {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: visible;
    background: transparent;
}

.ex-culture-image img {
    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: auto;
    max-width: none;
    height: 100%;

    object-fit: contain;

    transform: translateX(-27.6%);
}


/* 07 — Activation: visual left, dark right. */
.ex-activation { display: grid; grid-template-columns: 33% 67%; min-height: 690px; background: #211915; color: #fff; }
.ex-activation-image { background: #e3ddd4 url('assets/expertise-activation.png') center / cover no-repeat; min-height: 650px; }
.ex-activation-content { align-self: center; padding: 105px clamp(55px, 9vw, 165px); }
.ex-activation .ex-kicker { margin-bottom: 28px; }
.ex-activation h2 { font-size: clamp(65px, 5.6vw, 106px); line-height: .96; margin-bottom: 36px; }
.ex-activation-content > p:not(.ex-list-label) { max-width: 650px; font-size: 13px; line-height: 1.36; margin-bottom: 34px; color: rgba(255,255,255,.86); }
.ex-activation .ex-list-label { margin-bottom: 20px; }
.ex-activation .ex-list { max-width: 680px; gap: 11px 35px; }
.ex-activation .ex-list li { font-size: 12px; }

/* Tablet */
@media (max-width: 1100px) {
    .ex-strategy-left { padding-inline: 45px; }
    .ex-strategy-quote { padding-inline: 35px; }
    .ex-wellbeing-content, .ex-activation-content { padding-inline: 52px; }
    .ex-culture-content { padding-inline: 45px; }
    .ex-culture { grid-template-columns: 73% 27%; }
    .ex-list li { font-size: 11px; }
}

/* Narrow tablet: keep intentional splits where possible. */
@media (max-width: 800px) {
    .ex-hero-image { height: 550px; }
    .ex-hero-intro { margin-top: -95px; padding-bottom: 95px; }
    .ex-hero h1 { font-size: clamp(63px, 9vw, 82px); margin-bottom: 48px; }
    .ex-strategy { grid-template-columns: 1fr; }
    .ex-strategy-left { padding: 75px var(--page-gutter); }
    .ex-strategy-left h2 { margin-bottom: 50px; }
    .ex-strategy-right { border-left: 0; border-top: 1px solid var(--color-border); }
    .ex-strategy-quote { border-top: 0; padding: 50px var(--page-gutter); }
    .ex-bordered { width: calc(100% - 48px); }
    .ex-hospitality .ex-bordered { padding: 85px 36px; }
    .ex-hospitality-columns { gap: 34px; }
    .ex-hospitality h2 { font-size: clamp(53px, 7.3vw, 78px); }
    .ex-wellbeing { grid-template-columns: 37% 63%; }
    .ex-wellbeing-content { padding: 75px 35px; }
    .ex-wellbeing .ex-list-three { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(10,auto); }
    .ex-culture { grid-template-columns: 1fr; }
    .ex-culture-image { min-height: 390px; }
    .ex-culture-content { padding: 80px var(--page-gutter); }
    .ex-activation { grid-template-columns: 35% 65%; }
    .ex-activation-content { padding: 75px 35px; }
}

/* Mobile: sections stack naturally and all list items remain readable. */
@media (max-width: 600px) {
    .page-expertise .ex-kicker { font-size: 9px; letter-spacing: .14em; }
    .ex-hero-image { height: 370px; background-position: center; }
    .ex-hero-intro { margin-top: -34px; padding: 0 23px 75px; }
    .ex-hero h1 { font-size: clamp(55px, 12vw, 75px); margin-bottom: 34px; }
    .ex-hero-intro p { font-size: 12px; line-height: 1.5; }
    .ex-strategy-left { padding: 70px var(--page-gutter); }
    .ex-strategy-left h2 { font-size: 49px; margin-bottom: 40px; }
    .ex-list-two, .ex-list-three, .ex-wellbeing .ex-list-three { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
    .ex-list { gap: 11px; }
    .ex-list li { font-size: 12px; }
    .ex-strategy-quote p { font-size: 24px; }
    .ex-bordered { width: calc(100% - 28px); }
    .ex-hospitality .ex-bordered { padding: 75px 18px; }
    .ex-hospitality h2 { font-size: clamp(47px, 11vw, 63px); margin-bottom: 46px; }
    .ex-hospitality-columns { grid-template-columns: 1fr; gap: 40px; }
    .ex-hospitality-close { font-size: 21px; margin-top: 48px; }
    .ex-wellbeing, .ex-activation { grid-template-columns: 1fr; }
    .ex-wellbeing-image, .ex-activation-image { min-height: 360px; }
    .ex-wellbeing-content, .ex-activation-content { padding: 75px var(--page-gutter); }
    .ex-wellbeing h2, .ex-activation h2 { font-size: clamp(52px, 11vw, 73px); }
    .ex-architecture-inner { padding: 85px 17px; }
    .ex-architecture h2 { font-size: clamp(54px, 11.5vw, 75px); }
    .ex-architecture h2 em { padding-left: 0; }
    .ex-architecture-intro p { font-size: 12px; }
    .ex-architecture-close { font-size: 22px; }
    .ex-culture-content { padding: 75px var(--page-gutter); }
    .ex-culture h2 { font-size: clamp(50px, 10.5vw, 70px); }
    .ex-culture-columns { grid-template-columns: 1fr; gap: 35px; }
    .ex-culture-copy .ex-culture-statement { font-size: 24px; margin-top: 36px; }
    .ex-culture-image { min-height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-expertise * { scroll-behavior: auto !important; }
}