/* Fernando Vilanova — site styles
   Dark ground so the films carry the color. Heavy grotesk display, mono labels. */
:root{
  --bg:#0E0E0E;
  --panel:#161616;
  --tile:#181818;
  --fg:#EDEBE6;
  --fg-2:rgba(237,235,230,.86);
  --fg-3:rgba(237,235,230,.68);
  --muted:#A8A6A1;
  --rule:#2A2A2A;
  --display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --gutter:56px;
  --logo-tone:.55;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--display);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.mono{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.muted{color:var(--muted)}
.display{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;text-wrap:balance;margin:0}

/* Header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:32px;padding-bottom:32px}
.site-header.solid{position:relative}
.brand{display:flex;flex-direction:column;gap:4px;text-decoration:none}
.brand-name{font-size:17px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.brand-sub{font-size:10px}
.nav{display:flex;gap:32px;align-items:center}
.nav a{text-decoration:none;opacity:.9}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.lang{color:var(--muted)}
.menu-btn{display:none;background:none;border:1px solid var(--fg);color:var(--fg);min-height:44px;padding:0 16px;cursor:pointer}

/* Hero */
.hero{position:relative;height:min(88vh,860px);min-height:560px;background:var(--panel);overflow:hidden}
.hero-media{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-media iframe{position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,14,.82),rgba(14,14,14,.12) 45%,rgba(14,14,14,.35))}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding-bottom:64px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:32px}
.hero h1{font-size:clamp(30px,7vw,104px);white-space:nowrap}
.hero .sub{margin-top:18px;color:#D6D3CD;font-size:12px}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 24px;border:1px solid var(--fg);background:transparent;color:var(--fg);text-decoration:none;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.btn:hover{background:var(--fg);color:var(--bg)}

/* Sections */
.section{padding-top:160px;padding-bottom:160px}
.statement{display:flex;justify-content:center}
.statement>div{max-width:1200px;width:100%;display:flex;flex-direction:column;gap:40px}
.statement h2{font-size:96px;letter-spacing:-.05em}
.lead{margin:0;max-width:820px;font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--fg-2)}
.body{font-size:18px;font-weight:600;line-height:1.5;color:var(--fg-3);margin:0;max-width:65ch}

.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--rule);padding-top:24px;margin-bottom:40px}
.section-head h2{font-size:44px;letter-spacing:-.04em}

/* Doors */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:160px}
.door{display:flex;flex-direction:column;gap:20px;text-decoration:none}
.door-img{aspect-ratio:4/3;background:var(--tile) center/cover no-repeat;transition:filter .3s ease}
.door:hover .door-img{filter:brightness(1.12)}
.door-title{font-size:36px;font-weight:900;letter-spacing:-.035em;line-height:1;text-transform:uppercase}
.row-between{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}

/* Tiles */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 24px}
.grid.selected{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 24px}
.tile{display:flex;flex-direction:column;gap:16px;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;min-width:0}
.tile.feature{grid-column:span 2}
.thumb{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--tile) center/cover no-repeat;overflow:hidden}
.tile.feature .thumb{aspect-ratio:2.39/1}
.thumb::after{content:"";position:absolute;inset:0;background:rgba(14,14,14,0);transition:background .3s ease}
.tile:hover .thumb::after{background:rgba(14,14,14,.18)}
.play{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(14,14,14,.72);opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;z-index:1}
.tile:hover .play,.tile:focus-visible .play{opacity:1;transform:none}
.tile-title{font-size:24px;font-weight:900;letter-spacing:-.03em;line-height:1.02;text-transform:uppercase;text-wrap:balance}
.grid.selected .tile-title{font-size:32px}
.tile-meta{display:flex;flex-direction:column;gap:6px}

/* Project-page galleries: big images, quiet captions */
.grid.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}
.grid.gallery .tile{gap:10px}
.grid.gallery .tile-title{font-size:14px;font-weight:700;letter-spacing:0;line-height:1.3;text-transform:none}
.grid.gallery .tile-meta{flex-direction:row;flex-wrap:wrap;gap:4px 14px}
.grid.gallery .tile-meta .mono{font-size:10px}

/* Filters */
.page-head{padding-top:64px;padding-bottom:48px;display:flex;flex-direction:column;gap:24px}
.page-head h1{font-size:clamp(44px,8vw,120px)}
.filters{display:flex;flex-direction:column;gap:14px;padding-bottom:48px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 16px;border:1px solid var(--rule);background:transparent;color:var(--fg);cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip .count{opacity:.55;margin-left:6px}
.chips.sub .chip{min-height:34px;font-size:10px}

/* Credits */
.credits{padding-top:120px;padding-bottom:120px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;font-weight:600}
th{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule)}
td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);color:var(--fg-3)}
td:first-child{color:var(--fg)}

/* Proof + clients */
.proof{text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px;border-top:1px solid var(--rule);padding-top:120px;padding-bottom:120px}
.proof .display{font-size:64px}
.clients{display:flex;flex-direction:column;align-items:center;gap:40px;padding-top:80px;padding-bottom:120px}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px 64px;max-width:1100px}
.logo{height:28px;width:auto;max-width:170px;object-fit:contain;filter:brightness(0) invert(var(--logo-tone))}

/* Reel page */
.reels{display:flex;flex-direction:column;gap:96px;padding-bottom:160px}
.reel{display:flex;flex-direction:column;gap:20px}
.player{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--tile)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;padding-bottom:120px}
.portrait{aspect-ratio:4/5;background:var(--tile);display:flex;align-items:center;justify-content:center;color:#6E6E6E}
.bio{display:flex;flex-direction:column;gap:22px}
.bio p{margin:0;font-size:20px;font-weight:600;line-height:1.5;color:var(--fg-2);max-width:62ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--rule);padding-top:48px;padding-bottom:120px}
.fact h3{margin:0 0 12px;font-size:26px;font-weight:900;letter-spacing:-.03em;text-transform:uppercase}
.fact p{margin:0;font-size:17px;font-weight:600;line-height:1.5;color:var(--fg-3)}

/* Contact */
.contact-list{display:flex;flex-direction:column;gap:28px;padding-bottom:160px}
.contact-item{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--rule);padding-top:20px}
.contact-item .value{font-size:clamp(24px,4vw,44px);font-weight:900;letter-spacing:-.03em;text-decoration:none;word-break:break-word}

/* Footer */
.site-footer{border-top:1px solid var(--rule);padding-top:48px;padding-bottom:48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.site-footer .email{font-size:22px;font-weight:900;letter-spacing:-.02em;text-decoration:none}
.footer-links{display:flex;gap:28px;flex-wrap:wrap}
.footer-links a{text-decoration:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.96);display:flex;flex-direction:column;justify-content:center;gap:20px;padding:24px var(--gutter)}
.lightbox .player{width:min(100%,calc((100vh - 200px) * 16 / 9));margin:0 auto}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;width:min(100%,calc((100vh - 200px) * 16 / 9));margin:0 auto}
.lb-title{font-size:22px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.lb-actions{display:flex;gap:8px}
.lb-actions button{min-height:44px;padding:0 16px;background:none;border:1px solid var(--rule);color:var(--fg);cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.lb-actions button:hover{border-color:var(--fg)}

@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--gutter:16px}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:84px;left:16px;right:16px;flex-direction:column;align-items:flex-start;gap:18px;padding:24px;background:var(--bg);border:1px solid var(--rule)}
  .menu-btn{display:inline-flex;align-items:center}
  .doors,.grid,.grid.selected,.about-grid,.facts{grid-template-columns:repeat(1,minmax(0,1fr))}
  .tile.feature{grid-column:auto}
  .tile.feature .thumb{aspect-ratio:16/9}
  .statement h2{font-size:52px}
  .proof .display{font-size:34px}
  .section{padding-top:96px;padding-bottom:96px}
  .grid.selected .tile-title,.tile-title{font-size:24px}
  .grid.gallery{gap:32px}
  .grid.gallery .tile-title{font-size:14px}
  .door-title{font-size:28px}
  .logos{gap:28px 36px}
  .logo{height:20px}
  .lb-bar{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}
[hidden]{display:none !important}
@media (max-width:600px){.grid.gallery{grid-template-columns:repeat(1,minmax(0,1fr))}}

/* Collapsed credits list */
.credits{padding-top:96px;padding-bottom:120px}
.credit-list{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.credit-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:56px;font-size:11px}
.credit-list summary::-webkit-details-marker{display:none}
.credit-list summary .plus{margin-left:auto;font-size:16px;font-weight:500;transition:transform .2s ease}
.credit-list[open] summary .plus{transform:rotate(45deg)}
.credit-list summary:hover{color:#fff}
.credit-list table{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;margin-bottom:28px}
.credit-list th{font-size:10px;color:var(--muted);font-weight:700;padding:10px 24px 10px 0}
.credit-list td{padding:9px 24px 9px 0;color:var(--muted);border-bottom:1px solid #1E1E1E}
.credit-list td:first-child{color:var(--fg-2)}

/* Black behind every player, never the browser's white iframe backdrop */
.player,.lightbox .player{background:#000}
.player iframe,.hero-media iframe{color-scheme:light;background:#000}

img.portrait{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover}

/* Native aspect ratios everywhere: nothing is cropped into a shape the film wasn't shot in */
.tile.feature .thumb{aspect-ratio:auto}
.thumb{background-size:cover}
.grid,.grid.selected,.grid.gallery{align-items:start}
.door-img{aspect-ratio:16/9}
.hero{height:min(56.25vw,100vh);min-height:420px}

/* Statement: tighter, and aligned to the same left edge as the work below */
.statement{justify-content:flex-start;padding-top:96px;padding-bottom:72px}
.statement>div{gap:32px}
@media (max-width:900px){.statement{padding-top:64px;padding-bottom:48px}}

/* Doors: image-led, title set on the frame */
.door{position:relative;display:block;overflow:hidden}
.door-img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.door:hover .door-img{transform:scale(1.03);filter:brightness(1.05)}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.78),rgba(10,10,10,0) 45%);pointer-events:none}
.door-label{position:absolute;left:28px;right:28px;bottom:24px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.door-label .door-title{font-size:clamp(22px,2.6vw,38px)}
.door-go{opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .3s ease}
.door:hover .door-go,.door:focus-visible .door-go{opacity:1;transform:none}
@media (max-width:900px){.door-label{left:16px;right:16px;bottom:16px}.door-go{opacity:1;transform:none}}

/* Tighter rhythm: doors → selected work, and mobile selected-work spacing */
.doors{padding-bottom:72px}
.grid.selected{gap:48px 24px}
.grid.selected .tile{gap:12px}
@media (max-width:900px){
  .doors{gap:16px;padding-bottom:48px}
  .section-head{margin-bottom:24px;padding-top:20px}
  .grid.selected{gap:28px}
  .grid.selected .tile{gap:10px}
  .grid.selected .tile-title{font-size:20px}
}

/* Local order preview bar (from /arrange) */
.preview-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;background:var(--fg);color:var(--bg);padding:10px 16px;font-size:11px;letter-spacing:.06em;max-width:calc(100% - 32px);text-align:center}
.preview-bar a,.preview-bar button{color:inherit;font:inherit;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}

/* Language switch */
.lang a{text-decoration:none;color:var(--muted)}
.lang a[aria-current="true"]{color:var(--fg)}
.lang a:hover{color:var(--fg)}

/* Captions as hover overlays: galleries read as pure image */
.tile,.grid.gallery .tile,.grid.selected .tile{gap:0}
.grid.gallery{gap:16px}
.grid.selected{gap:16px}
.thumb::after{background:linear-gradient(to top,rgba(10,10,10,.82),rgba(10,10,10,.25) 45%,rgba(10,10,10,0) 70%);opacity:0;transition:opacity .35s ease}
.tile:hover .thumb::after,.tile:focus-visible .thumb::after{background:linear-gradient(to top,rgba(10,10,10,.82),rgba(10,10,10,.25) 45%,rgba(10,10,10,0) 70%);opacity:1}
.thumb{transition:background-size .6s ease}
.cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;color:var(--fg)}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
.cap .tile-title,.grid.gallery .cap .tile-title,.grid.selected .cap .tile-title{font-size:15px;font-weight:700;letter-spacing:0;line-height:1.3;text-transform:none;text-wrap:balance}
.grid.selected .tile.feature .cap .tile-title{font-size:18px}
.cap .tile-meta,.grid.gallery .cap .tile-meta{flex-direction:row;flex-wrap:wrap;gap:4px 14px}
.cap .tile-meta .mono{font-size:10px;color:rgba(237,235,230,.72)}
.play-dot{position:absolute;top:16px;right:16px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(237,235,230,.7);display:flex;align-items:center;justify-content:center;color:var(--fg);opacity:0;transition:opacity .3s ease}
.play-dot svg{margin-left:2px}
.tile:hover .play-dot,.tile:focus-visible .play-dot{opacity:1}
/* Hover overlay only on desktop pointers; phones/tablets keep captions under the image */
.below{display:none}
@media (hover:none),(max-width:900px){
  .cap,.play-dot{display:none}
  .thumb::after,.tile:hover .thumb::after{opacity:0}
  .below{display:flex;flex-direction:column;gap:8px;padding-top:12px}
  .below .tile-title{font-size:20px;font-weight:900;letter-spacing:-.03em;line-height:1.05;text-transform:uppercase;text-wrap:balance}
  .grid.gallery .below .tile-title{font-size:14px;font-weight:700;letter-spacing:0;line-height:1.3;text-transform:none}
  .below .tile-meta{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 14px}
  .below .tile-meta .mono{font-size:10px}
  .grid.selected{gap:28px}
  .grid.gallery{gap:28px 16px}
}
/* Headlines scale with the screen on phones so nothing is cut off */
@media (max-width:900px){
  .page-head h1{font-size:clamp(28px,9vw,64px)}
  .statement h2{font-size:clamp(30px,10.5vw,52px)}
  .proof .display{font-size:clamp(24px,7.5vw,34px)}
  .section-head h2{font-size:clamp(28px,9vw,44px)}
  .display,.door-title,.tile-title{overflow-wrap:break-word}
  body{overflow-x:hidden}
}
@media (max-width:900px){
  .site-footer .email{font-size:clamp(15px,5vw,22px);overflow-wrap:anywhere}
  .hero h1{font-size:clamp(22px,7.6vw,104px)}
}

/* Reel button: top right of the hero, under the menu, away from the name */
.hero .reel-btn{position:absolute;top:104px;right:var(--gutter);z-index:21;min-height:40px;padding:0 16px;font-size:11px;background:rgba(14,14,14,.25);border-color:rgba(237,235,230,.7);backdrop-filter:blur(4px)}
.hero .reel-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media (max-width:900px){.hero .reel-btn{top:96px}}

/* Door labels: title stacked above "View work", bottom-left */
.door-label{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;bottom:26px}
.door-go{transform:translateY(4px)}
@media (max-width:900px){.door-label{bottom:16px;gap:8px}}

/* Keep door stills true to the grade: lighter label gradient, no brightness shift */
.door::after{background:linear-gradient(to top,rgba(10,10,10,.6),rgba(10,10,10,0) 35%)}
.door:hover .door-img{filter:none}

/* Hero reels: layered players that crossfade */
.hero-media iframe.hero-layer{opacity:0;transition:opacity 1.2s ease}
.hero-media iframe.hero-layer.on{opacity:1}
.reel-switch{position:absolute;right:0;bottom:64px;z-index:21;display:flex;gap:18px}
.reel-switch button{background:none;border:0;padding:6px 0;color:rgba(237,235,230,.55);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;border-bottom:1px solid transparent}
.reel-switch button:hover{color:var(--fg)}
.reel-switch button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)}
@media (max-width:900px){.reel-switch{bottom:auto;top:146px;left:auto;gap:14px}.reel-switch button{font-size:10px}}

/* Reel switch as hollow dots; black until the film is actually playing */
.hero,.hero-media{background:#000 !important}
.reel-switch{gap:12px;align-items:center}
.reel-switch .dot{width:10px;height:10px;padding:0;border-radius:50%;border:1px solid rgba(237,235,230,.75);background:transparent;transition:background .3s ease,border-color .3s ease}
.reel-switch .dot:hover{border-color:var(--fg)}
.reel-switch .dot[aria-pressed="true"]{background:var(--fg);border-color:var(--fg)}
.reel-switch .dot::before{content:"";position:absolute;inset:-12px}
.reel-switch .dot{position:relative}
@media (max-width:900px){.reel-switch{top:auto;bottom:28px;right:0}}

/* Client logos: one-colour marks, sized for equal visual weight */
.logos{gap:44px 72px;max-width:1180px}
.logo{height:calc(var(--h,28) * 1px);max-width:none;filter:brightness(0) invert(var(--logo-tone));opacity:1}
@media (max-width:900px){.logos{gap:28px 40px}.logo{height:calc(var(--h,28) * .7px)}}

/* Awards */
.award-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.award-list li{display:grid;grid-template-columns:80px minmax(0,1.2fr) minmax(0,1fr);gap:8px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.award{font-size:18px;font-weight:700;letter-spacing:-.01em}
.award-work{font-size:15px;font-weight:600;color:var(--fg-3)}
.award-work em{font-style:normal;color:var(--fg-2)}
@media (max-width:700px){.award-list li{grid-template-columns:56px minmax(0,1fr)}.award-work{grid-column:2}.award{font-size:16px}}

/* About: client logos */
.about-clients .logos{justify-content:flex-start;max-width:none;padding:16px 0 8px}
.also{line-height:1.8;max-width:80ch}
.about-clients .logos{justify-content:center;max-width:1180px;margin:0 auto}

/* Representation contact */
.rep{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:6px;font-size:17px;font-weight:600;color:var(--fg-2)}
.rep a{text-decoration:none}
.rep a:hover{text-decoration:underline;text-underline-offset:4px}

/* Portrait at its native 2:3 */
img.portrait{aspect-ratio:978/1468;object-fit:cover;background:#000}