/* =============================================================
   REFINEMENT LAYER
   Loaded after style.css. Everything here is a deliberate upgrade
   to the base system, kept separate so you can see exactly what
   changed and remove any of it cleanly.

   1. Material    paper grain, softer rules, warmer shadow
   2. Type        larger reading sizes, balanced headings
   3. Hero        cinematic scrim, height, slow zoom, scroll cue
   4. Navigation  glass on scroll
   5. Cards       featured rail, quieter tags, richer hovers
   6. Sections    pillars, for/not-for, stories, pricing
   7. Motion      reveal on scroll
   ============================================================= */

/* --- 1. MATERIAL ------------------------------------------- */

:root {
  /* Softer hairlines. A flat 1px rule reads heavy at this scale. */
  --rule-soft: rgba(14, 20, 32, 0.10);
  --rule-hair: rgba(14, 20, 32, 0.07);
  --shadow-warm: 0 1px 2px rgba(14, 20, 32,0.04), 0 8px 24px -12px rgba(14, 20, 32,0.18);
  --shadow-lift: 0 2px 4px rgba(14, 20, 32,0.05), 0 22px 48px -20px rgba(14, 20, 32,0.28);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* A whisper of paper grain over the flat cream. This is the single
   cheapest thing that stops a warm-neutral palette looking like
   unstyled HTML. Opacity is deliberately near the threshold. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rule { background-color: var(--rule-soft); }
hr.rule { height: 1px; }

/* --- 2. TYPE ------------------------------------------------ */

body { font-size: 1.0625rem; line-height: 1.65; }

/* Stops the ragged one-word last line on display type. */
h1, h2, h3, .hero__headline, .pullquote__body, .lead { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* The top of the h1 clamp was shouting. Confidence is not size. */
h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); }
h2 { font-size: clamp(1.875rem, 3.4vw, 3rem); }

.lead { color: var(--text-secondary); max-width: 62ch; }
.page-header .lead { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }

/* Reading sizes. 15px body copy is where premium sites give
   themselves away. */
.pillar__body,
.two-col li,
.exp-card__desc { font-size: 1.0625rem; line-height: 1.62; }

.exp-card__desc { color: var(--text-secondary); }

.eyebrow { letter-spacing: 0.2em; font-size: 0.6875rem; }

/* --- 3. HERO ------------------------------------------------ */

.hero {
  min-height: clamp(620px, 88vh, 940px);
}

.hero__media img {
  transform: scale(1.06);
  animation: heroDrift 24s ease-out forwards;
}

@keyframes heroDrift {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0); }
}

/* Two scrims, not one. The vertical gradient alone leaves the
   headline fighting whatever the photograph is doing behind it;
   the horizontal one guarantees a quiet field on the text side. */
.hero__media::after {
  background:
    linear-gradient(180deg, rgba(14, 20, 32,0.55) 0%, rgba(14, 20, 32,0.10) 26%, rgba(14, 20, 32,0.52) 68%, rgba(14, 20, 32,0.88) 100%);
}

.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(14, 20, 32,0.86) 0%, rgba(14, 20, 32,0.62) 34%, rgba(14, 20, 32,0.12) 62%, rgba(14, 20, 32,0) 78%);
}

@media (max-width: 767px) {
  .hero__media::before {
    background: linear-gradient(180deg, rgba(14, 20, 32,0.30) 0%, rgba(14, 20, 32,0.10) 35%, rgba(14, 20, 32,0.80) 100%);
  }
}

.hero__inner { padding-bottom: clamp(var(--space-6), 9vh, var(--space-8)); }

.hero__eyebrow { opacity: 0.9; letter-spacing: 0.24em; }

.hero__headline {
  max-width: 15ch;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 40px rgba(14, 20, 32,0.35);
}

@media (min-width: 900px) {
  .hero__headline { max-width: 13ch; }
  .hero__sub { max-width: 42ch; }
}

.hero__sub { opacity: 1; color: rgba(248, 245, 236, 0.88); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }

.hero .btn--accent {
  padding: 1.05em 2.1em;
  box-shadow: 0 10px 30px -12px rgba(218, 169, 39, 0.9);
}

.hero .btn--accent:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(218, 169, 39, 1); }

/* Quiet scroll cue. */
.hero__inner::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(248, 245, 236,0) 0%, rgba(248, 245, 236,0.65) 100%);
  animation: cueDrop 2.6s var(--ease) infinite;
}

@media (min-width: 768px) { .hero__inner::after { left: var(--space-5); } }

@keyframes cueDrop {
  0%   { opacity: 0; transform: translateY(-12px) scaleY(0.6); }
  40%  { opacity: 1; transform: translateY(0) scaleY(1); }
  100% { opacity: 0; transform: translateY(12px) scaleY(0.6); }
}

/* --- 4. NAVIGATION ------------------------------------------ */

.nav {
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.nav.is-scrolled {
  background-color: rgba(248, 245, 236, 0.82);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom-color: var(--rule-hair);
  box-shadow: 0 1px 0 rgba(14, 20, 32,0.03), 0 12px 28px -24px rgba(14, 20, 32,0.5);
}

.nav__brand { letter-spacing: -0.015em; }
.nav__link { letter-spacing: 0.005em; }

.nav__cta { box-shadow: 0 6px 18px -10px rgba(14, 20, 32,0.75); }

/* --- 5. CARDS ----------------------------------------------- */

/* Five cards across a 1240px container gave each photograph about
   190px. The work deserves better than a contact sheet, so on
   desktop the homepage set becomes a rail you push through. */
@media (min-width: 1000px) {
  .experiences {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    margin-right: calc(var(--space-5) * -1);
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }
  .experiences > .exp-card {
    flex: 0 0 clamp(280px, 24vw, 340px);
    scroll-snap-align: start;
  }
  .experiences::-webkit-scrollbar { height: 3px; }
  .experiences::-webkit-scrollbar-track { background: var(--rule-hair); }
  .experiences::-webkit-scrollbar-thumb { background: var(--accent); }
}

.exp-card__media {
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-warm);
  transition: box-shadow 0.5s var(--ease);
}

.exp-card:hover .exp-card__media { box-shadow: var(--shadow-lift); }
.exp-card:hover .exp-card__media img { transform: scale(1.05); }
.exp-card__media img { transition: transform 0.9s var(--ease); }

.exp-card__num {
  color: var(--accent);
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  font-size: 0.6875rem;
}

.exp-card__name { font-size: 1.375rem; margin-bottom: var(--space-2); }

/* The outlined orange boxes read as broken buttons. A tag is a
   label, so it should look like one. */
.exp-card__tag {
  border: 0;
  padding: 0;
  margin-top: var(--space-3);
  border-radius: 0;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  font-size: 0.6875rem;
  position: relative;
  padding-left: 26px;
}

.exp-card__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 18px;
  height: 1px;
  background-color: var(--accent);
}

.exp-card__coming { border-top: 1px solid var(--rule-hair); padding-top: var(--space-2); }

/* --- 6. SECTIONS -------------------------------------------- */

/* Pillars: the rule and the numeral do the structural work. */
.pillar { border-top-width: 2px; border-top-color: var(--text-primary); padding-top: var(--space-4); }
.pillar__num { font-size: 1.125rem; letter-spacing: 0.02em; opacity: 0.9; }
.pillar__title { font-size: 1.75rem; margin-bottom: var(--space-3); }

/* For / Not for should not look identical. One is an invitation. */
.two-col > div:first-child { position: relative; padding-left: var(--space-3); }
.two-col > div:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em; bottom: 0.5em;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), rgba(218, 169, 39,0));
}
.two-col > div:first-child .two-col__heading { color: var(--text-primary); border-bottom-color: var(--accent); }
.two-col > div:last-child { opacity: 0.86; }
.two-col > div:last-child .two-col__heading { color: var(--text-muted); }
.two-col li { border-bottom-color: var(--rule-hair); }

/* Stories: give the quote a mark and room to breathe. */
.story { border-top-width: 1px; border-top-color: var(--rule-soft); padding-top: var(--space-4); }
.story__quote { font-size: 1.3125rem; line-height: 1.5; position: relative; }
.story__quote::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 0;
  color: var(--accent);
  position: absolute;
  top: 0.45em;
  left: -0.55em;
  opacity: 0.55;
}
@media (max-width: 767px) { .story__quote::before { display: none; } }

.pullquote__mark { opacity: 0.7; }
.pullquote__body { line-height: 1.42; }

/* Dark bands get depth rather than flat fill. */
.section--dark {
  background-image: radial-gradient(120% 80% at 50% 0%, rgba(218, 169, 39,0.14) 0%, rgba(218, 169, 39,0) 60%);
}

.pricing__tier { transition: background-color 0.4s var(--ease); }
.pricing__tier:hover { background-color: rgba(218, 169, 39, 0.045); }
.pricing__amount { letter-spacing: -0.01em; }

.btn--primary, .btn--accent { box-shadow: 0 8px 22px -14px rgba(14, 20, 32,0.8); }
.btn { transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }

/* Visible, on-brand focus. Quality shows in the states nobody photographs. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 7. MOTION ---------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; transform: none; }
  .hero__inner::after { animation: none; opacity: 0.5; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .exp-card:hover .exp-card__media img { transform: none; }
}

/* --- 8. RECOGNITION ----------------------------------------- */

.recognition__head { max-width: 34ch; margin-bottom: var(--space-6); }
.recognition__head h2 { margin: 0; }

.recognition {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--text-primary);
}

@media (min-width: 860px) {
  .recognition { grid-template-columns: repeat(3, 1fr); }
  .rec { border-right: 1px solid var(--rule-soft); }
  .rec:last-child { border-right: 0; }
}

.rec {
  padding: var(--space-4) var(--space-4) var(--space-5) 0;
  border-bottom: 1px solid var(--rule-soft);
}

@media (min-width: 860px) {
  .rec { padding: var(--space-5) var(--space-4); border-bottom: 0; }
  .rec:first-child { padding-left: 0; }
}

.rec__kicker {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin: 0 0 var(--space-3) 0;
}

.rec__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 350;
  line-height: 1.15;
  margin: 0 0 0.35em 0;
}

.rec__meta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-3) 0;
}

.rec__body { color: var(--text-secondary); margin: 0 0 var(--space-3) 0; font-size: 1rem; line-height: 1.6; }

.rec__link {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  display: inline-block;
  margin-top: 0.3em;
}

.rec__link:hover { color: var(--accent); }
.rec__link .arrow { transition: transform 0.25s var(--ease); display: inline-block; }
.rec__link:hover .arrow { transform: translateX(3px); }

/* Her own words, given the weight of a statement of record. */
.rec-quote {
  margin: var(--space-7) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--rule-soft);
  max-width: 62ch;
}

.rec-quote__body {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.3vw, 1.875rem);
  font-weight: 350;
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

.rec-quote__body::before { content: "\201C"; color: var(--accent); }
.rec-quote__body::after  { content: "\201D"; color: var(--accent); }

.rec-quote__cite {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.rec-quote__cite cite { font-style: italic; }

/* --- 9. THE MARK -------------------------------------------- */

/* The brand mark, traced from the company flag. Swap the two SVGs
   in /images (logo.svg for light backgrounds, logo-light.svg for
   dark) with the original artwork when it is to hand; nothing else
   needs to change. */

.nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  border: 0;
}

.nav__logo {
  display: block;
  height: 30px;
  width: auto;
  transition: opacity 0.3s var(--ease);
}

@media (min-width: 768px) { .nav__logo { height: 34px; } }

.nav__brand:hover .nav__logo { opacity: 0.78; }

.nav__brand-sub {
  font-family: var(--font-body);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  align-self: flex-end;
  padding-bottom: 0.28rem;
}

@media (max-width: 420px) { .nav__brand-sub { display: none; } }

.footer__logo {
  display: block;
  height: 42px;
  width: auto;
  margin-bottom: var(--space-3);
}

.footer__brand { margin-bottom: var(--space-2); }

/* Nav fit: the mark plus eight items needs tighter metrics or the
   row wraps and the CTA falls off the end. */
.nav__menu { gap: clamp(0.9rem, 1.5vw, 1.6rem); }
.nav__link, .nav__cta { white-space: nowrap; }
.nav__link { font-size: 0.875rem; }
.nav__cta { font-size: 0.8125rem; padding: 0.7em 1.35em; }
.nav__inner { gap: var(--space-3); }
.nav__logo { height: 34px; }
@media (min-width: 1100px) { .nav__logo { height: 42px; } }
.nav__brand-sub { display: none; }
@media (min-width: 1240px) { .nav__brand-sub { display: inline; } }

/* The global broken-image fallback paints a warm block behind every
   img. That is right for photographs and wrong for a transparent
   logo, which needs to sit on the page, not on a tile. */
.nav__logo, .footer__logo {
  background: none;
  min-height: 0;
}
.nav__logo::before, .footer__logo::before { display: none; }

/* The lockup carries a mark and two lines of brush lettering, so it
   needs real height to stay legible. Trim the bar's padding to keep
   the sticky header from eating the viewport. */
.nav__logo { height: 38px; }
@media (min-width: 1100px) { .nav__logo { height: 48px; } }
@media (min-width: 768px) { .nav__inner { padding-top: var(--space-2); padding-bottom: var(--space-2); } }
.nav__brand-sub { padding-bottom: 0.5rem; letter-spacing: 0.24em; }

/* The viewer's img is empty until a photograph is opened, so it must
   not inherit the broken-image placeholder tile. */
#galImg:not([src]) { display: none; }
#galImg { background: none; min-height: 0; }
#galImg::before { display: none; }

/* =============================================================
   10. GOLD, NOT BROWN
   The palette was rebuilt from the photographs themselves. Across
   the 84 images on this site, two thirds of every saturated pixel
   sits at hue 43 to 47: gold. That is the kente, the regalia and
   the logo. Terracotta appeared nowhere in the library, so it is
   gone. Ground is now a blue-black ink taken from the company
   flag, and the light ground is ivory rather than beige.
   ============================================================= */

/* On dark ground the accent should be the real brand gold, not the
   darkened version that small text needs on ivory. */
.section--dark .eyebrow,
.hero__eyebrow,
.footer h5 { color: var(--gold); }

.section--dark {
  background-image: radial-gradient(120% 80% at 50% 0%, rgba(218,169,39,0.10) 0%, rgba(218,169,39,0) 62%);
}

.hero .btn--accent {
  background-color: var(--gold);
  color: #0E1420;
  box-shadow: 0 10px 30px -12px rgba(218,169,39,0.75);
}
.hero .btn--accent:hover {
  background-color: var(--gold-bright);
  color: #0E1420;
  box-shadow: 0 16px 38px -14px rgba(218,169,39,0.95);
}

.btn--accent { background-color: var(--accent); }
.btn--accent:hover { background-color: var(--accent-deep); }

.pullquote__mark,
.story__quote::before,
.rec-quote__body::before,
.rec-quote__body::after { color: var(--gold); opacity: 0.9; }

/* The woven rule. A kente strip is warp and weft in fixed order, so
   the divider borrows that order rather than inventing a gradient. */
.kente-rule {
  height: 3px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right,
    var(--gold) 0 18%,
    var(--kente-red) 18% 33%,
    var(--gold) 33% 45%,
    var(--kente-green) 45% 60%,
    var(--gold) 60% 72%,
    var(--kente-blue) 72% 86%,
    var(--gold) 86% 100%);
}

.section--dark .kente-rule { opacity: 0.95; }

/* Footer: ink ground, gold headings, a woven strip along the top. */
.footer { position: relative; }
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right,
    var(--gold) 0 18%,
    var(--kente-red) 18% 33%,
    var(--gold) 33% 45%,
    var(--kente-green) 45% 60%,
    var(--gold) 60% 72%,
    var(--kente-blue) 72% 86%,
    var(--gold) 86% 100%);
}

/* Gallery: the active filter reads better as gold on ink. */
.gal-filter__btn.is-active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #F8F5EC;
}
.gal-filter__btn:hover { color: var(--accent); border-color: var(--accent); }

.exp-card__num, .pillar__num, .rec__kicker { color: var(--accent); }
.eyebrow--accent { color: var(--accent); }

/* Nav mark sits on ivory; keep the CTA ink so the gold logo leads. */
.nav__cta { background-color: var(--text-primary); }
.nav__cta:hover { background-color: var(--accent-deep); }

/* Muted text sitting on the ink ground needs to lift, not darken. */
.footer__tag,
.footer__note,
.footer__base,
.footer__base p,
.section--dark .text-muted { color: var(--text-muted-dark); }

/* =============================================================
   11. THE HERO, RECOMPOSED
   The subject's face sits at 34-40% across and 38-52% down. The
   headline was running straight through it, which is no way to
   treat a portrait on a site about being received with dignity.
   Two changes: the frame is shifted down so her face rises into
   the upper third, and the type is pulled into a compact block in
   the lower left, where the photograph is palm and shadow.
   ============================================================= */

.hero__media img { object-position: center 64%; }

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (min-width: 900px) {
  .hero__headline {
    font-size: clamp(2.5rem, 4.2vw, 3.5rem);
    max-width: 11ch;
    line-height: 1.06;
    margin-bottom: var(--space-3);
  }
  .hero__sub { max-width: 34ch; font-size: 1.0625rem; }
  .hero__inner { padding-bottom: clamp(var(--space-5), 7vh, var(--space-6)); }
}

/* A deeper, narrower field under the type rather than a wash across
   the whole frame, so the photograph keeps its light. */
@media (min-width: 900px) {
  .hero__media::before {
    background:
      linear-gradient(95deg, rgba(14,20,32,0.90) 0%, rgba(14,20,32,0.74) 22%, rgba(14,20,32,0.28) 42%, rgba(14,20,32,0) 56%),
      linear-gradient(0deg, rgba(14,20,32,0.72) 0%, rgba(14,20,32,0.12) 42%, rgba(14,20,32,0) 62%);
  }
}

/* The regal marker: a short gold rule above the eyebrow. Restraint
   is the point. Royalty does not need a badge. */
.hero__eyebrow { position: relative; padding-top: var(--space-3); }
.hero__eyebrow::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 54px;
  height: 2px;
  background-color: var(--gold);
}

/* On a phone the frame crops to a narrow vertical slice, and centred
   it lands squarely on her face. Shifting the slice left puts her to
   the right of the type, which is the same composition the desktop
   hero uses. */
@media (max-width: 899px) {
  .hero__media img { object-position: 16% center; }
  .hero__media::before {
    background: linear-gradient(180deg, rgba(14,20,32,0.62) 0%, rgba(14,20,32,0.30) 26%, rgba(14,20,32,0.55) 62%, rgba(14,20,32,0.88) 100%);
  }
  .hero__headline { max-width: 12ch; font-size: clamp(2.25rem, 9vw, 2.75rem); }
  .hero__sub { max-width: 40ch; }
}

/* --- 12. SKIP LINK -------------------------------------------
   Eight navigation items sit above the content on every page. A
   keyboard user should not have to walk past all of them.
   ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 200;
  padding: 0.85em 1.4em;
  background-color: var(--bg-deep);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border-bottom: 0;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--space-2); color: var(--text-on-dark); }
main:focus { outline: none; }

/* =============================================================
   13. THE SIX EDITS
   ============================================================= */

/* --- 13a. THE HERO CALL TO ACTION ----------------------------
   Gold on a photograph that is itself full of Ghana-flag gold
   camouflages the one thing a visitor has to find. The primary
   action becomes the brightest object on the page instead: solid
   ivory, ink type, a hard edge, no bloom.
   ------------------------------------------------------------- */
.hero .btn--accent {
  background-color: #FBF8F0;
  color: #12161F;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.015em;
  padding: 1.15em 2.3em;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 2px 0 0 rgba(14, 20, 32, 0.28), 0 18px 40px -20px rgba(0, 0, 0, 0.9);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.hero .btn--accent:hover,
.hero .btn--accent:focus-visible {
  background-color: var(--gold-bright);
  color: #12161F;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 0 rgba(14, 20, 32, 0.3), 0 22px 46px -20px rgba(0, 0, 0, 0.95);
}
.hero .btn--accent .arrow { opacity: 1; margin-left: 0.55em; }

/* Give the action room to breathe, and lift it off the very bottom
   edge of the frame where the vignette was swallowing it. */
.hero__cta { margin-top: var(--space-4); }
.hero__inner { padding-bottom: var(--space-6); }

/* A second, quieter route for people not ready to inquire. */
.hero__cta-alt {
  display: inline-block;
  margin-left: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}
.hero__cta-alt:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 560px) {
  .hero__cta-alt { display: block; margin: var(--space-3) 0 0; }
}

/* --- 13b. THE CURATED RAIL -----------------------------------
   The rail scrolled with no sign that it could. It now carries
   arrows, a progress track, and a fade at the edge the content
   runs past.
   ------------------------------------------------------------- */
.rail { position: relative; }

.rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.rail__ctrls { display: none; }

@media (min-width: 1000px) {
  .rail__ctrls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .rail__btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--rule-strong, rgba(20, 24, 31, 0.22));
    background: transparent;
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
  }
  .rail__btn:hover:not(:disabled) { background: var(--bg-deep); color: var(--bg-primary); border-color: var(--bg-deep); }
  .rail__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .rail__btn:disabled { opacity: 0.28; cursor: default; }

  /* Fade the right edge so the cut card reads as "there is more". */
  .rail__viewport { position: relative; }
  .rail__viewport::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 110px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(239, 233, 218, 0), var(--bg-secondary) 88%);
    opacity: 1;
    transition: opacity 0.3s var(--ease);
  }
  .rail__viewport.is-end::after { opacity: 0; }

  .experiences {
    padding-bottom: var(--space-2);
    margin-right: 0;
    scrollbar-width: none;
  }
  .experiences::-webkit-scrollbar { display: none; }

  /* A real progress track under the rail. */
  .rail__track {
    position: relative;
    height: 2px;
    margin-top: var(--space-3);
    background: rgba(20, 24, 31, 0.13);
    border-radius: 2px;
    overflow: hidden;
  }
  .rail__thumb {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: transform 0.18s linear, width 0.18s linear;
  }
  .rail__hint {
    margin: var(--space-2) 0 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
}

/* On a light section the fade has to match that ground instead. */
.section--parchment .rail__viewport::after,
.rail--on-parchment .rail__viewport::after {
  background: linear-gradient(to right, rgba(239, 233, 218, 0), var(--bg-secondary) 88%);
}

/* Cards inside a horizontal scroller never entered the viewport, so
   the reveal observer never fired and the fifth card stayed at zero
   opacity forever. Inside a rail they are simply visible. */
.experiences .exp-card,
.rail .reveal { opacity: 1 !important; transform: none !important; }

/* --- 13c. THE GALLERY ----------------------------------------
   Sixty forced-portrait tiles in a narrow column was seven thousand
   pixels of scroll. Albums are now doors: five covers, and the one
   you open lays out at native aspect across the full width.
   ------------------------------------------------------------- */
.albums {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 700px) { .albums { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .albums { grid-template-columns: repeat(3, 1fr); } }

.album { margin: 0; }

.album__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--bg-secondary);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.album__btn:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(14, 20, 32, 0.6); }
.album__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.album__media {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-secondary);
}
.album__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.album__btn:hover .album__media img { transform: scale(1.045); }

.album__body { display: block; padding: var(--space-3) var(--space-3) var(--space-4); }

.album__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}
.album__blurb {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.album__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.album__chev {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.album.is-open .album__chev { transform: rotate(-135deg); }
.album.is-open .album__btn { box-shadow: inset 0 0 0 2px var(--accent); }

.album-panel { margin-top: var(--space-5); scroll-margin-top: 90px; }

.album-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}
.album-panel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin: 0;
}
.album-panel__close {
  background: none;
  border: 0;
  padding: 0.4em 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  white-space: nowrap;
}
.album-panel__close:hover { color: var(--accent); }
.album-panel__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Masonry that keeps every photograph at the shape it was taken. */
.album-panel .gal-grid {
  display: block;
  column-count: 2;
  column-gap: var(--space-2);
}
@media (min-width: 760px)  { .album-panel .gal-grid { column-count: 3; column-gap: var(--space-3); } }
@media (min-width: 1180px) { .album-panel .gal-grid { column-count: 4; column-gap: var(--space-3); } }

.album-panel .gal-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 var(--space-2);
  content-visibility: visible;
}
@media (min-width: 760px) { .album-panel .gal-item { margin-bottom: var(--space-3); } }

.album-panel .gal-item__btn { aspect-ratio: auto; }
.album-panel .gal-item__btn img { height: auto; }

/* --- 13d. GALLERY PAGE RHYTHM --------------------------------- */
.gal-count { margin-bottom: var(--space-3); }

/* The head link is the small-screen fallback for the arrow cluster. */
.rail__head-link { display: inline-flex; }
@media (min-width: 1000px) { .rail__head-link { display: none; } }

/* --- 13e. ALIGNMENT AND RHYTHM -------------------------------
   Five pages set their header in a narrower, centred container
   than the content beneath it, so the title hung inward from the
   first card by roughly a hundred pixels. A page should have one
   left edge. The measure is now held by the type itself.
   ------------------------------------------------------------- */
.page-header .container--medium,
.page-header .container--narrow { max-width: var(--max-width); }
.page-header h1 { max-width: 17ch; }
.page-header__lead { max-width: 58ch; }
@media (max-width: 700px) { .page-header h1 { max-width: 100%; } }

/* Three columns give each photograph presence; four made them thumbnails. */
@media (min-width: 1180px) { .album-panel .gal-grid { column-count: 3; } }

/* Section rhythm: the vertical gaps were uniform regardless of whether
   a boundary was a change of subject or a change of ground. Give the
   dark and alternate grounds more room than a plain continuation. */
.section--dark { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.section--alt  { padding-top: var(--space-7); padding-bottom: var(--space-7); }

/* An eyebrow belongs to the heading under it, not to the space above. */
.eyebrow { margin-bottom: var(--space-2); }
.eyebrow + h2, .eyebrow + h1 { margin-top: 0; }

/* Two-column lists were the same weight on both sides, so "For" and
   "Not for" read as one undifferentiated wall of bold. */
.two-col > div > ul { margin-top: var(--space-3); }
.two-col > div > ul > li { padding-bottom: var(--space-2); }
.two-col > div > ul > li:last-child { padding-bottom: 0; }

/* Four different left edges appeared on a single page as you scrolled,
   because prose sections alternated between a 720px and an 880px box,
   both centred, against a 1240px content edge. Collapsing the two prose
   measures to one leaves a deliberate rhythm of two edges instead of a
   drift of four. */
:root { --max-width-narrow: 880px; }

/* A trailing element's own bottom margin was stacking on top of the
   section's padding, so several pages carried roughly a hundred pixels
   more air below a section than above it. Measured on trip-types, where
   every block ran 128 above and 224 to 324 below. */
.section > .container > *:last-child,
.section > .container > *:last-child > *:last-child { margin-bottom: 0; }
.exp-headline:last-child { margin-bottom: 0; }

/* The page header sat 96 above its title and 49 below its lead, which
   read as the heading falling into the content rather than introducing it. */
.page-header { padding: var(--space-7) 0 var(--space-6); }

/* The same stacking one level deeper, inside two-column blocks. */
.section .container p:last-child,
.section .container ul:last-child { margin-bottom: 0; }

/* The photograph column was locked to 5:6 while the text beside it ran
   longer, so the image finished about a hundred pixels above the copy
   and the block ended on a ragged edge. Let the media fill its row. */
@media (min-width: 900px) {
  .exp-headline { align-items: stretch; }
  .exp-headline__media { aspect-ratio: auto; min-height: 100%; }
  .exp-headline__media img { min-height: 460px; }
}

/* Below the rail breakpoint the cards simply stack, so the scroll
   controls, the progress track and the position hint have nothing to
   describe and are removed rather than left as orphaned furniture. */
@media (max-width: 999px) {
  .rail__track, .rail__hint { display: none; }
  .rail__viewport::after { content: none; }
}

/* Mobile hero details: the eyebrow was breaking after the separator and
   leaving "· Ghana" orphaned on its own line, and the secondary link's
   rule ran the full column width instead of sitting under its words. */
@media (max-width: 560px) {
  .hero__eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; }
  .hero__cta-alt { display: inline-block; width: auto; }
}

/* =============================================================
   14. GOLD, ACTUALLY GOLD
   -------------------------------------------------------------
   The accent was #816319. That is a gold hue held at thirty
   percent lightness, and a gold at thirty percent lightness is
   brown. It passed the contrast check precisely because it was
   dark enough to stop being gold, and it was carrying every
   eyebrow, link, rule and label on all twelve pages. So the
   brown the owner rejected was still the most repeated colour
   on the site.

   No colour that reads as gold can clear 4.5:1 for small text on
   a ground this close to white, so asking one colour to be both
   the small-text colour and the brand colour was the mistake.
   The two roles are now separate:

     text that must be read   ->  ink
     the brand, seen as gold  ->  rules, marks, borders, fills

   Gold now appears as gold everywhere it appears at all, and the
   text contrast goes up rather than down.
   ------------------------------------------------------------- */
:root {
  --accent: #B8860B;         /* real gold: rules, marks, borders, active states */
  --accent-deep: #8F6D0F;    /* its hover */
  --accent-strong: #A67C0D;  /* gold that must clear 3:1 as a UI component */
  --accent-text: #14181F;    /* small text on light grounds */
  --bg-secondary: #E9E1CB;   /* parchment, deepened so a change of ground reads */
  --text-muted: #5C636D;     /* re-darkened to hold 4.5:1 on that deeper ground */
}

/* --- 14a. Small text moves to ink on light grounds ------------ */
.eyebrow--accent,
.exp-card__num,
.pillar__num,
.rec__kicker,
.form__num,
.album__meta,
.gal-count { color: var(--accent-text); }

/* On ink grounds gold is legible and correct, so it stays. */
.section--dark .eyebrow,
.section--dark .eyebrow--accent,
.footer h5,
.section--dark .cta-block .eyebrow { color: var(--gold); }

/* --- 14b. Links read as links without shouting in brown -------
   Ink text with a gold rule under it: unmistakably a link, and
   the contrast is that of body copy rather than of an accent. */
main a:not(.btn):not(.nav__link):not(.nav__cta):not(.gal-filter__btn):not(.album__btn):not(.rail__btn):not(.album-panel__close):not(.hero__cta-alt):not(.nav__brand):not(.skip-link) {
  color: var(--accent-text);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
main a:not(.btn):not(.nav__link):not(.nav__cta):hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.footer a { border-bottom: 0; }
.footer a:hover { color: var(--gold); }

/* --- 14c. Gold fills carry ink type, not ivory ----------------
   A gold panel with near-white text was the weakest contrast on
   the site. Ink on brand gold is 8.5:1 and looks like metal. */
.btn--accent,
.btn--accent:hover,
.form__submit,
.form__submit:hover { background-color: var(--gold); color: #0E1420; }
.btn--accent:hover, .form__submit:hover { background-color: var(--gold-bright); color: #0E1420; }
.gal-filter__btn.is-active { background-color: var(--gold); border-color: var(--gold); color: #0E1420; }
.nav__cta:hover { background-color: var(--gold); color: #0E1420; }

/* --- 14d. Focus rings need to be seen, so they use the darker gold */
:focus-visible { outline-color: var(--accent-strong); }
.gal-item__btn:focus-visible,
.album__btn:focus-visible,
.rail__btn:focus-visible,
.album-panel__close:focus-visible,
.gal-filter__btn:focus-visible { outline: 2px solid var(--accent-strong); }

/* --- 14e. Quiet buttons and hovers stop turning brown --------- */
.btn--quiet:hover { color: var(--accent-text); border-color: var(--accent); }
.album-panel__close:hover,
.rec__link:hover,
.gal-filter__btn:hover { color: var(--accent-text); border-color: var(--accent); }
.nav__link--current, .nav__link.is-current { color: var(--accent-text); }

/* =============================================================
   15. DENSITY
   -------------------------------------------------------------
   Investment carried 417 words across five and a bit screens.
   Who It's For carried 683 across the same. The pages were not
   long because they said a lot; they were long because every
   item was a full-width row with a paragraph attached and a
   hundred pixels of air around it. Two components fix most of
   it: a disclosure list, so a reader scans headings and opens
   what applies to them, and a column list, so twelve short
   lines occupy four rows instead of twelve.
   ============================================================= */

/* --- 15a. Disclosure list ------------------------------------ */
.disclose-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.disclose { border-bottom: 1px solid var(--rule); }

.disclose details { }
.disclose summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease);
}
.disclose summary::-webkit-details-marker { display: none; }
.disclose summary:hover .disclose__title { color: var(--text-secondary); }
.disclose details[open] .disclose__title { color: var(--text-primary); }
.disclose summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.disclose__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--text-primary);
  transition: color 0.2s var(--ease);
}
@media (min-width: 700px) { .disclose__title { font-size: 1.375rem; } }

/* A plus that becomes a minus. Cheaper to read than a chevron. */
.disclose__mark {
  position: relative;
  flex: 0 0 auto;
  width: 15px; height: 15px;
}
.disclose__mark::before,
.disclose__mark::after {
  content: '';
  position: absolute;
  background: var(--accent);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.disclose__mark::before { top: 7px; left: 0; width: 15px; height: 1.5px; }
.disclose__mark::after  { left: 6.75px; top: 0; width: 1.5px; height: 15px; }
.disclose details[open] .disclose__mark::after { transform: rotate(90deg); opacity: 0; }

.disclose__body {
  padding: 0 0 var(--space-3);
  max-width: 62ch;
}
.disclose__body p { margin: 0; color: var(--text-secondary); }

/* --- 15b. Column lists ---------------------------------------
   Twelve one-line inclusions do not need twelve full-width rows. */
.included-list {
  column-count: 1;
  column-gap: var(--space-5);
}
@media (min-width: 700px)  { .included-list { column-count: 2; } }
@media (min-width: 1080px) { .included-list { column-count: 3; } }
.included-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 0.5rem 0 0.5rem 1.1rem;
  line-height: 1.45;
}

/* --- 15c. Vertical rhythm, tightened -------------------------
   The section scale was built for pages with photographs in
   every block. On the text pages it just added altitude. */
.section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.section--tight { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.section--alt { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.section--dark { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.page-header { padding-top: var(--space-6); padding-bottom: var(--space-5); }
@media (min-width: 900px) {
  .section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .section--alt { padding-top: var(--space-7); padding-bottom: var(--space-7); }
}

/* --- 15d. Detail inside an experience card -------------------
   Each featured card carried a paragraph of "what you come away
   knowing" that nobody reads standing up. It is now a line the
   reader can open, which took roughly four hundred pixels off
   every row of three. */
.exp-more { margin-top: var(--space-2); border-top: 1px solid var(--rule); }
.exp-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.85rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.exp-more summary::-webkit-details-marker { display: none; }
.exp-more summary:hover { color: var(--accent-text); }
.exp-more summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.exp-more__body {
  margin: 0 0 var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.exp-more .disclose__mark { width: 13px; height: 13px; }
.exp-more .disclose__mark::before { top: 6px; width: 13px; }
.exp-more .disclose__mark::after { left: 5.75px; height: 13px; }

/* =============================================================
   16. VIDEO
   -------------------------------------------------------------
   Both source clips are 832x464, which is roughly 480p. Shown
   any wider than about 700 pixels they go soft, so the block is
   built around that ceiling rather than fighting it: the footage
   sits in a contained frame beside the copy instead of running
   full bleed behind it.
   ============================================================= */
.video-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 1000px) {
  .video-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
}

.video-block__media { max-width: 700px; }

.video-frame {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
  aspect-ratio: 832 / 464;
}
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-deep);
}

/* A way to stop the motion. Anything that plays on its own needs one. */
.video-loop__toggle {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 0.5em 1em;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 20, 32, 0.72);
  color: var(--bg-primary);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s var(--ease), background-color 0.25s var(--ease);
}
.video-frame:hover .video-loop__toggle,
.video-loop__toggle:focus-visible { opacity: 1; }
.video-loop__toggle:hover { background: rgba(14, 20, 32, 0.9); }
.video-loop__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- The partner clip ---------------------------------------- */
.video-quote {
  margin: var(--space-4) 0 0;
  max-width: 700px;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}
.video-quote__player {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-deep);
}
.video-quote__cap {
  display: block;
  padding-top: var(--space-2);
  font-family: var(--font-body);
}
.video-quote__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}
.video-quote__role {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.video-block__body h2 { max-width: 15ch; margin: 0 0 var(--space-3); }
.video-block__body p { color: var(--text-secondary); max-width: 54ch; }
.video-block__body p + p { margin-top: var(--space-3); }
@media (min-width: 1000px) { .video-block__body { padding-top: var(--space-2); } }