/* ==========================================================================
   BAZA PRODUCTION - Shared content components
   Showreel cards + modal, booking demo, work cards, contact CTA.
   Loaded by every page after base.css.
   ========================================================================== */

/* ==========================================================================
   SHOWREEL
   ========================================================================== */
.reel__head { row-gap: 24px; margin-bottom: var(--space-head); }
.reel__label { grid-column: 1 / -1; align-self: start; }
.reel__title { grid-column: 1 / -1; font-size: var(--fs-2xl); }
.reel__grid { display: grid; gap: 48px var(--gap); align-items: end; }
.reel-card__btn { display: block; width: 100%; text-align: left; }
.reel-card__btn:focus-visible .reel-card__play { border-color: var(--c-accent); }
.reel-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-surface);
}
.reel-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), filter 0.8s var(--ease-out); filter: brightness(0.78); }
.reel-card__play {                               /* a small glass pill, not a yellow disc */
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 15px;
  border-radius: 999px;
  border: 1px solid rgb(237 235 230 / 0.22);
  background: rgb(10 10 11 / 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  color: var(--c-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.8s var(--ease-out), border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
.reel-card__play svg { width: 8px; height: auto; fill: var(--c-accent); flex: none; }
.reel-card__meta {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px 20px; align-items: baseline;
  padding-top: 16px;
  font-size: var(--fs-sm);
  color: var(--c-fg-2);
}
@media (hover: hover) {
  .reel-card__btn:hover img { transform: scale(1.04); filter: brightness(0.9); }
  .reel-card__btn:hover .reel-card__play { transform: translate(-50%, -50%) scale(1.04); border-color: rgb(255 224 80 / 0.55); background-color: rgb(10 10 11 / 0.48); }
}
@media (max-width: 599px) {
  .reel-card__meta { grid-template-columns: 1fr auto; }
  .reel-card__text { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 900px) {
  .reel__label { grid-column: 1 / span 3; margin-top: 0.9em; }
  .reel__title { grid-column: 4 / -1; }
  .reel__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .reel-card--film { grid-column: 1 / 9; }
  .reel-card--3d { grid-column: 9 / 13; }
}

.reel-modal {
  width: min(92vw, 1600px);
  max-width: none; max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: #000;
  color: var(--c-fg);
  overflow: visible;
}
.reel-modal::backdrop { background: rgb(5 5 6 / 0.92); backdrop-filter: blur(6px); }
.reel-modal__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.reel-modal__close {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  display: inline-flex; gap: 10px; align-items: center;
  padding: 8px 0;
  color: var(--c-fg);
}
.reel-modal__close span { font-size: 18px; line-height: 1; }
/* phones: the close sits in the screen corner, well clear of the player's own controls */
@media (max-width: 699px) {
  .reel-modal { width: 100vw; }
  .reel-modal__close { position: fixed; top: calc(env(safe-area-inset-top) + 14px); right: 16px; bottom: auto; padding: 10px 14px; border: 1px solid var(--c-line-2); border-radius: 999px; background: rgb(10 10 11 / 0.7); }
}

/* ==========================================================================
   BOOKING DEMO
   ========================================================================== */
/* --- Booking demo --- */
.booking {
  position: relative;
  padding: var(--space-xs);
  background: linear-gradient(180deg, #19191c, #121214);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 60px 120px -40px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.02) inset;
  overflow: hidden;
}
.booking::before {
  content: "";
  position: absolute; inset: -40% -20% auto auto;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(255 224 80 / 0.09), transparent);
  pointer-events: none;
}
.booking__bar {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-xs);
}
.booking__dots { display: flex; gap: 6px; }
.booking__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-surface-2); border: 1px solid var(--c-line); }
.booking__title { color: var(--c-fg-2); }
.booking__live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--c-fg-3); }
.booking__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.25; } }

.booking__head {
  display: flex; justify-content: space-between; align-items: end;
  padding-block: 20px 16px;
}
.booking__week { color: var(--c-fg-3); font-size: var(--fs-xs); }
.booking__range { font-size: var(--fs-lg); font-weight: 550; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; }
.booking__count { display: grid; justify-items: end; gap: 2px; }
.booking__count .t-mono { font-size: 10px; color: var(--c-fg-3); }
.booking__num { font-size: var(--fs-lg); font-weight: 550; font-variant-numeric: tabular-nums; line-height: 1; }

.booking__grid {
  display: grid;
  grid-template-columns: 38px repeat(5, minmax(0, 1fr));
  gap: 5px;
}
@media (max-width: 520px) {
  .booking__grid { grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 4px; }
  .slot { font-size: 8.5px; padding: 0 4px; }
  .booking__title { display: none; }
}
.booking__day, .booking__time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--c-fg-3);
  text-transform: uppercase;
}
.booking__day { padding-bottom: 6px; display: grid; }
.booking__day b { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 550; color: var(--c-fg); letter-spacing: 0; }
.booking__time { align-self: center; }
.slot {
  position: relative;
  min-height: clamp(30px, 3.1vw, 44px);
  border-radius: 5px;
  border: 1px dashed rgb(237 235 230 / 0.13);
  font-size: 10px;
  font-family: var(--font-mono);
  color: transparent;
  text-align: left;
  padding: 0 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.slot:hover:not(.is-booked) { border-color: var(--c-accent); border-style: solid; }
.slot.is-booked { border: 1px solid transparent; background: var(--c-surface-2); color: var(--c-fg-3); cursor: default; }
.slot.is-new { background: var(--c-accent); color: var(--c-accent-ink); box-shadow: 0 8px 30px -6px rgb(255 224 80 / 0.45); }
.slot.is-new.is-settled { background: rgb(255 224 80 / 0.16); color: var(--c-accent); box-shadow: none; }
.slot:disabled { cursor: default; }

.booking__toast {
  position: absolute; left: 50%; bottom: clamp(14px, 1.6vw, 26px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--c-fg);
  color: var(--c-bg);
  font-size: 10.5px;
  white-space: nowrap;
  box-shadow: 0 16px 40px -8px rgb(0 0 0 / 0.6);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  pointer-events: none;
}
.booking__toast.is-visible { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   ORBIT - the BAZA ecosystem, closing every page. Brands orbit the core in 3D
   (orbit.js places them every frame); the stage sticks while the section
   scrolls, then the orbits gather and hand over to the contact call.
   --g gather 0..1, --head / --cta opacity of the heading and the call.
   ========================================================================== */
.orb { --o-dir: var(--dir, var(--c-accent)); --g: 0; --head: 1; --cta: 0; position: relative; height: 270svh; border-top: 1px solid var(--c-line); background: var(--c-bg); }
.orb__label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--o-dir);
}
.orb__label::before { content: ""; width: 7px; height: 7px; background: var(--o-dir); transform: rotate(45deg); }
.orb__pin { position: sticky; top: 0; height: 100svh; overflow: clip; touch-action: pan-y; }
.orb.is-drag .orb__pin { cursor: grabbing; user-select: none; }
.orb__pin { -webkit-user-select: none; user-select: none; }
.orb__cta { -webkit-user-select: text; user-select: text; }
@media (hover: hover) and (pointer: fine) { .orb__pin { cursor: grab; } .orb__hit, .orb__cta a { cursor: pointer; } }
.orb__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orb__head {
  position: absolute; left: 0; right: 0; top: calc(var(--header-h) + clamp(12px, 3vh, 40px));
  display: grid; gap: 14px; align-content: start; justify-items: start;
  opacity: var(--head); transform: translateY(calc((1 - var(--head)) * -24px)); pointer-events: none;
}
.orb__title { font-size: var(--fs-lg); max-width: none; }
.orb__hint { position: absolute; left: var(--pad); bottom: clamp(20px, 4vh, 40px); font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--c-fg-3); opacity: var(--head); pointer-events: none; }
.orb__hint-touch { display: none; }
@media (hover: none) { .orb__hint-fine { display: none; } .orb__hint-touch { display: inline; } }

/* the core: BAZA mark, the anchor of the whole system */
.orb__core {
  position: absolute; left: 0; top: 0; z-index: 300;
  width: var(--core, 96px); height: var(--core, 96px);
  display: grid; place-items: center; align-content: center; gap: 10px;
  pointer-events: none;
}
.orb__mark { width: calc(var(--core, 96px) * 0.4); height: auto; fill: var(--o-dir); }

/* the brands */
.orb__sys { position: absolute; inset: 0; pointer-events: none; }
.orb__item { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform, opacity; }
.orb__hit {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  display: grid; place-items: center; padding: 10px 12px;
  color: var(--c-fg); pointer-events: auto; cursor: pointer; border-radius: 2px;
}
.orb.is-gathered .orb__hit { pointer-events: none; }
.orb__hit:focus-visible { outline: 1px solid var(--o-dir); outline-offset: 2px; }
.orb__logo { display: block; max-width: none; transition: filter 0.6s var(--ease-out); user-select: none; }
.orb__logo--mono { filter: brightness(0) invert(0.93); }
.orb__logo--gray { filter: grayscale(1) contrast(1.1) brightness(0.8); }
@media (hover: hover) and (pointer: fine) {
  .orb__item[data-color="1"] .orb__hit:hover .orb__logo { filter: none; }
}
.orb__item[data-color="1"] .orb__hit:focus-visible .orb__logo { filter: none; }

/* wordmarks: brands without a vector logo, set in their own manner */
.orb__word { display: inline-grid; justify-items: center; gap: 0.28em; font-family: var(--font-display); font-size: var(--orb-fs, 16px); line-height: 1; white-space: nowrap; color: var(--c-fg); }
.orb__w2 { font-size: 0.56em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-fg-2); }
.orb__word--wide { font-weight: 500; letter-spacing: 0.34em; padding-left: 0.34em; }
.orb__word--sans .orb__w1 { font-weight: 650; letter-spacing: -0.01em; }
.orb__word--sans-one { font-weight: 600; letter-spacing: -0.01em; font-size: calc(var(--orb-fs, 16px) * 0.95); }
.orb__word--lower { font-weight: 800; letter-spacing: -0.045em; font-size: calc(var(--orb-fs, 16px) * 1.12); }
.orb__word--bold { font-weight: 800; letter-spacing: -0.03em; font-size: calc(var(--orb-fs, 16px) * 1.1); }
.orb__item[data-name="VR"] .orb__word { font-size: calc(var(--orb-fs, 16px) * 1.7); }
.orb__word--stack .orb__w1 { font-weight: 700; letter-spacing: 0.16em; padding-left: 0.16em; }
.orb__word--light .orb__w1 { font-weight: 300; letter-spacing: 0.3em; padding-left: 0.3em; }
.orb__word--serif, .orb__word--serif-wide, .orb__word--serif-sub { font-family: "Didot", "Bodoni 72", Georgia, "Times New Roman", serif; font-weight: 400; }
.orb__word--serif { font-size: calc(var(--orb-fs, 16px) * 1.2); letter-spacing: 0.01em; }
.orb__word--serif-wide { letter-spacing: 0.42em; padding-left: 0.42em; font-size: calc(var(--orb-fs, 16px) * 1.05); }
.orb__word--serif-sub .orb__w1 { letter-spacing: 0.14em; font-size: 1.05em; }
.orb__word--serif-sub .orb__w2 { font-style: italic; text-transform: none; letter-spacing: 0.06em; font-size: 0.66em; }
.orb__word--mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.3em; padding-left: 0.3em; font-size: calc(var(--orb-fs, 16px) * 0.8); }

/* the caption of the brand in focus */
.orb__cap {
  position: absolute; left: 0; top: 0; z-index: 950;
  display: grid; justify-items: center; gap: 4px; white-space: nowrap;
  opacity: 0; transition: opacity 0.35s var(--ease-out); pointer-events: none;
}
.orb.has-active .orb__cap { opacity: 1; }
.orb__cap-name { font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--c-fg); }
.orb__cap-kind { font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--o-dir); }

/* the call: rises under the gathered core */
.orb__cta {
  position: absolute; left: 0; right: 0; bottom: clamp(36px, 9vh, 110px); z-index: 960;
  display: grid; justify-items: center; gap: clamp(14px, 2vh, 24px); padding-inline: var(--pad);
  text-align: center;
  opacity: var(--cta); transform: translateY(calc((1 - var(--cta)) * 40px));
  pointer-events: none;
}
.orb.is-gathered .orb__cta { pointer-events: auto; }
.orb__cta .orb__label { justify-self: center; }
.orb__cta-title { font-size: var(--fs-xl); max-width: 18ch; }
.orb__cta-text { max-width: 46ch; color: var(--c-fg-2); font-size: var(--fs-md); }
.orb__actions { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 6px; }
.orb__links { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; }
.orb__links i { width: 4px; height: 4px; background: var(--c-fg-3); transform: rotate(45deg); }
.orb__mail { font-size: var(--fs-sm); color: var(--c-fg-2); border-bottom: 1px solid var(--c-line-2); padding-bottom: 2px; transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out); }
.orb__mail:hover { color: var(--c-fg); border-color: var(--c-fg); }

/* the button is an orbit: a light travels round its hairline */
@property --orb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.orb__go {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 19px 30px 19px 34px; border-radius: 999px;
  border: 1px solid var(--c-line-2);
  font-size: var(--fs-base); font-weight: 550; color: var(--c-fg);
  transition: color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.orb__go::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--o-dir); transform: scale(0.6); opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.orb__go-ring {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--orb-a), transparent 0 72%, var(--o-dir) 86%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: orb-spin 5.5s linear infinite;
}
.orb__go .btn__arrow { width: 9px; height: 9px; transition: transform 0.5s var(--ease-out); }
.orb__go:hover, .orb__go:focus-visible { color: var(--c-accent-ink); border-color: var(--o-dir); }
.orb__go:hover::before, .orb__go:focus-visible::before { transform: none; opacity: 1; }
.orb__go:hover .btn__arrow { transform: translateX(4px); }
@keyframes orb-spin { to { --orb-a: 360deg; } }

/* no script: a calm, readable constellation (with script the tall stage is reserved from the first paint - no layout jump) */
.no-js .orb { height: auto; }
.no-js .orb .orb__pin { position: relative; height: auto; display: grid; gap: 48px; padding-block: calc(var(--header-h) + 40px) 80px; }
.no-js .orb .orb__head, .no-js .orb .orb__cta { position: relative; top: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; }
.no-js .orb .orb__sys { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; padding-inline: var(--pad); }
.no-js .orb .orb__item { position: relative; width: auto; height: auto; opacity: 0.8; }
.no-js .orb .orb__hit { position: relative; translate: none; }
.no-js .orb .orb__logo { height: 26px; width: auto; }
.no-js .orb .orb__core, .no-js .orb .orb__hint, .no-js .orb .orb__cap { display: none; }
@media (prefers-reduced-motion: reduce) { .orb__go-ring { animation: none; --orb-a: 200deg; } }
@media (max-width: 699px) {
  .orb { height: 240svh; }
    .orb__cta-title { font-size: var(--fs-lg); }
  .orb__cta-text { font-size: var(--fs-base); }
}

/* phones held sideways and other short screens: the call stands beside the gathered system */
@media (orientation: landscape) and (max-height: 620px) {
  .orb { height: 230svh; }
  .orb__head { top: calc(var(--header-h) + 8px); gap: 8px; }
  .orb__head { right: auto; max-width: 36%; }
  .orb__title { font-size: var(--fs-md); }
    .orb__hint { bottom: 12px; }
  .orb__cta {
    left: 50%; right: 0; top: calc(var(--header-h) + 8px); bottom: 12px;
    align-content: center; justify-items: start; text-align: left; gap: 12px;
  }
  .orb__cta .orb__label { justify-self: start; }
  .orb__cta-title { font-size: var(--fs-lg); }
  .orb__cta-text { font-size: var(--fs-sm); }
  .orb__actions { align-items: flex-start; }
  .orb__links { justify-content: flex-start; }
  .orb__go { padding: 14px 24px 14px 26px; }
}


/* ==========================================================================
   LEGAL - documents (/legal/<slug>/): a quiet reading column with the list
   of documents and the contents on the side (sticky on wide screens).
   ========================================================================== */
.legal { padding-block: calc(var(--header-h) + clamp(32px, 6vw, 88px)) var(--space-2xl); }
.legal__grid { display: grid; gap: clamp(32px, 5vw, 72px); }
.legal__kicker { font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--c-fg-3); }
.legal__side { display: grid; gap: 14px; align-content: start; }
.legal__docs, .legal__toc { display: grid; gap: 9px; margin-bottom: 18px; font-size: var(--fs-sm); color: var(--c-fg-2); }
.legal__toc { counter-reset: none; }
.legal__docs a, .legal__toc a { transition: color 0.3s var(--ease-out); }
.legal__docs a:hover, .legal__toc a:hover { color: var(--c-fg); }
.legal__docs a[aria-current="page"] { color: var(--c-fg); }
.legal__docs a[aria-current="page"]::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 10px 2px 0; background: var(--c-accent); transform: rotate(45deg); }
.legal__doc { min-width: 0; max-width: 74ch; }
.legal__title { margin-top: 14px; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; hyphens: auto; overflow-wrap: anywhere; }
.legal__meta { margin-top: 18px; font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--c-fg-3); }
.legal__note { margin-top: 22px; padding: 14px 18px; border: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-fg-2); }
.legal__note a, .legal__body a { color: var(--c-fg); text-decoration: underline; text-decoration-color: var(--c-line-2); text-underline-offset: 3px; transition: text-decoration-color 0.3s var(--ease-out); overflow-wrap: anywhere; }
.legal__note a:hover, .legal__body a:hover { text-decoration-color: currentColor; }
.legal__body { margin-top: clamp(28px, 4vw, 48px); font-size: var(--fs-base); line-height: 1.65; color: var(--c-fg-2); }
.legal__body > * + * { margin-top: 1em; }
.legal__body h2 { margin-top: 2.4em; padding-top: 1.1em; border-top: 1px solid var(--c-line); font-size: var(--fs-md); font-weight: 600; line-height: 1.25; color: var(--c-fg); scroll-margin-top: calc(var(--header-h) + 24px); }
.legal__body h3 { margin-top: 1.8em; font-size: var(--fs-base); font-weight: 600; color: var(--c-fg); }
.legal__body strong { color: var(--c-fg); font-weight: 600; }
.legal__body ul { display: grid; gap: 0.55em; padding-left: 1.3em; }
.legal__body li { position: relative; }
.legal__body li::before { content: ""; position: absolute; left: -1.1em; top: 0.68em; width: 5px; height: 5px; border: 1px solid var(--c-fg-3); transform: rotate(45deg); }
.legal__table { overflow-x: auto; border: 1px solid var(--c-line); }
.legal__table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-sm); }
.legal__table th, .legal__table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.legal__table th { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--c-fg-3); }
.legal__table tr:last-child td { border-bottom: 0; }
@media (max-width: 899px) { .legal__toc, .legal__side > .legal__kicker:nth-of-type(2) { display: none; } }
@media (min-width: 900px) {
  .legal__grid { grid-template-columns: minmax(220px, 3fr) 9fr; }
  .legal__side { position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100svh - var(--header-h) - 64px); overflow-y: auto; }
}

/* footer: five columns next to the brand on wide screens */
@media (min-width: 900px) and (max-width: 1199px) {
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col, .site-footer__col:first-of-type { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .site-footer__brand { grid-column: 1 / span 2; }
  .site-footer__col, .site-footer__col:first-of-type { grid-column: span 2; }
}

/* ==========================================================================
   PROJECT FORM (dialog) - a panel that slides in from the right (from the
   bottom on phones): hairline fields, mono labels, chips, the page colour as
   the only accent. Opened by [data-contact], see contact.js.
   ========================================================================== */
.cf {
  --cf-acc: var(--dir, var(--c-accent));
  --cf-pad: clamp(20px, 3vw, 44px);
  position: fixed; inset: 0 0 0 auto;
  width: min(760px, 100vw); height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-left: 1px solid var(--c-line);
  background: #0d0d0f; color: var(--c-fg);
  overflow: hidden;
  opacity: 0; transform: translateX(48px);
  transition: opacity 0.38s var(--ease-out), transform 0.5s var(--ease-out);
}
.cf.is-in { opacity: 1; transform: none; }
.cf.is-out { opacity: 0; transform: translateX(32px); transition-duration: 0.3s, 0.38s; }
.cf::backdrop { background: rgb(5 5 6 / 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.4s var(--ease-out); }
.cf.is-in::backdrop { opacity: 1; }
.cf__form { display: flex; flex-direction: column; height: 100%; }
.cf [hidden] { display: none !important; }

/* head */
.cf__head { flex: none; padding: var(--cf-pad) var(--cf-pad) 0; border-bottom: 1px solid var(--c-line); }
.cf__top { display: flex; justify-content: space-between; align-items: center; }
.cf__kicker { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--cf-acc); }
.cf__kicker::before { content: ""; width: 7px; height: 7px; background: var(--cf-acc); transform: rotate(45deg); }
.cf__close { position: relative; width: 44px; height: 44px; margin-right: -12px; border-radius: 50%; transition: background-color 0.3s var(--ease-out); }
.cf__close:hover { background: rgb(237 235 230 / 0.06); }
.cf__close span::before, .cf__close span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1px; background: var(--c-fg);
  transform: translate(-50%, -50%) rotate(45deg); transition: transform 0.4s var(--ease-out);
}
.cf__close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cf__close:hover span::before { transform: translate(-50%, -50%) rotate(135deg); }
.cf__close:hover span::after { transform: translate(-50%, -50%) rotate(45deg); }
.cf__title { margin-top: 18px; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.cf__lead { margin-top: 14px; max-width: 52ch; font-size: var(--fs-sm); color: var(--c-fg-2); }
.cf__tabs { position: relative; display: flex; gap: 28px; margin-top: 26px; }
.cf__tab { display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 0 14px; font-size: var(--fs-base); color: var(--c-fg-3); transition: color 0.3s var(--ease-out); }
.cf__tab span { font-size: var(--fs-xs); }
.cf__tab[aria-selected="true"], .cf__tab:hover { color: var(--c-fg); }
.cf__tab:focus-visible { outline: 1px solid var(--cf-acc); outline-offset: 4px; }
.cf__ind { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--cf-acc); transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out); }

/* body */
.cf__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px var(--cf-pad) 36px; scrollbar-width: thin; scrollbar-color: var(--c-line-2) transparent; }
.cf__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; animation: cf-in 0.5s var(--ease-out); }
.cf__panel[hidden] { display: none; }
@keyframes cf-in { from { opacity: 0; transform: translateY(10px); } }
.cf__field, .cf__group, .cf__set, .cf__branch, .cf__intro { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 560px) { .cf__field:not(.cf__field--wide) { grid-column: auto; } }
.cf__field { display: grid; gap: 8px; }
.cf__field label, .cf__group legend, .cf__set legend, .cf__branch legend {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--c-fg-3);
}
.cf__req { margin-left: 4px; font-style: normal; color: var(--cf-acc); }
.cf input[type="text"], .cf input[type="email"], .cf input[type="tel"], .cf textarea {
  width: 100%; padding: 10px 0 11px; border: 0; border-bottom: 1px solid var(--c-line-2); border-radius: 0;
  background: transparent; color: var(--c-fg); font: inherit; font-size: var(--fs-base);
  transition: border-color 0.35s var(--ease-out);
}
.cf textarea { resize: none; min-height: 46px; line-height: 1.5; overflow: hidden; }
.cf input::placeholder, .cf textarea::placeholder { color: rgb(237 235 230 / 0.28); }
.cf input:hover, .cf textarea:hover { border-color: rgb(237 235 230 / 0.36); }
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--cf-acc); }
.cf [aria-invalid="true"] { border-color: #ff5a5a; }
.cf__err { min-height: 0; font-size: var(--fs-xs); color: #ff7a7a; }
.cf__err:empty { display: none; }
.cf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* chips */
.cf__group, .cf__set, .cf__branch { border: 0; margin: 0; padding: 0; }
.cf__group legend { margin-bottom: 12px; }
.cf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf__chip { position: relative; cursor: pointer; }
.cf__chip input { position: absolute; opacity: 0; pointer-events: none; }
.cf__chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 15px;
  border: 1px solid var(--c-line-2); border-radius: 999px; font-size: var(--fs-sm); color: var(--c-fg-2);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.cf__chip:hover span { color: var(--c-fg); border-color: rgb(237 235 230 / 0.4); }
.cf__chip input:checked + span { color: var(--c-accent-ink); background: var(--cf-acc); border-color: var(--cf-acc); }
.cf__chip input:focus-visible + span { outline: 1px solid var(--cf-acc); outline-offset: 3px; }

/* brief */
.cf__intro { font-size: var(--fs-sm); color: var(--c-fg-2); max-width: 60ch; }
.cf__set, .cf__branch { display: grid; gap: 20px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.cf__set legend, .cf__branch legend { float: left; width: 100%; margin-bottom: 4px; color: var(--cf-acc); }
.cf__branch:not([hidden]) { animation: cf-in 0.5s var(--ease-out); }

/* foot */
.cf__foot { flex: none; display: grid; gap: 14px; padding: 18px var(--cf-pad) calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); background: #0d0d0f; }
.cf__consent { font-size: var(--fs-xs); color: var(--c-fg-3); }
.cf__consent a { color: var(--c-fg-2); text-decoration: underline; text-underline-offset: 3px; }
.cf__submit {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20px 26px;
  border-radius: 999px; background: var(--cf-acc); color: var(--c-accent-ink);
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em;
}
.cf__submit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: translateX(-101%); transition: transform 0.55s var(--ease-out); }
.cf__submit:hover::before, .cf__submit:focus-visible::before { transform: none; }
.cf__submit .btn__arrow { width: 11px; height: 11px; transition: transform 0.5s var(--ease-out); }
.cf__submit:hover .btn__arrow { transform: translateX(5px); }
.cf__submit:disabled { opacity: 0.6; }
.cf__submit:focus-visible { outline: 1px solid var(--c-fg); outline-offset: 3px; }

/* done */
.cf__done { display: grid; gap: 18px; align-content: start; animation: cf-in 0.5s var(--ease-out); }
.cf__done-text { max-width: 54ch; color: var(--c-fg-2); }
.cf__copy-src { min-height: 180px; padding: 14px !important; border: 1px solid var(--c-line) !important; font-family: var(--font-mono) !important; font-size: var(--fs-xs) !important; color: var(--c-fg-2) !important; overflow: auto !important; }
.cf__done-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cf__btn { padding: 12px 20px; border-radius: 999px; background: var(--cf-acc); color: var(--c-accent-ink); font-size: var(--fs-sm); font-weight: 550; }
.cf__btn--ghost { background: transparent; color: var(--c-fg); border: 1px solid var(--c-line-2); }

/* phones: full screen, rises from below */
@media (max-width: 699px) {
  .cf { inset: 0; width: 100vw; border-left: 0; transform: translateY(40px); }
  .cf.is-out { transform: translateY(28px); }
  .cf__title { margin-top: 12px; }
  .cf__lead { display: none; }
  .cf__tabs { margin-top: 16px; }
  .cf__submit { padding: 17px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf, .cf.is-out { transform: none; }
  .cf__panel, .cf__branch:not([hidden]), .cf__done { animation: none; }
}

/* reCAPTCHA v3: the floating badge is hidden (Google allows it when the
   notice is shown in the form - .cf__captcha) */
.grecaptcha-badge { visibility: hidden !important; }
.cf__captcha { font-size: 10px; line-height: 1.5; color: var(--c-fg-3); }
.cf__captcha a { color: var(--c-fg-3); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   CONSENT - cookie choice on every page until the visitor answers. A small
   bar over the page (fixed: it never moves the layout).
   ========================================================================== */
.consent {
  position: fixed; left: var(--pad); right: var(--pad); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 980;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  max-width: 760px; margin-left: auto; padding: 16px 18px 16px 22px;
  border: 1px solid var(--c-line-2); background: rgb(13 13 15 / 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(16px); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.consent.is-in { opacity: 1; transform: none; }
.consent[hidden] { display: none; }
.consent__text { flex: 1 1 280px; font-size: var(--fs-sm); color: var(--c-fg-2); }
.consent__text a { color: var(--c-fg); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: 8px; }
.consent__btn { min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--c-line-2); font-size: var(--fs-sm); color: var(--c-fg); transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.consent__btn:hover { border-color: var(--c-fg-2); }
.consent__btn--yes { background: var(--c-fg); border-color: var(--c-fg); color: var(--c-accent-ink); }
.consent__btn--yes:hover { background: #fff; }
.consent__btn--link { border-color: transparent; color: var(--c-fg-2); padding-inline: 10px; text-decoration: underline; text-underline-offset: 3px; }
.consent__btn--link:hover { border-color: transparent; color: var(--c-fg); }
.consent__btn[hidden] { display: none; }
/* settings: the categories, one row each */
.consent__prefs { flex: 1 1 100%; display: grid; gap: 2px; border-top: 1px solid var(--c-line); }
.consent__prefs[hidden] { display: none; }
.consent__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--c-line); cursor: default; }
label.consent__row { cursor: pointer; }
.consent__cat { font-size: var(--fs-sm); color: var(--c-fg); }
.consent__desc { margin-top: 2px; font-size: var(--fs-xs); line-height: 1.45; color: var(--c-fg-3); }
.consent__always { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-fg-3); }
.consent__switch {
  flex: none; appearance: none; -webkit-appearance: none; margin: 0;
  width: 46px; height: 28px; border-radius: 999px; border: 1px solid var(--c-line-2); background: rgb(237 235 230 / 0.06);
  position: relative; cursor: pointer; transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.consent__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-fg-2); transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out); }
.consent__switch:checked { background: var(--c-fg); border-color: var(--c-fg); }
.consent__switch:checked::after { transform: translateX(18px); background: #0a0a0b; }
.consent.is-prefs .consent__actions { width: 100%; justify-content: flex-end; }
.consent.is-prefs [data-consent=decline] { display: none; }        /* in settings: Save or Accept all */
/* phones: text on top, two equal thumb-sized buttons below */
@media (max-width: 599px) {
  .consent { left: 12px; right: 12px; padding: 16px; gap: 12px; }
  .consent__text { flex-basis: 100%; font-size: var(--fs-xs); line-height: 1.5; }
  .consent__actions { width: 100%; flex-wrap: wrap; }
  .consent__btn { flex: 1; }
  .consent__btn--link { flex: 1 1 100%; order: 3; min-height: 36px; padding-block: 4px; font-size: var(--fs-xs); }
  .consent__prefs { max-height: 52svh; overflow-y: auto; }
}
@media (hover: none), (pointer: coarse) { .consent { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(13 13 15 / 0.97); } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }