/* ============================================================
   MANTLE — single scroll site
   Brand: Futura PT Light / Menno Banner Light Italic
   Palette: Light Cream #F4F1E9 · Dark Cream #E1DAC7 · Brown #B1A693
            Dark Navy #3A3D46 · Green #847652 · Maroon #543528
   ============================================================ */

@font-face{
  font-family:"Futura PT";
  src:url("assets/fonts/futura-pt-light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Menno Banner";
  src:url("assets/fonts/menno-banner-light-italic.woff2") format("woff2");
  font-weight:300; font-style:italic; font-display:swap;
}

:root{
  --cream:#F4F1E9;
  --sand:#E1DAC7;
  --stone:#B1A693;
  --ink:#3A3D46;
  --green:#847652;
  --maroon:#543528;
  --line:rgba(132,118,82,.42);

  --sans:"Futura PT","Jost","Century Gothic","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Menno Banner","Baskerville","Hoefler Text",Georgia,serif;

  --gutter:clamp(24px,5vw,90px);
  --maxw:1520px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* every section is a discrete "page": scrolling always snaps, one at a time */
  scroll-snap-type:y mandatory;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.62;
  letter-spacing:.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--cream);padding:12px 20px;font-size:14px;
}
.skip:focus{left:16px;top:16px}

/* ---------- NAV ---------------------------------------------------- */

/* Toggle button — two lines, top-left, all widths */
.nav-toggle{
  display:block;position:fixed;z-index:130;
  top:clamp(24px,3.4vh,46px);left:var(--gutter);
  width:46px;height:46px;
  background:none;border:0;padding:0;cursor:pointer;
}
.nav-toggle span{
  display:block;width:30px;height:1.4px;background:var(--ink);
  margin:8px auto;transition:transform .38s var(--ease),opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4.7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.7px) rotate(-45deg)}

/* Desktop: horizontal bar across the top, revealed on click */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 34px rgba(58,61,70,.07);
  transform:translateY(-101%);
  opacity:0;visibility:hidden;
  transition:transform .5s var(--ease),opacity .4s var(--ease),visibility .4s var(--ease);
}
.nav.open{transform:none;opacity:1;visibility:visible}
.nav ul{
  list-style:none;margin:0;
  /* clearance on the left so the tabs clear the toggle button */
  padding:clamp(26px,3.2vh,38px) var(--gutter) clamp(26px,3.2vh,38px) calc(var(--gutter) + 62px);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(20px,2.6vw,52px);
}
.nav li{margin:0}
.nav a{
  font-size:16px;
  letter-spacing:.02em;
  color:var(--ink);
  opacity:.85;
  position:relative;
  white-space:nowrap;
  transition:opacity .35s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;
  background:var(--green);transition:right .45s var(--ease);
}
.nav a:hover,.nav a:focus-visible{opacity:1}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
.nav a[aria-current="true"]{opacity:1}
.nav a[aria-current="true"]::after{right:0;background:var(--line)}

/* ---------- SECTION SHELL ------------------------------------------ */

.s{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  /* content sits in the vertical middle of the screen; "safe" makes a
     section taller than the viewport fall back to top-aligned so its
     heading is never clipped above the fold */
  justify-content:safe center;
  align-items:center;
  padding:clamp(80px,9vh,128px) var(--gutter);
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.s--cream,.s--bone{background:var(--cream)}
.s--sand{background:var(--sand)}
.s--stone{background:var(--stone)}
.s--green{background:var(--green)}

/* Contact carries little content, so it shares the last screen with the
   footer: the two together come to exactly one viewport, which lets the
   final scroll land flush on contact's own top instead of halfway through
   the section above it. Its content is centred rather than top-aligned so
   the page reads as composed, not as empty space. */
#contact{justify-content:center}
@media (min-width:861px){
  .foot{height:88px}
  #contact{min-height:calc(100vh - 88px);min-height:calc(100svh - 88px)}
}

/* Type is never scaled to make a page fit — only the spacing moves.
   Every vertical rhythm value below is a clamp with a vh middle term, so
   on a short screen the padding, gaps and block margins tighten while the
   type stays at its designed size. A page that still runs long simply
   scrolls, then snaps on to the next one. */

.wrap{width:100%;max-width:var(--maxw);margin:0 auto}

/* ---------- TYPE --------------------------------------------------- */

h2{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(32px,3.6vw,54px);
  line-height:1.12;
  letter-spacing:.004em;
  text-align:center;
  margin:0 0 clamp(24px,3.2vh,56px);
}

h3{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(22px,1.85vw,34px);
  line-height:1.2;
  letter-spacing:.006em;
  margin:0 0 clamp(18px,2.4vh,34px);
}

p{margin:0}

.italic{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(18px,1.35vw,25px);
  text-align:center;
  /* no negative top margin — the heading→content gap is h2's margin-bottom,
     kept identical across every section */
  margin:0 0 clamp(28px,4vh,76px);
}

.prose{margin:0 auto;text-align:center}
.prose p{margin:0 0 clamp(1em,2.4vh,1.65em)}
.prose p:last-child{margin-bottom:0}
.prose.narrow{max-width:700px}
.prose.mid{max-width:880px}
.prose.wide{max-width:1120px}
.prose.tight p{margin-bottom:clamp(.7em,1.5vh,1.05em)}

.lede{
  text-align:center;max-width:640px;margin:0 auto;
  font-size:16px;line-height:1.62;
}

/* ---------- COLUMNS (What we do / Where we matter most) ------------- */

.cols{display:grid;gap:0;margin-top:clamp(24px,3.4vh,64px)}
.cols .col{padding:0 clamp(10px,1.5vw,34px);text-align:center}
.cols .col + .col{border-left:1px solid var(--line)}
.cols ul{list-style:none;margin:0;padding:0}
.cols li{margin:0 0 .72em;line-height:1.5}

.cols.four{grid-template-columns:repeat(4,1fr);align-items:start}
.cols.two{grid-template-columns:repeat(2,1fr);align-items:start;max-width:1060px;margin-left:auto;margin-right:auto}

/* ---------- WHO WE ARE --------------------------------------------- */

.people{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,4vh,80px) clamp(28px,3vw,60px);
  max-width:1440px;margin:0 auto;
}
.person{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* the portrait only — not the hexagram mark, which is also an <img> */
.person img:not(.person-mark){
  width:clamp(90px,7vw,132px);
  height:clamp(90px,7vw,132px);
  border-radius:50%;
  object-fit:cover;
  filter:grayscale(1);
  margin-bottom:clamp(11px,1.7vh,24px);
}
.person h3{
  font-size:clamp(19px,1.42vw,26px);
  margin:0 0 .4em;
  line-height:1.15;
}
.person .role{font-size:15px;line-height:1.42;margin:0 0 clamp(9px,1.4vh,18px);opacity:.92;max-width:270px}
/* official hexagram artwork (green at 50% opacity, baked in) */
.person-mark{width:78px;height:auto;margin:0 0 clamp(10px,1.6vh,20px)}
.person .bio{font-size:15px;line-height:1.56;max-width:340px}

/* ---------- GLOBAL PERSPECTIVE ------------------------------------- */

/* the artwork is trimmed to its own edges, so it runs the full content
   width inside the page gutters — but capped in height so the whole
   section fits one screen at full-screen sizes rather than clipping the
   map's lower edge */
.map{margin:clamp(14px,2.4vh,40px) auto 0;width:100%;display:flex;justify-content:center}
/* width:auto + both caps keeps the 2:1 aspect intact while scaling to
   whichever limit binds first — full content width on normal screens,
   height-capped on short/full-screen ones so the lower edge never clips */
.map img{width:auto;max-width:100%;height:auto;max-height:53vh}

/* ---------- SELECTED EXPERIENCE ------------------------------------ */

.logos{
  margin:clamp(26px,3.8vh,78px) auto 0;
  max-width:1400px;
  display:flex;flex-direction:column;
  gap:clamp(18px,2.6vh,48px);
}
.logo-row{
  display:grid;
  align-items:center;
  justify-items:center;
  gap:clamp(20px,2.6vw,54px);
}
.logo-row.six{grid-template-columns:repeat(6,1fr);padding:0 clamp(0px,5vw,110px)}
.logo-row.eight{grid-template-columns:repeat(8,1fr)}
/* Optical sizing: each logo is capped by its own target height (--lh, a
   unitless px value) so wide wordmarks and compact emblems read at equal
   visual weight instead of a single flat height cap. The vw term scales
   them down together on smaller screens while holding the tier ratios;
   the px term stops them growing past target on large screens. */
.logo-row img{
  --lh:50;
  max-height:min(calc(var(--lh) * 1px), calc(var(--lh) * 0.069vw));
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.9;
  transition:opacity .4s var(--ease);
}
.logo-row img:hover{opacity:1}

/* per-logo tiers (target heights from the approved proposal) */
.logo-row img[src*="nikko"],
.logo-row img[src*="the-ascott"],
.logo-row img[src*="w-hotels"],
.logo-row img[src*="ritz-carlton"]{--lh:64}

.logo-row img[src*="six-senses"]{--lh:60}
.logo-row img[src*="hilton"]{--lh:58}

.logo-row img[src*="mandarin-oriental"],
.logo-row img[src*="anantara"],
.logo-row img[src*="four-seasons"],
.logo-row img[src*="waldorf-astoria"],
.logo-row img[src*="grand-hyatt"]{--lh:50}

.logo-row img[src*="intercontinental"],
.logo-row img[src*="kempinski"],
.logo-row img[src*="le-meridien"],
.logo-row img[src*="the-luxe-nomad"],
.logo-row img[src*="alila"],
.logo-row img[src*="swissotel"],
.logo-row img[src*="ghm"],
.logo-row img[src*="pan-pacific"],
.logo-row img[src*="the-sanchaya"]{--lh:46}

.logo-row img[src*="como"],
.logo-row img[src*="aman"],
.logo-row img[src*="one-and-only"],
.logo-row img[src*="rosewood"],
.logo-row img[src*="parkroyal"]{--lh:40}

.logo-row img[src*="oakwood"],
.logo-row img[src*="urban-resort-concepts"],
.logo-row img[src*="the-chedi"]{--lh:32}

/* ---------- CONTACT ------------------------------------------------ */

.email{text-align:center;font-size:17px}
.email a{
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .4s var(--ease);
}
.email a:hover,.email a:focus-visible{border-bottom-color:var(--line)}

.socials{
  list-style:none;margin:clamp(24px,3.4vh,54px) 0 0;padding:0;
  display:flex;justify-content:center;gap:26px;
}
.socials a{
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
}
.socials svg{width:16px;height:16px;fill:var(--ink);opacity:.78}
.socials a:hover,.socials a:focus-visible{background:rgba(132,118,82,.1);border-color:var(--green)}

/* MANTLE wordmark sign-off, set well below the contact details */
.contact-mark{
  width:clamp(150px,15vw,260px);
  height:auto;
  margin:clamp(64px,13vh,150px) auto 0;
}

/* Contact runs on the brand green, so its type and marks switch to cream */
#contact{color:var(--cream)}
#contact .email a:hover,
#contact .email a:focus-visible{border-bottom-color:rgba(244,241,233,.6)}
#contact .socials a{border-color:rgba(244,241,233,.5)}
#contact .socials svg{fill:var(--cream);opacity:.9}
#contact .socials a:hover,
#contact .socials a:focus-visible{background:rgba(244,241,233,.12);border-color:var(--cream)}

/* ---------- HERO --------------------------------------------------- */

.hero{justify-content:center;position:relative;padding-top:clamp(92px,10vh,140px)}
.hero-wrap{position:relative}
.wordmark{
  margin:0;
  line-height:0;
  text-align:center;
}
.wordmark img{
  /* matches the source PDF: wordmark measures 16.3% of viewport width */
  width:clamp(130px,16.3vw,320px);
  height:auto;
  display:inline-block;
}
/* mark sits below the wordmark and lower down the page; absolute so it
   drops without pulling the centred wordmark up with it. 30% smaller than
   the previous mark (was clamp(52px,6.52vw,128px)). */
.hero-mark{
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  margin-top:clamp(46px,9vh,116px);
  width:clamp(36px,4.56vw,90px);
  height:auto;
}

/* ---------- FOOTER ------------------------------------------------- */

.foot{
  /* continues the green Contact screen — no cream strip at the very bottom.
     text muted via a translucent cream so the green background stays solid
     (opacity on the whole element would let the page show through) */
  background:var(--green);
  color:rgba(244,241,233,.72);
  padding:26px var(--gutter) 34px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  gap:16px;flex-wrap:wrap;
}

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

.r{opacity:0;transform:translateY(16px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.r.in{opacity:1;transform:none}
.hero .r{transform:none;transition-duration:1.3s}

@media (prefers-reduced-motion:reduce){
  .r{opacity:1;transform:none;transition:none}
}

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

@media (max-width:1280px){
  .logo-row.six{padding:0}
}

/* partners stay 3-across down to tablet width — dropping to 2 columns
   early made the page three rows deep on an ordinary laptop */
@media (max-width:1040px){
  .people{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1024px){
  .cols.four{grid-template-columns:repeat(2,1fr);gap:clamp(34px,5vh,54px) 0}
  .cols.four .col:nth-child(3){border-left:none}
  .logo-row.eight{grid-template-columns:repeat(4,1fr)}
  .logo-row.six{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:860px){
  body{font-size:16px}

  /* phones scroll naturally — no page snapping (the JS pager is desktop-only,
     and mandatory snap fights a tall single-column section on touch) */
  html{scroll-snap-type:none}

  .s{min-height:auto;padding:clamp(78px,11vh,110px) var(--gutter) clamp(84px,12vh,118px)}
  #hero{min-height:100svh;justify-content:center}

  /* nav → full-screen overlay, stacked (button unchanged) */
  .nav{
    inset:0;
    border-bottom:0;box-shadow:none;
    display:grid;place-items:center;
    text-align:center;
    transform:none;
    transition:opacity .4s var(--ease),visibility .4s var(--ease);
  }
  .nav ul{
    flex-direction:column;flex-wrap:nowrap;
    padding:0;gap:24px;
  }
  .nav li{margin:0}
  .nav a{font-size:19px;opacity:1}
  .nav a::after{display:none}

  h2{margin-bottom:28px}
  .italic{margin:0 0 36px}
  .lede{margin-top:0}

  .people{grid-template-columns:1fr;gap:38px;max-width:520px}
  .person img:not(.person-mark){width:78px;height:78px}

  .cols.four,.cols.two{grid-template-columns:1fr;gap:40px 0}
  .cols .col + .col{border-left:none;border-top:1px solid var(--line);padding-top:36px}
  .cols .col{padding-left:0;padding-right:0}

  .map img{max-height:none;width:100%}

  .logo-row.six,.logo-row.eight{grid-template-columns:repeat(3,1fr);gap:26px 20px}
  /* keep the optical tiers on mobile, scaled down to fit the small grid */
  .logo-row img{max-height:calc(var(--lh) * 0.62px)}

  .foot{justify-content:center;text-align:center}
}

@media (max-width:420px){
  .logo-row.six,.logo-row.eight{grid-template-columns:repeat(2,1fr)}
}