.about-page { background: var(--ivory); }
.about-page .menu-panel__nav { overflow-y: auto; }
.about-page .menu-panel__nav a[aria-current="page"] { color: var(--gold); }
.about-page .site-header.is-scrolled.is-over-sea:not(.menu-active) .header-enquire { border-color: rgba(255,255,255,.75); }

.about-wrap { width: min(100%, 1440px); margin-inline: auto; padding-inline: clamp(25px, 6vw, 96px); }
.about-eyebrow { display: block; color: #747a67; font: 700 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.about-eyebrow--light { color: rgba(255,255,255,.84); }
.about-page em { font-style: normal; color: #87917d; }

.about-hero { position: relative; display: flex; align-items: center; min-height: 640px; height: 100svh; overflow: hidden; background: #57513f; color: #fff; }
.about-hero__image, .about-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-hero__image { object-fit: cover; object-position: center 54%; }
.about-hero__shade { background: linear-gradient(180deg, rgba(22,24,20,.45), transparent 27%, transparent 72%, rgba(19,22,18,.3)), linear-gradient(90deg, rgba(21,24,20,.7), rgba(21,24,20,.35) 48%, rgba(21,24,20,.08)); }
.about-hero__content { position: relative; z-index: 1; width: min(980px, 75vw); margin-left: clamp(25px, 6vw, 96px); padding-top: 20px; }
.about-hero h1 { margin: 25px 0 21px; font: 400 clamp(58px, 6vw, 106px)/.99 Georgia, 'Times New Roman', serif; letter-spacing: -.055em; text-wrap: balance; }
.about-hero__content p { margin: 0; font: 400 clamp(19px, 2vw, 26px)/1.4 var(--serif); letter-spacing: .015em; }
.about-hero__scroll { position: absolute; z-index: 2; bottom: 0; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 17px; transform: translateX(-50%); white-space: nowrap; font: 700 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.about-hero__scroll span { display: block; width: 1px; height: 55px; background: rgba(255,255,255,.85); }

.about-intro { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(50px, 9vw, 160px); padding-top: clamp(100px, 10vw, 160px); padding-bottom: clamp(110px, 11vw, 175px); }
.about-intro h2, .about-special h2, .about-why h2 { margin: 25px 0 0; font: 400 clamp(47px, 4.4vw, 72px)/1.07 Georgia, 'Times New Roman', serif; letter-spacing: -.055em; }
.about-intro__body { max-width: 640px; padding-top: 1px; }
.about-intro__body p, .about-philosophy__body p, .about-why__body p { margin: 0 0 23px; color: #5d5d52; font: 400 clamp(16px, 1.24vw, 18px)/1.73 var(--sans); }
.about-intro__body .about-lead { margin-bottom: 32px; color: var(--ink); font: 400 clamp(23px, 2.1vw, 32px)/1.38 Georgia, serif; letter-spacing: -.03em; }
.about-intro__image { grid-column: 1 / -1; width: 100%; margin: clamp(66px, 7vw, 110px) 0 0; }
.about-intro__image img { width: 100%; height: clamp(380px, 53vw, 790px); object-fit: cover; object-position: center; }
.about-intro figcaption, .about-philosophy figcaption { margin-top: 13px; color: #7d7c70; font: 600 10px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase; }

.about-philosophy { background: #e8e3d9; }
.about-philosophy__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(50px, 8vw, 130px); padding-top: clamp(100px, 11vw, 170px); padding-bottom: clamp(110px, 11vw, 170px); }
.about-philosophy h2 { max-width: 780px; margin: 25px 0 0; font: 400 clamp(49px, 5.2vw, 86px)/1.04 Georgia, serif; letter-spacing: -.055em; text-wrap: balance; }
.about-philosophy__body { align-self: end; max-width: 550px; padding-bottom: 5px; }
.about-philosophy__body p:first-child, .about-philosophy__body p:nth-child(2) { color: var(--ink); font: 400 clamp(22px, 2vw, 30px)/1.35 Georgia, serif; letter-spacing: -.025em; }
.about-philosophy__detail { grid-column: 1 / -1; width: min(82%, 1040px); margin: clamp(48px, 7vw, 110px) 0 0 auto; }
.about-philosophy__detail img { width: 100%; height: clamp(370px, 45vw, 680px); object-fit: cover; object-position: center 56%; }

.about-special { padding-top: clamp(105px, 11vw, 175px); padding-bottom: clamp(115px, 11vw, 180px); }
.about-special__top { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0 clamp(50px, 8vw, 140px); padding-bottom: clamp(60px, 7vw, 110px); }
.about-special__top .about-eyebrow { grid-column: 1 / -1; }
.about-special h2 { margin-top: 24px; }
.about-special__top > p { max-width: 370px; margin: 0 0 7px auto; color: #68695c; font: 400 clamp(20px, 1.8vw, 26px)/1.45 Georgia, serif; letter-spacing: -.025em; }
.about-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(55px, 9vw, 145px); }
.about-feature { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 18px; min-height: 220px; padding: 35px 0 38px; border-top: 1px solid rgba(52,54,47,.23); }
.about-feature__number { padding-top: 7px; color: #8b927e; font: 700 10px/1.4 var(--sans); letter-spacing: .15em; }
.about-feature h3 { margin: 0 0 17px; font: 400 clamp(26px, 2.3vw, 37px)/1.15 Georgia, serif; letter-spacing: -.04em; }
.about-feature p { max-width: 480px; margin: 0; color: #68695e; font: 400 16px/1.65 var(--sans); }

.about-place { position: relative; height: min(78vw, 780px); min-height: 560px; overflow: hidden; background: #4c463b; color: #fff; }
.about-place > img, .about-place__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-place > img { object-fit: cover; object-position: center 46%; }
.about-place__shade { background: linear-gradient(90deg, rgba(24,28,25,.67), rgba(24,28,25,.18) 75%), linear-gradient(0deg, rgba(24,28,25,.3), transparent 35%); }
.about-place__copy { position: absolute; left: clamp(25px, 6vw, 96px); bottom: clamp(55px, 9vw, 135px); z-index: 1; width: min(890px, calc(100% - 50px)); }
.about-place h2 { margin: 25px 0 0; font: 400 clamp(46px, 5vw, 79px)/1.08 Georgia, serif; letter-spacing: -.055em; text-wrap: balance; }
.about-place h2 em { color: #fff; }

.about-why { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: clamp(55px, 9vw, 160px); padding-top: clamp(110px, 12vw, 180px); padding-bottom: clamp(115px, 12vw, 190px); }
.about-why__body { padding-top: 4px; }
.about-why__closing { grid-column: 1 / -1; margin: clamp(95px, 11vw, 170px) 0 0; padding-top: 47px; border-top: 1px solid rgba(52,54,47,.23); text-align: center; font: 400 clamp(40px, 5.4vw, 84px)/1.12 Georgia, serif; letter-spacing: -.055em; }

.about-final { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 690px; padding: 130px 25px 175px; overflow: hidden; background: #234b51 url('assets/ionian-sea-texture.webp') center/cover; color: #fff; text-align: center; }
.about-final::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(11,35,41,.27), rgba(11,35,41,.15) 40%, #234b51); content: ''; }
.about-final__inner { width: min(900px, 100%); }
.about-final h2 { margin: 27px 0 25px; font: 400 clamp(54px, 6vw, 94px)/1.03 Georgia, serif; letter-spacing: -.055em; text-wrap: balance; }
.about-final p { margin: 0; color: rgba(255,255,255,.9); font: 400 clamp(21px, 2vw, 29px)/1.4 var(--serif); }
.about-final__links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 49px; }
.about-final__links a { display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; min-width: 235px; padding: 17px 20px; border: 1px solid rgba(255,255,255,.75); font: 700 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: background .25s, color .25s; }
.about-final__links a:hover { background: var(--ivory); color: #234b51; }
.about-final__links a span { font-size: 17px; font-weight: 400; }
.about-page .footer { padding-top: clamp(105px, 12vw, 180px); }

@media (max-width: 900px) {
  .about-intro, .about-why { column-gap: 50px; }
  .about-philosophy__inner { gap: 50px; }
  .about-feature { min-height: 245px; }
}

@media (max-width: 700px) {
  .about-wrap { padding-inline: 24px; }
  .about-hero { min-height: 590px; }
  .about-hero__image { object-position: 42% center; }
  .about-hero__shade { background: linear-gradient(180deg, rgba(20,23,20,.46), transparent 27%, rgba(20,23,20,.18) 70%, rgba(20,23,20,.36)), linear-gradient(90deg, rgba(20,23,20,.68), rgba(20,23,20,.17)); }
  .about-hero__content { width: calc(100% - 48px); margin-left: 24px; }
  .about-hero h1 { font-size: clamp(48px, 10.5vw, 72px); }
  .about-hero__content p { font-size: 23px; }
  .about-hero__scroll { font-size: 9px; gap: 13px; }
  .about-hero__scroll span { height: 43px; }
  .about-intro, .about-why { display: block; padding-top: 90px; padding-bottom: 105px; }
  .about-intro h2, .about-special h2, .about-why h2 { font-size: clamp(43px, 9.2vw, 62px); }
  .about-intro__body, .about-why__body { margin-top: 45px; }
  .about-intro__body .about-lead { font-size: 25px; }
  .about-intro__image { margin-top: 55px; }
  .about-intro__image img { height: 380px; }
  .about-philosophy__inner { display: block; padding-top: 95px; padding-bottom: 105px; }
  .about-philosophy h2 { font-size: clamp(45px, 9.5vw, 68px); }
  .about-philosophy__body { margin-top: 48px; }
  .about-philosophy__detail { width: 100%; margin-top: 70px; }
  .about-philosophy__detail img { height: 360px; }
  .about-special { padding-top: 95px; padding-bottom: 100px; }
  .about-special__top { display: block; padding-bottom: 57px; }
  .about-special__top > p { max-width: 510px; margin: 30px 0 0; font-size: 22px; }
  .about-features { display: block; }
  .about-feature { min-height: 0; grid-template-columns: 30px minmax(0, 1fr); gap: 15px; padding: 31px 0 36px; }
  .about-feature h3 { font-size: 29px; }
  .about-feature p { font-size: 15px; }
  .about-place { min-height: 590px; height: 74svh; }
  .about-place > img { object-position: center 53%; }
  .about-place__copy { left: 24px; bottom: 70px; width: calc(100% - 48px); }
  .about-place h2 { font-size: clamp(43px, 9.3vw, 62px); }
  .about-why__closing { margin-top: 80px; padding-top: 37px; font-size: clamp(37px, 9vw, 58px); }
  .about-final { min-height: 620px; padding: 115px 24px 145px; }
  .about-final h2 { font-size: clamp(50px, 10vw, 70px); }
  .about-final__links { gap: 14px; }
  .about-final__links a { width: min(100%, 380px); }
  .about-page .footer { padding-top: 100px; }
}

@media (max-width: 400px) {
  .about-hero h1 { font-size: clamp(36px, 10.5vw, 43px); }
  .about-hero__content p { font-size: 21px; }
  .about-intro__image img, .about-philosophy__detail img { height: 310px; }
  .about-feature h3 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__scroll span { animation: none; }
}