/* ============================================================
   Akoya Hospitality — Home
   Adaptive layout (flexbox / grid). No hard-coded absolute
   positioning except for a few genuinely decorative overlaps.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --cream: #f6f3ec;
  --cream-2: #eeebe1;
  --ink: #0e1119;
  --gold: #af813c;
  --rose: #b48b74;
  --rose-line: rgba(156, 134, 122, 0.5);
  --teal: #c6d9dd;
  --teal-ink: #19232e;
  --navy: #02163d;
  --pill: rgba(175, 129, 60, 0.3);
  --overlay: rgba(33, 33, 31, 0.7);
  --warning: #ef6363;

  --serif: "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1440px;
  --gutter: 120px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

/* A field cleared in the admin must leave no trace. Without this, an emptied
   heading still occupies its margins and gaps, leaving a hole in the layout.
   Only text elements are targeted — several spans/divs are decorative rules
   and are empty by design. */
h1:empty,
h2:empty,
h3:empty,
h4:empty,
p:empty {
  display: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(64px, 8vw, 100px);
}

/* Text blocks inside centred/flex-start flex columns must fill their
   parent so long lines wrap to the container instead of overflowing. */
.eyebrow,
.h-display,
.hero__title,
.hero__lead,
.quote__text,
.proof__title,
.model__head,
.proof__head,
.steward__head {
  width: 100%;
}

.h-display,
.proof__title,
.quote__text {
  overflow-wrap: break-word;
}

/* Hero title keeps whole words intact (the <br> controls the two
   lines); it only wraps on very narrow screens where clamp() has
   already shrunk it enough to fit. */
.hero__title {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Eyebrow: short line / label / short line, stacked & centred */
.eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
}

/* Motion: line masks for the hero title (spans are created by anim.js; these
   rules are inert until then). The padding/negative-margin pair keeps
   descenders from being clipped by the mask without shifting layout. */
.a-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.a-line__i {
  display: block;
  will-change: transform;
}

/* Section serif headings */
.h-display {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  font-size: clamp(26px, 5.6vw, 50px);
  line-height: 1.12;
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

/* Teal buttons: a deep-navy inner outline on hover.
   No scaling — transforming the button resamples its text and the glyphs
   shimmer. The outline is an inset box-shadow rather than a border, so the
   button keeps its exact size and hovering never nudges the layout.
   Pressing thickens the outline: tactile feedback with zero movement. */
.btn--teal {
  background: var(--teal);
  color: var(--teal-ink);
  box-shadow: inset 0 0 0 1px transparent;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease,
    box-shadow 0.25s ease;
}

.btn--teal:hover {
  opacity: 1; /* Replaces the generic .btn fade — it washed the teal out. */
  box-shadow: inset 0 0 0 1px var(--teal-ink);
}

.btn--teal:active {
  box-shadow: inset 0 0 0 2px var(--teal-ink);
}

.btn--teal:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 2px;
}

.btn--outline {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--cream);
}

.btn--outline:hover {
  background: var(--cream);
  color: var(--ink);
  opacity: 1;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  color: var(--cream);
  background: #0c1a24;
  isolation: isolate;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.hero__bg::after {
  content: "";
}

/* top bar (logo + nav) */
.hero__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding-block: 20px;
}

.hero__divider {
  width: 100%;
  height: 1px;
  background: rgba(156, 134, 122, 0.20);
}

/* Logo — rebuilt as a true vector: live geometric wordmark with a
   pearl (CSS radial-gradient) in place of the "O". Crisp at any size. */
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Poiret One", var(--serif);
  font-weight: 400;
  color: #b58c79;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  line-height: 1;
  white-space: nowrap;
  /* offset the trailing letter-spacing so the wordmark reads centred */
  text-indent: 0.34em;
}

.logo__pearl {
  display: inline-block;
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.05em;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff 0%, #f1ebe3 38%, #dccfc3 70%, #c7b8aa 100%);
  box-shadow: inset -0.06em -0.06em 0.12em rgba(140, 118, 104, 0.45);
  vertical-align: middle;
}

.logo--hero {
  max-width: 172px;
  max-height: 60px;
}

.logo--hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo--footer {
  max-width: 144px;
  max-height: 50px;
}

.logo--footer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* nav */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav a {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.nav a:hover,
.nav a.is-active {
  opacity: 1;
}

/* Mobile-only header controls (hidden on desktop) */
.nav-burger,
.hero__contact {
  display: none;
}

/* hero content */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 70px;
  max-width: 760px;
  padding-top: clamp(60px, 12vw, 112px);
  padding-bottom: clamp(80px, 14vw, 130px);
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(34px, 8vw, 70px);
  line-height: 1.03;
  margin: 0;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.hero__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 650px;
}

.hero__lead-strong {
  color: var(--rose);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}

.hero__lead-text {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}

/* "get started" — circular button with a downward arrow beneath it */
.get-started {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: var(--rose);
}

.get-started__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 1px solid var(--rose-line);
  border-radius: 50%;
  color: inherit;
  font-family: "Inter", var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 16px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.get-started__circle:hover {
  border-color: var(--rose);
  background: rgba(180, 139, 116, 0.08);
}

.get-started__arrow {
  display: block;
  color: inherit;
  margin-top: -17px;
}

/* ============================================================
   WHY ULTRA-LUXURY
   ============================================================ */
.model {
  background: var(--cream);
  padding-bottom: 0;
}

.model__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.model__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.model__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
}

.model__cols p {
  opacity: 0.8;
}

.model__img {
  width: 100%;
  height: clamp(200px, 26vw, 320px);
  object-fit: cover;
}

/* ============================================================
   PULL QUOTE
   ============================================================ */
.quote {
  background: var(--cream);
  padding-bottom: clamp(64px, 8vw, 100px);
}

.quote__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 687px;
  margin-inline: auto;
  text-align: center;
}

.quote__thread {
  width: 8px;
  height: 80px;
  display: flex;
  justify-content: center;
}

.quote__thread img {
  height: 100%;
}

.quote__text {
  font-family: var(--serif);
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.28;
  margin: 0;
}

.quote__text mark {
  background: var(--pill);
  color: inherit;
  padding: 0.1em 0.35em;
  border-radius: 100px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ============================================================
   WE DRIVE THE ACTIONS
   ============================================================ */
.drive {
  background: var(--cream-2);
}

.drive__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.drive__title {
  max-width: 1228px;
}

.drive__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.drive__gallery img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* Slider shell — inert on desktop (the 3-up grid stays); Swiper takes over on mobile. */
.drive__slider {
  position: relative;
}

.drive__text {
  max-width: 900px;
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}

.drive__text p+p {
  margin-top: 12px;
}

/* ============================================================
   TURNING POTENTIAL
   ============================================================ */
.potential {
  background: var(--cream);
  position: relative;
}

.potential__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Content block is centred in the section; text stays left-aligned. */
.potential__content {
  position: relative;
  z-index: 2;
  max-width: 564px;
  margin-inline: auto;
}

.potential__title {
  max-width: 564px;
  margin-bottom: 40px;
}

/* Image sits top-right, flush to the right edge, and bleeds ~20px up
   onto the previous (grey) section. Sized in vw so it scales with the
   viewport beyond the 1440 design width (512×280 at 1440). */
.potential__img {
  position: absolute;
  top: -20px;
  right: 0;
  width: 35.55vw;
  height: 19.44vw;
  object-fit: cover;
  z-index: 0;
}

.steps {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Items get a left padding; the dividers still span the full width. */
.step {
  padding: 26px 0 26px 40px;
}

.step:first-child {
  padding-top: 0;
}

.step+.step {
  border-top: 1px solid rgba(14, 17, 25, 0.15);
}

.step__title {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 32px;
  color: var(--gold);
  margin: 0 0 10px;
}

.step__text {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}

/* ============================================================
   EXTENSION BANNER
   ============================================================ */
.banner {
  position: relative;
  color: var(--cream);
  isolation: isolate;
  overflow: hidden;
}

.banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay);
  z-index: -1;
}

.banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  min-height: 160px;
  padding-block: 40px;
}

.banner__text {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
}

/* ============================================================
   WHY OWNERS CHOOSE AKOYA
   ============================================================ */
.proof {
  background: var(--cream-2);
}

.proof__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.proof__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.proof__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  margin: 0;
  text-align: center;
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 0;
  width: 100%;
  max-width: 1200px;
}

.proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding-inline: clamp(20px, 4vw, 60px);
}

/* vertical dividers between columns */
.proof-item:not(:nth-child(3n + 1)) {
  border-left: 1px solid rgba(14, 17, 25, 0.15);
}

.proof-item__icon {
  width: 48px;
  height: 48px;
}

.proof-item__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 32px;
  margin: 0;
}

.proof-item__text {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
  margin: 0;
}

/* ============================================================
   STEWARDSHIP
   ============================================================ */
.steward {
  background: var(--cream);
  padding-block: clamp(70px, 8vw, 100px);
}

/* Image is full-bleed to the viewport's left edge and spans half the
   screen width (50vw); the content fills the other half. */
.steward__grid {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  gap: 0;
}

.steward__img {
  width: 100%;
  height: 427px;
  object-fit: cover;
}

.steward__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  max-width: 540px;
  margin-inline-start: clamp(40px, 5vw, 90px);
}

.steward__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

/* eyebrow block sits at the left, but its lines stay centred over the label */
.steward__head .eyebrow {
  width: auto;
}

.steward__title {
  text-align: left;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--navy);
  color: var(--cream);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 160px;
  padding-block: 32px;
}

.footer__meta {
  font-size: 14px;
  line-height: 24px;
  text-align: right;
  opacity: 0.8;
}

/* ============================================================
   APPROACH PAGE
   ============================================================ */

/* Sub-page hero — shorter, centred content, dark overlay */
.hero--sub .hero__bg {
  z-index: -2;
}
.hero--sub::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 58, 0.6);
  z-index: -1;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
  font-size: 13px;
  color: var(--cream);
}
.breadcrumb a {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.breadcrumb a:hover {
  opacity: 1;
}
.breadcrumb__sep {
  opacity: 0.5;
}

.hero__sub-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
  max-width: 723px;
  margin-inline: auto;
  padding-top: clamp(56px, 8vw, 92px);
  padding-bottom: clamp(64px, 9vw, 108px);
}
.hero__sub-title {
  width: auto;
  text-align: center;
}
.hero__sub-lead {
  max-width: 490px;
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}

/* How Akoya differentiates itself */
.differ {
  background: var(--cream-2);
}
.differ__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.differ__img {
  width: 280px;
  height: 200px;
  object-fit: cover;
}
.differ__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 800px;
}
.differ__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  margin: 0;
}
.differ__body {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}
.differ__body p + p {
  margin-top: 12px;
}

/* Centred banner variant */
.banner--center::before {
  background: rgba(33, 33, 31, 0.6);
}
.banner--center .banner__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 50px;
  min-height: 374px;
  padding-block: 60px;
}
.banner__quote {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  max-width: 842px;
  margin: 0;
}

/* Process steps */
.process {
  background: var(--cream);
}
.process__title {
  margin-bottom: 60px;
}
.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(40px, 8vw, 100px);
  row-gap: 50px;
}
.pstep {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.pstep__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.pstep__num {
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.8;
}
.pstep__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  color: var(--gold);
  margin: 0;
}
.pstep__line {
  display: flex;
  align-items: center;
  width: 100%;
  color: #ccb69a;
}
.pstep__line-track {
  flex: 1;
  height: 1px;
  background: currentColor;
}
.pstep__line-tip {
  flex: 0 0 auto;
  display: block;
}
.pstep__text {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
  margin: 0;
}

/* Approach stewardship sits on the alternate (cream-2) background */
.steward--cream2 {
  background: var(--cream-2);
}

/* ============================================================
   WHO WE ARE PAGE
   ============================================================ */

/* Intro — centred text flanked by decorative edge images */
.intro {
  position: relative;
  background: var(--cream);
}
.intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 767px;
  margin-inline: auto;
}
.intro__title {
  width: 100%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.25;
  margin: 0;
}
.intro__body {
  max-width: 560px;
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}
.intro__body p + p {
  margin-top: 16px;
}
.intro__img {
  position: absolute;
  object-fit: cover;
  z-index: 0;
}
.intro__img--bust {
  left: 0;
  top: clamp(56px, 8vw, 118px);
  width: clamp(130px, 14vw, 200px);
  height: clamp(170px, 18vw, 260px);
}
/* pool sits lower-right and bleeds down into the next (grey) section */
.intro__img--pool {
  right: 0;
  bottom: -46px;
  width: clamp(170px, 18vw, 263px);
  height: clamp(100px, 11vw, 152px);
}

/* From Analysis to Action — heading + overlapping images + text */
.analysis {
  background: var(--cream-2);
}
/* Title and media share the same left-column cell so the heading
   overlaps the top-left of the large image. Sizes are percentage-based
   so the composition stays consistent while the photos scale. */
.analysis__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 443px);
  column-gap: clamp(40px, 5vw, 90px);
  align-items: center;
}
.analysis__title {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  align-self: start;
  justify-self: start;
  margin-top: clamp(16px, 3vw, 40px);
  max-width: min(432px, 80%);
  /* fluid size so the heading shrinks to fit the narrowing box instead
     of breaking mid-word */
  font-size: clamp(26px, 3.4vw, 50px);
  overflow-wrap: normal;
  word-break: keep-all;
}
.analysis__media {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  justify-self: end;
  width: min(410px, 62%);
}
.analysis__img-lg {
  display: block;
  width: 100%;
  aspect-ratio: 410 / 570;
  object-fit: cover;
}
.analysis__img-sm {
  position: absolute;
  left: -36%;
  bottom: -6%;
  width: 46%;
  aspect-ratio: 190 / 130;
  object-fit: cover;
  z-index: 1;
}
.analysis__text {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.analysis__copy {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}
.analysis__copy p + p {
  margin-top: 16px;
}
.analysis .btn--teal {
  align-self: flex-start;
}

/* Founder */
.founder {
  background: var(--cream);
}
.founder__inner {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 70px;
  align-items: start;
}
.founder__profile {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.founder__photo {
  width: 100%;
  aspect-ratio: 250 / 280;
  object-fit: cover;
}
.founder__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin: 0;
}
.founder__role {
  font-size: 14px;
  line-height: 24px;
  opacity: 0.8;
  margin: 0;
}
.founder__content {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.founder__block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.founder__subhead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 32px;
  margin: 0;
}
.founder__text {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}
.founder__text p + p {
  margin-top: 20px;
}
.founder__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* Side-by-side blocks must read as a pair: heading level with heading, body
   level with body. Subgrid lets both columns share the parent's two rows, so
   if one heading is cleared its row still stands and the body copy underneath
   stays put instead of riding up.
   (Bottom-aligning the columns would "fix" the ragged edge but leave a hole
   above the shorter column — the rows are what actually need to line up.) */
@media (min-width: 769px) {
  .founder__cols {
    grid-template-rows: auto auto;
    column-gap: 40px;
    row-gap: 20px; /* Heading → body, as before. */
  }

  .founder__cols .founder__block {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 20px; /* Kept for browsers without subgrid. */
  }

  /* Here the emptied heading must stay in the flow (at zero height) so that
     its grid row survives; the global :empty rule would remove it entirely. */
  .founder__cols .founder__subhead:empty {
    display: block;
  }
}
/* Two independent columns: three points on the left, the fourth on the right.
   They are separate lists on purpose — if all four shared grid rows, the tall
   fourth point would set the height of the first row and push the left-hand
   items apart. */
.proof-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 16px;
  align-items: start;
  margin: 0;
  padding: 0;
}

.proof-list__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A point cleared in the admin should take its tick mark with it. */
.proof-list__item:has(span:empty) {
  display: none;
}
.proof-list__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}
.check-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--gold);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
/* Page fills at least the full viewport; the split panel grows to
   absorb any extra height, keeping the footer at the bottom. */
.page-contact {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-contact .footer {
  flex: 0 0 auto;
}
.chero {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}
/* Full-bleed dark image occupies the left half; the cream .chero background
   shows through on the right. Split sits at 50% = viewport centre = container centre. */
.chero__bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  z-index: 0;
  overflow: hidden;
  background: #0c1a24 var(--chero-img, url("../img/contact-hero.webp")) center / cover no-repeat;
}
.chero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 58, 0.6);
}

/* Content grid — shares the .container geometry with the header bar, so the
   intro copy and form align to the same gutters as the logo and nav. */
.chero__grid {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(48px, 11.11vw, 160px);
  align-items: stretch;
  min-height: 650px;
}

/* Left column: intro copy over the dark image */
.chero__intro {
  display: flex;
  flex-direction: column;
  padding: 101px 0 60px;
  color: var(--cream);
}
.chero__intro-text {
  max-width: 520px;
  margin-block: auto;
}
.chero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 70px);
  line-height: 1.03;
  text-transform: uppercase;
  margin: 0 0 30px;
}
.chero__lead-strong {
  color: var(--rose);
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  margin: 0 0 16px;
}
.chero__lead {
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}
.chero__lead p + p {
  margin-top: 16px;
}

/* Right / bottom: form panel */
.cform-panel {
  display: flex;
  align-items: center;
  /* The bottom padding is the room the (absolutely placed) validation banner
     drops into. The panel always grows to fit its padding + the form, so this
     is a guaranteed floor: 60px left the banner 7–30px short and it ran into
     the footer. 120px clears even a three-line message. */
  padding: 101px 0 120px;
}
.cform {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  max-width: 520px;
}
.cform__fields {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.cfield {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cfield__label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
}
.cfield__control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-block: 10px;
  border-bottom: 1px solid rgba(14, 17, 25, 0.3);
  transition: border-color 0.2s ease;
}
/* Pressed / focus: the underline goes from 30% to full opacity of the ink */
.cfield__control:focus-within {
  border-color: var(--ink);
}
.cfield__input {
  caret-color: var(--gold);
}
/* Warning / error: default underline is kept; a red message appears below.
   Auto-revealed once the field is invalid after user interaction. */
.cfield__error {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--warning);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
}
.cfield__error-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.cfield--error .cfield__error,
.cfield:has(.cfield__input:user-invalid) .cfield__error {
  display: flex;
}
.cfield__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--gold);
}
.cfield__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}
.cfield__input::placeholder {
  color: var(--ink);
  opacity: 0.3;
}
.cfield__input:focus {
  outline: none;
}
/* Three lines tall, fixed. It deliberately does not grow with the text: the
   contact section is sized to the viewport, so a growing form stretches the
   whole section — the background image and the page jump with every new line.
   Longer messages scroll inside the box instead. Top-aligned so the underline
   sits beneath the box rather than through the middle of it. */
.cfield--message .cfield__control {
  align-items: flex-start;
}

.cfield__textarea {
  resize: none;
  height: 72px; /* 3 × 24px line-height */
  overflow-y: auto;
}
.cform__submit {
  align-self: flex-start;
  background: transparent;
  color: var(--rose);
  border: 1px solid var(--rose);
}
.cform__submit:hover {
  background: var(--rose);
  color: var(--cream);
  opacity: 1;
}

/* ---- Contact Form 7 wiring: keep the designed markup and states intact ---- */
.cform-panel .wpcf7 {
  width: 100%;
  max-width: 520px;
  margin-top: 40px;
}
.cform-panel .wpcf7 .cform {
  max-width: none;
}
/* CF7 wraps each control in a span — make it the flex child, not the input.
   CF7's own CSS sets this wrap to position:relative, which anchors the
   validation tip to the input (indented past the icon, tucked under it).
   Static makes the tip resolve against .cfield: flush left, below the rule. */
.cfield__control .wpcf7-form-control-wrap {
  position: static;
  flex: 1;
  min-width: 0;
  display: block;
}
.cfield__control .cfield__input {
  width: 100%;
}
.cform__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Validation message: same look as the design's warning state, sitting below
   the field's underline and flush with its left edge.

   Nothing may shift when validation fires, so the line is reserved under every
   field from the start rather than added when an error appears. The reserved
   28px plus the 2px list gap reproduce the design's 30px rhythm exactly, so the
   idle form looks unchanged. */
.cfield {
  position: relative;
  /* Reserved with margin, not padding: the tip is anchored at `top: 100%`,
     which resolves against the padding box — padding here would push the tip
     down onto the next field's label. Margin sits outside it, so the tip stays
     8px under the underline while the space below is still held.

     38 + 2 = 40px between fields. The design's 30px cannot hold the 8px offset
     plus the 20px message and still leave the message clear of the next label —
     it left only 2px. Since the room is now reserved permanently, the idle form
     simply breathes a little more. */
  margin-bottom: 38px;
}

.cform__fields {
  gap: 2px;
}
.wpcf7-not-valid-tip {
  position: absolute;
  left: 0;
  top: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--warning);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
}
.wpcf7-not-valid-tip::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5'/><path d='M12 16.4v.1'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5'/><path d='M12 16.4v.1'/></svg>") center / contain no-repeat;
}
/* Taken out of the flow: in the flow it grows the form, and because the panel
   centres the form vertically, that growth pushes the whole form upwards the
   moment an error appears. Absolute keeps the form exactly where it was. */
.cform {
  position: relative;
}

.cform .wpcf7-response-output {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 24px 0 0 !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(14, 17, 25, 0.25) !important;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}
/* ---- Sent: the form gives way to a message in its place ----
   The fields are hidden with visibility, not display, so the form keeps its
   height. Collapsing it would change the panel's content height and — because
   the panel centres the form — shunt everything upward, the very jump we just
   removed. The card is then laid over that reserved space. */
.wpcf7-form.sent .cform__fields,
.wpcf7-form.sent .cform__actions {
  visibility: hidden;
}

.cform__success {
  display: none;
}

.wpcf7-form.sent .cform__success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  animation: akoya-success 0.6s ease both;
}

@keyframes akoya-success {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cform__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f3eee8;
  color: var(--gold);
}

.cform__success-icon svg {
  width: 34px;
  height: 34px;
}

.cform__success-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}

.cform__success-text {
  max-width: 400px;
  font-size: 16px;
  line-height: 24px;
  opacity: 0.8;
}

/* CF7's own banner is redundant now that the card says it, but it stays in the
   page for screen readers — hidden visually, not removed. */
.wpcf7-form.sent .wpcf7-response-output {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--warning) !important;
  color: var(--warning);
}

/* Full-width header bar over the split */
.chero__bar-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}
.chero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding-block: 20px;
}
.chero__divider {
  width: 100%;
  height: 1px;
  background: rgba(140, 130, 118, 0.35);
}
.chero .nav a {
  color: var(--ink);
}
.chero .nav a.is-active {
  color: var(--gold);
  opacity: 1;
}
.chero .hero__contact {
  color: var(--cream);
}

/* ============================================================
   SCOPE PAGE
   ============================================================ */
/* Hero — same centred layout as the other sub-pages, plus the design's
   navy wash over the photograph. */
.hero--scope::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 58, 0.7);
  z-index: -1;
}

.shero__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 563px;
}

.hero--scope .hero__sub-lead {
  max-width: none; /* .shero__lead already caps the measure. */
}

/* ---- Areas of Focus ---- */
.areas__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.areas__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  width: 100%;
}

.areas__col {
  display: flex;
  flex-direction: column;
}

.areas__img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.areas__title {
  margin: 40px 0 30px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.09;
  color: var(--ink);
}

.areas__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Banner ---- */
.banner--scope::before {
  background: rgba(33, 33, 31, 0.5);
}

.banner--scope .banner__inner {
  min-height: 240px;
  gap: 40px;
  padding-block: 60px;
}

.banner--scope .banner__text {
  white-space: normal; /* The base banner keeps its one-liner on a single line. */
  max-width: 854px;
  font-size: clamp(20px, 2.3vw, 32px);
  line-height: 1.25;
}

/* ---- Life cycle ---- */
.lifecycle__title {
  max-width: 926px;
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}

.lifecycle__rule {
  display: block;
  width: 60px;
  height: 1px;
  margin: 30px auto 0;
  background: rgba(175, 129, 60, 0.6);
}

/* Default (and mobile) layout: a vertical list joined by a dotted spine.
   The circular arrangement is a desktop-only enhancement (see below), because
   the labels simply cannot breathe around a ring on a narrow screen. */
.lifecycle__chart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 620px;
  margin: 60px auto 0;
}

.lifecycle__chart::before {
  content: "";
  position: absolute;
  left: 35px; /* Centre of the 70px node. */
  top: 35px;
  bottom: 35px;
  border-left: 1px dashed rgba(175, 129, 60, 0.45);
}

.lifecycle__ring {
  display: none; /* Only used by the circular desktop layout. */
}

.lc-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.lc-node {
  position: relative;
  z-index: 1; /* Sits on the spine/ring and masks it. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  /* No ring. The fill is still needed so the dotted line does not run through
     the icon. */
  background: #f3eee8;
}

.lc-node__icon {
  width: 40px;
  height: 40px;
}

/* Optical alignment. A few of the exported icons carry uneven internal padding,
   so they sit visually off-centre even though the circle itself is exact.
   The nudges are expressed as a % of the node rather than in px: percentage
   margins resolve against the node's width, so the same rule gives the client's
   figures on the 90px ring node and scales down for the 70px mobile one
   (-6.6667% × 90 = -6px, 3.3333% × 90 = 3px, and so on). */
.lc-item--2 .lc-node__icon { /* gear — Operational Performance */
  margin-top: -4.4444%;
  margin-left: 1.1111%;
}
.lc-item--4 .lc-node__icon { /* target — top of the ring */
  margin-top: -6.6667%;
  margin-left: 3.3333%;
}
.lc-item--5 .lc-node__icon { /* building — Residential Sales */
  margin-top: -11.1111%;
  margin-left: 3.3333%;
}
.lc-item--6 .lc-node__icon { /* compass — Capital Expenditure */
  margin-top: -8.8889%;
}
.lc-item--7 .lc-node__icon { /* team — Stakeholder Relationship */
  margin-top: -11.1111%;
  margin-left: 3.3333%;
}

.lc-label__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: var(--gold);
}

.lc-label__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.8;
}

/* ---- Life cycle: the ring (desktop only) ----
   Eight slots 45° apart with the bottom one left empty, which is why there are
   seven steps and why the dotted ring is an arc rather than a closed circle.
   Everything is positioned in % inside a fixed-ratio box, so the whole diagram
   scales as one piece. */
@media (min-width: 1200px) {
  .lifecycle__chart {
    display: block;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 1200 / 620;
  }

  .lifecycle__chart::before {
    display: none; /* No vertical spine in the circular layout. */
  }

  .lifecycle__ring {
    display: block;
    position: absolute;
    left: 31.6667%;
    top: 29.0323%;
    width: 36.6667%;
    aspect-ratio: 1;
    color: rgba(175, 129, 60, 0.5);
  }

  /* The item box itself is dropped so the node and the label can be placed
     independently against the chart — they sit on opposite sides of the ring. */
  .lc-item {
    display: contents;
  }

  .lc-node {
    position: absolute;
    width: 7.5%;
    height: auto;
    aspect-ratio: 1;
  }

  .lc-node__icon {
    width: 57.78%;
    height: auto;
    /* The exported SVGs declare width/height 100% with preserveAspectRatio="none",
       so they carry no intrinsic ratio. Without this, height:auto falls back to
       the 150px default for replaced elements and inflates the whole node. */
    aspect-ratio: 1;
  }

  .lc-label {
    position: absolute;
    width: 25%;
  }

  .lc-label__title {
    font-size: clamp(15px, 1.25vw, 18px);
  }

  .lc-label__text {
    font-size: clamp(12px, 0.97vw, 14px);
  }

  /* Node positions are computed, not copied from the mock-up: each centre sits
     on the ring (centre 600,400 · r 220 in the 1200×620 box) at an exact 45°
     slot. The Figma coordinates drifted — the radii ran 211–225px instead of a
     constant 220 — which is what read as "crooked". Formula per node:
       left = (600 + 220·cos θ − 45) / 1200 · 100%
       top  = (400 + 220·sin θ − 45) /  620 · 100%   */

  /* 1 — Project Analysis (lower left · 135°) */
  .lc-item--1 .lc-node { left: 33.2864%; top: 82.3490%; }
  .lc-item--1 .lc-label { left: 5%; top: 82.2581%; text-align: right; }

  /* 2 — Operational Performance (left · 180°) */
  .lc-item--2 .lc-node { left: 27.9167%; top: 57.2581%; }
  .lc-item--2 .lc-label { left: 0; top: 53.7097%; text-align: right; }

  /* 3 — Financial Performance (upper left · 225°) */
  .lc-item--3 .lc-node { left: 33.2864%; top: 32.1672%; }
  .lc-item--3 .lc-label { left: 5%; top: 27.7419%; text-align: right; }

  /* 4 — Sales & Marketing (top · 270°) */
  .lc-item--4 .lc-node { left: 46.25%; top: 21.7742%; }
  .lc-item--4 .lc-label { left: 36.6667%; top: 0; width: 26.6667%; text-align: center; }

  /* 5 — Residential Sales (upper right · 315°) */
  .lc-item--5 .lc-node { left: 59.2136%; top: 32.1672%; }
  .lc-item--5 .lc-label { left: 70%; top: 27.7419%; }

  /* 6 — Capital Expenditure (right · 0°) */
  .lc-item--6 .lc-node { left: 64.5833%; top: 57.2581%; }
  .lc-item--6 .lc-label { left: 75%; top: 56.7742%; }

  /* 7 — Stakeholder Relationship (lower right · 45°) */
  .lc-item--7 .lc-node { left: 59.2136%; top: 82.3490%; }
  .lc-item--7 .lc-label { left: 70%; top: 80.6452%; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- Transition zone: 769px → desktop (own judgment) ---- */
@media (max-width: 1200px) {
  :root {
    --gutter: 64px;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 40px;
  }

  .nav {
    gap: 20px 24px;
  }

  /* Turning Potential → stacked, image on top */
  .potential__content {
    max-width: none;
  }

  .potential__img {
    position: static;
    width: 100%;
    height: clamp(220px, 40vw, 280px);
    margin-bottom: 40px;
  }

  .step {
    padding-left: 0;
  }

  /* Stewardship → stacked: centred content on top, image below */
  .steward {
    padding-block: 0;
  }

  .steward__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .steward__img {
    order: 2;
    height: clamp(240px, 50vw, 427px);
  }

  .steward__content {
    order: 1;
    align-items: center;
    text-align: center;
    padding-block: 56px;
    padding-inline: var(--gutter);
    margin-inline-start: 0;
    max-width: none;
  }

  .steward__head {
    align-items: center;
  }

  .steward__title {
    text-align: center;
  }

  /* Proof → two columns */
  .proof__grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px 0;
  }

  .proof-item:not(:nth-child(3n + 1)) {
    border-left: 0;
  }

  .proof-item:nth-child(even) {
    border-left: 1px solid rgba(14, 17, 25, 0.15);
  }

  /* Approach: process steps → two columns */
  .process__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 6vw, 60px);
    row-gap: 44px;
  }

  /* Who We Are: analysis → stack (heading → text → photo) */
  .analysis__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .analysis__title {
    order: 1;
    max-width: none;
    margin-top: 0;
  }
  .analysis__text {
    order: 2;
    gap: 32px;
  }
  .analysis__media {
    order: 3;
    width: 100%;
    max-width: 420px;
  }
  .analysis__img-sm {
    display: none;
  }
}

/* ============================================================
   MOBILE DESIGN — 320px → 768px (fluid, per Figma node 216:425)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --gutter: clamp(15px, 4vw, 24px);
  }

  .section {
    padding-block: clamp(56px, 12vw, 72px);
  }

  .h-display {
    font-size: clamp(29px, 8vw, 42px);
  }

  /* --- Header: burger (left) · logo (centre) · contact (right) --- */
  .hero__bar {
    position: relative;
  }

  .hero__bar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
    min-height: 56px;
    padding-block: 10px;
  }

  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    justify-self: start;
  }

  .nav-burger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--cream);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .logo--hero {
    justify-self: center;
  }

  .hero__contact {
    display: inline-block;
    justify-self: end;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
  }

  /* ---- Mobile menu: full-screen overlay ---- */

  /* The overlay is fixed, but it lives inside .hero / .chero, which create a
     stacking context (isolation: isolate). Without lifting that ancestor while
     the menu is open, later positioned sections would paint over the overlay. */
  .hero:has(.nav-toggle:checked),
  .chero:has(.nav-toggle:checked) {
    z-index: 100;
  }

  /* Hold the page still behind the overlay. */
  html:has(.nav-toggle:checked) {
    overflow: hidden;
  }

  /* Burger and logo stay on top of the overlay, so the X is always reachable. */
  .nav-burger,
  .logo--hero {
    position: relative;
    z-index: 70;
  }

  /* The bar's own "contact" would compete with the big CONTACT in the list. */
  .nav-toggle:checked ~ .hero__contact {
    opacity: 0;
    pointer-events: none;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    counter-reset: akoya-nav;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 96px var(--gutter) 96px;
    overflow-y: auto;
    background: linear-gradient(180deg, #06183c 0%, #02102b 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  .nav-toggle:checked ~ .nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s;
  }

  .nav a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(175, 129, 60, 0.22);
    font-family: var(--serif);
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--cream);
    /* Entrance: each item rises into place, staggered below. */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.2s ease;
  }

  .nav a:first-child {
    border-top: 1px solid rgba(175, 129, 60, 0.22);
  }

  /* 01 … 05 — numbering comes from a counter, so the markup stays untouched. */
  .nav a::before {
    counter-increment: akoya-nav;
    content: counter(akoya-nav, decimal-leading-zero);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--gold);
  }

  .nav a.is-active {
    color: var(--gold);
  }

  .nav-toggle:checked ~ .nav a {
    opacity: 1;
    transform: none;
  }
  .nav-toggle:checked ~ .nav a:nth-child(1) { transition-delay: 0.12s; }
  .nav-toggle:checked ~ .nav a:nth-child(2) { transition-delay: 0.18s; }
  .nav-toggle:checked ~ .nav a:nth-child(3) { transition-delay: 0.24s; }
  .nav-toggle:checked ~ .nav a:nth-child(4) { transition-delay: 0.30s; }
  .nav-toggle:checked ~ .nav a:nth-child(5) { transition-delay: 0.36s; }
  .nav-toggle:checked ~ .nav a:nth-child(6) { transition-delay: 0.42s; }

  .nav::after {
    content: "Akoya Hospitality · Est. 2016";
    position: absolute;
    left: var(--gutter);
    bottom: 40px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(246, 243, 236, 0.4);
  }

  /* Visitors who asked for less motion get the panel without the travel. */
  @media (prefers-reduced-motion: reduce) {
    .nav a {
      transform: none;
      transition: opacity 0.2s ease;
    }
  }

  /* --- Hero --- */
  .hero__content {
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 64px;
    max-width: none;
  }

  .hero__intro {
    gap: 20px;
  }

  .hero__title {
    font-size: clamp(29px, 9vw, 40px);
  }

  .hero__lead {
    max-width: none;
  }

  .get-started {
    align-self: center;
  }

  /* --- Full-bleed images (edge to edge) --- */
  .model__img,
  .potential__img {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    max-width: none;
  }

  /* --- Why Ultra-Luxury --- */
  .model {
    padding-bottom: 0;
  }

  .model__inner {
    gap: 36px;
  }

  .model__cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .model__img {
    height: clamp(200px, 64vw, 240px);
  }

  /* --- We Drive: horizontal scroll gallery --- */
  .drive__inner {
    gap: 32px;
  }

  /* Fallback when Swiper is unavailable: plain snap-scroll strip. */
  .drive__gallery {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
  }

  .drive__slide {
    flex: 0 0 auto;
    width: min(290px, 78vw);
    scroll-snap-align: start;
  }

  .drive__gallery img {
    height: clamp(200px, 64vw, 240px);
  }

  /* ---- Swiper active: one photo + a peek (~0.25) of the next, which bleeds
     off the right edge of the screen. Left edge stays on the text gutter. ---- */
  .drive__slider.swiper-initialized {
    overflow: hidden;
    margin-inline: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: 0;
  }

  .drive__slider.swiper-initialized .drive__gallery {
    display: flex;
    gap: 0; /* Swiper sets the spacing inline. */
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: content-box;
  }

  .drive__slider.swiper-initialized .drive__slide {
    flex-shrink: 0;
    width: 100%; /* Swiper overrides this inline. */
    scroll-snap-align: none;
  }

  /* --- Turning Potential --- */
  .potential__img {
    height: clamp(170px, 55vw, 206px);
    margin-bottom: 30px;
  }

  .potential__content {
    margin-inline: 0;
  }

  .potential__title {
    margin-bottom: 24px;
  }

  /* --- Extension banner --- */
  .banner__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    min-height: 200px;
    padding-block: 56px;
  }

  .banner__text {
    white-space: normal;
  }

  /* --- Proof: two columns down to 320px --- */
  .proof__inner {
    gap: 40px;
  }

  .proof-item {
    padding-inline: clamp(8px, 3vw, 20px);
    gap: 18px;
  }

  /* --- Footer: centred --- */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    min-height: 0;
    padding-block: 48px;
  }

  .footer__meta {
    text-align: center;
  }

  /* ---- Approach page ---- */
  .breadcrumb {
    padding-top: 24px;
  }

  .hero__sub-content {
    gap: 20px;
    padding-top: 36px;
    padding-bottom: 56px;
  }

  /* Who We Are hero — fixed 363px tall on mobile, title centred below bar */
  .hero--who {
    min-height: 363px;
    display: flex;
    flex-direction: column;
  }
  .hero--who > .container {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .hero--who .hero__sub-content {
    padding-block: 24px;
  }

  .differ__inner {
    gap: 28px;
  }

  .differ__img {
    width: min(200px, 56vw);
    height: auto;
    aspect-ratio: 200 / 143;
  }

  .banner--center .banner__center {
    gap: 32px;
    min-height: 0;
    padding-block: 48px;
  }

  /* Process steps → single column, larger tap targets */
  .process__title {
    margin-bottom: 40px;
  }

  .process__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .pstep__name {
    font-size: clamp(28px, 8vw, 34px);
  }

  /* ---- Who We Are page ---- */
  /* Intro: text on top, bust image full-width below, pool hidden */
  .intro {
    display: flex;
    flex-direction: column;
  }
  .intro > .container {
    order: 1;
  }
  .intro__inner {
    gap: 20px;
  }
  .intro__img--pool {
    display: none;
  }
  .intro__img--bust {
    order: 2;
    position: static;
    width: calc(100% - 2 * var(--gutter));
    height: auto;
    aspect-ratio: 345 / 260;
    margin: 40px auto 0;
  }

  /* Founder: everything stacks in one column */
  .founder__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .founder__photo {
    width: 100%;
    max-width: 345px;
    margin-inline: auto;
    aspect-ratio: 345 / 386;
  }
  .founder__content {
    gap: 40px;
  }
  .founder__cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .proof-list {
    grid-template-columns: 1fr;
  }

  /* ---- Contact page: columns stack (dark hero on top, form below) ---- */
  .chero__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    min-height: 0;
  }
  .chero__bg {
    display: none;
  }
  /* Intro becomes its own full-bleed dark hero, content re-inset to the gutter */
  .chero__intro {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-inline: calc(-1 * var(--gutter));
    padding: 81px var(--gutter) 44px;
    background: #0c1a24 var(--chero-img, url("../img/contact-hero.webp")) center / cover no-repeat;
  }
  .chero__intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(7, 20, 58, 0.6);
    z-index: 0;
  }
  .chero__intro > * {
    position: relative;
    z-index: 1;
  }
  .chero__intro-text {
    margin-block: 0;
    margin-top: 40px;
  }
  .chero__title {
    font-size: clamp(30px, 9vw, 40px);
    margin-bottom: 20px;
  }
  .chero__lead-strong {
    font-size: 16px;
    line-height: 24px;
  }
  .cform-panel {
    padding: 70px 0;
  }

  /* Back into the flow here. Taking it out was needed on desktop, where the
     panel centres the form and any growth shunts everything upward — but on
     mobile the cell is content-height, so nothing above can move anyway, and
     an absolute box just overhangs the footer. In flow it simply pushes the
     footer down, which is harmless. */
  .cform .wpcf7-response-output {
    position: static;
    margin: 24px 0 0 !important;
  }
  .chero__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 56px;
    padding-block: 10px;
  }
  .chero .nav a {
    color: var(--cream);
  }

  /* ---- Scope page ---- */
  .areas__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .areas__title {
    margin: 40px 0 30px;
    font-size: clamp(26px, 7.5vw, 32px);
  }

  .banner--scope .banner__inner {
    flex-direction: column;
    align-items: center; /* Text is centred here, so the button must be too. */
    min-height: 0;
    padding-block: 48px;
  }

  .banner--scope .banner__text {
    font-size: clamp(20px, 5.6vw, 24px);
  }

  .lifecycle__chart {
    gap: 40px;
    margin-top: 44px;
  }

  .lc-item {
    gap: 20px;
  }
}