:root {
  --sw-bg: #061b22;
  --sw-ink: #ffffff;
  --sw-ink-soft: #c6e7ec;
  --sw-accent: #ef7d38;
  --sw-font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --sw-font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --cyan: #7defff;
  --metis: #009bbc;
  --deep: #007087;
  --orange: #ef7d38;
  --graphite: #333333;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #07191f; color: #effbfd; font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; }

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

#world { min-height: 100vh; }
.sw-root { --sw-bg: #061b22; --sw-ink: #fff; --sw-ink-soft: #c6e7ec; }
.sw-sky { background: #061b22; }
.sw-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(2, 18, 24, .92) 0%, rgba(2, 18, 24, .54) 35%, rgba(2, 18, 24, .08) 66%, rgba(2, 18, 24, .2) 100%), linear-gradient(0deg, rgba(0, 10, 15, .28), transparent 45%);
}
.sw-copylayer::before { display: none; }
.sw-copy { top: 28%; width: min(46vw, 640px); }
.sw-copy__num, .sw-route { display: none; }
.sw-copy__eyebrow { color: var(--cyan); font-size: .78rem; letter-spacing: .2em; }
.sw-copy__title { max-width: 12ch; font-weight: 600; font-size: clamp(3rem, 6.2vw, 6.7rem); letter-spacing: -.055em; line-height: .92; }
.sw-copy__body { max-width: 53ch; color: #d3ebef; font-size: clamp(1rem, 1.35vw, 1.22rem); }
.sw-copy__tags li { color: #d9faff; border-color: rgba(125, 239, 255, .24); background: rgba(0, 155, 188, .16); backdrop-filter: blur(12px); }
.sw-btn { border-radius: 3px; }
.sw-btn--primary { color: #07191f; background: var(--orange); }
.sw-btn--ghost { color: #075563; background: var(--cyan); border-color: var(--cyan); }
.sw-topbar { mix-blend-mode: normal; z-index: 300; }
.sw-topbar.is-over-content .sw-brand__name { color: #075563; }
.sw-brand__mark { display: none; }
.sw-brand__logo { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; }
.sw-brand__name, .metis-word { font-family: "Rubik Maze", system-ui, sans-serif; font-weight: 400; letter-spacing: .02em; }
.sw-brand__name { font-size: 1.45rem; }
.sw-topcta { color: #07191f; background: var(--orange); border: 1px solid var(--orange); border-radius: 3px; }
.sw-hint { color: #cae9ed; }
.sw-hint i { border-color: rgba(255, 255, 255, .5); }
.sw-scrollbar { background: rgba(125, 239, 255, .12); }
.sw-particles .sw-pt { --sw-bubble: #009bbc; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sw-bubble) 45%, transparent)); }
.sw-particles .sw-pt--dot::before { background: radial-gradient(circle at 34% 30%, #baf8ff 0%, var(--sw-bubble) 32%, color-mix(in srgb, var(--sw-bubble) 28%, transparent) 70%); }
.sw-particles .sw-pt--ring::before { border-color: color-mix(in srgb, var(--sw-bubble) 74%, transparent); }
.sw-particles .sw-pt:nth-child(6n + 2),
.sw-particles .sw-pt:nth-child(9n + 5) { --sw-bubble: #ef7d38; }

.content-section {
  position: relative;
  z-index: 200;
  padding: clamp(88px, 11vw, 168px) clamp(22px, 6vw, 96px);
}
.services { background: #f7fbfc; color: #0a252d; }
.section-heading { display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, 1.45fr); gap: 28px 7vw; align-items: end; max-width: 1320px; margin: 0 auto 70px; }
.section-heading .kicker { grid-column: 1; align-self: start; }
.section-heading h2 { grid-column: 2; margin: 0; max-width: 14ch; font-size: clamp(2.5rem, 5vw, 5.4rem); font-weight: 560; line-height: .98; letter-spacing: -.055em; }
.section-heading > p:last-child { grid-column: 2; max-width: 60ch; margin: 2px 0 0; color: #44636a; font-size: 1.08rem; line-height: 1.65; }
.kicker { margin: 0; color: var(--deep); font-size: .78rem; font-weight: 760; letter-spacing: .17em; text-transform: uppercase; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1320px; margin: 0 auto; border-top: 1px solid #bcd6db; }
.service-card { min-height: 320px; padding: 30px 30px 36px; border-right: 1px solid #bcd6db; }
.service-card:first-child { border-left: 1px solid #bcd6db; }
.service-index { color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.service-card h3 { min-height: 3.1em; margin: 70px 0 20px; font-size: 1.4rem; line-height: 1.08; letter-spacing: -.025em; }
.service-card p { margin: 0; color: #506c73; line-height: 1.62; }

.method { background: #07242d; color: #eafcff; }
.method .section-heading { grid-template-columns: .8fr 1.45fr; }
.method .kicker { color: var(--cyan); }
.method-list { list-style: none; max-width: 1320px; margin: 0 auto; padding: 0; border-top: 1px solid rgba(125, 239, 255, .25); }
.method-list li { display: grid; grid-template-columns: 80px minmax(220px, .7fr) 1fr; gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid rgba(125, 239, 255, .18); }
.method-list li::before { content: counter(list-item, decimal-leading-zero); color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.method-list strong { font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 560; letter-spacing: -.025em; }
.method-list span { color: #a9cdd4; font-size: 1rem; }

.experience { background: #dffbff; color: #06242d; overflow: hidden; }
.experience::before { content: "M"; position: absolute; right: -4vw; top: -13vw; color: rgba(0, 155, 188, .075); font-family: "Rubik Maze", system-ui, sans-serif; font-size: clamp(280px, 48vw, 740px); line-height: 1; pointer-events: none; }
.experience-intro { position: relative; display: grid; grid-template-columns: .72fr 1.25fr; gap: 34px 8vw; max-width: 1320px; margin: 0 auto 100px; }
.experience-intro .kicker { grid-column: 1; }
.experience-intro h2 { grid-column: 2; margin: 0; max-width: 13ch; font-size: clamp(2.8rem, 6.3vw, 6.6rem); font-weight: 560; line-height: .91; letter-spacing: -.06em; }
.experience-intro h2 span { display: block; color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7em; letter-spacing: -.05em; }
.experience-copy { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.experience-copy p { margin: 0; color: #385d66; font-size: 1.05rem; line-height: 1.68; }
.experience-copy p:first-child { color: #0b333c; font-size: 1.27rem; line-height: 1.52; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1320px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid rgba(0, 112, 135, .34); }
.timeline li { position: relative; display: flex; flex-direction: column; padding: 35px 32px 0 0; }
.timeline li::before { content: ""; position: absolute; width: 11px; height: 11px; top: -6px; left: 0; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px #dffbff; }
.timeline time { color: var(--deep); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; }
.timeline strong { margin-top: 45px; font-size: 1.35rem; }
.timeline span { max-width: 32ch; margin-top: 10px; color: #496b72; line-height: 1.55; }

.projects { background: #f7fbfc; color: #0a252d; }
.projects-heading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 22px 7vw; align-items: start; max-width: 1320px; margin: 0 auto 72px; }
.projects-heading .kicker { grid-row: 1 / 3; }
.projects-heading h2 { margin: 0; max-width: 16ch; font-size: clamp(2.7rem, 5.5vw, 5.8rem); font-weight: 560; line-height: .95; letter-spacing: -.058em; }
.projects-heading > p:last-child { max-width: 55ch; margin: 0; color: #4d6b72; font-size: 1.08rem; line-height: 1.62; }
.project-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; max-width: 1320px; margin: 0 auto; }
.project-card { min-height: 460px; display: flex; flex-direction: column; padding: 34px; color: #fff; text-decoration: none; overflow: hidden; border-radius: 2px; transition: transform .25s ease; }
a.project-card:hover { transform: translateY(-6px); }
.project-card--bly { background: radial-gradient(circle at 90% 10%, rgba(239, 125, 56, .9), transparent 32%), linear-gradient(145deg, #122a38, #004b63); }
.project-card--garage { background: radial-gradient(circle at 20% 85%, rgba(125, 239, 255, .46), transparent 34%), linear-gradient(145deg, #042e38, #0083a0); }
.project-card--next { background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px), #18252a; }
.project-status { align-self: flex-start; padding: 7px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; }
.project-card h3 { margin: auto 0 0; font-size: clamp(2.1rem, 3.4vw, 4rem); font-weight: 600; line-height: .95; letter-spacing: -.055em; }
.project-card p { max-width: 38ch; margin: 22px 0 30px; color: rgba(255,255,255,.78); line-height: 1.58; }
.project-link { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.25); font-size: .88rem; font-weight: 700; }
.project-link i { font-style: normal; }

.contact { position: relative; z-index: 200; display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; align-items: start; padding: clamp(100px, 12vw, 180px) clamp(22px, 8vw, 140px); background: var(--orange); color: #10262c; }
.contact .kicker { color: #453022; }
.contact h2 { margin: 22px 0; max-width: 8ch; font-size: clamp(3.2rem, 7vw, 7.8rem); font-weight: 600; line-height: .9; letter-spacing: -.065em; }
.contact-copy > p:not(.kicker) { max-width: 48ch; margin: 0; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; }
.contact-form { display: grid; gap: 22px; padding-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: grid; gap: 8px; color: #3b2c23; font-size: .76rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(16, 38, 44, .46); border-radius: 0; outline: 0; padding: 11px 2px; background: transparent; color: #10262c; font: inherit; font-size: 1.05rem; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: #10262c; box-shadow: 0 2px 0 #10262c; }
.contact-form button { justify-self: start; display: inline-flex; gap: 22px; align-items: center; border: 0; padding: 16px 22px; background: #0a252d; color: #fff; border-radius: 3px; font: inherit; font-weight: 700; cursor: pointer; }
.form-note { margin: -8px 0 0; color: rgba(16, 38, 44, .7); font-size: .78rem; line-height: 1.4; }

footer { position: relative; z-index: 200; display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px 9vw; padding: clamp(70px, 9vw, 120px) clamp(22px, 6vw, 96px) 34px; background: #041318; color: #b9d9df; }
footer a { color: #fff; text-decoration: none; }
.footer-brand > a { display: flex; align-items: center; gap: 15px; }
.footer-brand img { width: 54px; height: 54px; border-radius: 4px; }
.footer-brand .metis-word { color: #fff; font-size: 2.1rem; }
.footer-brand p { max-width: 28ch; margin: 28px 0 0; color: #86aeb7; line-height: 1.55; }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.footer-nav div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-nav strong { margin-bottom: 8px; color: var(--cyan); font-size: .73rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-nav a, .footer-nav span { color: #c0dade; font-size: .92rem; line-height: 1.45; }
.footer-nav a:hover { color: #fff; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 30px; border-top: 1px solid rgba(125, 239, 255, .13); color: #7299a2; font-size: .78rem; }
.footer-bottom a { color: #95bac2; }

@media (max-width: 980px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:nth-child(3) { border-left: 1px solid #bcd6db; }
  .service-card { border-bottom: 1px solid #bcd6db; }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .project-card--next { grid-column: 1 / -1; min-height: 340px; }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .sw-scene::after { background: linear-gradient(0deg, rgba(2, 18, 24, .96) 0%, rgba(2, 18, 24, .72) 30%, rgba(2, 18, 24, .05) 63%, rgba(2, 18, 24, .18) 100%); }
  .sw-copy { top: auto; bottom: calc(clamp(84px, 15dvh, 135px) + env(safe-area-inset-bottom)); }
  .sw-copy__title { max-width: 11ch; font-size: clamp(2.65rem, 12.4vw, 4.6rem); }
  .sw-copy__body { max-width: 37ch; color: #e2f5f8; }
  .sw-copy__tags { display: none; }
  .sw-copy__cta { margin-top: 20px; }
  .sw-hint { left: auto; right: 20px; transform: none; align-items: flex-end; }
  .sw-hint span { display: none; }
  .section-heading, .method .section-heading { grid-template-columns: 1fr; }
  .section-heading .kicker, .section-heading h2, .section-heading > p:last-child { grid-column: 1; }
  .section-heading h2 { max-width: 12ch; }
  .experience-intro, .projects-heading { grid-template-columns: 1fr; }
  .experience-intro .kicker, .experience-intro h2, .experience-copy, .projects-heading .kicker, .projects-heading h2, .projects-heading > p:last-child { grid-column: 1; grid-row: auto; }
  .experience-copy { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid rgba(0, 112, 135, .34); }
  .timeline li { padding: 0 0 48px 30px; }
  .timeline li::before { top: 2px; left: -6px; }
  .timeline strong { margin-top: 18px; }
  footer { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .footer-bottom { grid-column: 1; }
}

@media (max-width: 620px) {
  .sw-topcta { padding: 9px 14px; }
  .sw-copy__body { font-size: 1rem; line-height: 1.48; }
  .sw-btn { padding: 13px 16px; font-size: .88rem; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card, .service-card:first-child, .service-card:nth-child(3) { min-height: auto; padding: 26px 22px 34px; border-left: 0; border-right: 0; }
  .service-card h3 { min-height: 0; margin: 42px 0 16px; }
  .method-list li { grid-template-columns: 52px 1fr; gap: 12px; }
  .method-list span { grid-column: 2; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card, .project-card--next { grid-column: auto; min-height: 390px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

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

.section-nav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 310; display: flex; flex-direction: column; gap: 5px; padding: 12px 10px; border: 1px solid rgba(125,239,255,.22); border-radius: 12px; background: rgba(6,27,34,.86); backdrop-filter: blur(14px); }
.section-nav a { display: flex; align-items: center; justify-content: flex-end; gap: 11px; min-height: 32px; color: #c6e7ec; font-size: .76rem; text-decoration: none; padding: 4px 5px; border-radius: 4px; }
.section-nav a span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; }
.section-nav a[aria-current], .section-nav a:hover { color: var(--cyan); }
.section-nav a[aria-current] span { opacity: 1; box-shadow: 0 0 0 3px rgba(125,239,255,.15); }
.section-nav a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.section-nav.on-content { background: rgba(247,251,252,.96); border-color: #bcd6db; }
.section-nav.on-content a { color: #075563; }
.section-nav.on-content a[aria-current], .section-nav.on-content a:hover { color: #007087; font-weight: 700; }
@media (min-width: 861px) { .content-section, .contact, footer { padding-right: max(170px, 12vw); } }
@media (max-width: 860px) {
  .section-nav { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; transform: none; flex-direction: row; justify-content: space-between; gap: 0; padding: 8px 5px; }
  .section-nav a { justify-content: center; font-size: .66rem; padding: 6px 4px; }
  .section-nav a span { display: none; }
  footer { padding-bottom: 88px; }
}

/* Frosted orange section navigation, shared by desktop and mobile. */
.section-nav, .section-nav.on-content { right: 0; background: #ef7d38; border-color: rgba(255,255,255,.3); border-right: 0; border-radius: 12px 0 0 12px; backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); box-shadow: 0 8px 32px rgba(7,25,31,.12), inset 0 1px 0 rgba(255,255,255,.24); }
.section-nav a, .section-nav.on-content a { color: #075563; }
.section-nav a[aria-current], .section-nav.on-content a[aria-current], .section-nav a:hover, .section-nav.on-content a:hover { color: #075563; font-weight: 700; background: rgba(255,255,255,.25); text-shadow: 0 0 10px rgba(255,255,255,.85); }
.section-nav a[aria-current] span { box-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 0 3px rgba(255,255,255,.28); }
@media (max-width: 860px) {
  .sw-copy { left: 20px; right: 20px; width: auto; max-width: none; }
  .sw-copy__title, .sw-copy__body { max-width: none; width: 100%; }
  .sw-topbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; }
  .sw-topbar.is-over-content { background: rgba(255,255,255,.78); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); border-bottom: 1px solid rgba(255,255,255,.4); }
  .sw-topbar .sw-brand__name { color: #fff; }
  .sw-topbar.is-over-content .sw-brand__name { color: #075563; }
  .section-nav, .section-nav.on-content { left: 12px; right: 12px; border-right: 1px solid rgba(255,255,255,.3); border-radius: 12px; }
}

.section-nav, .section-nav.on-content { padding: 0; gap: 0; overflow: hidden; }
.section-nav a, .section-nav.on-content a { color: #fff; padding: 12px 15px; min-height: 38px; border-radius: 0; width: 100%; }
.section-nav a[aria-current], .section-nav.on-content a[aria-current], .section-nav a:hover, .section-nav.on-content a:hover { color: #555; background: rgba(255,255,255,.88); text-shadow: none; }
.project-card--bly { padding: 0; background: #073449; }
.project-card__image { width: 100%; height: auto; flex: none; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.project-card__copy { display: flex; flex: 1; flex-direction: column; padding: 28px; }
.project-card__copy h3 { margin: 24px 0 0; }
.project-card__copy p { margin-top: 18px; }
.project-card__copy .project-link { margin-top: auto; }
@media (max-width: 860px) {
 .section-nav, .section-nav.on-content { align-items: stretch; }
 .section-nav a, .section-nav.on-content a { padding: 14px 5px; min-height: 48px; width: auto; flex: 1; }
}

@media (min-width: 621px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-card--next { grid-column: auto; } }

.project-card--bly .project-card__copy { background: #f4f9fb; color: #073449; }
.project-card--bly p { color: #496b72; }
.project-card--bly .project-status, .project-card--bly .project-link { border-color: #bcd6db; }
.project-logo { display: block; width: min(180px, 65%); height: auto; }

.project-card--pro { padding: 0; background: #fff7ee; color: #073449; }
.project-card--pro .project-card__copy { background: #fff7ee; }
.project-card--pro p { color: #496b72; }
.project-card--pro .project-status, .project-card--pro .project-link { border-color: #ead1b8; }
.project-card--pro h3 { display: flex; align-items: center; gap: 14px; }
.project-pro-label { font-size: .85rem; color: #995400; letter-spacing: .1em; border: 1px solid #eac69f; border-radius: 4px; padding: 6px 9px; }

.project-card--garage { padding: 0; background: #f0f8fa; color: #073449; }
.project-card--garage .project-card__copy { background: #f0f8fa; }
.project-card--garage p { color: #496b72; }
.project-card--garage .project-status, .project-card--garage .project-link { border-color: #bcd6db; }
.project-logo--garage { width: min(270px, 90%); }

/* Compact clickable product cards. */
a.project-card { border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease; }
a.project-card:hover, a.project-card:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(7,52,73,.22); }
a.project-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.project-card__visual { position: relative; }
.project-card__visual .project-status { position: absolute; right: 16px; top: 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); color: #073449; border-color: rgba(255,255,255,.5); }
.project-card__copy { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: center; gap: 24px; padding: 26px; }
.project-card__copy h3, .project-card--pro h3 { margin: 0; display: block; }
.project-card__copy p, .project-card--bly p, .project-card--pro p, .project-card--garage p { margin: 0; color: #123b49; font-size: .95rem; line-height: 1.55; }
.project-logo, .project-logo--garage { width: 100%; max-width: 220px; height: auto; }
.project-card--bly .project-card__copy, .project-card--garage .project-card__copy { background: #d9eff5; }
.project-card--pro .project-card__copy { background: #ffe1bd; }
@media (max-width: 620px) { .project-card__copy { gap: 18px; padding: 22px; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); } .project-card__copy p { font-size: .84rem; } }
@media (prefers-reduced-motion: reduce) { a.project-card { transition: none; } }

/* Independent app downloads inside the linked BLY72 card. */
article.project-card--bly { position: relative; border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease; }
article.project-card--bly:hover, article.project-card--bly:focus-within { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(7,52,73,.22); }
.project-card__main-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.project-card__main-link:focus-visible { outline: none; }
.project-card__main-link:focus-visible::after { outline: 3px solid var(--orange); outline-offset: 4px; }
.project-downloads { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.project-downloads a { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid #075563; border-radius: 8px; color: #fff; background: #075563; font-size: .85rem; font-weight: 600; text-decoration: none; }
.project-downloads a:hover { background: #073449; }
.project-downloads a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { article.project-card--bly { transition: none; } }

/* Stable navigation dimensions and gray active sections. */
.section-nav a, .section-nav.on-content a { font-weight: 600; }
.section-nav a[aria-current], .section-nav.on-content a[aria-current], .section-nav a:hover, .section-nav.on-content a:hover { background: #61666b; color: #fff; font-weight: 600; text-shadow: none; }
@media (min-width: 861px) { .section-nav, .section-nav.on-content { width: 132px; } }
.experience-intro h2 { max-width: none; }
.experience-intro h2 .experience-title__lead { font-size: .7em; white-space: nowrap; }
.experience-intro h2 .experience-title__closing { margin-top: 0; font-family: inherit; font-size: .68em; letter-spacing: -.06em; color: inherit; }
.projects-heading h2 { max-width: none; }

.experience-intro h2 .experience-title__lead + .experience-title__lead { color: inherit; }

/* Scroll-driven chronology, horizontal on desktop and vertical on mobile. */
.timeline { --timeline-progress: 0; border-top: 0; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 0; top: 0; width: 66.6667%; height: 3px; background: rgba(0,112,135,.22); }
.timeline::after { background: var(--orange); transform: scaleX(var(--timeline-progress)); transform-origin: left; }
.timeline li::before { background: #a4cbd1; z-index: 1; top: -4px; transition: background .2s ease; }
.timeline li.is-reached::before { background: var(--orange); }
.timeline li.is-reached time { color: #a94712; }
@media (max-width: 860px) {
  .timeline { border-left: 0; }
  .timeline::before, .timeline::after { width: 3px; height: var(--timeline-length, 100%); }
  .timeline::after { transform: scaleY(var(--timeline-progress)); transform-origin: top; }
  .timeline li::before { left: -4px; top: 2px; }
}

.project-card--next { padding: 0; background: #e8eaec; border-radius: 16px; color: #26343a; transition: transform .25s ease, box-shadow .25s ease; }
.project-card--next .project-card__copy { background: #e8eaec; }
.project-card--next:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(7,52,73,.22); }
.project-card__copy .next-project-logo { display: flex; align-items: center; gap: 10px; font-size: clamp(1.1rem, 1.8vw, 1.65rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; }
.next-project-logo__mark { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; height: 36px; background: #52616b; color: white; border-radius: 9px; font-size: 28px; }
.next-project-logo__loading { display: block; margin-top: 6px; font-family: ui-monospace, monospace; font-size: .58em; font-weight: 500; letter-spacing: .08em; color: #52616b; }
@media (prefers-reduced-motion: reduce) { .project-card--next { transition: none; } }

.contact-form .privacy-check { display: flex; align-items: flex-start; gap: 12px; font-size: .85rem; text-transform: none; letter-spacing: normal; line-height: 1.5; }
.contact-form .privacy-check input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: #075563; }
.privacy-check a { color: inherit; text-decoration: underline; }
footer .legal-links { display: flex; gap: 24px; flex-wrap: wrap; grid-column: 1 / -1; }
footer .legal-links a { color: #fff; font-size: .85rem; }

.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button:disabled { opacity: .6; cursor: wait; }

/* Compact footer with certification and a dedicated legal column. */
footer { grid-template-columns: minmax(240px,.8fr) minmax(0,1.8fr); gap: 24px 4vw; padding-top: 36px; padding-bottom: 22px; }
.footer-brand p { margin-top: 12px; }
.footer-brand > .lovable-badge { position: relative; display: block; width: min(100%, 340px); margin-top: 16px; }
.footer-brand .lovable-badge img { width: 100%; height: auto; border-radius: 0; display: block; }
.lovable-badge__white { filter: brightness(0) invert(1); }
.footer-brand .lovable-badge .lovable-badge__color { position: absolute; inset: 0; clip-path: inset(0 85% 0 0); }
.footer-nav { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.footer-nav div { gap: 7px; }
.footer-nav strong { margin-bottom: 4px; }
.footer-nav a, .footer-nav span { font-size: .82rem; }
.footer-bottom { padding-top: 16px; }
@media (max-width: 1100px) { footer { grid-template-columns: 1fr; } }
@media (max-width: 860px) { footer { padding-top: 28px; padding-bottom: 84px; gap: 22px; } .footer-nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } }

/* Shared brand header on legal documents. */
.legal-header { position: sticky; top: 0; z-index: 300; display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(20px,5vw,64px); background: rgba(255,255,255,.85); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-bottom: 1px solid #d9e8ec; }
.legal-brand { display: flex; align-items: center; gap: 12px; color: #075563; text-decoration: none; }
.legal-brand img { width: 44px; height: 44px; }
.legal-brand .metis-word { color: #075563; font-size: 1.65rem; }
.legal-contact { display: inline-flex; padding: 12px 22px; color: #073449; background: #ef7d38; font-weight: 700; text-decoration: none; border-radius: 3px; }
.legal-contact:hover { background: #f59051; }
.legal-header a:focus-visible { outline: 3px solid #075563; outline-offset: 4px; }
.legal-body .legal-page { padding-top: 38px; }
@media (max-width: 620px) { .legal-header { padding: 12px 20px; } .legal-brand img { width: 38px; height: 38px; } .legal-brand .metis-word { font-size: 1.4rem; } .legal-contact { padding: 10px 17px; font-size: .88rem; } }

/* Editorial service section. */
.services-editorial { max-width: 1180px; margin: 0 auto; }
.services-overline { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #9fb7bd; margin-bottom: 42px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.services-editorial h2 { margin: 0; font-size: clamp(3.3rem, 7.8vw, 7.6rem); line-height: .94; letter-spacing: -.065em; font-weight: 750; }
.services-editorial h2 em { font-family: Georgia, serif; font-weight: 400; color: var(--orange); }
.services-deck { margin: 28px 0 46px; color: #496870; font-size: 1.05rem; line-height: 1.65; }
.services-rows article { display: grid; grid-template-columns: 45px minmax(0,1.4fr) minmax(0,1fr) 34px; align-items: center; gap: 24px; padding: 28px 0; border-top: 1px solid #b9cccf; }
.services-number { font-family: ui-monospace, monospace; font-size: .8rem; color: #b25222; }
.services-rows h3 { margin: 0; font-size: clamp(1.35rem,2.4vw,2rem); line-height: 1.15; letter-spacing: -.035em; }
.services-rows p { margin: 0; color: #496870; font-size: .95rem; line-height: 1.5; }
.services-arrow { font-size: 2rem; font-weight: 400; }
@media (max-width: 620px) {
  .services { padding-top: 80px; padding-bottom: 72px; }
  .services-overline { font-size: .61rem; gap: 12px; margin-bottom: 30px; }
  .services-overline span:last-child { white-space: nowrap; }
  .services-editorial h2 { font-size: clamp(2.5rem,10.5vw,4rem); }
  .services-deck { font-size: .92rem; margin: 24px 0 34px; }
  .services-rows article { grid-template-columns: 24px minmax(0,1fr) 24px; gap: 8px 12px; padding: 23px 0; }
  .services-rows h3 { font-size: 1.35rem; }
  .services-rows p { grid-column: 2; font-size: .9rem; }
  .services-arrow { grid-column: 3; grid-row: 1; font-size: 1.5rem; }
}

.method { background: linear-gradient(90deg,rgba(2,26,35,.94),rgba(2,26,35,.66)),url('assets/metodologia-background.jpg') center/cover; }
.method-carousel { max-width:1180px; margin:auto; }
.method-carousel>.kicker { margin-bottom:40px; }
.method-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }
.method-heading h2 { margin:0; font-size:clamp(2.7rem,5.7vw,5.7rem); line-height:1.02; letter-spacing:-.055em; }
.method-heading em { color:var(--orange); font-style:normal; }
.method-heading>p { color:#b4ccd3; line-height:1.7; }
.method-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:48px; border-bottom:1px solid #5b7880; }
.method-tabs button { background:none; color:#b4ccd3; border:0; border-bottom:3px solid transparent; padding:18px 8px; font:inherit; font-size:.9rem; text-align:left; cursor:pointer; }
.method-tabs button[aria-selected="true"] { border-bottom-color:var(--orange); color:#fff; }
.method-tabs button:focus-visible,.method-pause:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
.method-slides { min-height:340px; }
.method-slide { display:grid; grid-template-columns:1fr 1.4fr; gap:38px; padding:42px 0 20px; align-items:start; animation:method-enter .65s ease both; }
.method-slide[hidden] { display:none; }
.method-number { font-size:clamp(8rem,16vw,15rem); font-weight:700; letter-spacing:-.07em; line-height:1; color:rgba(112,213,231,.32); }
.method-eyebrow { font-family:ui-monospace,monospace; font-size:.75rem; color:var(--orange); }
.method-slide h3 { font-size:clamp(2.3rem,4vw,4rem); line-height:1.05; margin:24px 0; letter-spacing:-.04em; }
.method-description { font-size:1.05rem; color:#b4ccd3; line-height:1.7; max-width:48ch; }
.method-pause { background:transparent; border:1px solid #5b7880; border-radius:4px; padding:9px 13px; color:#b4ccd3; cursor:pointer; font-size:.75rem; }
@keyframes method-enter { from {opacity:0;transform:translateY(22px)} to {opacity:1;transform:translateY(0)} }
@media(max-width:620px) { .method-heading { display:block; } .method-heading>p { margin:22px 0 0; } .method-tabs { grid-template-columns:1fr 1fr; margin-top:28px; } .method-tabs button { font-size:.8rem; padding:15px 5px; } .method-slide { grid-template-columns:1fr; gap:12px; padding-top:30px; } .method-number { font-size:6rem; } .method-slides { min-height:470px; } .method-slide h3 { font-size:2.3rem; margin:18px 0; } .method-description { font-size:.95rem; } }
@media(prefers-reduced-motion:reduce) { .method-slide { animation:none; } }

/* Four milestones in a living archive. */
.experience::before { display:none; }
.experience-archive { max-width:1180px; margin:auto; }
.experience-archive>.kicker { margin-bottom:40px; }
.archive-heading { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:end; margin-bottom:60px; }
.archive-heading h2 { font-size:clamp(6rem,11vw,10rem); color:var(--orange); line-height:.9; margin:0; letter-spacing:-.065em; }
.archive-heading h2 span { display:block; color:#073449; font-size:clamp(1.8rem,3vw,2.8rem); margin-top:18px; letter-spacing:-.035em; }
.archive-heading h3 { font-size:clamp(2rem,3.3vw,3.1rem); letter-spacing:-.04em; line-height:1.08; margin:0 0 18px; }
.archive-heading p { color:#41656f; line-height:1.65; margin:0; max-width:45ch; }
.archive-timeline { grid-template-columns:repeat(4,minmax(0,1fr)); }
.archive-timeline::before,.archive-timeline::after { width:75%; }
.archive-timeline li { padding:25px 22px 0 0; }
.archive-timeline time { margin:0 0 22px; }
.archive-art { height:180px; position:relative; overflow:hidden; padding:20px; margin-bottom:24px; }
.archive-art--cd { background:#c1e0e9; }
.archive-art--cd i { width:160px; height:160px; border-radius:50%; background:conic-gradient(#eef8f9,#9dbdc8,#f8f7e9,#b1a5bc,#e0f0ed,#eef8f9); position:absolute;right:-15px;top:-5px; }
.archive-art--cd i::after { content:'';position:absolute;inset:42%;border-radius:50%;background:#c1e0e9;border:1px solid #809da8; }
.archive-art--cd span,.archive-art--next span { position:absolute;bottom:15px;left:16px;font-size:.6rem;letter-spacing:.08em;color:#073449;margin:0; }
.archive-art--catinred { background:var(--orange); display:flex;flex-direction:column;justify-content:center;padding:15px; }
.archive-art--catinred b { font-size:clamp(1.1rem,1.8vw,1.6rem);letter-spacing:-.055em;color:#073449;white-space:nowrap; }
.archive-art--catinred span { font-size:.85rem;color:#073449;margin-top:10px; }
.archive-art--metis { background:#073449; }
.archive-art--metis>b { position:absolute;right:8px;top:0;font-family:'Rubik Maze',system-ui,sans-serif;font-size:130px;font-weight:400;line-height:1;color:#287289; }
.archive-art--metis>span { position:absolute;bottom:16px;left:16px;margin:0;color:#fff;font-weight:700;font-size:1.2rem; }
.archive-art--metis small { display:block;font-size:.7rem;margin-top:6px;font-weight:400; }
.archive-art--next { background:#c6e6ec; }
.archive-art--next b { position:absolute;right:15px;top:0;font-size:110px;font-weight:400;color:#075563; }
.archive-timeline h3 { font-size:clamp(1.15rem,1.8vw,1.65rem);line-height:1.12;letter-spacing:-.035em;margin:0 0 15px; }
.archive-timeline p { font-size:.9rem;line-height:1.6;color:#41656f;margin:0; }
@media(max-width:860px) { .archive-heading { grid-template-columns:1fr;gap:30px; } .archive-timeline { grid-template-columns:1fr; } .archive-timeline::before,.archive-timeline::after { width:3px; } .archive-timeline li { padding:0 0 36px 30px; } .archive-art { max-width:420px;height:180px; } .archive-art--catinred b { font-size:2rem; } .archive-timeline h3 { font-size:1.5rem; } .archive-timeline p { max-width:45ch; } }