:root{
  --navy:#304057;
  --navy-deep:#1f2b3a;
  --paper:#f4efec;
  --white:#fffdfa;
  --ink:#283647;
  --muted:#6f7780;
  --line:rgba(48,64,87,.18);
  --line-light:rgba(255,255,255,.22);
  --shell:min(92vw,1440px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Nunito",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;overflow-x:hidden}
body.menu-open{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
::selection{background:var(--navy);color:var(--paper)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:1rem;top:-4rem;z-index:1000;background:var(--paper);padding:.8rem 1rem}.skip-link:focus{top:1rem}
.shell{width:var(--shell);margin-inline:auto}.section{padding:clamp(6rem,10vw,11rem) 0}
.kicker{margin:0 0 1.35rem;font-size:.72rem;letter-spacing:.17em;font-weight:800;text-transform:uppercase}
.display{margin:0;font-size:clamp(3.2rem,7vw,8.6rem);line-height:0.9;letter-spacing:-.065em;font-weight:800;max-width:1100px;text-wrap:balance}
.display--sm{font-size:clamp(2.8rem,5.8vw,6.8rem)}
.lead{margin:0;max-width:620px;font-size:clamp(1.08rem,1.55vw,1.35rem);color:var(--muted)}
.text-link{display:inline-flex;align-items:center;gap:.65rem;font-weight:800;border-bottom:1px solid currentColor;padding-bottom:.24rem;width:max-content}
.text-link svg{width:14px;transition:transform .3s var(--ease)}.text-link:hover svg{transform:translate(3px,-3px)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}.reveal.is-visible{opacity:1;transform:none}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:90;padding:1rem max(4vw,1.2rem);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,color .3s}
.site-header.is-scrolled,.site-header.header-light{background:rgba(244,239,236,.94);backdrop-filter:blur(14px);border-color:var(--line);color:var(--ink)}
.site-header.header-dark:not(.is-scrolled){color:var(--white)}
.brand{display:flex;align-items:center;position:relative;z-index:94}.brand img{width:118px;height:auto}.header-dark:not(.is-scrolled) .brand img{filter:brightness(0) invert(1)}
.site-nav{display:flex;align-items:center;gap:2rem;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.nav-link{position:relative;padding:.5rem 0}.nav-link::after{content:"";position:absolute;left:0;bottom:.18rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-contact{border:1px solid currentColor;padding:.68rem .95rem;transition:background .25s,color .25s}.nav-contact:hover,.nav-contact[aria-current="page"]{background:var(--navy);color:var(--paper);border-color:var(--navy)}.header-dark:not(.is-scrolled) .nav-contact:hover{background:var(--paper);color:var(--navy);border-color:var(--paper)}
.nav-services{position:relative}.nav-services-button{border:0;background:none;padding:.5rem 0;cursor:pointer;font-weight:800;font-size:inherit;letter-spacing:inherit;text-transform:inherit;display:flex;gap:.45rem;align-items:center}.nav-services-button svg{width:10px;transition:transform .25s}.nav-services.is-open .nav-services-button svg{transform:rotate(180deg)}
.nav-dropdown{position:absolute;top:calc(100% + .7rem);left:-1.1rem;min-width:250px;padding:.55rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.nav-services.is-open .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.nav-dropdown a{display:block;padding:.85rem .9rem;border-bottom:1px solid var(--line);font-size:.76rem}.nav-dropdown a:last-child{border-bottom:0}.nav-dropdown a:hover{background:rgba(48,64,87,.06)}
.menu-toggle{display:none;border:0;background:none;width:44px;height:44px;padding:10px;cursor:pointer}.menu-toggle span:not(.sr-only){display:block;height:1px;background:currentColor;margin:7px 0;transition:transform .3s var(--ease)}

br {
  display: inline-block;
  content: "";
  line-height: 40px; /* Controla el tamaño del espacio en píxeles */
}


/* Hero */
.hero{position:relative;min-height:100svh;color:var(--white);background:var(--navy-deep);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.24);z-index:-2;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,20,30,.08) 4%,rgba(13,20,30,.06) 42%,rgba(17,27,40,.72) 100%);z-index:-1;pointer-events:none}
.hero-content{position:relative;z-index:2;padding-bottom:clamp(4.8rem,7vw,7.2rem)}
.hero .display{font-size:clamp(4rem,8.3vw,7rem);max-width:1280px;}.hero-copy{margin-top:clamp(2rem,4vw,3.6rem);display:flex;justify-content:space-between;gap:2rem;align-items:end}.hero-copy p{margin:0;max-width:540px;font-size:clamp(1rem,1.35vw,1.1rem);color:rgba(255,255,255,.86)}
.scroll-cue{position:absolute;z-index:3;right:max(4vw,1.2rem);bottom:1.45rem;display:flex;align-items:center;gap:.6rem;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.76)}.scroll-cue::before{content:"";width:34px;height:1px;background:currentColor}
.service-hero{min-height:min(82svh,860px)}.service-hero .hero-content{padding-top:clamp(9rem,15vw,13rem);padding-bottom:clamp(4rem,7vw,6rem)}.service-hero .display{font-size:clamp(3.7rem,7.5vw,8.4rem)}

/* Home */
.manifesto-grid{display:grid;grid-template-columns:1.5fr .55fr;gap:8vw;align-items:end}.manifesto .display{font-size:clamp(3.2rem,6.5vw,7.8rem)}
.home-services{background:var(--navy);color:var(--white)}.home-services-head{display:grid;grid-template-columns:1.35fr .6fr;gap:8vw;align-items:end;margin-bottom:5rem}.home-services .lead{color:rgba(255,255,255,.65)}
.service-paths{border-top:1px solid var(--line-light)}.service-path{display:grid;grid-template-columns:70px 1fr .75fr 40px;gap:2rem;align-items:center;padding:2.4rem 0;border-bottom:1px solid var(--line-light);transition:padding .35s var(--ease)}.service-path:hover{padding-left:1rem}.service-path .num{font-size:.7rem;letter-spacing:.12em}.service-path h3{margin:0;font-size:clamp(2rem,3.4vw,3.8rem);letter-spacing:-.045em}.service-path p{margin:0;color:rgba(255,255,255,.66)}.service-path svg{width:20px;justify-self:end;transition:transform .3s}.service-path:hover svg{transform:translate(4px,-4px)}
.home-work-head{display:flex;justify-content:space-between;gap:5vw;align-items:end;margin-bottom:4rem}.home-work-head .lead{max-width:390px}.featured-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}.featured-card{position:relative;overflow:hidden;min-height:40vw;background:#d9d5d2}.featured-card:first-child{grid-row:span 2;min-height:64vw}.featured-card img,.featured-card video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1s var(--ease)}.featured-card:hover img,.featured-card:hover video{transform:scale(1.02)}.featured-overlay{position:absolute;inset:auto 0 0;padding:1.4rem;color:white;background:linear-gradient(180deg,transparent,rgba(10,15,22,.76));z-index:2}.featured-overlay h3{margin:0;font-size:clamp(1.8rem,3vw,3.4rem);letter-spacing:-.04em}.featured-overlay p{margin:.25rem 0 0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.philosophy{background:var(--paper)}.philosophy-word{font-size:clamp(5rem,14.2vw,15.5rem);font-weight:900;letter-spacing:-.08em;line-height:.72;color:var(--navy);margin:0;white-space:nowrap}.philosophy-word--transforma{font-size:clamp(4.8rem,12.4vw,13.4rem)}.philosophy-word:nth-of-type(3){margin-left:8vw}.philosophy-word:nth-of-type(4){margin-left:18vw}.philosophy-note{margin:6rem 0 0 auto;max-width:500px}
.cta-strip{background:var(--navy-deep);color:white;padding:clamp(5rem,8vw,8rem) 0}.cta-strip-inner{display:flex;justify-content:space-between;align-items:center;gap:4rem}.cta-strip h2{margin:0;font-size:clamp(3rem,6vw,7rem);line-height:.9;letter-spacing:-.06em;max-width:900px}.cta-strip .text-link{white-space:nowrap}
.cta-button{display:inline-flex;align-items:center;justify-content:space-between;gap:1.25rem;min-width:220px;min-height:68px;padding:1rem 1.35rem;border:1px solid currentColor;font-size:.9rem;font-weight:800;letter-spacing:.03em;transition:background .25s,color .25s;white-space:nowrap}.cta-button svg{width:17px;transition:transform .3s var(--ease)}.cta-button:hover{background:var(--paper);color:var(--navy-deep)}.cta-button:hover svg{transform:translate(3px,-3px)}

/* Services */
.service-intro{display:grid;grid-template-columns:.75fr 1.1fr;gap:10vw}.service-intro aside{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}.service-intro-copy>p{font-size:clamp(1.35rem,2.5vw,2.5rem);line-height:1.18;letter-spacing:-.03em;margin:0;max-width:900px}.outcome-list{margin-top:5rem;border-top:1px solid var(--line)}.outcome-row{display:grid;grid-template-columns:70px .75fr 1fr;gap:2rem;padding:2rem 0;border-bottom:1px solid var(--line);align-items:start}.outcome-row span{font-size:.7rem;font-weight:800}.outcome-row h3{margin:0;font-size:clamp(1.6rem,2.7vw,2.8rem);letter-spacing:-.04em}.outcome-row p{margin:0;color:var(--muted);max-width:580px}
.portfolio-bridge{border-top:1px solid var(--line)}.portfolio-bridge-inner{display:grid;grid-template-columns:1.25fr .6fr;gap:8vw;align-items:end}.portfolio-bridge .cta-button{color:var(--navy);justify-self:end}.portfolio-bridge .cta-button:hover{background:var(--navy);color:white}

/* Portfolio */
.page-hero{padding:clamp(10rem,15vw,14rem) 0 clamp(5rem,8vw,8rem);border-bottom:1px solid var(--line)}.page-hero-grid{display:grid;grid-template-columns:1.4fr .55fr;gap:8vw;align-items:end}.page-hero .lead{padding-bottom:.7rem}.portfolio-intro{padding-bottom:4rem}
.portfolio-list{padding-bottom:clamp(7rem,10vw,11rem)}.portfolio-case{padding:clamp(5rem,8vw,8rem) 0;border-bottom:1px solid var(--line)}.portfolio-case:last-child{border-bottom:0}.portfolio-case-head{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end;margin-bottom:2.5rem}.portfolio-case-head h2{margin:0;font-size:clamp(2.4rem,5vw,5.8rem);line-height:.92;letter-spacing:-.055em}.portfolio-case-head p{margin:0;color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-align:right}.portfolio-case-copy{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-bottom:3rem}.portfolio-case-copy p{margin:0;max-width:560px;color:var(--muted)}.portfolio-case-copy .tags{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.portfolio-media-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;align-items:start}.portfolio-media-card{grid-column:span 4;min-width:0}.portfolio-media-card.is-landscape{grid-column:span 6}.portfolio-media-card.is-wide{grid-column:span 8}.portfolio-media-frame{width:100%;overflow:hidden;background:#dedad7}.portfolio-media-frame img,.portfolio-media-frame video{width:100%;height:auto;object-fit:contain;display:block}.portfolio-media-frame video{background:#131a23}.portfolio-media-grid.is-masonry-ready{grid-auto-rows:8px;align-items:stretch}.portfolio-media-grid.is-masonry-ready .portfolio-media-card{margin:0}.portfolio-media-grid.is-masonry-ready .portfolio-media-frame{height:auto}

/* Contact */
.contact-page{min-height:100svh;padding:clamp(10rem,14vw,13rem) 0 clamp(6rem,10vw,10rem)}.contact-grid{display:grid;grid-template-columns:1fr .8fr;gap:10vw;align-items:start}.contact-copy{position:sticky;top:9rem}.contact-copy .display{font-size:clamp(3.5rem,6.8vw,8rem)}.contact-copy .lead{margin-top:2.3rem}.contact-details{margin-top:4rem;display:grid;gap:.55rem;font-size:.9rem}.contact-details a{width:max-content;border-bottom:1px solid transparent}.contact-details a:hover{border-color:currentColor}.contact-form{display:grid;gap:.65rem}.contact-form label{margin-top:1.15rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;padding:.8rem 0 1rem;outline:none;color:var(--ink);resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-bottom-width:2px}.contact-form textarea::placeholder{color:#94989c}.honeypot{position:absolute!important;left:-9999px!important}.submit-button{margin-top:1.8rem;width:100%;min-height:60px;border:1px solid var(--navy);background:var(--navy);color:white;padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;font-weight:800;cursor:pointer;transition:background .25s,color .25s}.submit-button:hover{background:transparent;color:var(--navy)}.submit-button svg{width:15px}.form-note{margin:.35rem 0 0;font-size:.75rem;color:var(--muted)}

/* Thanks */
.thanks{min-height:100svh;display:flex;align-items:center}.thanks-inner{padding:7rem 0}.thanks .display{font-size:clamp(4rem,9vw,10rem)}.thanks .lead{margin-top:2rem}.thanks .text-link{margin-top:2.5rem}

/* Footer */
.site-footer{background:var(--navy);color:white;padding:2.6rem 0}.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:2rem;min-height:72px}.footer-inner img{width:120px;height:auto}.footer-inner p{margin:0;font-size:.67rem;letter-spacing:.11em;text-transform:uppercase}.footer-inner p:nth-child(2){text-align:center}.footer-inner p:last-child{text-align:right}

@media(max-width:980px){
  :root{--shell:min(90vw,820px)}
  .menu-toggle{display:block;z-index:95}.site-nav{position:fixed;inset:0;max-height:100dvh;overflow-y:auto;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.8rem;padding:clamp(6.5rem,16vh,8.5rem) 8vw 3rem;font-size:clamp(1.9rem,6vw,3.3rem);line-height:1.08;letter-spacing:-.04em;text-transform:none;transform:translateY(-105%);transition:transform .5s var(--ease);z-index:92}.site-nav.is-open{transform:none}.nav-link{padding:.18rem 0}.nav-contact{border:0;padding:.18rem 0}.nav-services{width:100%}.nav-services-button{font-size:inherit;letter-spacing:inherit;text-transform:none;padding:.18rem 0}.nav-dropdown{position:static;min-width:0;border:0;background:none;padding:.55rem 0 .2rem 1rem;opacity:1;visibility:visible;pointer-events:auto;transform:none;display:none}.nav-services.is-open .nav-dropdown{display:block}.nav-dropdown a{border:0;padding:.38rem 0;font-size:clamp(1.05rem,3.8vw,1.65rem);line-height:1.2;color:var(--muted)}.site-header.menu-active{background:var(--paper);color:var(--ink);border-color:var(--line)}.site-header.menu-active .brand img{filter:none}.site-header.menu-active .menu-toggle span:first-child{transform:translateY(4px) rotate(45deg)}.site-header.menu-active .menu-toggle span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}.header-dark:not(.is-scrolled) .menu-toggle{color:white}.header-dark.menu-active .menu-toggle{color:var(--ink)}
  .manifesto-grid,.home-services-head,.service-intro,.contact-grid,.portfolio-bridge-inner{grid-template-columns:1fr;gap:3rem}.home-work-head{display:grid;gap:2rem}.featured-grid{grid-template-columns:1fr 1fr}.featured-card:first-child{grid-column:1/-1;grid-row:auto;min-height:70vw}.featured-card{min-height:48vw}.philosophy-word:nth-of-type(3),.philosophy-word:nth-of-type(4){margin-left:0}.cta-strip-inner{display:grid;gap:2.5rem}.cta-button{justify-self:start}.service-path{grid-template-columns:48px 1fr 36px}.service-path p{grid-column:2}.service-path svg{grid-column:3;grid-row:1}.outcome-row{grid-template-columns:52px .7fr 1fr}.portfolio-bridge .cta-button{justify-self:start}
  .portfolio-case-head,.portfolio-case-copy{grid-template-columns:1fr;gap:1rem}.portfolio-case-head p{text-align:left}.portfolio-media-card,.portfolio-media-card.is-landscape,.portfolio-media-card.is-wide{grid-column:span 6}
  .contact-copy{position:static}.footer-inner{grid-template-columns:1fr 1fr 1fr;gap:1rem}.footer-inner p{font-size:.6rem}
}
@media(max-width:620px){
  :root{--shell:calc(100vw - 2.4rem)}.section{padding:5.5rem 0}.site-header{padding:.8rem 1.15rem}.brand img{width:100px}.site-nav{padding-left:1.2rem;padding-right:1.2rem;font-size:clamp(1.8rem,9vw,2.7rem)}
  .hero .display{font-size:clamp(3.35rem,16vw,4rem);line-height:.88}.hero-content{padding-bottom:4.2rem}.hero-copy{display:grid;gap:1.6rem;margin-top:2rem}.scroll-cue{display:none}.service-hero{min-height:82svh}.service-hero .hero-content{padding-top:8rem}.service-hero .display{font-size:clamp(3rem,14vw,5rem)}
  .display{font-size:clamp(3rem,13.5vw,5.3rem);line-height:0.9}.home-services-head{margin-bottom:3rem}.service-path{padding:1.8rem 0;grid-template-columns:36px 1fr 28px;gap:1rem}.service-path h3{font-size:1.8rem}.service-path p{font-size:.9rem}.featured-grid{grid-template-columns:1fr}.featured-card:first-child{grid-column:auto;min-height:120vw}.featured-card{min-height:100vw}
  .philosophy-word{font-size:clamp(3.4rem,15.5vw,5rem);line-height:.78;letter-spacing:-.075em;max-width:100%}.philosophy-word--transforma{font-size:clamp(3.05rem,13.7vw,4.35rem)}.philosophy-note{margin-top:3rem}.cta-strip-inner h2{font-size:13vw}.cta-button{width:100%;min-width:0;min-height:72px}.outcome-row{grid-template-columns:32px 1fr;gap:1rem}.outcome-row p{grid-column:2}.portfolio-media-card,.portfolio-media-card.is-landscape,.portfolio-media-card.is-wide{grid-column:span 12}.portfolio-media-grid{gap:.7rem}.portfolio-case{padding:4.5rem 0}.portfolio-case-head{margin-bottom:1.5rem}.portfolio-case-copy{margin-bottom:2rem}.contact-page{padding-top:8.5rem}.contact-copy .display{font-size:14vw}
  .footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.15rem;min-height:0}.footer-inner img{width:108px}.footer-inner p:nth-child(2),.footer-inner p:last-child{text-align:center;display:block}.footer-inner p{font-size:.62rem;line-height:1.5}
}
@media(max-width:390px){
  .site-nav{font-size:clamp(1.65rem,8.4vw,2.25rem);gap:.65rem;padding-top:6rem}.nav-dropdown a{font-size:1rem}.hero .display{font-size:14.7vw}.philosophy-word{font-size:14.7vw}.philosophy-word--transforma{font-size:12.8vw}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   v5 MOBILE NAV + NATIVE PORTFOLIO DISCLOSURE
   ========================================================= */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{position:relative}
main,.site-header,.site-footer,section,nav{max-width:100%}
.display,.lead,.service-path,.service-path h3,.outcome-row,.outcome-row h3,.portfolio-case-head,.portfolio-case-copy,.contact-grid,.contact-form,.cta-strip-inner{min-width:0;max-width:100%}
.display,.service-path h3,.outcome-row h3,.portfolio-case-head h2{overflow-wrap:break-word}
.contact-details a,.text-link{max-width:100%;overflow-wrap:anywhere}
html.menu-open,body.menu-open{overflow:hidden!important;overscroll-behavior:none}

/* Native portfolio disclosure: present in HTML, no JS dependency. */
.portfolio-media-grid--preview,
.portfolio-media-grid--extra{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  align-items:start;
  width:100%;
  max-width:100%;
}
.portfolio-media-grid--preview{grid-template-columns:repeat(2,minmax(0,1fr))}
.portfolio-media-grid--preview .portfolio-media-card,
.portfolio-media-grid--extra .portfolio-media-card,
.portfolio-media-grid--preview .portfolio-media-card.is-landscape,
.portfolio-media-grid--preview .portfolio-media-card.is-wide,
.portfolio-media-grid--extra .portfolio-media-card.is-landscape,
.portfolio-media-grid--extra .portfolio-media-card.is-wide{
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%;
  min-width:0;
  margin:0;
}
.portfolio-more-details{margin-top:1.5rem}
.portfolio-more-button{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-width:170px;
  min-height:54px;
  margin:0 auto;
  padding:.85rem 1.4rem;
  border:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
  transition:background .25s,color .25s;
}
.portfolio-more-button::-webkit-details-marker{display:none}
.portfolio-more-button::marker{display:none;content:""}
.portfolio-more-button:hover,.portfolio-more-button:focus-visible{background:var(--navy);color:var(--paper);outline:none}
.portfolio-more-label--less{display:none}
.portfolio-more-details[open] .portfolio-more-label--more{display:none}
.portfolio-more-details[open] .portfolio-more-label--less{display:inline}
.portfolio-more-details[open] .portfolio-media-grid--extra{margin-top:1rem}

@media(max-width:980px){
  /* The header itself becomes the full-screen overlay. This avoids a fixed
     menu living inside another fixed element and stays stable after scrolling. */
  .site-header{height:auto!important;min-height:0!important;overflow:visible!important}
  .site-header.menu-active{
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    overflow:hidden!important;
    align-items:flex-start!important;
    background:var(--paper)!important;
  }
  @supports(height:100dvh){
    .site-header.menu-active{height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important}
  }
  .site-nav{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-top:max(6.5rem,calc(env(safe-area-inset-top) + 5.4rem))!important;
    padding-bottom:max(2.5rem,calc(env(safe-area-inset-bottom) + 1.25rem))!important;
    transform:translate3d(0,-105%,0);
  }
  .site-nav.is-open{
    transform:translate3d(0,0,0)!important;
    height:auto!important;
  }
  .brand,.menu-toggle{position:relative;z-index:95}
  .portfolio-media-grid--extra{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:620px){
  :root{--shell:calc(100% - 2rem)}
  .shell{width:calc(100% - 2rem)!important;max-width:100%!important}
  .site-header.menu-active{height:100vh!important;min-height:100vh!important}
  @supports(height:100dvh){.site-header.menu-active{height:100dvh!important;min-height:100dvh!important}}
  .site-nav{
    padding-left:1rem!important;
    padding-right:1rem!important;
    font-size:clamp(1.65rem,7.6vw,2.3rem)!important;
    gap:.7rem!important;
  }
  .portfolio-media-grid--preview,
  .portfolio-media-grid--extra{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
  }
  .portfolio-more-details{margin-top:1.15rem}
  .portfolio-more-button{width:100%;min-height:50px}
}