:root {
  color-scheme: dark;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --rose: #d6a4a4;
  --rose-strong: #b97e82;
  --olive: #6b705c;
  --olive-light: #9ba087;
  --amber: #e8b66d;
  --cyan: #75cfdd;
  --canvas: #07080c;
  --canvas-alt: #090a0f;
  --surface: #0f1117;
  --surface-raised: #14171e;
  --surface-soft: #11131a;
  --text: #f7f6f4;
  --text-secondary: #b6bac3;
  --text-muted: #8d929d;
  --text-faint: #737985;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --accent-soft: rgba(214, 164, 164, 0.12);
  --olive-soft: rgba(107, 112, 92, 0.17);
  --header-bg: rgba(7, 8, 12, 0.84);
  --input-bg: #090a0f;
  --button-text: #1a1113;
  --light-panel: #f5f1ed;
  --light-panel-text: #191817;
  --light-panel-muted: #625d58;
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.22);
  --shadow-raised: 0 34px 90px rgba(0, 0, 0, 0.34);
  --focus: #f1c7c7;
  --shell-max: 1288px;
  --page-gutter: 24px;
  --icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E");
  --header-height: 76px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-ui: 240ms;
  --duration-reveal: 560ms;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f3efe9;
  --canvas-alt: #ebe6df;
  --surface: #faf8f4;
  --surface-raised: #fffdf9;
  --surface-soft: #eee9e2;
  --text: #1c1b1d;
  --text-secondary: #4f4d50;
  --text-muted: #666268;
  --text-faint: #767178;
  --border: rgba(33, 29, 31, 0.13);
  --border-strong: rgba(33, 29, 31, 0.23);
  --accent-soft: rgba(185, 126, 130, 0.13);
  --olive-soft: rgba(107, 112, 92, 0.12);
  --header-bg: rgba(243, 239, 233, 0.88);
  --input-bg: #fffdf9;
  --button-text: #24191b;
  --light-panel: #eae3db;
  --light-panel-text: #191817;
  --light-panel-muted: #5e5955;
  --shadow-soft: 0 20px 60px rgba(58, 45, 39, 0.1);
  --shadow-raised: 0 34px 90px rgba(58, 45, 39, 0.14);
  --focus: #8e555c;
}

* { box-sizing: border-box; }
::selection { background: var(--rose); color: var(--button-text); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  transition: background-color var(--duration-ui) ease, color var(--duration-ui) ease;
}
/* Clip lateral overflow without creating another horizontal scroll container. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body.is-menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
figure, blockquote { margin: 0; }
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}
.shell > *, main, main section { min-width: 0; }
.service-grid > *, .featured-grid > *, .web-grid > *,
.tool-groups > *, .field-row > * { min-width: 0; }
.quote-form fieldset { min-inline-size: 0; }
.case-copy, .web-info, .tool-list, .quote-form { overflow-wrap: anywhere; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--canvas);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.page-noise {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.024;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section { padding: clamp(92px, 9vw, 140px) 0; }
.section-index,
.section-label,
.studio-eyebrow {
  display: block;
  margin: 0 0 18px;
  color: var(--rose-strong);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.section-index::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.45;
}
.section-head {
  margin-bottom: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: end;
  gap: clamp(36px, 6vw, 76px);
}
.section-head h2,
.studio h2,
.method h2,
.contact h2 {
  margin: 0;
  font: 600 clamp(2.45rem, 4.4vw, 4rem) / 1.02 var(--font-display);
  letter-spacing: -0.055em;
}
.section-head h2 em,
.studio h2 em,
.method h2 em,
.contact h2 em {
  color: var(--rose-strong);
  font-style: normal;
}
.section-head > p {
  max-width: 470px;
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
}
.mobile-swipe { display: none; }

/* Header */
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: calc(var(--header-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
  transition: height var(--duration-ui) ease, background-color var(--duration-ui) ease, border-color var(--duration-ui) ease;
}
.site-header.is-scrolled {
  height: calc(68px + env(safe-area-inset-top));
  border-color: var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
}
.nav-wrap { height: 100%; display: flex; align-items: center; gap: 30px; }
.brand { margin-right: auto; display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand img { width: 76px; height: auto; object-fit: contain; flex-shrink: 0; }
.brand > span { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font: 700 0.78rem var(--font-display); letter-spacing: 0.12em; }
.brand small { margin-top: 5px; color: var(--text-faint); font-size: 0.55rem; letter-spacing: 0.13em; }
.main-nav { display: flex; align-items: center; gap: 24px; }
.main-nav a {
  position: relative;
  padding: 8px 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  transition: color 240ms ease, transform 320ms var(--ease-out), text-shadow 320ms ease;
}
.main-nav a::before { content: ""; position: absolute; inset: -10px -14px; pointer-events: none; background: radial-gradient(ellipse, var(--accent-soft), transparent 70%); opacity: 0; transform: scale(0.65); transition: opacity 320ms ease, transform 400ms var(--ease-out); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--rose-strong), var(--olive));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-ui) var(--ease-out);
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.is-active { color: var(--text); }
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.main-nav a:focus-visible::before { opacity: 1; transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover { transform: translateY(-3px); color: var(--rose-strong); text-shadow: 0 0 22px color-mix(in srgb, var(--rose) 30%, transparent); }
  .main-nav a:hover::before { opacity: 1; transform: scale(1); }
}
.nav-controls { display: flex; align-items: center; gap: 9px; }
.theme-toggle,
.language-toggle,
.menu-toggle {
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.theme-toggle:hover,
.language-toggle:hover,
.menu-toggle:hover { background: var(--accent-soft); }
.theme-toggle:active,
.language-toggle:active,
.menu-toggle:active { transform: scale(0.96); }
.theme-toggle { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
.theme-toggle__sun,
.theme-toggle__moon {
  grid-area: 1 / 1;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  transition: opacity var(--duration-ui) ease, transform var(--duration-ui) var(--ease-out);
}
.theme-toggle__moon { opacity: 0; transform: rotate(-24deg) scale(0.72); }
html[data-theme="light"] .theme-toggle__sun { opacity: 0; transform: rotate(28deg) scale(0.72); }
html[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }
.language-toggle { height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 7px; color: var(--text-faint); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; }
.language-toggle i { width: 1px; height: 11px; background: var(--border); }
html[lang="en"] .language-toggle [data-lang-en],
html[lang="es"] .language-toggle [data-lang-es] { color: var(--rose-strong); }
.nav-cta {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: var(--rose-strong);
  font-size: 0.72rem;
  font-weight: 700;
  transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.nav-cta::after { transition: transform 240ms var(--ease-out); }
.nav-cta:hover::after, .nav-cta:focus-visible::after { transform: translate(3px, -3px); }
.menu-toggle { display: none; }

/* Hero */
.hero {
  position: relative;
  min-height: 820px;
  padding: calc(var(--header-height) + env(safe-area-inset-top)) 0 52px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - 620px), var(--border) 0, transparent calc(50% - 619px), transparent calc(50% + 619px), var(--border) 0, transparent calc(50% + 620px));
  opacity: 0.28;
}
.hero-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(150px); opacity: 0.1; }
.hero-glow--rose { top: -250px; left: -180px; background: var(--rose); }
.hero-glow--olive { right: -250px; bottom: -250px; background: var(--olive); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr); align-items: center; gap: clamp(42px, 6vw, 82px); }
.hero-copy { position: relative; z-index: 2; padding: 70px 0; }
.hero-kicker { margin: 0 0 17px; color: var(--rose-strong); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.17em; }
.hero h1 { max-width: 750px; margin: 0; font: 600 clamp(3.2rem, 5.1vw, 4.6rem) / 1.04 var(--font-display); letter-spacing: -0.055em; }
.hero h1 em { display: block; color: var(--rose); font-style: normal; }
html[data-theme="light"] .hero h1 em { color: var(--rose-strong); }
.hero-lead { max-width: 640px; margin: 28px 0 32px; color: var(--text-secondary); font-size: 1.08rem; line-height: 1.72; }
.hero-actions { display: flex; gap: 28px; }
.button {
  min-height: 50px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.79rem;
  font-weight: 700;
  transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.button:active { transform: translateY(0) scale(0.98); }
.button::after { transition: transform 260ms var(--ease-out); }
.button::after,
.nav-cta::after {
  content: "";
}
.button::after,
.nav-cta::after,
.external-arrow {
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--icon-arrow-up-right) center / contain no-repeat;
  mask: var(--icon-arrow-up-right) center / contain no-repeat;
}
.external-arrow { margin-left: 0.18em; vertical-align: -0.14em; }
.button:hover::after, .button:focus-visible::after { transform: translate(3px, -3px); }
.button--rose { border-color: var(--rose-strong); color: var(--rose-strong); }
.button--ghost { color: var(--text-secondary); }
.button:hover, .button:focus-visible { border-color: var(--rose-strong); color: var(--text); }
.hero-proof { margin-top: 49px; padding-top: 22px; display: flex; gap: 32px; border-top: 1px solid var(--border); }
.hero-proof span { display: flex; flex-direction: column; color: var(--text-faint); font-size: 0.69rem; }
.hero-proof strong { margin-bottom: 3px; color: var(--text); font: 600 0.8rem var(--font-display); }
.hero-person { position: relative; z-index: 1; }
.portrait-stage { position: relative; width: min(465px, 100%); height: 590px; margin-left: auto; }
.portrait-orbit { position: absolute; inset: 7% -5% 4% 4%; border: 1px solid color-mix(in srgb, var(--rose) 26%, transparent); border-radius: 48% 48% 16px 16px; transform: rotate(4deg); }
.portrait-orbit::after { content: ""; position: absolute; inset: 23px; border: 1px solid color-mix(in srgb, var(--olive-light) 28%, transparent); border-radius: inherit; }
.portrait-card { position: absolute; inset: 30px 20px 0 30px; border: 1px solid var(--border-strong); border-radius: 180px 180px 12px 12px; background: linear-gradient(145deg, var(--accent-soft), var(--olive-soft)); overflow: hidden; box-shadow: var(--shadow-raised); }
.portrait-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 61%, rgba(7, 8, 12, 0.88)); }
.portrait-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center 19%; filter: saturate(0.86) contrast(1.02); }
.portrait-caption { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: end; justify-content: space-between; }
.portrait-caption span { max-width: 175px; color: #c0c2c8; font-size: 0.61rem; letter-spacing: 0.12em; }
.portrait-caption strong { color: #fff; font: 600 1.1rem var(--font-display); }
.floating-note { position: absolute; z-index: 5; padding: 11px 14px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-raised) 88%, transparent); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); }
.floating-note span { color: var(--text-faint); font-size: 0.57rem; letter-spacing: 0.12em; }
.floating-note strong { margin-top: 3px; font: 600 0.75rem var(--font-display); }
.floating-note--one { left: -18px; top: 145px; }
.floating-note--two { right: -22px; bottom: 98px; }
.hero-ticker { position: absolute; bottom: 0; left: 0; width: 100%; min-height: 50px; padding: 15px var(--page-gutter); border-block: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 26%, transparent); }
.hero-ticker > div { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 28px; }
.hero-ticker span { color: var(--text-muted); font-size: 0.58rem; letter-spacing: 0.14em; }

/* Studio */
.studio { position: relative; overflow: hidden; background: var(--canvas-alt); color: var(--text); border-block: 1px solid var(--border); }
.studio .shell { position: relative; z-index: 1; }
.studio-heading { max-width: 760px; margin: 0 auto 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.studio-heading .section-label { width: 100%; display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.studio-heading .section-label > span:first-child { color: var(--rose-strong); }
.studio-code { margin-left: auto; color: var(--rose-strong); font-size: 1rem; }
.studio .studio-heading h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.04em; }
.studio-summary { max-width: 580px; margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }
.studio-disciplines { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-disciplines span { padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-secondary); font: 0.7rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.team { width: min(100%, 760px); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.team-member { position: relative; min-width: 0; display: grid; grid-template-rows: 320px 1fr; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.team-member__media { height: 320px; min-width: 0; overflow: hidden; background: #e8e1dc; }
.team-member__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(0.8); transition: transform 700ms var(--ease-out), filter 500ms ease; }
.team-member--relations .team-member__media img { object-position: center 48%; }
.team-member:hover .team-member__media img { transform: scale(1.018); filter: saturate(0.92); }
.team-member__body { padding: 24px; border-top: 2px solid var(--rose); display: flex; flex-direction: column; justify-content: flex-start; }
.team-member__index { color: var(--text-muted); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; }
.team-member__body h3 { margin: 24px 0 8px; font: 600 clamp(1.6rem, 3vw, 2.15rem) / 1.1 var(--font-display); letter-spacing: -0.045em; }
.team-member__body p { margin: 0; color: var(--text-secondary); font-size: 0.86rem; }
.team-member__body small { margin-top: 16px; color: var(--text-muted); font-size: 0.72rem; }
.team-member--relations .team-member__body { border-top-color: var(--olive); }

/* Capabilities */
.services { background: linear-gradient(180deg, var(--canvas-alt), var(--canvas)); }
.discipline-rail { margin-bottom: 15px; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--border); }
.discipline-rail span { padding: 14px 16px; border-right: 1px solid var(--border); color: var(--text-muted); font: 600 0.68rem var(--font-display); letter-spacing: 0.11em; text-transform: uppercase; }
.discipline-rail span:last-child { border-right: 0; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.service-card { --card-color: var(--rose); position: relative; min-height: 430px; padding: 30px; display: flex; flex-direction: column; border: 1px solid var(--border); border-top: 2px solid color-mix(in srgb, var(--card-color) 60%, transparent); border-radius: var(--radius-md); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 92%, transparent), color-mix(in srgb, var(--surface) 78%, transparent)); overflow: hidden; transition: transform 320ms var(--ease-out), border-color 320ms ease, box-shadow 320ms ease; }
.service-card::before { content: ""; position: absolute; width: 260px; height: 260px; right: -155px; top: -165px; border-radius: 50%; background: var(--card-color); filter: blur(76px); opacity: 0.09; }
.service-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--card-color) 34%, var(--border)); box-shadow: var(--shadow-soft); }
.service-card--olive { --card-color: var(--olive-light); }
.service-card--amber { --card-color: var(--amber); }
.service-card__top { display: flex; align-items: start; justify-content: space-between; }
.service-number { color: var(--text-faint); font-size: 0.7rem; }
.service-icon { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--card-color) 38%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--card-color) 8%, transparent); color: var(--card-color); font: 600 0.67rem var(--font-display); }
.service-card h3 { max-width: 310px; margin: auto 0 15px; font: 600 1.55rem / 1.14 var(--font-display); letter-spacing: -0.025em; }
.service-card p { margin: 0; color: var(--text-muted); font-size: 0.91rem; line-height: 1.68; }
.service-card ul { margin: 25px 0 0; padding: 0; display: flex; gap: 7px; flex-wrap: wrap; list-style: none; }
.service-card li { padding: 6px 9px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-faint); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.055em; }

/* Selected systems */
.featured { padding-top: clamp(108px, 10vw, 150px); }
.featured-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 13px; }
.case { grid-column: span 5; min-height: 640px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: transform 320ms var(--ease-out), border-color 320ms ease, box-shadow 320ms ease; }
.case--feature { grid-column: span 7; }
.case:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-soft); }
.case-top { min-height: 31px; display: flex; justify-content: space-between; color: var(--text-faint); font-size: 0.63rem; letter-spacing: 0.13em; }
.case-media { position: relative; height: 420px; border: 1px solid var(--border); border-radius: 8px; background: var(--canvas-alt); overflow: hidden; isolation: isolate; }
.case-media::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; box-shadow: inset 0 -110px 100px rgba(6, 7, 10, 0.28); }
.case-status { position: absolute; z-index: 6; left: 14px; bottom: 14px; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 5px; background: rgba(8, 9, 12, 0.78); color: #d2d4d9; font-size: 0.58rem; letter-spacing: 0.12em; backdrop-filter: blur(10px); }
.case-media--cartaya { background: radial-gradient(circle at 20% 15%, rgba(214, 164, 164, 0.13), transparent 38%), #0c0e13; }
.case-screen { position: absolute; z-index: 1; left: 5%; top: 10%; width: 89%; height: auto; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; box-shadow: 0 25px 55px rgba(0, 0, 0, 0.5); transition: transform 650ms var(--ease-out); }
.case-phone { position: absolute; z-index: 3; right: 4%; bottom: -26%; width: 21%; height: auto; border: 5px solid #11141a; border-radius: 17px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.55); transition: transform 650ms var(--ease-out); }
.case:hover .case-screen { transform: translateY(-5px) scale(1.01); }
.case:hover .case-phone { transform: translateY(-9px); }
.case-media--erp img { width: 104%; max-width: none; height: 100%; object-fit: cover; object-position: left top; filter: brightness(0.84) saturate(0.72); transition: transform 700ms var(--ease-out), filter 500ms ease; }
.case:hover .case-media--erp img { transform: scale(1.018); filter: brightness(0.93) saturate(0.82); }
.case-media--sing { background: #060817; }
.case-media--sing .case-screen { left: -12%; top: 9%; width: 124%; max-width: none; }
.case-media--sing .case-phone { bottom: -29%; width: 24%; }
.case-media--solar img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72) saturate(0.78); transition: transform 900ms var(--ease-out), filter 500ms ease; }
.case:hover .case-media--solar img { transform: scale(1.03); filter: brightness(0.8) saturate(0.9); }
.solar-hud { position: absolute; z-index: 5; right: 14px; top: 14px; width: 170px; padding: 13px; border: 1px solid rgba(232, 182, 109, 0.29); border-radius: 6px; background: rgba(8, 10, 11, 0.84); color: #fff; backdrop-filter: blur(12px); }
.solar-hud span, .solar-hud strong, .solar-hud small { display: block; }
.solar-hud span { color: var(--amber); font-size: 0.58rem; letter-spacing: 0.12em; }
.solar-hud strong { margin: 4px 0; font: 600 1.3rem var(--font-display); }
.solar-hud small { color: #aaaeb6; font-size: 0.6rem; }
.case-copy { min-height: 165px; padding: 25px 5px 5px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 18px; }
.case-copy h3 { margin: 0 0 8px; font: 600 1.55rem var(--font-display); letter-spacing: -0.025em; }
.case-copy p { max-width: 460px; margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.65; }
.case-copy a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; padding-block: 8px; border-bottom: 1px solid var(--border-strong); color: var(--text-secondary); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.case-copy a:hover { border-color: var(--rose); color: var(--rose-strong); }

/* Personal engineering lab */
.labs { border-top: 1px solid var(--border); background: radial-gradient(ellipse at 85% 20%, var(--olive-soft), transparent 55%), var(--canvas); }
.labs-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.labs-heading .section-label { margin: 0; }
.labs-status { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 0.7rem; }
.labs-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--olive-light); }
.labs-feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.labs-copy { min-width: 0; }
.labs-kicker { margin: 0 0 18px; color: var(--text-secondary); font: 600 0.8rem var(--font-display); letter-spacing: 0.17em; }
.labs-copy h2 { margin: 0 0 26px; font: 600 clamp(2.2rem, 4.2vw, 3.7rem) / 1.05 var(--font-display); letter-spacing: -0.055em; }
.labs-copy h2 em { color: var(--rose-strong); font-style: normal; }
.labs-copy > p:not(.labs-kicker) { color: var(--text-muted); font-size: 0.91rem; line-height: 1.75; }
.labs-copy > p.labs-intro { color: var(--text-secondary); font-size: 1rem; }
.labs-skills { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 20px; }
.labs-skills span { padding: 5px 9px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); font-size: 0.65rem; }
.labs-stack { margin-top: 19px; color: var(--text-faint); font-size: 0.7rem; }
.labs-stack span { margin-inline: 7px; }
.labs-preview { min-width: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-soft); }
.labs-preview-bar { display: flex; align-items: center; gap: 11px; padding: 13px 16px; color: var(--text-secondary); font: 500 0.66rem var(--font-display); letter-spacing: 0.04em; }
.labs-preview-bar > span:last-child { margin-left: auto; }
.labs-monogram { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--accent-soft); color: var(--rose-strong); font-weight: 700; }
.labs-preview-image { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: #fffdf5; }
.labs-preview-image img { width: 100%; height: 100%; object-fit: contain; }
.labs-preview-image:focus-visible { outline-offset: -3px; }
.labs-preview figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.65rem; }
.labs-experiments { margin-top: 38px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.labs-experiment { --experiment-accent: var(--amber); min-width: 0; display: flex; flex-direction: column; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--border); border-top: 2px solid var(--experiment-accent); border-radius: 8px; background: var(--surface); transition: border-color var(--duration-ui) ease, background-color var(--duration-ui) ease; }
.labs-experiment--power { --experiment-accent: var(--cyan); }
.labs-experiment-index { color: var(--text-muted); font: 600 0.62rem var(--font-display); letter-spacing: 0.12em; }
.labs-experiment h3 { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 10px; font: 600 1.6rem var(--font-display); letter-spacing: -0.04em; }
.labs-experiment h3 .external-arrow { color: var(--text-muted); font-size: 0.8rem; }
.labs-experiment p { margin: 0 0 24px; max-width: 46ch; color: var(--text-muted); font-size: 0.85rem; }
.labs-experiment-action { margin-top: auto; color: var(--text-secondary); font-size: 0.73rem; font-weight: 600; }
.labs-experiment:hover, .labs-experiment:focus-visible { border-color: var(--experiment-accent); background: var(--surface-raised); }
.labs-note { margin: 20px 0 0; color: var(--text-muted); font-size: 0.73rem; }
@media (max-width: 760px) {
  .labs-feature, .labs-experiments { grid-template-columns: minmax(0, 1fr); }
  .labs-preview { margin-top: 8px; }
  .labs-copy h2 { font-size: clamp(2.05rem, 9vw, 3rem); }
}

/* Web work */
.web-work { background: var(--canvas-alt); }
.section-head--compact { margin-bottom: 44px; }
.web-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.web-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; transition: transform 320ms var(--ease-out), border-color 320ms ease, box-shadow 320ms ease; }
.web-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--rose) 33%, var(--border)); box-shadow: var(--shadow-soft); }
.web-card--large, .web-card--wide { grid-column: span 2; }
.web-image { position: relative; height: 315px; background: var(--surface-soft); overflow: hidden; }
.web-card--large .web-image { height: 385px; }
.web-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(7, 8, 12, 0.56)); opacity: 0.4; }
.web-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
#coro-rd .web-image img { object-position: left center; }
.web-card:hover .web-image img { transform: scale(1.035); }
.web-image > span { position: absolute; z-index: 2; right: 14px; bottom: 14px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.19); border-radius: 5px; background: rgba(8, 9, 12, 0.78); color: #fff; font-size: 0.67rem; backdrop-filter: blur(10px); transition: transform var(--duration-ui) var(--ease-out); }
.web-card:hover .web-image > span { transform: translate(-2px, -2px); }
.web-info { min-height: 112px; padding: 20px; display: grid; grid-template-columns: 30px 1fr; align-items: start; }
.web-info b { color: var(--text-faint); font-size: 0.68rem; }
.web-info h3 { margin: 0; font: 600 1.2rem var(--font-display); }
.web-info p { grid-column: 2; margin: 5px 0 0; color: var(--text-muted); font-size: 0.76rem; }

/* Stack */
.tools { background: linear-gradient(180deg, var(--canvas), var(--canvas-alt)); }
.tool-groups { border-top: 1px solid var(--border); }
.tool-group { padding: 29px 6px; display: grid; grid-template-columns: 250px 1fr; gap: 42px; border-bottom: 1px solid var(--border); }
.tool-group-title { display: flex; align-items: center; gap: 19px; }
.tool-group-title span { color: var(--text-faint); font-size: 0.69rem; }
.tool-group-title h3 { margin: 0; font: 500 1.12rem var(--font-display); }
.tool-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-list span { padding: 8px 11px; border: 1px solid rgba(117, 207, 221, 0.2); border-radius: 6px; background: rgba(117, 207, 221, 0.045); color: var(--text-secondary); font-size: 0.75rem; }
.tool-list--rose span { border-color: rgba(214, 164, 164, 0.25); background: rgba(214, 164, 164, 0.05); }
.tool-list--amber span { border-color: rgba(232, 182, 109, 0.25); background: rgba(232, 182, 109, 0.05); }
.tool-list--olive span { border-color: rgba(155, 160, 135, 0.27); background: rgba(155, 160, 135, 0.06); }

/* Method */
.method { background: var(--olive); color: #fff; }
.method-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(55px, 8vw, 105px); align-items: start; }
.method .section-index { color: #f0d7d7; }
.method h2 em { color: #f4d9d9; }
.method header > p { max-width: 470px; margin: 25px 0 0; color: rgba(255, 255, 255, 0.75); }
.method-steps { position: relative; padding-left: 28px; }
.method-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.method-progress i { display: block; width: 100%; height: 0; background: #f2d6d6; transition: height 100ms linear; }
.method-steps article { padding: 27px 5px; display: grid; grid-template-columns: 48px minmax(0, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.18); transition: background-color var(--duration-ui) ease; }
.method-steps article:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.method-steps article:hover { background: rgba(255, 255, 255, 0.045); }
.method-steps article > span { color: rgba(255, 255, 255, 0.56); font-size: 0.7rem; }
.method-steps h3 { margin: 0; font: 500 1.3rem var(--font-display); }
.method-steps p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; }

/* Quiz */
.contact { background: radial-gradient(circle at 12% 42%, var(--accent-soft), transparent 29%), var(--canvas); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(50px, 7vw, 90px); }
.contact-copy > p { max-width: 510px; margin: 25px 0 29px; color: var(--text-muted); }
.contact-person { width: max-content; margin-bottom: 34px; padding: 8px 14px 8px 8px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 66%, transparent); }
.contact-person img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center 16%; }
.contact-person div { display: flex; flex-direction: column; }
.contact-person strong { font-size: 0.8rem; }
.contact-person span { color: var(--text-faint); font-size: 0.68rem; }
.contact-links { display: flex; gap: 36px; }
.contact-links a { padding: 5px 0; display: flex; flex-direction: column; }
.contact-links span { color: var(--text-faint); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; }
.contact-links b { margin-top: 4px; border-bottom: 1px solid transparent; font-size: 0.8rem; }
.contact-links a:hover b { border-color: var(--rose); }
.quote-form { padding: 30px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-raised); }
.form-head { padding-bottom: 19px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; border-bottom: 1px solid var(--border); font-size: 0.7rem; letter-spacing: 0.1em; }
.form-head span { color: var(--text-secondary); }
.form-head b { color: var(--text-faint); }
.quote-form fieldset { margin: 23px 0 20px; padding: 0; border: 0; }
.quote-form legend,
.quote-form > label,
.field-row label { display: block; color: var(--text-secondary); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.service-options { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.service-options label { position: relative; }
.service-options input { position: absolute; opacity: 0; }
.service-options span { min-height: 48px; padding: 0 12px; display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-muted); font-size: 0.8rem; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease; }
.service-options input:checked + span { border-color: color-mix(in srgb, var(--rose) 55%, transparent); background: var(--accent-soft); color: var(--text); box-shadow: inset 3px 0 var(--rose); }
.service-options input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.field-row { margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quote-form input,
.quote-form textarea { width: 100%; margin-top: 8px; padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 0; background: var(--input-bg); color: var(--text); font-size: 0.88rem; resize: vertical; transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.quote-form input { min-height: 48px; }
.quote-form textarea { min-height: 126px; }
.quote-form input:focus,
.quote-form textarea:focus { border-color: color-mix(in srgb, var(--rose) 58%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); }
.quote-form ::placeholder { color: var(--text-faint); opacity: 0.82; }
.form-submit { margin-top: 18px; display: flex; align-items: center; gap: 16px; }
.form-submit small { max-width: 230px; color: var(--text-faint); font-size: 0.72rem; line-height: 1.55; }

/* Footer */
.site-footer { padding: 38px 0; border-top: 1px solid var(--border); background: var(--canvas-alt); }
.site-footer .shell { display: flex; align-items: center; gap: 36px; }
.site-footer .brand { margin-right: 0; }
.site-footer p { margin: 0; color: var(--text-faint); font-size: 0.72rem; }
.site-footer nav { margin-left: auto; display: flex; gap: 20px; }
.site-footer nav a { padding: 8px 0; color: var(--text-secondary); font-size: 0.74rem; }
.site-footer nav a:hover { color: var(--rose-strong); }
.site-footer .shell > small { color: var(--text-faint); font-size: 0.68rem; }

/* Reveal system: content remains visible without JavaScript */
.motion-ready [data-reveal] { opacity: 0; transform: translateY(18px); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.motion-ready [data-reveal][data-delay="1"].is-visible { transition-delay: 90ms; }
.motion-ready [data-reveal][data-delay="2"].is-visible { transition-delay: 160ms; }

@media (max-width: 1120px) {
  :root { --shell-max: 1000px; --page-gutter: 20px; }
  .main-nav { gap: 17px; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { max-width: 830px; padding: 72px 0 35px; text-align: center; justify-self: center; }
  .hero-copy > * { margin-inline: auto; }
  .hero-actions, .hero-proof { justify-content: center; }
  .portrait-stage { margin: 0 auto 98px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 330px; }
  .featured-grid { grid-template-columns: 1fr 1fr; }
  .case, .case--feature { grid-column: span 1; }
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .method-grid, .contact-grid { grid-template-columns: 1fr; gap: 58px; }
  .site-footer .shell { flex-wrap: wrap; }
  .site-footer p { display: none; }
}

@media (max-width: 920px) {
  :root { --header-height: 66px; }
  .site-header, .site-header.is-scrolled { height: calc(var(--header-height) + env(safe-area-inset-top)); border-color: var(--border); background: var(--header-bg); backdrop-filter: blur(18px); }
  .nav-wrap { gap: 12px; }
  .nav-controls { margin-left: auto; }
  .nav-cta { display: none; }
  .menu-toggle { width: 40px; height: 40px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
  .menu-toggle span { width: 17px; height: 1px; background: var(--text-secondary); transition: transform var(--duration-ui) var(--ease-out); }
  .menu-toggle.is-open span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle.is-open span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .main-nav { position: fixed; z-index: 3; top: calc(var(--header-height) + env(safe-area-inset-top) + 9px); left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); padding: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-raised); opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none; transition: opacity var(--duration-ui) ease, transform var(--duration-ui) var(--ease-out), visibility 0s linear var(--duration-ui); }
  .main-nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .main-nav a { min-height: 48px; padding: 13px 12px; display: flex; align-items: center; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
  .main-nav a:last-child { border-bottom: 0; }
  .main-nav a::after { display: none; }
  .web-grid { grid-template-columns: 1fr 1fr; }
  .web-card--large, .web-card--wide { grid-column: span 1; }
}

@media (max-width: 760px) {
  :root { --page-gutter: 14px; }
  .section { padding: 82px 0; }
  .brand img { width: 68px; height: auto; }
  .brand strong { font-size: 0.7rem; }
  .brand small { font-size: 0.48rem; }
  .language-toggle { height: 40px; }
  .theme-toggle { width: 40px; height: 40px; }
  .hero { padding-top: calc(var(--header-height) + env(safe-area-inset-top)); padding-bottom: 82px; }
  .hero-copy { padding-top: 56px; }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 3.65rem); }
  .hero-lead { font-size: 1rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-proof { gap: 9px; display: grid; grid-template-columns: repeat(3, 1fr); text-align: left; }
  .hero-proof span { font-size: 0.64rem; }
  .hero-proof strong { font-size: 0.75rem; }
  .portrait-stage { width: 100%; height: 485px; margin-bottom: 44px; }
  .portrait-card { inset: 20px 12px 0; }
  .floating-note--one { left: -4px; }
  .floating-note--two { right: -4px; }
  .hero-ticker > div { gap: 7px 16px; }
  .section-head { margin-bottom: 39px; }
  .section-head h2, .studio h2, .method h2, .contact h2 { font-size: clamp(2.1rem, 9.2vw, 2.75rem); }
  .section-head > p, .method header > p, .contact-copy > p { font-size: 0.96rem; }
  .studio-heading { max-width: 380px; }
  .team { width: min(100%, 380px); grid-template-columns: 1fr; }
  .discipline-rail { grid-template-columns: 1fr 1fr; }
  .discipline-rail span:nth-child(2) { border-right: 0; }
  .discipline-rail span:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .service-card { min-height: 0; padding: 26px; }
  .service-card h3 { margin-top: 36px; font-size: 1.5rem; }
  .mobile-swipe { display: none; }
  .featured-grid, .web-grid { width: 100%; margin-inline: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .motion-ready [data-reveal], .motion-ready [data-reveal].is-visible { opacity: 1; transform: none; transition: none; }
  .case { min-width: 0; min-height: 0; flex: 0 0 min(88vw, 430px); scroll-snap-align: start; }
  .case-media { height: 310px; }
  .case-copy { min-height: 0; }
  .case-copy h3 { font-size: 1.55rem; }
  .case-copy p { font-size: 0.87rem; }
  .case-copy a { margin-top: 0; }
  .case-screen { left: 3%; width: 94%; }
  .case-phone { right: 3%; bottom: -15%; width: 31%; }
  .case-media--erp img { width: 120%; }
  .case-media--sing .case-screen { left: -33%; width: 165%; }
  .case-media--sing .case-phone { bottom: -20%; width: 32%; }
  .web-card, .web-card--large, .web-card--wide { min-width: 0; flex: 0 0 min(82vw, 390px); scroll-snap-align: start; }
  .web-image, .web-card--large .web-image { height: 285px; }
  .tool-group { grid-template-columns: 1fr; gap: 15px; }
  .tool-list span { font-size: 0.79rem; }
  .method-grid, .contact-grid { gap: 44px; }
  .contact-links { display: block; }
  .contact-links a { margin-top: 13px; }
  .quote-form { padding: 21px; }
  .service-options, .field-row { grid-template-columns: 1fr; }
  .form-submit { align-items: flex-start; flex-direction: column; }
  .site-footer .shell { display: grid; grid-template-columns: 1fr auto; gap: 22px; }
  .site-footer nav { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .site-footer .shell > small { text-align: right; }
}

@media (max-width: 430px) {
  :root { --page-gutter: 12px; }
  .nav-wrap { gap: 7px; }
  .brand { gap: 7px; }
  .brand img { width: 64px; }
  .brand > span { display: none; }
  .language-toggle { padding-inline: 8px; }
  .theme-toggle, .language-toggle, .menu-toggle { width: 38px; height: 38px; }
  .language-toggle { width: auto; }
  .hero-copy { padding-top: 44px; }
  .hero-proof { grid-template-columns: 1fr; gap: 10px; }
  .hero-proof span { padding: 3px 0; flex-direction: row; justify-content: space-between; }
  .portrait-stage { height: 415px; }
  .floating-note--two { display: none; }
  .portrait-caption { left: 17px; right: 17px; }
  .portrait-caption span { max-width: 135px; font-size: 0.52rem; }
  .portrait-caption strong { font-size: 0.95rem; }
  .team-member__body { padding: 25px; }
  .case { flex-basis: 90vw; }
  .web-card, .web-card--large, .web-card--wide { flex-basis: 86vw; }
  .case-media { height: 270px; }
  .case-copy { min-height: 0; }
  .solar-hud { width: 136px; }
  .site-footer .shell { display: flex; align-items: flex-start; flex-direction: column; }
  .site-footer .shell > small { text-align: left; }
}

@media (max-width: 350px) {
  .brand strong { font-size: 0.62rem; }
  .language-toggle { padding-inline: 6px; font-size: 0.58rem; }
  .portrait-stage { height: 380px; }
  .section-head h2, .studio h2, .method h2, .contact h2 { font-size: 1.95rem; }
}

@media (hover: none) {
  .case:hover, .service-card:hover, .web-card:hover,
  .case:hover .case-screen, .case:hover .case-phone,
  .case:hover .case-media--erp img, .case:hover .case-media--solar img,
  .web-card:hover .web-image img, .web-card:hover .web-image > span,
  .team-member:hover .team-member__media img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
  .main-nav a:hover, .main-nav a::before, .button::after, .nav-cta::after { transform: none !important; }
}