/*
Theme Name: Alva
Description: Sitio de Alva, con proyectos editables y diseño propio.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: alva
*/


:root { --ink: #080808; --paper: #ffffff; --gold: #c6a15b; --line: rgba(8, 8, 8, .18); }
@font-face { font-family: 'Onest'; src: url('assets/onest-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('assets/onest-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Playfair'; src: url('assets/playfair-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--ink); color: var(--ink); font-family: 'Onest', Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
em { font-family: 'Playfair', Georgia, 'Times New Roman', serif; font-weight: 400; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 10; height: 86px; padding: 0 clamp(22px, 4vw, 68px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--ink); border-bottom: 1px solid rgba(8,8,8,.18); font-size: 13px; text-transform: uppercase; }
.brand { display: flex; align-items: center; width: 104px; height: 38px; }
.brand img { display: block; width: 100%; height: 38px; object-fit: contain; object-position: left center; }
.nav-menu { position: relative; justify-self: center; }
.nav-menu > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary span { color: #70521d; font-size: 18px; transition: transform .25s ease; }
.nav-menu[open] > summary span { transform: rotate(45deg); }
.nav-menu nav { position: absolute; top: 36px; left: 50%; width: 230px; padding: 16px 20px; transform: translateX(-50%); display: flex; flex-direction: column; background: rgba(255,255,255,.96); border: 1px solid rgba(8,8,8,.18); box-shadow: 0 18px 48px rgba(0,0,0,.12); }
.nav-menu nav a { padding: 10px 0; border-bottom: 1px solid rgba(8,8,8,.1); transition: color .25s ease; }
.nav-menu nav a:last-child { border-bottom: 0; }
.nav-menu nav a:hover, .contact-link:hover { color: #70521d; }
.contact-link { justify-self: end; display: flex; gap: 14px; }

.hero { min-height: 100svh; position: relative; overflow: hidden; padding: 150px clamp(22px, 4vw, 68px) 42px; background: #f2f2f1; color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; }
.hero::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.08); pointer-events: none; }
.hero-texture { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; animation: texture-breathe 18s ease-in-out infinite alternate; }
.eyebrow { position: relative; z-index: 2; margin: 0; color: #70521d; font-size: 13px; text-transform: uppercase; }
.hero h1 { position: relative; z-index: 2; max-width: 1240px; margin: auto 0; font-size: clamp(52px, 7.6vw, 124px); line-height: .91; letter-spacing: 0; font-weight: 600; }
.hero-foot { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; border-top: 1px solid rgba(8,8,8,.28); padding-top: 22px; }
.hero-foot p { max-width: 560px; margin: 0; font-size: clamp(16px, 1.4vw, 22px); line-height: 1.35; }
.hero-foot a { display: flex; gap: 24px; font-size: 13px; text-transform: uppercase; }
@keyframes texture-breathe { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.025) translate3d(-.5%, .35%, 0); } }

.mirada, .ideas { background: var(--paper); padding: clamp(72px, 10vw, 150px) clamp(22px, 4vw, 68px); }
.section-kicker { display: grid; grid-template-columns: 80px 1fr; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: #555; font-size: 12px; text-transform: uppercase; }
.section-kicker.light { color: rgba(255,255,255,.58); border-color: rgba(255,255,255,.22); }
.mirada h2, .ideas h2 { margin: clamp(64px, 8vw, 128px) 0; max-width: 1100px; font-size: clamp(48px, 7.8vw, 124px); line-height: .92; letter-spacing: 0; font-weight: 500; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.principles article { min-height: 350px; padding: 20px 28px 28px 0; border-right: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr 104px; align-items: end; }
.principles article + article { padding-left: 28px; }
.principles article:last-child { border-right: 0; }
.principle-number { color: var(--gold); font-size: 12px; }
.principles h3 { align-self: end; margin: 0 0 16px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 4vw, 62px); font-weight: 400; }
.principles p { max-width: 370px; margin: 0; font-size: 17px; line-height: 1.5; }

.purpose { min-height: 78svh; position: relative; overflow: hidden; background: var(--ink); color: white; padding: clamp(72px, 8vw, 120px) clamp(22px, 4vw, 68px); display: flex; flex-direction: column; }
.purpose-statement { position: relative; z-index: 2; max-width: 980px; margin: clamp(40px, 4vw, 58px) 0 0; font-size: clamp(34px, 4.5vw, 68px); line-height: 1.06; font-weight: 500; }
.purpose-orbit { position: absolute; right: -6vw; bottom: -24vw; width: 62vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; display: grid; place-items: center; }
.purpose-orbit::before { content: ''; position: absolute; inset: 14%; border: 1px solid rgba(198,161,91,.25); border-radius: 50%; }
.purpose-orbit span { font-family: Georgia, serif; font-size: 29vw; line-height: 1; color: rgba(255,255,255,.025); }
.purpose-glint { position: absolute; left: 0; bottom: 17%; width: 42%; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,161,91,.85), transparent); background-size: 220% 100%; opacity: .45; animation: purpose-light 8s ease-in-out infinite; }
@keyframes purpose-light { 0%, 25% { background-position: 120% 0; opacity: .12; } 58% { opacity: .62; } 85%, 100% { background-position: -120% 0; opacity: .12; } }

.ideas { position: relative; overflow: hidden; }
.ideas::before { content: ''; position: absolute; top: 0; right: 15%; width: 1px; height: 29%; background: linear-gradient(var(--gold), rgba(198,161,91,0)); opacity: .65; }
.ideas-watermark { position: absolute; top: clamp(110px, 12vw, 180px); right: -1vw; color: transparent; font-size: clamp(110px, 19vw, 300px); line-height: .8; font-weight: 700; -webkit-text-stroke: 1px rgba(8,8,8,.06); pointer-events: none; }
.ideas .section-kicker, .ideas-heading, .case-card { position: relative; z-index: 1; }
.ideas-heading { display: grid; grid-template-columns: 1.8fr 1fr; gap: 48px; align-items: end; }
.ideas-heading h2 { margin-bottom: 64px; }
.ideas-heading > p { max-width: 440px; margin: 0 0 72px; font-size: 19px; line-height: 1.5; }
.case-card { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.case-visual { min-height: 620px; position: relative; overflow: hidden; background: #101010; }
.case-image { position: absolute; inset: 0; background: url('assets/award.webp') center/cover no-repeat; transform: scale(1.01); transition: transform .8s cubic-bezier(.2,.65,.25,1), filter .8s ease; filter: saturate(.68) contrast(1.08); }
.case-card:hover .case-image { transform: scale(1.045); filter: saturate(.9) contrast(1.08); }
.case-index { position: absolute; left: 22px; bottom: 20px; padding: 8px 10px; background: var(--ink); color: white; font-size: 11px; }
.case-copy { padding: 24px 0 24px clamp(28px, 4vw, 64px); display: flex; flex-direction: column; }
.case-meta { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: #555; font-size: 12px; text-transform: uppercase; }
.case-copy h3 { margin: auto 0 28px; font-size: clamp(40px, 4.4vw, 70px); line-height: .95; font-weight: 500; }
.case-copy p { margin: 0 0 34px; font-size: 17px; line-height: 1.55; }
.case-copy a { display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--ink); font-size: 12px; text-transform: uppercase; }
.project-archive { margin-top: 90px; border-top: 1px solid var(--ink); }
.project-archive article { display: grid; grid-template-columns: 70px minmax(220px, .85fr) minmax(320px, 1.15fr) 24px; gap: 28px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--line); }
.project-archive article > span { color: var(--gold); font-size: 12px; }
.project-archive h3 { margin: 0; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.05; font-weight: 500; }
.project-archive p { max-width: 600px; margin: 0; color: #3e3e3e; font-size: 16px; line-height: 1.5; }
.project-archive article > span:last-child { color: var(--ink); font-size: 18px; }

.dark-band { background: var(--ink); color: white; padding: clamp(76px, 9vw, 140px) clamp(22px, 4vw, 68px); }
.section-intro { display: grid; grid-template-columns: 1.8fr .7fr; gap: 50px; align-items: end; margin: clamp(60px, 7vw, 110px) 0 72px; }
.section-intro h2 { max-width: 900px; margin: 0; font-size: clamp(38px, 4.8vw, 72px); line-height: .98; font-weight: 500; }
.section-intro p { max-width: 400px; margin: 0; color: rgba(255,255,255,.66); font-size: 18px; line-height: 1.5; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.4); }
.service-grid article { min-height: 420px; padding: 20px 26px 28px 0; border-right: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; }
.service-grid article + article { padding-left: 26px; }
.service-grid article:last-child { border-right: 0; }
.service-grid article > span { color: var(--gold); font-size: 12px; }
.service-grid h3 { min-height: 108px; margin: auto 0 30px; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.08; font-weight: 500; }
.service-grid ul { margin: 0; padding: 0; list-style: none; color: rgba(255,255,255,.64); font-size: 15px; line-height: 1.8; }

.team-section, .networks, .faq { background: var(--paper); padding: clamp(76px, 9vw, 140px) clamp(22px, 4vw, 68px); }
.team-section { padding-bottom: clamp(76px, 7vw, 110px); }
.team-lead { display: grid; grid-template-columns: 1.35fr .65fr; gap: 60px; align-items: end; margin: clamp(64px, 8vw, 120px) 0 80px; }
.team-section .team-lead { margin-bottom: 0; }
.team-lead h2 { max-width: 850px; margin: 0; font-size: clamp(42px, 5vw, 76px); line-height: .98; font-weight: 500; }
.team-lead > p { max-width: 480px; margin: 0; font-size: 18px; line-height: 1.55; }

.clients h2 { max-width: 900px; margin: clamp(54px, 6vw, 88px) 0 72px; font-size: clamp(36px, 4.4vw, 66px); line-height: 1.02; font-weight: 500; }
.client-group { display: grid; grid-template-columns: .42fr 1.58fr; gap: 50px; padding: 28px 0 55px; border-top: 1px solid rgba(255,255,255,.28); }
.client-group h3 { margin: 0; color: var(--gold); font-size: 13px; font-weight: 500; text-transform: uppercase; }
.client-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 38px; }
.client-list span { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: clamp(24px, 2.6vw, 40px); }

.network-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 80px; border-top: 1px solid var(--ink); }
.network-grid > div { min-height: 260px; padding: 28px 40px 30px 0; border-right: 1px solid var(--line); }
.network-grid > div + div { padding-left: 40px; border-right: 0; }
.network-grid h3 { margin: 0 0 90px; color: var(--gold); font-size: 14px; font-weight: 500; text-transform: uppercase; }
.network-grid p { max-width: 560px; margin: 0; font-size: clamp(25px, 3vw, 42px); line-height: 1.16; }

.faq { padding-top: clamp(52px, 6vw, 80px); padding-bottom: clamp(52px, 6vw, 80px); }
.faq-shell > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: clamp(28px, 3.4vw, 48px); }
.faq-shell > summary::-webkit-details-marker { display: none; }
.faq-shell > summary small { margin-right: clamp(24px, 4vw, 70px); color: #666; font-size: 12px; font-weight: 400; }
.faq-shell > summary i { color: var(--gold); font-size: 30px; font-style: normal; transition: transform .25s ease; }
.faq-shell[open] > summary i { transform: rotate(45deg); }
.faq-list { border-top: 1px solid var(--ink); }
.faq-shell > .faq-list { margin-top: 36px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: grid; grid-template-columns: 1fr 32px; gap: 20px; align-items: center; padding: 20px 0; cursor: pointer; list-style: none; font-size: clamp(17px, 1.6vw, 23px); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--gold); font-size: 25px; transition: transform .25s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 760px; margin: 0 0 32px; color: #4a4a4a; font-size: 17px; line-height: 1.55; }

.contact { min-height: 48svh; position: relative; overflow: hidden; padding: clamp(64px, 7vw, 100px) clamp(22px, 4vw, 68px) 36px; background: var(--ink); color: white; display: flex; flex-direction: column; }
.contact-mark { position: absolute; right: -6vw; top: -5vw; color: rgba(255,255,255,.025); font-size: 35vw; font-weight: 700; line-height: 1; }
.contact > p { position: relative; margin: 0; color: var(--gold); font-size: 13px; text-transform: uppercase; }
.contact > a { position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin: clamp(60px, 8vw, 100px) 0; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.45); font-size: clamp(48px, 7vw, 104px); line-height: .9; font-weight: 600; }
.contact > a span { color: var(--gold); font-size: .32em; }
.contact-meta { position: relative; display: flex; justify-content: space-between; gap: 30px; padding-top: 26px; color: rgba(255,255,255,.62); font-size: 12px; text-transform: uppercase; }

.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(64px, 7vw, 110px) clamp(18px, 2.4vw, 38px); }
.portfolio-item a { display: block; }
.project-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #111; }
.project-media > span { position: absolute; right: -3%; bottom: -16%; color: rgba(255,255,255,.16); font-size: clamp(180px, 30vw, 480px); line-height: .8; font-weight: 700; transition: transform .8s cubic-bezier(.2,.65,.25,1); }
.project-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) contrast(1.1); transition: transform .8s cubic-bezier(.2,.65,.25,1), filter .8s ease; }
.project-media b { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 18px; padding: 10px 12px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 500; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.portfolio-item:hover .project-media > span, .portfolio-item:hover .project-media img { transform: scale(1.035) translateX(-1%); filter: saturate(.9) contrast(1.08); }
.portfolio-item:hover .project-media b { opacity: 1; transform: translateY(0); }
.project-info { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 18px; border-top: 1px solid var(--ink); }
.project-info > span { color: #5a5a5a; font-size: 11px; text-transform: uppercase; }
.project-info h3 { margin: 0; font-size: clamp(26px, 2.5vw, 40px); line-height: 1; font-weight: 500; }
.project-info p { max-width: 620px; margin: 4px 0 0; color: #484848; font-size: 15px; line-height: 1.5; }
.news { background-color: #101010; }
.material { background-color: #b39050; }
.peace { background-color: #0d0d0d; }
.sound { background-color: #222; }
.prospect { background-color: #d8d8d5; }
.prospect > span { color: rgba(8,8,8,.1); }
.journey { background-color: #17130d; }
.science { background-color: #c6a15b; }
.repair { background-color: #32302c; }
.world { background-color: #161616; }
.team { background-color: #bdbdb9; }
.team > span { color: rgba(8,8,8,.1); }

.service-accordion { border-top: 1px solid rgba(255,255,255,.35); }
.service-accordion details { border-bottom: 1px solid rgba(255,255,255,.2); }
.service-accordion summary { display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; padding: 22px 0; list-style: none; cursor: pointer; }
.service-accordion summary::-webkit-details-marker { display: none; }
.service-accordion summary > span { color: var(--gold); font-size: 12px; }
.service-accordion summary strong { font-size: clamp(28px, 3.4vw, 50px); line-height: 1; font-weight: 500; text-transform: uppercase; }
.service-accordion summary i { color: var(--gold); font-size: 30px; font-style: normal; transition: transform .25s ease; }
.service-accordion details[open] summary i { transform: rotate(45deg); }
.service-accordion ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 36px; max-width: 800px; margin: 0 0 38px 70px; padding: 0; list-style: none; color: rgba(255,255,255,.67); font-size: 16px; }

.logo-marquee { overflow: hidden; margin-inline: calc(clamp(22px, 4vw, 68px) * -1); border-top: 1px solid rgba(255,255,255,.26); border-bottom: 1px solid rgba(255,255,255,.18); }
.logo-track { width: max-content; display: flex; animation: logo-scroll 24s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track figure { width: clamp(220px, 25vw, 360px); height: 170px; flex: 0 0 auto; margin: 0; padding: 38px; display: grid; place-items: center; border-right: 1px solid rgba(255,255,255,.12); }
.logo-track img { max-width: 72%; max-height: 70px; object-fit: contain; filter: invert(1); }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
.network-logos { min-height: 120px; display: flex; align-items: center; flex-wrap: wrap; gap: 30px 48px; }
.network-logos img { width: 130px; max-height: 70px; object-fit: contain; }
.network-logos span { font-size: 22px; }
.network-pending { margin: 22px 0 0; color: #666; font-size: 12px; text-transform: uppercase; }

.project-page { min-height: 100svh; background: var(--paper); }
.project-page > header { height: 82px; padding: 0 clamp(22px, 4vw, 68px); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase; }
.project-page > header img { width: 100px; height: 38px; object-fit: contain; }
.project-page > section { padding: clamp(60px, 8vw, 120px) clamp(22px, 4vw, 68px); }
.project-page > section > p:first-child { margin: 0 0 28px; color: var(--gold); font-size: 12px; text-transform: uppercase; }
.project-page h1 { max-width: 1200px; margin: 0 0 70px; font-size: clamp(54px, 9vw, 140px); line-height: .9; font-weight: 500; }
.project-page-media { position: relative; overflow: hidden; min-height: 56vw; max-height: 820px; display: grid; place-items: center; }
.project-page-media img { width: 100%; height: 100%; object-fit: cover; }
.project-page-media > span { color: rgba(255,255,255,.16); font-size: 20vw; font-weight: 700; }
.project-page-copy { max-width: 820px; margin: 55px 0; font-size: clamp(24px, 3vw, 42px); line-height: 1.25; }
.project-contact { display: inline-block; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 13px; text-transform: uppercase; }
footer { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 28px; padding: 28px clamp(22px, 4vw, 68px); background: var(--ink); color: rgba(255,255,255,.6); font-size: 12px; text-transform: uppercase; }
footer a { transition: color .25s ease; }
footer a:hover { color: var(--gold); }

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 20px; height: 70px; }
  .nav-menu { justify-self: end; }
  .nav-menu nav { left: auto; right: -56px; transform: none; }
  .contact-link { font-size: 0; }
  .contact-link span { font-size: 16px; }
  .hero { min-height: 92svh; padding-top: 110px; }
  .hero h1 { font-size: clamp(48px, 15.2vw, 72px); }
  .hero-foot { grid-template-columns: 1fr; gap: 28px; }
  .hero-foot a { display: none; }
  .section-kicker { grid-template-columns: 44px 1fr; }
  .mirada h2, .ideas h2 { font-size: clamp(46px, 14vw, 72px); }
  .principles { grid-template-columns: 1fr; }
  .principles article, .principles article + article { min-height: 230px; padding: 18px 0 24px; border-right: 0; border-bottom: 1px solid var(--line); grid-template-rows: auto 100px auto; }
  .purpose { min-height: 70svh; }
  .purpose-statement { margin-top: 42px; max-width: 620px; font-size: clamp(34px, 9.5vw, 50px); line-height: 1.04; }
  .purpose-orbit { width: 120vw; right: -53vw; bottom: -42vw; }
  .ideas-heading { grid-template-columns: 1fr; gap: 0; }
  .ideas-heading h2 { margin-bottom: 30px; }
  .ideas-heading > p { margin-bottom: 56px; }
  .case-card { grid-template-columns: 1fr; }
  .case-visual { min-height: 105vw; }
  .case-copy { min-height: 500px; padding: 22px 0; }
  .case-copy h3 { margin-top: 74px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 76px; }
  .portfolio-item:nth-child(n) { grid-column: auto; }
  .portfolio-item:nth-child(n) .project-media { aspect-ratio: 4 / 3; }
  .project-media b { opacity: 1; transform: none; }
  .project-info { grid-template-columns: 1fr; }
  .project-info > span { grid-row: auto; }
  .service-accordion summary { grid-template-columns: 40px 1fr 26px; }
  .service-accordion summary strong { font-size: clamp(25px, 8vw, 34px); }
  .service-accordion ul { grid-template-columns: 1fr; margin-left: 40px; }
  .logo-track figure { width: 210px; height: 130px; padding: 26px; }
  .project-page h1 { margin-bottom: 45px; }
  .project-page-media { min-height: 90vw; }
  .project-archive { margin-top: 60px; }
  .project-archive article { grid-template-columns: 38px 1fr 20px; gap: 12px; }
  .project-archive article p { grid-column: 2 / -1; }
  .project-archive article > span:last-child { grid-column: 3; grid-row: 1; }
  .section-intro, .team-lead { grid-template-columns: 1fr; gap: 30px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article, .service-grid article + article { min-height: 300px; padding: 20px 0 28px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .service-grid h3 { min-height: 0; margin: 80px 0 24px; }
  .client-group { grid-template-columns: 1fr; gap: 30px; }
  .client-list { grid-template-columns: 1fr; }
  .network-grid { grid-template-columns: 1fr; }
  .network-grid > div, .network-grid > div + div { min-height: 220px; padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .network-grid h3 { margin-bottom: 40px; }
  .contact { min-height: auto; }
  .contact-meta { flex-direction: column; }
  footer { grid-template-columns: 1fr; gap: 12px; }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ALVA supplied imagery and compact sections */
.site-header { grid-template-columns: 1fr auto; color: white; border-color: #ffffff30; font-size: 14px; }
.nav-menu { justify-self: end; }
.nav-menu nav { left: auto; right: 0; transform: none; color: var(--ink); }
.nav-menu > summary { min-height: 44px; }
.nav-menu > summary .hamburger { display: grid; gap: 6px; width: 24px; color: white; }
.hamburger i { display: block; height: 1px; background: currentColor; width: 24px; }
.nav-menu[open] > summary .hamburger { transform: none; }
.nav-menu[open] .hamburger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-menu[open] .hamburger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.hero { background: #080808; color: white; }
.hero::after { background: #00000010; }
.hero .eyebrow { color: #d2b780; font-size: 14px; }
.hero h1 { line-height: 1.02; }
.hero-foot { border-color: #ffffff40; }
.hero-foot a { font-size: 14px; }
.purpose { min-height: 0; padding-block: clamp(40px, 4vw, 64px); }
.purpose .section-kicker { position: relative; }
.purpose-statement { max-width: 1040px; margin-top: 30px; font-size: clamp(28px, 3.5vw, 52px); line-height: 1.16; font-weight: 400; }
.project-media img, .portfolio-item:hover .project-media img { filter: none; }
.project-media b { font-size: 14px; }
.portfolio-item a:focus-visible .project-media b { opacity: 1; transform: none; }
.project-info > span { font-size: 14px; }
.project-info p { font-size: 16px; }
.brand-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid #ffffff30; }
.brand-grid figure { display: grid; place-items: center; min-height: 150px; padding: 28px; margin: 0; border-bottom: 1px solid #ffffff25; }
.brand-grid img, .association-logos img { width: 100%; max-width: 155px; height: 76px; object-fit: contain; filter: brightness(0) invert(1); }
.association-row { margin-top: 48px; display: grid; grid-template-columns: 1fr 3fr; gap: 30px; align-items: center; }
.association-row > p { color: #ccc; font-size: 14px; }
.association-logos { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px; }
.association-logos figure { margin: 0; }
.association-logos img { max-width: 125px; height: 65px; }
.faq { padding-block: 26px; }
.faq-shell > summary { font-size: 16px; min-height: 44px; color: #555; }
.faq-shell > summary i { font-size: 23px; }
.faq-shell { border-bottom: 0 !important; }
.site-footer { padding-block: 48px 26px; grid-template-columns: 1fr 1.3fr 1fr; align-items: start; gap: 36px; font-size: 14px; text-transform: none; }
.footer-brand img { width: 105px; height: auto; }
.footer-contact, .footer-social { display: flex; flex-direction: column; gap: 14px; }
.footer-contact > a { font-size: clamp(20px,2.4vw,32px); color: white; }
.footer-social { justify-self: end; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; padding-top: 26px; border-top: 1px solid #ffffff25; }
.project-page h1 { line-height: 1.02; }
.project-page-media { min-height: 0; max-height: none; display: block; }
.project-page-media img { display: block; height: auto; }
.project-story, .project-results { max-width: 850px; font-size: 18px; line-height: 1.65; }
.project-results { border-top: 1px solid var(--line); margin-block: 40px 56px; padding-top: 24px; }
.project-results h2 { font-size: 16px; font-weight: 600; }
.project-gallery { display: grid; gap: 24px; margin-block: 50px; }
.project-gallery img { width: 100%; height: auto; display: block; }
.project-videos { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-block: 36px; font-size: 16px; }
.project-videos a { border-bottom: 1px solid; padding-bottom: 6px; }
.project-page > header, .project-page > section > p:first-child, .project-contact { font-size: 14px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav-menu nav { right: 0; }
  .brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .brand-grid figure { min-height: 120px; padding: 24px; }
  .brand-grid img { max-width: 130px; height: 65px; }
  .association-row { grid-template-columns: 1fr; gap: 12px; }
  .association-logos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-social { justify-self: start; flex-direction: row; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 16px; }
  .project-page-media { min-height: 0; }
}

/* A continuous, quiet drift for the ALVA symbol. */
.hero-texture {
  inset: -8%;
  width: 116%;
  height: 116%;
  transform-origin: 50% 50%;
  animation: alva-drift 28s ease-in-out infinite;
  will-change: transform;
}
@keyframes alva-drift {
  0%, 100% { transform: translate3d(-1.8%, -.8%, 0) scale(1.01) rotate(-1deg); }
  33% { transform: translate3d(1.7%, -1.3%, 0) scale(1.045) rotate(.6deg); }
  66% { transform: translate3d(.6%, 1.6%, 0) scale(1.025) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-texture { animation: none; will-change: auto; transform: none; }
}

/* Compact client bands with a seamless loop. */
.clients { padding-block: clamp(48px, 5vw, 76px); }
.clients h2 { max-width: 850px; margin-block: 36px; font-size: clamp(30px, 3.5vw, 52px); line-height: 1.12; }
.client-strips { overflow: hidden; border-top: 1px solid #ffffff25; }
.client-strip { overflow: hidden; border-bottom: 1px solid #ffffff25; }
.client-strip-track { display: flex; width: max-content; animation: client-band-drift 48s linear infinite; }
.strip-1 .client-strip-track { animation-direction: reverse; animation-duration: 54s; }
.client-strip-group { display: flex; flex: 0 0 auto; }
.client-strip figure { display: grid; place-items: center; width: clamp(150px, 16vw, 215px); height: 108px; padding: 22px 30px; margin: 0; }
.client-strip img { width: 100%; height: 64px; object-fit: contain; filter: brightness(0) invert(1); }
.client-strip img.original-logo { filter: none; }
.client-strips:hover .client-strip-track { animation-play-state: paused; }
.clients .association-row { margin-top: 28px; }
@keyframes client-band-drift { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .client-strip figure { width: 150px; height: 92px; padding: 18px 24px; }
  .client-strip img { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-strip-track { animation: none; width: 100%; }
  .client-strip-group { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .client-strip-group[aria-hidden="true"] { display: none; }
  .client-strip figure { width: 100%; }
}

/* Give the association memberships their own hierarchy within Experience. */
.clients .association-row { margin-top: 44px; padding-top: 36px; border-top: 1px solid #ffffff40; grid-template-columns: 1fr; gap: 30px; }
.association-row > h3 { margin: 0; color: white; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; font-weight: 400; }
.association-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.association-logos figure { display: grid; place-items: center; min-height: 110px; padding: 12px 18px; }
.association-logos img { max-width: 190px; height: 90px; }
@media (max-width: 760px) {
  .association-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .association-logos figure { min-height: 100px; padding: 10px; }
  .association-logos img { max-width: 160px; height: 80px; }
}

/* Light membership band within the shared Experience section. */
.clients { padding-bottom: 0; }
.clients .association-row {
  margin-inline: calc(clamp(22px, 4vw, 68px) * -1);
  margin-top: 44px;
  padding: 40px clamp(22px, 4vw, 68px);
  background: var(--paper);
  color: var(--ink);
  border-top: 0;
}
.association-row > h3 { color: var(--ink); }
.association-logos img { filter: brightness(0); }

/* Restrained gold accents. */
.association-row > h3::after { content: ''; display: block; width: 64px; height: 1px; margin-top: 20px; background: var(--gold); }
.portfolio-item a:hover .project-media b,
.portfolio-item a:focus-visible .project-media b { background: var(--gold); color: var(--ink); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--gold); }

/* Let each principle follow its content instead of a tall fixed grid. */
.principles article, .principles article + article {
  min-height: 0;
  grid-template-rows: auto auto auto;
  align-content: start;
  align-items: start;
  padding-top: 18px;
  padding-bottom: 24px;
}
.principles h3 { margin: 22px 0 12px; align-self: start; line-height: 1.12; }
.principles p { align-self: start; }
@media (max-width: 760px) {
  .principles article, .principles article + article { min-height: 0; grid-template-rows: auto auto auto; }
  .principles h3 { margin-top: 16px; }
}

/* Concise service descriptions. */
.service-accordion ul { grid-template-columns: 1fr; max-width: 850px; line-height: 1.6; }
.service-accordion summary strong { line-height: 1.15; }

.site-header { grid-template-columns: 1fr auto auto; gap: 24px; }
.language-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.language-switch a { display: inline-flex; min-height: 44px; align-items: center; opacity: .6; }
.language-switch a[aria-current="true"] { opacity: 1; color: var(--gold); }
.language-switch a:hover { opacity: 1; }
.project-page > header { gap: 20px; }
@media(max-width:760px) { .site-header { gap: 16px; } .project-page > header { flex-wrap: wrap; height: auto; min-height: 82px; padding-block: 12px; } }

.project-content{max-width:1200px;font-size:18px;line-height:1.65}.project-content p{max-width:850px}.project-content img{max-width:100%;height:auto;display:block}.project-content figure{margin:30px 0}.project-content h2{font-size:28px;margin-top:44px}.project-content a{text-decoration:underline}.admin-bar .site-header{top:32px}.service-accordion summary strong{overflow-wrap:anywhere}