/* Extracted from the static build's per-page <style> block.
   Section layout CSS; tokens come from styles.css. */

/* ==== ABOUT — story first, then the place, then the people ==== */

/* HERO — full-bleed architecture, text settled bottom-left */
.ab-hero {
  position: relative; height: clamp(560px, 88vh, 940px);
  display: flex; align-items: flex-end; overflow: hidden; background: var(--c-charcoal);
}
.ab-hero__img { position: absolute; inset: 0; background-size: cover; background-position: center 42%; }
@media (prefers-reduced-motion: no-preference) {
  .ab-hero__img { animation: abHeroKen 3000ms var(--ease-out) both; }
  @keyframes abHeroKen { from { transform: scale(1.08); } to { transform: scale(1); } }
}
.ab-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,22,32,0.78), rgba(14,22,32,0.06) 56%, rgba(14,22,32,0.30)); }
.ab-hero__inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 8vw, 80px) clamp(52px, 6vw, 92px); color: var(--c-snow); }
.ab-hero__crumb { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 26px; display: flex; align-items: center; gap: 12px; font-weight: 500; }
.ab-hero__crumb a { color: rgba(255,255,255,0.8); }
.ab-hero__crumb .sep { width: 16px; height: 1px; background: rgba(255,255,255,0.3); }
.ab-hero__eyebrow { color: var(--c-cool-steel); margin-bottom: 18px; display: block; }
.ab-hero__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(42px, 6vw, 96px); line-height: 0.98; letter-spacing: -0.016em; margin: 0; max-width: 15ch; text-wrap: balance; }
.ab-hero__h .it { font-style: italic; }
@media (max-width: 700px) { .ab-hero { height: 78vh; } }

/* LETTER — the founder's story, leading the page */
.ab-letter { background: var(--c-pearl); padding: clamp(88px, 11vw, 160px) clamp(40px, 8vw, 132px); }
.ab-letter__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(44px, 5vw, 100px); align-items: start; }
.ab-letter__figwrap { position: sticky; top: 110px; }
.ab-letter__fig { position: relative; overflow: hidden; background: var(--c-bone); aspect-ratio: 4 / 5; }
.ab-letter__fig .img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1800ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) { .ab-letter__fig:hover .img { transform: scale(1.08); } }
.ab-letter__cap { margin: 14px 0 0; font-family: var(--f-display); font-style: italic; font-size: 13.5px; color: rgba(14,22,32,0.5); }
.ab-letter__lab { color: var(--c-olive); display: block; margin-bottom: 26px; }
.ab-letter__stand { font-family: var(--f-display); font-weight: 300; font-size: clamp(27px, 3.2vw, 44px); line-height: 1.16; letter-spacing: -0.014em; color: var(--c-charcoal); margin: 0 0 38px; text-wrap: balance; }
.ab-letter__stand .it { font-style: italic; }
.ab-letter__body { color: rgba(14,22,32,0.78); font-size: 16.5px; line-height: 1.9; }
.ab-letter__body p { margin: 0 0 22px; text-wrap: pretty; }
.ab-letter__body p:last-child { margin: 0; }
.ab-letter__body em { font-family: var(--f-display); font-style: italic; font-size: 1.05em; color: var(--c-aegean); }
.ab-letter__sig { margin-top: 40px; }
.ab-letter__sig-name { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 30px; color: var(--c-charcoal); }
.ab-letter__sig-line { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(14,22,32,0.45); margin-top: 8px; }
@media (max-width: 880px) {
  .ab-letter__inner { grid-template-columns: 1fr; gap: 36px; }
  .ab-letter__figwrap { position: static; }
  .ab-letter__fig { max-width: 460px; aspect-ratio: 5 / 5; }
}

/* PILLARS — what you'll find: hotel, kitchen, KARE — alternating rows */
.ab-pillars { background: var(--c-bone); padding: clamp(92px, 11vw, 160px) clamp(40px, 8vw, 132px); }
.ab-pillars__head { max-width: 1240px; margin: 0 auto clamp(56px, 6vw, 92px); }
.ab-pillars__lab { color: var(--c-olive); }
.ab-pillars__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -0.014em; color: var(--c-charcoal); margin: 18px 0 0; max-width: 20ch; }
.ab-pillars__h .it { font-style: italic; }
.ab-pillar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 92px); align-items: center; max-width: 1240px; margin: 0 auto; }
.ab-pillar + .ab-pillar { margin-top: clamp(64px, 8vw, 120px); }
.ab-pillar--rev .ab-pillar__fig { order: 2; }
.ab-pillar__fig { position: relative; overflow: hidden; background: var(--c-pearl); aspect-ratio: 5 / 6; }
.ab-pillar__fig .img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1800ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) { .ab-pillar__fig:hover .img { transform: scale(1.09); } }
.ab-pillar__num { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 17px; color: var(--c-olive); }
.ab-pillar__name { font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -0.012em; color: var(--c-charcoal); margin: 10px 0 24px; }
.ab-pillar__name .it { font-style: italic; }
.ab-pillar__body { color: rgba(14,22,32,0.74); font-size: 16px; line-height: 1.86; margin: 0; max-width: 50ch; }
.ab-pillar__body p { margin: 0 0 18px; }
.ab-pillar__body p:last-child { margin: 0; }
.ab-pillar__body em { font-family: var(--f-display); font-style: italic; font-size: 1.05em; color: var(--c-aegean); }
.ab-pillar__stat { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(14,22,32,0.14); display: flex; flex-wrap: wrap; gap: 10px 30px; }
.ab-pillar__stat span { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(14,22,32,0.5); }
.ab-pillar__stat b { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--c-aegean); margin-right: 8px; }
@media (max-width: 820px) {
  .ab-pillar { grid-template-columns: 1fr; gap: 26px; }
  .ab-pillar--rev .ab-pillar__fig { order: -1; }
  .ab-pillar__fig { max-width: 520px; aspect-ratio: 4 / 3; }
}

/* PEOPLE — the named two, plus the wider team */
.ab-people { background: var(--c-pearl); padding: clamp(92px, 11vw, 160px) clamp(40px, 8vw, 132px); }
.ab-people__head { max-width: 1240px; margin: 0 auto clamp(48px, 5vw, 76px); }
.ab-people__lab { color: var(--c-olive); }
.ab-people__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -0.012em; color: var(--c-charcoal); margin: 18px 0 0; max-width: 22ch; }
.ab-people__h .it { font-style: italic; }
/* KARE team group — separated from leadership above */
.ab-kare-group { max-width: 1240px; margin: clamp(64px, 7vw, 104px) auto 0; padding-top: clamp(44px, 4.5vw, 64px); border-top: 1px solid rgba(14,22,32,0.14); }
.ab-kare-group__lab { color: var(--c-olive); display: block; margin-bottom: clamp(28px, 3vw, 44px); }
.ab-people__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 4vw, 72px); }
.ab-card__fig { position: relative; overflow: hidden; }
.ab-portrait { width: 100%; aspect-ratio: 4 / 5; display: block; --slot-bg: var(--c-bone); }
.ab-card__role { color: var(--c-olive); margin: 22px 0 12px; display: block; }
.ab-card__name { font-family: var(--f-display); font-weight: 300; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.04; letter-spacing: -0.012em; color: var(--c-charcoal); margin: 0 0 16px; }
.ab-card__name .it { font-style: italic; }
.ab-card__body { color: rgba(14,22,32,0.74); font-size: 15.5px; line-height: 1.82; margin: 0; max-width: 46ch; }
.ab-card__body em { font-family: var(--f-display); font-style: italic; font-size: 1.05em; color: var(--c-aegean); }
.ab-card__cred { margin-top: 20px; font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(14,22,32,0.5); display: flex; flex-wrap: wrap; gap: 7px 22px; }
.ab-team { max-width: 1240px; margin: clamp(56px, 6vw, 92px) auto 0; padding-top: clamp(40px, 4vw, 60px); border-top: 1px solid rgba(14,22,32,0.14); }
.ab-team__line { font-family: var(--f-display); font-weight: 300; font-size: clamp(21px, 2.3vw, 31px); line-height: 1.45; letter-spacing: -0.008em; color: var(--c-charcoal); margin: 0; max-width: 40ch; text-wrap: balance; }
.ab-team__line .it { font-style: italic; color: var(--c-aegean); }
@media (max-width: 720px) {
  .ab-people__grid { grid-template-columns: 1fr; gap: 44px; }
}

/* leadership trio (sits first, right after the header) */
.ab-leads { max-width: 1240px; margin: 0 auto; }
.ab-leads__lab { color: var(--c-olive); display: block; margin-bottom: clamp(28px, 3vw, 44px); }
.ab-leads__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 56px); }
.ab-lead__fig { position: relative; overflow: hidden; }
.ab-lead__portrait { width: 100%; aspect-ratio: 1 / 1; display: block; --slot-bg: var(--c-bone); }
.ab-lead__role { color: var(--c-olive); margin: 20px 0 9px; display: block; }
.ab-lead__name { font-family: var(--f-display); font-weight: 300; font-size: clamp(22px, 2.1vw, 29px); line-height: 1.05; letter-spacing: -0.01em; color: var(--c-charcoal); margin: 0 0 12px; }
.ab-lead__name .it { font-style: italic; }
.ab-lead__body { color: rgba(14,22,32,0.7); font-size: 14.5px; line-height: 1.7; margin: 0; max-width: 36ch; }
@media (max-width: 720px) {
  .ab-leads__grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-lead__portrait { max-width: 320px; }
}

/* CTA band */
.ab-cta { background: var(--c-aegean); color: var(--c-snow); padding: clamp(92px, 11vw, 150px) clamp(40px, 8vw, 132px); text-align: center; position: relative; overflow: hidden; }
.ab-cta__inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.ab-cta__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -0.012em; margin: 0 0 14px; text-wrap: balance; }
.ab-cta__h .it { font-style: italic; }
.ab-cta__sub { color: rgba(255,255,255,0.66); font-size: 15px; line-height: 1.7; margin: 0 0 36px; }
.ab-cta__actions { display: inline-flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.ab-cta__btn { display: inline-flex; align-items: center; gap: 13px; padding: 18px 28px; background: var(--c-snow); color: var(--c-charcoal); font-family: var(--f-body); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; transition: background-color 240ms var(--ease-out); }
.ab-cta__btn:hover { background: var(--c-bone); }
.ab-cta__btn.outline { background: transparent; color: var(--c-snow); border: 1px solid rgba(255,255,255,0.3); }
.ab-cta__btn.outline:hover { background: rgba(255,255,255,0.08); }
.ab-cta__btn .ar { font-family: var(--f-display); font-style: italic; font-size: 17px; letter-spacing: 0; text-transform: none; }
.ab-cta__numeral { position: absolute; right: -40px; bottom: -110px; font-family: var(--f-display); font-style: italic; font-size: 360px; line-height: 1; color: rgba(255,255,255,0.045); pointer-events: none; user-select: none; }
@media (max-width: 600px) { .ab-cta__numeral { font-size: 190px; bottom: -64px; } }