@charset "UTF-8";
/* Laika — main stylesheet entry */
/* Design tokens. Sampled from screenshot. */
/* Basier Circle — local woff2/woff. Variants live in /assets/fonts/basier-circle/. */
@font-face {
  font-family: "Basier Circle";
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/basier-circle/basiercircle-regular.woff2") format("woff2"), url("../fonts/basier-circle/basiercircle-regular.woff") format("woff");
}
@font-face {
  font-family: "Basier Circle";
  font-display: swap;
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/basier-circle/basiercircle-regularitalic.woff2") format("woff2"), url("../fonts/basier-circle/basiercircle-regularitalic.woff") format("woff");
}
@font-face {
  font-family: "Basier Circle";
  font-display: swap;
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/basier-circle/basiercircle-medium.woff2") format("woff2"), url("../fonts/basier-circle/basiercircle-medium.woff") format("woff");
}
@font-face {
  font-family: "Basier Circle";
  font-display: swap;
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/basier-circle/basiercircle-mediumitalic.woff2") format("woff2"), url("../fonts/basier-circle/basiercircle-mediumitalic.woff") format("woff");
}
@font-face {
  font-family: "Basier Circle";
  font-display: swap;
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/basier-circle/basiercircle-semibold.woff2") format("woff2"), url("../fonts/basier-circle/basiercircle-semibold.woff") format("woff");
}
@font-face {
  font-family: "Basier Circle";
  font-display: swap;
  font-weight: 600;
  font-style: italic;
  src: url("../fonts/basier-circle/basiercircle-semibolditalic.woff2") format("woff2"), url("../fonts/basier-circle/basiercircle-semibolditalic.woff") format("woff");
}
@font-face {
  font-family: "Basier Circle";
  font-display: swap;
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/basier-circle/basiercircle-bold.woff2") format("woff2"), url("../fonts/basier-circle/basiercircle-bold.woff") format("woff");
}
@font-face {
  font-family: "Basier Circle";
  font-display: swap;
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/basier-circle/basiercircle-bolditalic.woff2") format("woff2"), url("../fonts/basier-circle/basiercircle-bolditalic.woff") format("woff");
}
/* Laika — main stylesheet entry */
/* Tiny modern reset. */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: #0a0a0a;
  color: #f5f5f5;
  padding: 0.5rem 0.75rem;
  z-index: 9999;
}
.skip-link:focus {
  inset-inline-start: 0.5rem;
  top: 0.5rem;
}

/* Laika — main stylesheet entry */
html {
  color-scheme: light;
  /* iOS rubber-bands past the body and shows this; the theme-color meta in
     header.php paints the bars themselves. */
  background: #f5f5f5;
  transition: background 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

html:has(body.home) {
  background: #0a0a0a;
}

body {
  background: #f5f5f5;
  color: #0a0a0a;
  font-family: "Basier Circle", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.45;
  font-feature-settings: "ss01", "kern";
  transition: background 320ms cubic-bezier(0.22, 1, 0.36, 1), color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-content {
  /* The homepage canvas fills the full viewport itself; other pages get padding. */
  padding-block: 0;
}

body:not(.home) .site-content {
  /* Top pad clears the fixed bar, which now carries the apply pill. */
  padding: clamp(6rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem) 6rem;
  max-width: 1280px;
  margin: 0 auto;
}

a {
  transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

a:hover {
  opacity: 0.7;
}

.page-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

/* WP prints these labels in pagination and search markup; they are for
   screen readers, not for the page. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Laika — main stylesheet entry */
/* Inner pages run the same chrome as the homepage canvas — same bar, same
   mobile drawer, one partial (template-parts/site-chrome.php). Only the
   colours change: ink over the light page instead of white over footage. */
body:not(.home) .canvas-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #f5f5f5;
}
body:not(.home) .canvas-home,
body:not(.home) .canvas-menu-toggle,
body:not(.home) .canvas-nav__item {
  color: #0a0a0a;
}
body:not(.home) .canvas-lang .lang-switch__item a,
body:not(.home) .canvas-lang .lang-switch__item span {
  color: rgba(10, 10, 10, 0.55);
}
body:not(.home) .canvas-lang .lang-switch__item.is-current a,
body:not(.home) .canvas-lang .lang-switch__item.is-current span {
  color: #0a0a0a;
}
body:not(.home) .canvas-lang .lang-switch__item a:hover {
  color: #0a0a0a;
}
body:not(.home) {
  /* The pill is the one solid element on the canvas; on a light page it has
     to invert to stay that. */
}
body:not(.home) .canvas-cta {
  background: #0a0a0a;
  color: #fff;
  box-shadow: none;
}
body:not(.home) .canvas-cta:hover {
  background: #0a0a0a;
  box-shadow: 0 4px 20px rgba(10, 10, 10, 0.22);
}
body:not(.home) {
  /* The drawer is the same dark panel on every page, so whatever sits inside
     it stays white — only the bar recolours. */
}
@media (max-width: 768px) {
  body:not(.home) .canvas-drawer .canvas-nav__item {
    color: #fff;
  }
  body:not(.home) .canvas-lang .lang-switch__item a,
  body:not(.home) .canvas-lang .lang-switch__item span {
    color: rgba(255, 255, 255, 0.55);
  }
  body:not(.home) .canvas-lang .lang-switch__item.is-current a,
  body:not(.home) .canvas-lang .lang-switch__item.is-current span {
    color: #fff;
  }
  body:not(.home) .canvas-lang .lang-switch__item a:hover {
    color: #fff;
  }
  body:not(.home) {
    /* No footage behind it here, so the panel is solid rather than a
       94% wash that lets the grid show through. */
  }
  body:not(.home) .canvas-drawer {
    background: #0a0a0a;
  }
  body:not(.home) {
    /* The bar stays above the open panel, so while it is up it borrows
       the homepage treatment — ink on ink is invisible. */
  }
  body:not(.home) .canvas-top:has(.canvas-drawer.is-open) .canvas-home,
  body:not(.home) .canvas-top:has(.canvas-drawer.is-open) .canvas-menu-toggle {
    color: #fff;
  }
  body:not(.home) .canvas-top:has(.canvas-drawer.is-open) .canvas-cta {
    background: #fff;
    color: #0a0a0a;
  }
}

/* Laika — main stylesheet entry */
/* Inner-page footer (rendered by footer.php on every non-home page). */
/* Same row as the homepage canvas footer, in ink instead of white. */
.site-footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1rem, 2vmin, 1.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3vmin, 2rem);
}

/* Shared contact link / copy button. Used on inner-page footer AND in the
   homepage canvas footer row. */
.contact-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  color: #0a0a0a;
  font-family: "Basier Circle", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-link:hover {
  color: rgba(10, 10, 10, 0.55);
  opacity: 1;
}
.contact-link {
  /* Copy feedback: main.js swaps the button's textContent in place, so
     no overlay/pseudo-element is needed. We just dim it slightly to
     acknowledge the click. */
}
.contact-link.is-copied {
  color: rgba(10, 10, 10, 0.55);
}

/* Bottom-left, opposite the contacts. The row is justify-content:flex-end,
   so one auto margin is the entire layout. */
.privacy-link {
  margin-right: auto;
  color: rgba(10, 10, 10, 0.55);
  font-family: "Basier Circle", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.privacy-link:hover {
  color: #0a0a0a;
}

/* Narrow: the drawer carries the contacts, same as on the homepage. */
@media (max-width: 768px) {
  .site-footer {
    display: none;
  }
}
/* Laika — main stylesheet entry */
/* ─────────────────────────────────────────────────────────────────────
   Homepage canvas — full-viewport media backdrop with white chrome
   floating over it in three bands: top / centre / bottom.
   ───────────────────────────────────────────────────────────────────── */
.home {
  overflow: hidden;
}

.canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: #0a0a0a; /* shows through before the first frame lands */
  color: #fff;
  overflow: hidden;
}

/* Dark gradients top and bottom so the white chrome stays readable over
   whatever footage is on screen. */
.canvas::before,
.canvas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.canvas::before {
  top: 0;
  height: 30vh;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.canvas::after {
  bottom: 0;
  height: 24vh;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

.canvas__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ── Backdrop ─────────────────────────────────────────────────── */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.backdrop__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Crossfade with a whisper of drift so frames glide into each other
     instead of dissolving in place. */
  transform: scale(1.012);
  transition: opacity 640ms ease-in-out, transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.backdrop__layer.is-active {
  opacity: 1;
  transform: none;
}

.backdrop__media {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  /* Slow push-in. backdrop.js sets --kb-duration per item from the hold
     time (stills) or the clip length (video); the fallback covers the gap
     before a video reports its metadata. */
  animation: laika-kenburns var(--kb-duration, 15s) linear forwards;
  transform-origin: center;
}

@keyframes laika-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}
/* Stills hold still — the layer crossfade carries the motion, so the push-in
   only needs to keep the frame from feeling frozen. */
img.backdrop__media {
  animation-name: laika-kenburns-still;
}

@keyframes laika-kenburns-still {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.025);
  }
}
/* Film grain — stops flat footage from banding and gives the page texture. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Bands ────────────────────────────────────────────────────── */
.canvas-center,
.canvas-bottom {
  position: relative;
  z-index: 2;
}

/* Above the other two bands, not level with them: on mobile the menu drawer
   lives inside this band and has to cover the logo and the contacts. */
.canvas-top {
  position: relative;
  z-index: 3;
}

.canvas-top {
  /* 1fr auto 1fr, not space-between: the button has to sit on the page's
     centre line regardless of how wide the nav or the lang switcher get.
     Same three tracks on mobile, different occupants — see Responsive. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.75rem);
}

/* Desktop: the drawer isn't a box, it's a passthrough, so the nav and the
   lang switcher stay direct grid items of the bar. Below $bp-md it becomes a
   real panel. Explicit columns because source order is home/drawer/cta/menu. */
.canvas-drawer {
  display: contents;
}

.canvas-home,
.canvas-menu-toggle,
.canvas-drawer__contacts,
.canvas-drawer__privacy {
  display: none;
}

/* The mark opens on tap (main.js, homepage only). max-width rather than
   display, so it slides out; 4em clears "laik/" at 14px with room over. */
.canvas-home__mid {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  transition: max-width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.canvas-home.is-open .canvas-home__mid {
  max-width: 4em;
}

.canvas-nav {
  /* Row too, not just column: source order is drawer-then-cta, so with a
     column alone auto-placement pushes the pill onto a second row. */
  grid-area: 1/1;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.canvas-nav__item {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.canvas-nav__item:hover {
  opacity: 0.6;
}
.canvas-nav__item {
  /* Where you are. Set from the request path in the chrome partial. */
}
.canvas-nav__item.is-current {
  font-weight: 600;
}

/* Deliberately NOT glass. Everything else on the canvas is translucent, so
   the one solid element is where the eye lands. Sized for the bar, not the
   hero — it lives in the nav now so it stays in reach on every scroll. */
.canvas-cta {
  grid-area: 1/2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6rem 1.4rem;
  /* Negative block margin cancels the padding above, so the pill doesn't
     grow the bar and push the nav and lang switcher down — it overflows
     the row symmetrically instead. Keep it equal to the padding. */
  margin-block: -0.6rem;
  border-radius: 999px;
  background: #fff;
  color: #0a0a0a;
  font-family: "Basier Circle", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
  transition: box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.canvas-cta__arrow {
  display: inline-block;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.canvas-cta:hover {
  opacity: 1;
  background: #fff;
  box-shadow: 0 6px 34px rgba(0, 0, 0, 0.3);
}
.canvas-cta:hover .canvas-cta__arrow {
  transform: translateX(4px);
}

.canvas-lang {
  grid-area: 1/3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
}
.canvas-lang .lang-switch {
  font-size: 15px;
  gap: 0.9rem;
}
.canvas-lang .lang-switch__item a,
.canvas-lang .lang-switch__item span {
  color: rgba(255, 255, 255, 0.55);
}
.canvas-lang .lang-switch__item.is-current a,
.canvas-lang .lang-switch__item.is-current span {
  color: #fff;
}
.canvas-lang .lang-switch__item a:hover {
  color: #fff;
}

/* ── Centre: logo + tagline ───────────────────────────────────── */
.canvas-center {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  padding: clamp(1rem, 2vw, 1.75rem);
}

.canvas-logo svg {
  display: block;
  width: min(44vw, 520px);
  height: auto;
  color: #fff;
}

/* The source SVG ships with a hardcoded fill on its <path>; override so the
   white treatment actually reaches the glyph. */
.canvas-logo svg path {
  fill: currentColor;
}

.canvas-tagline {
  margin: 0;
  text-align: center;
  text-transform: lowercase;
  /* Always one line — sized off the viewport so it shrinks instead of
     wrapping. ponytail: a much longer tagline would clip; the copy is
     fixed in Polylang, so no auto-fit machinery. */
  white-space: nowrap;
  font-size: clamp(15px, 3.6vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Bottom: contacts ─────────────────────────────────────────── */
.canvas-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1rem, 2vw, 1.75rem);
}

.contact-link--canvas {
  color: #fff;
  font-size: 15px;
}
.contact-link--canvas:hover {
  color: rgba(255, 255, 255, 0.6);
}
.contact-link--canvas.is-copied {
  color: rgba(255, 255, 255, 0.6);
}

.privacy-link--canvas {
  color: rgba(255, 255, 255, 0.65);
}
.privacy-link--canvas:hover {
  color: #fff;
}

/* ── Entrance ─────────────────────────────────────────────────── */
@keyframes laika-rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Logo intro: the centre slash lands first, then `a` wipes out to its right
   and `/laik` wipes out to its left. The clip windows in the SVG are the
   slash's own diagonal edges, so the glyphs appear along the slash itself,
   not along an invisible box edge.
   Offsets are viewBox user units, sized to the worst-case y of each group:
   `a` clears the right edge at -57, `/laik` clears the left edge at +197.
   Nothing blocks — the page is live throughout, this is not the loader. */
/* The slash arrives along its own axis — direction (23.117, -60.028)
   normalised, backed off 18 units — so it reads as drawn rather than faded
   in. It settles well before `a` starts, so the clip windows (fixed in user
   space) still line up with where the slash actually is. */
@keyframes laika-logo-slash {
  from {
    opacity: 0;
    transform: translate(-6.5px, 16.8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* A slow drift over the whole mark, longer than any single glyph move, so
   the three parts read as one gesture instead of three cues. */
@keyframes laika-logo-drift {
  from {
    transform: scale(1.045);
  }
  to {
    transform: scale(1);
  }
}
/* Re-centring. The mark is optically centred on whatever is *visible*, so
   the whole thing slides as the halves arrive:
       slash alone   visible centre 188.88u -> -29.697% of the 237u box
       slash + a     visible centre 205.17u -> -36.570%
       /laik/a       visible centre 118.44u ->        0
   Percentages, not px, because .canvas-logo is exactly the SVG's rendered
   width (grid justify-items: center) — so this holds at any logo size.

   -short is the live one: the intro stops at /a and hover brings in /laik.
   Stops are the glyph timings over the 1600ms whole: 650ms = 40.625%. */
@keyframes laika-logo-center-short {
  0%, 40.625% {
    transform: translateX(-29.697%);
  }
  100% {
    transform: translateX(-36.57%);
  }
}
/* The full three-stage version, kept as the backup and still used on touch
   (no hover there, so the mark has to assemble itself). Stops over 2750ms. */
@keyframes laika-logo-center {
  0%, 23.636% {
    transform: translateX(-29.697%);
  }
  58.182% {
    transform: translateX(-36.57%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes laika-logo-a {
  from {
    transform: translateX(-57px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes laika-logo-lead {
  from {
    transform: translateX(197px);
  }
  to {
    transform: translateX(0);
  }
}
/* Eased at both ends, not expo-out: expo front-loads ~80% of the distance
   into the first fifth of the time, which reads snappy. Even pacing with a
   soft start and a soft finish is what makes it feel unhurried. */
/* Each glyph move runs against the same clock as the re-centring stop it
   belongs to, with the same easing, so the pair reads as one movement:
   the arriving letter pushes the mark across rather than racing it.
   The intro now stops after `a` — /laik is offstage until hover.

   BACKUP — to go back to the full self-assembling intro, restore these four
   lines and drop the hover block below:
       .canvas-logo { animation: laika-logo-center 2750ms $ease-glide both; }
       svg          { animation: laika-logo-drift  2750ms $ease-glide both; }
       .logo-lead   { animation: laika-logo-lead   1150ms $ease-glide 1600ms both; }
       .canvas-tagline { animation: laika-rise 900ms $ease-glide 2650ms both; } */
.canvas-logo {
  animation: laika-logo-center-short 1600ms cubic-bezier(0.32, 0, 0.16, 1) both;
}
.canvas-logo svg {
  animation: laika-logo-drift 1600ms cubic-bezier(0.32, 0, 0.16, 1) both;
}
.canvas-logo .logo-slash {
  animation: laika-logo-slash 650ms cubic-bezier(0.32, 0, 0.16, 1) both;
}
.canvas-logo .logo-a {
  animation: laika-logo-a 950ms cubic-bezier(0.32, 0, 0.16, 1) 650ms both;
}

/* Tagline lands right after `a` does. Declared before the hover blocks so
   the touch branch's longer delay isn't reset by this shorthand. */
.canvas-tagline {
  animation: laika-rise 900ms cubic-bezier(0.32, 0, 0.16, 1) 1500ms both;
}

/* Hover: /laik slides in from offstage and the mark re-centres on the whole
   word. The re-centring rides the inner layer and exactly cancels the intro's
   -36.570%, so hovering lands the full mark on the page's centre line. The
   outer box never moves, so the pointer can't chase itself in and out. */
.canvas-logo__shift {
  transition: transform 900ms cubic-bezier(0.32, 0, 0.16, 1);
}

.canvas-logo .logo-lead {
  transform: translateX(197px);
  transition: transform 900ms cubic-bezier(0.32, 0, 0.16, 1);
}

@media (hover: hover) {
  .canvas-logo:hover .canvas-logo__shift {
    transform: translateX(36.57%);
  }
  .canvas-logo:hover .logo-lead {
    transform: translateX(0);
  }
}
/* Touch has no hover to reveal /laik, so it gets the full choreography —
   the backup animation, still wired up. */
@media (hover: none) {
  .canvas-logo {
    animation-name: laika-logo-center;
    animation-duration: 2750ms;
  }
  .canvas-logo svg {
    animation-duration: 2750ms;
  }
  .canvas-logo .logo-lead {
    transform: none;
    animation: laika-logo-lead 1150ms cubic-bezier(0.32, 0, 0.16, 1) 1600ms both;
  }
  .canvas-tagline {
    animation-delay: 2650ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .canvas-logo,
  .canvas-logo svg,
  .canvas-logo__shift,
  .canvas-logo .logo-slash,
  .canvas-logo .logo-a,
  .canvas-logo .logo-lead,
  .canvas-tagline,
  .backdrop__media {
    animation: none;
    transition: none;
  }
  /* Land on the finished mark, not a half-built one. */
  .canvas-logo,
  .canvas-logo__shift,
  .canvas-logo .logo-lead {
    transform: none;
  }
}
/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Same three tracks, different occupants: /a | pieteikties | izvēlne.
     The nav links and the lang switcher move into the drawer, so the bar
     stays three items wide at any width and the button keeps the centre. */
  .canvas-home,
  .canvas-menu-toggle {
    display: inline-flex;
    align-items: center;
    /* Above the drawer's backdrop, so the bar stays usable while it's
       open — the close control has to be reachable. */
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }
  .canvas-home {
    grid-area: 1/1;
    justify-self: start;
  }
  .canvas-menu-toggle {
    grid-area: 1/3;
    justify-self: end;
  }
  .canvas-cta {
    position: relative;
    z-index: 1;
  }
  .canvas-menu-toggle {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
  }
  .canvas-menu-toggle__close {
    display: none;
  }
  .canvas-menu-toggle[aria-expanded=true] .canvas-menu-toggle__open {
    display: none;
  }
  .canvas-menu-toggle[aria-expanded=true] .canvas-menu-toggle__close {
    display: inline;
  }
  /* Fixed, so it leaves the grid entirely rather than claiming a cell.
     visibility (not display) keeps it out of the tab order when closed and
     still lets the fade run. */
  .canvas-drawer {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: clamp(1rem, 2vw, 1.75rem);
    background: rgba(10, 10, 10, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .canvas-drawer.is-open {
    opacity: 1;
    visibility: visible;
  }
  .canvas-nav {
    flex-direction: column;
    gap: 1.5rem;
  }
  .canvas-nav__item {
    font-size: 24px;
  }
  /* /a already sits in the bar on mobile — no need to list it twice. */
  .canvas-nav__item:first-child {
    display: none;
  }
  .canvas-lang .lang-switch {
    font-size: 18px;
    gap: 1.5rem;
  }
  /* Bar sits a little lower than the side inset — it reads as chrome over
     the footage rather than pinned to the edge. */
  .canvas-top {
    padding-top: 2rem;
  }
  /* The bottom band's copy is hidden; the menu carries the contacts. */
  .canvas-bottom {
    display: none;
  }
  .canvas-drawer__contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
  }
  /* The stack above is vertically centred; an auto margin here would push it
     off centre, so the link is taken out of the flow and pinned instead. */
  .canvas-drawer__privacy {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1rem, 2vw, 1.75rem);
    text-align: center;
  }
  .privacy-link {
    margin-right: 0;
  }
  .contact-link--canvas {
    font-size: 14px;
  }
  .canvas-logo svg {
    width: min(72vw, 380px);
  }
  /* Keep margin-block equal to the padding, same reason as desktop. */
  .canvas-cta {
    margin-block: -0.5rem;
    padding: 0.5rem 1.1rem;
    font-size: 14px;
  }
}
/* Laika — main stylesheet entry */
.apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.6em;
  background: #0a0a0a;
  color: #f5f5f5;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apply-btn:hover {
  transform: translateY(-1px);
  background: rgb(40.6, 40.6, 40.6);
  opacity: 1;
}

/* Laika — main stylesheet entry */
.page__header {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.page__title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.page__body {
  max-width: 720px;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: #0a0a0a;
}
.page__body p {
  margin-bottom: 1em;
}
.page__body h2 {
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  font-size: 1.5em;
  font-weight: 600;
}
.page__body h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
  font-size: 1.2em;
  font-weight: 600;
}
.page__body ul, .page__body ol {
  margin: 0 0 1em 1.2em;
  list-style: disc;
}
.page__body ul li, .page__body ol li {
  margin-bottom: 0.4em;
}
.page__body ol {
  list-style: decimal;
}
.page__body a {
  border-bottom: 1px solid currentColor;
}

/* 404 */
.not-found {
  text-align: center;
  padding: clamp(4rem, 12vw, 8rem) 0;
}
.not-found__title {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.not-found__lead {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: rgba(10, 10, 10, 0.55);
}

/* Laika — main stylesheet entry */
/* ─────────────────────────────────────────────────────────────────────
   About ("Mēs") — one column, generous air, no decoration.
   ───────────────────────────────────────────────────────────────────── */
.about {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 9vw, 8rem);
}

.about__headline {
  max-width: 20ch;
  font-size: clamp(2rem, 5.5vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.about__lead,
.about__point-body p,
.about__cta p,
.about__contact-copy p {
  max-width: 62ch;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.6;
}

.about__lead {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  color: rgba(10, 10, 10, 0.55);
}

.about__section-title {
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.8em;
}

/* ── Points ───────────────────────────────────────────────────── */
.about__points {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  list-style: none;
  counter-reset: none;
}

.about__point {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) fit-content(22vw);
  align-items: start;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}

.about__point-num {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(10, 10, 10, 0.55);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}

.about__point-title {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.5em;
}

/* ── Images ───────────────────────────────────────────────────── */
.about__hero,
.about__point-image {
  overflow: hidden;
  background: #f5f5f5;
}
.about__hero img,
.about__hero video,
.about__point-image img,
.about__point-image video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.about__hero {
  aspect-ratio: 16/7;
}

.about__point-image {
  aspect-ratio: 4/3;
}

/* Unfilled slot: an obvious, quiet box — not a broken image. */
.is-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(10, 10, 10, 0.12);
  background: transparent;
  color: rgba(10, 10, 10, 0.55);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

/* ── Apply CTA ────────────────────────────────────────────────── */
.about__cta p {
  margin-bottom: 1.75rem;
}

/* ── Contact + form ───────────────────────────────────────────── */
.about__contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  scroll-margin-top: 6rem;
}

.about__details {
  list-style: none;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 1.05rem;
  line-height: 1.5;
}
.about__details a {
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.lead-form__field > span {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: rgba(10, 10, 10, 0.55);
}
.lead-form__field input,
.lead-form__field textarea {
  font: inherit;
  color: #0a0a0a;
  background: transparent;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 0;
  padding: 0.7em 0.85em;
  transition: border-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lead-form__field input:focus,
.lead-form__field textarea:focus {
  outline: none;
  border-color: #0a0a0a;
}
.lead-form__field textarea {
  resize: vertical;
}

.lead-form__hint {
  margin-top: -0.35rem;
  font-size: 0.8rem;
  color: rgba(10, 10, 10, 0.55);
}

.lead-form__submit {
  align-self: start;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Sits under the button, quieter than the fields it explains. */
.lead-form__privacy {
  margin-top: -0.25rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.55);
}
.lead-form__privacy a {
  text-decoration: underline;
}

.lead-form__note {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(10, 10, 10, 0.12);
  font-size: 0.95rem;
}
.lead-form__note.is-ok {
  border-color: #0a0a0a;
}
.lead-form__note.is-error {
  border-color: #0a0a0a;
  color: rgba(10, 10, 10, 0.55);
}

/* Honeypot — off-screen, never focusable by tab order. */
.lead-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Map ──────────────────────────────────────────────────────── */
.about__map {
  position: relative;
}
.about__map iframe {
  display: block;
  width: 100%;
  height: clamp(18rem, 42vh, 28rem);
  border: 1px solid rgba(10, 10, 10, 0.12);
  filter: grayscale(1) contrast(1.05);
  transition: filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.about__map:hover iframe {
  filter: none;
}

.about__map-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: rgba(10, 10, 10, 0.55);
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}

/* ── Narrow ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .about__point {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }
  .about__point-image {
    grid-column: 1/-1;
    aspect-ratio: 16/10;
  }
  .about__contact {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Laika — main stylesheet entry */
.portfolio-archive__head {
  margin-bottom: clamp(2rem, 5vw, 4rem);
  /* The head carries the bottom gap; the title only needs to clear the filters. */
}
.portfolio-archive__head .page-title {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.portfolio-archive__empty {
  color: rgba(10, 10, 10, 0.55);
}

/* ── Filters + search ─────────────────────────────────────────────
   A row of text links and one bare input. No chips, no dropdown, no JS:
   every filter is a real URL, so it is shareable and back works. */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}
.portfolio-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.9rem;
}
.portfolio-filters__list a {
  display: inline-block;
  color: rgba(10, 10, 10, 0.55);
  padding-bottom: 0.15em;
  border-bottom: 1px solid transparent;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-filters__list a:hover {
  opacity: 1;
  color: #0a0a0a;
}
.portfolio-filters__list .is-current a {
  color: #0a0a0a;
  border-bottom-color: #0a0a0a;
}

.portfolio-search input {
  font: inherit;
  font-size: 0.9rem;
  color: #0a0a0a;
  width: clamp(8rem, 20vw, 13rem);
  padding: 0.15em 0 0.15em 1.5em;
  /* Magnifier as a background, so the field reads as search without any
     extra markup or an icon font. */
  background: transparent url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%230a0a0a%27 stroke-opacity=%27.55%27 stroke-width=%271.4%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%277%27 cy=%277%27 r=%274.4%27/%3E%3Cpath d=%27M10.4 10.4 14 14%27/%3E%3C/svg%3E") no-repeat 0 50%/0.95em;
  border: 0;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-search input::-moz-placeholder {
  color: rgba(10, 10, 10, 0.55);
}
.portfolio-search input::placeholder {
  color: rgba(10, 10, 10, 0.55);
}
.portfolio-search input:hover {
  border-bottom-color: rgba(10, 10, 10, 0.12);
}
.portfolio-search input:focus {
  outline: none;
  border-bottom-color: #0a0a0a;
}

/* ── Pagination ───────────────────────────────────────────────────
   ponytail: styles WP's own the_posts_pagination() markup rather than
   rolling a custom pager. */
.portfolio-archive .pagination {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}
.portfolio-archive .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.portfolio-archive .pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: rgba(10, 10, 10, 0.55);
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-archive .pagination .page-numbers:hover {
  opacity: 1;
  color: #0a0a0a;
}
.portfolio-archive .pagination .page-numbers.current {
  color: #f5f5f5;
  background: #0a0a0a;
}
.portfolio-archive .pagination .page-numbers.prev, .portfolio-archive .pagination .page-numbers.next {
  color: #0a0a0a;
}
.portfolio-archive .pagination .page-numbers.dots {
  min-width: 1.25rem;
  padding: 0;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.portfolio-card {
  display: block;
  color: inherit;
}
.portfolio-card:hover {
  opacity: 1;
}
.portfolio-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f5f5f5;
}
.portfolio-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-card:hover .portfolio-card__media img {
  transform: scale(1.03);
}
.portfolio-card__meta {
  padding-top: 0.75rem;
}
.portfolio-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.portfolio-card__sub {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  color: rgba(10, 10, 10, 0.55);
}

/* Single */
.portfolio-single__title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}
.portfolio-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  margin-bottom: 2rem;
}
.portfolio-single__meta div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.portfolio-single__meta dt {
  font-size: 0.85rem;
  color: rgba(10, 10, 10, 0.55);
  text-transform: lowercase;
}
.portfolio-single__meta dd {
  font-size: 1rem;
  font-weight: 500;
}
.portfolio-single__cover, .portfolio-single__video {
  margin: 2rem 0;
  aspect-ratio: 16/9;
  background: #f5f5f5;
}
.portfolio-single__cover img, .portfolio-single__cover iframe, .portfolio-single__cover video, .portfolio-single__video img, .portfolio-single__video iframe, .portfolio-single__video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.portfolio-single__body {
  max-width: 720px;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 3rem;
}
.portfolio-single__body p + p {
  margin-top: 1em;
}
.portfolio-single__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1rem;
  /* Same crop as the archive cards, so stills of every shape line up. */
}
.portfolio-single__gallery a {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f5f5f5;
  cursor: zoom-in;
}
.portfolio-single__gallery a:hover {
  opacity: 1;
}
.portfolio-single__gallery a:hover img {
  transform: scale(1.03);
}
.portfolio-single__gallery img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lightbox: a bare <dialog>, so Escape, the backdrop and focus return are free.
   The UA pins an open modal to all four insets, so it fills the viewport no
   matter what width we ask for — lean into that and centre the image inside,
   which also makes the whole screen a click-to-close target. */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox img {
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 92vh;
}
.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

/* Narrow: the filters wrap to their own lines anyway, so give the field the
   whole row instead of a stub sitting at the end of one. */
@media (max-width: 768px) {
  .portfolio-search {
    width: 100%;
  }
  .portfolio-search input {
    width: 100%;
  }
}
/* Laika — main stylesheet entry */
.lang-switch {
  display: inline-flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  font-size: 0.95rem;
}
.lang-switch__item a, .lang-switch__item span {
  color: rgba(10, 10, 10, 0.55);
  font-weight: 500;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-switch__item.is-current a, .lang-switch__item.is-current span {
  color: #0a0a0a;
  font-weight: 600;
}
.lang-switch__item a:hover {
  color: #0a0a0a;
  opacity: 1;
}

/* Laika — main stylesheet entry */
/* Cinema mode.

   main.js puts .is-cinema on <html> while a portfolio video is playing and
   takes it off on pause or end. Only the handful of places that name a colour
   outright need flipping — everything else inherits from body.

   ponytail: scoped overrides, not a second palette. The day the site wants a
   real dark theme (a switch in the bar, prefers-color-scheme) the answer is
   CSS custom properties in _tokens.scss and this file gets deleted. */
/* Both states need the transition, or it only animates on the way in. */
.canvas-top, .canvas-home, .canvas-menu-toggle, .canvas-nav__item, .canvas-cta, .lang-switch__item a, .lang-switch__item span, .contact-link, .privacy-link, .portfolio-single__meta dt {
  transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1), color 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-cinema {
  color-scheme: dark;
  background: #0a0a0a;
}
html.is-cinema body {
  background: #0a0a0a;
  color: #fff;
}
html.is-cinema .canvas-top {
  background: #0a0a0a;
}
html.is-cinema .canvas-home,
html.is-cinema .canvas-menu-toggle,
html.is-cinema .canvas-nav__item,
html.is-cinema .contact-link {
  color: #fff;
}
html.is-cinema .lang-switch__item a,
html.is-cinema .lang-switch__item span,
html.is-cinema .privacy-link,
html.is-cinema .portfolio-single__meta dt {
  color: rgba(255, 255, 255, 0.55);
}
html.is-cinema .lang-switch__item.is-current a,
html.is-cinema .lang-switch__item.is-current span,
html.is-cinema .lang-switch__item a:hover,
html.is-cinema .contact-link:hover,
html.is-cinema .privacy-link:hover {
  color: #fff;
}
html.is-cinema {
  /* The pill is whatever the page is not, so it flips back to the homepage
     treatment: white on ink. */
}
html.is-cinema .canvas-cta {
  background: #fff;
  color: #0a0a0a;
}
html.is-cinema .canvas-cta:hover {
  background: #fff;
  box-shadow: 0 6px 34px rgba(0, 0, 0, 0.5);
}
html.is-cinema {
  /* $bg-soft placeholders sit behind every still — light grey squares would
     flash white around the images. */
}
html.is-cinema .portfolio-single__cover,
html.is-cinema .portfolio-single__video,
html.is-cinema .portfolio-single__gallery a {
  background: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  /* Still goes dark, just without the fade. */
  html,
  body,
  .canvas-top, .canvas-home, .canvas-menu-toggle, .canvas-nav__item, .canvas-cta, .lang-switch__item a, .lang-switch__item span, .contact-link, .privacy-link, .portfolio-single__meta dt {
    transition: none;
  }
}
/* last: it overrides the light rules above */