/* Random Quark: clean site styles (no theme framework). One file for every rebuilt page. */
@font-face { font-family:"roc-grotesk"; src:url("/assets/roc-grotesk-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root {
  --font:"roc-grotesk", Arial, Helvetica, sans-serif;
  --ink:#111; --muted:#4a4a4a; --line:rgba(17,17,17,.14); --accent:#19a1d3; --lime:#e6eea0; --paper:#f6f5f0;
  --gutter:clamp(20px, 5vw, 64px); --wide:1280px; --read:880px;
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--font); font-size:16px; line-height:1.5; letter-spacing:.01em; color:#000; background:#fff; overflow-x:clip; }
img, video, iframe { display:block; max-width:100%; }
img, video { height:auto; }
h1, h2, h3, h4, p, ul, figure { margin:0; }
h1, h2, h3, h4 { font-weight:400; letter-spacing:-.01em; line-height:1.15; }
a { color:inherit; }
strong { font-weight:700; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

.rq-wrap { width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter); }
.rq-read { max-width:var(--read); }
.rq-center { text-align:center; margin-inline:auto; }
.rq-skip { position:absolute; left:-9999px; top:8px; z-index:50; background:#fff; padding:8px 12px; }
.rq-skip:focus { left:8px; }

/* Header */
.rq-header { position:relative; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(env(safe-area-inset-top, 0px) + 18px) var(--gutter) 18px; background:#fff; }
.rq-brand { display:flex; flex-direction:column; gap:2px; line-height:1.1; letter-spacing:-.01em; text-decoration:none; }
.rq-site-name { font-size:clamp(22px, 2vw, 28px); color:#111; white-space:nowrap; }
.rq-site-tagline { font-size:clamp(14px, 1.1vw, 16px); color:var(--muted); letter-spacing:0; white-space:nowrap; }
.rq-nav { display:flex; gap:clamp(18px, 2.4vw, 36px); font-size:14.5px; }
.rq-nav-link { text-decoration:none; padding-block:2px; border-bottom:1px solid transparent; }
.rq-nav-link:hover, .rq-nav-link[aria-current="page"] { border-bottom-color:currentColor; }
.rq-burger { display:none; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; position:relative; }
.rq-burger span { position:absolute; left:8px; right:8px; height:1.5px; background:#111; transition:transform .25s ease, top .25s ease; }
.rq-burger span:first-child { top:17px; } .rq-burger span:last-child { top:26px; }
.rq-menu-open .rq-burger span:first-child { top:21px; transform:rotate(45deg); }
.rq-menu-open .rq-burger span:last-child { top:21px; transform:rotate(-45deg); }
.rq-menu { position:fixed; inset:0; z-index:20; background:#fff; padding:calc(var(--header-h, 88px) + 24px) var(--gutter) 40px; overflow:auto; }
.rq-menu nav { display:flex; flex-direction:column; gap:18px; font-size:clamp(30px, 8vw, 40px); }
.rq-menu .rq-nav-link { align-self:flex-start; }
.rq-menu-open { overflow:hidden; }
@media (max-width:767px) { .rq-nav { display:none; } .rq-burger { display:block; } }

/* Footer */
.rq-footer { text-align:center; padding:clamp(56px, 8vw, 96px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 48px); display:grid; gap:18px; }
.rq-footer-brand { font-size:clamp(21px, 1.8vw, 25.6px); line-height:1.27; }
.rq-footer-nav { display:flex; justify-content:center; gap:14px; }
.rq-footer-nav a { color:#111; text-decoration-color:rgba(17,17,17,.3); text-underline-offset:3px; }
.rq-footer-nav a:hover { text-decoration-color:currentColor; }
.rq-social { display:flex; justify-content:center; gap:6px; }
.rq-social a { display:grid; place-items:center; width:44px; height:44px; color:#111; }

/* Buttons and shared bits */
.rq-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.55em 1.2em; border:0; border-radius:6.4px;
  background:var(--accent); color:#fff; font:inherit; font-size:clamp(18px, 1.4vw, 20px); text-decoration:none; text-align:center; cursor:pointer; }
.rq-button:hover { background:#1489b4; }
.rq-button[disabled] { opacity:.55; cursor:not-allowed; }
.rq-embed { position:relative; aspect-ratio:16 / 9; background:#111; }
.rq-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.rq-video-toggle { position:absolute; right:10px; bottom:10px; z-index:2; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:transparent; cursor:pointer; }
.rq-video-toggle::before { content:""; position:absolute; inset:7px; border-radius:50%; background:rgba(0,0,0,.42); transition:background .2s ease; }
.rq-video-toggle:hover::before { background:rgba(0,0,0,.7); }
.rq-video-toggle::after { content:""; position:absolute; left:50%; top:50%; width:10px; height:12px; transform:translate(-50%, -50%);
  background:linear-gradient(to right, #fff 0 33%, transparent 33% 67%, #fff 67% 100%); }
.rq-video-toggle[aria-label^="Play"]::after { transform:translate(-40%, -50%); background:#fff; clip-path:polygon(0 0, 100% 50%, 0 100%); }
@media (min-width:768px) { .rq-video-toggle { right:20px; bottom:20px; } }

/* Home: hero video, full 16:9 on phones, near full-screen on desktop */
.rq-hero { position:relative; background:#000; aspect-ratio:16 / 9; }
.rq-hero video { width:100%; height:100%; object-fit:cover; }
@media (min-width:768px) { .rq-hero { aspect-ratio:auto; height:min(calc(100svh - var(--header-h, 76px)), 56.25vw); } }

/* New landing page: lower sections. Scoped to .rq-nl so the captured theme is untouched. */
.rq-nl {
  --ink:#111; --muted:#4a4a4a; --line:rgba(17,17,17,.14); --lime:#e6eea0; --paper:#f6f5f0;
  --gutter:clamp(20px, 5vw, 64px); --space:clamp(48px, 11vw, 160px);
  color:var(--ink); font-family:var(--body-font-font-family, "roc-grotesk", Arial, sans-serif);
}
.rq-nl *, .rq-nl *::before, .rq-nl *::after { box-sizing:border-box; }
.rq-nl-wrap { width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--gutter); }
.rq-nl img, .rq-nl video { display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.rq-nl figure { margin:0; overflow:hidden; background:var(--paper); }
.rq-nl h2, .rq-nl h3, .rq-nl p { margin:0; font-weight:400; letter-spacing:-.015em; }
.rq-nl a { color:inherit; text-decoration:none; }
.rq-nl-arrow { flex:none; width:1em; height:1em; transition:transform .3s ease; }
.rq-nl a:hover .rq-nl-arrow, .rq-nl a:focus-visible .rq-nl-arrow { transform:translateX(.25em); }
.rq-nl a:focus-visible { outline:2px solid currentColor; outline-offset:4px; }

/* Intro statement */
.rq-nl-intro { padding-block:var(--space) calc(var(--space) * .55); }
.rq-nl-statement { max-width:22ch; font-size:clamp(26px, 4.6vw, 64px); line-height:1.1; letter-spacing:-.025em; }
.rq-nl-cta { display:inline-flex; align-items:center; gap:.5em; margin-top:clamp(28px, 4vw, 48px);
  font-size:clamp(18px, 1.6vw, 22px); padding:.75em 1.3em; border:1px solid var(--ink); border-radius:999px;
  transition:background .25s ease, color .25s ease; }
.rq-nl-cta:hover { background:var(--ink); color:#fff; }

/* Two featured projects */
.rq-nl-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(10px, 2vw, 28px); }
.rq-nl-tile { display:block; aspect-ratio:1; overflow:hidden; background:var(--paper); }
.rq-nl-tile img { transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.rq-nl-tile:hover img { transform:scale(1.04); }

/* What we do */
.rq-nl-what { padding-block:var(--space) calc(var(--space) * .6); display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(20px, 3vw, 40px); }
.rq-nl-eyebrow { font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:14px; }
.rq-nl-eyebrow::before { content:""; width:28px; height:1px; background:currentColor; }
.rq-nl-lede { max-width:28ch; font-size:clamp(26px, 3.4vw, 48px); line-height:1.16; letter-spacing:-.02em; }

/* Play / experiment / research */
.rq-nl-pillars { display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(48px, 8vw, 72px); padding-bottom:var(--space); }
.rq-nl-pillar figure { aspect-ratio:4 / 3; margin-bottom:22px; }
/* Keep the speaker on the right-hand podium in frame when cropped. */
.rq-nl-pillar .rq-nl-focus-right { object-position:100% 50%; }
/* Keep heads and the laptop screen in frame: crop from near the top. */
.rq-nl-pillar .rq-nl-focus-top { object-position:50% 10%; }
/* The portrait video gets a taller card on phones too, so more of it shows. */
.rq-nl-pillar figure.rq-nl-tall { aspect-ratio:4 / 5; }
.rq-nl-pillar h3 { font-size:clamp(26px, 2.4vw, 34px); line-height:1.1; margin-bottom:12px; }
.rq-nl-pillar p { font-size:clamp(17px, 1.3vw, 19px); line-height:1.5; color:var(--muted); max-width:36ch; letter-spacing:0; }
@media (min-width:900px) {
  .rq-nl-pillars { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(24px, 3vw, 48px); align-items:start; }
  .rq-nl-pillar figure { aspect-ratio:4 / 5; }
  /* A gentle stagger so the three read as a sequence rather than a table. */
  .rq-nl-pillar:nth-child(2) { margin-top:clamp(48px, 7vw, 110px); }
  .rq-nl-pillar:nth-child(3) { margin-top:clamp(96px, 14vw, 220px); }
}

/* Contact band */
.rq-nl-contact { background:var(--lime); padding-block:var(--space); }
.rq-nl-contact-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); align-items:center; }
.rq-nl-contact figure { aspect-ratio:4 / 3; background:rgba(0,0,0,.06); }
.rq-nl-contact-link { display:flex; align-items:flex-end; gap:.35em; flex-wrap:wrap;
  font-size:clamp(34px, 5.4vw, 76px); line-height:1.04; letter-spacing:-.03em; }
.rq-nl-contact-link .rq-nl-arrow { margin-bottom:.1em; }
.rq-nl-contact-link:hover span { background-size:100% 2px; }
.rq-nl-contact-link span { background:linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition:background-size .4s ease; }
@media (min-width:900px) {
  .rq-nl-contact-grid { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
  .rq-nl-contact figure { aspect-ratio:4 / 5; }
}

/* Clients */
.rq-nl-clients { background:var(--paper); box-shadow:0 0 0 100vmax var(--paper); clip-path:inset(0 -100vmax); padding-block:var(--space); display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(28px, 4vw, 48px); }
.rq-nl-logos { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(8px, 1.6vw, 20px); }
.rq-nl-logos li { aspect-ratio:3 / 2; padding:clamp(14px, 2.6vw, 30px); min-width:0;
  background:#fff; border-radius:6px; }
.rq-nl-logos img { object-fit:contain; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.1); opacity:.8;
  transition:filter .3s ease, opacity .3s ease; }
.rq-nl-logos li:hover img { filter:none; opacity:1; }
@media (min-width:700px) { .rq-nl-logos { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (min-width:1100px) { .rq-nl-logos { grid-template-columns:repeat(6, minmax(0, 1fr)); } }

/* Reveal on scroll (only once JS is running; content stays visible without it). */
.rq-nl-js .rq-nl [data-reveal] { opacity:0; transform:translateY(28px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d, 0) * 90ms); }
.rq-nl-js .rq-nl [data-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .rq-nl-js .rq-nl [data-reveal] { opacity:1; transform:none; transition:none; }
  .rq-nl *, .rq-nl img { transition:none !important; }
}

/* Work index */
.rq-work { padding-block:clamp(16px, 3vw, 48px) 0; }
.rq-tiles { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 3vw, 40px) clamp(12px, 2vw, 28px); }
.rq-tile a { display:block; text-decoration:none; }
.rq-tile figure { aspect-ratio:1; overflow:hidden; background:var(--paper); }
.rq-tile img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.rq-tile a:hover img { transform:scale(1.04); }
.rq-tile h2 { font-size:16px; line-height:1.3; letter-spacing:0; text-align:center; margin-top:12px; }
@media (min-width:900px) { .rq-tiles { grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* About */
.rq-about-title { font-size:clamp(31px, 4.1vw, 59px); line-height:1; text-align:center; padding-block:clamp(16px, 3vw, 40px) clamp(28px, 4vw, 56px); }
.rq-ledes { display:grid; gap:1.1em; font-size:clamp(21px, 1.8vw, 25.6px); line-height:1.27; }
.rq-ledes p, .rq-team-intro h2 { font-size:inherit; }
.rq-team-intro { display:grid; gap:clamp(24px, 4vw, 48px); align-items:center; padding-block:clamp(40px, 6vw, 72px); }
.rq-team-intro .rq-copy { display:grid; gap:1em; text-align:center; font-size:clamp(21px, 1.8vw, 25.6px); }
@media (min-width:768px) { .rq-team-intro { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
.rq-team-title { font-size:clamp(21px, 1.8vw, 25.6px); text-align:center; margin-bottom:clamp(24px, 4vw, 40px); }
.rq-team { list-style:none; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(32px, 4vw, 56px) clamp(16px, 3vw, 48px); }
.rq-person { flex:0 1 calc(50% - 16px); max-width:420px; text-align:center; }
.rq-person a { text-decoration:none; }
.rq-person figure { aspect-ratio:419 / 528; margin-bottom:14px; }
.rq-person img { width:100%; height:100%; object-fit:cover; }
.rq-person p { font-size:clamp(13px, 1.1vw, 16px); line-height:1.5; }
@media (min-width:900px) { .rq-person { flex-basis:calc(33.333% - 32px); } }
.rq-shape-tv img { clip-path:url(#rq-clip-tv); }
.rq-shape-circle img { clip-path:ellipse(50% 50% at 50% 50%); }
.rq-shape-keystone img { clip-path:polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
.rq-shape-parallelogram img { clip-path:polygon(21.4% 0, 100% 0, 80.6% 100%, 0 100%); }
.rq-shape-oval img { clip-path:url(#rq-clip-oval); }
.rq-about-cta { text-align:center; padding-top:clamp(40px, 6vw, 72px); }

/* Contact */
.rq-contact { display:grid; gap:clamp(32px, 5vw, 72px); padding-block:clamp(24px, 6vw, 80px) 0; }
.rq-contact h1 { font-size:clamp(25px, 2.2vw, 32px); margin-bottom:1em; }
.rq-contact-copy { display:grid; gap:.6em; font-size:clamp(18.8px, 1.45vw, 20.8px); line-height:1.5; }
@media (min-width:768px) { .rq-contact { grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); } }
.rq-form { display:grid; gap:20px; align-content:start; }
.rq-field { display:grid; gap:8px; }
.rq-field input, .rq-field textarea { width:100%; font:inherit; color:#000; padding:14px; border:1px solid #000; border-radius:6.4px; background:transparent; }
.rq-field textarea { resize:vertical; min-height:9em; }
.rq-honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.rq-form-note { font-size:13px; }
.rq-form .rq-button { justify-self:start; min-height:44px; }

/* Project page */
.rq-project-hero { position:relative; display:grid; place-items:center; min-height:clamp(300px, 52vw, 820px); overflow:hidden; background:#ddd; }
.rq-project-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rq-project-hero h1 { position:relative; z-index:1; color:#fff; text-align:center; padding-inline:var(--gutter); display:grid; justify-items:center; text-shadow:0 1px 24px rgba(0,0,0,.12); }
.rq-project-hero h1 .l1 { font-size:clamp(64px, 9.6vw, 138px); line-height:1; }
.rq-project-hero h1 .l2 { font-size:clamp(40px, 5.6vw, 82px); line-height:1; }
.rq-intro { font-size:clamp(18.8px, 1.45vw, 20.8px); line-height:1.5; text-align:center; max-width:840px; margin-inline:auto; padding-block:clamp(32px, 5vw, 56px); }
.rq-strip { list-style:none; padding-block:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.rq-strip li { aspect-ratio:650 / 1080; overflow:hidden; background:var(--paper); }
.rq-strip img, .rq-strip video { width:100%; height:100%; object-fit:cover; }
.rq-strip .rq-strip-cta { aspect-ratio:auto; background:none; display:grid; place-items:center; }
@media (min-width:900px) { .rq-strip { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:clamp(12px, 2vw, 28px); } .rq-strip .rq-strip-cta { display:none; } }
.rq-pair { display:grid; gap:clamp(24px, 4vw, 56px); align-items:center; padding-block:clamp(40px, 6vw, 88px) 0; }
.rq-pair .rq-copy { display:grid; gap:1em; font-size:clamp(16px, 1.2vw, 17.5px); line-height:1.55; }
.rq-pair .rq-copy .rq-button { justify-self:start; }
@media (min-width:768px) {
  .rq-pair { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .rq-pair.rq-flip > :first-child { order:2; }
}
@media (max-width:899px) { .rq-desktop-only { display:none !important; } }
.rq-film { padding-block:clamp(48px, 7vw, 96px) 0; }
.rq-facts { border-top:1px solid #000; margin-top:clamp(40px, 6vw, 64px); padding-top:24px; display:grid; gap:14px; font-size:14.5px; }
.rq-facts ul { padding-left:1.4em; display:grid; gap:4px; }
.rq-pager { display:flex; justify-content:space-between; gap:24px; padding-block:clamp(28px, 7vw, 88px) 0; }
.rq-pager a { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:clamp(17px, 1.8vw, 25.6px); line-height:1.1; max-width:45%; }
.rq-pager a[rel="next"] { text-align:right; margin-left:auto; }
.rq-pager svg { flex:none; }

/* ---------- Content pages: sections, rows and blocks ---------- */
.rq-sec { padding-block:clamp(18px, 4vw, 64px); }
.rq-sec + .rq-sec { padding-top:0; }
.rq-tinted + .rq-sec, .rq-sec + .rq-tinted { padding-top:clamp(18px, 4vw, 64px); }
.rq-tinted { background:var(--bg, #fff); color:var(--fg, #000); }
.rq-tinted a { color:inherit; }
.rq-row { display:grid; grid-template-columns:repeat(24, minmax(0, 1fr)); column-gap:clamp(12px, 1.6vw, 24px); margin-top:clamp(16px, calc(var(--g) / 1440 * 100vw), calc(var(--g) * 1px)); }
.rq-row:first-child { margin-top:0; }
.rq-cell { grid-column:var(--c) / span var(--s); min-width:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(16px, 2vw, 28px); }
.rq-bleed { grid-column:1 / -1; margin-inline:calc(50% - 50vw); }
.rq-media img, .rq-media video { width:100%; }
.rq-media figcaption { font-size:14px; color:var(--muted); margin-top:8px; }
.rq-text { display:grid; gap:.9em; line-height:1.5; }
.rq-text { overflow-wrap:break-word; }
.rq-over { overflow-wrap:normal; }
.rq-text h1, .rq-text h2, .rq-text h3, .rq-text h4 { line-height:1.15; }
.rq-text ul, .rq-text ol { padding-left:1.4em; display:grid; gap:.3em; }
.rq-text a { text-decoration-color:rgba(0,0,0,.35); text-underline-offset:3px; }
.rq-text .rq-blank { min-height:.6em; }
.rq-hr { border:0; border-top:1px solid currentColor; margin:8px 0; width:100%; }
.rq-btn-row { margin:0; }
.rq-layer { position:relative; }
.rq-layer > img, .rq-layer > .rq-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Text over a picture flows from its original offset; the picture box grows if the text needs room. */
.rq-layer { display:grid; grid-template-columns:minmax(0, 1fr); align-content:start; gap:8px; padding:var(--pt, 8%) 5% 5% var(--pl, 5%); }
.rq-over { position:relative; z-index:1; margin-left:var(--x, 0); width:auto !important; max-width:100%; }
/* A light tint keeps white text over photos readable. */
.rq-layer::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); pointer-events:none; }
.rq-layer > .rq-over { z-index:2; }
.rq-banner { position:relative; display:grid; align-items:center; min-height:clamp(280px, var(--h), 92vh); overflow:hidden; padding-block:clamp(28px, 4vw, 64px); }
.rq-banner > img, .rq-banner > .rq-media { position:absolute; inset:0; width:100%; height:100%; }
.rq-banner > img, .rq-banner > .rq-media img, .rq-banner > .rq-media video { width:100%; height:100%; object-fit:cover; }
.rq-banner > .rq-wrap { position:relative; z-index:1; }
.rq-photo img, .rq-photo video { width:100%; }
@media (max-width:767px) {
  .rq-row { display:block; }
  .rq-row > .rq-cell + .rq-cell { margin-top:20px; }
  .rq-row.rq-media-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .rq-row.rq-media-row > .rq-cell + .rq-cell { margin-top:0; }
  .rq-row { margin-top:clamp(16px, calc(var(--g) * .45px), 48px); }
  .rq-row:first-child { margin-top:0; }
  /* Phones: text placed over a picture flows centred inside it; the picture grows if needed. */
  .rq-layer { align-content:center; gap:10px; padding:6% 5%; }
  .rq-over { margin-left:0; width:auto !important; }
  .rq-layer::after { background:rgba(0,0,0,.32); }
}

/* Galleries */
.rq-gallery { list-style:none; padding:0; margin:0; }
.rq-gallery a { display:block; }
.rq-gallery img { width:100%; }
.rq-gallery-grid { display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); gap:var(--gap, 20px); }
.rq-gallery-grid.rq-fixed-ratio img { aspect-ratio:var(--ratio); object-fit:cover; }
.rq-gallery-masonry { columns:var(--cols, 2); column-gap:var(--gap, 20px); }
.rq-gallery-masonry li { break-inside:avoid; margin-bottom:var(--gap, 20px); }
.rq-gallery-strips { display:flex; flex-wrap:wrap; gap:var(--gap, 20px); }
.rq-gallery-strips li { flex:var(--r) 1 calc(var(--r) * 180px); }
.rq-gallery-strips img { aspect-ratio:var(--r); object-fit:cover; }
@media (max-width:767px) {
  .rq-gallery-grid { grid-template-columns:repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); gap:10px; }
  .rq-gallery-masonry { columns:min(var(--cols, 2), 2); column-gap:10px; }
  .rq-gallery-masonry li { margin-bottom:10px; }
  .rq-gallery-strips { gap:10px; }
  .rq-gallery-strips li { flex-basis:calc(var(--r) * 110px); }
}
.rq-slideshow { outline:none; }
.rq-slides { position:relative; }
.rq-slide { width:100%; }
/* Slide height follows the photo; very tall photos are capped and centred. */
.rq-slide img { width:auto; max-width:100%; height:auto; max-height:min(70vh, 850px); margin-inline:auto; }
.rq-slide-controls { display:flex; align-items:center; justify-content:center; gap:1rem; padding:1rem; }
.rq-slide-controls button { min-width:44px; min-height:44px; border:1px solid currentColor; border-radius:2rem; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.rq-thumbnails { display:flex; gap:8px; overflow-x:auto; padding:6px; }
.rq-thumbnails button { flex:0 0 88px; padding:3px; border:2px solid transparent; background:transparent; cursor:pointer; }
.rq-thumbnails button[aria-pressed="true"] { border-color:currentColor; }
.rq-thumbnails img { width:80px; height:60px; object-fit:cover; }
.rq-lightbox { background:#101010; color:#fff; border:0; padding:48px 16px 16px; max-width:96vw; max-height:94vh; width:fit-content; }
.rq-lightbox::backdrop { background:rgba(0,0,0,.85); }
.rq-lightbox img { max-width:90vw; max-height:76vh; object-fit:contain; margin:auto; }
.rq-lightbox button { color:#fff; background:#222; border:1px solid #aaa; padding:10px 16px; cursor:pointer; font:inherit; min-height:44px; }
.rq-lightbox-close { position:absolute; top:4px; right:4px; }
.rq-lightbox-controls { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:12px; }

/* Pictures side by side: equal heights, natural shapes (widths proportional to aspect ratio). */
.rq-even { display:flex; gap:clamp(10px, 1.6vw, 24px); align-items:flex-start; }
.rq-ev { flex:var(--r) 1 0; min-width:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; overflow-wrap:break-word; }
.rq-ev img, .rq-ev video { width:100%; height:auto; aspect-ratio:var(--r) !important; object-fit:cover !important; }
.rq-ev .rq-embed { aspect-ratio:var(--r) !important; }
@media (max-width:767px) {
  .rq-row .rq-even { display:flex; }
  .rq-even-many { flex-wrap:wrap; }
  .rq-even-many .rq-ev { flex:var(--r) 1 calc(var(--r) * 110px); }
}

/* Two-line page titles live in one h1; each line keeps its own size. */
.rq-h1-line { display:block; }

/* Work grid: live "Labs" tile with a small flock (see site.js). */
.rq-tile-labs figure { position:relative; background:#e5f0a3; }
.rq-tile-labs canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.rq-tile-labs-word { position:absolute; left:8%; bottom:7%; font-size:clamp(28px, 4vw, 56px); letter-spacing:-.02em; color:#111; pointer-events:none; }
.rq-tile-labs a:hover .rq-tile-labs-word { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
