/* ==========================================================================
   folio.css, 2026-10-08. An index + centre-viewport portfolio layout for the
   Creative and Corporate pages, in the minimal editorial register the owner
   referenced (cathydolle.com): a central vertical filmstrip of the work with
   numbered project titles flanking it, a List / Slider view toggle, and an
   About overlay. Original implementation in the eljaycreative brand
   (Articulat, cobalt accent), theme-aware light + dark.
   ========================================================================== */

:root {
  --fo-bg: #ffffff;
  --fo-ink: #141414;
  --fo-mut: #8c8c8c;
  --fo-faint: #c3c3c3;
  --fo-line: rgba(0, 0, 0, 0.12);
  --fo-accent: #141414;  /* no coloured hovers: hover simply brightens to ink */
  --fo-sans: "Articulat CF", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* spacing tokens (used site-wide; mobile filmstrip rhythm + side gutter) */
  --fo-gutter-m: 16px;                 /* side gutter on small screens */
  --fo-gap-m: clamp(30px, 8vw, 48px);  /* vertical gap between mobile images */
  --fo-strip-gutter: clamp(16px, 5vw, 40px); /* inset for the mobile slider previews so they (and the intro animation, which samples their width) aren't full-width */
}
@media (prefers-color-scheme: dark) {
  :root {
    --fo-bg: #0b0b0d;
    --fo-ink: #ededed;
    --fo-mut: #7b7b80;
    --fo-faint: #45454a;
    --fo-line: rgba(255, 255, 255, 0.14);
    --fo-accent: #ededed;
  }
}

.folio-page {
  margin: 0;
  background: var(--fo-bg);
  color: var(--fo-ink);
  font-family: var(--fo-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.fo-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

/* --- Fixed chrome --------------------------------------------------------- */
.fo-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 2.4vw, 30px);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  pointer-events: none;
}
.fo-nav > * { pointer-events: auto; }
.fo-nav a, .fo-nav button { color: var(--fo-ink); text-decoration: none; background: none; border: 0; font: inherit; font-weight: 400; text-transform: uppercase; cursor: pointer; }
.fo-nav a:hover, .fo-nav button:hover { color: var(--fo-accent); }
.fo-brand { font-weight: 400; letter-spacing: 0.04em; }
.fo-nav-group { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); margin-right: 0; }
.fo-nav-left { display: flex; align-items: baseline; gap: clamp(44px, 10vw, 170px); }
.fo-toggle { display: inline-flex; gap: 12px; }
.fo-toggle button { color: var(--fo-mut); text-transform: uppercase; }
.fo-toggle button[aria-pressed="true"] { color: var(--fo-ink); }
.fo-switch { display: inline-flex; gap: 14px; margin-right: clamp(40px, 8vw, 150px); }
.fo-switch a { color: var(--fo-mut); text-transform: uppercase; }
.fo-switch a[aria-current="page"] { color: var(--fo-ink); }
.fo-contact {
  position: fixed; right: clamp(16px, 2.4vw, 30px); bottom: 18px; z-index: 60;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fo-ink); text-decoration: none;
}
.fo-contact:hover { color: var(--fo-accent); }
/* 2026-10-27: Archive (VHS archive) mirrors Contact in the bottom-left corner */
.fo-archive {
  position: fixed; left: clamp(16px, 2.4vw, 30px); bottom: 18px; z-index: 60;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fo-ink); text-decoration: none;
}
.fo-archive:hover { color: var(--fo-accent); }

/* --- Mobile header: menu button + full-screen menu overlay ----------------
   Hidden on desktop; the max-width:768px block below shows the button and
   collapses the inline nav into this menu. */
.fo-burger {
  display: none; align-items: center; gap: 9px; pointer-events: auto;
  font: inherit; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fo-ink); background: none; border: 0; cursor: pointer; padding: 4px 0;
}
.fo-burger .bars { position: relative; display: inline-block; width: 20px; height: 9px; }
.fo-burger .bars::before, .fo-burger .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; }
.fo-burger .bars::before { top: 0; } .fo-burger .bars::after { bottom: 0; }

.fo-menu {
  position: fixed; inset: 0; z-index: 85; background: var(--fo-bg);
  display: flex; flex-direction: column;
  padding: 16px var(--fo-gutter-m) calc(26px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s;
}
.fo-menu.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease; }
@media (prefers-reduced-motion: reduce) { .fo-menu { transition: none; } }
.fo-menu-top { display: flex; align-items: center; justify-content: space-between; height: 32px; }
.fo-menu-brand { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-ink); text-decoration: none; font-weight: 400; }
.fo-menu-close { font: inherit; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-ink); background: none; border: 0; cursor: pointer; }
.fo-menu-links { display: flex; flex-direction: column; margin-top: clamp(28px, 9vh, 70px); }
.fo-menu-links a, .fo-menu-links button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: inherit; font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--fo-ink); text-decoration: none; background: none; border: 0; text-align: left;
  padding: 16px 0; border-bottom: 1px solid var(--fo-line); cursor: pointer; width: 100%;
}
.fo-menu-links a[aria-current="page"] { color: var(--fo-mut); }
.fo-menu-view { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 18px; }
.fo-menu-view .lbl { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); }
.fo-menu-view button { font: inherit; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); background: none; border: 0; cursor: pointer; padding: 0; }
.fo-menu-view button[aria-pressed="true"] { color: var(--fo-ink); }
.fo-menu-foot { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); }
.fo-menu-foot a { color: var(--fo-mut); text-decoration: none; }
@media (min-width: 769px) { .fo-menu { display: none; } }

/* --- Slider view: left index · centre filmstrip · right index ------------- */
.fo-slider { display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; }
.fo-index { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.2vh, 26px); padding: 0 clamp(16px, 2.4vw, 34px); }
.fo-item { display: flex; align-items: baseline; gap: 14px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); text-decoration: none; cursor: pointer; transition: color .25s; background: none; border: 0; font-family: inherit; width: 100%; }
.fo-item .num { color: var(--fo-faint); font-variant-numeric: tabular-nums; }
.fo-item:hover, .fo-item.is-active { color: var(--fo-ink); }
.fo-index.left .fo-item { justify-content: flex-start; text-align: left; }
.fo-index.right .fo-item { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }

.fo-stage { position: relative; }
.fo-strip { display: flex; flex-direction: column; align-items: center; gap: 0; }
.fo-shot { position: relative; display: block; margin: 0 auto; text-decoration: none; overflow: hidden; background: var(--fo-line); }
/* mixed orientation: horizontals wide + short (16:9), verticals narrow + tall
   (3:4). Set per project (class), not nth-child, so the loop clones stay true. */
.fo-shot.landscape { width: 100%; aspect-ratio: 16 / 9; }
.fo-shot.portrait { width: 62%; aspect-ratio: 3 / 4; }
.fo-shot img, .fo-shot video { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.02); transition: filter .5s ease, opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); background: transparent; }
.fo-js .fo-shot img, .fo-js .fo-shot video { opacity: 0; transform: scale(1.04); }
.fo-js .fo-shot.is-in img, .fo-js .fo-shot.is-in video { opacity: 1; transform: none; }
.fo-shot.is-active img, .fo-shot:hover img, .fo-shot.is-active video, .fo-shot:hover video { filter: grayscale(0); }
.fo-shot .fo-cap { display: none; }

/* centre open-project marker: an empty square that fills and slides OPEN PROJECT
   up from below on hover. Reads on dark OR bright imagery via a white mark with a
   thin dark halo (box-shadow / text-shadow). NOTE: mix-blend-mode:difference was
   removed 2026-10-14 — a fixed blend layer compositing against scrolling images +
   looping videos was crashing the GPU process over long uptime (endless-load bug). */
.fo-marker { position: fixed; top: 50%; left: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; color: #fff; }
/* the square is anchored to the exact centre; the label sits to its right */
.fo-marker-box { position: absolute; left: 0; top: 0; width: 13px; height: 13px; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); display: grid; place-items: center; transform: translate(-50%, -50%); transition: transform .4s cubic-bezier(.2,.7,.2,1), width .4s cubic-bezier(.2,.7,.2,1), height .4s cubic-bezier(.2,.7,.2,1); }
.fo-marker-dot { width: 5px; height: 5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); transform: scale(0); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.fo-marker-label { position: absolute; left: 0; top: 0; transform: translate(18px, -50%); overflow: hidden; }
.fo-marker-label span { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; transform: translateX(-8px); opacity: 0; text-shadow: 0 1px 5px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.65); transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
body.mk-on .fo-marker-box { transform: translate(-50%, -50%) rotate(90deg); width: 20px; height: 20px; }
body.mk-on .fo-marker-dot { transform: scale(1); }
body.mk-on .fo-marker-label span { transform: translateX(0); opacity: 1; }

/* project-to-project transition: driven by the cross-document View Transition
   API so the browser holds snapshots across the navigation (no reload flash).
   Only the over-scroll move animates (folio.js adds fo-vt-down / fo-vt-up and
   skips every other navigation): the incoming project slides over the current
   one from below (next) or above (previous); the outgoing one just holds. */
/* DISABLED 2026-10-13: Chrome's cross-document View Transitions were leaving a stuck
   black snapshot across navigations (worse now that pages carry looping <video> reels,
   which the transition must snapshot) -> whole tab goes black "after a while". Turning
   `navigation: auto` off falls back to normal, reliable navigation. The fo-vt-* keyframes
   + ::view-transition rules below are now inert (kept for easy re-enable if the Chrome
   bug is ever fixed). Re-enable by restoring the line below. */
/* @view-transition { navigation: auto; } */
@keyframes fo-vt-from-below { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fo-vt-from-above { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* outgoing page holds position but dims (a veil) so the eye follows the incoming
   project as it slides over; incoming does all the moving. */
@keyframes fo-vt-dim { from { opacity: 1; filter: brightness(1); } to { opacity: .5; filter: brightness(.82); } }
html.fo-vt-down::view-transition-new(root) { animation: .62s cubic-bezier(.76, 0, .24, 1) both fo-vt-from-below; z-index: 2; }
html.fo-vt-up::view-transition-new(root)   { animation: .62s cubic-bezier(.76, 0, .24, 1) both fo-vt-from-above; z-index: 2; }
html.fo-vt-down::view-transition-old(root), html.fo-vt-up::view-transition-old(root) { animation: .62s ease both fo-vt-dim; z-index: 1; }

/* --- List view ------------------------------------------------------------ */
.fo-list { display: none; padding: 20vh clamp(16px, 2.4vw, 30px) 14vh; max-width: 1280px; margin: 0 auto; }
.fo-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: baseline; gap: 20px; padding: clamp(11px, 1.6vh, 18px) 0; border-top: 1px solid var(--fo-line); text-decoration: none; color: var(--fo-mut); transition: color .25s; }
.fo-row:last-child { border-bottom: 1px solid var(--fo-line); }
.fo-row:hover { color: var(--fo-ink); }
.fo-row .num { font-size: 12px; letter-spacing: 0.04em; color: var(--fo-faint); font-variant-numeric: tabular-nums; }
.fo-row .ti { font-size: 12px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: inherit; line-height: 1.3; }
.fo-row .ca { display: none; }
.fo-row:hover .ti { color: var(--fo-ink); font-weight: 400; }

/* view switching */
body.view-list .fo-slider, body.view-list .fo-marker { display: none; }
/* the centre open-project marker belongs only to the slider; hide it on gallery
   and detail pages (which carry the overlays block but no filmstrip). */
body:not(:has(.fo-strip)) .fo-marker { display: none; }
body.view-list .fo-list { display: block; }

/* --- Overlays (About, Contact) -------------------------------------------- */
/* info overlay: the page washes back to ~15% behind a translucent sheet and the
   text layer sits on top; fades in over ~0.4s (our take on the reference's
   wash-to-15% info panel). */
.fo-ov { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--fo-bg) 85%, transparent); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.fo-ov.is-open { opacity: 1; visibility: visible; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) { .fo-ov { transition: none; } }
.fo-ov-inner { max-width: 1000px; margin: 0 auto; padding: 16vh clamp(20px, 5vw, 60px) 12vh; }
.fo-ov-close { position: fixed; top: 16px; right: clamp(16px, 2.4vw, 30px); z-index: 71; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; background: none; border: 0; color: var(--fo-ink); cursor: pointer; }
.fo-ov-close { font-weight: 400; }
.fo-ov-close:hover { color: var(--fo-accent); }
.fo-ov h2 { font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; margin: 0 0 clamp(20px, 4vh, 38px); max-width: 48ch; }
.fo-about-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.fo-about-grid img { width: 100%; height: auto; display: block; filter: grayscale(1); }
/* Same frame, rotated: the vertical is 4:5 (V wide x 1.25V tall); the horizontal
   is 5:4 (1.25V wide x V tall), so the horizontal's WIDTH equals the vertical's
   HEIGHT and they are proportionally the exact same size. Connected (touching),
   left-aligned. */
.fo-about-imgs { --v: clamp(210px, 24vw, 290px); display: flex; flex-direction: column; align-items: center; gap: 0; }
.fo-about-imgs picture { display: block; line-height: 0; }
.fo-about-imgs img { display: block; height: auto; object-fit: cover; }
.fo-about-imgs picture img { width: var(--v); aspect-ratio: 4 / 5; }
.fo-about-imgs > img { width: calc(var(--v) * 1.25); aspect-ratio: 5 / 4; }
.fo-about-grid { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 720px) {
  .fo-about-grid { grid-template-columns: 1fr; gap: clamp(20px, 4vh, 32px); }
  .fo-about-imgs { --v: clamp(190px, 44vw, 270px); }
}
.fo-ov p { color: var(--fo-ink); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; margin: 0 0 16px; max-width: 54ch; }
.fo-ov p.muted { color: var(--fo-mut); }
/* About lede: same voice as the overlay h2 (small caps-style uppercase). */
.fo-ov p.fo-about-lede { font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; max-width: 48ch; }

/* Client logo marquee (About overlay). folio.js fills [data-clients]: it
   drifts on its own, and wheel / trackpad / drag / swipe move it by hand.
   Logos are white alpha PNGs used as MASKS filled with one solid colour:
   white on dark, ink on light (white would vanish on the white sheet). */
.fo-clients { margin-top: clamp(40px, 8vh, 84px); }
.fo-logos { --logo: var(--fo-ink);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; outline-offset: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.fo-logos::-webkit-scrollbar { display: none; }
.fo-logos.is-drag { cursor: grabbing; }
.fo-logos-track { display: flex; align-items: center; width: max-content; gap: clamp(48px, 6vw, 88px); padding: clamp(18px, 3vh, 28px) clamp(24px, 3vw, 44px); }
.fo-logo { flex: none; display: flex; align-items: center; height: 56px; text-decoration: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; transition: opacity .25s ease; }
a.fo-logo:hover, a.fo-logo:focus-visible { opacity: .6; }
.fo-logo-mark { display: block; height: var(--h, 34px); aspect-ratio: var(--ar); background: var(--logo);
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.fo-logo-word { font-size: 24px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; color: var(--logo); }
@media (prefers-color-scheme: dark) {
  .fo-logos { --logo: #fff; }
}
@media (max-width: 720px) {
  .fo-logos-track { gap: 44px; }
  .fo-logo { height: 46px; }
  .fo-logo-mark { height: calc(var(--h, 34px) * 0.82); }
  .fo-logo-word { font-size: 20px; }
}
.fo-meta { margin-top: clamp(24px, 4vh, 44px); display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); }
.fo-meta a { color: var(--fo-ink); text-decoration: none; }
.fo-meta a:hover { color: var(--fo-accent); }

/* Contact overlay form (reuses the working endpoint + anti-bot token) */
.fo-form { max-width: 620px; margin-top: 10px; }
.fo-field { display: block; margin-bottom: 24px; }
.fo-field span { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); margin-bottom: 7px; }
.fo-field input, .fo-field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--fo-line); background: transparent; font: inherit; color: var(--fo-ink); padding: 6px 0 10px; resize: vertical; }
.fo-field input:focus-visible, .fo-field textarea:focus-visible { outline: none; border-bottom-color: var(--fo-accent); }
.fo-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fo-send { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; background: transparent; color: var(--fo-mut); border: 1px solid var(--fo-line); padding: 11px 24px; cursor: pointer; transition: color .2s, border-color .2s; }
.fo-send:hover { color: var(--fo-ink); border-color: var(--fo-ink); }
.fo-send[disabled] { opacity: .4; cursor: default; }
.fo-status { margin-left: 18px; font-size: 12px; color: var(--fo-mut); }
.fo-status.err { color: #d2453a; }

/* --- Intro selector (home) ------------------------------------------------ */
.fo-intro { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; }
.fo-intro-brand { position: fixed; top: 18px; left: clamp(16px, 2.4vw, 30px); z-index: 3; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; color: var(--fo-ink); text-decoration: none; }
.fo-panel { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; padding: clamp(32px, 6vw, 80px); text-decoration: none; color: var(--fo-ink); overflow: hidden; }
.fo-panel + .fo-panel { border-left: 1px solid var(--fo-line); }
.fo-panel-bg { position: absolute; inset: 0; z-index: 0; }
.fo-panel-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55) contrast(1.05); opacity: 0.16; transition: opacity .5s ease, filter .5s ease; }
.fo-panel:hover .fo-panel-bg img, .fo-panel:focus-visible .fo-panel-bg img { opacity: 0.42; filter: grayscale(0) brightness(.75); }
.fo-panel > *:not(.fo-panel-bg):not(.fo-panel-vid) { position: relative; z-index: 1; }
.fo-panel .h { font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; color: var(--fo-mut); transition: color .25s ease; }
/* Hover/select: muted -> ink, matching the nav menu points. Colour only, no
   weight or transform change so the word neither moves nor thickens. */
.fo-panel:hover .h, .fo-panel:focus-visible .h, .fo-panel:active .h { color: var(--fo-ink); }
/* Hover teasers (home.js): a black layer + muted looping film behind each label.
   Out: the film fades first, then the black (so a side "goes black, then away").
   In: black first, then the film once it is actually playing (.is-ready). */
.fo-panel-vid { position: absolute; inset: 0; z-index: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s ease .3s; }
.fo-panel-vid video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s ease; }
.fo-panel-vid::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.fo-panel.is-preview .fo-panel-vid { opacity: 1; transition: opacity .35s ease; }
.fo-panel.is-preview .fo-panel-vid video.is-ready { opacity: 1; transition: opacity .6s ease .15s; }
.fo-panel.is-preview .h { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.fo-panel .h { transition: color .35s ease; }
html[data-preview="creative"] .fo-intro-brand, html[data-preview="creative"] .fo-intro-foot a { color: #fff; transition: color .35s ease; }
.fo-intro-foot { position: fixed; bottom: 16px; left: clamp(16px, 2.4vw, 30px); display: flex; justify-content: flex-start; gap: 18px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; z-index: 3; }
.fo-intro-foot a { color: var(--fo-mut); text-decoration: none; pointer-events: auto; }
.fo-intro-foot a:hover { color: var(--fo-accent); }
@media (max-width: 760px) {
  .fo-intro { grid-template-columns: 1fr; }
  .fo-panel { min-height: 50svh; }
  .fo-panel + .fo-panel { border-left: 0; border-top: 1px solid var(--fo-line); }
  .fo-panel-bg img { opacity: 0.3; }
}

/* --- Reduced motion / focus ---------------------------------------------- */
.fo-item:focus-visible, .fo-row:focus-visible, .fo-shot:focus-visible, .fo-nav a:focus-visible, .fo-nav button:focus-visible { outline: 2px solid var(--fo-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fo-shot img, .fo-shot video { transition: none; } }

/* --- Mobile (<= 768px): collapsed header + full-width natural-ratio images -
   Every image uses the full content width minus the side gutter, at its OWN
   aspect ratio: no fixed-height box, no cover crop, no grey frame, no narrowed
   portraits (the desktop "portrait is 62% wide" effect is disabled here). The
   width/height attributes on each <img> hold the aspect ratio so nothing jumps
   while loading. Consistent vertical rhythm from the spacing tokens. */
@media (max-width: 768px) {
  /* header: brand left, one menu button right. Only pages that carry a menu
     button (the index pages) collapse their inline nav into it; detail pages,
     which have no burger, keep their short brand + switch + About nav. A faint
     backdrop keeps the brand + menu legible over full-bleed images. */
  /* transparent header on phones: no bar, no blur — just the brand + Menu over
     the image. A faint text-shadow keeps them legible without a background. */
  .fo-nav { padding: 13px var(--fo-gutter-m); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fo-nav .fo-brand, .fo-nav .fo-burger { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
  .fo-nav:has(.fo-burger) .fo-nav-left { gap: 0; }
  .fo-nav:has(.fo-burger) .fo-toggle,
  .fo-nav:has(.fo-burger) .fo-nav-group { display: none; }
  .fo-nav:has(.fo-burger) .fo-burger { display: inline-flex; }
  /* the fixed Contact label moves into the menu on pages that have one */
  body:has(.fo-burger) .fo-contact, body:has(.fo-burger) .fo-archive { display: none; }

  /* Filmstrip: the connected column of alternating horizontal (16:9) and
     vertical (62% width, 3:4) previews, cover-framed, grayscale with the centre
     project colourising. Only the side index and the hover marker are dropped
     (no room, no hover on touch). The column is inset from the viewport edges by
     a side gutter so the previews aren't full-width; the intro cube loader
     samples the real .fo-shot.landscape width, so it shrinks to match too. This
     is CSS only — the scroll/loop JS is left exactly as desktop. */
  .fo-slider { grid-template-columns: 1fr; }
  .fo-stage { padding-left: var(--fo-strip-gutter); padding-right: var(--fo-strip-gutter); }
  .fo-index { display: none; }
  .fo-marker { display: none; }

  .fo-row { grid-template-columns: 40px 1fr; }
  .fo-row .ca { grid-column: 2; }
}

/* ==========================================================================
   Project detail subpages, in the same minimal register. Chrome matches the
   index; the work itself shows in colour (it is the point of a detail page).
   ========================================================================== */
.fo-sub { padding: 15vh clamp(16px, 4vw, 48px) 12vh; max-width: 1140px; margin: 0 auto; }
.fo-sub-head { border-bottom: 1px solid var(--fo-line); padding-bottom: clamp(20px, 3vh, 34px); margin-bottom: clamp(26px, 5vh, 52px); }
.fo-back { display: inline-block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); text-decoration: none; font-weight: 400; }
.fo-back:hover { color: var(--fo-accent); }
.fo-sub-cat { display: none; }
.fo-sub-title { margin-top: 10px; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
.fo-sub-desc { margin-top: 14px; max-width: 64ch; color: var(--fo-ink); font-size: 13px; line-height: 1.7; }
.fo-sub-desc + .fo-sub-desc { margin-top: 12px; }
.fo-sub-meta { margin-top: 16px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); }
.fo-sub-meta a { color: var(--fo-ink); text-decoration: none; }
.fo-sub-meta a:hover { color: var(--fo-accent); }
.fo-sub-link { display: inline-block; margin-top: 14px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; color: var(--fo-ink); text-decoration: none; }
.fo-sub-link:hover { color: var(--fo-accent); }

.fo-sub-media { display: flex; flex-direction: column; gap: clamp(26px, 6vh, 70px); }
.fo-figure { margin: 0; }
.fo-figure img { width: 100%; height: auto; display: block; }
.fo-figure figcaption, .fo-cap2 { margin-top: 10px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); }
.fo-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 26px); }
.fo-two .fo-figure { margin: 0; }
.fo-vid { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.fo-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.fo-sub-section { margin-top: clamp(30px, 7vh, 80px); }
.fo-sub-h { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); margin: 0 0 clamp(14px, 2.4vh, 24px); font-weight: 400; }
.fo-sub-note { max-width: 62ch; color: var(--fo-ink); font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.6; margin: 0 0 clamp(18px, 3vh, 28px); }

.fo-pn { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px; margin-top: clamp(40px, 9vh, 100px); padding-top: 20px; border-top: 1px solid var(--fo-line); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.fo-pn a { color: var(--fo-ink); text-decoration: none; font-weight: 400; }
.fo-pn a:hover { color: var(--fo-accent); }
.fo-pn span { color: var(--fo-faint); }
/* 2026-10-27: 1fr|auto|1fr so the middle link sits on the true centre line
   (above "Next project") whatever the prev/next title lengths are */
.fo-pn > :first-child { justify-self: start; }
.fo-pn > :nth-child(2) { justify-self: center; text-align: center; }
.fo-pn > :last-child { justify-self: end; text-align: right; }

@media (max-width: 720px) { .fo-two { grid-template-columns: 1fr; } }

/* ==========================================================================
   Project viewer: a big-media column with a sticky right-hand thumbnail rail
   (active on scroll, click to jump), used on the video / multi-shot projects.
   ========================================================================== */
.fo-proj { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: clamp(20px, 3vw, 56px); max-width: 1440px; margin: 0 auto; padding: 15vh clamp(16px, 4vw, 48px) 12vh; }
.fo-proj-head { grid-column: 1 / -1; border-bottom: 1px solid var(--fo-line); padding-bottom: clamp(20px, 3vh, 34px); margin-bottom: clamp(20px, 4vh, 40px); }
.fo-proj-topline { display: flex; justify-content: space-between; gap: clamp(22px, 4vw, 70px); flex-wrap: wrap; margin-top: 16px; }
.fo-proj-lead { max-width: 54ch; }
.fo-proj-lead .fo-sub-title { margin-top: 0; }
.fo-proj-lead .fo-sub-desc { margin-top: 12px; }
.fo-meta-col { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); line-height: 1.7; }
.fo-meta-col b { display: block; color: var(--fo-faint); margin-bottom: 6px; font-weight: 400; }
.fo-proj-link { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; color: var(--fo-ink); text-decoration: none; white-space: nowrap; }
.fo-proj-link:hover { color: var(--fo-accent); }
.fo-proj-media { display: flex; flex-direction: column; gap: clamp(20px, 5vh, 56px); min-width: 0; }
.fo-proj-media .fo-figure img { width: 100%; height: auto; }
.fo-rail { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.fo-rail::-webkit-scrollbar { display: none; }
.fo-rail a { display: block; border: 1px solid transparent; line-height: 0; }
.fo-rail img { width: 100%; height: auto; display: block; filter: grayscale(1); opacity: .5; transition: opacity .25s, filter .25s; }
.fo-rail a.is-active img, .fo-rail a:hover img { opacity: 1; filter: grayscale(0); }
.fo-rail a.is-active { border-color: var(--fo-ink); }

/* detail-page image entrances (set by folio.js on detail pages only) ------- */
/* hero: letterbox clip-path open on load (a clip reveal, not a scale) */
@keyframes fo-letterbox { from { clip-path: inset(46% 0 46% 0); } to { clip-path: inset(0 0 0 0); } }
.folio-page .fo-figure.fo-hero { animation: fo-letterbox .9s cubic-bezier(.76, 0, .24, 1) both; }
/* later images: blurred + slightly scaled, sharpen and settle as they enter */
.folio-page .fo-figure.fo-blur img { filter: blur(10px); opacity: 0; transform: scale(1.03); transition: filter .8s ease, opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.folio-page .fo-figure.fo-blur.fo-in img { filter: blur(0); opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .folio-page .fo-figure.fo-hero { animation: none; }
  .folio-page .fo-figure.fo-blur img { filter: none; opacity: 1; transform: none; transition: none; }
}

/* scroll-percentage counter, bottom-left of case studies (created by folio.js) */
.fo-pct { position: fixed; left: clamp(16px, 2.4vw, 30px); bottom: 16px; z-index: 7; font-size: 11px; letter-spacing: 0.08em; color: var(--fo-mut); font-variant-numeric: tabular-nums; pointer-events: none; }
.fo-proj .fo-pn { grid-column: 1 / -1; }
.fo-prevtop { text-align: center; margin-bottom: clamp(18px, 3vh, 34px); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.fo-prevtop a { color: var(--fo-mut); text-decoration: none; }
.fo-prevtop a:hover { color: var(--fo-ink); }
@media (max-width: 820px) { .fo-proj { grid-template-columns: 1fr; } .fo-rail { display: none; } }

/* ==========================================================================
   Compatibility layer: the gallery / reel / case-study subpages keep their
   existing deck.css + gallery.css / reel.css bodies (so no media is retyped),
   but when the <body> is a .folio-page these deck components are restyled to
   the uniform folio register: one font, tiny uppercase labels, hairlines.
   ========================================================================== */
.folio-page .d-detail-head { padding-top: 15vh; }
.folio-page .d-detail-head .d-cap { color: var(--fo-mut); }
.folio-page .d-display { font-family: var(--fo-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; color: var(--fo-ink); }
.folio-page .d-detail-head .d-label, .folio-page .d-detail-head .d-cap { display: none; }
.folio-page .d-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); font-weight: 400; }
.folio-page .d-detail-desc { color: var(--fo-ink); font-size: 13px; line-height: 1.7; max-width: 64ch; }
.folio-page .d-back { color: var(--fo-mut); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; }
.folio-page .d-back:hover { color: var(--fo-accent); }
.folio-page .d-subhead h2 { font-family: var(--fo-sans); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); font-weight: 400; }
.folio-page .d-subhead .d-label { color: var(--fo-faint); }
.folio-page .d-pn { border-top-color: var(--fo-line); }
.folio-page .d-pn a { font-family: var(--fo-sans); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-ink); font-weight: 400; }
.folio-page .d-pn a:hover { color: var(--fo-accent); }
.folio-page .d-brand-link { color: var(--fo-ink); border-bottom: 1px solid var(--fo-ink); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; }
.folio-page .d-detail-media img, .folio-page .d-media img, .folio-page .d-frame { background: var(--fo-line); border-radius: 0; }
.folio-page .d-footer { display: none; }
/* brands case studies (eqt-*, cc-*) */
.folio-page .eqt-cc-h, .folio-page .cc-h { font-family: var(--fo-sans) !important; font-size: 11px !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: var(--fo-mut) !important; font-weight: 400 !important; margin: 0 0 clamp(14px, 2.4vh, 22px) !important; }
.folio-page .eqt-cc-lead, .folio-page .cc-lead, .folio-page .eqt-demo-lead, .folio-page .eqt-demo-note { color: var(--fo-ink) !important; }
.folio-page .eqt-cc, .folio-page .cc { border-top-color: var(--fo-line); }
.folio-page .cc-video figcaption { background: var(--fo-bg); color: var(--fo-ink); }
.folio-page .cs-head, .folio-page .cs-section { border-color: var(--fo-line); }
.folio-page .eqt-shot img, .folio-page .cs-figure img { border-color: var(--fo-line); border-radius: 0; }
.folio-page .cs-oneline { color: var(--fo-ink); font-size: 13px; line-height: 1.7; }
.folio-page .cs-body p, .folio-page .cs-lead, .folio-page .eqt-cc-lead, .folio-page .cc-lead, .folio-page .eqt-demo-lead { font-size: 13px !important; line-height: 1.7; }
.folio-page .cs-stepcard p, .folio-page .cs-rules li { font-size: 12px; }
.folio-page .cs-role { color: var(--fo-mut); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.folio-page .cs-role b { color: var(--fo-ink); }
.folio-page .cs-role span { color: var(--fo-mut); }
.folio-page .cs-links a { color: var(--fo-ink); border-bottom: 1px solid var(--fo-ink); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; }
.folio-page .cs-h { font-family: var(--fo-sans); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-mut); font-weight: 400; margin-top: 0; }
.folio-page .cs-lead, .folio-page .cs-body p { color: var(--fo-ink); }
.folio-page .cs-stepcard { border-color: var(--fo-line); border-radius: 0; background: transparent; }
.folio-page .cs-stepcard .n { color: var(--fo-faint); }
.folio-page .cs-stepcard h4 { color: var(--fo-ink); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.folio-page .cs-stepcard p { color: var(--fo-mut); }
.folio-page .cs-rules li { border-bottom-color: var(--fo-line); color: var(--fo-mut); }
.folio-page .cs-rules li b { color: var(--fo-ink); }
.folio-page .eqt-type-meta, .folio-page .eqt-grad-cap, .folio-page .eqt-shot figcaption { color: var(--fo-mut); }


/* --- Weight + motion (2026-10-08h) --------------------------------------- */
/* Everything is Articulat CF Regular; only the home menu goes Demi on hover. */
.fo-brand, .fo-sub-title, .fo-ov h2, .fo-panel .h, .folio-page .d-display { font-weight: 400; }

/* Detail pages and overlays rise in from below. The index + intro don't (they
   have the loader / are the selector). */
@keyframes fo-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.folio-page main { animation: fo-rise .55s cubic-bezier(.2,.7,.2,1) both; }
.folio-page main.fo-intro, .folio-page main:has(.fo-slider) { animation: none; }
.fo-ov.is-open .fo-ov-inner { animation: fo-rise .42s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .folio-page main, .fo-ov.is-open .fo-ov-inner { animation: none; } }


/* ==========================================================================
   Collections (2026-10-11): reuse the folio slider/list verbatim; these add
   only the collection name + one-line intro above the filmstrip, and a neutral
   placeholder tile for projects whose media has not landed yet.
   ========================================================================== */
/* collection pages reuse the main slider layout (left index + centre filmstrip);
   the collection name + line sit at the top of the left index, and a small
   centred tag names the collection in the mobile nav bar. */
.fo-coll-head { margin-bottom: clamp(16px, 3vh, 30px); display: flex; flex-direction: column; gap: 6px; }
.fo-coll-head .fo-back { margin-bottom: 4px; }
.fo-coll-head .n { font-size: 12px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-ink); }
.fo-coll-head .l { font-size: 11px; letter-spacing: 0.02em; color: var(--fo-mut); line-height: 1.5; max-width: 26ch; }
.fo-coll-tag { display: none; }
@media (max-width: 768px) {
  .fo-coll-tag { display: block; position: fixed; top: 15px; left: 50%; transform: translateX(-50%); z-index: 61; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fo-ink); pointer-events: none; }
}
.fo-coll-intro { text-align: center; padding: 14vh 16px clamp(28px, 6vh, 64px); }
.fo-coll-intro.list { text-align: left; padding: 0 0 clamp(20px, 4vh, 40px); }
.fo-coll-name { font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; color: var(--fo-ink); }
.fo-coll-line { margin: 10px auto 0; max-width: 42ch; font-size: 12px; letter-spacing: 0.02em; color: var(--fo-mut); line-height: 1.55; }
.fo-coll-intro.list .fo-coll-line { margin-left: 0; }
.fo-list .fo-coll-intro.list { padding-top: 2vh; }

/* placeholder cover: a neutral tile with the title, for projects/collections
   whose media is not wired in yet. Keeps the same shot geometry. */
.fo-shot.fo-ph { background: var(--fo-line); display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.fo-shot.fo-ph .fo-ph-label { font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fo-ink); padding: 0 16px; }
.fo-shot.fo-ph .fo-ph-note { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fo-mut); }

/* gallery component (gallery.css) reused on folio pages that do NOT load
   deck.css: map its deck-era vars/surfaces onto the folio register. */
.folio-page .gal-item { background: var(--fo-line); border-radius: 0; }
.folio-page .gal-item:focus-visible { outline: 2px solid var(--fo-ink); }
.fo-proj-photos { grid-column: 1 / -1; margin-top: clamp(30px, 7vh, 80px); }
.fo-proj-photos .fo-sub-h { margin-bottom: 0; }
.fo-gallery-sub .gal { padding-top: clamp(20px, 4vh, 44px); }

/* empty media block on a project detail page whose batch has not been wired in */
.fo-figure-ph .fo-ph-box { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--fo-line); border: 1px solid var(--fo-line); }
.fo-figure-ph .fo-ph-box span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fo-mut); }

/* --- Uniform white labels + single typeface on case studies (2026-10-08i) - */
.folio-page .d-label, .folio-page .d-subhead h2, .folio-page .cs-h,
.folio-page .eqt-cc-h, .folio-page .cc-h, .fo-sub-h,
.folio-page .cs-role, .folio-page .cs-role span { color: var(--fo-ink) !important; }
.folio-page .eqt-grad-cap, .folio-page .eqt-demo-bar .path, .folio-page .eqt-demo-bar .live,
.folio-page .eqt-shot figcaption, .folio-page .eqt-type-meta, .folio-page .eqt-sw span,
.folio-page .cs-links a, .folio-page .fo-sub-meta { font-family: var(--fo-sans) !important; }
.folio-page .eqt-demo-lead { margin-bottom: clamp(26px, 5vh, 48px) !important; }
.folio-page .cs-links { margin-top: 16px; }

/* 2026-10-21 ONE project chrome everywhere (owner: "the line with the infos, title
   etc at the top needs to be the same everywhere"). Every project page — Creative,
   Corporate and collection galleries — now carries the kk layout in a shared frame:
   .fo-phead (prev-project link, back link, title/meta row, full-width hairline) as
   main's first child and .fo-pfoot (prev / All / next row + next-project link) as
   its last. The frame is fixed at 1440px so the line is the same length on every
   page regardless of the gallery width beneath it. */
.fo-phead, .fo-pfoot { max-width: 1440px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.fo-phead { padding-top: 15vh; }
.fo-phead .fo-proj-head { margin-bottom: clamp(20px, 4vh, 40px); }
.fo-phead .fo-proj-lead .fo-sub-title { margin-top: 0; }
.fo-pfoot { padding-bottom: 12vh; }
.fo-pfoot .fo-pn { margin-top: clamp(40px, 9vh, 100px); }
.fo-pfoot .fo-pn a:nth-child(2) { color: var(--fo-mut); }
.fo-nextbot { text-align: center; margin-top: clamp(28px, 5vh, 52px); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.fo-nextbot a { color: var(--fo-mut); text-decoration: none; }
.fo-nextbot a:hover { color: var(--fo-ink); }
/* the page containers below the shared header/footer drop their own top/bottom air */
.fo-pmain > .fo-proj, .fo-pmain > .fo-sub { padding-top: 0; padding-bottom: 0; }
.fo-pmain > .d-wrap:first-of-type, .fo-pmain > .fo-phead + .d-wrap { padding-top: 0; margin-top: 0; }
.fo-pmain > .d-wrap.cc:first-of-type, .fo-pmain > .fo-phead + .d-wrap.cc { border-top: 0; }

/* Page scroll map (the Copenhagen minimap, now on every project page; folio.js
   builds it from the page's frames: photos, reels, films). Slightly wider than the
   original 30px. Desktop only. */
.fo-map {
  position: fixed; top: 50%; right: 12px; transform: translateY(-50%);
  width: 38px; z-index: 40;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 80vh;
}
.fo-map a {
  position: relative; display: block; width: 100%; flex: 1 1 auto; min-height: 7px;
  overflow: hidden; opacity: .32; transition: opacity .25s ease; border-radius: 1px; background: var(--fo-line);
}
.fo-map a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fo-map a.active { opacity: 1; }
.fo-map:hover a { opacity: .55; }
.fo-map:hover a.active { opacity: 1; }
.fo-map-view {
  position: absolute; left: -4px; right: -4px; z-index: 2;
  border: 1px solid var(--fo-ink); border-radius: 2px; pointer-events: none;
  transition: top .12s linear, height .12s linear;
}
.fo-map { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.fo-map.is-drag { cursor: grabbing; }
.fo-map.is-drag a { opacity: .55; }
.fo-map.is-drag a.active { opacity: 1; }
.fo-map.is-drag .fo-map-view { transition: none; }
.fo-map a img { pointer-events: none; }
.fo-map.dense { gap: 1px; }
.fo-map.dense a { min-height: 2px; }
@media (max-width: 900px) { .fo-map { display: none; } }
/* keep the page clear of the strip so it never sits on the header line or the work */
@media (min-width: 901px) {
  html.fo-has-map .fo-pmain { padding-right: 60px; }
  html.fo-has-map .fo-pmain .gal.gal-grid { width: calc(92vw - 60px); }   /* car walls stay centred left of the strip */
}