:root {
  --paper: #f4f0e8;
  --paper2: #ebe5da;
  --ink: #151512;
  --muted: #716d64;
  --gold: #a57d3d;
  --gold2: #c5a66d;
  --line: rgba(21, 21, 18, .14);
  --dark: #171714;
  --dark2: #23221d;
  --white: #fffdf8;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  overflow-x: hidden
}

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

button {
  font: inherit
}

.serif {
  font-family: 'Playfair Display', serif
}

.sans {
  font-family: 'Manrope', sans-serif
}

::selection {
  background: var(--ink);
  color: var(--paper)
}

.progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--gold);
  width: 0;
  z-index: 200;
  transform-origin: left
}

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 300;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  transition: width .25s, height .25s, background .25s;
  display: none
}

/* =========================================================
   HEADER
   ========================================================= */

.nav {
  height: 82px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 5.2vw;

  background: rgba(244, 240, 232, 1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom: 1px solid transparent;

  transition:
    background .35s ease,
    border-color .35s ease;
}

.nav.scrolled {
  background: rgba(244, 240, 232, .94);
  border-bottom-color: var(--line);
}


/* =========================================================
   LOGO
   ========================================================= */

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  display: block;
  width: auto;
  height: 70px;
  object-fit: contain;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-list {
  list-style: none;

  display: flex;
  align-items: center;
  gap: 19px;
  margin: 0;
  padding: 0;
}

.nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-item > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: #3d3b36;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;

  white-space: nowrap;
}


/* underline */

.nav-item > a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 23px;

  width: 0;
  height: 1px;

  background: var(--gold);

  transition: width .3s ease;
}

.nav-item > a:hover::after {
  width: 100%;
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.menu {
  display: none;

  width: 42px;
  height: 42px;

  padding: 0;
  margin: 0;

  border: 0;
  outline: none;

  background: transparent;

  cursor: pointer;

  flex-direction: column;
  align-items: flex-end;
  justify-content: center;

  gap: 6px;
}

.menu span {
  display: block;

  height: 2px;

  background: var(--ink);

  transition:
    width .3s ease,
    transform .3s ease,
    opacity .3s ease;
}

.menu span:nth-child(1),
.menu span:nth-child(3) {
  width: 24px;
}

.menu span:nth-child(2) {
  width: 17px;
}


/* =========================================================
   MEGA MENU — BUSINESS
   ========================================================= */

.nav-item-mega {
  position: static;
}

.mega-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mega-caret {
  width: 9px;
  height: 6px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .3s ease, color .3s ease;
}

.nav-item-mega:hover .mega-caret,
.nav-item-mega:focus-within .mega-caret {
  transform: rotate(180deg);
  color: var(--gold);
}

.mega-toggle {
  display: none;
}

.mega-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 82px;
  z-index: 999;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);

  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -28px rgba(21, 21, 18, .28);

  transition:
    clip-path .5s cubic-bezier(.65, 0, .35, 1),
    visibility 0s linear .5s;
}

.nav-item-mega:hover .mega-menu,
.nav-item-mega:focus-within .mega-menu,
.nav-item-mega.mega-open .mega-menu {
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0% 0);

  transition:
    clip-path .5s cubic-bezier(.65, 0, .35, 1),
    visibility 0s linear 0s;
}

.mega-menu-inner {
  width: 100%;
  padding: 10px 5.2vw;
  display: flex;
  align-items: stretch;
}

.mega-col {
  position: relative;
  flex: 1 1 0;

  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 22px 14px;
}

.mega-col-category {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mega-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  color: var(--gold);

  transition: color .25s ease;
}

.mega-icon svg {
  width: 19px;
  height: 19px;
}

.mega-col-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gold);
  transition: color .25s ease;
  text-transform: uppercase;
}

.mega-col-category:hover .mega-icon,
.mega-col-category:hover .mega-col-title {
  color: var(--ink);
}

.mega-col-divider {
  display: block;
  height: 1px;
  background: var(--line);
}

.mega-col-subcategory {
  display: flex;
    align-items: start;
    gap: 7px;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--muted);
    transition: color .25s ease;
    text-transform: uppercase;
}

.mega-col-chevron {
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  transform: translateX(0);
  transition: transform .25s ease, color .25s ease;
}

.mega-col-subcategory:hover {
  color: var(--ink);
}

.mega-col-subcategory:hover .mega-col-chevron {
  color: var(--gold);
  transform: translateX(3px);
}

.mega-menu-footer {
  flex-shrink: 0;

  border-top: 1px solid var(--line);
}

.mega-menu-cta {
  width: 100%;
  padding: 16px 5.2vw;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.mega-menu-cta i {
  font-style: normal;
  color: var(--gold);
  transition: transform .3s ease;
}

.mega-menu-cta:hover i {
  transform: translate(2px, 2px);
}


/* =========================================================
   DESKTOP NAV — TIGHTEN FOR 8 ITEMS
   ========================================================= */

@media (max-width: 1400px) {

  .nav {
    padding: 0 4vw;
  }

  .nav-list {
    gap: 13px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1180px) {

  .nav {
    height: 82px;
    padding: 0 5vw;
  }

  .brand-logo {
    height: 38px;
  }

  .main-nav {
    display: none;
  }

  .menu {
    display: flex;
  }

}
















.hero {
  min-height: 100vh;
  padding: 138px 5.2vw 54px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 6vw;
  align-items: center;
  position: relative
}

.hero-copy {
  padding-left: 3.2vw;
  position: relative;
  z-index: 2
}

.eyebrow {
  font-size: 10px;
  letter-spacing: .33em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 25px
}

.hero h1 {
  font-size: clamp(58px, 8vw, 122px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.055em;
  margin: 0 0 30px
}

.hero h1 em {
  font-style: italic
}

.hero-lead {
  font-size: 16px;
  line-height: 1.8;
  color: #57534b;
  max-width: 500px
}

.hero-actions {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-top: 32px
}

.line-btn {
  display: inline-flex;
  gap: 17px;
  align-items: center;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink)
}

.line-btn i {
  font-style: normal;
  color: var(--gold);
  font-size: 17px
}

.quiet-link {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted)
}

.hero-visual {
  height: min(690px, 74vh);
  position: relative
}

.hero-main {
  position: absolute;
  right: 12%;
  top: 0;
  width: 58%;
  height: 84%;
  overflow: hidden
}

.hero-main img,
.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .65, .2, 1)
}

.hero-main:hover img,
.hero-card:hover img {
  transform: scale(1.035)
}

.hero-card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44%;
  height: 48%;
  overflow: hidden;
  border: 9px solid var(--paper);
  background: #ddd
}

.hero-card.two {
  left: auto;
  right: 0;
  bottom: 5%;
  width: 34%;
  height: 28%;
  border-width: 7px
}

.hero-stamp {
  position: absolute;
  right: 2%;
  top: 7%;
  width: 102px;
  height: 102px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 16px;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--paper)
}

.hero-year {
  position: absolute;
  left: -10px;
  bottom: 10%;
  font-size: 14px;
  letter-spacing: .2em;
  color: var(--gold);
  writing-mode: vertical-rl;
  text-transform: uppercase
}

.hero-caption {
  position: absolute;
  right: 0;
  bottom: -1px;
  background: var(--paper);
  padding: 12px 0 0 15px;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted)
}
/* =========================================
   COMMON SECTION TYPOGRAPHY
   ========================================= */



.section {
  padding: 80px 8.5vw !important
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 6vw;
  align-items: end
}

.kicker {
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold)
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 5.6vw, 45px);
  line-height: 1.1;
  letter-spacing: -.05em;
  font-weight: 400;
  margin: 16px 0 0;
}

.section-title em {
  color: var(--gold);
  font-style: italic;
}


.section-title.dark em {
  color: var(--gold2);
  font-style: italic;
}

.section-copy {
  max-width: 500px;
  color: #5d5950;
  font-size: 16px;
  line-height: 1.85
}

.rule {
  height: 1px;
  background: var(--line);
  margin-top: 72px
}

.manifesto {
  background: var(--dark);
  color: var(--paper);
  padding: 135px 8.5vw
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 9vw;
  align-items: start
}

.manifesto .kicker {
  color: var(--gold2)
}

.manifesto h2 {
  font-size: clamp(45px, 6.6vw, 92px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.055em;
  margin: 0
}

.manifesto h2 em {
  color: var(--gold2);
  font-style: italic
}

.manifesto p {
  font-size: 18px;
  line-height: 1.8;
  color: #c4c0b6;
  max-width: 700px;
  margin: 10px 0 0
}

.manifesto-quote {
  margin-top: 75px;
  border-top: 1px solid #ffffff24;
  padding-top: 23px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  font-family: 'Playfair Display';
  font-size: 22px;
  color: #e8e4db
}

.manifesto-quote span {
  font-family: 'DM Sans';
  font-size: 16px;
  letter-spacing: .2em;
  color: var(--gold2);
  text-transform: uppercase;
  padding-top: 7px
}

.story {
  background: var(--paper2)
}

.story-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 9vw;
  margin-top: 75px
}

.story-image {
  height: 660px;
  position: sticky;
  top: 105px;
  overflow: hidden
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75)
}

.story-image:after {
  content: 'FOUR GENERATIONS OF TRUST';
  position: absolute;
  left: 24px;
  bottom: 22px;
  color: #fff;
  font-size: 16px;
  letter-spacing: .27em
}

.timeline {
  border-top: 1px solid var(--line)
}

.milestone {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 25px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  transition: .4s
}

.milestone:hover {
  padding-left: 12px
}

.milestone .year {
  font-size: 16px;
  color: var(--gold);
  letter-spacing: .13em
}

.milestone h3 {
  font-family: 'Playfair Display';
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 9px
}

.milestone p {
  font-size: 16px;
  line-height: 1.75;
  color: #666158;
  margin: 0
}

.portfolio {
  background: var(--paper)
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 22px;
  margin-top: 45px
}

.portfolio-feature {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 38px;
  background: linear-gradient(155deg, var(--gold2), var(--gold) 68%);
  box-shadow: inset 0 -100px 140px -70px rgba(21, 21, 18, .3);
  transition: transform .5s ease, box-shadow .5s ease;
}

.portfolio-feature:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 -100px 140px -70px rgba(21, 21, 18, .3), 0 24px 44px rgba(21, 21, 18, .18);
}

.portfolio-label {
  position: relative;
  z-index: 2;
  color: var(--ink);
}

.portfolio-label small {
  font-size: 16px;
  letter-spacing: .27em;
  text-transform: uppercase;
  color:#fff;
}

.portfolio-label h3 {
  font-family: 'Playfair Display';
  font-size: 40px;
  font-weight: 400;
  margin: 9px 0;
  color: #fff;
}

.portfolio-label p {
  font-size: 14px;
  line-height: 1.65;
  color:#fff;
  max-width: 480px;
  margin: 0
}

.portfolio-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 22px
}

.portfolio-mini {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 24px;
  background: var(--ink);
  transition: transform .5s ease, box-shadow .5s ease;
}

.portfolio-mini:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 36px rgba(0, 0, 0, .28);
}
/* =========================================
   04 — THE ENTERPRISE
   ========================================= */

#enterprise {
  background: var(--paper);
}

#enterprise .kicker {
  color: var(--gold);
}

#enterprise .section-copy {
  color: #68645d;
}

#enterprise .mini-copy small {
  color: #fff;
}



.mini-copy {
  position: relative;
  z-index: 2;
  color: #fff
}

.mini-copy small {
  font-size: 14px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #d5b77e
}

.mini-copy h4 {
  font-family: 'Playfair Display';
  font-size: 25px;
  font-weight: 400;
  margin: 6px 0 0
}
/* =========================================================
   05 — WHY NAGI
   ========================================================= */

.why-nagi {
  background: #e3ddd1;
  color: var(--ink);
}


/* -----------------------------------------
   HEADER
   ----------------------------------------- */

.why-nagi .section-head {
  margin-bottom: 0;
}

.why-nagi .kicker {
  color: var(--gold);
}



.why-nagi .section-copy {
  color: #68635a;
}


/* -----------------------------------------
   GRID
   ----------------------------------------- */

.why-nagi .cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  margin-top: 40px;
}


/* -----------------------------------------
   LIST
   ----------------------------------------- */

.why-nagi .cap-list {
  border-top: 1px solid var(--line);
}

.why-nagi .cap {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .4s ease;
}

.why-nagi .cap:hover {
  padding-left: 8px;
}

.why-nagi .cap b {
  font-size: 10px;
  color: var(--gold);
  font-weight: 500;
}

.why-nagi .cap h4 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 400;

  margin: -8px 0 5px 0;

  color: var(--ink);
}

.why-nagi .cap p {
  font-size: 14px;
  color: #68635a;
  line-height: 1.7;
  margin: 0;
}


/* -----------------------------------------
   VISUAL
   ----------------------------------------- */

.why-nagi .cap-visual {
  height: 450px;

  display: grid;
  grid-template-columns: 1.15fr .85fr;

  gap: 12px;

  position: relative;
}

.why-nagi .cap-visual div {
  overflow: hidden;
}

.why-nagi .cap-visual img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 1s ease;
}

.why-nagi .cap-visual div:hover img {
  transform: scale(1.04);
}


/* -----------------------------------------
   RESPONSIVE
   ----------------------------------------- */

@media (max-width: 900px) {

  .why-nagi .cap-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .why-nagi .cap-visual {
    height: 450px;
  }

}


@media (max-width: 600px) {

  .why-nagi .cap-grid {
    margin-top: 50px;
  }

  .why-nagi .cap {
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: 20px 0;
  }

  .why-nagi .cap h4 {
    font-size: 21px;
  }

  .why-nagi .cap p {
    font-size: 14px;
  }

  .why-nagi .cap-visual {
    height: 330px;
    gap: 8px;
  }
  
  .news-featured {
    display: block !important;
}

.news-featured-media {
    position: relative !important;
}

}

/* =========================================================
   MISSION & VISION
   ========================================================= */

.mission-vision .section-head {
  margin-bottom: 0;
}

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 34px;
}

.mv-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 34px 36px;
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.mv-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 34px 70px -32px rgba(21, 21, 18, .4);
}

.mv-num {
  position: absolute;
  top: -18px;
  right: 6px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 130px;
  line-height: 1;
  color: var(--ink);
  opacity: .04;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}

.mv-card:hover .mv-num {
  opacity: .07;
  transform: translateY(-4px);
}

.mv-icon {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(165, 125, 61, .1);
  border: 1px solid rgba(165, 125, 61, .3);
  border-radius: 50%;
  color: var(--gold);
  transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
}

.mv-card:hover .mv-icon {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  transform: scale(1.06);
}

.mv-icon svg {
  width: 23px;
  height: 23px;
}

.mv-tag {
  position: relative;
  display: block;
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

.mv-card h3 {
  position: relative;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.28;
  margin: 10px 0 12px;
  color: var(--ink);
}

.mv-card p {
  position: relative;
  font-size: 14.5px;
  line-height: 1.7;
  color: #5d5950;
  margin: 0;
}

@media (min-width: 901px) {
  .mission-vision.section {
    padding: 48px 8.5vw !important;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  .mission-vision .section-title,
  .why-choose-us .section-title,
  .contact-map .section-title {
    font-size: clamp(32px, 4vw, 38px);
    margin-top: 10px;
  }
}

@media (max-width: 900px) {
  .mv-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .mv-card {
    padding: 40px 28px;
  }

  .mv-card h3 {
    font-size: 22px;
  }

  .mv-num {
    font-size: 100px;
  }
}


/* =========================================================
   WHY CHOOSE US
   ========================================================= */

.why-choose-us {
  background: #e3ddd1;
}

.why-choose-us .section-head {
  margin-bottom: 0;
}

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

.wc-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 26px 24px 24px;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.wc-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 26px 54px -30px rgba(21, 21, 18, .4);
}

.wc-num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-size: 11px;
  letter-spacing: .1em;
  color: #b5ad9d;
}

.wc-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(165, 125, 61, .12);
  border: 1px solid rgba(165, 125, 61, .3);
  border-radius: 50%;
  color: var(--gold);
  transition: background .4s ease, color .4s ease, transform .4s ease;
}

.wc-card:hover .wc-icon {
  background: var(--gold);
  color: var(--white);
  transform: scale(1.06);
}

.wc-icon svg {
  width: 19px;
  height: 19px;
}

.wc-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  margin: 16px 0 8px;
  color: var(--ink);
}

.wc-card p {
  font-size: 13.5px;
  line-height: 1.62;
  color: #68635a;
  margin: 0;
}

@media (min-width: 901px) {
  .why-choose-us.section {
    padding: 44px 8.5vw !important;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width: 900px) {
  .wc-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .wc-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wc-card {
    padding: 32px 26px;
  }
}


/* =========================================================
   06 — LEADERSHIP
   ========================================================= */

.leadership {
  background: var(--dark);
  color: var(--paper);
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.lead-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 5vw;
}

.leadership .kicker {
  color: var(--gold2);
}

.leadership .section-copy {
  color: #a9a59c;
}


/* =========================================================
   LEADERS
   ========================================================= */

.leaders {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-top: 72px;
}


/* =========================================================
   INDIVIDUAL LEADER
   ========================================================= */

.leader {
  position: relative;
}


/* -----------------------------------------
   STAGGER
   ----------------------------------------- */

.leader:nth-child(1) {
  margin-top: 0;
}

.leader:nth-child(2) {
  margin-top: 85px;
}

.leader:nth-child(3) {
  margin-top: 170px;
}


/* =========================================================
   LEADER IMAGE
   ========================================================= */

.leader-img {
  height: 350px;

  overflow: hidden;

  background: #302f2b;
}

.leader-img img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: grayscale(.7);

  transition:
    filter 1s ease,
    transform 1s ease;
}

.leader:hover .leader-img img {
  filter: grayscale(.08);

  transform: scale(1.035);
}


/* =========================================================
   LEADER META
   ========================================================= */

.leader-meta {
  padding: 16px 0 0;

  border-top: 1px solid #ffffff25;

  margin-top: 10px;
}

.leader-meta h3 {
  font-family: 'Playfair Display', serif;

  font-size: 24px;

  font-weight: 400;

  margin: 0;

  color: var(--paper);
}

.leader-meta span {
  display: block;

  margin-top: 6px;

  color: #9e9a91;

  font-size: 14px;

  letter-spacing: .15em;

  text-transform: uppercase;
}

.leader-meta p {
  font-size: 14px;

  line-height: 1.6;

  color: #aaa69d;

  margin: 12px 0 0;

  max-width: 330px;
}


/* =========================================================
   FACT BADGE
   ========================================================= */

.leader-fact {
  position: absolute;

  right: 15px;
  top: 15px;

  border: 1px solid #ffffff33;

  padding: 8px 10px;

  color: #d8b878;

  font-size: 16px;

  letter-spacing: .15em;

  text-transform: uppercase;

  background: rgba(24, 22, 19, .12);

  backdrop-filter: blur(4px);
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {

  .lead-head {
    flex-direction: column;

    align-items: flex-start;

    gap: 35px;
  }

  .leadership .section-copy {
    max-width: 520px;
  }

  .leaders {
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

    margin-top: 55px;
  }

  .leader:nth-child(1) {
    margin-top: 0;
  }

  .leader:nth-child(2) {
    margin-top: 60px;
  }

  .leader:nth-child(3) {
    margin-top: 60px;
  }

  /*.leader-img {*/
  /*  height: 470px;*/
  /*}*/

}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .lead-head {
    gap: 28px;
  }

  .leaders {
    grid-template-columns: 1fr;

    gap: 55px;

    margin-top: 50px;
  }

  /*
   * Remove desktop stagger on mobile.
   * This keeps the cards clean and readable.
   */

  .leader:nth-child(1),
  .leader:nth-child(2),
  .leader:nth-child(3) {
    margin-top: 0;
  }

  /*.leader-img {*/
  /*  height: 500px;*/
  /*}*/

  .leader-meta {
    padding-top: 14px;

    margin-top: 8px;
  }

  .leader-meta h3 {
    font-size: 22px;
  }

  .leader-meta span {
    font-size: 16px;

    letter-spacing: .13em;
  }

  .leader-meta p {
    font-size: 14px;

    max-width: 100%;
  }

  .leader-fact {
    right: 12px;

    top: 12px;

    padding: 7px 9px;
  }


}

/* impact */

.impact {
  background: var(--paper)
}

.impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
  margin-top: 40px
}

.impact-image {
  height: 360px;
  overflow: hidden
}

.impact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.impact-copy {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.impact-copy blockquote {
  font-family: 'Playfair Display';
  font-size: clamp(31px, 2vw, 52px);
  line-height: 1.08;
  font-weight: 400;
  margin: 0 0 10px
}

.impact-copy p {
  font-size: 16px;
  line-height: 1.85;
  color: #625e55;
  max-width: 520px
}
.impact .credential {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.impact .credential b {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 400;
}

.impact .credential span {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #777168;
}
.credential-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 0px;
  border-top: 1px solid var(--line);
  padding-top: 22px
}

.credential {
  font-size: 10px;
  letter-spacing: .13em;
  color: #5b574f;
  text-transform: uppercase
}

.credential b {
  display: block;
  font-family: 'Playfair Display';
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 4px
}


/* =========================================================
   LEADERSHIP TEAM
   ========================================================= */

.leadership-team {
  background: var(--paper2);
}

.leadership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: center;
  margin-top: 40px;
}

.leadership-copy {
  max-width: 520px;
}

.leadership-copy .section-copy {
  margin-top: 22px;
}

.leadership-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.leadership-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.leadership-stat strong {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
}

.leadership-stat span {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #777168;
}

.leadership-copy .line-btn {
  margin-top: 25px;
}

.leadership-visual {
  position: relative;
}

.leadership-frame {
  position: relative;
  z-index: 1;
  height: 430px;
  overflow: hidden;
  background: #ddd;
}

.leadership-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .65, .2, 1);
}

.leadership-visual:hover .leadership-frame img {
  transform: scale(1.045);
}

.leadership-badge {
  position: absolute;
  left: -1px;
  bottom: -1px;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.leadership-badge strong {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.leadership-badge span {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold2);
}

.leadership-outline {
  position: absolute;
  right: -18px;
  top: -18px;
  width: 65%;
  height: 65%;
  border: 1px solid var(--gold);
  z-index: 0;
}









.future {
  min-height: 88vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1d1c18;
  color: #fff
}

.future img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.42) saturate(.65)
}

.future:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #111 0%, #111b 45%, transparent 100%)
}

.future-copy {
  position: relative;
  z-index: 2;
  padding: 125px 8.5vw;
  max-width: 1050px
}

.future .kicker {
  color: var(--gold2)
}


.future p {
  max-width: 590px;
  color: #ddd8ce;
  font-size: 16px;
  line-height: 1.8
}

.future .line-btn {
  color: #fff;
  border-color: #fff;
  margin-top: 25px
}

.future .line-btn i {
  color: var(--gold2)
}
/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  background: var(--dark);
  color: var(--paper);
  padding: 80px 8.5vw 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr .8fr 1fr;
  gap: 80px;
}

/* Brand */

.footer-logo {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
  margin-bottom: 24px;
}

.footer-brand {
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  line-height: 1.1;
  margin-bottom: 16px;
}

.footer-brand-col p,
.footer-connect-col p {
  max-width: 360px;
  margin: 0;
  color: rgba(244,240,232,.62);
  font-size: 13px;
  line-height: 1.75;
}

/* Footer headings */

.footer h5 {
  margin: 0 0 24px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold2);
}

/* Footer navigation */

.footer-links,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links li,
.footer-contact li {
  margin: 0;
  padding: 0;
}

.footer-links a {
  position: relative;
  display: inline-block;
  color: #f4f0e89e;
  font-size: 13px;
  line-height: 1.5;
  transition: color .3s ease;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--gold2);
  transition: width .3s ease;
}

.footer-links a:hover {
  color: var(--paper);
}

.footer-links a:hover::after {
  width: 100%;
}

/* Contact */

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.footer-contact li {
  color: #f4f0e89e;
  font-size: 13px;
  line-height: 1.5;
}

/* Bottom */

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid rgba(244,240,232,.12);
  color: rgba(244,240,232,.42);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* =========================================================
   FOOTER RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 55px 40px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    margin-top: 60px;
  }
}

@media (max-width: 600px) {

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .footer-brand-col {
    grid-column: auto;
  }

  .footer-logo {
    height: 50px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 50px;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease
}

.reveal.in {
  opacity: 1;
  transform: none
}

.delay1 {
  transition-delay: .1s
}

.delay2 {
  transition-delay: .2s
}

.delay3 {
  transition-delay: .3s
}

@media(max-width:900px) {
  .nav {
    padding: 0 5vw;
  }

  .navlinks,
  .nav-cta {
    display: none;
  }

  .menu {
    display: flex;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 125px;
    gap: 45px
  }

  .hero-copy {
    padding-left: 0
  }

  .hero-visual {
    height: 570px
  }

  .hero-main {
    right: 7%;
    width: 64%
  }

  .hero-card {
    width: 48%;
    height: 47%
  }

  .section,
  .manifesto,
  .future-copy {
    padding-left: 6vw;
    padding-right: 6vw
  }

  .story-grid,
  .cap-grid,
  .impact-grid,
  .leadership-grid {
    grid-template-columns: 1fr
  }

  .story-image {
    position: relative;
    top: auto;
    height: 520px
  }

  .leadership-frame {
    height: 460px
  }

  .leadership-outline {
    display: none
  }

  .portfolio-grid {
    grid-template-columns: 1fr
  }

  .portfolio-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr
  }

  .portfolio-mini {
    min-height: 330px
  }

  .leaders {
    grid-template-columns: 1fr 1fr
  }

  .leader:nth-child(2),
  .leader:nth-child(3) {
    margin-top: 0
  }

  /*.leader-img {*/
  /*  height: 460px*/
  /*}*/

  .leader:last-child {
    grid-column: 1/-1;
    max-width: 50%
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .footer-grid>div:first-child {
    grid-column: 1/-1
  }
}

@media(max-width:560px) {
  .brand-text {
    font-size: 16px;
    letter-spacing: .18em
  }

  .hero {
    padding-top: 110px;
    min-height: auto
  }

  .hero h1 {
    font-size: 59px
  }

  .hero-visual {
    height: 460px
  }

  .hero-main {
    right: 0;
    width: 72%;
    height: 83%
  }

  .hero-card {
    width: 55%;
    height: 48%;
    left: -2%
  }

  .hero-card.two {
    width: 39%;
    height: 27%
  }

  .hero-stamp {
    width: 76px;
    height: 76px;
    font-size: 6px
  }

  .section {
    padding-top: 90px;
    padding-bottom: 90px
  }

  .section-head,
  .lead-head {
    display: block
  }

  .section-copy {
    margin-top: 25px
  }

  .manifesto {
    padding-top: 95px;
    padding-bottom: 95px
  }

  .manifesto-grid {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .manifesto-quote {
    display: block;
    font-size: 20px
  }

  .manifesto-quote span {
    display: block;
    margin-top: 18px
  }

  .story-grid {
    margin-top: 50px
  }

  .story-image {
    height: 420px
  }
  
  .impact-image {
    height: 215px;
}

.impact-copy blockquote {
    font-size: clamp(24px, 2vw, 52px);
    margin-top: 15px;
}

  .leadership-grid {
    margin-top: 32px;
  }

  .leadership-frame {
    height: 320px;
  }

  .leadership-badge {
    padding: 13px 18px;
  }

  .leadership-badge strong {
    font-size: 18px;
  }

  .leadership-stats {
    gap: 28px;
    margin-top: 32px;
    padding-top: 22px;
  }

  .leadership-stat strong {
    font-size: 24px;
  }

  .leadership-copy .line-btn {
    margin-top: 32px;
  }

  .milestone {
    grid-template-columns: 62px 1fr;
    gap: 16px
  }

  .milestone h3 {
    font-size: 25px
  }

  .portfolio-grid {
    margin-top: 50px
  }

  .portfolio-side {
    grid-template-columns: 1fr
  }

  .cap-visual {
    height: 390px
  }

  .leaders {
    grid-template-columns: 1fr
  }

  .leader:last-child {
    grid-column: auto;
    max-width: none
  }

  .leader:nth-child(2),
  .leader:nth-child(3) {
    margin-top: 0
  }

  /*.leader-img {*/
  /*  height: 450px*/
  /*}*/

  .future {
    min-height: auto;
  }

  .future:after {
    background: linear-gradient(90deg, #111d, #1115)
  }

  /*.future h2 {*/
  /*  font-size: 55px*/
  /*}*/

  .footer-grid {
    grid-template-columns: 1fr
  }

  .footer-grid>div:first-child {
    grid-column: auto
  }

  .footer-bottom {
    display: block
  }

  .footer-bottom span {
    display: block;
    margin-bottom: 10px
  }
}

@media(pointer:fine) {
  .cursor {
    display: block
  }
}

/* HERO SLIDER */
.hero-slider {
  min-height: 100vh;
  background: #171714;
  color: #f4f0e8;
  position: relative;
  overflow: hidden;
  padding: 0 6vw;
  display: flex;
  align-items: stretch
}

/* Heritage blueprint is a true full-bleed background of the first hero slide — not a foreground card. */
.hero-slider:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('assets/hero/heritage-blueprint.png');
  background-repeat: no-repeat;
  background-size: 140% auto;
  background-position: 100% 50%;
  opacity: .62;
  z-index: 0;
  pointer-events: none;
  transform: scale(1.01)
}

.hero-slider:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #171714 0%, #171714 30%, rgba(23, 23, 20, .90) 43%, rgba(23, 23, 20, .55) 62%, rgba(23, 23, 20, .18) 82%, rgba(23, 23, 20, .04) 100%), linear-gradient(180deg, rgba(23, 23, 20, .12), rgba(23, 23, 20, .38));
  z-index: 1;
  pointer-events: none
}

.hs-track {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 6vw;
  align-items: center;
  padding-top: 90px;
  padding-bottom: 54px
}

.hs-copy {
  max-width: 680px;
  position: relative;
  z-index: 3
}

.hs-kicker {
  font-size: 10px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: #c5a66d;
  margin-bottom: 28px
}

.hs-copy h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(56px, 7.6vw, 56px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.06em;
  margin: 0 0 28px
}

.hs-copy h1 em {
  font-style: italic;
  color: #c5a66d
}

.hs-copy p {
  font-size: 16px;
  line-height: 1.85;
  color: #c4c0b6;
  max-width: 570px;
  margin: 0
}

.hs-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 35px
}

.hs-btn {
  color: #f4f0e8;
  border-bottom: 1px solid #c5a66d;
  padding-bottom: 10px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase
}

.hs-counter {
  font-size: 10px;
  letter-spacing: .18em;
  color: #8f8a80
}

.hs-visual {
  height: min(760px, 86vh);
  position: relative;
  align-self: center
}

.hs-image-wrap {
  position: absolute;
  inset: 5% 0 5% 12%;
  overflow: hidden;
  background: #2b2924
}

.hs-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform 1.5s cubic-bezier(.2, .7, .2, 1), opacity .8s
}

.hs-image-wrap.blueprint-slide img {
  object-fit: cover;
  filter: saturate(.72) contrast(.96);
}

.hs-image-wrap:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .26))
}

.hs-frame {
  position: absolute;
  left: 2%;
  top: 15%;
  width: 28%;
  height: 70%;
  border: 1px solid rgba(197, 166, 109, .42);
  pointer-events: none
}

.hs-meta {
  position: absolute;
  left: 0;
  bottom: 8%;
  z-index: 3;
  background: #171714;
  padding: 18px 25px 18px 0;
  min-width: 290px
}

.hs-meta .num {
  font-size: 16px;
  letter-spacing: .28em;
  color: #c5a66d;
  text-transform: uppercase
}

.hs-meta strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 31px;
  font-weight: 400;
  margin-top: 7px
}

.hs-meta span {
  display: block;
  color: #8f8a80;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 6px
}

.hs-businesses {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end
}

.hs-business {
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #777269;
  cursor: pointer;
  transition: .3s;
  white-space: nowrap
}

.hs-business.active,
.hs-business:hover {
  color: #c5a66d
}

.hs-dots {
  position: absolute;
  right: 6vw;
  bottom: 54px;
  z-index: 5;
  display: flex;
  gap: 8px
}

.hs-dot {
  width: 28px;
  height: 2px;
  background: #5a564f;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: .3s
}

.hs-dot.active {
  background: #c5a66d;
  width: 52px
}

.hs-arrow {
  position: absolute;
  right: 6vw;
  bottom: 78px;
  z-index: 5;
  display: flex;
  gap: 8px
}

.hs-arrow button {
  width: 40px;
  height: 40px;
  border: 1px solid #49463f;
  background: transparent;
  color: #f4f0e8;
  cursor: pointer;
  transition: .3s
}

.hs-arrow button:hover {
  border-color: #c5a66d;
  color: #c5a66d
}

.hs-slide {
  display: none
}

.hs-slide.active {
  display: block
}

.hs-slide.active .hs-image-wrap img {
  animation: hsZoom 1.2s ease both
}

.hs-slide.active .hs-copy>* {
  animation: hsIn .8s ease both
}

.hs-slide.active .hs-copy h1 {
  animation-delay: .08s
}

.hs-slide.active .hs-copy p {
  animation-delay: .16s
}

.hs-slide.active .hs-actions {
  animation-delay: .24s
}

@keyframes hsZoom {
  from {
    transform: scale(1.1);
    opacity: .25
  }

  to {
    transform: scale(1.03);
    opacity: 1
  }
}

@keyframes hsIn {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media(max-width:900px) {
  .hero-slider {
    padding: 0 6vw
  }

  .hero-slider:after {
    background-size: 185% auto;
    background-position: 100% 50%;
    opacity: .48
  }

  .hs-track {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 110px
  }

  .hs-copy {
    align-self: center;
    padding-bottom: 20px
  }

  .hs-copy h1 {
    font-size: clamp(30px, 9.4vw, 48px);
  }

  .hs-visual {
    height: 58vh;
    min-height: 390px;
    margin-top: -10px
  }

  .hs-image-wrap {
    inset: 0 0 5% 10%
  }

  .hs-businesses {
    display: none
  }

  .hs-meta {
    bottom: 9%;
    min-width: 230px;
    padding-right: 15px
  }

  .hs-meta strong {
    font-size: 24px
  }

  .hs-arrow {
    right: 6vw;
    bottom: 112px
  }

  .hs-dots {
    right: auto;
    left: 6vw;
    bottom: 58px
  }

  .hero {
    min-height: auto
  }
}



/* =========================================================
   ADDED — HERITAGE TIMELINE + BUSINESS HERITAGE
   ========================================================= */
/* ================================
   HERITAGE TIMELINE
   ================================ */
/* =========================================================
   02 — THE JOURNEY / REFINED TIMELINE
   ========================================================= */

.heritage-timeline {
  background: #181613;
  color: #fff;
  min-height: 235vh;
  position: relative;
  display: grid;
  grid-template-columns: 36% 64%;
}


/* -----------------------------------------
   LEFT / STICKY CHAPTER INTRO
   ----------------------------------------- */

.timeline-sticky {
  height: 100vh;
  position: sticky;
  top: 0;

  padding: 13vh 6vw 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.timeline-heading p {
  font-size: 16px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.38);

  margin-top: 30px;
}


/* -----------------------------------------
   PROGRESS LINE
   ----------------------------------------- */

.timeline-progress {
  width: 1px;
  height: 145px;

  background: rgba(255,255,255,.14);

  margin-top: 48px;

  position: relative;
}

.timeline-progress span {
  position: absolute;

  left: 0;
  top: 0;

  width: 1px;
  height: 20%;

  background: #c69a4c;

  transition: height .5s ease;
}


/* -----------------------------------------
   RIGHT / STORY
   ----------------------------------------- */

.timeline-story {
  padding: 13vh 7vw 8vh 0;
}


/* -----------------------------------------
   CHAPTER
   ----------------------------------------- */

.chapter {
  min-height: 43vh;

  position: relative;

  border-top: 1px solid rgba(255,255,255,.13);

  padding: 22px 0 55px;

  display: grid;

  grid-template-columns: 40% 60%;

  column-gap: 38px;

  opacity: .25;

  transition:
    opacity .7s ease,
    transform .7s ease;
}

.chapter.active {
  opacity: 1;
}


/* -----------------------------------------
   CHAPTER NUMBER
   ----------------------------------------- */

.chapter-year {
  grid-column: 1 / -1;

  font-size: 14px;

  letter-spacing: .22em;

  color: #c69a4c;

  margin-bottom: 32px;
}


/* -----------------------------------------
   DATE
   ----------------------------------------- */

.chapter-content .chapter-date {
  font-size: 16px;

  letter-spacing: .18em;

  color: rgba(255,255,255,.38);
}


/* -----------------------------------------
   TITLE
   ----------------------------------------- */

.chapter-content h3 {
  font-family: "Playfair Display", Georgia, serif !important;

  font-weight: 400 !important;

  font-size: clamp(45px, 4.5vw, 67px) !important;

  line-height: .86 !important;

  letter-spacing: -.05em !important;

  margin-top: 15px !important;

  margin-bottom: 0 !important;
}

.chapter-content h3 em {
  font-family: "Playfair Display", Georgia, serif !important;

  font-style: italic !important;

  font-weight: 400 !important;

  color: #c69a4c !important;
}


/* -----------------------------------------
   DESCRIPTION
   ----------------------------------------- */

.chapter-content p {
  font-size: 10px;

  line-height: 1.8;

  color: rgba(255,255,255,.46);

  max-width: 290px;

  margin-top: 20px;
}


/* -----------------------------------------
   IMAGE
   ----------------------------------------- */

.chapter-image {
  height: 300px;

  background-size: cover;

  background-position: center;

  filter: sepia(.12) grayscale(.18);

  transition:
    transform 1s ease,
    filter 1s ease;
}

.chapter.active .chapter-image {
  filter: sepia(.08) grayscale(.05);
}


/* -----------------------------------------
   EXISTING IMAGE SOURCES
   ----------------------------------------- */

.archive-one {
  background-image:
    linear-gradient(
      rgba(20,18,14,.08),
      rgba(20,18,14,.08)
    ),
    url("https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1100&q=88");
}

.archive-two {
  background-image:
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1100&q=88");
}

.archive-three {
  background-image:
    url("https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1100&q=88");
}

.archive-four {
  background-image:
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1100&q=88");
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .heritage-timeline {
    min-height: auto;

    display: block;
  }

  .timeline-sticky {
    height: auto;

    position: relative;

    padding: 90px 7vw 50px;
  }

  .timeline-progress {
    display: none;
  }

  .timeline-story {
    padding: 0 7vw 80px;
  }

  .chapter {
    min-height: auto;

    grid-template-columns: 1fr;

    row-gap: 30px;

    padding: 30px 0 65px;
  }

  .chapter-year {
    margin-bottom: 0;
  }

  .chapter-image {
    height: 320px;

    grid-row: auto;
  }
}


@media (max-width: 600px) {

  .timeline-sticky {
    padding: 75px 6vw 45px;
  }

  .timeline-heading h2 {
    font-size: clamp(48px, 13vw, 65px);
  }

  .timeline-story {
    padding: 0 6vw 60px;
  }

  .chapter {
    padding: 25px 0 55px;
  }

  .chapter-content h3 {
    font-size: clamp(45px, 13vw, 60px) !important;
  }

  .chapter-content p {
    max-width: 100%;
  }

  .chapter-image {
    height: 260px;
  }
}
/* =========================================================
   03 — OUR BUSINESSES
   ========================================================= */

.business-heritage {
  background: var(--paper);
  color: var(--ink);

  padding: 125px 8.5vw 120px;

  position: relative;
  overflow: hidden;
}


/* -----------------------------------------
   HEADER
   ----------------------------------------- */

.business-header {
  max-width: 1180px;
  margin: 0 auto 40px;
}

.business-kicker {
  padding-bottom: 55px;

  border-bottom: 1px solid rgba(20, 20, 18, .14);
}

.business-kicker .eyebrow {
  color: var(--gold);
}

.business-header-main {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: 9vw;
  padding-top: 0px;
}

.business-header-main p {
  max-width: 430px;

  padding-top: 12px;

  margin: 0;

  font-size: 16px;

  line-height: 1.8;

  color: #68645d;
}


/* -----------------------------------------
   BUSINESS LIST
   ----------------------------------------- */

.business-list {
  max-width: 1180px;

  margin: 0 auto;

  border-top: 1px solid rgba(20, 20, 18, .18);
}


/* -----------------------------------------
   ROW
   ----------------------------------------- */

.business-row {
  min-height: 75px;

  position: relative;

  display: grid;

  grid-template-columns: 0px 1fr 190px 45px;

  align-items: center;

  gap: 25px;

  border-bottom: 1px solid rgba(20, 20, 18, .16);

  color: var(--ink);

  text-decoration: none;

  transition:
    padding .5s ease,
    background .5s ease;
}

.business-row:hover {
  padding-left: 18px;
}


/* -----------------------------------------
   NUMBER
   ----------------------------------------- */

.business-number {
  align-self: center;

  font-size: 16px;

  letter-spacing: .16em;

  color: var(--gold);
}


/* -----------------------------------------
   NAME + DESCRIPTION
   ----------------------------------------- */

.business-name {
  position: relative;

  z-index: 2;
}

.business-name h3 {
  margin: 0;

  font-size: clamp(26px, 1.8vw, 30px);

  line-height: 1;

  font-weight: 400;

  transition:
    transform .45s ease,
    color .45s ease;
}

.business-row:hover .business-name h3 {
  transform: translateX(5px);

  color: var(--gold);
}

.business-name p {
  max-width: 390px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #706c64;
  transition:
    max-height .45s ease,
    opacity .4s ease,
    margin .4s ease;
  display: none;    
}

.business-row:hover .business-name p {
  max-height: 70px;

  opacity: 1;

  margin-top: 12px;
}


/* -----------------------------------------
   CATEGORY
   ----------------------------------------- */

.business-category {
  font-size: 14px;

  letter-spacing: .2em;

  color: #88837a;

  white-space: nowrap;

  transition: color .4s ease;
}

.business-row:hover .business-category {
  color: var(--gold);
}


/* -----------------------------------------
   ARROW
   ----------------------------------------- */

.business-arrow {
  justify-self: end;

  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(20,20,18,.18);

  border-radius: 50%;

  color: var(--gold);

  font-size: 16px;

  transition:
    transform .45s ease,
    background .45s ease,
    color .45s ease;
}

.business-row:hover .business-arrow {
  transform: translate(3px, -3px);

  background: var(--ink);

  color: var(--paper);
}


/* -----------------------------------------
   IMAGE REVEAL
   ----------------------------------------- */

.business-image {
  position: absolute;

  width: 245px;
  height: 165px;

  right: 85px;
  top: 50%;

  transform:
    translate(20px, -50%)
    scale(.94);

  opacity: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 5;

  box-shadow: 0 20px 55px rgba(0,0,0,.14);

  transition:
    opacity .45s ease,
    transform .55s cubic-bezier(.2,.7,.2,1);
}

.business-row:hover .business-image {
  opacity: 1;

  transform:
    translate(0, -50%)
    scale(1);
}

.business-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  filter: saturate(.8);

  transition: transform .8s ease;
}

.business-row:hover .business-image img {
  transform: scale(1.04);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .business-row {
    grid-template-columns: 0px 1fr 170px 40px;
  }

  .business-image {
    display: none;
  }

}


@media (max-width: 750px) {

  .business-heritage {
    padding: 90px 7vw 80px;
  }

  .business-header {
    margin-bottom: 20px;
  }

  .business-header-main {
    grid-template-columns: 1fr;

    gap: 5px;

    /*padding-top: 55px;*/
  }

  .business-header-main h2 {
    font-size: clamp(35px, 10vw, 72px);
  }

  .business-header-main p {
    max-width: 550px;
  }

  .business-row {
    min-height: 100px;

    grid-template-columns: 35px 1fr 35px;

    gap: 15px;
  }

  .business-category {
    display: none;
  }

  .business-name p {
    display: none;
  }

  .business-row:hover {
    padding-left: 8px;
  }
  
  .section-title {
      font-size: 35px;
  }
  
  .portfolio-label h3 {
      font-size: 30px;
  }

}


@media (max-width: 480px) {

  .business-heritage {
    padding: 75px 6vw 65px;
  }

  .business-kicker {
    padding-bottom: 35px;
  }

  .business-header-main {
    padding-top: 0px;
  }

  .business-row {
    min-height: 80px;

    grid-template-columns: 28px 1fr 32px;

    gap: 10px;
  }

  .business-number {
    font-size: 14px;
  }

  .business-name h3 {
    font-size: 26px;
  }

  .business-arrow {
    width: 27px;
    height: 27px;

    font-size: 14px;
  }

}

/* ================================
   RESPONSIVE
   ================================ */

@media(max-width:900px) {

  .heritage-timeline {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .timeline-sticky {
    height: auto;
    position: relative;
    padding: 90px 7vw 40px;
  }

  .timeline-progress {
    display: none;
  }

  .timeline-story {
    padding: 20px 7vw 80px;
  }

  .chapter {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-bottom: 80px;
  }

  .chapter-image {
    margin-top: 35px;
    height: 340px;
  }

  .business-heritage-head {
    display: block;
  }

  .business-heritage-head p {
    margin-top: 25px;
  }
}

@media(max-width:600px) {

  .business-heritage {
    padding: 90px 0;
  }

  .business-heritage-head h2 {
    font-size: 53px;
  }

  .business-row {
    grid-template-columns: 35px 1fr 30px;
    min-height: 75px;
  }

  .business-row small {
    display: none;
  }
}

.chapter {
  min-height: 70vh;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: 25px 0 90px;
  display: grid;
  grid-template-columns: 40% 60%;
  column-gap: 40px;
  opacity: .28;
  transition: .7s
}

.chapter.active {
  opacity: 1
}

.chapter-year {
  grid-column: 1/-1;
  font-size: 16px;
  letter-spacing: .2em;
  color: #c69a4c;
  margin-bottom: 50px
}

.chapter-content .chapter-date {
  font-size: 16px;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .38)
}

.chapter-content h3 {
  font: 400 clamp(48px, 5vw, 73px)/.83 var(--serif);
  margin-top: 18px
}

.chapter-content h3 em {
  font-style: italic;
  color: #c69a4c
}

.chapter-content p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .48);
  max-width: 330px;
  margin-top: 25px
}

.chapter-image {
  height: 360px;
  background-size: cover;
  background-position: center;
  filter: sepia(.15) grayscale(.2);
  transition: 1s
}

.archive-one {
  background-image: linear-gradient(rgba(20, 18, 14, .1), rgba(20, 18, 14, .1)), url("https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1100&q=88")
}

.archive-two {
  background-image: url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1100&q=88")
}

.archive-three {
  background-image: url("https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1100&q=88")
}

.archive-four {
  background-image: url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1100&q=88")
}

.business-heritage {
  background: #e9e3d8
}

.business-heritage-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px
}

.business-heritage-head h2 {
  font: 400 clamp(58px, 6vw, 86px)/.83 var(--serif);
  margin-top: 17px;
  letter-spacing: -.05em
}

.business-heritage-head h2 em {
  font-style: italic;
  color: #a8792e
}

.business-heritage-head p {
  max-width: 350px;
  font-size: 16px;
  line-height: 1.8;
  color: #726b61
}

.business-stack {
  border-top: 1px solid rgba(17, 17, 15, .18)
}

.business-row {
  min-height: 75px;
  border-bottom: 1px solid rgba(17, 17, 15, .18);
  display: grid;
  grid-template-columns: 0px 1fr 1fr 45px;
  align-items: center;
  transition: .4s
}

.business-row:hover {
  padding-left: 20px;
  background: #eee9df
}

.business-row>span {
  font-size: 16px;
  color: #a8792e
}

.business-row strong {
  font: 400 33px/1 var(--serif)
}

.business-row small {
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #81786d
}

.business-row b {
  font-size: 18px;
  font-weight: 400;
  color: #a8792e
}

@media(max-width:900px) {
  .heritage-timeline {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .timeline-sticky {
    height: auto;
    position: relative;
    padding: 90px 7vw 40px
  }

  .timeline-progress {
    display: none
  }

  .timeline-story {
    padding: 20px 7vw 80px
  }

  .chapter {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-bottom: 80px
  }

  .chapter-image {
    margin-top: 35px;
    height: 340px
  }

  .business-heritage-head {
    display: block
  }

  .business-heritage-head p {
    margin-top: 25px
  }
}

@media(max-width:600px) {
  .business-heritage {
    padding: 90px 0
  }

  .business-heritage-head h2 {
    font-size: 53px
  }

  .business-row {
    grid-template-columns: 0px 1fr 30px;
    min-height: 80px
  }

  .business-row small {
    display: none
  }
}



.group-intro {
  background: var(--paper);
  color: var(--ink);
  padding: 120px 8.5vw 85px;
  position: relative;
  overflow: hidden;
}

.group-intro-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 55px;
  border-bottom: 1px solid rgba(20, 20, 18, 0.14);
}

.group-intro .eyebrow {
  color: var(--gold);
}

.group-intro-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  font-size: 16px;
  letter-spacing: .24em;
  color: #77736b;
}

.group-intro-main {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 9vw;
  padding: 85px 0 110px;
}


.group-intro-copy {
  max-width: 520px;
  padding-top: 12px;
}

.group-intro-copy p {
  font-size: 16px;
  line-height: 1.8;
  color: #66635d;
  margin: 0 0 25px;
}

.group-intro-copy p.lead {
  font-size: 20px;
  line-height: 1.6;
  color: #282723;
  margin-bottom: 25px;
}

.group-intro-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 25px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(20, 20, 18, .35);
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: .2em;
  transition: all .3s ease;
}

.group-intro-link .arrow {
  color: var(--gold);
  font-size: 17px;
  line-height: 1;
  transition: transform .3s ease;
}

.group-intro-link:hover {
  border-color: var(--gold);
}

.group-intro-link:hover .arrow {
  transform: translate(4px, 4px);
}

.group-intro-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(20, 20, 18, 0.14);
}

.group-stat {
  padding: 28px 25px 5px 0;
  border-right: 1px solid rgba(20, 20, 18, 0.14);
}

.group-stat:not(:first-child) {
  padding-left: 28px;
}

.group-stat:last-child {
  border-right: 0;
}

.group-stat strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
}

.group-stat span {
  display: block;
  font-size: 14px;
  letter-spacing: .22em;
  color: var(--gold);
}



/* =========================================================
   MOBILE MENU — OPEN STATE
   ========================================================= */

@media (max-width: 1180px) {

  .nav.menu-open {
    background: var(--paper);
  }

  .nav.menu-open .main-nav {
    display: block !important;

    position: fixed;

    top: 82px;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: calc(100vh - 82px);

    background: var(--paper);

    overflow-y: auto;

    padding: 20px 5vw 40px;

    border-top: 1px solid var(--line);

    z-index: 999;
  }


  /* MOBILE UL */

  .nav.menu-open .nav-list {
    display: flex;

    width: 100%;

    flex-direction: column;
    align-items: stretch;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
  }


  /* MOBILE LI */

  .nav.menu-open .nav-item {
    width: 100%;
    height: auto;

    display: block;

    border-bottom: 1px solid var(--line);
  }


  /* MOBILE LINKS */

  .nav.menu-open .nav-item > a {
    display: flex;
    width: 100%;
    height: auto;
    padding: 22px 0;
    align-items: center;
    justify-content: space-between;
    color: var(--ink);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }


  /* remove desktop underline */

  .nav.menu-open .nav-item > a::after {
    display: none;
  }


  /* HAMBURGER → X */

  .nav.menu-open .menu span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav.menu-open .menu span:nth-child(2) {
    width: 0;
    opacity: 0;
  }

  .nav.menu-open .menu span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }


  /* MEGA MENU — MOBILE ACCORDION */

  .nav.menu-open .nav-item-mega {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .nav.menu-open .nav-item-mega .mega-trigger {
    width: auto;
    flex: 1 1 auto;
  }

  .mega-caret {
    display: none;
  }

  .mega-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);

    cursor: pointer;
  }

  .mega-toggle svg {
    width: 10px;
    height: 7px;
    transition: transform .3s ease;
  }

  .nav-item-mega.mega-open .mega-toggle {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
  }

  .nav-item-mega.mega-open .mega-toggle svg {
    transform: rotate(180deg);
  }

  .mega-menu {
    position: static;
    flex: 1 0 100%;

    border-radius: 0;

    height: auto;
    max-height: 0;
    overflow: hidden;
    clip-path: none;

    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;

    background: transparent;
    border: 0;
    box-shadow: none;

    transition: max-height .4s ease;
  }

  .nav-item-mega.mega-open .mega-menu {
    clip-path: none;
  }

  .nav-item-mega.mega-open .mega-menu {
    max-height: 900px;
  }

  .mega-menu-inner {
    flex-direction: column;
    padding: 2px 0 10px;
  }

  .mega-col {
    flex: 1 1 auto;
    gap: 12px;
    padding: 16px 2px;
    border-bottom: 1px solid var(--line);
  }

  .mega-icon svg {
    width: 17px;
    height: 17px;
  }

  .mega-col-title {
    font-size: 15px;
  }

  .mega-col-subcategory {
    padding: 4px 0;
    font-size: 14px;
  }

  .mega-menu-footer {
    border-top: 0;
  }

  .mega-menu-cta {
    justify-content: flex-start;
    padding: 6px 2px 20px;
  }

}


/* =========================================================
   FINAL PADDING / RESPONSIVE GUTTER NORMALIZATION
   Keep this block at the very end of the stylesheet.
   ========================================================= */

@media (min-width: 901px) {
  .nav {
    padding-left: 5.2vw;
    padding-right: 5.2vw;
  }

  .hero {
    padding-left: 5.2vw;
    padding-right: 5.2vw;
  }

  .section,
  .manifesto,
  .future-copy,
  .footer {
    padding-left: 8.5vw;
    padding-right: 8.5vw;
  }

  .hero-slider {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .business-heritage {
    padding-left: 8.5vw;
    padding-right: 8.5vw;
  }

  .timeline-sticky,
  .timeline-story {
    padding-left: 8.5vw;
    padding-right: 8.5vw;
  }

  .group-intro {
    padding-left: 8.5vw;
    padding-right: 8.5vw;
  }
}


/* TABLET */

@media (max-width: 900px) {

  .nav {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .hero {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .hero-slider {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .section,
  .manifesto,
  .future-copy,
  .footer {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .business-heritage {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .timeline-sticky,
  .timeline-story {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .group-intro {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  /* Mobile menu uses the same header gutter. */
  .nav.menu-open .main-nav {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}


/* MOBILE */

@media (max-width: 600px) {

  .nav {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .brand-logo {
    height: 55px;
  }

  .hero {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .hero-slider {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .section,
  .manifesto,
  .future-copy,
  .footer {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .business-heritage {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .timeline-sticky,
  .timeline-story {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .group-intro {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .group-intro-top {
    padding-bottom: 40px;
  }

  .group-intro-main {
    padding-top: 55px;
    padding-bottom: 70px;
  }

  .group-stat {
    padding-right: 15px;
  }

  .group-stat:not(:first-child) {
    padding-left: 15px;
  }

  /* Mobile menu panel */
  .nav.menu-open .main-nav {
    padding: 20px 6vw 40px;
  }

  .nav.menu-open .nav-item > a {
    padding: 21px 0;
  }
}


/* SMALL PHONES */

@media (max-width: 480px) {

  .nav {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .hero,
  .hero-slider,
  .section,
  .manifesto,
  .future-copy,
  .footer,
  .business-heritage,
  .timeline-sticky,
  .timeline-story,
  .group-intro {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .nav.menu-open .main-nav {
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .future-copy {
    padding: 75px 8.5vw;
}
}
/* =========================================================
   SCROLL TO TOP
   ========================================================= */

.scroll-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 900;

  width: 54px;
  height: 54px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  padding: 0;
  border: 1px solid rgba(21,21,18,.18);
  border-radius: 50%;

  background: rgba(244,240,232,.94);
  color: var(--ink);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);

  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .35s ease,
    background .3s ease,
    border-color .3s ease;
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top span {
  display: block;
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
}

.scroll-top small {
  display: block;
  font-size: 7px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.scroll-top:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}


/* Mobile */

@media (max-width: 600px) {
  .scroll-top {
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
  }

  .scroll-top span {
    font-size: 15px;
  }

  .scroll-top small {
    font-size: 6px;
  }
}


/* =========================================================
   02 — IN MOTION (VIDEO SHOWCASE)
   ========================================================= */

.video-showcase {
  background: var(--paper);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 45px;
}

.video-card {
  position: relative;
  aspect-ratio: 4 / 4;
  overflow: hidden;
  background: #14140f;
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.video-card:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .78) 100%);
  pointer-events: none;
}

.video-caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
}

.video-caption small {
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--gold2);
}

.video-caption span {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
}


@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 46px;
  }
}

@media (max-width: 600px) {
  .video-grid {
    grid-template-columns: 1fr;
  }

  .video-card {
    aspect-ratio: 16 / 11;
  }
}


/* =========================================================
   06 — LEADERSHIP: ONE-PERSON-PER-SCREEN STAGE
   ========================================================= */

.leaders-stage {
  position: relative;
  margin-top: 72px;
}

.leaders-pin {
  border-top: 1px solid #ffffff1f;
  border-bottom: 1px solid #ffffff1f;
}

.leaders-track {
  will-change: transform;
  transition: transform .85s cubic-bezier(.65, 0, .35, 1);
}

.leader-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 6vw;
  padding: 0 1vw;
  overflow: hidden;
}

.leader-panel-bg-num {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(160px, 22vw, 320px);
  line-height: 1;
  color: rgba(255, 255, 255, .035);
  pointer-events: none;
  user-select: none;
}

.leader-panel-media {
  position: relative;
  z-index: 1;
  height: 76%;
  max-height: 620px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-60px) scale(1.06);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.leader-panel.is-active .leader-panel-media {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.leader-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.75);
  transition: filter 1.2s ease, transform 1.2s ease;
}

.leader-panel.is-active .leader-panel-media img {
  filter: grayscale(.08);
}

.leader-panel-media:hover img {
  transform: scale(1.045);
}

.leader-panel-content {
  position: relative;
  z-index: 1;
  max-width: 470px;
  max-height: 78vh;
  max-height: 78svh;
  overflow-y: auto;
  padding-right: 10px;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .9s ease .15s, transform .9s ease .15s;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.leader-panel-content::-webkit-scrollbar {
  width: 4px;
}

.leader-panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .25);
  border-radius: 2px;
}

.leader-panel.is-active .leader-panel-content {
  opacity: 1;
  transform: none;
}

.leader-panel-num {
  display: block;
  margin-bottom: 22px;
  font-size: 14px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold2);
}

.leader-panel-content h3 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--paper);
}

.leader-panel-role {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold2);
}

.leader-panel-content p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
  color: #aaa69d;
}

.leaders-dots {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.leaders-dot {
  width: 34px;
  height: 34px;
  border: 1px solid #ffffff30;
  background: transparent;
  color: #c8c4ba;
  font-size: 11px;
  letter-spacing: .05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.leaders-dot.active {
  border-color: var(--gold2);
  background: var(--gold2);
  color: var(--dark);
}

.leaders-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #a9a59c;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  transition: opacity .5s ease;
}

.leaders-hint i {
  width: 1px;
  height: 26px;
  background: linear-gradient(#a9a59c, transparent);
  animation: leaderHintMove 1.6s ease-in-out infinite;
}

.leaders-stage.scrolled .leaders-hint {
  opacity: 0;
  pointer-events: none;
}

@keyframes leaderHintMove {
  0%, 100% { transform: translateY(0); opacity: 1 }
  50% { transform: translateY(10px); opacity: .4 }
}

/*
 * Below 901px the pinned "one scroll = one person" mechanic is switched
 * off entirely (see the matching matchMedia("(min-width:901px)") check in
 * main.js) — .leaders-stage collapses back into a normal, ordinary block
 * so the 4 leaders just stack and scroll like any other section.
 */

@media (min-width: 901px) {
  .leaders-stage {
    height: calc(100vh + 400px);
    height: calc(100svh + 400px);
  }

  .leaders-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }

  .leader-panel {
    height: 100vh;
    height: 100svh;
  }
}

@media (max-width: 900px) {
  .leaders-stage {
    height: auto;
  }

  .leaders-pin {
    position: static;
    height: auto;
    overflow: visible;
  }

  .leaders-track {
    transform: none !important;
  }

  .leader-panel {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 20px;
    padding: 56px 6vw;
    border-bottom: 1px solid #ffffff1f;
  }

  .leader-panel:last-child {
    border-bottom: none;
  }

  .leader-panel-media,
  .leader-panel.is-active .leader-panel-media {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: none;
    opacity: 1 !important;
    transform: none !important;
  }

  .leader-panel-media img,
  .leader-panel.is-active .leader-panel-media img {
    object-position: top center;
    filter: grayscale(.08);
  }

  .leader-panel-content,
  .leader-panel.is-active .leader-panel-content {
    max-width: 100%;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    opacity: 1 !important;
    transform: none !important;
  }

  .leader-panel-bg-num {
    top: 20px;
    transform: none;
    font-size: 90px;
  }

  .leaders-dots,
  .leaders-hint {
    display: none;
  }
}

@media (max-width: 600px) {
  .leader-panel {
    padding: 46px 6vw;
    gap: 16px;
  }

  .leader-panel-media {
    aspect-ratio: 3 / 4;
  }

  .leader-panel-content h3 {
    font-size: 26px;
  }

  .leader-panel-role {
    margin-top: 10px;
    font-size: 12px;
  }

  .leader-panel-content p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
  }

  .leader-panel-num {
    margin-bottom: 12px;
  }
}

/* =========================================================
   ABOUT US
   ========================================================= */

.about {
  background: var(--paper2);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

@media (min-width: 901px) {
  .about {
    max-height: 100vh;
    overflow: hidden;
  }
}

.about-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 7vw;
  align-items: center;
  width: 100%;
}

.about-visual {
  position: relative;
}

.about-frame {
  position: relative;
  z-index: 1;
  height: min(520px, 62vh);
  overflow: hidden;
  background: #ddd;
}

.about-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .65, .2, 1);
}

.about-visual:hover .about-frame img {
  transform: scale(1.045);
}

.about-outline {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 55%;
  height: 100%;
  border: 1px solid var(--gold);
  z-index: 0;
}

.about-badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.about-badge strong {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.about-badge span {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold2);
}

.about-copy {
  max-width: 560px;
}

.about-copy .section-copy {
  max-width: 100%;
  margin-top: 20px;
}

.about-quote {
  margin: 26px 0 0;
  padding-left: 20px;
  max-width: 460px;
  border-left: 2px solid var(--gold);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}

.about-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.about-stat {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.about-stat:before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold);
}

.about-stat strong {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
}

.about-stat span {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #777168;
}

.about-copy .line-btn {
  margin-top: 36px;
}

@media (max-width: 900px) {

  .about-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .about-frame {
    height: 380px;
  }

  .about-outline {
    display: none;
  }

}

@media (max-width: 600px) {

  .about {
    min-height: auto;
  }

  .about-frame {
    height: 300px;
  }

  .about-badge {
    padding: 13px 18px;
  }

  .about-badge strong {
    font-size: 18px;
  }

  .about-quote {
    margin-top: 20px;
    font-size: 16px;
  }

  .about-stats {
    gap: 24px;
    margin-top: 26px;
    padding-top: 20px;
  }

  .about-stat strong {
    font-size: 23px;
  }

  .about-copy .line-btn {
    margin-top: 28px;
  }

}

/* =========================================================
   CONTACT US
   ========================================================= */

.contact-us {
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 7vw;
  align-items: center;
  width: 100%;
}

.contact-info {
  max-width: 520px;
}

.contact-info .section-copy {
  max-width: 100%;
  margin-top: 20px;
}

.contact-cards {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: padding-left .35s ease;
}

a.contact-card:hover {
  padding-left: 8px;
}

a.contact-card:hover .contact-card-icon {
  border-color: var(--gold);
  color: var(--gold);
}

.contact-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  transition: border-color .3s ease, color .3s ease;
}

.contact-card-icon svg {
  width: 16px;
  height: 16px;
}

.contact-card-label {
  flex-shrink: 0;
  width: 62px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #88837a;
}

.contact-card-value {
  font-size: 15px;
  font-weight: 500;
}

.contact-form {
  background: var(--paper2);
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border: 1px solid var(--line);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #777168;
}

.form-field input,
.form-field textarea {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 8px 2px;
  font: 400 15px 'DM Sans', sans-serif;
  color: var(--ink);
  resize: vertical;
  transition: border-color .3s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #a19c90;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.form-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding-bottom: 10px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}

.form-submit i {
  font-style: normal;
  color: var(--gold);
  font-size: 15px;
  transition: transform .3s ease;
}

.form-submit:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.form-submit:hover i {
  transform: translate(3px, 3px);
}

.form-note {
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--gold);
  min-height: 14px;
  margin: -8px 0 0;
}

@media (max-width: 900px) {

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-form {
    padding: 34px;
  }

}

@media (max-width: 600px) {

  .contact-us {
    min-height: auto;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-form {
    padding: 26px 22px;
    gap: 18px;
  }

  .contact-cards {
    margin-top: 28px;
  }

  .contact-card {
    padding: 15px 0;
  }

  .contact-card-icon {
    width: 34px;
    height: 34px;
  }

  .contact-card-value {
    font-size: 14px;
  }

}


/* =========================================================
   CONTACT — HIGHLIGHTS
   ========================================================= */

.contact-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--paper2);
  border-bottom: 1px solid var(--line);
}

.ch-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px 8.5vw;
  border-left: 1px solid var(--line);
}

.ch-item:first-child {
  border-left: 0;
}

.ch-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(165, 125, 61, .1);
  border: 1px solid rgba(165, 125, 61, .3);
  color: var(--gold);
}

.ch-icon svg {
  width: 20px;
  height: 20px;
}

.ch-item strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.ch-item span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #88837a;
}

@media (max-width: 900px) {
  .contact-highlights {
    grid-template-columns: 1fr;
  }

  .ch-item {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 22px 6vw;
  }

  .ch-item:first-child {
    border-top: 0;
  }
}


/* =========================================================
   CONTACT — MAP
   ========================================================= */

.contact-map {
  background: #e3ddd1;
}

.contact-map .section-head {
  margin-bottom: 0;
}

.contact-map .section-copy {
  margin-top: 0;
}

.map-wrap {
  position: relative;
  margin-top: 30px;
}

.map-frame {
  height: 380px;
  border: 1px solid var(--line);
  overflow: hidden;
  filter: grayscale(.2) contrast(1.02);
  transition: filter .5s ease;
}

@media (min-width: 901px) {
  .contact-map.section {
    padding: 48px 8.5vw !important;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
}

.map-wrap:hover .map-frame {
  filter: grayscale(0);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.map-card {
  position: absolute;
  left: 40px;
  bottom: 40px;
  z-index: 2;
  width: 280px;
  background: var(--white);
  border-left: 3px solid var(--gold);
  padding: 26px 28px;
  box-shadow: 0 30px 60px -24px rgba(21, 21, 18, .45);
}

.map-card-kicker {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: var(--ink);
}

.map-card p {
  margin: 8px 0 16px;
  font-size: 13px;
  color: #68635a;
}

.map-card-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-bottom: 18px;
}

.map-card-row b {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.map-card-row span {
  font-size: 13px;
  color: var(--ink);
}

.map-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  transition: color .3s ease, border-color .3s ease;
}

.map-card-btn i {
  font-style: normal;
  color: var(--gold);
  font-size: 15px;
  transition: transform .3s ease;
}

.map-card-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.map-card-btn:hover i {
  transform: translate(3px, 3px);
}

@media (max-width: 900px) {
  .contact-map .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media (max-width: 700px) {
  .map-frame {
    height: 320px;
  }

  .map-card {
    position: static;
    width: auto;
    margin-top: 20px;
    box-shadow: none;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
  }
}

@media (max-width: 600px) {
  .map-wrap {
    margin-top: 32px;
  }
}


/* =========================================================
   LEGACY — TIMELINE
   ========================================================= */

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 32px;
  margin-top: 40px;
}

.timeline-item {
  position: relative;
  padding-top: 20px;
  border-top: 2px solid var(--gold);
}

.timeline-year {
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--gold);
  margin-bottom: 8px;
}

.timeline-item h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink);
}

.timeline-item p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #5d5950;
  margin: 0;
}

@media (max-width: 900px) {
  .timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 28px;
  }
}

@media (max-width: 600px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 32px;
  }
}


/* =========================================================
   ORIGIN STATEMENT (typographic block, no image)
   ========================================================= */

.origin-statement {
  background: var(--paper2);
}

@media (min-width: 901px) {
  .origin-statement.section {
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
}

.origin-statement-inner {
  max-width: 820px;
}

.origin-heading {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.4;
  font-weight: 400;
  margin: 20px 0 24px;
  color: var(--ink);
}

.origin-heading em {
  color: var(--gold);
  font-style: italic;
}

.origin-statement .section-copy {
  max-width: 100%;
}

.origin-statement .line-btn {
  margin-top: 30px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: #5d5950;
  background: var(--white);
}

.chip strong {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  line-height: 1;
  color: var(--gold);
}

@media (max-width: 600px) {
  .origin-heading {
    margin-top: 16px;
  }

  .chip-row {
    gap: 10px;
  }

  .chip {
    padding: 9px 16px;
  }
}


/* =========================================================
   STAT BAND (dark full-width numeric strip)
   ========================================================= */

.bento-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 40px;
}

.bento-main {
  grid-column: 1;
  grid-row: 1 / 3;
  background: var(--white);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bento-main .section-copy {
  max-width: 100%;
  margin-top: 16px;
}

.bento-stat {
  background: var(--paper2);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background .3s ease;
}

.bento-stat:hover {
  background: var(--white);
}

.bento-stat strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  color: var(--gold);
}

.bento-stat span {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #88837a;
}

@media (min-width: 901px) {
  #overview.section {
    padding: 48px 8.5vw !important;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bento-main {
    grid-column: 1 / 3;
    grid-row: 1;
  }
}

@media (max-width: 600px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-main {
    grid-column: 1;
  }

  .bento-main,
  .bento-stat {
    padding: 30px 26px;
  }
}


/* =========================================================
   LEDGER (editorial row list)
   ========================================================= */

.ledger {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 40px;
}

.ledger-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--paper);
  padding: 30px 22px;
  border-top: 3px solid transparent;
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}

.ledger-row:hover {
  background: var(--white);
  border-top-color: var(--gold);
  transform: translateY(-4px);
}

.ledger-index {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 24px;
  color: var(--gold);
}

.ledger-body {
  margin-top: 14px;
}

.ledger-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.3;
}

.ledger-body p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #68635a;
  max-width: none;
}

.ledger-tag {
  margin-top: 16px;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #88837a;
}

@media (min-width: 901px) {
  #verticals.section {
    padding: 48px 8.5vw !important;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width: 900px) {
  .ledger {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ledger {
    grid-template-columns: 1fr;
  }

  .ledger-row {
    padding: 26px 22px;
  }
}


/* =========================================================
   QUOTE PANEL (full-bleed image, centered statement)
   ========================================================= */

.quote-panel {
  position: relative;
  min-height: 68vh;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1d1c18;
  color: #fff;
  text-align: center;
}

.quote-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.38) saturate(.7);
}

.quote-panel:after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 80% at 50% 40%, transparent, rgba(0, 0, 0, .6));
}

.quote-panel-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 60px 8.5vw;
}

.quote-panel .kicker {
  display: block;
  text-align: center;
  color: var(--gold2);
}

.quote-panel blockquote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.4;
  font-weight: 400;
  margin: 18px 0 22px;
}

.quote-panel p {
  font-size: 15px;
  line-height: 1.85;
  color: #ddd8ce;
  max-width: 620px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .quote-panel {
    min-height: 56vh;
  }
}


/* =========================================================
   PLAIN CTA (centered, no image)
   ========================================================= */

.cta-plain {
  background: var(--paper2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cta-plain-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 56px 8.5vw;
}

.cta-plain-text {
  max-width: 640px;
}

.cta-plain-text .section-title {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.25;
  margin-top: 8px;
}

.cta-plain-text p {
  max-width: 100%;
  margin: 12px 0 0;
  color: #5d5950;
  font-size: 15px;
  line-height: 1.75;
}

.cta-plain .line-btn {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .cta-plain-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 50px 6vw;
  }
}


/* =========================================================
   LEADERSHIP — ZIGZAG MEMBER BLOCKS
   ========================================================= */

.leader-block:nth-child(odd) {
  background: var(--paper);
}

.leader-block:nth-child(even) {
  background: var(--paper2);
}

.leader-zigzag {
  display: flex;
  align-items: center;
  gap: 6vw;
}

.leader-block.reverse .leader-zigzag {
  flex-direction: row-reverse;
}

.leader-photo,
.leader-info {
  flex: 1;
  min-width: 0;
}

.leader-photo {
  position: relative;
}

.leader-photo-outline {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 55%;
  height: 100%;
  border: 1px solid var(--gold);
  z-index: 0;
}

.leader-photo-frame {
  position: relative;
  z-index: 1;
  height: 82vh;
  overflow: hidden;
  /* background: #ddd; */
}

.leader-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .65, .2, 1);
}

.leader-photo:hover .leader-photo-frame img {
  transform: scale(1.045);
}

.leader-photo-badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leader-photo-badge strong {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.leader-photo-badge span {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold2);
}

.leader-info {
  max-width: 560px;
}

.leader-info .section-title {
  margin-top: 12px;
}

.leader-role {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #88837a;
}

.leader-info .section-copy {
  max-width: 100%;
  margin-top: 14px;
}

.leader-info .section-copy + .section-copy {
  margin-top: 10px;
}

.leader-info .chip-row {
  margin-top: 20px;
}

.leader-info .chip {
  padding: 8px 16px;
}

.leader-info .read-more-btn {
  margin-top: 0px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
  padding: 0 0 10px;
}

@media (min-width: 901px) {
  .leader-block.section {
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 900px) {
  .leader-zigzag,
  .leader-block.reverse .leader-zigzag {
    flex-direction: column;
    align-items: stretch;
  }

  .leader-photo-outline {
    display: none;
  }

  .leader-photo-frame {
    height: 100%;
  }

  .leader-info {
    max-width: 100%;
  }
}

@media (max-width: 600px) {

  .leader-photo-badge {
    padding: 12px 16px;
  }
}


/* =========================================================
   MEMBER MODAL
   ========================================================= */

.member-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.member-modal.is-open {
  display: flex;
}

.member-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 18, .72);
  backdrop-filter: blur(3px);
}

.member-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--white);
  border-top: 3px solid var(--gold);
  padding: 50px;
}

.member-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s ease, color .3s ease;
}

.member-modal-close:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.member-modal-header {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.member-modal-header img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.member-modal-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  font-weight: 400;
  margin: 6px 0 6px;
  color: var(--ink);
}

.member-modal-header span {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #88837a;
}

.member-modal-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  margin: 28px 0 10px;
  color: var(--gold);
}

.member-modal-body p {
  font-size: 14.5px;
  line-height: 1.8;
  color: #5d5950;
  margin: 0 0 16px;
}

.member-modal-body p:last-child {
  margin-bottom: 0;
  font-style: italic;
  color: var(--ink);
}

.member-modal-body ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.member-modal-body li {
  font-size: 14.5px;
  line-height: 1.8;
  color: #5d5950;
  margin-bottom: 10px;
}

.member-modal-body li::marker {
  color: var(--gold);
}

#modal-jasvir .member-modal-body p:last-child {
  font-style: normal;
  color: #5d5950;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .member-modal {
    padding: 0;
  }

  .member-modal-panel {
    max-height: 100vh;
    height: 100%;
    padding: 40px 24px;
  }

  .member-modal-header {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
}


/* =========================================================
   NEWS — FEATURED STORY
   ========================================================= */

.news-featured {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--paper2);
}

.news-featured-media {
  position: absolute;
  inset: 0;
}

.news-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* filter: brightness(.58) saturate(.9); */
  object-position: right;
  transition: transform 1.4s cubic-bezier(.2, .65, .2, 1), filter .4s ease;
}

.news-featured:hover .news-featured-media img {
  transform: scale(1.05);
  /* filter: brightness(.5) saturate(.9); */
}

/* .news-featured:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 9, 7, .92) 0%, rgba(10, 9, 7, .5) 48%, transparent 80%);
} */

.news-featured-body {
  position: relative;
  z-index: 2;
  color: var(--ink);
  padding: 60px 8.5vw;
  max-width: 720px;
}

.news-tag {
  display: inline-block;
  padding: 6px 16px;
  background: var(--gold);
  color: var(--dark);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.news-date {
  margin-left: 12px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #88837a;
}

.news-featured-body h2 {
  margin: 20px 0 16px;
}

.news-featured-body .section-copy {
  max-width: 100%;
}

.news-featured-body .line-btn {
  margin-top: 28px;
}

@media (max-width: 900px) {
  .news-featured {
    min-height: 52vh;
  }

  .news-featured-body {
    padding: 40px 6vw;
  }
}


/* =========================================================
   NEWS — GRID
   ========================================================= */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  transition: transform .35s ease, box-shadow .35s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(21, 21, 18, .35);
}

.news-card-media {
  height: 190px;
  overflow: hidden;
}

.news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.25);
  transition: transform 1s ease, filter .5s ease;
}

.news-card:hover .news-card-media img {
  transform: scale(1.06);
  filter: grayscale(0);
}

.news-card-body {
  flex: 1;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}

.news-card-meta {
  display: flex;
  align-items: center;
}

.news-card-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 400;
  margin: 14px 0 10px;
  color: var(--ink);
}

.news-card-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #68635a;
}

.news-card-body .line-btn {
  margin-top: 18px;
  padding-top: 14px;
  padding-bottom: 0;
  border-bottom: none;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* =========================================================
   NEWS — ARTICLE (DETAIL PAGE)
   ========================================================= */

.news-article-inner {
  max-width: 760px;
  margin: 0 auto;
}

.news-article-meta {
  display: flex;
  align-items: center;
}

.news-article-excerpt {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink);
  margin: 22px 0 0;
}

.news-article-media {
  margin: 36px 0 40px;
  overflow: hidden;
}

.news-article-media img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  display: block;
}

.news-article-body .section-copy {
  max-width: 100%;
}

.news-article-body .section-copy + .section-copy {
  margin-top: 18px;
}

.news-article-inner > .line-btn {
  margin-top: 44px;
}

@media (max-width: 600px) {
  .news-article-media {
    margin: 28px 0 32px;
  }

  .news-article-media img {
    max-height: 260px;
  }
}


/* =========================================================
   BUSINESS PAGES — INTRO STATS / HIGHLIGHTS
   ========================================================= */

.biz-intro {
  background: var(--paper2);
}

.biz-intro .section-copy {
  max-width: 640px;
}

.biz-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}


/* =========================================================
   BUSINESS PAGES — IMAGE + TEXT SHOWCASE
   ========================================================= */

.biz-showcase {
  background: var(--paper2);
}

.biz-showcase-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 6vw;
  align-items: center;
}

.biz-showcase.reverse .biz-showcase-grid {
  direction: rtl;
}

.biz-showcase.reverse .biz-showcase-grid > * {
  direction: ltr;
}

.biz-showcase-media {
  position: relative;
  height: min(500px, 60vh);
  overflow: hidden;
  box-shadow: 0 40px 80px -34px rgba(21, 21, 18, .4);
}

.biz-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .65, .2, 1);
}

.biz-showcase:hover .biz-showcase-media img {
  transform: scale(1.045);
}

.biz-showcase-body .section-copy {
  max-width: 100%;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .biz-showcase-grid,
  .biz-showcase.reverse .biz-showcase-grid {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 32px;
  }

  .biz-showcase-media {
    height: 320px;
  }
}


/* =========================================================
   BUSINESS PAGES — FEATURE GRID
   ========================================================= */

.biz-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 44px;
}

.biz-feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 32px 26px;
  transition: transform .35s ease, box-shadow .35s ease;
}

.biz-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -30px rgba(21, 21, 18, .4);
}

.biz-feature-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(165, 125, 61, .1);
  border: 1px solid rgba(165, 125, 61, .3);
  color: var(--gold);
}

.biz-feature-icon svg {
  width: 21px;
  height: 21px;
}

.biz-feature h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  margin: 18px 0 10px;
  color: var(--ink);
}

.biz-feature p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #68635a;
  margin: 0;
}

@media (max-width: 900px) {
  .biz-features {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .biz-features {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}


/* =========================================================
   BUSINESS PAGES — PROCESS STEPS
   ========================================================= */

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 44px;
}

.process-step {
  position: relative;
  padding-left: 54px;
}

.process-step-num {
  position: absolute;
  left: 0;
  top: -4px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
}

.process-step h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink);
}

.process-step p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #68635a;
  margin: 0;
}

@media (max-width: 900px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* =========================================================
   BUSINESS PAGES — PHILOSOPHY QUOTE
   ========================================================= */

.biz-philosophy {
  border-left: 2px solid var(--gold);
  padding-left: 26px;
  margin-top: 40px;
  max-width: 640px;
}

.biz-philosophy blockquote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  margin: 0 0 14px;
  color: var(--ink);
}

.biz-philosophy p {
  font-size: 14.5px;
  line-height: 1.75;
  color: #5d5950;
  margin: 0;
}


/* =========================================================
   SECTION BACKGROUND ALTERNATION (utility)
   ========================================================= */

.section-alt {
  background: #e3ddd1;
}


/* =========================================================
   PHOTO GALLERY + LIGHTBOX
   ========================================================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.gallery-item {
  position: relative;
  height: 260px;
  overflow: hidden;
  cursor: zoom-in;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item:after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 18, 0);
  transition: background .3s ease;
  pointer-events: none;
}

.gallery-item:hover:after {
  background: rgba(21, 21, 18, .08);
}

.gallery-item-caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 18px 16px;
  background: linear-gradient(0deg, rgba(10, 9, 7, .78), transparent);
  color: var(--white);
  font-size: 12px;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.gallery-item:hover .gallery-item-caption {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .gallery-item {
    height: 220px;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(10, 9, 7, .92);
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--white);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
}

.lightbox-prev {
  left: 24px;
}

.lightbox-next {
  right: 24px;
}

@media (max-width: 700px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }
}


/* =========================================================
   INNER-PAGE BANNER (About / Contact / etc.)
   ========================================================= */

.page-banner {
  min-height: 46vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
  color: var(--paper);
  padding: 148px 8.5vw 60px;
}

.page-banner:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 120% at 100% 0%, rgba(197, 166, 109, .16), transparent 60%);
  pointer-events: none;
}

.page-banner.has-photo:after {
  background: linear-gradient(100deg, rgba(10, 9, 7, .94) 20%, rgba(10, 9, 7, .55) 60%, rgba(10, 9, 7, .3) 100%);
}

.page-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.page-banner-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.page-banner .kicker {
  color: var(--gold2);
}

.page-banner-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 16px 0 0;
}

.page-banner-title em {
  font-style: italic;
  color: var(--gold2);
}

.page-banner-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a9a59c;
}

.page-banner-crumb a {
  color: #a9a59c;
  transition: color .3s ease;
}

.page-banner-crumb a:hover {
  color: var(--gold2);
}

.page-banner-crumb span {
  color: #6f6b62;
}

@media (max-width: 900px) {

  .page-banner {
    min-height: 38vh;
    padding: 128px 6vw 50px;
  }

}

@media (max-width: 600px) {

  .page-banner {
    min-height: auto;
    padding: 118px 6vw 45px;
  }

  .page-banner-crumb {
    margin-top: 20px;
  }

}