/* El Florentino: artwork-led editorial presentation. */
:root{--panel:#f5f6fa;--panel-blue:#eef1ff;--edge:#e6e8ef;--radius:22px;--ease-editorial:cubic-bezier(.16,1,.3,1);--pad:clamp(20px,3.4vw,64px)}
::selection{background:var(--accent);color:var(--paper)}
html{scrollbar-gutter:stable}
body{background:var(--paper)}
.scroll-progress{height:2px;background:var(--accent)}
.header{min-height:90px;border-bottom-color:var(--edge)}
.header .logo-star{color:var(--accent)}
.header-location{margin-inline-start:clamp(12px,4vw,68px)}
.header nav{gap:clamp(16px,2vw,32px)}
.header nav>a{font-size:14px}
.header nav .nav-contact{border:0;border-radius:999px;padding:11px 19px;background:var(--accent);color:var(--paper);gap:20px;transition:background .25s,transform .35s var(--ease-editorial)}
.header nav .nav-contact::after{display:none}
.header nav .nav-contact:hover{background:var(--accent-hover)}
.site-language-bar{padding-block:10px 4px;gap:12px;color:var(--muted)}
.site-language-bar select{background:var(--paper);border-color:var(--edge);border-radius:999px;min-height:44px}
.hero{padding-top:48px;padding-bottom:72px}
.hero h1{font-size:clamp(58px,10.3vw,166px);font-weight:500;letter-spacing:-.06em;line-height:1.01;margin-top:46px}
.hero h1 .period{color:var(--accent)}
.hero-arrow{color:var(--paper);font-size:.46em;margin-inline-start:.45em;transition:background .3s,transform .65s var(--ease-editorial)}
.hero-bottom{margin-top:44px;gap:36px}
.hero-bottom p{font-size:clamp(18px,1.65vw,24px);line-height:1.5;letter-spacing:-.02em;max-width:43ch}
.text-link,.archive-link{min-height:48px;transition:color .25s,border-color .25s}
.text-link:hover,.archive-link:hover{color:var(--accent);border-color:var(--accent)}
.eyebrow,.hero-edition,.case-kicker,.section-bar,.project-year,.lx-kicker,.oc-kicker{font-variant-numeric:tabular-nums;letter-spacing:.035em}
.section-bar{padding-block:24px;border-color:var(--edge)}
.project-grid{gap:42px 20px}
.project-button{border-radius:var(--radius);text-align:start}
.project-visual{border-radius:var(--radius);isolation:isolate;background:var(--panel);border:1px solid #17171708}
.project-visual img{transition:transform 1s var(--ease-editorial);will-change:auto}
.project .project-visual,.wide .project-visual,.archive-grid .project-visual{aspect-ratio:var(--cover-ratio,4/3);height:auto;min-height:0}
.project-visual img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-grid{align-items:start}
.work .project:not(.wide) .project-visual{aspect-ratio:16/9}
.project-label,.archive-grid .project-label{background:var(--paper);color:var(--ink);border:1px solid var(--edge);backdrop-filter:none;padding:8px 13px;top:18px;inset-inline-start:18px;max-width:calc(100% - 36px);font-size:12px}
.project-open,.archive-grid .project-open{width:54px;height:54px;inset-inline-end:18px;bottom:18px;background:var(--accent);color:var(--paper);transition:transform .65s var(--ease-editorial),background .25s}
.project-caption{padding:20px 3px 0;align-items:start;gap:20px}
.project-caption h3,.archive-grid .project-caption h3{font-size:clamp(24px,2.6vw,38px);font-weight:500;letter-spacing:-.045em;line-height:1.15}
.project-caption p{font-size:14px;margin-top:9px;color:var(--muted)}
.project-year{padding-top:5px;white-space:nowrap}
.work{padding-bottom:76px}
.work-bottom{margin-top:44px}
.archive-title-row h1{font-size:clamp(72px,11vw,160px);font-weight:500;letter-spacing:-.06em;line-height:1.04}
.archive-title-row{margin-block:44px}
.archive-title-row>p{font-size:20px;letter-spacing:-.02em}
.category-button{border-color:var(--edge);background:var(--paper);transition:background .25s,color .25s,border-color .25s}
.category-button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.category-button[aria-pressed="true"]>span{color:var(--paper)}
.project-search{border-radius:999px;border-color:var(--edge);background:var(--panel);padding-inline:18px}
.gallery-controls{border-color:var(--edge)}
.about h2,.clients-heading h2{font-weight:500;line-height:1.08;letter-spacing:-.045em}
.about{gap:clamp(24px,4vw,68px)}
.portrait img{border-radius:var(--radius)}
.about-details{margin-top:36px}
.disciplines span{border-color:var(--edge);background:var(--panel);border-radius:999px}
.ticker{border-color:var(--edge);color:var(--accent)}
.ticker-track>span{font-weight:500}
.clients-section{border-color:var(--edge)}
.client-buttons button{border-radius:999px;transition:background .25s,color .25s}
.client-buttons button:hover{background:var(--accent);color:var(--paper)}
.contact{margin:0 var(--pad) 24px;border:1px solid var(--edge);border-radius:28px;padding:clamp(28px,4vw,64px);background:var(--paper)}
.contact h2{font-size:clamp(48px,8.8vw,132px);font-weight:500;letter-spacing:-.055em;line-height:1.03}
.contact h2>span{font-family:inherit;font-style:normal;color:var(--accent);line-height:1.07}
.contact-flower{color:var(--accent)}
.contact-cta{border:0;background:var(--accent);color:var(--paper);border-radius:999px;padding:17px 24px;max-width:100%;width:fit-content;gap:48px;font-size:18px;transition:background .25s,translate .4s var(--ease-editorial)}
.contact-cta:hover{background:var(--accent-hover);color:var(--paper)}
.contact-bottom{margin-top:56px}
footer{background:var(--paper);color:var(--ink);border-top:1px solid var(--edge)}
.footer-name{font-weight:500;letter-spacing:-.06em}
.footer-name>span{color:var(--accent)}
.footer-bottom{border-color:var(--edge);color:var(--muted)}
footer a:focus-visible{outline-color:var(--accent)}
.social-links a{transition:color .25s}
.social-links a:hover{color:var(--accent)}
/* Apply a shared title rhythm without changing any case-study chapter order. */
.case-heading,.lx-heading,.verno-heading{padding-top:48px;padding-bottom:52px}
.oc-heading{padding-block:48px 52px}
.case-heading h1,.film-heading h1,.lx-heading h1,.oc-heading h1,.verno-heading h1,.journal-heading h1,.article-body h1,.service-heading h1{font-size:clamp(60px,9.2vw,140px);font-weight:500;letter-spacing:-.05em;line-height:1.04;margin-block:32px;color:var(--ink);overflow-wrap:break-word}
.film-heading--long h1{font-size:clamp(48px,8.8vw,132px)}
.case-heading .blue-period,.lx-heading .blue-period,.oc-heading h1>span{color:var(--accent)}
.case-intro{gap:clamp(28px,6vw,96px)}
.case-heading,.case-body,.film-statement,.film-chapter-heading,.lx-section-heading,.oc-section-heading,.verno-chapter-head{text-align:start}
.case-body{max-width:1480px}
.case-text{max-width:65ch;margin-inline:0;padding-block:clamp(32px,5vw,64px);text-align:start}
.case-media-group{gap:clamp(20px,2.4vw,36px)}
.case-media+.case-media{margin-top:clamp(20px,2.4vw,36px)}
.case-media-group figure{min-width:0}
.case-intro>p,.lx-deck>p,.oc-deck>p,.verno-deck>p{font-size:clamp(20px,2vw,28px);font-weight:400;line-height:1.45;letter-spacing:-.025em}
.case-intro dl,.lx-scope,.oc-facts,.verno-facts{border:1px solid var(--edge);background:var(--panel);border-radius:var(--radius);padding:26px;gap:24px}
.lx-index,.oc-index,.verno-index{border-color:var(--edge)}
.lx-index a,.oc-index a,.verno-index a{min-height:44px;display:inline-flex;align-items:center}
.case-media img,.film-stills img,.film-player video,.lx-hero,.lx-application img,.lx-feature-pair img,.lx-product-grid img,.lx-model-strip img,.lx-web-stage,.lx-material figure img,.oc-case figure img,.verno-case figure img,.verno-film-layout video,.winter-films video,.article-row-image,.article-hero img{border-radius:var(--radius)}
.lx-hero{overflow:hidden;max-width:calc(100% - var(--pad)*2)}
.verno-hero-pair{gap:16px;padding-inline:var(--pad)}
.verno-hero-pair figcaption{padding-inline:0}
.film-stills,.lx-feature-pair,.lx-application,.oc-print-pair,.oc-digital-pair,.verno-pair,.winter-bags{gap:20px}
.lx-product-grid{gap:28px 18px}
.film-chapter-heading h2,.lx-section-heading h2,.oc-section-heading h2,.verno-chapter-head h2{font-weight:500;letter-spacing:-.04em;line-height:1.12}
.film-chapter-heading,.lx-section-heading,.oc-section-heading,.verno-chapter-head{padding-top:80px;padding-bottom:38px}
.film-closing,.lx-closing,.oc-closing,.verno-closing{border-radius:var(--radius)}
.article-prose{max-width:64ch}
.article-row{border-color:var(--edge)}
.article-row-copy h2{font-weight:500;letter-spacing:-.035em}
.service-item,.service-process,.service-contact{border-color:var(--edge)}
/* Native dialog retains focus trapping, Escape, swipe scrolling and real project links. */
#project-dialog{border-radius:26px;border:1px solid var(--edge);box-shadow:0 24px 100px #101d5226}
#project-dialog[open]{animation:editorial-dialog .6s var(--ease-editorial) both}
#project-dialog::backdrop{background:#10152c66;backdrop-filter:blur(6px)}
.dialog-toolbar{border-color:var(--edge);padding:14px 28px}
#close-dialog{min-height:44px;border-radius:999px;background:var(--panel);padding-inline:16px}
.preview-layout{padding:28px;gap:36px;align-items:start}
.preview-media{border-radius:18px;background:transparent;aspect-ratio:var(--preview-ratio,1);width:min(100%,calc(66svh * var(--preview-ratio,1)));align-self:start;justify-self:start;min-height:0}
#detail-image{display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;background:transparent}
#detail-image[hidden]{display:none}
.preview-content{justify-content:flex-start;text-align:start}
#project-dialog[data-orientation="landscape"]{width:min(900px,94vw)}
#project-dialog[data-orientation="landscape"] .preview-layout{grid-template-columns:minmax(0,1fr)}
#project-dialog[data-orientation="landscape"] .preview-media{width:100%}
#project-dialog[data-orientation="landscape"] .preview-content{max-width:68ch}
.preview-content h2{font-weight:500;letter-spacing:-.045em}
.preview-details{border-radius:999px;transition:background .25s,transform .4s var(--ease-editorial)}
.preview-navigation{border-color:var(--edge);padding:18px 28px}
#next-project{min-height:44px}
/* Keep the scroll track inside the rounded dialog and the close control visible. */
#project-dialog{overflow:hidden;padding:0}
.dialog-scroll{max-height:calc(100dvh - 112px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#979da9 transparent;scrollbar-gutter:stable}
.dialog-scroll::-webkit-scrollbar{width:6px;height:6px}
.dialog-scroll::-webkit-scrollbar-track{background:transparent;margin-block:12px}
.dialog-scroll::-webkit-scrollbar-thumb{background:#979da9;border-radius:999px}
.dialog-scroll::-webkit-scrollbar-thumb:hover{background:#676e7b}
.dialog-scroll::-webkit-scrollbar-button{display:none;width:0;height:0}
.dialog-scroll::-webkit-scrollbar-corner{background:transparent}
/* Reuse Luxsy's existing opening composition, with its original logo and image. */
.project-visual.cover-luxsy-split,.preview-media.cover-luxsy-split{display:block;background:#090909;overflow:hidden}
.cover-luxsy-split .cover-brand{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-width:0;min-height:0;padding:3% 3% 3.5%;color:#fff;background:#090909;position:absolute;inset:0 auto 0 0;width:52.381%;height:100%;direction:ltr}
.cover-luxsy-split .cover-brand>span{font-size:clamp(9px,.75vw,12px);line-height:1.3}
.cover-luxsy-split .cover-brand>p{font-size:clamp(10px,1.25vw,20px);line-height:1.35;text-align:center;letter-spacing:-.025em}
.cover-luxsy-split .cover-brand>img{position:static;inset:auto;width:100%;height:70%;min-height:0;object-fit:contain;filter:brightness(0) invert(1);transform:none!important}
.project-visual.cover-luxsy-split>img,.preview-media.cover-luxsy-split>#detail-image{position:absolute;inset:0 0 0 auto;width:47.619%;height:100%;object-fit:cover;object-position:center;transform:none!important}
.preview-media.cover-luxsy-split{position:relative}
.cover-luxsy-split .project-label{display:none}
.preview-media.cover-luxsy-split .cover-brand>p{font-size:clamp(12px,2vw,22px)}
.preview-media.cover-luxsy-split .cover-brand>span{font-size:12px}
/* Content is visible by default; JS opts eligible blocks into once-only reveals. */
.motion-ready .reveal{transition:opacity .85s var(--ease-editorial),transform 1.05s var(--ease-editorial);transition-delay:var(--reveal-delay,0ms);transform:translateY(32px)}
.motion-ready .reveal.visible{opacity:1;transform:none}
.motion-ready .reveal:focus-within{opacity:1;transform:none;transition:none}
.motion-ready .reveal .reveal{opacity:1;transform:none;transition:none}
.title-word{display:inline-block!important;white-space:nowrap}
.title-glyph{display:inline-block;animation:editorial-type .95s var(--ease-editorial) both;animation-delay:var(--glyph-delay,0ms)}
@keyframes editorial-type{from{opacity:0;transform:translateY(.65em) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes editorial-dialog{from{opacity:0;transform:translateY(32px) scale(.97)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
 .project-button:hover .project-visual img{transform:scale(1.045)}
 .project-button:hover .project-open{transform:rotate(45deg);background:var(--accent-hover)}
 .project-button:hover .project-caption h3{color:var(--accent)}
 .preview-details:hover{transform:translateY(-2px)}
}
@media(max-width:1100px){.header-location{margin-inline-start:0}.header nav{gap:12px 20px}.contact h2{font-size:9vw}}
@media(max-width:700px){
 :root{--radius:16px;--pad:20px}
 .header{padding-block:10px 8px;min-height:94px}
 .header nav{justify-content:space-between;gap:4px 12px}
 .header nav>a{font-size:13px}
 .header nav .nav-contact{padding:9px 13px;gap:9px}
 .header-location{font-size:11px;max-width:126px}
 .hero{padding-top:28px;padding-bottom:46px}
 .hero h1{font-size:11.5vw;line-height:1.06;letter-spacing:-.055em;margin-top:36px}
 .hero-bottom{margin-top:28px;gap:26px}
 .hero-bottom p{font-size:18px;line-height:1.6}
 .hero-arrow{font-size:.43em;margin-inline-start:.28em}
 .project-grid{gap:32px 16px}
 .project-label,.archive-grid .project-label{top:12px;inset-inline-start:12px;padding:7px 10px;max-width:calc(100% - 24px)}
 .project-open,.archive-grid .project-open{width:44px;height:44px;inset-inline-end:12px;bottom:12px}
 .project-caption{padding-top:16px;gap:14px}
 .project-caption h3,.archive-grid .project-caption h3{font-size:27px}
 .archive-title-row h1{font-size:clamp(56px,17vw,108px)}
 .archive-title-row>p{font-size:18px}
 .about{gap:26px 20px}.about-details{margin-top:0}
 .about h2{font-size:clamp(27px,6.5vw,44px);line-height:1.14}
 .contact{margin-inline:var(--pad);padding:28px 22px;border-radius:20px}
 .contact h2{font-size:clamp(30px,8.2vw,58px);line-height:1.12;overflow-wrap:break-word}
 .contact-cta{width:100%;font-size:16px;gap:16px;justify-content:space-between;padding:15px 18px}
 .contact-bottom{margin-top:36px}
 .case-heading,.lx-heading,.verno-heading{padding-top:28px;padding-bottom:34px}
 .oc-heading{padding-block:28px 34px}
 .case-heading h1,.film-heading h1,.lx-heading h1,.oc-heading h1,.verno-heading h1,.journal-heading h1,.article-body h1,.service-heading h1{font-size:clamp(40px,11vw,76px);line-height:1.09;letter-spacing:-.045em;margin-block:26px}
 .film-heading--long h1{font-size:10.6vw}
 .case-intro>p,.lx-deck>p,.oc-deck>p,.verno-deck>p{font-size:21px}
 .case-intro dl,.lx-scope,.oc-facts,.verno-facts{padding:20px;gap:20px}
 .lx-hero{max-width:calc(100% - var(--pad)*2)}
 .verno-hero-pair{gap:12px}
 .film-chapter-heading,.lx-section-heading,.oc-section-heading,.verno-chapter-head{padding-top:48px;padding-bottom:28px}
 .film-stills,.lx-application,.oc-print-pair,.oc-digital-pair,.verno-pair,.winter-bags{gap:16px}
 #project-dialog{border-radius:20px;max-height:calc(100dvh - 24px)}
 .dialog-toolbar{padding:10px 18px}
 .preview-layout{padding:18px;gap:24px}
 .preview-media{width:min(100%,calc(52svh * var(--preview-ratio,1)));justify-self:center}
 #detail-image{height:100%;max-height:none}
 .preview-navigation{padding:16px 18px}
 .motion-ready .reveal{transform:translateY(18px);transition-duration:.65s}
}
html[lang="ar"] .title-glyph{letter-spacing:0;transform-origin:center}
html[lang="ar"] :is(.hero h1,.case-heading h1,.lx-heading h1,.oc-heading h1,.verno-heading h1,.journal-heading h1,.service-heading h1,.contact h2){line-height:1.35;letter-spacing:0}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .title-glyph,#project-dialog[open]{animation:none!important;transform:none!important;opacity:1!important}
 .motion-ready .reveal{opacity:1!important;transform:none!important;transition:none!important}
 .project-visual img,.project-open,.hero-arrow,.preview-details{transition:none!important;transform:none!important}
}

/* Curated work and a calmer, image-led mobile presentation. */
.archive-grid .project .project-visual{aspect-ratio:16/10}
.archive-grid .project-caption h3{font-size:clamp(23px,2vw,32px);text-wrap:balance}
.mobile-intro,.mobile-bio{display:none}
@media(max-width:700px){
 .header{grid-template-columns:minmax(0,1fr) auto;min-height:72px;padding-block:12px;gap:0 12px}
 .header .wordmark{font-size:25px;letter-spacing:-.05em;gap:8px;white-space:nowrap}
 .header .logo-star{width:25px;height:25px}
 .header-location{display:none}
 .mobile-ready .menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:76px;min-height:44px;padding:8px 12px;border-radius:999px;background:var(--panel);font-size:14px}
 .menu-toggle span{transition:transform .2s}
 .menu-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
 .mobile-ready .header nav:not(.is-open){display:none}
 .header nav{grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-block:16px 4px;max-height:75svh;overflow-y:auto;width:100%}
 .header nav>a{font-size:18px;padding:10px 8px;min-height:48px;justify-content:space-between}
 .header nav .nav-contact{padding:12px 18px;justify-content:space-between}
 .header nav .site-language-bar{justify-content:space-between;padding:12px 4px 0;border-top:1px solid var(--edge);margin-top:8px}
 .hero{padding-top:30px;padding-bottom:34px}
 .hero-top,.hero #intro,.hero-bottom>.text-link{display:none}
 .hero h1{font-size:clamp(34px,10.5vw,72px);line-height:1.08;margin-top:0;letter-spacing:-.055em}
 .hero-bottom{margin-top:20px;display:block}
 .mobile-intro{display:block;font-size:16px!important;line-height:1.6!important;max-width:33ch!important}
 .hero-arrow{min-width:44px;min-height:44px}
 .section-bar{font-size:12px;padding-block:20px}
 .section-bar>span:last-child{display:none}
 .work{padding-bottom:44px}
 .work .project .project-visual{aspect-ratio:16/10}
 .project-grid{grid-template-columns:minmax(0,1fr);gap:30px}
 .project-grid .project{grid-column:auto}
 .project-label,.archive-grid .project-label{display:none}
 .project-caption,.archive-grid .project-caption{padding-top:12px;gap:12px}
 .project-caption h3,.archive-grid .project-caption h3{font-size:24px;text-wrap:balance}
 .project-caption p{font-size:13px;margin-top:6px}
 .project-year{font-size:12px}
 .project-open,.archive-grid .project-open{width:40px;height:40px;bottom:10px;inset-inline-end:10px}
 .archive-heading{padding-top:28px;padding-bottom:22px}
 .archive-eyebrow>span:last-child,.archive-subline,.archive-title-row>p{display:none}
 .archive-title-row{margin-block:18px 0}
 .archive-title-row h1{font-size:72px;line-height:1.05}
 .gallery-controls{gap:10px;margin-top:0}
 .category-filters{padding-block:0 8px}
 .category-button{min-height:44px;white-space:nowrap;font-size:13px}
 .category-button>span{display:none}
 .project-search{min-height:44px}
 .gallery-status{margin-block:12px 20px;font-size:12px}
 .about .section-kicker,.about-signature,.about-small,.about #biography{display:none}
 .about{padding-block:36px;gap:24px}
 .about-body h2{font-size:32px;text-wrap:balance}
 .about-details{margin-top:18px;gap:0}
 .mobile-bio{display:block}
 .mobile-bio p{font-size:16px;line-height:1.65}
 .mobile-bio details{margin-top:8px}
 .mobile-bio summary{min-height:44px;padding-block:12px;cursor:pointer;color:var(--accent);font-size:14px}
 .mobile-bio details p{padding-top:8px}
 .disciplines{gap:8px;margin-top:20px}
 .disciplines span{font-size:12px;padding:9px 12px}
 .clients-heading{gap:14px}
 .clients-heading>p{font-size:15px;line-height:1.6}
 .client-slider-hint,.contact-top>.eyebrow,.contact-bottom>span,.footer-bottom>span:last-child{display:none}
 .contact{padding-block:28px;margin-bottom:32px}
 .contact h2{margin-top:0}
 .preview-content h2{font-size:30px}
 #detail-summary{font-size:16px;line-height:1.6}
 .preview-facts{display:none}
 .preview-layout{gap:20px}
 .preview-details{min-height:48px}
 .case-intro>p,.lx-deck>p,.oc-deck>p,.verno-deck>p{font-size:18px;line-height:1.6}
 html[lang="ar"] .hero h1{font-size:10.5vw;line-height:1.4;letter-spacing:0}
 html[lang="ar"] .mobile-bio p{line-height:1.85}
}

/* Studio edition: a single gutter system, native typography and restrained motion.
   Full-width sections use padding only. Never combine viewport-derived padding
   with a narrower max-width: that was the cause of the previous wide-screen bug. */
:root{
 --radius:12px;
 --pad:clamp(20px,3.4vw,64px);
 --folio-gutter:max(var(--pad),calc((100vw - 1600px)/2));
 --folio-space:clamp(56px,7vw,112px);
 --header-offset:90px;
}
html[lang]{scroll-padding-top:calc(var(--header-offset) + 20px)}
.header,.hero,.work,.about,.clients,footer{
 padding-inline:var(--folio-gutter);
 width:100%;max-width:none;margin-inline:0;
}
.header{border-bottom-color:transparent;transition:border-color .25s ease}
.header.is-scrolled{border-bottom-color:var(--edge)}
.header .wordmark{letter-spacing:-.055em}
.header nav .nav-contact{padding:12px 20px}
.site-language-bar{padding-inline:var(--folio-gutter);font-size:12px;padding-block:8px}
.site-language-bar select{font-size:12px;min-width:112px}
.hero{padding-top:36px;padding-bottom:var(--folio-space)}
.hero-top{align-items:center}
.hero-top .eyebrow{display:flex;align-items:center;gap:12px}
.hero-top .eyebrow::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent)}
.hero h1{margin-block:40px 0;font-size:clamp(64px,10.5vw,172px);line-height:.98;letter-spacing:-.065em;font-weight:500}
.hero h1>span{display:block}
.hero .last-line{margin-inline-start:clamp(0px,8vw,128px);white-space:nowrap}
.hero-arrow{width:.9em;height:.9em;min-width:44px;min-height:44px;margin-inline:.38em 0;top:-.06em;font-size:.5em;vertical-align:middle}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:32px;margin-top:40px}
.hero-bottom #intro{font-size:clamp(18px,1.5vw,23px);line-height:1.55;max-width:39ch;margin:0}
.hero-bottom .text-link{justify-self:end;width:260px;max-width:100%;font-size:14px}
.section-bar{padding-block:24px 28px;align-items:baseline;font-size:12px}
.section-bar .muted{margin-inline-start:16px}
.project-grid{counter-reset:folio-work;gap:44px 28px;align-items:start}
.project{counter-increment:folio-work;min-width:0}
.project-button{display:block;width:100%;border-radius:0}
.project-visual{border-radius:var(--radius);border:0;overflow:hidden}
.project-label,.archive-grid .project-label{display:none}
.project-caption{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:20px 0 0}
.project-caption::before{content:counter(folio-work,decimal-leading-zero);font-size:12px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.project-caption>div{min-width:0}
.project-caption h3,.archive-grid .project-caption h3{font-size:clamp(23px,2.3vw,34px);line-height:1.18;letter-spacing:-.045em;text-wrap:balance}
.project-caption p{font-size:13px;margin-top:7px;line-height:1.5}
.project-year{font-size:12px;padding-top:0}
.project-year:empty{display:none}
.project-open,.archive-grid .project-open{width:52px;height:52px;bottom:20px;inset-inline-end:20px;transition:background .25s,transform .45s var(--ease-editorial)}
.project-visual img{transition:transform .8s var(--ease-editorial)}
.work{padding-bottom:var(--folio-space);scroll-margin-top:0}
.work-bottom{padding-top:28px;margin-top:40px;border-top:1px solid var(--edge);gap:24px}
.archive-link{font-size:clamp(18px,1.6vw,24px);letter-spacing:-.025em}
.ticker{padding-block:24px;color:var(--ink)}
.ticker i{color:var(--accent)}
.ticker-track>span{font-size:clamp(36px,4.5vw,72px)}
.about{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;padding-block:var(--folio-space);gap:clamp(32px,6vw,96px)}
.about .section-kicker{margin-bottom:24px}
.portrait{margin:0}
.portrait img{border-radius:var(--radius)}
.about h2{font-size:clamp(36px,4.6vw,72px);line-height:1.08;letter-spacing:-.05em;text-wrap:balance}
.about-details{grid-template-columns:minmax(0,1fr);margin-top:32px;gap:20px}
.about-signature{font-size:20px}
.about-details p{max-width:51ch;font-size:17px;line-height:1.75}
.disciplines{gap:8px;margin-top:28px}
.disciplines span{font-size:12px;padding:8px 12px;background:transparent}
.services-teaser{margin-top:24px}
.clients{padding-block:64px var(--folio-space);border-top:1px solid var(--edge)}
.clients-heading{align-items:end;gap:40px;margin-bottom:36px}
.clients-heading h2{font-size:clamp(38px,5vw,72px);margin-top:16px;letter-spacing:-.055em}
.clients-heading>p{max-width:34ch;font-size:16px;line-height:1.65}
.client-mark{border:0!important;background:transparent!important}
.client-buttons button{min-height:44px;min-width:44px}
.contact{width:auto;max-width:none;margin:0 var(--folio-gutter);padding:clamp(36px,5vw,72px) 0;border:0;border-top:1px solid var(--edge);border-radius:0}
.contact h2{font-size:clamp(52px,8.5vw,136px);font-weight:500;line-height:1.04;letter-spacing:-.065em}
.contact h2>span{letter-spacing:-.065em}
.contact-cta{padding:18px 26px;margin-top:32px;font-size:17px;min-height:56px}
.contact-bottom{margin-top:56px;border-color:var(--edge);align-items:center}
.social-links{gap:12px 24px}
.social-links a,.contact-bottom>a{min-height:44px;display:inline-flex;align-items:center;gap:8px}
footer{padding-block:40px 24px}
.footer-name{font-size:clamp(36px,10.1vw,164px);line-height:1.12}
footer a:focus-visible{outline-color:var(--accent)}
.archive{width:100%;max-width:none;padding-inline:var(--folio-gutter)}
.archive-heading{padding-block:36px 48px}
.archive-title-row{align-items:end;gap:36px;margin-block:32px 0}
.archive-title-row h1{letter-spacing:-.065em;line-height:1.02}
.archive-title-row>p{max-width:29ch;font-size:18px;line-height:1.6}
.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
.archive-grid .project .project-visual{aspect-ratio:16/10}
.gallery-controls{padding-block:24px;gap:20px;border-color:var(--edge)}
.category-button{padding:10px 16px}
.project-search{border-radius:999px;background:transparent;min-height:46px}
.case-media-group{gap:clamp(20px,3vw,40px)}
.case-media+.case-media{margin-top:clamp(20px,3vw,40px)}
.case-intro,.lx-deck,.oc-deck,.verno-deck{align-items:start}
.case-heading h1,.lx-heading h1,.oc-heading h1,.verno-heading h1,.film-heading h1{letter-spacing:-.055em}
.case-intro dl,.lx-scope,.oc-facts,.verno-facts{border-radius:12px;background:transparent}
.lx-section-heading,.oc-section-heading,.verno-chapter-head,.film-chapter-heading{padding-top:var(--folio-space)}
#project-dialog{border-radius:18px}
#project-dialog[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 40px);animation:folio-dialog .32s var(--ease-editorial) both}
.dialog-toolbar{flex:none;padding:14px 24px}
/* An auto basis preserves intrinsic content height in Safari dialogs. */
.dialog-scroll{flex:0 1 auto;min-height:0;max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);overflow-y:auto}
.preview-content h2{line-height:1.12}
.preview-layout{padding:24px;gap:28px}
.preview-media{border-radius:10px;overflow:hidden}
.preview-details{min-height:52px}
#next-project{min-height:44px}
/* A single entrance per line keeps the actual font's spacing and joins intact. */
.title-enter{animation:folio-title .65s var(--ease-editorial) both}
.hero .title-enter{animation:none}
.hero .title-enter>span{animation:folio-title .75s var(--ease-editorial) both}
.hero .title-enter>span:nth-child(2){animation-delay:80ms}
.motion-ready .reveal{transform:translateY(22px);transition:opacity .65s var(--ease-editorial),transform .8s var(--ease-editorial);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.visible{transform:none;opacity:1}
@keyframes folio-title{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes folio-dialog{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
 .project-button:hover .project-visual img{transform:scale(1.025)}
 .project-button:hover .project-open{transform:translate(3px,-3px);background:var(--accent-hover)}
 .hero-arrow:hover{transform:translate(-3px,3px)}
}
@media(min-width:701px){
 html[lang="fr"] .hero h1{font-size:clamp(56px,9vw,144px)}
 html[lang="de"] .hero h1{font-size:clamp(52px,8vw,128px)}
 html[lang="ar"] .hero h1{font-size:clamp(52px,8.5vw,136px);line-height:1.35;letter-spacing:0}
 html:not([lang="en"]) .hero .last-line{white-space:normal;overflow-wrap:normal;margin-inline-start:0}
}
@media(max-width:1000px) and (min-width:701px){
 .about{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px}
 .about h2{font-size:38px}
 .hero-bottom{grid-template-columns:minmax(0,1fr) auto}
}
@media(max-width:700px){
 :root{--radius:10px;--folio-space:48px;--header-offset:72px}
 .header{min-height:72px;padding-block:12px}
 .header nav .site-language-bar{padding-inline:4px}
 .header nav{max-height:calc(100svh - 100px);overscroll-behavior:contain}
 .header nav.is-open{animation:folio-dialog .2s ease-out}
 .hero{padding-top:32px;padding-bottom:36px}
 .hero h1{font-size:10.8vw;line-height:1.05;margin-top:0;letter-spacing:-.055em}
 .hero .last-line{margin-inline-start:0;white-space:nowrap}
 .hero-arrow{width:44px;height:44px;font-size:24px;margin-inline:8px 0;top:0}
 .hero-arrow .ui-icon{width:25px;height:25px}
 .hero-bottom{display:block;margin-top:22px}
 .hero-bottom .mobile-intro{font-size:16px!important;line-height:1.6!important;max-width:32ch!important}
 .section-bar{padding-block:20px;font-size:12px}
 .section-bar .muted{display:inline;margin-inline-start:8px}
 .project-grid,.archive-grid{grid-template-columns:minmax(0,1fr);gap:32px}
 .project-caption{grid-template-columns:22px minmax(0,1fr) auto;padding-top:14px;gap:8px}
 .project-caption h3,.archive-grid .project-caption h3{font-size:23px;line-height:1.18}
 .project-caption::before,.project-year{font-size:12px}
 .work .project:not(.wide) .project-visual,.work .project.wide .project-visual{aspect-ratio:16/10}
 .project-open,.archive-grid .project-open{width:44px;height:44px;bottom:12px;inset-inline-end:12px}
 .work-bottom{display:block;padding-top:24px;margin-top:28px}
 .work-bottom .concept-note{margin-top:12px}
 .about{display:block;padding-block:48px}
 .about-identity,.about-body{display:block}
 .portrait{max-width:320px;width:82%;margin:0 0 30px}
 .portrait figcaption{font-size:10px}
 .about h2,html:not([lang="en"]) .about h2{font-size:clamp(30px,8vw,42px);line-height:1.16;max-width:18ch}
 .about-details{margin-top:20px;display:block}
 .mobile-bio p{font-size:16px;line-height:1.65}
 .disciplines{margin-top:20px}
 .services-teaser{margin-top:24px}
 .clients{padding-block:36px 48px}
 .clients-heading{display:block;margin-bottom:24px}
 .clients-heading h2{font-size:40px;margin-top:12px}
 .clients-heading>p{font-size:15px;margin-top:16px}
 .contact{padding-block:36px}
 .contact h2,html:not([lang="en"]) .contact h2{font-size:8.8vw;line-height:1.13;letter-spacing:-.055em}
 html[lang="ar"] .contact h2{letter-spacing:0;line-height:1.4}
 .contact-cta{width:100%;padding:16px 20px;font-size:16px;margin-top:24px}
 .contact-bottom{margin-top:32px;gap:12px;font-size:13px}
 .contact-bottom .social-links{gap:8px 20px}
 footer{padding-block:28px 20px}
 .footer-name{font-size:9.3vw;letter-spacing:-.065em}
 .archive-heading{padding-top:24px;padding-bottom:28px}
 .archive-title-row{margin-top:16px}
 .gallery-controls{padding-block:18px;gap:12px}
 #project-dialog[open]{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:16px}
 .dialog-toolbar{padding:10px 16px;font-size:11px;gap:12px}
 .preview-layout{padding:16px;gap:24px}
 .preview-navigation{padding:16px;display:block}
 .preview-navigation>span{display:none}
 #next-project{max-width:100%;width:100%;justify-content:space-between}
 .motion-ready .reveal{transform:translateY(12px);transition-duration:.5s}
 .motion-ready .reveal.visible{transform:none}
 html[lang="de"] .hero h1{font-size:9vw}
 html[lang="fr"] .hero h1{font-size:10vw}
 html[lang="ar"] .hero h1{font-size:10.5vw;line-height:1.4;letter-spacing:0}
 html:not([lang="en"]) .hero .last-line{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
 .title-enter,.hero .title-enter>span,#project-dialog[open],.header nav.is-open{animation:none!important;transform:none!important;opacity:1!important}
 .motion-ready .reveal{opacity:1!important;transform:none!important;transition:none!important}
 .project-open,.project-visual img,.hero-arrow,.contact-cta{transition:none!important;transform:none!important;translate:none!important}
}