:root{
  --bg:#FFFFFF; --bg-alt:#F5F5F4; --card:#FFFFFF; --ink:#1B1B1D; --ink-2:#5E5E64; --ink-3:#8E8E94;
  --line:rgba(27,27,29,.09); --nav:rgba(255,255,255,.78);
  --accent:#2A5BD7; --ok:#1F9D55; --soon:#C27A12;
  --shadow:0 1px 2px rgba(0,0,0,.03),0 8px 30px -12px rgba(0,0,0,.10);
  --r-xl:28px; --r-lg:22px; --r-md:14px;
  --display:"Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.8,.26,1);
  --gap:clamp(12px,1.6vw,18px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;letter-spacing:-.011em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
[data-lang="es"] .en,[data-lang="en"] .es{display:none!important}
.in{width:100%;max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .in{display:flex;align-items:center;justify-content:space-between;height:52px;gap:20px}
.brand{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em}
.nav ul{display:flex;gap:24px;list-style:none;margin:0 0 0 auto;padding:0;font-size:13px;color:var(--ink-2)}
.nav ul a{transition:color .2s}
.nav ul a:hover{color:var(--ink)}
.lang{font:500 12px var(--text);color:var(--ink-2);background:none;border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;cursor:pointer;transition:color .2s,border-color .2s}
.lang:hover{color:var(--ink);border-color:rgba(27,27,29,.2)}

/* ---------- links ---------- */
.chev::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);margin-left:1px;display:inline-block}
.back::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 0 1.5px 1.5px;transform:rotate(45deg);margin-right:3px;display:inline-block}
.link{color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:4px}
.link:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- intro (home) ---------- */
.intro{padding:clamp(40px,6vw,72px) 0 clamp(48px,6vw,72px)}
.intro .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,5vw,64px);align-items:center}
.eyebrow{font-size:15px;font-weight:500;color:var(--ink-3);margin:0 0 12px}
.intro h1{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.04em;margin:0}
.intro .lead{font-size:clamp(17px,1.9vw,20px);line-height:1.5;color:var(--ink-2);max-width:46ch;margin:18px 0 22px;letter-spacing:-.014em}
.intro .lead.es + .lead.es,.intro .lead.en + .lead.en{margin-top:-10px}
.inline-links{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0;font-size:15px}
.portrait{margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--bg-alt)}
.portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:75% 40%}

/* ---------- sections ---------- */
.sec{padding:clamp(52px,6.5vw,88px) 0}
.sec.alt{background:var(--bg-alt)}
.shead{margin:0 0 clamp(24px,3.2vw,38px)}
.shead .kick{font-size:14px;font-weight:600;color:var(--ink-3);margin:0 0 10px}
.shead h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.05;letter-spacing:-.035em;margin:0;max-width:22ch;text-wrap:balance}
.shead p{color:var(--ink-2);font-size:clamp(17px,1.7vw,19px);max-width:54ch;margin:14px 0 0;letter-spacing:-.012em}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;min-height:320px;isolation:isolate;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
@media (hover:hover){ a.tile:hover{transform:translateY(-3px)} a.tile:hover .bgimg{transform:scale(1.03)} }
.tile .tag{font-size:13px;font-weight:500;color:var(--ink-3);margin:0 0 10px}
.tile h3{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
.tile p{color:var(--ink-2);margin:0;max-width:44ch;font-size:16px}
.tile .foot{margin-top:auto;padding-top:20px}
.span6{grid-column:span 6}.span4{grid-column:span 4}.span3{grid-column:span 3}.span2{grid-column:span 2}

.tile.photo{color:#fff;justify-content:flex-end;background:#222}
.tile.photo .foot{margin-top:0;padding-top:16px}
.tile.photo .tag{color:rgba(255,255,255,.75)}
.tile.photo p{color:rgba(255,255,255,.88)}
.tile.photo .link{color:#fff}
.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.tile.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,0) 66%)}
.tile.hero-tile{min-height:clamp(480px,56vw,620px)}
.tile.hero-tile h3{font-size:clamp(2rem,4.4vw,3.2rem)}

.tile .logo{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 0 8px}
.tile .logo img{width:min(58%,210px)}
.tile .thumb{margin-top:auto;padding-top:20px;display:flex;justify-content:center}
.tile .thumb img{max-height:180px;width:auto}
.tile .frame{margin-top:auto;padding-top:22px}

.window{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px -14px rgba(0,0,0,.18)}
.window .bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#F4F4F3;border-bottom:1px solid var(--line)}
.window .bar i{width:8px;height:8px;border-radius:50%;background:#D6D6D9;display:block}
.window img{width:100%;height:auto;display:block}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.chips li{font-size:12.5px;color:var(--ink-2);background:var(--bg-alt);border-radius:999px;padding:3px 10px}

/* ---------- próximos ---------- */
.next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.card{background:var(--bg-alt);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column}
.card.wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink-2);margin:0 0 12px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block;box-shadow:0 0 0 3px rgba(31,157,85,.15)}
.status.soon i{background:var(--soon);box-shadow:0 0 0 3px rgba(194,122,18,.15)}
.card h3{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
.card p{color:var(--ink-2);margin:0 0 12px;font-size:16px;max-width:54ch}
.card .who{font-size:14px;color:var(--ink-3);margin:auto 0 0;padding-top:8px}
.steps{list-style:none;margin:16px 0 0;padding:0;counter-reset:s}
.steps li{position:relative;padding:0 0 12px 30px;font-size:15px;color:var(--ink-2);counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:1px solid var(--line);font-size:11px;font-weight:600;display:grid;place-items:center;color:var(--ink-3)}
.steps li.now{color:var(--ink)}
.steps li.now::before{background:var(--accent);border-color:var(--accent);color:#fff}
.steps li.now b{font-weight:600}
.steps li:last-child{padding-bottom:0}
.rf{width:100%;height:auto;display:block}
.rf .ring{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ring 3.3s ease-out infinite}
.rf .ring.r2{animation-delay:1.1s}.rf .ring.r3{animation-delay:2.2s}
@keyframes ring{0%{opacity:.5;transform:scale(.15)}100%{opacity:0;transform:scale(1)}}
.specline{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:10px 0 0;list-style:none}
.specline li{font-size:13px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px}

/* ---------- trayectoria ---------- */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 32px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tl .yr{font-size:15px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tl h4{font-family:var(--display);font-weight:600;font-size:clamp(1.08rem,1.6vw,1.2rem);letter-spacing:-.02em;margin:0}
.tl .desc{color:var(--ink-2);font-size:16px;margin:6px 0 0;max-width:58ch}
.tl .org{font-size:15px;color:var(--ink-2);text-align:right;white-space:nowrap}
.tl-more{display:inline-flex;margin-top:8px;font-size:14px}
.foot-link:hover{color:var(--ink)}
.legal-date{font-size:13px;color:var(--ink-3);margin:24px 0 64px}
.marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 0;max-width:560px}
.marks div{background:var(--bg-alt);border-radius:var(--r-md);padding:12px 14px}
.marks .n{font-family:var(--display);font-weight:600;font-size:1.45rem;letter-spacing:-.03em;line-height:1.1;display:block;font-variant-numeric:tabular-nums}
.marks .l{font-size:12.5px;color:var(--ink-2);line-height:1.35;display:block;margin-top:4px}

/* ---------- contacto ---------- */
.contact{text-align:center}
.contact h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.4vw,3rem);line-height:1.05;letter-spacing:-.035em;margin:0 0 12px}
.contact p{color:var(--ink-2);font-size:clamp(17px,1.7vw,19px);margin:0 auto 22px;max-width:40ch}
.contact .inline-links{justify-content:center}
.contact .meta{margin:26px auto 0;font-size:14px;color:var(--ink-3)}

footer{border-top:1px solid var(--line);padding:20px 0 32px;font-size:12px;color:var(--ink-3)}
footer .in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- páginas de proyecto ---------- */
.phead{padding:clamp(36px,5vw,64px) 0 clamp(24px,3vw,36px)}
.phead .back{font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px;margin:0 0 22px}
.phead .back:hover{color:var(--ink)}
.phead h1{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,5.6vw,4rem);line-height:1.03;letter-spacing:-.04em;margin:0;max-width:18ch;text-wrap:balance}
.phead .lead{font-size:clamp(17px,1.9vw,20px);color:var(--ink-2);max-width:56ch;margin:16px 0 0;letter-spacing:-.014em}
.phead .chips{margin-top:20px}
.phead .chips li{background:var(--bg-alt)}
.pmedia{margin:0 0 clamp(40px,5vw,64px)}
.pmedia > img{width:100%;border-radius:var(--r-xl);aspect-ratio:16/9;object-fit:cover}
.pmedia.plain{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,4vw,48px);display:flex;justify-content:center}
.pmedia.plain > img{width:auto;max-width:100%;max-height:520px;aspect-ratio:auto;object-fit:contain;border-radius:0}

.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}
.brand-logo{width:min(260px,60vw);height:auto;margin:6px 0 4px}
.pmedia.soft{background:var(--bg-alt);border-radius:var(--r-xl);padding:clamp(20px,4vw,48px) clamp(12px,3vw,40px);display:flex;justify-content:center}
.pmedia.soft > img{width:100%;max-width:880px;aspect-ratio:auto;object-fit:contain;border-radius:0}
.window.live{width:100%;border-radius:var(--r-xl);box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 60px -24px rgba(0,0,0,.22)}
.window.live .bar{height:34px;padding:0 16px;gap:7px}
.window.live .bar i{width:10px;height:10px}
.window.live .bar{position:relative}
.window.live .url{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 28px}
.window.live iframe{display:block;width:100%;aspect-ratio:16/9;border:0;pointer-events:none;background:#fafaf9}
@media (max-width:640px){.window.live iframe{aspect-ratio:1/1}}
.prose .chips{padding-left:0}
.specs-table{border-collapse:collapse;width:100%;max-width:620px;font-size:16px}
.specs-table th,.specs-table td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.specs-table th{width:110px;font-weight:600;color:var(--ink)}
.specs-table td{color:var(--ink-2)}
.meta-line{font-size:14px;color:var(--ink-3)!important;margin-bottom:8px!important}
.gallery.lab-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.btn-cv{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font-weight:500;font-size:14px;border-radius:999px;padding:7px 16px;transition:opacity .2s}
.btn-cv:hover{opacity:.85}
.btn-cv::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat}
.inline-links{align-items:center}
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.skill{background:var(--bg-alt);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,26px)}
.skill h3{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.02em;margin:0}
.skill .chips{margin-top:12px}
.skill .chips li{background:#fff}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--gap);margin:0 0 clamp(40px,5vw,64px)}
.fact{background:var(--bg-alt);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,26px)}
.fact .n{font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.8vw,2.7rem);line-height:1;letter-spacing:-.045em;display:block;margin-bottom:8px}
.fact .n small{font-size:.45em;color:var(--ink-3);font-weight:500;letter-spacing:0}
.fact .l{color:var(--ink-2);font-size:15px}

.prose{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:10px clamp(24px,5vw,64px);padding:clamp(24px,3vw,32px) 0;border-top:1px solid var(--line)}
.prose h2{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.02em;margin:0;line-height:1.3}
.prose p{margin:0 0 14px;color:var(--ink-2);max-width:62ch}
.prose p:last-child{margin-bottom:0}
.prose ul{margin:0;padding:0 0 0 18px;color:var(--ink-2)}
.prose li{margin:0 0 6px}

.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,32px) var(--gap);margin:0 0 clamp(40px,5vw,64px)}
.phases figure{margin:0}
.phases img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);background:var(--bg-alt)}
.phases figcaption{margin:12px 2px 0;font-size:15px;color:var(--ink-2)}
.phases figcaption b{display:block;color:var(--ink);font-weight:600;font-size:16px;margin-bottom:2px}

.plans{margin:0 0 clamp(40px,5vw,64px)}
.plan-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--bg-alt);border-radius:999px;margin:0 0 16px;flex-wrap:wrap}
.plan-tabs button{font:500 14px var(--text);color:var(--ink-2);background:none;border:none;border-radius:999px;padding:7px 16px;cursor:pointer;transition:background .2s,color .2s}
.plan-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.plan-sheet{display:block;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.plan-sheet img{width:100%;height:auto}
.plan-note{font-size:13px;color:var(--ink-3);margin:10px 2px 0}

.story p{font-size:clamp(17px,1.7vw,19px);color:var(--ink);line-height:1.6;letter-spacing:-.012em}
.story .thanks{color:var(--ink-2);font-style:italic;margin-top:18px}
.today{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(24px,3vw,32px) 0 clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.today h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;line-height:1.1;margin:0 0 14px}
.today p{margin:0;color:var(--ink-2);font-size:clamp(17px,1.7vw,19px);max-width:36ch}
.walk{width:100%;height:auto;aspect-ratio:478/850;border-radius:var(--r-lg);background:#111;display:block}

.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 clamp(40px,5vw,64px)}
.gallery a{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--bg-alt)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){ .gallery a:hover img{transform:scale(1.04)} }
.gallery{grid-auto-flow:dense}
.gallery .big{grid-column:span 2;grid-row:span 2}
.gallery .big img{height:100%;aspect-ratio:auto}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,20,22,.92);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;border-radius:10px}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:none;width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.22)}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}

.doc-title{color:var(--ink)!important;font-size:clamp(17px,1.8vw,19px)}
.doc-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:6px}
.pdf{margin:0 0 clamp(40px,5vw,64px);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-alt)}
.pdf iframe{display:block;width:100%;height:min(82vh,900px);border:0}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:0 0 clamp(40px,5vw,64px)}
.service{background:var(--bg-alt);border-radius:var(--r-lg);padding:20px 22px}
.service b{display:block;font-weight:600;margin-bottom:2px}
.service span{color:var(--ink-2);font-size:15px}

.pnext{border-top:1px solid var(--line);margin-top:clamp(40px,5vw,64px);padding:clamp(28px,4vw,40px) 0 clamp(48px,6vw,72px);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.pnext .lbl{font-size:13px;color:var(--ink-3);display:block;margin-bottom:4px}
.pnext a.to{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.025em}
.pnext a.to:hover{color:var(--accent)}

/* ---------- aparición ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in-view{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .span4,.span3,.span2{grid-column:span 6}
  .tile{min-height:280px}
  .next-grid{grid-template-columns:1fr}
  .skills{grid-template-columns:1fr 1fr}
  .card.wide{grid-template-columns:1fr}
  .tl li{grid-template-columns:1fr;gap:4px}
  .tl .org{text-align:left;white-space:normal}
  .prose{grid-template-columns:1fr}
  .phases,.services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .nav ul{display:none}
  .intro .in{grid-template-columns:1fr}
  .portrait{max-width:360px;order:-1}
  .marks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phases,.services{grid-template-columns:1fr}
  .skills{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery .big{grid-row:span 1}
  .gallery .big img{aspect-ratio:4/3}
  .pdf{display:none}
  .today{grid-template-columns:1fr}
  .walk{max-width:320px}
  .pmedia > img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
  .rf .ring{opacity:.3}
}