/* ===================================================================
   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;
}

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

/* ---------- 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:1140px; margin:0 auto; padding:0 24px;
}
.site-header .fto-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:24px; flex-wrap:nowrap;
}
.site-header .fto-logo{
  font-family:var(--font-serif); font-size:1.32rem; line-height:1;
  letter-spacing:-0.01em; color:var(--blue-klein); text-decoration:none; white-space:nowrap;
}
.site-header .fto-logo em{ font-style:italic; color:var(--blue-klein); }
.site-nav{ display:flex; align-items:center; }
.site-header .fto-nav-links{
  display:flex; align-items:center; gap:24px; 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; }

/* 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: 1040px){
  .site-nav-toggle{ display:inline-flex; }
  .site-header .fto-nav{ flex-direction:row; align-items:center; gap:16px; position:relative; padding-top:12px; padding-bottom:12px; }
  .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:82vh; }
  .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; }
}

/* ---------- FOOTER (only injected on pages that load brand.css; base kept self-contained for safety) ---------- */
.site-footer{ background:var(--blue-klein); color:#fff; padding:72px 0 34px; }
.site-footer .fto-container{ width:100%; max-width:1140px; margin:0 auto; padding:0 24px; }
.site-footer__grid{
  display:grid; grid-template-columns:1.7fr 1fr 1.1fr 1.2fr; gap:44px;
}
.site-footer h4{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--gold); margin:0 0 18px; font-weight:700;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:11px; }
.site-footer a{ color:#fff; text-decoration:none; opacity:.9; }
.site-footer a:hover{ opacity:1; color:var(--gold); }
.site-footer p{ margin:0 0 12px; }
.site-footer__brand .fto-logo{ font-family:var(--font-serif); color:#fff; text-decoration:none; font-size:1.4rem; }
.site-footer__brand .fto-logo em{ font-style:italic; color:#fff; }
.site-footer__brand p{ opacity:.82; max-width:320px; margin:16px 0 16px; font-size:.95rem; line-height:1.6; }
.site-footer__ig{ font-weight:700; }
.site-footer__cta p{ margin:0 0 6px; opacity:.9; }
.site-footer__cta .fto-btn{ margin-top:14px; }
.site-footer .fto-footer-bottom{
  margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.2);
  font-size:.85rem; opacity:.8; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
@media (max-width:860px){
  .site-footer__grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .site-footer__brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .site-footer__grid{ grid-template-columns:1fr; }
}