/* The Still: design system, round four.
   Direction C4 (the page grid is the map graticule) set in Hoefler Text Roman and
   Neue Haas Grotesk, with big type and page transitions built on the platform:
   cross-document view transitions, scroll-driven animations, the Popover API and
   @starting-style. Every animation stops for prefers-reduced-motion. */

@font-face { font-family: "Still Names"; src: url("/assets/fonts/names.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0078-0079, U+0259, U+026C, U+02B7, U+0313, U+0331, U+03B8, U+1E35; }
@font-face { font-family: "Still Names"; src: url("/assets/fonts/names-bold.woff2") format("woff2"); font-weight: 500 800; font-display: swap; unicode-range: U+0078-0079, U+0259, U+026C, U+02B7, U+0313, U+0331, U+03B8, U+1E35; }

:root {
  --paper: #F5F6F3;
  --paper-2: #ECEEEA;
  --paper-3: #E1E4DF;
  --ink: #12161A;
  --ink-2: #2A3036;
  --soft: #4E575F;
  --hair: rgba(18, 22, 26, .14);
  --hair-2: rgba(18, 22, 26, .07);
  --grat: rgba(18, 22, 26, .075);

  /* map inks */
  --contour: #B19C89;
  --index: #86705C;
  --coast: #3A4046;
  --water: var(--paper);

  /* floors: one colour per section, like the floors of a building.
     --c-* fills panels (text on it is --on-*), --t-* is safe for text on paper. */
  --c-home: #12161A;    --on-home: #F5F6F3;    --t-home: #12161A;
  --c-work: #9E1B32;    --on-work: #FFFFFF;    --t-work: #9E1B32;
  --c-services: #1D4E9E; --on-services: #FFFFFF; --t-services: #1D4E9E;
  --c-access: #1D4E9E;  --on-access: #FFFFFF;  --t-access: #1D4E9E;
  --c-capture: #2D6A4F; --on-capture: #FFFFFF; --t-capture: #2D6A4F;
  --c-studio: #5E3A87;  --on-studio: #FFFFFF;  --t-studio: #5E3A87;
  --c-contact: #8A4F00; --on-contact: #FFFFFF; --t-contact: #8A4F00;
  --c-how: #2F5F66;     --on-how: #FFFFFF;     --t-how: #2F5F66;
  --c-policy: #33475B;  --on-policy: #FFFFFF;  --t-policy: #33475B;

  --floor: var(--c-home); --on-floor: var(--on-home); --t-floor: var(--t-home);
  --focus: var(--ink);

  --serif: "hoefler-text", "Hoefler Text", "Iowan Old Style", Georgia, serif;
  --sans: "neue-haas-grotesk-text", "Neue Haas Grotesk Text Pro", "Still Names", "Helvetica Neue", Arial, sans-serif;
  --disp: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(16px, 4vw, 56px);
  --gap: clamp(16px, 1.8vw, 24px);
  --maxw: 1600px;
  --head: 64px;

  --t-ui: .8125rem;
  --t-small: 1rem;
  --t-body: clamp(1.125rem, 1.06rem + .28vw, 1.3rem);
  --t-lead: clamp(1.3rem, 1.08rem + .85vw, 1.85rem);
  --t-h3: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  --t-h2: clamp(2.2rem, 1.2rem + 3.8vw, 5.4rem);
  --t-h1: clamp(3rem, .9rem + 8.2vw, 10.5rem);
  /* the hero heading eases off on a desktop (Adam, Oct 8); phones and tablets keep the size above */
  --t-h1-desk: clamp(3rem, .9rem + 7.3vw, 9.4rem);
  --t-mega: clamp(3.4rem, .2rem + 13.2vw, 16.5rem);
  --t-fig: clamp(3.4rem, 1rem + 10vw, 13rem);

  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-io: cubic-bezier(.645, .045, .355, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);

  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #101316; --paper-2: #171B1F; --paper-3: #20252A;
  --ink: #ECEEEF; --ink-2: #D3D8DC; --soft: #A7AFB6;
  --hair: rgba(236, 238, 239, .16); --hair-2: rgba(236, 238, 239, .08); --grat: rgba(236, 238, 239, .06);
  --contour: #6F6255; --index: #A08A76; --coast: #9EA5AB; --water: var(--paper);
  --c-home: #ECEEEF; --on-home: #101316; --t-home: #ECEEEF;
  --t-work: #F28B9C; --t-services: #93B4F0; --t-access: #93B4F0; --t-capture: #7CCBA4; --t-studio: #C7A7EA; --t-contact: #E7AC62; --t-how: #7FC3CB; --t-policy: #A9BDD2;
  color-scheme: dark;
}
/* each page names its floor on <html data-floor="…">, so the page transition can use its colour */
[data-floor="home"] { --floor: var(--c-home); --on-floor: var(--on-home); --t-floor: var(--t-home); }
[data-floor="work"] { --floor: var(--c-work); --on-floor: var(--on-work); --t-floor: var(--t-work); }
[data-floor="services"] { --floor: var(--c-services); --on-floor: var(--on-services); --t-floor: var(--t-services); }
[data-floor="access"] { --floor: var(--c-access); --on-floor: var(--on-access); --t-floor: var(--t-access); }
[data-floor="capture"] { --floor: var(--c-capture); --on-floor: var(--on-capture); --t-floor: var(--t-capture); }
[data-floor="studio"] { --floor: var(--c-studio); --on-floor: var(--on-studio); --t-floor: var(--t-studio); }
[data-floor="contact"] { --floor: var(--c-contact); --on-floor: var(--on-contact); --t-floor: var(--t-contact); }
[data-floor="how"] { --floor: var(--c-how); --on-floor: var(--on-how); --t-floor: var(--t-how); }
[data-floor="policy"] { --floor: var(--c-policy); --on-floor: var(--on-policy); --t-floor: var(--t-policy); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 24px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.55 var(--sans); font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
p { margin: 0 0 1em; max-width: 40em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; }
a { color: inherit; text-decoration-thickness: .07em; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
strong, b { font-weight: 500; }
::selection { background: var(--floor); color: var(--on-floor); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
.skip { position: absolute; left: var(--gut); top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; font: 500 var(--t-small) var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- layout: the grid is the graticule ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.graticule { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.graticule .wrap, .graticule .grid { height: 100%; }
.graticule .grid span { border-left: 1px solid var(--grat); }
.graticule .grid span:last-child { border-right: 1px solid var(--grat); }
.graticule .grid span:nth-child(n+5) { display: none; }
@media (min-width: 900px) { .graticule .grid span:nth-child(n+5) { display: block; } }
.section { position: relative; padding-block: clamp(64px, 9vw, 160px); }
.section + .section { padding-top: 0; }

/* ---------- type ---------- */
.mega { font-family: var(--serif); font-size: var(--t-mega); line-height: .84; letter-spacing: -.025em; }
.h1 { font-size: var(--t-h1); line-height: .74; letter-spacing: -.022em; }
@media (min-width: 1100px) { .h1 { font-size: var(--t-h1-desk); } }
.h2 { font-size: var(--t-h2); line-height: 1; letter-spacing: -.018em; }
.h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.01em; }
.lead { font-size: var(--t-lead); line-height: 1.38; max-width: 30em; }
.lab { font: 500 var(--t-ui)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.co { font: 400 .875rem/1.4 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--soft); }
.num { font: 400 1.9rem/1 var(--disp); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fig { font: 400 var(--t-fig)/.9 var(--disp); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.soft { color: var(--soft); }
.t-floor { color: var(--t-floor); }

/* section head: number, name and a right-hand note on one hairline */
.sh { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ink); padding-top: 10px; margin-bottom: clamp(20px, 3vw, 44px); }
.sh .l { display: flex; align-items: baseline; gap: 12px; }
@media (max-width: 599px) { .sh .r { display: none; } }

/* links and buttons */
.lnk { color: var(--ink); text-decoration: underline; text-decoration-color: var(--t-floor); text-decoration-thickness: 2px; text-underline-offset: .24em; font-weight: 500; transition: text-decoration-thickness .2s; }
.lnk:hover { text-decoration-thickness: 4px; }
.btn { display: inline-flex; align-items: center; gap: .7em; min-height: 48px; padding: 12px 20px; border: 1px solid currentColor; font: 500 var(--t-small)/1.2 var(--sans); text-decoration: none; color: inherit; background: transparent; cursor: pointer; transition: background .3s var(--ease-out), color .3s var(--ease-out); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn .arr { transition: transform .5s var(--ease-expo); }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(5px); }
.links { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }

/* ---------- header and menu ---------- */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: transform .5s var(--ease-io), background .3s; view-transition-name: site-head; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--head); gap: 20px; }
.site-head.is-scrolled { box-shadow: 0 1px 0 var(--hair); }
.site-head.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
/* lockup: in the brand files the capital S of the wordmark stands at 42% of the brandmark's height */
.brand { --bm: 36px; }
.brand .bm { height: var(--bm); width: auto; }
.brand .wm { height: calc(var(--bm) * .435); width: auto; }
.brand.lg { --bm: 44px; }
:root[data-theme="dark"] .brand img { filter: invert(1); }
.site-nav { display: none; gap: clamp(16px, 2vw, 32px); font: 500 var(--t-small) var(--sans); }
.site-nav a { text-decoration: none; position: relative; padding-block: 8px; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--t-floor); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-expo); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 1100px) { .site-nav { display: flex; } }
.head-tools { display: flex; align-items: center; gap: 10px; }
.theme-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; font: 500 var(--t-ui) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid transparent; cursor: pointer; }
.theme-btn:hover { border-color: var(--hair); }
.theme-btn svg { width: 18px; height: 18px; flex: none; }
.theme-btn .t-lab { display: none; }
@media (min-width: 1300px) { .theme-btn .t-lab { display: inline; } }
.theme-btn .moon { transition: transform .6s var(--ease-expo); transform-origin: center; }
.theme-btn[aria-pressed="true"] .moon { transform: rotate(180deg); }
#menu .theme-btn { color: var(--paper); border-color: rgba(255, 255, 255, .4); }
#menu .theme-btn .t-lab { display: inline; }
.menu-btn { font: 500 var(--t-ui) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--ink); min-height: 44px; padding: 0 14px; cursor: pointer; }
@media (min-width: 1100px) { .menu-btn { display: none; } }
/* the header is fixed, so the page starts below it */
#main { padding-top: var(--head); }

#menu { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--paper); overflow: auto;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io), overlay .8s allow-discrete, display .8s allow-discrete; }
#menu:popover-open { clip-path: inset(0 0 0 0); }
@starting-style { #menu:popover-open { clip-path: inset(0 0 100% 0); } }
#menu::backdrop { background: transparent; }
#menu .wrap { min-height: 100%; display: flex; flex-direction: column; padding-block: 18px 40px; }
#menu .menu-top { display: flex; justify-content: space-between; align-items: center; height: calc(var(--head) - 18px); }
#menu .menu-close { font: 500 var(--t-ui) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: transparent; border: 1px solid var(--paper); min-height: 44px; padding: 0 14px; cursor: pointer; }
#menu ol { list-style: none; margin: auto 0 0; padding: 0; }
#menu li { border-top: 1px solid rgba(255, 255, 255, .2); overflow: hidden; }
#menu li a { display: flex; align-items: baseline; gap: 16px; padding-block: 12px; font: 400 clamp(2.4rem, 1rem + 7vw, 5rem)/1 var(--serif); letter-spacing: -.02em; text-decoration: none; color: var(--paper); transform: translateY(110%); transition: transform .9s var(--ease-expo) calc(.22s + var(--i, 0) * 50ms); }
#menu li a .num { font-size: 1rem; opacity: .7; }
#menu:popover-open li a { transform: none; }
@starting-style { #menu:popover-open li a { transform: translateY(110%); } }
#menu :focus-visible { outline-color: var(--paper); }
#menu li a[aria-current] { text-decoration: underline; text-decoration-color: #93B4F0; text-decoration-thickness: .06em; text-underline-offset: .14em; }

/* ---------- motion hooks ---------- */
/* split lines: still.js wraps each line in .line > .line-in */
/* each mask reaches past the line box so ascenders and descenders stay whole; the negative margins keep the spacing */
[data-split] .line { display: block; overflow: hidden; padding-block: .18em .34em; margin-block: -.18em -.34em; text-wrap: wrap; }
[data-split] .line-in { display: block; }
.motion [data-split]:not(.is-split) { opacity: 0; }
.motion [data-split] .line-in { transform: translateY(160%); }
.motion [data-split].in .line-in { transform: none; }

/* reveal: fade and rise once the element enters the screen */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); }
.motion [data-reveal].in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) var(--rd, 0ms), transform 1.1s var(--ease-expo) var(--rd, 0ms); }
.motion [data-reveal].in.settled, .motion [data-draw].in.settled .dr { transition: none; }
.motion .anim-done { animation: none !important; }

/* drift: big lines slide sideways as they cross the screen, on the scroll timeline */
.drift-row { overflow: hidden; }
/* room for descenders inside the row, in case the browser can only hide overflow on both axes */
[data-drift] { padding-block: .1em .32em; margin-block: -.1em -.32em; }
@supports (overflow: clip) { .drift-row { overflow-x: clip; overflow-y: visible; } }
@supports (animation-timeline: view()) {
  .motion [data-drift] { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes drift { from { transform: translateX(calc(var(--drift, 8) * -1%)); } to { transform: translateX(calc(var(--drift, 8) * 1%)); } }

/* draw: SVG strokes draw themselves with the scroll (or once, where scroll timelines are missing) */
.motion [data-draw] .dr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion [data-draw].in .dr { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease-io) var(--dd, 0ms); }
@supports (animation-timeline: view()) {
  .motion [data-draw="scroll"] .dr { transition: none; animation: draw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- page transitions: a wipe in the colour of the floor you're going to ---------- */
@view-transition { navigation: auto; }
/* the arriving page's entrances wait for the wipe to end ( still.js comeIn ), so the wipe stays short,
   and shorter still on a phone */
html.nav-vt::view-transition-group(root) { background: var(--floor); animation-duration: 1s; }
html.nav-vt::view-transition-old(root) { animation: vt-old .6s var(--ease-io) both; }
html.nav-vt::view-transition-new(root) { animation: vt-new .8s var(--ease-expo) .2s both; }
html.nav-vt::view-transition-old(site-head), html.nav-vt::view-transition-new(site-head) { animation-duration: .4s; }
@media (max-width: 899px) {
  html.nav-vt::view-transition-group(root) { animation-duration: .75s; }
  html.nav-vt::view-transition-old(root) { animation-duration: .45s; }
  html.nav-vt::view-transition-new(root) { animation-duration: .6s; animation-delay: .15s; }
}
@keyframes vt-old { to { transform: translateY(-12vh); opacity: 0; } }
/* switching theme: a circle opens from the switch */
html.theme-vt::view-transition-group(root) { animation: none; background: none; }
html.theme-vt::view-transition-old(root) { animation: none; }
html.theme-vt::view-transition-new(root) { animation: theme-in .8s var(--ease-io) both; }
html.theme-vt::view-transition-old(site-head), html.theme-vt::view-transition-new(site-head) { animation: none; }
@keyframes theme-in { from { clip-path: circle(0 at var(--tx, 90%) var(--ty, 32px)); } to { clip-path: circle(150vmax at var(--tx, 90%) var(--ty, 32px)); } }
@keyframes vt-new { from { clip-path: inset(100% 0 0 0); transform: translateY(14vh); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* ---------- media ---------- */
.media { margin: 0; }
.media .ph { position: relative; overflow: hidden; background: var(--paper-3); }
.media .ph img, .media .ph video { width: 100%; height: 100%; object-fit: cover; }
.cap { margin-top: 12px; font-size: 1.125rem; line-height: 1.45; max-width: 36em; }
.cap .co { display: block; margin-top: 4px; }
.loop .ph { position: relative; }
.loop-toggle { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #fff; background: rgba(18, 22, 26, .55); border: 0; border-radius: 50%; cursor: pointer; opacity: .8; transition: opacity .2s, background .2s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.loop-toggle::before { content: ""; position: absolute; inset: -6px; } /* a 44-pixel target around the 32-pixel disc */
.loop-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.loop-toggle:hover, .loop-toggle:focus-visible, .loop:hover .loop-toggle { opacity: 1; background: rgba(18, 22, 26, .8); }
.loop-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* films that load Vimeo's player only after someone presses play */
.embed .ph { position: relative; overflow: hidden; background: #0d0f11; }
.embed .ph > picture img, .embed .ph > img { display: block; width: 100%; height: auto; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.is-on .ph > picture { visibility: hidden; }
.embed__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #fff; text-decoration: none; background: linear-gradient(to top, rgba(10, 12, 14, .55), rgba(10, 12, 14, .1) 60%); }
.embed__btn { display: grid; place-items: center; width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: rgba(10, 12, 14, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s var(--ease-out), transform .6s var(--ease-expo); }
.embed__btn svg { width: 34%; height: 34%; fill: currentColor; margin-left: 6%; }
.embed__t { font: 500 var(--t-small)/1.25 var(--sans); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.embed__play:hover .embed__btn, .embed__play:focus-visible .embed__btn { background: rgba(10, 12, 14, .85); transform: scale(1.05); }
.embed__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.embed .ph > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* the home page reel */
.reel .body { grid-column: 1 / -1; max-width: 36em; }
@media (min-width: 900px) { .reel .body { grid-column: 1 / span 7; } }
.reel__fig { margin-top: clamp(32px, 4vw, 64px); }
.reel__fig .ph { aspect-ratio: 960 / 506; }
.loop-toggle[hidden] { display: none; }
.zoom img { transition: transform 1.4s var(--ease-expo); }
.zoom:hover img, a:focus-visible .zoom img { transform: scale(1.04); }

/* ---------- floor panels: full-bleed colour, used for features and the footer ---------- */
.floor-panel { background: var(--floor); color: var(--on-floor); --focus: var(--on-floor); --ink: var(--on-floor); --soft: color-mix(in srgb, var(--on-floor) 78%, transparent); --t-floor: var(--on-floor); position: relative; overflow: hidden; }
.floor-panel .lab, .floor-panel .co { color: color-mix(in srgb, var(--on-floor) 80%, transparent); }
.floor-panel .btn:hover { background: var(--on-floor); color: var(--floor); }
.floor-panel .brand img { filter: invert(1); }
:root[data-theme="dark"] .floor-panel[data-floor="home"] .brand img { filter: none; }
.stack { position: relative; }
.stack > .floor-panel { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: stretch; }
@media (prefers-reduced-motion: reduce) { .stack > .floor-panel { position: relative; top: auto !important; min-height: 0; } }

/* ---------- map band ---------- */
.mapband { position: relative; }
.mapband svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp .ct { fill: none; stroke: var(--contour); }
.mp .ci { fill: none; stroke: var(--index); }
.mp .cs { fill: none; stroke: var(--coast); stroke-linejoin: round; }
.mp .gr { fill: none; stroke: var(--grat); }
.mp .mer { fill: none; stroke: var(--ink); opacity: .18; }
.mp .wf { fill: var(--water); }
.mp text { font-family: var(--sans); fill: var(--ink); }
.mp .gl { fill: var(--soft); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.mp .clab { fill: var(--index); font-weight: 500; paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.mp .nw { font-family: var(--serif); font-style: italic; fill: var(--coast); paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.mp .np { font-weight: 500; letter-spacing: .2em; paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.mp .pk { fill: var(--ink); }
.mp .sb-a { fill: var(--ink); } .mp .sb-b { fill: var(--paper); stroke: var(--ink); }
.mp .mk-dot { fill: var(--ink); }
.mp .mk-ring { fill: none; stroke: var(--ink); }
.mp .mk-t { fill: var(--ink); font-weight: 500; paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.motion .mapband .mk { opacity: 0; transition: opacity .6s var(--ease-io); }
.motion .mapband.is-open .mk { opacity: 1; }
.motion .mapband.is-open .mk-ring { transform-box: fill-box; transform-origin: center; animation: mk-ping 1.4s var(--ease-expo) both; }
@keyframes mk-ping { from { transform: scale(.3); } to { transform: scale(1); } }

/* ---------- big work list with an image that follows the pointer ---------- */
.work-list { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; border-bottom: 1px solid var(--ink); }
.work-list li { border-top: 1px solid var(--hair); }
.work-list a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding-block: clamp(16px, 2.2vw, 30px); text-decoration: none; position: relative; }
.work-list .wl-name { font: 400 clamp(2rem, 1rem + 3.6vw, 4.8rem)/1 var(--serif); letter-spacing: -.02em; transition: transform .7s var(--ease-expo), color .3s; }
.work-list .wl-line { grid-column: 2; color: var(--soft); max-width: 34em; }
.work-list .wl-meta { grid-column: 2; }
.work-list .wl-img { grid-column: 1 / -1; margin-top: 12px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); }
.work-list .wl-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .work-list a { grid-template-columns: 4rem minmax(0, 7fr) minmax(0, 4fr); }
  .work-list .wl-line { grid-column: 3; grid-row: 1; }
  .work-list .wl-meta { grid-column: 3; grid-row: 2; }
  .work-list .wl-img { display: none; }
  .work-list a:hover .wl-name, .work-list a:focus-visible .wl-name { transform: translateX(18px); color: var(--t-floor); }
}
/* a row opens onto its project: a strip of the loop or its pictures behind white text over a dark fade */
.work-list a { isolation: isolate; }
.wl-media { position: absolute; inset: 0 calc(-1 * var(--gut)); z-index: -1; overflow: hidden; background: #0d0f11; clip-path: inset(50% 0 50% 0); transition: clip-path .75s var(--ease-expo); pointer-events: none; }
.wl-media video, .wl-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-media img { opacity: 0; transform: scale(1.04); transition: opacity .9s var(--ease-io), transform 2.6s var(--ease-io); }
.wl-media img.on { opacity: 1; transform: scale(1); }
.wl-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 12, 14, .84) 0%, rgba(10, 12, 14, .7) 55%, rgba(10, 12, 14, .6) 100%); }
.work-list a.is-lit .wl-media { clip-path: inset(0 0 0 0); }
.work-list a .num, .work-list a .wl-line, .work-list a .wl-meta { transition: color .3s; }
.work-list a.is-lit .wl-name, .work-list a.is-lit .num, .work-list a.is-lit .wl-line, .work-list a.is-lit .wl-meta { color: #fff; }
@media (prefers-reduced-motion: reduce) { .wl-media, .wl-media img { transition: none; } }

/* ---------- footer ---------- */
.site-foot { padding-block: clamp(64px, 8vw, 140px) 40px; }
.site-foot .cta { display: block; text-decoration: none; }
.site-foot.no-cta .foot-row { margin-top: 20px; }
.site-foot .foot-row { display: grid; gap: 24px; margin-top: clamp(40px, 6vw, 96px); border-top: 1px solid currentColor; padding-top: 20px; }
@media (min-width: 900px) { .site-foot .foot-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .site-foot .f1 { grid-column: 1 / span 4; } .site-foot .f2 { grid-column: 5 / span 4; } .site-foot .f3 { grid-column: 9 / span 4; justify-self: end; } }
.sheetidx { display: inline-grid; grid-template-columns: repeat(3, auto); border: 1px solid currentColor; }
.sheetidx a, .sheetidx span { font: 500 .6875rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 9px 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; text-decoration: none; color: inherit; }
.sheetidx > :nth-child(3n) { border-right: 0; }
.sheetidx > :nth-child(n+4) { border-bottom: 0; }
.sheetidx [aria-current] { background: var(--on-floor); color: var(--floor); }
.credit { font-size: .8125rem; margin-top: 28px; opacity: .8; }
.site-foot p, .site-foot a { overflow-wrap: anywhere; }

/* ---------- forced colours: keep the lockup visible and drop the decorative rules ---------- */
@media (forced-colors: active) {
  .graticule { display: none; }
  .mega, .h1, .h2, .fig { forced-color-adjust: auto; }
}
@media (forced-colors: active) and (prefers-color-scheme: dark) { .brand img { filter: invert(1); } }

/* ---------- reduced motion: nothing moves on its own ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* =====================================================================
   Rendered pages (render.js): page heads, editorial blocks and the parts
   every inside page shares.
   ===================================================================== */
mark.tbd { background: #FFE58A; color: #1A1400; padding: 0 .15em; border-radius: 2px; }
.note { margin: 20px 0; padding: 14px 16px; border: 1px solid #C9A800; background: #FFF6CC; color: #1A1400; font-size: var(--t-small); max-width: 40em; }
.note .lab { display: block; color: #6B5A00; margin-bottom: 4px; }
:root[data-theme="dark"] .note { background: #2B2408; border-color: #8C7600; color: #F3E7B0; }
:root[data-theme="dark"] .note .lab { color: #E0C861; }

.title { font-family: var(--serif); font-size: clamp(2.7rem, .9rem + 5.9vw, 8rem); line-height: .8; letter-spacing: -.02em; }
.page-head { padding-top: clamp(32px, 5vw, 80px); padding-bottom: clamp(40px, 6vw, 96px); }
.page-head .title { grid-column: 1 / -1; margin-bottom: clamp(24px, 3.5vw, 56px); }
.page-head .ph-lede { grid-column: 1 / -1; }
.page-head .ph-lede p { max-width: 32em; }
.page-head .ph-aside { grid-column: 1 / -1; margin-top: 24px; }
.page-head .kicker { color: var(--t-floor); margin: 0 0 8px; }
.page-head .credit-line { margin: 0 0 16px; }
.page-head .sh a { text-decoration: none; }
.page-head .sh a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .page-head .title { grid-column: 1 / span 11; }
  .page-head .ph-lede { grid-column: 1 / span 7; }
  .page-head .ph-aside { grid-column: 9 / span 4; margin-top: 0; grid-row: 3; }
}
.ph-links { grid-column: 1 / -1; margin-top: 28px; }

/* editorial block: heading left, text right, on the column grid */
.blk .bh { grid-column: 1 / -1; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.8rem); line-height: 1; letter-spacing: -.016em; margin-bottom: 24px; }
.bc { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px) {
  .blk .bh { grid-column: 1 / span 5; margin-bottom: 0; padding-right: var(--gap); }
  .bc { grid-column: 7 / span 6; }
}
.section.blk + .section.blk { padding-top: 0; }
.prose > * { max-width: 36em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose a { color: inherit; text-decoration-color: var(--t-floor); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.prose h3 { font-size: var(--t-h3); margin: 1.4em 0 .5em; }
.prose ul { padding-left: 1.1em; }
.prose li { margin-bottom: .4em; }
.prose strong { font-weight: 500; }

/* legend lists: a hairline per item with a short dash, like a map key */
.legend { list-style: none; padding: 0; margin: 0 0 1em; border-top: 1px solid var(--hair); }
.legend li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--hair); margin: 0; max-width: none; }
.legend li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 20px; height: 2px; background: var(--t-floor); }
.included { margin-top: 28px; }
.included .lab { margin: 0 0 10px; font: 500 var(--t-ui)/1.4 var(--sans); }

/* facts: label and value on one hairline */
.facts-l { margin: 0; border-top: 1px solid var(--ink); }
.facts-l > div { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.facts-l dt { padding-top: 3px; }
.facts-l dd { margin: 0; overflow-wrap: anywhere; font-size: var(--t-small); }
@media (max-width: 420px) { .facts-l > div { grid-template-columns: 1fr; } }

/* work index */
.filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: clamp(24px, 3vw, 40px); }
.filters .lab { margin-right: 8px; }
.filters button { font: 500 var(--t-small) var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--hair); min-height: 44px; padding: 0 14px; cursor: pointer; }
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.work-list .wl-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding-block: clamp(16px, 2.2vw, 30px); }
@media (min-width: 900px) { .work-list .wl-row { grid-template-columns: 4rem minmax(0, 7fr) minmax(0, 4fr); } .work-list .wl-row .wl-line { grid-column: 3; grid-row: 1; } .work-list .wl-row .wl-meta { grid-column: 3; grid-row: 2; } }
.work-list .wl-meta { grid-column: 2; }
.work-list .is-slot .wl-name { color: var(--soft); }
.work-list li[hidden] { display: none; }

/* case study */
.cs-hero { padding-block: 0 clamp(48px, 7vw, 120px); }
.hero-fig .ph { aspect-ratio: 16 / 9; }
.cs-sec .bh { font-size: clamp(2rem, 1.2rem + 3vw, 4.4rem); }
.cs-loop { padding-block: 0 clamp(48px, 7vw, 120px); }
.wide-loop .ph { aspect-ratio: 16 / 9; }
.cs-actions { padding-top: 0; }
.cs-actions .bc > p { margin: 0 0 14px; }
.quote-panel .wrap { padding-block: clamp(64px, 9vw, 160px); }
.quote-panel blockquote { margin: 0; }
.quote-panel blockquote p { font-family: var(--serif); font-size: clamp(1.9rem, 1rem + 3.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.014em; max-width: 22em; margin: 0 0 28px; }
.quote-panel figcaption strong { font-weight: 500; }
.gallery { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px) var(--gap); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery .wide { grid-column: 1 / -1; } }
.gallery .media .ph img, .gallery .media .ph video { width: 100%; height: auto; }
.devices .dev-stage { position: relative; padding-bottom: 8%; }
.devices .dev-desktop { width: 78%; border: 1px solid var(--hair); }
.devices .dev-phone { position: absolute; right: 0; bottom: 0; width: 22%; border: 1px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--paper); box-shadow: 0 20px 40px rgba(18, 22, 26, .18); }
.devices .cap { margin-top: 20px; }
.pager .grid { row-gap: 0; }
.pager .pg { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 3vw, 40px) 0; border-top: 1px solid var(--ink); text-decoration: none; }
.pager .pg-t { font: 400 clamp(2rem, 1rem + 3.6vw, 4.8rem)/1 var(--serif); letter-spacing: -.02em; transition: transform .7s var(--ease-expo), color .3s; }
.pager .pg:hover .pg-t, .pager .pg:focus-visible .pg-t { transform: translateX(14px); color: var(--t-floor); }
@media (min-width: 900px) { .pager .prev { grid-column: 1 / span 6; } .pager .next { grid-column: 7 / span 6; text-align: right; align-items: flex-end; } .pager .next:hover .pg-t, .pager .next:focus-visible .pg-t { transform: translateX(-14px); } }

/* services: a numbered jump list under the head */
.jump { grid-column: 1 / -1; margin-top: clamp(32px, 4vw, 56px); }
.jump ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .jump ol { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); border-top: 0; } .jump li { border-top: 1px solid var(--ink); } }
.jump li { border-bottom: 1px solid var(--hair); }
.jump a { display: flex; gap: 12px; align-items: baseline; padding: 14px 0; text-decoration: none; font: 400 var(--t-h3)/1.1 var(--serif); }
.jump a .num { font-size: 1rem; color: var(--t-floor); }
.jump a:hover { color: var(--t-floor); }

/* how we work: the stages drawn as a route with a node for each */
.route { grid-column: 1 / -1; list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.route::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: var(--t-floor); opacity: .5; }
.route a { display: grid; grid-template-columns: 20px auto 1fr; gap: 12px; align-items: center; padding: 10px 0; text-decoration: none; position: relative; }
.route .node { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--t-floor); background: var(--paper); transition: background .3s; }
.route a:hover .node, .route a:focus-visible .node { background: var(--t-floor); }
.route .num { font-size: 1.1rem; color: var(--t-floor); }
.route .rt { font: 400 var(--t-h3)/1.1 var(--serif); }
@media (min-width: 900px) {
  .route { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap); }
  .route::before { left: 10px; right: 10px; top: 20px; bottom: auto; width: auto; height: 2px; }
  .route a { grid-template-columns: 1fr; gap: 10px; align-items: start; padding: 10px 0 0; }
  .route .rt { font-size: clamp(1.3rem, 1rem + .7vw, 1.8rem); }
}

/* studio: the team as portraits */
.team .bh { grid-column: 1 / -1; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.8rem); line-height: 1; margin-bottom: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) { .team .bh { grid-column: 1 / span 8; } }
.team .grid > .note { grid-column: 1 / -1; }

/* contact: the ways to reach us, set large */
.contact-big .cb-lines { grid-column: 1 / -1; font: 400 clamp(1.8rem, 1rem + 3vw, 4rem)/1.22 var(--serif); letter-spacing: -.012em; }
.contact-big .cb-lines p { margin: 0 0 .3em; max-width: none; }
.contact-big .cb-lines a { text-decoration-color: var(--t-floor); text-decoration-thickness: .04em; text-underline-offset: .08em; text-decoration-skip-ink: auto; overflow-wrap: anywhere; }
.contact-big .cb-place { grid-column: 1 / -1; margin-top: 32px; }
@media (min-width: 900px) { .contact-big .cb-lines { grid-column: 1 / span 8; } .contact-big .cb-place { grid-column: 9 / span 4; margin-top: 0; } }

/* footer base line */
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 32px; font-size: .9375rem; }
.foot-base p { margin: 0; }
.foot-place { margin-top: 14px; }

/* a case study film: a narrower frame, with the play control in the corner so it leaves the picture clear */
.cs-film .embed { max-width: 1100px; }
.cs-film .embed .ph > picture img { aspect-ratio: 16 / 9; object-fit: cover; }
.cs-film .embed__play { place-content: end start; justify-items: start; grid-auto-flow: column; align-items: center; gap: 14px; padding: clamp(16px, 2.4vw, 32px); background: linear-gradient(to top, rgba(10, 12, 14, .5), rgba(10, 12, 14, 0) 45%); }
.cs-film .embed__btn { width: clamp(56px, 6vw, 72px); }

/* ---------- studio profiles: one editorial row per person ---------- */
.profiles { grid-column: 1 / -1; display: grid; gap: clamp(64px, 8vw, 128px); }
.profile { display: grid; gap: 24px var(--gap); grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); padding-top: 18px; }
@media (min-width: 900px) { .profile { grid-template-columns: repeat(12, minmax(0, 1fr)); } .profile__photo { grid-column: 1 / span 4; } .profile__main { grid-column: 6 / span 7; } }
.profile__photo { margin: 0; max-width: 420px; }
.profile__photo .ph { aspect-ratio: 4 / 5; filter: grayscale(1); }
.profile__mono { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--hair); }
.profile__mono span { font: 400 clamp(3rem, 2rem + 4vw, 6rem)/1 var(--serif); color: var(--soft); letter-spacing: -.02em; }
.profile__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); line-height: 1; letter-spacing: -.015em; }
.profile__role { margin: 12px 0 0; }
.profile__stand { margin: 28px 0 0; font-family: var(--serif); line-height: 1.25; max-width: 30em; }
.profile__bio { margin-top: 24px; max-width: 38em; }
.profile__bio p { margin: 0 0 1em; }
.profile__wh { margin: 36px 0 0; }
.profile__work { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--hair); max-width: 44em; }
.profile__work li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.profile__yr { padding-top: 3px; }
.profile__wt strong { font-weight: 500; }
.profile__wc { color: var(--soft); }
.profile__wd { grid-column: 2; color: var(--ink-2); }
.profile__cred { margin: 24px 0 0; max-width: 44em; }
/* ---------- the tour viewer: a dialog over the page, its controls in a bar above the tour ---------- */
.lightbox { width: min(1400px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: #0d0f11; color: #fff; display: none; flex-direction: column; }
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: rgba(8, 10, 12, .82); }
.lightbox__bar { display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 18px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.lightbox__title { flex: 1; min-width: 0; max-width: none; margin: 0; font: 500 var(--t-small)/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__new { margin-left: auto; }
.lightbox__new { color: rgba(255, 255, 255, .85); font: 400 .875rem/1.3 var(--sans); white-space: nowrap; }
.lightbox__new:hover { color: #fff; }
.lightbox__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; flex: none; }
.lightbox__close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; }
.lightbox__close:hover { background: rgba(255, 255, 255, .12); }
.lightbox__close:focus-visible, .lightbox__new:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox__frame { position: relative; flex: 1; }
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox-on { overflow: hidden; }
@media (max-width: 560px) { .lightbox { width: 100vw; height: 100dvh; } .lightbox__new { display: none; } }

/* ---------- the 360° viewer ( pano.js ): /capture and the home page ---------- */
.pano { margin: 8px 0 0; }
.pano__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0f11; container-type: inline-size; }
.pano__stage > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pano__c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s var(--ease-out); cursor: grab; touch-action: none; }
.pano.is-on .pano__c { opacity: 1; }
.pano__c.is-drag { cursor: grabbing; }
.pano__c:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.pano__open { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(132px, 19cqi, 200px); aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); background: rgba(10, 12, 14, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 500 var(--t-small)/1.25 var(--sans); text-align: center; cursor: pointer; transition: background .4s var(--ease-out); }
.pano__open:hover { background: rgba(10, 12, 14, .85); }
.pano__open:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.pano__open[hidden] { display: none; }
.pano__deg { font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1 var(--disp); }
.pano__ring { position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .45); pointer-events: none; }
.motion .pano__ring { animation: pano-spin 24s linear infinite; }
@keyframes pano-spin { to { transform: rotate(360deg); } }
.pano__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 12px; }
.pano__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.pano__tools[hidden] { display: none; }
.pano__tools .co { margin: 0; max-width: 38em; }
.pano__status:empty { display: none; }
.pano__spin { font: 500 var(--t-ui)/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--ink); min-height: 44px; padding: 8px 16px; cursor: pointer; }
.pano__spin:hover { background: var(--paper-2); }
.pano__spin[hidden] { display: none; }
.pano__spin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.floor-panel .pano__spin:hover { background: var(--on-floor); color: var(--floor); }

/* ---------- the accessibility panel ( chrome.js, still.js ) ---------- */
.set-btn { display: none; }
.js .set-btn { display: inline-flex; }
.set-btn svg { width: 20px; height: 20px; }
.a11y { position: fixed; inset: auto; top: calc(var(--head) + 6px); right: max(8px, var(--gut)); width: min(400px, calc(100vw - 16px)); max-height: calc(100dvh - var(--head) - 20px); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 18px 20px 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); box-shadow: 0 20px 60px rgba(10, 12, 14, .18); opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease-out), transform .45s var(--ease-expo), display .45s allow-discrete, overlay .45s allow-discrete; }
.a11y:popover-open { opacity: 1; transform: none; }
@starting-style { .a11y:popover-open { opacity: 0; transform: translateY(-8px); } }
.a11y::backdrop { background: transparent; }
.a11y__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y__h { font: 500 var(--t-ui)/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.a11y__x, .a11y__reset { font: 500 var(--t-ui) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--ink); min-height: 44px; padding: 0 14px; cursor: pointer; }
.a11y__x:hover, .a11y__reset:hover { background: var(--ink); color: var(--paper); }
.a11y__intro { margin: 10px 0 12px; font-size: var(--t-small); line-height: 1.4; color: var(--soft); max-width: none; }
.a11y__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.a11y__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.a11y__row--size { flex-wrap: wrap; }
.a11y__txt { display: grid; gap: 3px; min-width: 0; flex: 1; }
.a11y__lab { font-size: var(--t-small); font-weight: 500; line-height: 1.25; }
.a11y__hint { font-size: .875rem; line-height: 1.35; color: var(--soft); }
.switch { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 1.5px solid var(--ink); border-radius: 15px; background: transparent; cursor: pointer; }
.switch::before { content: ""; position: absolute; inset: -8px -6px; } /* a 44-pixel target */
.switch__knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--ink); transition: transform .35s var(--ease-expo), background .2s; }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(22px); background: var(--paper); }
.switch[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 15px; }
.a11y__seg { display: flex; width: 100%; border: 1px solid var(--ink); }
.a11y__seg button { flex: 1; min-height: 44px; padding: 0 8px; font: 500 var(--t-ui) var(--sans); letter-spacing: .04em; color: var(--ink); background: transparent; border: 0; border-left: 1px solid var(--ink); cursor: pointer; }
.a11y__seg button:first-child { border-left: 0; }
.a11y__seg button:nth-child(2) { font-size: calc(var(--t-ui) * 1.12); }
.a11y__seg button:nth-child(3) { font-size: calc(var(--t-ui) * 1.25); }
.a11y__seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.a11y__seg button:focus-visible { outline-offset: -5px; }
.a11y__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 16px; font-size: var(--t-small); }
#menu .set-btn { color: var(--paper); border-color: rgba(255, 255, 255, .4); }
#menu .set-btn .t-lab { display: inline; }

/* larger text: every size on the site is set in rem, so the whole scale grows together */
html[data-text="l"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }

/* text spacing at the values WCAG 1.4.12 tests, on running text; headings open up a little */
html[data-spacing="wide"] :is(p, li, dd, dt, td, th, figcaption, blockquote, .cap, .co, .wl-line, .a11y__hint) { letter-spacing: .12em !important; word-spacing: .16em !important; line-height: 1.6 !important; }
html[data-spacing="wide"] :is(h1, h2, h3, h4, .wl-name, .mega, .fig) { letter-spacing: .02em !important; word-spacing: .1em !important; }

/* underlined links */
html[data-links="underline"] a:not(.brand) { text-decoration-line: underline !important; text-decoration-thickness: max(1px, .07em); text-underline-offset: .2em; }

/* reduced motion, chosen in the panel ( the device setting has its own block above ) */
html[data-motion="reduce"] { scroll-behavior: auto; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html[data-motion="reduce"] .stack > .floor-panel { position: relative; top: auto !important; min-height: 0; }

/* high contrast: pure black and white, firmer edges, links underlined and no faint greys */
html[data-contrast="more"] {
  --paper: #FFFFFF; --paper-2: #FFFFFF; --paper-3: #EDEDED;
  --ink: #000000; --ink-2: #000000; --soft: #000000;
  --hair: rgba(0, 0, 0, .7); --hair-2: rgba(0, 0, 0, .45); --grat: transparent;
  --contour: #6E5643; --index: #3F2D1D; --coast: #000000;
  --c-home: #000; --c-work: #000; --c-services: #000; --c-access: #000; --c-capture: #000; --c-studio: #000; --c-contact: #000; --c-how: #000; --c-policy: #000;
  --on-home: #FFF; --on-work: #FFF; --on-services: #FFF; --on-access: #FFF; --on-capture: #FFF; --on-studio: #FFF; --on-contact: #FFF; --on-how: #FFF; --on-policy: #FFF;
  --t-home: #000; --t-work: #000; --t-services: #000; --t-access: #000; --t-capture: #000; --t-studio: #000; --t-contact: #000; --t-how: #000; --t-policy: #000;
}
html[data-contrast="more"][data-theme="dark"] {
  --paper: #000000; --paper-2: #000000; --paper-3: #1A1A1A;
  --ink: #FFFFFF; --ink-2: #FFFFFF; --soft: #FFFFFF;
  --hair: rgba(255, 255, 255, .75); --hair-2: rgba(255, 255, 255, .45); --grat: transparent;
  --c-home: #000; --on-home: #FFF;
  --contour: #B9A28E; --index: #EAD6C2; --coast: #FFFFFF;
  --t-home: #FFF; --t-work: #FFF; --t-services: #FFF; --t-access: #FFF; --t-capture: #FFF; --t-studio: #FFF; --t-contact: #FFF; --t-how: #FFF; --t-policy: #FFF;
}
html[data-contrast="more"] .floor-panel { --soft: var(--on-floor); }
html[data-contrast="more"][data-theme="dark"] .floor-panel { border-top: 2px solid #FFF; }
html[data-contrast="more"] .floor-panel .lab, html[data-contrast="more"] .floor-panel .co { color: var(--on-floor); }
html[data-contrast="more"] a:not(.brand) { text-decoration-line: underline; }
html[data-contrast="more"] :focus-visible { outline-width: 4px; }
html[data-contrast="more"] :is(.btn, .menu-btn, .a11y__x, .a11y__reset, .a11y__seg, .switch, .inset, .fmap__img2) { border-width: 2px; }
html[data-contrast="more"] .site-head { background: var(--paper); border-bottom: 2px solid var(--ink); }

/* small standalone links still get a 24-pixel target ( WCAG 2.5.8 ) */
.foot-base a, .sh .lab a, .co > a.lnk { display: inline-block; min-height: 24px; padding-block: 3px; line-height: 18px; }

/* the way in for clients: their own area on clients.wearethestill.ca */
.client-link { display: none; align-items: center; min-height: 44px; padding: 0 10px; font: 500 var(--t-ui) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.client-link:hover { border-color: var(--hair); }
@media (min-width: 1100px) { .head-tools .client-link { display: inline-flex; } }
.menu-client { margin: 28px 0 0; }
.menu-client .client-link { display: inline-flex; padding: 0; color: var(--paper); text-decoration: underline; text-underline-offset: .2em; }


/* The Still Labs on /work: the studio's own products */
.labs h2, .labs__intro, .labs__list { grid-column: 1 / -1; }
.labs__intro { margin-top: 18px; max-width: 40em; }
.labs__list { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(32px, 4vw, 48px) var(--gap); }
@media (min-width: 700px) { .labs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .labs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .labs h2 { grid-column: 1 / span 9; } .labs__intro { grid-column: 1 / span 7; } }
.lab-card__a { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.lab-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--hair); background: var(--paper-2); }
.lab-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s var(--ease-expo); }
.lab-card__a:hover .lab-card__img img { transform: scale(1.03); }
.lab-card__name { margin-top: 10px; }
.lab-card__line { max-width: 34em; }
.lab-card__url { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.lab-card__a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }