:root {
  --black:#050505;
  --black-soft:#0c0c0c;
  --white:#f3f3ef;
  --gray:#a1a19b;
  --line:rgba(255,255,255,.18);
  --gutter:clamp(22px,4.5vw,80px);
  font-family:Arial,Helvetica,sans-serif;
  color:var(--white);
  background:var(--black);
  font-synthesis:none;
  color-scheme:dark;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}
body {
  margin:0;
}
a {
  color:inherit;
  text-decoration:none;
}
button,input,textarea {
  font:inherit;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:default;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px;
}
::selection {
  background:var(--white);
  color:var(--black);
}
h1,h2,h3,p {
  margin:0;
}
img,video {
  max-width:100%;
  display:block;
}
button {
  color:inherit;
}
button:focus:not(:focus-visible) {
  outline:none;
}
.page-width {
  width:calc(100% - var(--gutter)*2);
  max-width:1600px;
  margin-inline:auto;
}
.meta {
  font-size:.75rem;
  line-height:1.5;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:400;
}
.muted {
  color:var(--gray);
}
.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:100;
  background:var(--white);
  color:var(--black);
  padding:15px;
}
.skip-link:focus {
  top:15px;
}
.site-header {
  height:88px;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:fixed;
  inset:0 0 auto;
  z-index:20;
  background:rgba(5,5,5,.96);
  border-bottom:1px solid var(--line);
}
.brand {
  font-size:23px;
  font-weight:800;
  letter-spacing:-.07em;
}
.nav-logo img {
  width:44px;
  height:44px;
  object-fit:contain;
}
.site-header nav {
  display:flex;
  gap:clamp(20px,3vw,48px);
}
.site-header nav a {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  position:relative;
  padding:12px 0;
}
.site-header nav a:after,.text-link:after {
  content:"";
  position:absolute;
  height:1px;
  bottom:4px;
  left:0;
  width:100%;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s;
}
.site-header nav a:hover:after,.site-header nav a[aria-current]:after,.text-link:hover:after {
  transform:scaleX(1);
}
.hero {
  min-height:800px;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding-top:121px;
  padding-bottom:32px;
}
.hero-top {
  display:flex;
  justify-content:space-between;
  color:var(--gray);
}
.local-time {
  margin-left:18px;
  color:var(--white);
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-top:1px solid var(--line);
  padding-top:25px;
}
.hero-bottom h1 {
  font-size:1rem;
  font-weight:400;
  margin-bottom:9px;
}
.hero-bottom p {
  font-size:.875rem;
  line-height:1.7;
  color:var(--gray);
}
.scroll-link {
  display:flex;
  gap:50px;
  align-items:center;
  padding:12px 0;
}
.scroll-link span {
  font-size:24px;
}
.section {
  padding-top:120px;
  padding-bottom:30px;
}
.section-label {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:18px;
  color:var(--gray);
}
.section-label h2 {
  font-size:inherit;
  font-weight:400;
}
.feature-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding:40px 0 28px;
}
.feature-heading h2,.section-heading h2,.about-grid h2 {
  font-size:clamp(54px,7.8vw,120px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.065em;
}
.feature-heading>.meta {
  margin-bottom:6px;
}
.feature-media {
  display:block;
  position:relative;
  aspect-ratio:16/9;
  background:#111;
  overflow:hidden;
}
.slate-top,.slate-bottom {
  position:absolute;
  inset:25px 30px auto;
  display:flex;
  justify-content:space-between;
  color:var(--gray);
  z-index:1;
}
.slate-bottom {
  inset:auto 30px 25px;
}
.slate-center {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:20px;
}
.slate-index {
  font-size:.75rem;
  border:1px solid #555;
  border-radius:50%;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
}
.slate-title {
  font-size:clamp(40px,8.5vw,150px);
  font-weight:400;
  letter-spacing:-.06em;
  color:#b8b8b2;
}
.slate-center>.meta {
  color:var(--gray);
}
.round-link {
  position:absolute;
  right:28px;
  bottom:70px;
  width:58px;
  height:58px;
  border:1px solid #777;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:28px;
  transition:background .25s,color .25s;
  z-index:2;
}
.feature-media:hover .round-link {
  background:var(--white);
  color:var(--black);
}
.feature-media>video,.feature-media>img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  transition:filter .6s;
}
.feature-media:hover>video,.feature-media:focus-visible>video,.feature-media:hover>img,.feature-media:focus-visible>img {
  filter:grayscale(0);
}
.project-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:24px 0;
}
.project-meta p {
  font-size:.875rem;
  margin-top:6px;
}
.text-link {
  font-size:.875rem;
  position:relative;
  padding:12px 0;
  display:inline-flex;
  gap:24px;
  align-items:center;
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin:45px 0;
}
.section-heading p {
  font-size:.875rem;
  color:var(--gray);
  padding-bottom:5px;
}
.motion-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px 30px;
}
.project-card {
  min-width:0;
}
.card-media {
  position:relative;
  aspect-ratio:4/3;
  background:#111;
  display:block;
  overflow:hidden;
}
.card-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  transition:filter .6s,transform .6s;
}
.project-card:hover img,.project-card:focus-within img {
  filter:grayscale(0);
  transform:scale(1.015);
}
.card-placeholder {
  height:100%;
  position:absolute;
  inset:0;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.card-placeholder .placeholder-number {
  font-size:clamp(80px,12vw,200px);
  line-height:1;
  letter-spacing:-.08em;
  color:#31312f;
  font-weight:400;
  align-self:center;
}
.card-placeholder>.meta:last-child {
  align-self:flex-end;
  color:var(--gray);
}
.card-caption {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  margin-top:17px;
}
.card-caption h3 {
  font-size:1.125rem;
  font-weight:400;
  letter-spacing:-.02em;
}
.card-caption .meta {
  font-size:.75rem;
  color:var(--gray);
}
.card-caption p {
  color:var(--gray);
  font-size:.75rem;
  margin-top:7px;
  line-height:1.5;
}
.stills-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:7vw;
}
.stills-grid .project-card:nth-child(2) {
  padding-top:160px;
}
.stills-grid .project-card:first-child .card-media {
  aspect-ratio:3/4;
}
.stills-grid .project-card:nth-child(2) .card-media {
  aspect-ratio:1/1;
}
.about-section {
  padding-top:160px;
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  margin-top:65px;
}
.about-grid h2 {
  font-size:clamp(55px,6vw,96px);
}
.about-copy>p {
  font-size:1.125rem;
  line-height:1.7;
  color:var(--gray);
  margin-bottom:24px;
  max-width:600px;
}
.about-copy .large-copy {
  font-size:clamp(28px,3vw,44px);
  line-height:1.2;
  letter-spacing:-.035em;
  color:var(--white);
  margin-bottom:35px;
}
.about-location {
  display:block;
  margin-top:40px;
}
.services-list {
  list-style:none;
  padding:0;
  margin:42px 0 0;
}
.services-list li {
  display:grid;
  grid-template-columns:50px 1fr auto;
  align-items:center;
  gap:25px;
  border-bottom:1px solid var(--line);
  padding:30px 0;
}
.services-list li>.meta {
  color:var(--gray);
}
.services-list h3 {
  font-size:clamp(25px,3.5vw,52px);
  font-weight:400;
  letter-spacing:-.04em;
}
.service-note {
  font-size:.875rem;
  color:var(--gray);
}
.secondary-services {
  font-size:.875rem;
  color:var(--gray);
  margin-top:24px;
}
.contact-section {
  margin-top:135px;
  background:var(--white);
  color:var(--black);
  padding:35px 0 0;
  color-scheme:light;
}
.contact-section .section-label {
  border-color:rgba(0,0,0,.25);
  color:#52524e;
}
.contact-section h2 {
  font-size:clamp(100px,19.7vw,320px);
  line-height:.84;
  letter-spacing:-.075em;
  font-weight:500;
  margin:65px 0;
  position:relative;
}
.contact-arrow {
  position:absolute;
  font-size:.6em;
  right:0;
  bottom:0;
  font-weight:400;
}
.contact-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding-bottom:70px;
}
.contact-button {
  display:flex;
  gap:65px;
  align-items:center;
  border:0;
  border-bottom:1px solid var(--black);
  background:transparent;
  padding:14px 0;
  font-size:1.1rem;
}
.contact-button span {
  font-size:25px;
}
.contact-pending {
  font-size:.875rem;
  color:#5c5c56;
}
[data-contact-links] {
  display:flex;
  gap:26px;
  font-size:.875rem;
}
[data-contact-links] a {
  text-decoration:underline;
  text-underline-offset:5px;
}
footer {
  border-top:1px solid #c4c4bc;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:30px 0;
}
footer .meta {
  font-size:.6875rem;
}
.footer-brand {
  font-size:32px;
}
.footer-brand img {
  height:48px;
  width:48px;
  object-fit:contain;
}
dialog {
  background:var(--white);
  color:var(--black);
  color-scheme:light;
  border:0;
  padding:45px;
  width:min(580px,calc(100% - 32px));
  max-height:90svh;
}
dialog::backdrop {
  background:rgba(0,0,0,.8);
}
.dialog-close {
  position:absolute;
  right:16px;
  top:10px;
  border:0;
  background:none;
  font-size:32px;
  width:44px;
  height:44px;
}
dialog h2 {
  font-size:38px;
  letter-spacing:-.05em;
  font-weight:400;
  margin:20px 0;
}
dialog>p:not(.meta) {
  font-size:.875rem;
  line-height:1.6;
  color:#555;
}
form {
  display:grid;
  gap:20px;
  margin-top:24px;
}
form label {
  font-size:.875rem;
  display:grid;
  gap:8px;
}
input,textarea {
  width:100%;
  border:1px solid #96968f;
  background:transparent;
  border-radius:0;
  padding:12px;
  color:var(--black);
  resize:vertical;
}
.solid-button {
  padding:15px;
  border:1px solid var(--black);
  background:var(--black);
  color:var(--white);
  font-size:.875rem;
}
.form-note {
  font-size:.75rem;
  color:#555;
  line-height:1.5;
}
.project-page {
  padding-top:145px;
}
.project-page .feature-heading {
  padding-top:55px;
}
.project-page .feature-heading h1 {
  font-size:clamp(65px,12vw,180px);
  font-weight:400;
  letter-spacing:-.07em;
}
.project-video {
  aspect-ratio:16/9;
  background:#111;
  position:relative;
}
.project-video video {
  width:100%;
  height:100%;
}
.project-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  margin:60px 0 100px;
}
.project-details h2 {
  font-size:clamp(30px,4vw,60px);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1.1;
}
.project-details p {
  color:var(--gray);
  line-height:1.7;
  font-size:1rem;
}
.credits {
  margin:35px 0 0;
}
.credits div {
  display:grid;
  grid-template-columns:130px 1fr;
  padding:16px 0;
  border-top:1px solid var(--line);
  font-size:.875rem;
}
.credits dt {
  color:var(--gray);
}
.credits dd {
  margin:0;
}
.frames-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin-top:35px;
}
.frame-slot {
  aspect-ratio:16/9;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gray);
}
.frame-slot img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.detail-note {
  font-size:.875rem;
  color:var(--gray);
  margin:24px 0 0;
  line-height:1.6;
}
.project-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin:80px 0 60px;
  padding-top:24px;
}
.project-bottom a {
  font-size:1rem;
}
.project-contact {
  font-size:clamp(60px,12vw,160px);
  letter-spacing:-.06em;
  padding:70px 0;
}
.project-contact a {
  display:block;
}
.is-hidden {
  display:none!important;
}
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(12px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
@media(hover:none) {
  .feature-media>video,.feature-media>img,.card-media img {
    filter:none;
  }
}
@media(min-width:1600px) {
  .hero {
    max-height:1200px;
  }
}
@media(max-width:800px) {
  .hero-top {
    font-size:.6875rem;
  }
  .hero-top>span:first-child {
    display:none;
  }
  .hero-top {
    justify-content:flex-end;
  }
  .section {
    padding-top:85px;
  }
  .feature-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }
  .feature-heading h2 {
    font-size:72px;
  }
  .project-meta>.meta {
    display:none;
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }
  .section-heading h2 {
    font-size:65px;
  }
  .motion-grid {
    gap:40px 20px;
  }
  .stills-grid {
    gap:25px;
  }
  .stills-grid .project-card:nth-child(2) {
    padding-top:100px;
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:35px;
  }
  .about-copy>p {
    max-width:100%;
  }
  .services-list li {
    grid-template-columns:28px 1fr;
    gap:15px;
  }
  .service-note {
    display:none;
  }
  .services-list h3 {
    font-size:32px;
  }
  footer {
    flex-wrap:wrap;
  }
  footer .meta {
    width:calc(50% - 25px);
  }
  .project-details {
    grid-template-columns:1fr;
    gap:30px;
  }
}
@media(max-width:520px) {
  .site-header {
    height:72px;
  }
  .brand {
    font-size:21px;
  }
  .site-header nav {
    gap:18px;
  }
  .site-header nav a {
    font-size:.6875rem;
    letter-spacing:.02em;
  }
  .hero {
    padding-top:98px;
    min-height:740px;
    min-height:100svh;
  }
  .hero-bottom {
    align-items:flex-start;
    gap:20px;
  }
  .hero-bottom h1 {
    font-size:.875rem;
  }
  .hero-bottom p {
    font-size:.75rem;
  }
  .scroll-link {
    max-width:70px;
    font-size:.625rem;
    gap:10px;
    line-height:1.6;
  }
  .scroll-link span {
    font-size:20px;
  }
  .section-label {
    font-size:.625rem;
    gap:20px;
  }
  .section-label>span:last-child {
    text-align:right;
  }
  .feature-heading h2 {
    font-size:62px;
  }
  .feature-heading>.meta {
    font-size:.6875rem;
  }
  .slate-top,.slate-bottom {
    left:16px;
    right:16px;
    font-size:.625rem;
    top:14px;
  }
  .slate-bottom {
    top:auto;
    bottom:14px;
  }
  .slate-center {
    gap:10px;
  }
  .slate-title {
    font-size:42px;
  }
  .slate-index {
    display:none;
  }
  .slate-center>.meta {
    font-size:.625rem;
  }
  .round-link {
    width:36px;
    height:36px;
    right:15px;
    bottom:46px;
    font-size:20px;
  }
  .project-meta {
    gap:15px;
  }
  .project-meta .text-link {
    font-size:.75rem;
    gap:14px;
  }
  .project-meta p {
    font-size:.75rem;
  }
  .motion-grid {
    grid-template-columns:1fr;
  }
  .card-placeholder .placeholder-number {
    font-size:120px;
  }
  .stills-grid {
    grid-template-columns:1fr;
    gap:40px;
  }
  .stills-grid .project-card:nth-child(2) {
    padding-top:0;
    margin-left:40px;
  }
  .section-heading h2 {
    font-size:56px;
  }
  .card-caption .meta {
    font-size:.625rem;
  }
  .services-list h3 {
    font-size:26px;
  }
  .contact-section {
    margin-top:90px;
  }
  .contact-section h2 {
    font-size:25vw;
    margin:55px 0;
  }
  .contact-arrow {
    font-size:.5em;
  }
  .contact-row {
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
    padding-bottom:50px;
  }
  .contact-button {
    width:100%;
    justify-content:space-between;
  }
  footer {
    gap:25px 15px;
  }
  footer .brand {
    width:100%;
  }
  footer .meta {
    width:100%;
    font-size:.6875rem;
  }
  .contact-section .section-label>span:last-child {
    max-width:150px;
  }
  .project-page {
    padding-top:115px;
  }
  .project-page .feature-heading h1 {
    font-size:80px;
  }
  .project-details {
    margin:40px 0 60px;
  }
  .frames-grid {
    grid-template-columns:1fr;
  }
  .project-bottom {
    gap:20px;
  }
  .project-bottom a {
    font-size:.875rem;
  }
  dialog {
    padding:30px 24px;
  }
  dialog h2 {
    font-size:34px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}
[hidden] {
  display:none!important;
}
.motion-grid .project-card:last-child {
  grid-column:1/-1;
}
.motion-grid .project-card:last-child .card-media {
  aspect-ratio:21/9;
}
@media(max-width:520px) {
  .motion-grid .project-card:last-child .card-media {
    aspect-ratio:4/3;
  }
}
@media(max-width:380px) {
  .site-header {
    padding-inline:18px;
    gap:18px;
  }
  .site-header nav {
    gap:12px;
  }
  .site-header nav a {
    font-size:.625rem;
  }
  .brand {
    font-size:19px;
  }
}

/* Brand lockup: original symbol with its name, in both header and footer. */
.brand { display:inline-flex; align-items:center; gap:13px; flex-shrink:0; }
.brand-word { line-height:1; }
.footer-brand { gap:16px; }
.hero { overflow:hidden; }
.hero-introduction { position:relative; flex:1; min-height:520px; display:grid; place-items:center; isolation:isolate; margin:26px 0; }
.hero-collage { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.collage-frame { position:absolute; overflow:hidden; background:#111; border:1px solid #20201e; display:flex; align-items:flex-end; padding:15px; }
.collage-frame>span { font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:#777771; }
.collage-frame:nth-child(1) { width:33%; height:42%; left:0; top:4%; transform:rotate(-6deg); }
.collage-frame:nth-child(2) { width:23%; height:58%; left:38%; top:-1%; transform:rotate(5deg); }
.collage-frame:nth-child(3) { width:29%; height:46%; right:-1%; top:8%; transform:rotate(-4deg); }
.collage-frame:nth-child(4) { width:25%; height:43%; left:7%; bottom:3%; transform:rotate(4deg); }
.collage-frame:nth-child(5) { width:34%; height:37%; left:35%; bottom:0; transform:rotate(-5deg); }
.collage-frame:nth-child(6) { width:24%; height:48%; right:0; bottom:-2%; transform:rotate(6deg); }
.collage-frame.has-image { border:0; background:none; padding:0; }
.collage-frame img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) blur(3px) brightness(.45); transform:scale(1.045); }
.hero-intro-copy { padding:60px 20px; text-align:center; z-index:1; }
.hero-intro-copy>.meta { font-size:.6875rem; margin-bottom:22px; }
.hero-intro-copy h1 { font-size:clamp(86px,11vw,168px); font-weight:400; letter-spacing:-.065em; line-height:.85; text-shadow:0 2px 35px #050505; }
.hero-nickname { font-size:1rem; margin-top:25px; color:#d2d2cc; }
.collage-pending { position:absolute; bottom:11px; left:0; font-size:.625rem; color:var(--gray); z-index:1; }
.hero-top,.hero-bottom { position:relative; z-index:1; }
@media(max-width:800px) {
  .hero-introduction { min-height:490px; }
  .hero-intro-copy h1 { font-size:100px; }
  .hero-intro-copy>.meta { font-size:.625rem; }
}
@media(max-width:600px) {
  html { scroll-padding-top:115px; }
  .site-header { height:102px; flex-wrap:wrap; padding:10px var(--gutter) 6px; gap:3px; }
  .site-header .brand { gap:10px; font-size:23px; }
  .nav-logo img { width:32px; height:32px; }
  .site-header nav { width:100%; justify-content:space-between; gap:12px; }
  .site-header nav a { font-size:.6875rem; padding:9px 0; }
  .hero { padding-top:124px; }
  .hero-introduction { min-height:440px; margin:20px 0 30px; }
  .hero-intro-copy { padding:40px 0; }
  .hero-intro-copy h1 { font-size:clamp(76px,21vw,110px); }
  .hero-intro-copy>.meta { font-size:.5625rem; letter-spacing:.06em; }
  .hero-nickname { font-size:.875rem; }
  .collage-frame>span { font-size:.5rem; }
  .collage-frame { padding:10px; }
  .collage-frame:nth-child(1) { width:46%; height:33%; left:-5%; top:3%; }
  .collage-frame:nth-child(2) { width:37%; height:40%; left:35%; top:12%; }
  .collage-frame:nth-child(3) { width:37%; height:30%; right:-10%; top:3%; }
  .collage-frame:nth-child(4) { width:40%; height:35%; left:-3%; bottom:4%; }
  .collage-frame:nth-child(5) { width:45%; height:29%; left:23%; bottom:2%; }
  .collage-frame:nth-child(6) { width:37%; height:36%; right:-5%; bottom:7%; }
  .collage-pending { font-size:.5rem; bottom:-15px; }
  .project-page { padding-top:130px; }
}
.collage-frame>span { display:none; }
.hero-intro-copy>.meta { font-size:.75rem; }
.collage-pending { font-size:.6875rem; }
@media(max-width:600px) {
  .hero-intro-copy>.meta { font-size:.625rem; }
  .collage-pending { font-size:.625rem; }
}
/* The still is visible until the silent motion preview begins. */
.feature-media>.preview-video { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease,filter .6s ease; }
.feature-media.is-previewing>.preview-video { opacity:1; }
/* Campaign art keeps its full frame, including typography at the edges. */
.stills-grid .project-card .card-media.card-media--contain { aspect-ratio:auto; }
.card-media--contain img { display:block; height:auto; object-fit:contain; }
.project-card:hover .card-media--contain img,.project-card:focus-within .card-media--contain img { transform:none; }
.campaign-page .feature-heading { align-items:flex-end; }
.campaign-page .feature-heading h1 { font-size:clamp(60px,10vw,150px); line-height:.98; }
.campaign-title-line { display:block; color:var(--gray); }
.campaign-intro { display:grid; grid-template-columns:1fr 1fr; gap:8vw; margin:70px 0 100px; }
.campaign-intro h2 { font-size:clamp(32px,4.5vw,66px); font-weight:400; letter-spacing:-.045em; line-height:1.1; margin-top:20px; }
.campaign-intro p:not(.meta) { color:var(--gray); font-size:1rem; line-height:1.7; max-width:480px; }
.campaign-credits { margin-top:30px; }
.campaign-credits div { display:grid; grid-template-columns:110px 1fr; gap:20px; padding:12px 0; border-top:1px solid var(--line); font-size:.8125rem; }
.campaign-credits dt { color:var(--gray); }
.campaign-credits dd { margin:0; }
.campaign-gallery-heading { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:24px 0; }
.campaign-gallery-heading h2 { font-weight:400; }
.campaign-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:50px 30px; align-items:start; }
.campaign-photo { margin:0; min-width:0; }
.campaign-photo-link { display:block; background:var(--black-soft); cursor:zoom-in; scroll-margin-top:120px; }
.campaign-photo img { width:100%; height:auto; display:block; }
.campaign-photo figcaption { display:flex; justify-content:space-between; gap:12px; padding-top:15px; font-size:.625rem; color:var(--gray); }
.photo-viewer { width:min(1200px,calc(100% - 32px)); max-width:none; max-height:96svh; padding:16px 20px; background:var(--black); color:var(--white); border:1px solid var(--line); }
.photo-viewer::backdrop { background:rgba(0,0,0,.96); }
.photo-viewer-toolbar,.photo-viewer-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.photo-viewer-toolbar p { font-size:.6875rem; }
.photo-viewer button { background:none; color:var(--white); border:0; min-height:44px; padding:8px 12px; font:inherit; font-size:.8125rem; cursor:pointer; }
.photo-viewer img { display:block; width:100%; height:calc(96svh - 130px); object-fit:contain; }
@media(max-width:700px) {
  .campaign-page .feature-heading { align-items:flex-start; flex-direction:column; }
  .campaign-intro { grid-template-columns:1fr; gap:36px; margin:40px 0 60px; }
  .campaign-gallery { gap:32px 18px; }
  .campaign-photo figcaption { font-size:.5rem; }
  .campaign-photo figcaption>span:last-child { display:none; }
}
@media(max-width:520px) {
  .campaign-gallery { grid-template-columns:1fr; gap:36px; }
  .campaign-photo figcaption { font-size:.625rem; }
  .campaign-photo figcaption>span:last-child { display:block; }
  .photo-viewer { padding:8px; width:calc(100% - 16px); }
  .photo-viewer-toolbar p { font-size:.5625rem; }
}
.film-hint { position:absolute; left:24px; bottom:24px; z-index:3; background:rgba(5,5,5,.8); color:var(--white); padding:10px 14px; font-size:.6875rem; }
.feature-media .round-link { bottom:24px; background:rgba(5,5,5,.7); font-size:20px; }
.film-dialog { width:min(1100px,calc(100% - 32px)); max-height:94svh; padding:0; background:var(--black); color:var(--white); color-scheme:dark; overflow:auto; }
.film-dialog::backdrop { background:rgba(0,0,0,.94); }
.film-dialog-top { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; gap:24px; }
.film-dialog h2 { margin:0; font-size:.75rem; letter-spacing:.05em; line-height:1.5; }
.film-close { border:0; background:none; min-width:44px; height:44px; font-size:32px; line-height:1; }
.film-dialog video { width:100%; max-height:calc(94svh - 110px); aspect-ratio:16/9; background:#000; object-fit:contain; }
.film-dialog .film-status { padding:0 18px; color:var(--gray); font-size:.875rem; }
.film-dialog .film-status:not(:empty) { padding:14px 18px; }
@media(max-width:520px) { .film-hint { bottom:14px; left:14px; font-size:.625rem; padding:8px 10px; } .feature-media .round-link { bottom:14px; } .film-dialog-top { gap:10px; padding:8px 12px; } .film-dialog h2 { font-size:.625rem; } }

/* Event index: one editorial row per event. */
.events-section .section-heading h2 { font-size:clamp(40px,6.6vw,100px); }
.event-list { list-style:none; padding:0; margin:50px 0 0; }
.event-row { display:grid; grid-template-columns:35px minmax(120px,220px) 1fr 40px; align-items:center; gap:32px; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.event-row img { display:block; width:100%; height:auto; filter:grayscale(1); transition:filter .35s ease; }
.event-row:hover img,.event-row:focus-visible img { filter:grayscale(0); }
.event-row h3 { font-size:clamp(22px,2.6vw,40px); font-weight:400; letter-spacing:-.035em; margin:0 0 14px; }
.event-row p { color:var(--gray); line-height:1.8; }
.event-arrow { font-size:32px; }
.event-title-prefix { display:block; font-size:.22em; letter-spacing:.02em; text-transform:uppercase; margin-bottom:24px; color:var(--gray); }
.event-gallery .campaign-photo:first-child,.event-gallery .campaign-photo:last-child { grid-column:1 / -1; }
@media(hover:none) { .event-row img { filter:none; } }
@media(max-width:600px) {
  .event-row { grid-template-columns:24px 1fr 25px; gap:16px; padding:24px 0; }
  .event-row img { grid-column:2; grid-row:1; }
  .event-row-copy { grid-column:2; }
  .event-arrow { grid-column:3; grid-row:1; }
  .event-row h3 { font-size:24px; }
  .event-row p { font-size:10px; }
  .event-page .feature-heading h1 { font-size:clamp(48px,13vw,78px); }
}
.event-gallery .campaign-photo:nth-child(4) { grid-column:1 / -1; }

/* Vertical beauty films retain the complete 9:16 composition. */
.card-media--film { aspect-ratio:4/5; background:var(--black-soft); }
.card-media--film img,.card-media--film .motion-preview { object-fit:contain; width:100%; height:100%; }
.project-card:hover .card-media--film img,.project-card:focus-within .card-media--film img { transform:none; }
.motion-preview { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.card-media--film.is-previewing .motion-preview { opacity:1; }
.motion-play { position:absolute; bottom:20px; left:20px; z-index:2; padding:12px 16px; color:var(--white); background:rgba(5,5,5,.8); pointer-events:none; }
.motion-film-dialog { width:min(94vw,560px); }
.motion-film-dialog>video { display:block; width:100%; height:min(76dvh,780px); object-fit:contain; background:#050505; }
.beauty-film-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8vw; align-items:center; margin:70px 0 100px; }
.beauty-full-film { display:block; width:100%; max-width:480px; aspect-ratio:9/16; object-fit:contain; background:#0c0c0c; margin:auto; }
.beauty-film-copy h2 { font-size:clamp(40px,5vw,75px); font-weight:400; line-height:1; letter-spacing:-.045em; margin:25px 0; }
.beauty-film-copy>p:not(.meta) { color:var(--gray); line-height:1.7; }
@media(max-width:700px) { .beauty-film-layout { grid-template-columns:1fr; gap:48px; margin:40px 0 60px; } .beauty-page .feature-heading h1 { font-size:clamp(45px,12vw,80px); } .motion-play { font-size:10px; left:12px; bottom:12px; padding:10px; } }

/* Commercial commissions and personal photo sessions have separate collections. */
.stills-categories { display:flex; gap:16px 36px; flex-wrap:wrap; margin:0 0 55px; }
.stills-categories a { display:flex; align-items:center; gap:30px; padding:15px 0; border-bottom:1px solid var(--gray); font-size:.875rem; }
.stills-categories a:hover { border-color:var(--white); }
.stills-collection { scroll-margin-top:130px; }
.stills-collection + .stills-collection { margin-top:120px; }
.stills-collection-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding-top:28px; margin-bottom:40px; }
.stills-collection-heading h3 { font-size:clamp(28px,3.5vw,48px); font-weight:400; letter-spacing:-.04em; line-height:1.1; }
.stills-collection-heading p { color:var(--gray); }
.card-caption h4 { font-size:1.125rem; font-weight:400; }
@media(max-width:600px) { .stills-collection-heading { flex-direction:column; gap:15px; } .stills-collection + .stills-collection { margin-top:75px; } .stills-categories { gap:8px 28px; margin-bottom:40px; } }

/* Both SURF deliveries preserve their original framing. */
.surf-film-section { scroll-margin-top:130px; }
.surf-landscape-film { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:var(--black-soft); }
.surf-film-section .section-label h2 { font:inherit; margin:0; }

/* CORONA / WSL: three original screen recordings, complete framing. */
.corona-films { margin:80px 0; }
.corona-films .section-label h2,.surf-related .section-label h2 { font:inherit; margin:0; }
.corona-source-note { color:var(--gray); font-size:13px; margin:0 0 30px; }
.corona-film-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; align-items:start; }
.corona-film video { width:100%; height:auto; display:block; background:var(--black-soft); }
.surf-related { margin:100px 0; }
.surf-related-link { display:grid; grid-template-columns:180px minmax(0,1fr); gap:40px; align-items:center; padding:30px 0; border-bottom:1px solid var(--line); }
.surf-related-link img { width:100%; height:auto; }
.surf-related-link>span { display:grid; gap:20px; }
.surf-related-link strong { font-size:clamp(26px,4vw,48px); font-weight:400; letter-spacing:-.04em; }
@media(max-width:700px) { .corona-film-grid { grid-template-columns:1fr; gap:55px; } .corona-page .feature-heading h1 { font-size:clamp(45px,12vw,80px); } .surf-related-link { grid-template-columns:95px minmax(0,1fr); gap:24px; } }

/* Documentary editing and color work. */
.post-grid { display:grid; gap:60px 30px; }
.post-grid .card-media { aspect-ratio:16/9; }
.documentary-film { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:var(--black-soft); margin-top:60px; }
@media(max-width:700px) { .documentary-film { margin-top:35px; } }

.post-grid .card-media img { filter:none; }

/* Personal photographs keep their full frame and original color. */
.about-photos { display:grid; grid-template-columns:1.38fr 1fr; align-items:start; gap:5vw; margin-top:64px; }
.about-photo { margin:0; min-width:0; }
.about-photo:nth-child(even) { padding-top:100px; }
.about-photo img { display:block; width:100%; height:auto; }
.about-photo figcaption { margin-top:16px; color:var(--gray); }
@media(max-width:800px) { .about-photos { gap:22px; margin-top:40px; } .about-photo:nth-child(even) { padding-top:60px; } }
@media(max-width:480px) { .about-photos { grid-template-columns:1fr; gap:36px; } .about-photo:nth-child(even) { padding-top:0; } }

/* Frame collections preserve the cinematic composition and grading. */
.cinema-stills-grid { grid-template-columns:1fr; }
.cinema-stills-grid .card-media { aspect-ratio:16/9; }
.cinema-stills-grid .card-media img { filter:none; }
.cinema-frame-gallery { grid-template-columns:1fr; }

/* Real Places: complete portrait episodes and uncropped color stills. */
.post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.post-grid .card-media--contain img { width:100%; height:100%; object-fit:contain; }
.real-places-page .feature-heading h1 { font-size:clamp(48px,8.5vw,130px); }
.real-places-films { margin-bottom:100px; }
.real-places-film-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; max-width:960px; margin:auto; }
.real-places-film-grid video { display:block; width:100%; aspect-ratio:9/16; object-fit:contain; background:var(--black-soft); }
@media(max-width:700px) { .post-grid,.real-places-film-grid { grid-template-columns:1fr; } .real-places-film-grid { gap:55px; } .real-places-films { margin-bottom:65px; } }

/* Monochrome motion system: continuous opposing strips and scroll reveals. */
.home-page .hero-collage {
  inset:-20px -7vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  overflow:hidden;
  filter:grayscale(1);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.hero-collage::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(5,5,5,.28),transparent 70%); pointer-events:none; }
.hero-lane { height:50%; overflow:visible; flex:none; }
.hero-track { display:flex; width:max-content; height:100%; animation:gallery-right 60s linear infinite; will-change:transform; }
.hero-lane:nth-child(2) .hero-track { animation-duration:70s; animation-delay:-20s; animation-direction:reverse; }
.hero-group { display:flex; flex:none; gap:0; padding-right:0; min-width:100vw; height:100%; }
.hero-tile { flex:none; width:clamp(210px,25vw,520px); height:100%; overflow:hidden; background:#111; }
.hero-tile:nth-child(3n+2) { width:clamp(160px,18vw,380px); }
.hero-tile img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) blur(5px) brightness(.46); transform:scale(1.08); }
@keyframes gallery-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
/* One ordered index for all work categories. */
.discipline-nav { padding-top:64px; padding-bottom:40px; scroll-margin-top:24px; }
.discipline-heading { margin-bottom:34px; }
.discipline-heading p { color:var(--gray); margin-bottom:16px; }
.discipline-heading h2 { font-size:clamp(30px,4vw,56px); font-weight:400; letter-spacing:-.045em; line-height:1.1; }
.discipline-list { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line); }
.discipline-list a { display:grid; grid-template-columns:48px minmax(0,1.25fr) minmax(0,1fr) 28px; align-items:center; gap:20px; padding:23px 0; border-top:1px solid var(--line); }
.discipline-number,.discipline-description { color:var(--gray); }
.discipline-title { font-size:clamp(20px,2.4vw,32px); letter-spacing:-.03em; }
.discipline-arrow { font-size:26px; transition:transform .25s; }
.discipline-list a:hover .discipline-arrow,.discipline-list a:focus-visible .discipline-arrow { transform:translate(4px,-4px); }
.discipline-list a:focus-visible { outline:1px solid var(--white); outline-offset:6px; }
@media(max-width:700px) {
  .discipline-nav { padding-top:42px; padding-bottom:24px; }
  .discipline-list a { grid-template-columns:26px minmax(0,1fr) 22px; gap:8px 12px; padding:18px 0; }
  .discipline-title { font-size:22px; }
  .discipline-description { grid-column:2; font-size:9px; line-height:1.6; }
  .discipline-arrow { grid-column:3; grid-row:1 / 3; font-size:22px; }
}
.home-page .scroll-media { --reveal:1; transform:translateY(calc((1 - var(--reveal)) * 32px)) scale(calc(.96 + var(--reveal) * .04)); clip-path:inset(calc((1 - var(--reveal)) * 3%)); }
.home-page .card-media img,.home-page .card-media video,
.home-page .feature-media img,.home-page .feature-media video,
.home-page .event-row img,.home-page .about-photo img { filter:grayscale(1); }
.home-page .card-media video,.home-page .about-photo img { transition:filter .6s ease; }
.home-page .project-card:hover .card-media img,.home-page .project-card:focus-within .card-media img,
.home-page .project-card:hover .card-media video,.home-page .project-card:focus-within .card-media video,
.home-page .feature-media:hover img,.home-page .feature-media:focus-visible img,
.home-page .feature-media:hover video,.home-page .feature-media:focus-visible video,
.home-page .event-row:hover img,.home-page .event-row:focus-visible img,
.home-page .about-photo:hover img,.home-page .about-photo:focus-within img { filter:grayscale(0); }
@media(hover:none) {
  .home-page .card-media img,.home-page .card-media video,
  .home-page .feature-media img,.home-page .feature-media video,
  .home-page .event-row img,.home-page .about-photo img { filter:none; }
}
[data-contact-links] { flex-wrap:wrap; gap:16px 26px; }
[data-contact-links] a { overflow-wrap:anywhere; }
.contact-row>[data-contact-links] { justify-content:flex-end; }
@media(max-width:700px) {
  .contact-row>[data-contact-links] { justify-content:flex-start; }
  .hero-track { animation-duration:45s; }
  .hero-lane:nth-child(2) .hero-track { animation-duration:52s; }
}
@media(max-width:480px) {
  .hero-tile img { filter:grayscale(1) blur(4px) brightness(.46); }
  .hero-group { gap:0; padding-right:0; }
  .home-page .hero-collage { gap:0; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-track { animation:none; transform:translateX(-25%); }
  .home-page .scroll-media { transform:none; clip-path:none; }
}

/* Individual depth scenes: background first, then the original foreground. */
.about-photos { display:block; margin-top:90px; }
.portrait-scene { position:relative; min-height:170svh; margin-bottom:12svh; }
.about-photo,.about-photo:nth-child(even) { padding:0; margin:0 auto; position:sticky; top:120px; width:min(100%, calc(66svh * .75)); }
.portrait-scene:nth-child(2) .about-photo { width:min(100%, calc(66svh * .5383)); }
.about-photo-frame { position:relative; overflow:hidden; background:transparent; isolation:isolate; }
.about-photo-frame>img { display:block; width:100%; height:auto; }
.about-photo-frame .portrait-layer { display:block; opacity:0; position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.depth-ready { --background-progress:1; --subject-progress:1; --depth-x:0px; --depth-y:0px; }
.depth-ready .about-photo-frame>img:first-child { opacity:0; }
.depth-ready .about-photo-frame .portrait-layer { display:block; }
.depth-ready .portrait-background { opacity:var(--background-progress); transform:translate(calc(var(--depth-x) * -.35),calc(var(--depth-y) * -.3)) scale(1.06); }
.depth-ready .portrait-foreground { opacity:var(--subject-progress); clip-path:inset(calc((1 - var(--subject-progress)) * 100%) 0 0); transform:translate(var(--depth-x),calc(var(--depth-y) + (1 - var(--subject-progress)) * 34px)) scale(calc(1.06 + (1 - var(--subject-progress)) * .08)); }
.about-photo figcaption { display:flex; justify-content:space-between; gap:18px; line-height:1.6; }
@media(max-width:700px) {
  .about-photos { margin-top:50px; }
  .portrait-scene { min-height:165svh; margin-bottom:10svh; }
  .about-photo,.about-photo:nth-child(even) { top:125px; width:min(100%,calc(62svh * .75)); }
  .portrait-scene:nth-child(2) .about-photo { width:min(100%,calc(62svh * .5383)); }
}
@media(prefers-reduced-motion:reduce) {
  .portrait-scene { min-height:0; margin-bottom:80px; }
  .about-photo,.about-photo:nth-child(even) { position:relative; top:auto; }
  .depth-ready .about-photo-frame>img:first-child { opacity:1; }
  .depth-ready .about-photo-frame .portrait-layer { display:block; opacity:0; }
}

.hero-collage.is-paused .hero-track { animation-play-state:paused; }

/* Behind the scenes: full portrait frames with native, seekable controls. */
.bts-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; max-width:960px; margin:0 auto; }
.bts-clip { margin:0; min-width:0; }
.bts-clip video { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; background:#080808; filter:grayscale(1); transition:filter .6s ease; }
.bts-clip:hover video,.bts-clip:focus-within video,.bts-clip.is-playing video { filter:grayscale(0); }
.bts-clip figcaption { padding:20px 0; border-bottom:1px solid var(--line); }
.bts-clip figcaption p { margin:0 0 8px; }
.bts-clip h3 { margin:0; font-size:clamp(1.25rem,2vw,1.75rem); font-weight:400; }
@media(max-width:600px) { .bts-grid { grid-template-columns:1fr; gap:40px; max-width:400px; } }
@media(prefers-reduced-motion:reduce) { .bts-clip video { transition:none; } }

/* A single video contains both synchronized color versions. */
.color-comparison { margin:40px 0 65px; background:#101010; color:#fff; }
.comparison-stage { position:relative; aspect-ratio:16/9; overflow:hidden; background:#050505; }
.comparison-stage canvas,.comparison-poster { display:block;width:100%;height:100%;object-fit:contain; }
.comparison-stage canvas {position:absolute;inset:0;touch-action:none;cursor:ew-resize;}
.comparison-source {display:block;width:100%;height:100%;object-fit:contain;}
.is-enhanced .comparison-source {position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.comparison-poster {position:absolute;inset:0;pointer-events:none;}
.comparison-divider {position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;pointer-events:none;box-shadow:0 0 8px #0008;}
.comparison-divider::after {content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;background:#050505b3;padding:10px;font-size:20px;}
.comparison-label {position:absolute;top:16px;background:#050505bd;padding:8px 12px;pointer-events:none;font-size:11px;letter-spacing:.1em;}
.comparison-label.before {left:16px}.comparison-label.after {right:16px}
.comparison-controls {padding:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.comparison-controls button {background:transparent;color:#fff;border:1px solid #666;padding:10px 14px;font:inherit;font-size:12px;cursor:pointer;}
.comparison-controls button:hover {background:#fff;color:#050505}
.comparison-controls input {accent-color:#fff;min-width:0;}
.comparison-timeline {display:flex;align-items:center;gap:12px;flex:1 1 300px;font-size:12px;}
.comparison-timeline input {width:100%;}
.comparison-timeline output {white-space:nowrap;}
.comparison-reveal {display:flex;align-items:center;gap:15px;flex:1 1 100%;font-size:12px;color:#ccc;}
.comparison-reveal input {flex:1;}
.comparison-help {margin:0;padding:0 18px 18px;color:#aaa;font-size:12px;}
.color-comparison:fullscreen {display:flex;flex-direction:column;justify-content:center;margin:0;background:#050505;width:100%;height:100%;}
.color-comparison:fullscreen .comparison-stage {width:min(100%,calc((100vh - 180px)*16/9));margin:0 auto;flex-shrink:1;}
@media(max-width:600px){.comparison-label{font-size:9px;padding:6px 8px;top:10px}.comparison-label.before{left:10px}.comparison-label.after{right:10px}.comparison-controls{padding:12px;gap:10px}.comparison-timeline{order:3;flex-basis:100%}.comparison-reveal{order:4}.comparison-divider::after{padding:6px;font-size:16px}}

.comparison-timeline .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
/* Language is an explicit choice; keep the compact switch visible on entry. */
.site-header .language-switch { display:flex; flex-shrink:0; gap:2px; margin-left:auto; margin-right:26px; }
.language-switch button { min-width:36px; min-height:40px; padding:8px 5px; border:0; border-bottom:1px solid transparent; background:transparent; color:#8e8e8e; font-family:inherit; font-size:12px; font-weight:500; line-height:1; letter-spacing:.08em; cursor:pointer; }
.language-switch button[aria-pressed="true"] { color:#fff; border-bottom-color:#fff; }
.language-switch button:hover { color:#fff; }
.language-switch button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
html[lang="es"] .site-header nav { gap:clamp(10px,1.6vw,24px); }
html[lang="es"] .portal-footer { gap:18px; }
@media(max-width:800px) and (min-width:601px) { .site-header .language-switch {margin-right:12px;} .site-header nav {gap:12px;} .site-header nav a {font-size:10px;} }
@media(max-width:600px) { .site-header .language-switch { margin-right:0; } html[lang="es"] .site-header nav { gap:8px; } html[lang="es"] .site-header nav a { font-size:clamp(9px,2.6vw,11px); } html[lang="es"] .portal-footer { font-size:.6rem; } }