/* ===================================================================
   FORGET THE OFFICE — Elevation layer (site-wide motion + polish)
   Injected after brand.css + site.css on every page except the
   bespoke ones. PURE PROGRESSIVE ENHANCEMENT: the reveal classes
   (.elv / .elv-img) are only ever added by elevate.js, and elevate.js
   guarantees to reveal them (IntersectionObserver + hard timeout +
   on-error unhide). If the script never runs, nothing is hidden.
   =================================================================== */

:root{ --elv-ease: cubic-bezier(.22,.61,.36,1); }

html{ scroll-behavior: smooth; }

/* ---- scroll reveal (classes applied by elevate.js only) ---- */
.elv{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--elv-ease) var(--elv-d, 0s),
              transform .7s var(--elv-ease) var(--elv-d, 0s);
  will-change: opacity, transform;
}
.elv-in{ opacity: 1 !important; transform: none !important; }

/* image / figure reveal — a touch of scale for depth */
.elv-img{
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s var(--elv-ease), transform 1.1s var(--elv-ease);
}
.elv-img.elv-in{ opacity: 1 !important; transform: none !important; }

/* ---- hero background slow zoom (Ken Burns) ---- */
.elv-kenburns{ animation: elvKenburns 24s var(--elv-ease) forwards; will-change: transform; }
@keyframes elvKenburns{ from{ transform: scale(1.10); } to{ transform: scale(1.03); } }

/* ---- universal polish (safe even where the class is absent) ---- */
.fto-card{ transition: box-shadow .3s ease, transform .3s ease; }
.fto-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 44px rgba(28,44,72,0.12); }

/* lift + reveal-friendly figures: gentle zoom on hover where a figure wraps an image */
.elv-figure{ overflow: hidden; }
.elv-figure img{ transition: transform 1.1s var(--elv-ease); display: block; }
.elv-figure:hover img{ transform: scale(1.045); }

/* keep buttons feeling responsive everywhere */
.fto-btn{ transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.fto-btn:hover{ transform: translateY(-1px); }

/* ---- reusable full-bleed parallax "band" (a cinematic breather) ----
   Usage:
   <section class="fto-band" style="--band-img:url('assets/img/brand/X.jpg')">
     <div class="fto-band__bg" aria-hidden="true"></div>
     <div class="fto-band__scrim" aria-hidden="true"></div>
     <div class="fto-container">
       <p class="fto-band__kicker">Kicker</p>
       <p class="fto-band__line">Big serif line with an <em>accent</em>.</p>
     </div>
   </section>
   Add class fto-band--left for left-aligned text (use with figure-on-right photos). */
.fto-band{
  position: relative; width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  min-height: 52vh; display: flex; align-items: center;
  color: #fff; overflow: hidden; background: #2E4C78;
}
.fto-band__bg{
  position: absolute; inset: 0;
  /* background-image is set inline on the element so its relative URL resolves
     against the page, not this stylesheet. */
  background-size: cover; background-position: center 42%;
  background-attachment: fixed;
}
.fto-band__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,32,56,0.44) 0%, rgba(20,32,56,0.58) 100%);
}
.fto-band--left .fto-band__scrim{
  background: linear-gradient(90deg, rgba(18,30,54,0.80) 0%, rgba(18,30,54,0.45) 46%, rgba(18,30,54,0.12) 100%);
}
.fto-band .fto-container{ position: relative; z-index: 2; padding: 76px 24px; text-align: center; }
.fto-band--left .fto-container{ text-align: left; }
.fto-band__kicker{ text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--fs-label); font-weight: 700; color: var(--gold); margin: 0 0 14px; }
.fto-band__line{ font-family: var(--font-serif); font-size: var(--fs-display); line-height: 1.12; margin: 0 auto; max-width: 860px; }
.fto-band--left .fto-band__line{ margin: 0; max-width: 720px; }
.fto-band__line em{ color: var(--gold); font-style: italic; }
@media (max-width: 860px){ .fto-band__bg{ background-attachment: scroll; } .fto-band{ min-height: 44vh; } }

/* ===================================================================
   ACCENT DETAILING — soft sage (#B2C6AE) + dusty sky (#91B0CC)
   Sparing touches only: hairline rules, small tags, photo frames,
   buttons. Never used for body text.
   =================================================================== */

/* thin decorative divider: sage→sky gradient with a centred node */
.fto-rule{ display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0; }
.fto-rule::before, .fto-rule::after{ content: ""; height: 2px; width: 72px; border-radius: 2px; }
.fto-rule::before{ background: linear-gradient(90deg, transparent, var(--sage)); }
.fto-rule::after{ background: linear-gradient(90deg, var(--sky), transparent); }
.fto-rule i{ width: 7px; height: 7px; background: var(--sky); box-shadow: 0 0 0 4px rgba(145,176,204,0.16); flex: 0 0 auto; transform: rotate(45deg); }
.fto-center .fto-rule, .mood-head .fto-rule{ margin-left: auto; margin-right: auto; }

/* short accent bar (place under an eyebrow/heading) */
.fto-accent-bar{ display: block; width: 46px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sage), var(--sky)); margin: 14px 0 0; }
.fto-center .fto-accent-bar{ margin-left: auto; margin-right: auto; }

/* a quiet coloured hairline at the top of a section */
.fto-section--edge-sage{ border-top: 3px solid var(--sage); }
.fto-section--edge-sky{ border-top: 3px solid var(--sky); }

/* tag + button accent variants */
.fto-tag--sage{ background: var(--sage); color: #2c4632; }
.fto-tag--sky{ background: var(--sky); color: #1f3350; }
.fto-btn--sky{ background: var(--sky); color: #17263c; border-color: var(--sky); }
.fto-btn--sky:hover{ background: #7f9fbe; border-color: #7f9fbe; color: #fff; }

/* matted photo: hairline sage/sky mat + slow hover zoom */
.fto-photo{ display: block; margin: 0; overflow: hidden; background: #fff; }
.fto-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--elv-ease); }
.fto-photo:hover img{ transform: scale(1.05); }
.fto-photo--sage{ padding: 9px; box-shadow: inset 0 0 0 1px var(--sage); }
.fto-photo--sky{ padding: 9px; box-shadow: inset 0 0 0 1px var(--sky); }

/* ---- editorial MOOD gallery (uniform tiles + one feature, staggered reveal) ---- */
.mood-grid{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 188px; gap: 14px; }
.mood-fig{ position: relative; margin: 0; overflow: hidden; background: var(--rajola); }
.mood-fig img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--elv-ease); }
.mood-fig:hover img{ transform: scale(1.06); }
.mood-fig--feature{ grid-column: span 2; grid-row: span 2; }
.mood-fig::after{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--sage), var(--sky)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--elv-ease); }
.mood-fig:hover::after{ transform: scaleX(1); }
.mood-fig figcaption{ position: absolute; left: 12px; bottom: 12px; z-index: 2; font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; padding: 5px 11px; background: rgba(28,44,72,0.40); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mood-fig--sage figcaption{ background: rgba(120,146,116,0.62); }
.mood-fig--sky figcaption{ background: rgba(74,106,148,0.60); }
/* staggered child reveal — keyed on elevate.js grid class, so figures are
   ONLY hidden after JS flags the grid (reduced-motion / no-JS: fully visible) */
.mood-grid .mood-fig{ transition: opacity .8s var(--elv-ease), transform .9s var(--elv-ease); }
.mood-grid.elv .mood-fig{ opacity: 0; transform: translateY(20px) scale(1.03); }
.mood-grid.elv-in .mood-fig{ opacity: 1; transform: none; }
.mood-grid.elv-in .mood-fig:nth-child(2){ transition-delay: .07s; }
.mood-grid.elv-in .mood-fig:nth-child(3){ transition-delay: .14s; }
.mood-grid.elv-in .mood-fig:nth-child(4){ transition-delay: .21s; }
.mood-grid.elv-in .mood-fig:nth-child(5){ transition-delay: .28s; }
.mood-grid.elv-in .mood-fig:nth-child(6){ transition-delay: .35s; }
.mood-grid.elv-in .mood-fig:nth-child(7){ transition-delay: .42s; }
.mood-grid.elv-in .mood-fig:nth-child(8){ transition-delay: .49s; }
.mood-grid.elv-in .mood-fig:nth-child(9){ transition-delay: .56s; }
@media (max-width: 860px){ .mood-grid{ grid-auto-rows: 150px; gap: 11px; } }
@media (max-width: 560px){
  .mood-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; }
  .mood-fig--feature{ grid-column: span 2; grid-row: span 2; }
}

/* soft dusty-sky band scrim variant (for a calmer, lighter cinematic band) */
.fto-band--sky{ background: #2E4C78; }
.fto-band--sky .fto-band__scrim{ background: linear-gradient(180deg, rgba(46,76,120,0.42) 0%, rgba(46,76,120,0.60) 100%); }
.fto-band--sky .fto-band__kicker{ color: #cfe0f0; }
.fto-band--sky .fto-band__line em{ color: #b9d0e6; }

/* ---- respect reduced motion: never hide, never move ---- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .elv, .elv-img{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .elv-kenburns{ animation: none !important; }
  .fto-card:hover, .fto-btn:hover, .elv-figure:hover img{ transform: none !important; }
  .mood-grid.elv .mood-fig{ opacity: 1 !important; transform: none !important; }
  .mood-fig:hover img, .fto-photo:hover img{ transform: none !important; }
}