/* Base and shared components */

@font-face{
  font-family: Montserrat;
  src: url("/assets/montserrat.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --header-height: 100px;
  --header-content-gap: calc((var(--header-height) - 1px - var(--nav-button-height)) / 2);
  --nav-font-size: .875rem;
  --nav-padding-y: calc(.75rem - 5px);
  --nav-button-height: calc(var(--nav-font-size) * 1.7 + var(--nav-padding-y) * 2 + 2px);
  --accent: #f7cb84;
  --secondary: #c18456;
  --brand-gradient: linear-gradient(to top right, var(--secondary), var(--accent));
  --bg: #0e0e0e;
  --panel: var(--bg);
  --radius: 3px;
  --ink: #efefeb;
  --muted: #d0d1cb;
  --line: var(--gris-secundario);
  --font: Montserrat,Arial,sans-serif;
  --rail: 52px;
  --card-gap: 15px;
  --content-max: 1280px;
  --page-gutter: 4vw;
  --content-inset: max(var(--page-gutter),calc((100vw - var(--rail) - var(--content-max))/2));
  --gris-secundario: #2d2d2d;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.7 var(--font);
  overflow-x: hidden;
  background-image: url("/assets/ronin-grain-uniform.avif");
  background-size: 1920px 1080px;
  background-repeat: repeat;
  background-blend-mode: overlay;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  border-radius: var(--radius);
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

input {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

select {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

textarea {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

button:disabled {
  cursor: default;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  display: block;
}

p {
  margin: 0 0 1.25em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

h1 {
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: -.035em;
  font-size: clamp(2.5rem,5.8vw,6rem);
}

h2 {
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: -.035em;
  font-size: clamp(1.8rem,3.6vw,3.8rem);
}

h3 {
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: -.035em;
  font-size: 1.65rem;
}

small {
  font-size: .875rem;
}

.muted {
  color: var(--muted);
}

.eyebrow {
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 1.5rem;
}

.skip {
  position: fixed;
  top: -100px;
  left: 100px;
  z-index: 100;
  background: var(--accent);
  color: #0e0e0e;
  padding: 1rem;
}

.skip:focus {
  top: 10px;
}

.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: fixed;
  top: 0;
  left: var(--rail);
  right: 0;
  z-index: 40;
  padding: 0 max(var(--page-gutter),calc((100% - var(--rail) - var(--content-max))/2));
  background: var(--bg);
  border-bottom: 1px solid var(--gris-secundario);
  background-image: url("/assets/ronin-grain-uniform.avif");
  background-size: 1920px 1080px;
  background-repeat: repeat;
  background-blend-mode: overlay;
}

.brand {
  flex-shrink: 0;
  width: 180px;
}

.brand svg {
  width: 100%;
  height: auto;
}

.site-header .brand,
.drawer-top .brand {
  display: flex;
  align-items: center;
  height: var(--nav-button-height);
}

.site-header .brand svg,
.drawer-top .brand svg {
  /* RONIN center: (376 + 559)/2 = 467.5; viewBox center: 415. */
  transform: translate(calc(-100% * 21 / 1375),-17.5%);
}

.service-nav {
  display: flex;
  gap: var(--card-gap);
  align-items: center;
}

.service-nav>a,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink);
  line-height: 1.7;
  text-align: center;
  transition: background .2s, color .2s;
  font-size: var(--nav-font-size);
  font-weight: 600;
  height: var(--nav-button-height);
  padding: var(--nav-padding-y) calc(1.15rem + 10px);
  background: transparent;
  border: 1px solid var(--gris-secundario);
  letter-spacing: .035em;
  border-radius: var(--radius);
  text-transform: none;
}

.service-nav>a[aria-current=page],
.service-nav>a:is(:hover,:focus-visible),
.button:is(:hover,:focus-visible) {
  background: var(--gris-secundario);
  border-color: transparent;
  color: var(--accent);
}

.menu-toggle,
.close-menu {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  width: 52px;
  height: var(--nav-button-height);
  display: grid;
  place-content: center;
  border-radius: var(--radius);
}

.menu-toggle {
  gap: 7px;
}

.menu-toggle span,
.close-menu span {
  width: 23px;
  height: 2px;
  background: currentColor;
}

.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail);
  border-right: 1px solid var(--gris-secundario);
  z-index: 42;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("/assets/ronin-grain-uniform.avif");
  background-size: 1920px 1080px;
  background-repeat: repeat;
  background-blend-mode: overlay;
}

.rail-home {
  width: 100%;
  height: 100px;
  display: grid;
  place-content: center;
  border-bottom: 1px solid var(--gris-secundario);
  background: var(--brand-gradient);
  color: var(--bg);
  flex-shrink: 0;
  position: relative;
}

.rail-links {
  width: 100%;
}

.rail-links a {
  display: grid;
  place-content: center;
  height: 74px;
  color: var(--muted);
  position: relative;
}

.rail-links a:hover {
  color: var(--accent);
  background: var(--gris-secundario);
}

.rail-links a[aria-current] {
  color: var(--accent);
  background: var(--gris-secundario);
}

.rail-links a:is(:hover, :focus-visible) svg {
  color: var(--secondary);
}

.rail-links a:nth-child(odd) {
  --rail-line-direction: to bottom;
}

.rail-links svg {
  width: 24px;
  height: 24px;
}

.rail-word {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .75rem;
  letter-spacing: .25em;
  color: var(--muted);
  margin: auto 0;
}

.rail-cta {
  position: relative;
  display: grid;
  place-content: center;
  width: 100%;
  height: 74px;
  flex-shrink: 0;
  padding: 0 8px;
  background: var(--brand-gradient);
  color: #0e0e0e;
}

.rail-home:hover,
.rail-home:focus-visible,
.rail-cta:hover,
.rail-cta:focus-visible {
  background: var(--bg);
  color: var(--accent);
}

.rail-cta:is(:hover,:focus-visible) {
  background: var(--gris-secundario);
}

.rail-links a:is(:hover,:focus-visible,[aria-current])::before,
.rail-cta:is(:hover,:focus-visible)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(var(--rail-line-direction, to top), var(--secondary), var(--accent));
  pointer-events: none;
}

.rail-cta svg {
  margin: auto;
  width: 25px;
  height: 25px;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: #0009;
  z-index: 44;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(490px,100%);
  z-index: 45;
  padding: 0 42px 35px;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .7s cubic-bezier(.22,.61,.36,1), visibility 0s .7s;
  display: flex;
  flex-direction: column;
  overflow: auto;
  visibility: hidden;
}

.menu-open {
  overflow: hidden;
}

.menu-open .drawer {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.menu-open .menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.drawer-top {
  height: calc(var(--header-height) - 1px);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-top .brand {
  width: 170px;
}

.close-menu {
  padding: 0;
}

.close-menu span {
  width: 17px;
  grid-area: 1 / 1;
  transform: rotate(45deg);
}

.close-menu span:last-child {
  transform: rotate(-45deg);
}

.drawer nav {
  display: grid;
  margin: 45px 0 30px;
}

.drawer nav a {
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.5rem;
  letter-spacing: -.04em;
}

.drawer nav a:hover {
  color: var(--accent);
}

.drawer nav a small {
  font-size: .75rem;
  letter-spacing: .05em;
  color: var(--muted);
}

.drawer-services {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  font-size: .875rem;
  color: var(--accent);
}

.drawer-services a:is(:hover,:focus-visible) {
  color: var(--secondary);
}

.drawer-contact {
  margin-top: auto;
  padding-top: 45px;
}

.drawer-contact .eyebrow {
  letter-spacing: normal;
  margin: 0 0 15px;
  text-transform: none;
  color: var(--secondary);
}

.drawer-contact .button {
  width: 100%;
}

.socials {
  display: flex;
  gap: 22px;
  font-size: .875rem;
  margin-top: 20px;
}

main {
  margin-left: var(--rail);
  padding-top: 100px;
  min-height: 80vh;
}

.wrap {
  width: min(var(--content-max),calc(100% - 2*var(--page-gutter)));
  margin: auto;
}

.section {
  padding: 95px 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: 40px;
}

.section-head h2 {
  margin: 0;
}

.section-head p {
  margin: 0;
  max-width: 420px;
  color: var(--muted);
}

.text-link {
  position: relative;
  display: inline-block;
  background: none;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  padding: 0;
  padding-bottom: 5px;
  white-space: nowrap;
}

.text-link::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: 0;
  border-bottom: 1px solid var(--accent);
  pointer-events: none;
}

.text-link:is(:hover,:focus-visible)::after {
  border-bottom-color: var(--secondary);
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 100px);
  display: grid;
  grid-template-rows: minmax(340px, 1fr) auto;
  overflow: hidden;
}

.hero-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: size;
  min-width: 0;
}

.hero-kanji {
  --isotipo-height: min(257.6px, 29.44cqh);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc(var(--isotipo-height) * 530 / 1290);
  position: absolute;
  left: 50%;
  top: calc(25% + 15px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-kanji svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  flex-shrink: 0;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  height: calc(100% + clamp(80px, 20cqh, 200px));
  transform-origin: center 54%;
  z-index: -2;
}



.hero-caption {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  row-gap: 2rem;
  column-gap: var(--card-gap);
  align-items: center;
  width: 100%;
  padding: 35px var(--content-inset);
  background: #0e0e0eed;
  border-top: 1px solid var(--gris-secundario);
  background-image: url("/assets/ronin-grain-uniform.avif");
  background-size: 1920px 1080px;
  background-repeat: repeat;
  background-blend-mode: overlay;
}

.hero-title {
  font-weight: 800;
  letter-spacing: -.065em;
  text-transform: uppercase;
  margin: 0;
  color: var(--accent);
  width: min(100%,560px);
  font-size: 0;
  line-height: 0;
}

.hero-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
  justify-self: end;
  text-align: right;
  max-width: 550px;
}

.hero-summary p {
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 0;
}

.rule-caption {
  display: flex;
  justify-content: space-between;
  padding: 14px var(--content-inset);
  border-bottom: 1px solid var(--gris-secundario);
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Text links share the brand hover and keyboard-focus color. */
.footer-links a:is(:hover,:focus-visible),
.footer-social:is(:hover,:focus-visible),
.socials a:is(:hover,:focus-visible),
.contact-links a:is(:hover,:focus-visible),
.drawer nav a:is(:hover,:focus-visible),
.breadcrumbs a:is(:hover,:focus-visible),
.project-nav a:not(.button):is(:hover,:focus-visible),
.article-sidebar a:not(.button):is(:hover,:focus-visible),
.article-body a:is(:hover,:focus-visible),
.text-link:is(:hover,:focus-visible) {
  color: var(--secondary);
}

/* Shared corners for content cards and link buttons. */
.service-card,
.teaser,
.project-row,
.gallery-item,
.gallery-thumbs button,
.service-lead aside,
.plan,
.article-card,
.cta-band,
.contact-form,
.article-body blockquote,
.lightbox,
.button,
.mobile-contact {
  border-radius: var(--radius);
}

/* Shared content-card surfaces and interaction. */
.service-card,
.teaser,
.project-row,
.gallery-item,
.gallery-thumbs button,
.service-lead aside,
.plan,
.article-card,
.contact-form {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.service-card:is(:hover,:focus-within),
.teaser:is(:hover,:focus-within),
.project-row:is(:hover,:focus-within),
.gallery-item:is(:hover,:focus-within),
.gallery-thumbs button:is(:hover,:focus-within),
.service-lead aside:is(:hover,:focus-within),
.plan:is(:hover,:focus-within),
.article-card:is(:hover,:focus-within),
.contact-form:is(:hover,:focus-within) {
  border-color: transparent;
  background: linear-gradient(var(--bg),var(--bg)) padding-box, var(--brand-gradient) border-box;
}

.service-card {
  padding: 30px;
  min-height: 355px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.service-card svg {
  color: var(--accent);
  width: 35px;
  height: 35px;
  margin: 25px 0;
}

.service-card h3 {
  margin-bottom: 20px;
}

.service-card p,
.home-service-details ul {
  font-size: .95rem;
  color: var(--muted);
}

.home-service-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: var(--card-gap);
  row-gap: var(--card-gap);
  align-items: start;
  padding: 40px;
}

.home-service-card svg {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.home-service-card h3 {
  font-size: clamp(1.6rem,2.5vw,2.5rem);
}

.home-service-card p {
  max-width: 520px;
  margin-bottom: 0;
}

.home-service-details {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.home-service-details ul {
  padding-left: 1.2em;
  margin: 0;
}

.home-service-details > :is(h3,p) {
  margin: 0;
}

.home-service-details > .text-link {
  align-self: flex-start;
}

.home-service-image {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gris-secundario);
  border-radius: 5px;
}

body:has(.home-cta) {
  --cta-footer-space: 50px;
}

main:has(> .home-cta) > section:not(.hero) {
  min-height: 0;
  margin-top: 200px;
  padding-block: 0;
}

main:has(> .home-cta) > section.home-cta {
  margin-top: 150px;
  padding-bottom: var(--cta-footer-space);
}

body:has(.home-cta) .site-footer {
  padding-top: var(--cta-footer-space);
}

.project-teasers {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--card-gap);
}

.teaser {
  overflow: hidden;
}

.teaser img {
  width: 100%;
  height: clamp(220px,25vw,350px);
  object-fit: cover;
  object-position: top;
}

.project-teasers > .teaser:first-child img {
  object-position: center;
}

.card-media {
  overflow: hidden;
  min-width: 0;
}

.card-media img {
  display: block;
  transition: transform .45s;
}

:is(.teaser, .project-row, .article-card):is(:hover, :focus-visible, :focus-within) .card-media img {
  transform: scale(1.025);
}

.home-service-image {
  overflow: hidden;
}

.teaser-body {
  padding: 25px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}

.teaser-body h3 {
  margin: 7px 0 0;
}

.teaser-body span {
  font-size: .75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.approach {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  row-gap: 7vw;
  column-gap: 50px;
  padding: 80px 0;
}

.approach p {
  color: var(--muted);
}

.approach > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.approach > div:first-child > * {
  margin: 0;
}

.principle {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  padding: 25px 0;
  border-top: 1px solid var(--line);
}

.principle .number {
  color: var(--accent);
  font-size: .875rem;
}

.principle h3 {
  font-size: 1.4rem;
  letter-spacing: -.02em;
}

.principle p {
  margin: 0;
  font-size: .95rem;
}

.cta-band {
  padding: 55px;
  background: linear-gradient(to top right, var(--secondary) 0%, var(--accent) 65%);
  color: #0e0e0e;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.cta-band h2 {
  font-size: clamp(1.8rem,3vw,3rem);
  margin-bottom: 15px;
}

.cta-band p {
  font-weight: 500;
  margin: 0;
  max-width: 650px;
}

.cta-band .button {
  flex-shrink: 0;
  color: var(--gris-secundario);
}

.cta-band .button:is(:hover,:focus-visible) {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--secondary);
}

.page-intro {
  display: flex;
  flex-direction: column;
  gap: var(--header-content-gap);
  padding: var(--header-content-gap) 0 60px;
  position: relative;
}

.page-intro h1 {
  max-width: 1000px;
}

.page-intro .intro {
  font-size: 1.2rem;
  max-width: 750px;
  line-height: 1.7;
  color: var(--muted);
}

.page-intro:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 32%;
  height: 100%;
  background: repeating-linear-gradient(110deg,transparent 0,transparent 40px,#ffffff05 41px,#ffffff05 42px);
  z-index: -1;
}

.breadcrumbs {
  font-size: .875rem;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  margin-bottom: 30px;
}

.breadcrumbs a {
  color: var(--accent);
}

.portfolio-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  row-gap: 45px;
  column-gap: var(--card-gap);
  align-items: start;
}

.project-nav {
  position: sticky;
  top: calc(var(--header-height) - 1px);
  border-top: 1px solid var(--line);
  container-type: inline-size;
}

.project-nav-scroll {
  width: calc(100% + (var(--card-gap) + 5px) / 2);
  max-height: calc(100dvh - var(--header-height) - 15px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: auto;
  scrollbar-gutter: stable;
}

.project-nav-scroll::-webkit-scrollbar {
  width: 5px;
}

.project-nav-scroll::-webkit-scrollbar-thumb {
  background: var(--gris-secundario);
}

.project-nav-scroll > a {
  width: 100cqw;
}

.project-nav a:not(.button) {
  display: flex;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
  gap: 15px;
}

.project-nav a:not(.button):hover {
  color: var(--secondary);
}

.project-nav a[aria-current=page] {
  color: var(--accent);
}

.project-nav .button {
  margin-top: 15px;
}

.project-row {
  scroll-margin-top: 130px;
  display: grid;
  grid-template-columns: 1fr 45%;
  min-height: 0;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--card-gap);
}

.project-row-info {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.project-row .eyebrow {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: auto;
}

.project-row h2 {
  font-size: clamp(1.8rem,3vw,2.8rem);
  margin: 25px 0 12px;
}

.project-row p {
  color: var(--muted);
  font-size: .95rem;
  margin: 0;
}

.project-row .card-media {
  width: 100%;
  align-self: center;
}

.project-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
}

.project-detail {
  display: grid;
  grid-template-columns: minmax(0,44fr) 36px minmax(0,56fr);
  row-gap: 30px;
  column-gap: var(--card-gap);
  align-items: start;
  padding: var(--header-content-gap) 0 80px;
}

.project-story {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.project-story > :is(.breadcrumbs, h1, .lead, blockquote, .article-body, .project-meta, .gallery-thumbs, .actions) {
  margin: 0;
}

.project-story {
  align-self: stretch;
}

.project-sticky {
  position: sticky;
  top: calc(var(--header-height, 100px) - 1px);
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: calc(100dvh - var(--header-height, 100px) - 30px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.project-sticky > * {
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .project-sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.project-story h1 {
  font-size: 4.2rem;
  overflow-wrap: anywhere;
}

.project-story .lead {
  font-size: 1.12rem;
  color: var(--muted);
}

.project-meta {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 15px;
  font-size: .875rem;
  margin: 28px 0;
}

.project-meta dt {
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.project-meta dd {
  margin: 5px 0 0;
  color: var(--muted);
}

.vertical-sign {
  position: relative;
  overflow: hidden;
  align-self: stretch;
  border-left: 1px solid var(--line);
  width: calc(100% + var(--card-gap));
  color: #474747;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
}

.vertical-sign span {
  position: absolute;
  inset: 0 auto auto 50%;
  width: 1em;
  height: max-content;
  overflow: hidden;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
}

.project-gallery {
  display: grid;
  gap: var(--card-gap);
}

.gallery-item {
  margin: 0;
  overflow: hidden;
}

.gallery-item button {
  padding: 0;
  border: 0;
  display: block;
  width: 100%;
  background: none;
  cursor: zoom-in;
}

.gallery-item img {
  width: 100%;
  height: auto;
}

.gallery-item figcaption,
.story-caption {
  padding: 14px 20px;
  font-size: .875rem;
  color: var(--muted);
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
}

.gallery-thumbs button {
  padding: 0;
  min-width: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.lightbox {
  padding: 0;
  border: 1px solid var(--line);
  background: #0e0e0e;
  color: var(--ink);
  max-width: min(1100px,94vw);
  max-height: 94svh;
  width: 1100px;
}

.lightbox::backdrop {
  background: #000d;
}

.lightbox-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 20px;
  position: sticky;
  bottom: 0;
  background: #0e0e0e;
  background-image: url("/assets/ronin-grain-uniform.avif");
  background-size: 1920px 1080px;
  background-repeat: repeat;
  background-blend-mode: overlay;
}

.lightbox img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.lightbox-description {
  display: flex;
  align-items: baseline;
  gap: 15px;
  flex: 1 1 220px;
  min-width: 0;
}

.lightbox-description [data-counter] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.lightbox-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.lightbox-arrow {
  width: var(--nav-button-height);
  padding: 0;
  line-height: 1;
  font-size: 1.25rem;
}

.lightbox-arrow[hidden] {
  display: none;
}

.service-lead {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  row-gap: 60px;
  column-gap: var(--card-gap);
  align-items: end;
}

.service-lead aside {
  padding: 30px;
}

.service-lead aside p {
  margin: 0;
  color: var(--muted);
}

.service-lead aside svg {
  width: 45px;
  height: 45px;
  color: var(--accent);
  margin-bottom: 25px;
}

.deliverables {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  row-gap: 0;
  column-gap: var(--card-gap);
  margin: 40px 0;
}

.deliverable {
  border-top: 1px solid var(--line);
  padding: 25px 0;
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 20px;
}

.deliverable>span {
  font-size: .875rem;
  color: var(--accent);
}

.deliverable h3 {
  font-size: 1.3rem;
}

.deliverable p {
  color: var(--muted);
  margin: 0;
  font-size: .95rem;
}

.two-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
}

.plan {
  padding: 40px;
}

.plan .eyebrow {
  color: var(--muted);
}

.plan h2,
.plan h3,
.plan .plan-price {
  font-weight: 700;
  font-size: 2.5rem;
}

.plan p {
  color: var(--muted);
}

.plan ul {
  padding-left: 20px;
  margin: 25px 0 35px;
}

.plan li {
  padding: 5px 0;
  font-size: .95rem;
}

.process {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--card-gap);
}

.process>div {
  padding: 25px 0;
  border-top: 1px solid var(--line);
}

.process .number {
  color: var(--accent);
  display: block;
  margin-bottom: 25px;
  font-size: .875rem;
}

.process h3 {
  font-size: 1.35rem;
}

.process p {
  color: var(--muted);
  font-size: .95rem;
}

.faq {
  width: var(--faq-width, 100%);
  max-width: 100%;
  margin: 0;
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}

.faq summary {
  font-size: 1.12rem;
  cursor: pointer;
  font-weight: 500;
}

.faq summary:is(:hover,:focus-visible) {
  color: var(--secondary);
}

.faq details[open] > summary {
  color: var(--accent);
}

.faq details p {
  margin: 20px 0 0;
  color: var(--muted);
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
}

.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.article-cover {
  display: block;
  width: 100%;
  height: auto;
}

.article-card-content {
  padding: 35px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 330px;
}

.article-card .article-meta {
  justify-content: space-between;
  flex-wrap: nowrap;
}

.article-card h2 {
  font-size: 2rem;
  margin: 30px 0 20px;
}

.article-card p {
  color: var(--muted);
  font-size: .95rem;
}

.article-card .text-link {
  margin-top: auto;
  align-self: start;
}

.article-card .text-link:hover,
.article-card:focus-visible .text-link {
  color: var(--secondary);
}

.article-card:focus-visible .text-link::after {
  border-bottom-color: var(--secondary);
}

.article-layout {
  display: grid;
  grid-template-columns: 220px minmax(0,780px);
  row-gap: 6vw;
  column-gap: 30px;
  justify-content: start;
}

.article-sidebar {
  position: sticky;
  top: 130px;
  align-self: start;
}

.article-sidebar a:not(.button) {
  font-size: .875rem;
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.article-sidebar a:not(.button):hover {
  color: var(--secondary);
}

.article-body {
  font-size: 1.05rem;
  line-height: 1.85;
}

.article-body h2 {
  font-size: 2rem;
  margin-top: 55px;
}

.article-body h3 {
  font-size: 1.45rem;
  margin-top: 35px;
}

.article-body p {
  color: var(--muted);
}

.article-body li {
  color: var(--muted);
}

.article-body a {
  color: var(--accent);
  text-decoration: underline;
}

.article-body blockquote {
  margin: 35px 0;
  padding: 25px;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  font-size: 1.3rem;
}

.article-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .875rem;
  color: var(--muted);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 7vw;
  column-gap: var(--card-gap);
}

.about-grid .manifesto {
  font-size: clamp(1.5rem,2.6vw,2.5rem);
  line-height: 1.5;
  color: var(--accent);
}

.about-grid p {
  color: var(--muted);
}

.contact-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  row-gap: 7vw;
  column-gap: var(--card-gap);
}

.contact-aside {
  padding-top: 0;
}

.contact-aside h2 {
  font-size: 1.8rem;
}

.contact-aside p {
  color: var(--muted);
}

.contact-links {
  display: grid;
  gap: 20px;
  margin-top: 35px;
}

.contact-form {
  padding: 35px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 22px;
  column-gap: var(--card-gap);
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.field label {
  font-size: .875rem;
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--gris-secundario);
  background: var(--gris-secundario);
  padding: 13px 15px;
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 1rem;
  min-height: 52px;
}

.field textarea {
  resize: vertical;
  min-height: 170px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
}

.form-note {
  font-size: .875rem;
  color: var(--muted);
  margin: 20px 0 0;
}

.form-message {
  color: var(--accent);
  font-size: .875rem;
}

.site-footer {
  margin-left: var(--rail);
  padding: 60px var(--content-inset) 25px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.footer-main,
.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  width: 100%;
}

.footer-main {
  grid-template-columns: minmax(0,1fr) auto;
  gap: 35px;
  margin-bottom: 50px;
}

.footer-social {
  justify-self: end;
}

.footer-main .brand {
  width: 165px;
  transform: translateY(-5px);
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  justify-self: end;
  gap: 24px;
  flex-wrap: wrap;
  font-size: .875rem;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  gap: 20px;
  color: var(--muted);
  font-size: .75rem;
}

.footer-bottom span:nth-child(2) {
  justify-self: center;
  text-align: center;
}

.not-found {
  text-align: center;
  min-height: 60vh;
  padding: 100px 25px;
}

.not-found .eyebrow {
  font-size: 5rem;
}

.rail-home svg {
  width: auto;
  height: 64.99px;
  max-width: 100%;
  object-fit: contain;
}

.rail-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  background: var(--gris-secundario);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.rail-tooltip:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--gris-secundario);
}

.rail-tooltip:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 10px;
}

.rail a:not(.tooltip-dismissed):hover .rail-tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.rail a:not(.tooltip-dismissed):focus-visible .rail-tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.rail-home:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 1px;
  background: inherit;
  pointer-events: none;
}

.hero-title svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero-title svg g {
  fill: var(--gris-secundario);
}

.hero-wordmark-link {
  display: block;
}

.hero-wordmark-link:is(:hover,:focus-visible) svg g {
  fill: var(--secondary);
}

.menu-toggle:hover,
.close-menu:hover {
  background: var(--gris-secundario);
  border-color: transparent;
  color: var(--accent);
}

/* Desktop anchor offset below the fixed header. */
@media (min-width:1101px) {
  html {
    scroll-padding-top: var(--header-height);
  }
}

@media (max-width:1100px) {
  :root {
  --nav-font-size: .75rem;
  --nav-padding-y: 7px;
}

  .site-header {
  gap: 15px;
}

  .service-nav>a {
  white-space: nowrap;
  padding-inline: 10px;
}

  .brand {
  width: 145px;
}

  .service-card {
  padding: 24px;
}

  .portfolio-layout {
  grid-template-columns: 175px 1fr;
  row-gap: 25px;
  column-gap: var(--card-gap);
}

  .project-detail {
  row-gap: 20px;
  column-gap: var(--card-gap);
  grid-template-columns: 44fr 20px 56fr;
}

  .vertical-sign {
  font-size: 1rem;
}

  .project-row {
  grid-template-columns: 1fr 42%;
}

  .service-lead {
  row-gap: 35px;
  column-gap: var(--card-gap);
}

  .project-story h1 {
  font-size: 3rem;
}
}

@media (max-width:820px) {
  .home-service-card {
    grid-template-columns: 1fr;
  }

  .home-service-image {
    grid-column: 1;
    grid-row: 3;
  }

  :root {
  --header-height: 85px;
  --rail: 38.6667px;
  --page-gutter: 25px;
  --nav-font-size: .7rem;
  --nav-padding-y: 5px;
}

  .rail-home {
  height: 85px;
}

  .rail-links a {
  height: 62px;
}

  .service-nav>a {
  padding-inline: 4px;
  font-size: .65rem;
}

  .menu-toggle,
  .close-menu {
  width: 42px;
}

  .brand {
  width: 125px;
}

  main {
  padding-top: 85px;
}

  .hero {
  min-height: calc(90svh - 85px);
}

  .hero-caption {
  grid-template-columns: 1fr;
  row-gap: 25px;
  column-gap: var(--card-gap);
  padding: 30px var(--content-inset);
}

  .hero-summary p {
  font-size: 1rem;
}

  .section {
  padding: 65px 0;
}

  .section-head {
  align-items: start;
  flex-direction: column;
  gap: 20px;
}

  .service-card {
  min-height: 280px;
}

  .service-card svg {
  margin: 20px 0;
}

  .service-card h3 {
  font-size: 2rem;
}

  .service-card p {
  max-width: 500px;
}

  .project-teasers {
  grid-template-columns: 1fr;
}

  .approach {
  grid-template-columns: 1fr;
  row-gap: 35px;
  column-gap: var(--card-gap);
}

  .cta-band {
  padding: 35px;
}

  .portfolio-layout {
  grid-template-columns: 1fr;
}

  .project-nav {
  position: static;
  container-type: normal;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

  .project-nav-scroll { display: contents; }
  .project-nav-scroll > a { width: auto; }

  .project-nav a:not(.button) {
  border: 0;
  padding: 12px 0;
}

  .project-nav .button {
  display: none;
}

  .project-nav small {
  display: none;
}

  .project-row-info {
  padding: 25px;
}

  .project-detail {
  grid-template-columns: 1fr;
  row-gap: 35px;
  column-gap: var(--card-gap);
}

  .project-story {
  position: static;
}

  .vertical-sign {
  display: none;
}

  .project-story h1 {
  font-size: 3.6rem;
}


  .service-lead {
  grid-template-columns: 1fr;
  row-gap: 20px;
  column-gap: var(--card-gap);
}

  .service-lead aside {
  max-width: 600px;
}

  .deliverables {
  grid-template-columns: 1fr;
}

  .two-cards {
  grid-template-columns: 1fr;
}

  .blog-grid {
  grid-template-columns: 1fr;
}

  .about-grid {
  grid-template-columns: 1fr;
}

  .contact-layout {
  grid-template-columns: 1fr;
}

  .process {
  grid-template-columns: 1fr;
}

  .article-layout {
  grid-template-columns: 1fr;
  row-gap: 30px;
  column-gap: var(--card-gap);
}

  .article-sidebar {
  position: static;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

  .article-sidebar .button {
  display: none;
}

  .article-sidebar a:not(.button) {
  padding: 8px 0;
}

  .footer-main,
  .footer-bottom {
  grid-template-columns: 1fr;
}

  .footer-links,
  .footer-social {
  justify-self: center;
  justify-content: center;
}

  .page-intro {
  padding: var(--header-content-gap) 0 35px;
}
}

@media (max-width:600px) {
  :root {
  --rail: 0px;
  --page-gutter: 18px;
  --nav-font-size: .68rem;
  --nav-padding-y: 4px;
  --nav-button-height: 27px;
  --mobile-menu-space: 15px;
  --header-content-gap: var(--mobile-menu-space);
  --mobile-header-height: calc(2*var(--mobile-menu-space) + 2*var(--nav-button-height) + 15px);
}

  .rail {
  display: none;
}

  .site-header {
  height: var(--mobile-header-height);
  padding: var(--mobile-menu-space) var(--content-inset);
  align-items: start;
  flex-wrap: wrap;
  gap: 10px;
}

  .brand {
  width: 140px;
  height: 38px;
}

  .site-header .brand {
  position: absolute;
  top: calc(var(--mobile-menu-space) + 2px);
  left: 50%;
  width: calc((100% - 36px - 2*var(--card-gap))/3 + 2*var(--card-gap));
  transform: translateX(-50%);
}

  .site-header .brand svg {
  /* Match the visible RONIN width, excluding the SVG side bearings. */
  width: calc(100% * 1375 / 1331);
  max-width: none;
  flex-shrink: 0;
}

  .service-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  position: absolute;
  inset-inline: 15px;
  top: calc(2*var(--mobile-menu-space) + var(--nav-button-height));
}

  .service-nav>a {
  min-width: 0;
  padding-inline: 2px;
  font-size: clamp(.625rem, 2.65vw, .8rem);
  letter-spacing: 0;
  white-space: nowrap;
}

  .service-nav .menu-toggle {
  position: absolute;
  right: 0;
  top: calc(-1 * (var(--mobile-menu-space) + var(--nav-button-height)));
}

  .menu-toggle {
  margin-left: auto;
  width: 42px;
}

  main {
  padding-top: var(--mobile-header-height);
}

  .hero {
  min-height: calc(90svh - var(--mobile-header-height));
}

  .hero-art {
  background: #000;
}

  .hero-image {
  height: 100%;
  object-fit: contain;
  transform: translateY(75px) scale(1.83583125);
  background: #000;
}

  .hero-caption {
  padding: 25px var(--content-inset);
  row-gap: 22px;
  column-gap: var(--card-gap);
}

  .hero-summary {
  align-items: flex-start;
  justify-self: start;
  text-align: left;
}

  .hero-summary p {
  font-size: .95rem;
  max-width: 350px;
}

  .rule-caption {
  padding: 12px var(--content-inset);
  font-size: .7rem;
}

  .rule-caption span:last-child {
  display: none;
}

  .section {
  padding: 50px 0;
}

  .section-head {
  margin-bottom: 28px;
}

  .service-card {
  padding: 30px;
  min-height: 310px;
}

  .teaser-body {
  padding: 30px;
}

  .teaser-body h3 {
  font-size: 1.5rem;
}

  .approach {
  padding: 45px 0;
}

  .cta-band {
  padding: 28px;
}

  .page-intro .intro {
  font-size: 1.05rem;
}

  .page-intro h1 {
  font-size: 2.65rem;
}

  .project-nav {
  gap: 18px;
}

  .project-nav a:not(.button) {
  font-size: .8rem;
}

  .project-row {
  grid-template-columns: 1fr;
  min-height: 0;
}

  .project-row .card-media {
  grid-row: 1;
}

  .project-row-info {
  padding: 25px;
}

  .project-row h2 {
  font-size: 2rem;
}


  .project-story h1 {
  font-size: 2.8rem;
}


  .project-meta {
  gap: 15px;
}

  .plan {
  padding: 30px;
}

  .deliverables {
  row-gap: 0;
  column-gap: var(--card-gap);
}

  .article-card-content {
  padding: 30px;
}

  .article-card h2 {
  font-size: 1.8rem;
}

  .article-body h2 {
  font-size: 1.8rem;
}

  .contact-form {
  padding: 23px;
}

  .form-grid {
  grid-template-columns: 1fr;
  row-gap: 0;
  column-gap: var(--card-gap);
}

  .drawer {
  padding: var(--mobile-menu-space) 25px 25px;
}

  .drawer-top {
  height: var(--nav-button-height);
}

  .drawer-top .brand {
  transform: translateY(2px);
}

  .drawer nav {
  margin-top: 30px;
}

  .drawer nav a {
  font-size: 1.6rem;
  padding: 13px 0;
}

  .drawer-contact {
  padding-top: 25px;
}

  .site-footer {
  padding: 40px var(--content-inset) 95px;
  text-align: left;
}

  .footer-main,
  .footer-bottom {
  justify-items: start;
}

  .footer-main .brand {
  width: 142.5px;
}

  .footer-links,
  .footer-social,
  .footer-bottom span:nth-child(2) {
  justify-self: start;
  text-align: left;
}

  .footer-links {
  justify-content: flex-start;
  gap: 16px;
}

  .hero-kanji {
  --isotipo-height: min(138px, 27.6cqh);
  transform: translate(-50%, -50%) scale(.925);
}

  .mobile-contact svg {
  width: 19px;
  height: 19px;
}

  .mobile-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  bottom: 14px;
  right: var(--content-inset);
  z-index: 38;
  background: var(--bg);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
  padding: 12px 19px;
  border: 1px solid var(--gris-secundario);
  box-shadow: 0 3px 20px #0005;
}

  .breadcrumbs {
  font-size: .8rem;
  margin-bottom: 22px;
}
}

@media (min-width:601px) {
  .mobile-contact {
  display: none;
}

}

@media (min-width:601px) and (max-width:820px) {
  .rail-home svg {
  height: 53.35px;
}
}

@media (prefers-reduced-motion:reduce) {
  html {
  scroll-behavior: auto;
}

  *,
  *:before,
  *:after {
  transition: none !important;
  animation: none !important;
}
}

/* Keep home service titles clear of the fixed header after anchor navigation. */
.home-service {
  scroll-margin-top: 80px;
}

/* Internal pages: one 200px gap, without adjacent section padding. */
main:not(:has(> .hero)) > :is(section,article):has(+ :is(section,article)) {
  padding-bottom: 0;
  margin-bottom: 0;
}

main:not(:has(> .hero)) > :is(section,article) + :is(section,article) {
  padding-top: 0;
  margin-top: 200px;
}

.teaser-body h3,
.project-row h2 {
  width: fit-content;
  max-width: 100%;
  transition: color .2s;
}

.teaser-body h3:hover,
.project-row h2:hover,
.teaser:focus-visible h3,
.project-row:focus-visible h2 {
  color: var(--secondary);
}

/* Portfolio controls and alternate layout. */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.portfolio-filters .button[aria-pressed="true"],
.portfolio-views .button[aria-pressed="true"] {
  background: var(--gris-secundario);
  color: var(--accent);
}
.portfolio-layout [hidden] { display: none !important; }

.portfolio-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}
.portfolio-filters { flex: 1; min-width: 0; }
.portfolio-views { display: flex; gap: 15px; margin-left: auto; }
.portfolio-views .button { padding-inline: 10px; flex-shrink: 0; }
.portfolio-layout[data-view="grid"] .portfolio-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.portfolio-layout[data-view="grid"] .project-row {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
}
.portfolio-layout[data-view="grid"] .project-row .card-media {
  order: -1;
}
.portfolio-layout[data-view="grid"] .project-row-info {
  flex: 1;
  padding: 25px;
  justify-content: flex-start;
}
.portfolio-layout[data-view="grid"] .project-row .eyebrow { margin-bottom: 0; }
.portfolio-layout[data-view="grid"] .project-row h2 { font-size: 1.65rem; margin-block: 15px; }
.portfolio-empty { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .page-intro:has(+ .portfolio-toolbar) { padding-bottom: 15px; }
  .portfolio-layout .project-nav, .portfolio-views { display: none; }
  .portfolio-toolbar { margin-bottom: 15px; }
  .portfolio-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; gap: 15px; scrollbar-width: none; }
  .portfolio-filters::-webkit-scrollbar { display: none; }
  .portfolio-filters .button { flex: 0 0 auto; white-space: nowrap; }
  .project-detail .gallery-thumbs, .project-detail .video-thumbs, .project-detail .project-gallery-divider { display: none; }
  .portfolio-layout[data-view] .portfolio-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; min-width: 0; }
  .portfolio-layout[data-view] .project-row { display: flex; flex-direction: column; min-width: 0; margin: 0; }
  .portfolio-layout[data-view] .project-row .card-media { order: -1; }
  .portfolio-layout[data-view] .project-row-info { min-height: 0; padding: 30px; display: flex; flex-direction: column; justify-content: flex-start; gap: 15px; }
  .portfolio-layout[data-view] .project-row-info > * { margin: 0; }
  .portfolio-layout[data-view] .project-row h2 { font-size: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.teaser, .project-row, .article-card):is(:hover, :focus-visible, :focus-within) .card-media img {
    transform: none;
  }
}

/* Project categories wrap as whole labels, with the number kept alongside. */
.project-row-info { min-width: 0; }
.project-label {
  display: flex;
  align-items: baseline;
  gap: .55em;
  line-height: 1.6;
}
.project-categories {
  display: flex;
  flex-wrap: wrap;
  gap: .25em .55em;
  min-width: 0;
}
.project-categories > span { white-space: nowrap; }
.project-categories > span:not(:last-child)::after {
  content: " ·";
  margin-left: .55em;
}

.project-actions {
  justify-content: flex-start;
  gap: 15px;
}

.project-actions .button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.project-actions .button:has(svg) {
  gap: 7px;
}

.article-card h2:hover,
.article-card:focus-visible h2 {
  color: var(--secondary);
}

.project-gallery-divider, .project-info-divider {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.project-services > span:not(.project-service-separator) {
  white-space: nowrap;
}

.project-service-separator {
  margin-inline: 1.5px;
}

@supports not selector(::-webkit-scrollbar) {
  .project-nav-scroll { scrollbar-width: thin; scrollbar-color: var(--gris-secundario) transparent; }
  @media (hover: hover) and (pointer: fine) {
    .project-nav-scroll { scrollbar-color: transparent transparent; }
    .project-nav:is(:hover, :focus-within) .project-nav-scroll { scrollbar-color: var(--gris-secundario) transparent; }
  }
}

.project-sticky > :is(.project-meta, .gallery-thumbs, .actions, hr) { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .project-nav-scroll::-webkit-scrollbar-thumb { background: transparent; }
  .project-nav:is(:hover, :focus-within) .project-nav-scroll::-webkit-scrollbar-thumb { background: var(--gris-secundario); }
}
.project-video { margin: 0; min-width: 0; }
.project-video video { display: block; width: 100%; background: var(--bg); object-fit: contain; border-radius: var(--radius); }
.project-video.landscape video { aspect-ratio: 16 / 9; }
.project-video.portrait video { aspect-ratio: 9 / 16; }
.project-video figcaption { padding-block: 15px; color: var(--muted); font-size: .875rem; }
.video-carousel { min-width: 0; }
.video-carousel-stage { position: relative; }
.video-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; padding-inline: calc((100% + 30px) / 6); gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.video-track > figure { scroll-snap-align: center; }
.video-track > figure:only-child { width: 100%; }
.video-prev, .video-next { position: absolute; top: 45%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; background: var(--bg); }
.video-prev { left: 10px; }
.video-next { right: 10px; }
.video-carousel button:disabled { opacity: .35; cursor: default; }
.video-thumbs { display: flex; gap: 15px; overflow-x: auto; margin-top: 15px; scrollbar-width: none; }
.video-thumbs button { flex: 0 0 60px; height: 80px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); cursor: pointer; }
.video-thumbs button[aria-current=true] { border-color: var(--accent); }
.video-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.vimeo-preview { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); cursor: pointer; }
.vimeo-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vimeo-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 56px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--accent); }
.vimeo-preview:hover .vimeo-play { color: var(--secondary); }
.vimeo-player { display: block; width: 100%; height: auto; border: 0; border-radius: var(--radius); }

.local-player { position: relative; background: var(--bg); border-radius: var(--radius); overflow: hidden; }
.local-video-controls { position: absolute; inset: auto 0 0; z-index: 1; display: flex; gap: 10px; padding: 10px; align-items: center; background: linear-gradient(transparent, #0e0e0ecc); }
.local-video-controls[hidden] { display: none; }
.local-video-controls .button { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
.local-video-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.local-video-controls [data-sound][aria-pressed="true"] { opacity: .5; }
.local-video-controls [data-fullscreen] { margin-left: auto; }
.local-video-status:empty { display: none; }
.local-video-status { display: block; padding: 0 10px 10px; font-size: .875rem; }
.local-player:fullscreen { display: flex; flex-direction: column; justify-content: center; }
.local-player:fullscreen video { flex: 1; min-height: 0; height: 100%; object-fit: contain; }

@media (max-width: 600px) {
  .project-categories { column-gap: .35em; }
  .project-categories > span:not(:last-child)::after { margin-left: .35em; }
  main > .project-detail { padding-bottom: 0; }
  main > .project-detail ~ section:has(.cta-band) { margin-top: 100px; padding-top: 0; }
  .button { height: calc(var(--nav-button-height) + 6px); padding-block: calc(var(--nav-padding-y) + 3px); }
  .local-video-controls .button, .video-prev, .video-next { height: 46px; padding-block: 3px; }
  .lightbox-arrow { width: calc(var(--nav-button-height) + 6px); height: calc(var(--nav-button-height) + 6px); flex-shrink: 0; padding: 0; }
}
.project-nav-scroll::-webkit-scrollbar-thumb { border-radius: 3px; }

.project-story > .article-body > :last-child { margin-bottom: 0; }

.portfolio-results > .project-row:not([hidden]):not(:has(~ .project-row:not([hidden]))) { margin-bottom: 0; }

@media (min-width: 821px) {
  .project-nav { display: flex; flex-direction: column; gap: 15px; height: calc(100dvh - var(--header-height) - 15px); }
  .project-nav-scroll { flex: 1; min-height: 0; max-height: none; }
  .project-nav > .button { flex-shrink: 0; width: 100%; margin: 0; }
}

@media (max-width: 600px) {
  main:has(> .home-cta) > section:not(.hero):not(.home-cta) {
    margin-top: 0;
    padding-top: 65px;
  }
  main:not(:has(> .hero)) > :is(section,article) + :is(section,article) {
    margin-top: 100px;
  }
}

@media (max-width: 600px) {
  main:has(> .home-cta) > section.home-cta { margin-top: 100px; }
}

/* Portrait images share the video story carousel without cropping. */
.story-image { display: block; width: 100%; padding: 0; border: 0; background: var(--bg); cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.story-image img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; }
.lightbox.portrait-lightbox { width: min(520px, 94vw); }
.lightbox.portrait-lightbox img { aspect-ratio: 9 / 16; max-height: 78dvh; }

.project-mobile-cover { display: none; }
@media (max-width: 600px) {
  .project-mobile-cover { display: block; width: 100%; }
  .project-mobile-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
  .local-video-controls [data-play] { font-variant-emoji: text; }
}

.project-services a:is(:hover, :focus-visible) { color: var(--secondary); }

.video-track::-webkit-scrollbar, .video-thumbs::-webkit-scrollbar { display: none; }

/* Dim neighboring stories without changing their image or video. */
.video-track > figure { position: relative; }
.video-track > figure::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); background: #000; opacity: .85; pointer-events: none; transition: opacity .2s; }
.video-track > figure.is-current::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .video-track > figure::after { transition: none; } }

/* Autoplay controls: reveal on hover, keyboard focus, touch or pause. */
.autoplay-player.controls-ready .local-video-controls { opacity: 0; pointer-events: none; transition: opacity .2s; }
.autoplay-player.controls-ready:is(:focus-within,.controls-visible,.is-paused) .local-video-controls { opacity: 1; pointer-events: auto; }
@media (hover: hover) { .autoplay-player.controls-ready:hover .local-video-controls { opacity: 1; pointer-events: auto; } }

/* A continuous website composition keeps its original edges together. */
.gallery-continuous { margin: 0; min-width: 0; }
.gallery-continuous button { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in; }
.gallery-continuous img { display: block; width: 100%; height: auto; transform: none; }
.gallery-continuous figcaption { padding-block: 15px; color: var(--muted); font-size: .875rem; }
.story-image img { aspect-ratio: auto; }

/* Keep the image and gallery controls visible when expanded. */
.lightbox.fullscreen-lightbox,
.lightbox.expanded-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  display: flex;
  flex-direction: column;
}
.lightbox.fullscreen-lightbox img,
.lightbox.expanded-lightbox img {
  flex: 1 1 0;
  min-height: 0;
  height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}
.lightbox.fullscreen-lightbox .lightbox-footer,
.lightbox.expanded-lightbox .lightbox-footer { flex: 0 0 auto; }

/* Preserve the page position and gutter while the expanded viewer is open. */
html:has(.lightbox[open]:is(.expanded-lightbox, .fullscreen-lightbox)),
body:has(.lightbox[open]:is(.expanded-lightbox, .fullscreen-lightbox)) {
  overflow: hidden;
  overscroll-behavior: none;
}

.story-caption { margin: 0; }
.project-meta > div { min-width: 0; }
.project-meta dd { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .project-meta { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .project-meta > div:first-child { grid-column: 1 / -1; }
}

/* One responsive spacing reference for all page introductions. */
.page-intro > *,
.page-intro .service-lead > div > * { margin-block: 0; }
.page-intro .service-lead > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--header-content-gap);
}
.project-story > .breadcrumbs + h1,
.project-story > h1 + .lead {
  margin-top: calc(var(--header-content-gap) - 15px);
}

.mobile-contact:is(:hover, :active, :focus-visible) { background: var(--gris-secundario); border-color: var(--gris-secundario); color: var(--accent); }
.video-carousel.single-story .video-track { padding-inline: 0; grid-auto-columns: 66.666%; }
.video-carousel.single-story .video-thumbs { justify-content: flex-start; }
.project-meta a { color: inherit; }
.project-meta a:is(:hover, :focus-visible) { color: var(--accent); }

/* Dim only project thumbnails, leaving the full gallery images untouched. */
:is(.gallery-thumbs, .video-thumbs) button { position: relative; }
:is(.gallery-thumbs, .video-thumbs) button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 50%);
  pointer-events: none;
}
:is(.gallery-thumbs, .video-thumbs) button:is(:hover, :focus-visible)::after {
  background: transparent;
}

/* Independent button typography; header changes must not resize page actions. */
.drawer-contact .button svg { width: 1.2rem; height: 1.2rem; }
.service-nav > .language-switch { padding-inline: .8rem; }
@media (max-width: 600px) {
  .button, .mobile-contact { font-size: .8rem; }
  .text-link, .button-secondary { font-size: .9rem; }
  .service-nav > a { font-size: .75rem; }
  .service-nav > .language-switch {
    position: absolute;
    left: 0;
    top: calc(-1 * (var(--mobile-menu-space) + var(--nav-button-height)));
    width: 42px;
    padding-inline: 0;
  }
  body[data-page="/"] .section-head .eyebrow,
  body[data-page="/"] .approach .eyebrow { color: var(--muted); }
}

/* Agreed introduction and editorial spacing, shared by both languages. */
.page-intro { padding-bottom: 50px; }
.page-intro:has(+ .portfolio-toolbar) { padding-bottom: 50px; }
.page-intro + .section { padding-top: 0; }
.article-intro { padding-bottom: var(--header-content-gap); }
.article-body > :first-child { margin-top: 0; }
.article-body figcaption { color: var(--muted); font-size: .875rem; }
.article-sidebar > .button { margin-top: 15px; }
.contact-links { justify-items: start; }
.contact-links > a { display: inline-flex; align-items: center; gap: 10px; }
.contact-links svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
@media (min-width: 761px) {
  .drawer-services { gap: 30px; }
}
main:not(:has(> .hero)) > section.page-intro:has(+ section) { padding-bottom: 0; }
main:not(:has(> .hero)) > section.page-intro + section.section { margin-top: 100px; padding-top: 0; }
main:not(:has(> .hero)) > section.article-intro + section.article-layout { margin-top: calc(var(--header-content-gap) + 50px); }

/* Article byline: rules and portfolio-style dot separators. */
.article-intro .article-meta { border-block: 1px solid var(--line); padding-block: 15px; gap: 10px; }
.article-intro .article-meta > * + *::before { content: "·"; margin-right: 10px; }
.article-featured { display: block; width: 100%; height: auto; margin: 0 0 30px; border-radius: var(--radius); }

.article-layout .article-body p { margin-top: 0; margin-bottom: 50px; }
.article-layout .article-body p:last-child { margin-bottom: 0; }

/* Footer details, drawer identity and desktop return link. */
.footer-main { gap: 40px; margin-bottom: 55px; }
.footer-links { gap: 29px; }
.footer-links > a + a::before { content: "·"; display: inline-block; margin-right: 29px; color: var(--muted); }
.footer-bottom { gap: 25px; padding-top: 25px; font-size: .875rem; }
.footer-social { justify-self: start; }
.footer-copyright { justify-self: end; }
.drawer-top { position: relative; justify-content: flex-end; }
.drawer-top .brand { position: absolute; left: 0; transform: none; justify-content: center; }
.drawer-top .brand svg { transform: none; }
.drawer-top .brand svg g { fill: var(--gris-secundario); }
.drawer-top .brand:is(:hover,:focus-visible,:active) svg g { fill: var(--secondary); }
.back-to-top { background-color: #0e0e0e; position: fixed; right: var(--content-inset); bottom: 25px; z-index: 30; width: 52px; padding: 0; }
.back-to-top svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .back-to-top { display: none; }
  .footer-links { gap: 21px; }
  .footer-links > a + a::before { margin-right: 21px; }
  .footer-copyright { justify-self: start; }
}

/* Equal footer separators and contact spacing. */
.footer-links, .footer-services { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.footer-services { justify-self: center; justify-content: center; }
.footer-links > a + a::before, .footer-services > a + a::before { content: "·"; display: inline-block; margin-inline: 5px; color: var(--muted); }
.footer-social { display: inline-flex; align-items: center; gap: 10px; }
.footer-social svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.contact-form h2 { font-size: 1.8rem; }
.contact-links { margin-top: 15px; }
.contact-aside > p:last-of-type { margin-bottom: 0; }
@media (max-width: 760px) {
 .drawer-services { gap: 20px; }
 .footer-services { justify-self: start; justify-content: flex-start; }
}

/* Service plans share the same two-level hierarchy in both languages. */
.plan ul.plan-features { list-style: disc; padding-inline-start: 1.25rem; margin: 25px 0 35px; }
.plan-features li { padding: 0 0 0 .3rem; margin-bottom: 20px; }
.plan-features li::marker { color: var(--secondary); }
.plan-feature-title { display: block; font-size: 1rem; }
.plan-feature-note { display: block; margin-top: 5px; color: var(--muted); font-size: .9rem; }

.plan .plan-price { color: var(--secondary); }
.plan-price small { font-size: .8rem; font-weight: 400; }
.featured-service-projects .section-head > div { display: grid; justify-items: start; }
.featured-service-projects .section-head :is(.eyebrow, h2) { padding-inline-start: 0; margin-inline-start: 0; }
.page-intro:has(+ .portfolio-toolbar) { padding-bottom: 100px; }
@media (min-width: 761px) {
  .section.contact-layout { padding-bottom: calc(2 * (var(--header-content-gap) + 1px) + var(--nav-button-height)); }
}

.process.express { column-gap: 30px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.process.express > div { border-top: 0; }
.project-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin-bottom: 22px; }
.project-checks label { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: var(--gris-secundario); border-radius: var(--radius); font-size: .875rem; cursor: pointer; }
.project-checks input { accent-color: var(--accent); flex: none; }
@media (max-width:600px) { .project-checks { grid-template-columns: 1fr; } }

/* Scoped feedback: original home spacing, express heading and plan prices. */
.web-express .section-head { margin-bottom: 20px; }
.plan h3:has(+ .plan-price) { margin-bottom: 0; }
.plan .plan-price { margin-block: 30px; transition: color .2s; }
.plan .plan-price + p { margin-top: 0; }
.plan .plan-price:hover { color: var(--accent); }
@media (min-width: 821px) {
  /* Let the results set the row height, even when a filter has few cards. */
  .project-nav-column { align-self: stretch; min-height: 0; contain: size; }
  .project-nav { max-height: 100%; }
}
@media (max-width: 600px) {
  .project-nav-column { display: none; }
  .web-express .section-head { margin-bottom: 14px; }
}

.home-service h2 a:is(:hover, :focus-visible) { color: var(--secondary); }
.project-actions .button-secondary svg { width: 16px; height: 16px; }
.back-to-top[hidden] { display: none; }
.back-to-top { transition: none; }