/* Shared responsive foundation. Phone layouts first; larger layouts opt in below.
   Load after the art-direction styles on the home and every generated page. */

/* ---------- Footer: one mobile-first layout on every page, home included ---------- */
.site-footer{margin:0 10px 10px;padding:44px 22px 24px;border:0;border-radius:var(--lx-r);background:var(--lx-card);color:#f2f1ed}
.footer-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;align-items:start}
.footer-main>*{min-width:0}
.footer-main>.site-logo{grid-column:1/-1;display:flex;align-items:center;width:112px;min-height:44px}
.footer-main>.site-logo img{display:block;width:100%;height:auto}
.footer-main>div,.footer-main>nav{display:grid;align-content:start;grid-column:1/-1}
.footer-main .eyebrow{display:block;margin:0 0 6px;font-family:inherit;font-weight:400;font-size:11px;line-height:1.5;letter-spacing:.06em;text-transform:none;color:#8e9aa0}
.footer-main .eyebrow:before{content:none}
.footer-main>div>a,.footer-main>nav>a{display:flex;align-items:center;width:fit-content;max-width:100%;min-height:44px;padding:10px 0;font-size:14px;line-height:1.5;color:inherit;text-decoration:none!important;transition:color .3s;overflow-wrap:anywhere}
.footer-main>div>a:hover,.footer-main>nav>a:hover{color:#9cbaf7}
.site-footer .lx-roll{max-width:100%}
.footer-main>.footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.footer-nav .eyebrow{grid-column:1/-1}
.footer-main>.footer-social{display:flex;flex-wrap:wrap;column-gap:22px}
.footer-social .eyebrow{flex-basis:100%}
.footer-base{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin-top:30px;padding-top:14px;border-top:1px solid #ffffff1a;font-size:12px;line-height:1.5;color:#a6afb6}
.footer-base>span{padding-block:6px}
.footer-base>span:first-child{flex-basis:100%}
.footer-base>a{display:inline-flex;align-items:center;min-height:44px;padding-block:10px;color:inherit;transition:color .3s}
.footer-legal{display:flex;flex-wrap:wrap;gap:0 18px}
.footer-legal a,.footer-legal button{display:inline-flex;align-items:center;min-height:44px;font:inherit;color:inherit;background:none;border:0;padding:10px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;opacity:.85}
.footer-legal a:hover,.footer-legal button:hover,.footer-base>a:hover{opacity:1;color:#fff}
.footer-note{margin:10px 0 0;max-width:880px;font-size:12px;line-height:1.65;color:#9ba6ad;overflow-wrap:anywhere}
.footer-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(min-width:600px){
 .footer-main{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:36px 28px}
 .footer-main>.site-logo{width:124px}
 .footer-main>div,.footer-main>nav{grid-column:auto}
 .footer-main>.footer-nav{grid-template-columns:minmax(0,1fr)}
 .footer-main>.footer-social{display:grid}
 .footer-base{gap:0 24px;margin-top:40px}
 .footer-base>span:first-child{flex-basis:auto}
}
@media(min-width:761px){.site-footer{margin:0 var(--gutter) var(--gutter);padding:clamp(48px,5vw,75px) clamp(26px,3.5vw,56px) 28px}}
@media(min-width:1024px){
 .footer-main{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
 .footer-main>.site-logo{grid-column:auto;width:150px}
 .footer-base{justify-content:space-between;margin-top:56px}
}

/* Content may shrink within flex/grid tracks; long names and emails may wrap. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(main,section,article,nav,form,fieldset,.page-wrap,.chapter-copy,.case-title,.next-copy>div){min-width:0}
:where(h1,h2,h3,p,li,.text-link,.small-link,.button-link){overflow-wrap:anywhere}
.lx-lines .lx-w,.lx-lines .lx-wi{max-width:none;white-space:nowrap;overflow-wrap:normal}
.lx-lw{max-width:none;white-space:nowrap}
/* Phones and touch screens: labels wrap instead of rolling. With a mouse, from 761 px, the rolling hover labels stay. */
@media(hover:none),(max-width:760px){
 :is(.button-link,.text-link,.small-link,.footer-main a,.contact-bottom a,.logo-density) .lx-roll{max-width:100%;height:auto;overflow:visible}
 :is(.button-link,.text-link,.small-link,.footer-main a,.contact-bottom a,.logo-density) .lx-roll>span{white-space:normal;overflow-wrap:anywhere;text-shadow:none;transform:none!important}
}
.button-link,.text-link,.small-link{max-width:100%;min-height:44px}
.button-link>span[aria-hidden],.text-link>span[aria-hidden],.small-link>span[aria-hidden]{flex:none}
.blog-conversation .button-link,.article-cta .button-link{gap:12px;padding-inline:18px}
.site-footer{padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}

/* A scrollable mobile menu stays usable in landscape and with enlarged text.
   Without JavaScript the links remain in normal document flow. */
.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;height:auto;min-height:80px;flex-wrap:wrap;gap:12px;padding:14px var(--gutter);font:400 16px/1.55 var(--sf-pro);color:#f2f1ed}
.home-body .site-header{position:fixed;left:0;right:0}
.site-header .site-logo{display:block;flex-shrink:0}
.site-header .site-logo img{display:block;width:100%;height:auto}
.site-header a{text-decoration:none}
.site-header .menu-toggle{font:inherit;cursor:pointer;border-radius:40px!important;padding:11px 18px!important}
.site-header .site-nav>a{color:#cbd0d2;position:relative;border-radius:14px;text-decoration:none}
.site-header .site-logo{width:107px}
.site-header .button-link{display:none}
.site-header .menu-toggle{display:none;min-height:44px;flex-shrink:0}
.site-header .site-nav{position:static;display:flex;flex-wrap:wrap;width:100%;gap:2px!important;padding:10px!important;background:#121b20!important;border-radius:15px;max-height:none}
.site-header .site-nav>a{font-size:16px!important;min-height:44px;display:flex!important;align-items:center;padding:10px 12px!important;width:auto}
.site-header .site-nav .mobile-contact{display:flex!important}
.site-header .site-nav a[aria-current=page]:after{display:none}
.site-navigation-ready .site-header{height:80px;flex-wrap:nowrap;padding-block:0}
.site-navigation-ready .menu-toggle{display:block}
.site-navigation-ready .site-nav{display:none;position:absolute;top:84px!important;left:var(--gutter)!important;right:var(--gutter)!important;width:auto;max-height:calc(100svh - 96px);max-height:calc(100dvh - 96px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;box-shadow:0 30px 60px #0008}
.site-navigation-ready .site-nav.is-open{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.site-navigation-ready .site-nav>a{width:100%;font-size:25px!important;font-weight:300;padding:14px 16px!important}
.site-navigation-ready .site-nav .mobile-contact{margin-top:8px;background:#f2f1ed;color:#080d0f}
.site-header .lx-nav-pill{display:none}
.site-header .site-nav>a:hover,.site-header .site-nav>a[aria-current=page]{background:#ffffff0f}
@media(max-width:900px){.site-header.lx-header-hide{transform:none}.site-header .site-nav>a[aria-current=page]:after{display:none}.site-header .button-link{display:none}}

/* Keep every portfolio filter visible, without an undiscoverable sideways strip. */
.work-toolbar{flex-direction:column;align-items:stretch}
.work-filters{flex-wrap:wrap;overflow:visible;max-width:100%;gap:4px;border-radius:20px}
.work-filters button,.blog-filters button{min-height:44px}
.work-search{width:100%;min-width:0}
.work-search input{width:100%;min-width:0;min-height:44px;font-size:16px}
.work-grid{grid-template-columns:minmax(0,1fr)}
.work-card-copy h2{overflow-wrap:anywhere}
.logo-density{flex-shrink:0;min-height:44px}

/* The chapter dock has three generous touch targets and never covers the footer. */
.case-nav{width:min(420px,calc(100% - 24px));padding:5px!important;gap:0!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.case-nav>span:first-child{display:none}
.case-nav>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;min-width:0;gap:2px!important}
.case-nav a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;font-size:11px;padding:8px 4px;text-align:center}
@media(hover:none),(max-width:760px){
 .case-nav .lx-roll{max-width:100%;height:auto;overflow:visible}
 .case-nav .lx-roll>span{white-space:normal;text-shadow:none;transform:none!important}
}
.case-nav .case-progress{display:block}
html.lx:not(.lx-dock-on) .case-nav{visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 html.lx .case-nav{transition:transform .8s var(--lx-ease),opacity .5s,visibility 0s linear .8s}
 html.lx.lx-dock-on .case-nav{transition-delay:0s}
}
html:not(.lx) .case-nav{width:100%;max-width:none}
.case-title h1,.hero-split .case-title h1,.hero-float .case-title h1,.hero-editorial .case-title h1,.hero-cinema .case-title h1{font-size:clamp(48px,14vw,100px);hyphens:manual;overflow-wrap:anywhere}
.hero-cinema[data-project=bioalimentar] .case-title h1{font-size:clamp(44px,12vw,96px)}
.case-back,.case-hero-bottom>a,.next-topbar a{min-height:44px;display:inline-flex;align-items:center}
.next-topbar{flex-wrap:wrap;gap:8px 20px}
@media(max-width:560px){.next-copy h2{font-size:clamp(36px,10vw,56px)}}

/* Forms start with full-width fields; split only where labels have room. */
.contact-conversation{grid-template-columns:minmax(0,1fr)}
.contact-form-row{grid-template-columns:minmax(0,1fr);gap:0}
.contact-field :is(input,select,textarea),.quiz-lead :is(input,textarea){font-size:16px}
.contact-primary,.contact-secondary,.quiz-back,.quiz-track-label button,.quiz-answer-review button{min-height:44px}
.quiz-page button,.quiz-answer-review summary{min-height:44px}
.quiz-step-actions,.quiz-track-label{flex-wrap:wrap;gap:12px}
.article-toc summary,.article-toc nav a,.legal-toc a{min-height:44px}
.article-toc nav a,.legal-toc a{display:flex;align-items:center}
.tb-cookies{max-height:calc(100svh - 20px);max-height:calc(100dvh - 20px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
.tb-cookies-actions button{min-height:44px}
.media-dialog,.index-ov,.service-dialog{max-height:calc(100dvh - 24px);overflow:auto}
.media-dialog .dialog-close,.lightbox-controls button{min-height:44px;min-width:44px}
.media-dialog{padding-top:74px}
.media-dialog img{max-height:calc(100dvh - 160px)}

@media(hover:none){
 .lx-roll>span{transform:none!important;text-shadow:none}
}

@media(min-width:560px){
 .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .contact-form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .blog-conversation .button-link,.article-cta .button-link{gap:32px;padding-inline:25px}
}
@media(min-width:761px){
 .case-title h1{font-size:clamp(75px,8.8vw,156px)}
 .hero-split .case-title h1{font-size:clamp(64px,6.5vw,112px)}
 .hero-float .case-title h1{font-size:clamp(72px,8vw,145px)}
 .hero-editorial .case-title h1{font-size:clamp(65px,7vw,124px)}
 .hero-cinema .case-title h1{font-size:clamp(76px,min(11vw,17svh),190px)}
 .hero-cinema[data-project=bioalimentar] .case-title h1{font-size:clamp(70px,10.4vw,175px)}
 .case-nav{width:auto;padding:6px 6px 6px 20px!important;gap:26px!important}
 .case-nav>span:first-child{display:block}
 .case-nav>div{display:flex;width:auto}
 .case-nav a{font-size:12px;padding:9px 14px}
}
@media(min-width:901px){
 .site-header,.site-navigation-ready .site-header{height:94px;flex-wrap:nowrap;padding-block:0;gap:20px}
 .site-header .site-logo{width:132px}
 .site-header .menu-toggle{display:none}
 .site-header .site-nav,.site-navigation-ready .site-nav,.site-navigation-ready .site-nav.is-open{position:relative;top:auto!important;left:auto!important;right:auto!important;display:flex;flex-direction:row;flex-wrap:nowrap;width:auto;max-height:none;overflow:visible;gap:2px!important;padding:5px!important;border-radius:44px;background:#ffffff0c!important;box-shadow:inset 0 0 0 1px #ffffff14}
 .site-header .site-nav>a,.site-navigation-ready .site-nav>a{width:auto;font-size:13px!important;font-weight:400;padding:10px 17px!important;border-radius:30px;white-space:nowrap}
 .site-header .site-nav .mobile-contact{display:none!important}
 .site-header .site-nav a[aria-current=page]:after{content:"";display:block;position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:50%;transform:translateX(-50%);background:currentColor}
 .site-header .site-nav>a:hover,.site-header .site-nav>a[aria-current=page]{background:transparent}
 .site-header .lx-nav-pill{display:block}
 .work-toolbar{flex-direction:row;align-items:center;flex-wrap:wrap}
 .work-search{width:240px}
}
@media(min-width:1101px){
 .site-header .button-link{display:inline-flex;font-size:12px;padding:12px 18px;white-space:nowrap}
 .contact-conversation{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
}
/* The dropdown menu keeps its opening animation across its whole range (phones and tablets). */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
 .site-navigation-ready .site-nav.is-open{animation:lx-drop .55s var(--lx-ease) both}
}
/* The cookie notice never covers the open menu; it comes back when the menu closes. */
.lx-nav-open .tb-cookies{opacity:0;visibility:hidden;pointer-events:none}