/* ===================================================================
   FORGET THE OFFICE — Site chrome (sticky header + footer)
   Injected for the standalone Cloudflare Pages build. Fully
   self-contained: defines its own fonts, colour tokens and base
   nav layout so the header/footer render correctly even on pages
   that don't load brand.css (e.g. collective-sales). Do not paste
   into Ivorey. Loads after brand.css so its scoped rules win.
   =================================================================== */

/* fonts (mirror brand.css so any page has them) */
@font-face { font-family:'Juana'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/Juana-Regular.woff2') format('woff2'); }
@font-face { font-family:'Juana'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/Juana-RegularItalic.woff2') format('woff2'); }
@font-face { font-family:'Garet'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/Garet-Regular.woff2') format('woff2'); }
@font-face { font-family:'Garet'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/Garet-Bold.woff2') format('woff2'); }

/* colour + type tokens (fallbacks; identical where brand.css already sets them) */
:root{
  --blue-klein:#3B5F95;
  --terracotta:#C28868;
  --gold:#E7BB60;
  --rajola:#E8E4DD;
  --off-white:#FFFFFF;
  --site-header-h:68px;
}
:root{
  --font-serif: 'Juana','Georgia',serif;
  --font-sans: 'Garet',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
/* Type scale — mirror of brand.css (single source of truth is brand.css; this copy
   exists so pages that don't load brand.css, e.g. the Motion Room, get the same steps) */
:root{
  --fs-label:   0.75rem;
  --fs-caption: 0.9rem;
  --fs-body:    1rem;
  --fs-large:   1.2rem;
  --fs-h3:      clamp(1.3rem, 1.2vw + 0.95rem, 1.5rem);
  --fs-quote:   clamp(1.6rem, 1.4vw + 1.1rem, 1.9rem);
  --fs-h2:      clamp(1.8rem, 3.2vw, 2.6rem);
  --fs-display: clamp(2.1rem, 4.4vw, 3.2rem);
  --fs-h1:      clamp(2.5rem, 5.2vw, 4rem);
  --ls-label:   0.14em;
}

/* keep in-page anchors clear of the sticky header */
[id]{ scroll-margin-top:112px; }

/* ---------- HEADER ---------- */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.90);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(59,95,149,0.10);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled{
  background: rgba(255,255,255,0.98);
  box-shadow: 0 8px 30px rgba(28,44,72,0.10);
}
/* base container + nav layout (self-contained) */
.site-header .fto-container{
  width:100%; max-width:1320px; margin:0 auto; padding:0 24px;
}
.site-header .fto-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:22px; padding-bottom:22px; gap:24px; flex-wrap:nowrap;
}
.site-header .fto-logo{ display:flex; align-items:center; line-height:0; text-decoration:none; }
.site-header .fto-logo img{ height:58px; width:auto; display:block; }
.site-nav{ display:flex; align-items:center; }
.site-header .fto-nav-links{
  display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:nowrap;
}
.site-header .fto-nav-links a{
  font-family:var(--font-sans); color:var(--blue-klein); text-decoration:none;
  font-size:0.9rem; font-weight:600; padding:6px 0; position:relative; white-space:nowrap;
}
.site-header .fto-nav-links a.is-active{ color: var(--terracotta); }
.site-header .fto-nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background: var(--terracotta); transition: right .25s ease;
}
.site-header .fto-nav-links a:hover::after,
.site-header .fto-nav-links a.is-active::after{ right:0; }

/* ---------- dropdown ("Ways to Work with Us") ---------- */
.site-header .has-dropdown{ position:relative; }
.site-header .nav-parent{ display:inline-flex; align-items:center; gap:6px; }
.nav-caret{ width:9px; height:6px; opacity:.7; transition:transform .25s ease; }
.site-header .has-dropdown:hover .nav-caret,
.site-header .has-dropdown:focus-within .nav-caret{ transform:rotate(180deg); }
/* invisible bridge so the pointer can cross the gap without closing the menu */
.site-header .has-dropdown::after{ content:""; position:absolute; top:100%; left:0; right:0; height:18px; }
.site-header .nav-dropdown{
  position:absolute; top:calc(100% + 18px); left:-16px; min-width:236px;
  list-style:none; margin:0; padding:8px 0;
  background:#fff; border:1px solid rgba(59,95,149,0.10);
  box-shadow:0 22px 46px rgba(28,44,72,0.17);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index:100;
}
.site-header .has-dropdown:hover .nav-dropdown,
.site-header .has-dropdown:focus-within .nav-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s;
}
.site-header .nav-dropdown li{ border:0; }
.site-header .nav-dropdown a{ display:block; padding:11px 24px; font-size:0.88rem; font-weight:600; white-space:nowrap; }
.site-header .nav-dropdown a::after{ display:none; }
.site-header .nav-dropdown a:hover{ background:var(--rajola); color:var(--terracotta); }

/* ---------- grouped mega-menu ("Work With Us") ---------- */
.site-header .nav-mega{ min-width:312px; padding:14px 0; }
/* group descriptor line (e.g. under Business Cycles) */
.site-header .nav-group-desc{ margin:1px 0 8px; padding:0 24px; font-size:0.78rem; line-height:1.35; color:var(--blue-klein); opacity:0.68; max-width:258px; }
/* mega links read as clear CTAs with a leading arrow */
.site-header .nav-mega .nav-group > ul a{ font-weight:700; color:var(--blue-klein); }
.site-header .nav-mega .nav-group > ul a::before{ content:"\2192"; margin-right:9px; color:var(--terracotta); font-weight:700; }
.site-header .nav-mega .nav-group > ul a:hover{ color:var(--terracotta); }
.site-header .nav-mega .nav-group{ list-style:none; padding:4px 0; }
.site-header .nav-mega .nav-group + .nav-group{
  margin-top:2px; border-top:1px solid rgba(59,95,149,0.09); padding-top:8px;
}
.site-header .nav-group-label{
  display:block; font-family:var(--font-sans); font-size:0.64rem; font-weight:700;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--terracotta);
  padding:6px 24px 5px; white-space:nowrap;
}
.site-header a.nav-group-label:hover{ color:var(--blue-klein); background:transparent; text-decoration:underline; }
.site-header a.nav-group-label::after{ display:none; }
.site-header .nav-mega .nav-group > ul{ list-style:none; margin:0; padding:0; }
.site-header .nav-mega .nav-group > ul a{ font-weight:600; }

/* hamburger */
.site-nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:0;
  width:44px; height:44px; color:var(--blue-klein); align-items:center; justify-content:center;
}
.site-nav-toggle svg{ width:26px; height:26px; }

@media (max-width: 1024px){
  .site-nav-toggle{ display:inline-flex; }
  .site-header .fto-nav{ flex-direction:row; align-items:center; gap:16px; position:relative; padding-top:16px; padding-bottom:16px; }
  .site-header .fto-logo img{ height:48px; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid rgba(59,95,149,0.12);
    box-shadow:0 20px 34px rgba(28,44,72,0.14);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .site-nav.open{ max-height:86vh; overflow-y:auto; }
  .site-header .fto-nav-links{
    flex-direction:column; align-items:stretch; gap:0; padding:6px 24px 18px;
  }
  .site-header .fto-nav-links > li{ border-bottom:1px solid rgba(59,95,149,0.08); }
  .site-header .fto-nav-links > li:last-child{ border-bottom:0; }
  .site-header .fto-nav-links a{ display:block; padding:15px 2px; font-size:1.02rem; }
  .site-header .fto-nav-links a::after{ display:none; }

  /* dropdown collapses to an indented sub-list, always shown when the menu is open */
  .site-header .has-dropdown::after{ display:none; }
  .nav-caret{ display:none; }
  .site-header .nav-dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    background:transparent; border:0; box-shadow:none; min-width:0;
    padding:0 0 8px; transition:none;
  }
  .site-header .nav-dropdown li{ border:0; }
  .site-header .nav-dropdown a{ padding:11px 2px 11px 22px; font-size:0.96rem; opacity:.82; }

  /* mega-menu collapses to labelled, indented groups when the mobile menu is open */
  .site-header .nav-mega{ padding:2px 0 8px; }
  .site-header .nav-mega .nav-group{ padding:0; }
  .site-header .nav-mega .nav-group + .nav-group{ border-top:0; margin-top:0; padding-top:4px; }
  .site-header .nav-group-label{ padding:10px 2px 2px; opacity:1; }
  .site-header .nav-mega .nav-group > ul a{ padding:9px 2px 9px 22px; }
}

/* ---------- FOOTER (mirrors the live forgettheoffice.com footer: centred logo · menu · legal · copyright) ---------- */
.site-footer{ background:var(--blue-klein); color:#fff; padding:60px 0 44px; text-align:center; }
.site-footer .fto-container{ width:100%; max-width:1140px; margin:0 auto; padding:0 24px; }
.site-footer__inner{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.site-footer__logo{ display:inline-flex; line-height:0; text-decoration:none; }
.site-footer__logo img{ height:58px; width:auto; display:block; }
.site-footer__legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; width:100%; max-width:560px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.18); }
.site-footer__legal a{ color:#fff; text-decoration:none; font-size:var(--fs-caption); opacity:0.8; }
.site-footer__legal a:hover{ opacity:1; color:var(--gold); }
.site-footer__copyright{ margin:0; font-size:var(--fs-caption); opacity:0.7; }

/* ---------- SAGE section — soft sage + brand navy text (was mauve-brown until 2026-10-01), terracotta accents ---------- */
.fto-section--sage{ background:#DCE6D6; color:var(--blue-klein); }
.fto-section--sage h1, .fto-section--sage h2, .fto-section--sage h3, .fto-section--sage h4{ color:var(--blue-klein); }
.fto-section--sage .fto-eyebrow{ color:var(--terracotta); }
.fto-section--sage em{ color:var(--terracotta); }