/* FIXEN overrides */
.fixen-wordmark{display:block;width:72%;margin:0 auto 0 0}
.footer__logo-content{position:static!important;transform:none!important;margin-top:32px}
/* hide legacy favorites widget */
a[href="#favourites"],.header__nav-first[aria-label="Favorites"]{display:none!important}
/* hero subtitle: sits in the x-e gap of the spread letters */
@media (min-width: 568px){
  .l-intro__content-text{left:39%;width:calc(var(--grid-col) * 5 + var(--grid-gutter) * 4)}
}

/* ---- boot: amblem centered -> zoom into its white area -> white ---- */
.preloader--landing .preloader__content-logo{display:none!important}
.preloader--landing .preloader__content{background:#0d0d0c!important}
.preloader--landing .preloader__progress{background-color:#efece7!important}
.fx-boot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.fx-boot-logo{display:block;width:200px;height:200px;transform-origin:48.5% 15.9%;animation:fx-boot-zoom 2.6s cubic-bezier(.55,0,.2,1) .4s both}
@media (max-width:567px){.fx-boot-logo{width:140px;height:140px}}
@keyframes fx-boot-zoom{
  0%{transform:scale(1)}
  38%{transform:scale(1)}
  100%{transform:scale(170)}
}
.fx-boot::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:fx-boot-white 2.6s cubic-bezier(.55,0,.2,1) .4s both}
@keyframes fx-boot-white{0%,86%{opacity:0}100%{opacity:1}}

/* ---- persistent fixed logo: spread center -> docks to the corner, never disappears ---- */
.fx-logo{position:fixed;inset:0;pointer-events:none;z-index:10}
.fx-lg-d,.fx-lg-m{position:absolute;height:auto;overflow:visible}
.fx-lg-d{left:var(--spacing-layout);top:50svh;transform:translateY(-50%);width:calc((100% - var(--spacing-layout) * 2) * .41)}
.fx-lg-m{left:var(--spacing-layout);top:42.1212121212svh;transform:translateY(-50%);width:calc((100% - var(--spacing-layout) * 2) * .77)}
:root{--fx-dock-left:calc(var(--spacing-layout) + var(--grid-col) * 2 + var(--grid-gutter) * 2)}
@keyframes fx-dock-d{to{left:var(--fx-dock-left);top:22px;transform:translateY(0);width:197px}}
/* tablet/narrow: the grid-offset dock overlaps the centered hero tagline, and a far-left dock
   sits on top of the corner menu button — so dock the wordmark just past the menu button and
   shrink it a touch so it also clears the centered tagline down to the smallest tablet width.
   (MQ-scoped @keyframes must come AFTER the default one to win when it matches.) */
@media (max-width:1199px){
  :root{--fx-dock-left:calc(var(--spacing-layout) + 48px)}
  @keyframes fx-dock-d{to{left:var(--fx-dock-left);top:22px;transform:translateY(0);width:160px}}
}
@keyframes fx-dock-m{to{left:var(--spacing-layout);top:20px;transform:translateY(0);width:112px}}
body:has(.preloader--landing.is-hidden) .fx-lg-d{animation:fx-dock-d 2.4s cubic-bezier(.16,1,.3,1) .2s both}
body:has(.preloader--landing.is-hidden) .fx-lg-m{animation:fx-dock-m 2.4s cubic-bezier(.16,1,.3,1) .2s both}
.modal--menu .modal__logo{display:none!important}
@media print{.fx-logo{display:none}}

/* ---- letters: hold spread under the preloader, converge char-by-char once it lifts ---- */
body:has(.preloader--landing:not(.is-hidden)) .fx-i{transform:translateX(686.5px)}
body:has(.preloader--landing:not(.is-hidden)) .fx-x{transform:translateX(1401px)}
body:has(.preloader--landing:not(.is-hidden)) .fx-e{transform:translateX(2152.5px)}
body:has(.preloader--landing:not(.is-hidden)) .fx-n{transform:translateX(2858px)}
body:has(.preloader--landing:not(.is-hidden)) .fx-i-m{transform:translateX(120.25px)}
body:has(.preloader--landing:not(.is-hidden)) .fx-x-m{transform:translateX(268.5px)}
body:has(.preloader--landing:not(.is-hidden)) .fx-e-m{transform:translateX(453.75px)}
body:has(.preloader--landing:not(.is-hidden)) .fx-n-m{transform:translateX(593px)}
@keyframes fx-in-i{from{transform:translateX(686.5px)}to{transform:translateX(0)}}
@keyframes fx-in-x{from{transform:translateX(1401px)}to{transform:translateX(0)}}
@keyframes fx-in-e{from{transform:translateX(2152.5px)}to{transform:translateX(0)}}
@keyframes fx-in-n{from{transform:translateX(2858px)}to{transform:translateX(0)}}
@keyframes fx-in-i-m{from{transform:translateX(120.25px)}to{transform:translateX(0)}}
@keyframes fx-in-x-m{from{transform:translateX(268.5px)}to{transform:translateX(0)}}
@keyframes fx-in-e-m{from{transform:translateX(453.75px)}to{transform:translateX(0)}}
@keyframes fx-in-n-m{from{transform:translateX(593px)}to{transform:translateX(0)}}
body:has(.preloader--landing.is-hidden) .fx-i{animation:fx-in-i 1.8s cubic-bezier(.16,1,.3,1) .1s both}
body:has(.preloader--landing.is-hidden) .fx-x{animation:fx-in-x 2s cubic-bezier(.16,1,.3,1) .22s both}
body:has(.preloader--landing.is-hidden) .fx-e{animation:fx-in-e 2.2s cubic-bezier(.16,1,.3,1) .34s both}
body:has(.preloader--landing.is-hidden) .fx-n{animation:fx-in-n 2.4s cubic-bezier(.16,1,.3,1) .46s both}
body:has(.preloader--landing.is-hidden) .fx-i-m{animation:fx-in-i-m 1.8s cubic-bezier(.16,1,.3,1) .1s both}
body:has(.preloader--landing.is-hidden) .fx-x-m{animation:fx-in-x-m 2s cubic-bezier(.16,1,.3,1) .22s both}
body:has(.preloader--landing.is-hidden) .fx-e-m{animation:fx-in-e-m 2.2s cubic-bezier(.16,1,.3,1) .34s both}
body:has(.preloader--landing.is-hidden) .fx-n-m{animation:fx-in-n-m 2.4s cubic-bezier(.16,1,.3,1) .46s both}

body:has(#menu:not(.is-hidden)) .fx-logo{opacity:1!important;transform:none!important}
/* life intro paragraph: 3-line copy overflows the original 2.13em box onto the media below - lift it */
@media (min-width: 568px){
  .l-life-text{transform:translateY(-2.4em)}
}
/* local <video> parity with prior iframe styling */
.background video{pointer-events:none}
/* local video is instant - hide the (old-frame) placeholder wherever a local <video> exists */
.background:has(video) .background__placeholder,
.background:has(video) picture{opacity:0!important;visibility:hidden!important}
/* menu + callback drawer backgrounds: fill the whole panel (were top-anchored, half-height) */
.modal--menu .modal__background-image .background,
#callback .background{position:absolute!important;inset:0!important;height:100%!important;width:100%!important}
.modal--menu .modal__background-image .background img,
#callback .background img{height:100%!important;width:100%!important;object-fit:cover!important;object-position:center!important;aspect-ratio:unset!important}
/* portrait allowed: rotate-gate removed — phones render the site in portrait (and landscape) */
.turn-message{display:none!important}
/* short landscape phones: use PC-style full-bleed backgrounds (not the portrait mobile column) */
@media (max-width:979px) and (max-height:415px) and (min-aspect-ratio:13/9){
  .background--cover.is-hidden--sm-down{display:block!important}
  .l-intro-background-mobile,
  .background--cover.is-hidden--md-up{display:none!important}
}
/* people carousel deco: was a ~59vw floating half element -> full-cover background behind the photos */
.l-people-carousel-deco__deco{inset:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important}
.l-people-carousel-deco__deco img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;aspect-ratio:unset!important}
/* carousel section: clean wave as FULL-section bg (not just behind the carousel), hide weird floating deco */
.section:has(.l-people-carousel){position:relative;isolation:isolate}
.section:has(.l-people-carousel)::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff url(/assets/images/media/landing/6.people/deco@xxxl.webp) center center / cover no-repeat}
.l-people-carousel-deco__deco{display:none!important}

/* contact form submit feedback */
.form-error{display:none;margin-top:14px;color:#e0625b;font-size:14px;line-height:1.5;}
.form-error.is-visible{display:block;}

/* portrait hero: mobile background was a ~210px top band (object-fit:contain) — make it full-bleed cover */
@media (max-aspect-ratio:13/9){
  .l-intro-background-mobile{inset:0!important;height:100%!important;width:100%!important}
  .l-intro-background-mobile video,
  .l-intro-background-mobile .background__placeholder,
  .l-intro-background-mobile img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;aspect-ratio:unset!important}
}

/* videos + their poster stills: soft-fade top & bottom edges into the background (no hard cut).
   Mask the whole media container (its box == the video box) so the fade also clips the poster
   screenshot — WebKit/iOS ignores mask-image on a <video>'s poster frame, so masking the
   container is what makes the gray still fade like the playing video. */
.background:has(video){
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* menu / close button icons: replaced the "deconstructed" scrape icons with a clean rounded
   family. Close X is now an inline rounded path (in index.html). The hamburger was two short
   staggered bars sitting almost on top of each other (read as broken) — align them into a
   clean 2-bar mark with an even gap and rounded ends. Animations are untouched: the button
   still crossfades hamburger <-> X, the bars still slide on hover, the modal close keeps its
   btn--rotation. */
.icon-menu{height:calc(var(--scale-px) * 10)}
.icon-menu span{border-radius:2px;width:calc(var(--scale-px) * 26)}
/* override the per-child stagger (higher specificity in the base CSS) so both bars align */
.icon-menu span:first-child,.icon-menu span:last-child{align-self:center}

/* ---- FAQ (minimal accordion; smooth grid 0fr->1fr; plus icon rotates 45deg -> x on open) ---- */
.fx-faq{background:#fff;color:#17181a;padding:calc(var(--spacing-layout) * 3) var(--spacing-layout)}
.fx-faq__inner{display:flex;gap:clamp(32px,6vw,96px);align-items:flex-start}
.fx-faq__head{flex:0 0 26%}
.fx-faq__title{margin:0;font-size:clamp(34px,5vw,72px);line-height:.98;letter-spacing:-.02em;font-weight:600;color:#17181a}
.fx-faq__note{margin:20px 0 0;color:#8a8f98;font-size:14px;line-height:1.5;max-width:22ch;text-transform:none}
.fx-faq__list{flex:1 1 auto;min-width:0;border-top:1px solid #e7e8ea}
.fx-faq__item{border-bottom:1px solid #e7e8ea}
.fx-faq__q{-webkit-appearance:none;appearance:none;background:none;border:0;margin:0;font:inherit;color:inherit;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;cursor:pointer;padding:28px 4px}
.fx-faq__q-text{font-size:clamp(17px,2vw,25px);font-weight:500;letter-spacing:-.01em;line-height:1.25;color:#17181a;text-transform:none;transition:opacity .2s ease}
.has-hover .fx-faq__q:hover .fx-faq__q-text{opacity:.55}
.fx-faq__icon{flex:0 0 auto;width:26px;height:26px;color:#17181a;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.fx-faq__icon svg{display:block;width:100%;height:100%}
.fx-faq__item.is-open .fx-faq__icon{transform:rotate(45deg)}
.fx-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.fx-faq__item.is-open .fx-faq__a{grid-template-rows:1fr}
.fx-faq__a-inner{overflow:hidden;min-height:0}
.fx-faq__a-inner p{margin:0;padding:0 40px 30px 4px;color:#5f646b;font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:64ch;text-transform:none}
@media (max-width:900px){
  .fx-faq{padding:calc(var(--spacing-layout) * 2) var(--spacing-layout)}
  .fx-faq__inner{flex-direction:column;gap:24px}
  .fx-faq__head{flex:none}
  .fx-faq__note{max-width:none}
  .fx-faq__a-inner p{padding-right:8px}
}

/* ---- Footer social link (LinkedIn) — sits above the contact button so the
       bottom-aligned button row stays flush; centred under the CTA on mobile ---- */
.fx-social{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:2px 0;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:currentColor;opacity:.5;text-decoration:none;transition:opacity .3s cubic-bezier(.25,.74,.22,.99)}
.has-hover .fx-social:hover{opacity:1}
.fx-social svg{flex:0 0 auto;width:13px;height:13px;display:block}
.fx-social--center{justify-content:center;width:100%;margin:20px 0 0}

/* FAQ sits in the same .container-h as .footer-office, alongside absolutely-positioned
   parallax backgrounds (.background{position:absolute}) that the parallax plugin slides
   downward on scroll. A position:static box always paints BELOW positioned siblings, so the
   FAQ was disappearing under the status blob. .footer-office already solves this with
   {position:relative;z-index:1} — mirror that exact idiom. z-index 1 also clears
   .image-slider-sticky (z-index:1) because the FAQ follows it in DOM order, and stays far
   below the header/menu/modal ladder (10-15/100/9999). */
.fx-faq{position:relative;z-index:1}

/* ---- FAQ full-bleed: kill the grey parallax strips flanking the panel ----
   z-index:1 above lifts the FAQ over the status blob, but only where the FAQ's box
   actually is. .fx-faq sits inside .container-h, which already pads horizontally, and
   .fx-faq padded again on top -> its white panel was inset one gutter per side while
   .l-status-slider-sticky-bg spans width:100vw, leaving two grey strips down the edges.
   Cancel the container's padding with an equal negative margin so the panel reaches the
   viewport edges. We read --container-h-padding-left/right (inherited from the parent
   .container-h) rather than hardcoding --spacing-layout: the two are defined to the same
   calc(var(--scale-px) * 20), but reading the container's own var keeps the cancellation
   exact even where that padding resolves to 0. Content keeps padding-inline
   var(--spacing-layout), so "Frequently asked" now lines up with the h2 above it and with
   "Build with FIXEN" below it (was indented one gutter further in).
   padding is split into longhands on purpose: the earlier @media (max-width:900px) rule
   uses the `padding` shorthand, and these later longhands would otherwise flatten its
   block value -- hence the re-statement below. */
.fx-faq{margin-inline:calc(var(--container-h-padding-left) * -1) calc(var(--container-h-padding-right) * -1);padding-block:calc(var(--spacing-layout) * 3);padding-inline:var(--spacing-layout)}
@media (max-width:900px){
  .fx-faq{padding-block:calc(var(--spacing-layout) * 2)}
}