@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
:root{--editorial-serif:'Instrument Serif',Georgia,'Times New Roman',serif;--paper:#090a09;--ink:#f3f0e9;--blue:#c4b494;--acid:#c4b494;--line:#f3f0e822}body{background:#090a09}header{background:#090a09c7;border-bottom:0;height:88px;backdrop-filter:blur(12px)}.wordmark{font-family:var(--editorial-serif);font-size:34px;font-weight:400;letter-spacing:-1.5px}.wordmark span{font-size:6px;vertical-align:middle}nav{font-size:10px;gap:48px;text-transform:uppercase;letter-spacing:1.3px}.contact-nav{border:0;border-radius:0;padding:10px 0}.contact-nav:hover{background:none;color:#c4b494}nav a:hover{text-underline-offset:7px}#home{margin-top:-88px}
/* The circular window opens onto the user's own campaign image. */
.portal-track{position:relative;height:auto;background:#090a09}.portal-stage{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 53%,#1c2420 0,#0c100e 31%,#090a09 64%);--portal-radius:clamp(160px,20vw,290px);--portal-ring-opacity:1}.portal-frame{position:absolute;inset:0;clip-path:circle(var(--portal-radius) at 50% 48%);z-index:0}.portal-art{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%;filter:brightness(.64) saturate(.7);transform:scale(1.08);will-change:transform}.portal-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#050706d9,transparent 65%),linear-gradient(90deg,#05070640,transparent 80%)}.portal-ring{position:absolute;top:48%;left:50%;width:calc(var(--portal-radius)*2);height:calc(var(--portal-radius)*2);transform:translate(-50%,-50%);border:clamp(7px,1.3vw,20px) solid #27302bc9;border-radius:50%;box-shadow:0 0 0 1px #9fb5a322,0 15px 65px #0009,inset 0 0 26px #000b;opacity:var(--portal-ring-opacity);pointer-events:none;z-index:1}.portal-headline{position:absolute;inset:0;margin:0;font-family:var(--editorial-serif);font-size:clamp(85px,11.7vw,185px);font-weight:400;letter-spacing:-.055em;line-height:.86;z-index:2;pointer-events:none}.portal-word{display:block;position:absolute;white-space:nowrap;will-change:transform,opacity}.portal-word--first{left:18%;top:27%}.portal-word--second{left:51%;top:60%}.portal-intro{position:absolute;left:18.4%;top:23%;font-size:clamp(15px,1.9vw,25px);letter-spacing:-.02em;line-height:1;font-style:italic}.portal-amp{position:absolute;left:60%;top:48%;font-size:.55em;font-style:italic;will-change:opacity}.portal-caption{position:absolute;bottom:35px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:flex-end;font-size:8px;line-height:1.8;letter-spacing:1.4px;color:#d3d3c3;z-index:3}.portal-caption>span:last-child{text-align:right}.portal-scroll{display:flex;align-items:center;gap:16px}.portal-scroll>span{font-size:20px}.portal-chapter{position:absolute;left:8%;bottom:18%;opacity:0;transform:translateY(30px);pointer-events:none;z-index:3;max-width:80%}.portal-chapter h2{font-family:var(--editorial-serif);font-size:clamp(60px,8.5vw,130px);font-weight:400;line-height:.88;letter-spacing:-.05em;margin:22px 0 28px;color:#fff}.portal-chapter h2 em{font-family:inherit}.portal-chapter>a{display:inline-flex;gap:60px;border-bottom:1px solid #f3f0e877;padding:0 0 10px;font-size:12px}.portal-chapter.is-active{pointer-events:auto}.portal-chapter>a:hover{color:#ddd2ba}.portal-enabled .portal-track{height:235svh}.portal-enabled .portal-stage{position:sticky;top:0}
/* Collection layout: quiet type, offset supporting visuals and the approved cover. */
#home .section{padding-left:7%;padding-right:7%}#home .work{padding-top:100px;padding-bottom:50px}#home .section-top{margin-bottom:60px}#home .section-top h2{font-family:var(--editorial-serif);font-size:clamp(58px,7vw,100px);font-weight:400;line-height:.88;letter-spacing:-.04em}#home .section-top h2 em{font-family:inherit}#home .section-top>.eyebrow,#home .section-top .eyebrow{font-size:9px;letter-spacing:2px}#home .section-top>p{font-size:12px;color:#a2a69a}#home .filters{gap:24px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:20px}#home .filters button{border:0;border-radius:0;font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:9px 0;background:none;color:#969c8f}#home .filters button.active{background:none;color:#f3f0e9;border-bottom:1px solid #f3f0e9}#home .filters button:hover{color:#c4b494;background:none}.project-grid{display:flex;flex-direction:column;gap:20px}.editorial-project{display:grid;grid-template-columns:15% 15% 27% 37%;gap:2%;position:relative;min-height:560px;align-items:center;border-bottom:1px solid #f3f0e810;padding:90px 0 70px;isolation:isolate;perspective:1400px}.collection-index{position:absolute;left:0;top:30px;font-size:8px;letter-spacing:1.6px;color:#7f897d}.project-side{margin:0;overflow:hidden;position:relative;aspect-ratio:3/4;align-self:center;background:#111610;z-index:0;will-change:transform}.project-side--first{grid-column:1;grid-row:1;transform:translate3d(0,var(--collage-drift,0px),0);margin-top:20px}.project-side--second{grid-column:2;grid-row:1;transform:translate3d(0,calc(var(--collage-drift,0px)*-1),0);margin-top:150px}.project-side img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease;filter:brightness(.8) saturate(.8)}.editorial-copy{grid-column:3;grid-row:1;align-self:start;z-index:2;position:relative;margin-top:4px;padding:10px 0 25px 3%;pointer-events:none}.editorial-copy>.eyebrow{font-size:7px;letter-spacing:1.8px;color:#9d9e8e}.editorial-copy h3{font-family:var(--editorial-serif);font-size:clamp(45px,5.6vw,92px);font-weight:400;letter-spacing:-.055em;line-height:.95;max-width:50vw;width:max-content;margin:22px 0 28px;color:#f3f0e9;text-shadow:0 3px 24px #000a;transition:transform .7s cubic-bezier(.22,1,.36,1)}.editorial-copy .project-title{font-family:var(--editorial-serif);color:#cfcab9;font-size:23px;line-height:1.3;margin:0 0 22px;max-width:90%;overflow-wrap:anywhere}.project-description{font-size:11px;color:#8e998a;line-height:1.7;max-width:80%;margin:0 0 25px}.editorial-open{font-size:9px;letter-spacing:1px;color:#c3c7ba;display:inline-flex;align-items:center;gap:25px;padding-bottom:7px;border-bottom:1px solid #9fa79155}.editorial-open>span{font-size:19px;transition:transform .5s ease}.project-main{grid-column:4;grid-row:1;margin:95px 0 0;position:relative;z-index:1;align-self:center}.editorial-project .project-image{aspect-ratio:16/11;border-radius:0;background:#111510;display:flex;align-items:center}.editorial-project .project-image>img{object-fit:contain;width:100%;height:100%;filter:brightness(.85) saturate(.85)}.editorial-project .project-arrow{width:36px;height:36px;font-size:20px;right:12px;bottom:12px;background:#e7e9d9}.editorial-project:nth-child(even) .project-side--first{margin-top:130px}.editorial-project:nth-child(even) .project-side--second{margin-top:0}.editorial-project:nth-child(even) .project-main{margin-top:125px}.editorial-project--pack .project-side{background:radial-gradient(ellipse,#1b2a49,#0b1020)}.editorial-project--pack .project-side img{object-fit:contain;padding:18px;transform:rotate(-12deg)}.editorial-project--pack .project-side--second img{transform:rotate(13deg)}.editorial-project .product-pack>img{object-fit:contain!important}.editorial-project:hover .project-side img{filter:brightness(1) saturate(1);transform:scale(1.045)}.editorial-project:hover .project-image>img{filter:brightness(1) saturate(1)}.editorial-project:hover .editorial-copy h3{transform:translateX(5px)}.editorial-project:hover .editorial-open>span{transform:translate(4px,-4px)}.editorial-project--pack:hover .project-side img{transform:rotate(-8deg) scale(1.04)}.editorial-project--pack:hover .project-side--second img{transform:rotate(8deg) scale(1.04)}
#home .clients-strip{background:#090b09;border-top-color:#f3f0e815;border-bottom-color:#f3f0e815;padding-top:35px;padding-bottom:35px}#home .clients-header h2{font-family:var(--editorial-serif);font-size:27px}#home .client-logo{border-color:#e9ebdc0d}#home .about{background:#050805}#home .about h2{font-family:var(--editorial-serif);font-size:clamp(64px,7.4vw,105px);font-weight:400;line-height:.88}#home .about h2 em{font-family:inherit;color:#a6b9a2}#home .about-portrait img{width:90%;max-width:430px}#home .bio p.large{font-family:var(--editorial-serif);font-size:30px;color:#e0e5d9}#home .bio p{color:#9aa793}#home .services span{color:#b6c2a9;border-color:#50624a}#home .contact{background:#11180f}#home .contact h2{font-family:var(--editorial-serif);font-size:clamp(55px,8vw,125px);line-height:.88}#home .contact h2>span{color:#aabd9f}footer{background:#090a09}
@media(min-width:1800px){.portal-word--first{left:23%}.portal-intro{left:23.4%}.portal-word--second{left:52%}.editorial-project{min-height:650px}}
@media(max-width:900px){nav{gap:25px}.editorial-project{grid-template-columns:16% 16% 28% 34%;min-height:470px;padding-top:90px;padding-bottom:65px}.editorial-copy h3{font-size:6.4vw;margin-bottom:25px}.editorial-copy .project-title{font-size:20px}.editorial-copy>.eyebrow{font-size:6px;letter-spacing:.8px}.project-description{font-size:10px;max-width:95%}.project-main{margin-top:90px}.project-side--second{margin-top:100px}.editorial-project .project-arrow{width:28px;height:28px;font-size:17px;bottom:7px;right:7px}.editorial-open{font-size:8px;gap:18px}.portal-word--first{left:12%}.portal-intro{left:12.4%}.portal-word--second{left:48%}}
@media(max-width:700px){header{height:72px;padding-left:6%;padding-right:6%}.wordmark{font-size:29px}nav{gap:18px;font-size:8px;letter-spacing:.7px}nav .contact-nav>span{margin-left:3px}#home{margin-top:-72px}.portal-stage{min-height:600px;--portal-radius:34vw}.portal-enabled .portal-track{height:210svh}.portal-headline{font-size:23vw;line-height:.86}.portal-word--first{left:8%;top:28%}.portal-intro{left:9%;top:24%;font-size:17px}.portal-word--second{left:24%;top:61%;font-size:.83em}.portal-amp{left:72%;top:49%}.portal-ring{border-width:10px}.portal-caption{left:6%;right:6%;bottom:24px;font-size:6px;letter-spacing:.7px;gap:15px}.portal-caption>span:last-child{display:none}.portal-scroll{gap:9px;white-space:nowrap;font-size:6px}.portal-chapter{left:7%;bottom:23%;max-width:86%}.portal-chapter h2{font-size:18vw;margin:18px 0 25px}.portal-chapter>.eyebrow{font-size:8px;letter-spacing:1px}.portal-chapter>a{font-size:11px;gap:40px}#home .section{padding-left:6%;padding-right:6%}#home .work{padding-top:70px}#home .section-top{margin-bottom:35px}#home .section-top h2{font-size:64px}#home .section-top>p{font-size:10px}#home .filters{gap:20px;row-gap:5px;padding-bottom:15px}#home .filters button{font-size:8px;letter-spacing:.5px}.project-grid{gap:25px}.editorial-project{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:18px;min-height:0;padding:65px 0 35px}.collection-index{top:20px;font-size:7px}.editorial-copy{grid-column:1 / -1;grid-row:1;margin:0;padding:0;max-width:100%;pointer-events:none}.editorial-copy h3{font-size:clamp(44px,12vw,64px);max-width:100%;width:auto;margin:14px 0 18px}.editorial-copy>.eyebrow{font-size:7px;letter-spacing:1px}.editorial-copy .project-title{font-size:22px;max-width:100%;margin-bottom:14px}.project-description{font-size:11px;margin-bottom:16px;max-width:100%}.editorial-open{font-size:9px;gap:25px}.project-main,.editorial-project:nth-child(even) .project-main{grid-column:2 / 4;grid-row:2;margin:0 0 0;align-self:start}.editorial-project .project-image{aspect-ratio:4/3}.project-side--first,.editorial-project:nth-child(even) .project-side--first{grid-column:1;grid-row:2;margin:45px 0 0;aspect-ratio:3/4;align-self:start}.project-side--second,.editorial-project:nth-child(even) .project-side--second{display:none}.editorial-project .project-arrow{width:30px;height:30px}.editorial-project:hover .editorial-copy h3{transform:none}#home .about h2{font-size:66px}#home .contact h2{font-size:12vw}#home .clients-header h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.portal-track,.portal-enabled .portal-track{height:auto!important}.portal-stage,.portal-enabled .portal-stage{position:relative!important;top:auto!important;min-height:650px}.portal-frame{clip-path:circle(clamp(150px,27vw,330px) at 50% 48%)!important}.portal-art{transform:none!important}.portal-word,.portal-intro,.portal-amp{transform:none!important;opacity:1!important}.portal-ring{opacity:1!important}.portal-chapter{display:none}.project-side{transform:none!important}.editorial-copy h3{transform:none!important}}

/* Keep the face anchored at the centre of the opening circle. */
.portal-art{inset:auto;object-fit:cover;object-position:45% 36%;transform-origin:45% 36%;filter:grayscale(1) brightness(.8)}
/* Flat client marks: one ink colour, no tiles, borders, shadows or raised treatment. */
#home .client-logo,#home .client-logo--light{background:transparent;border:0;border-radius:0;box-shadow:none}
#home .client-logo img{filter:brightness(0) invert(1);mix-blend-mode:screen;opacity:.78;max-height:64px;transition:opacity .25s ease}
#home .client-logo:hover img{opacity:1}
#home .client-logo img[src*="mahmoud-el-far"],#home .client-logo img[src*="dreamfit"],#home .client-logo img[src*="ikea"]{filter:grayscale(1) invert(1) contrast(4)}
#home .client-logo img[src*="big-chips"],#home .client-logo img[src*="dmp"]{filter:grayscale(1) contrast(4)}
#home .client-logo img[src*="balance"]{filter:grayscale(1) brightness(.58) contrast(14)}
#home .client-logo img[src*="al-doha"],#home .client-logo img[src*="jaguar"]{filter:grayscale(1) brightness(1.5) contrast(4)}
#home .client-logo img[src*="roots-wordmark"]{width:138px;height:auto;max-width:100%;max-height:64px;object-fit:contain;filter:grayscale(1) contrast(8);mix-blend-mode:screen}
#home .client-logo img[src*="idb-wordmark"],#home .client-logo img[src*="tickit-wordmark"]{width:130px;height:auto;max-width:100%;max-height:56px;object-fit:contain}
#home .client-logo img[src*="dreamfit-wordmark"]{width:138px;height:auto;max-width:100%;max-height:56px;object-fit:contain}
#home .client-logo img[src*="semiramis-catering-wordmark"]{width:138px;height:auto;max-width:100%;max-height:66px;object-fit:contain}

#home .client-logo{overflow:hidden}
#home .client-logo img[src*="dmp"]{width:180px;height:180px;max-width:none;max-height:none;flex-shrink:0}
#home .client-logo img[src*="balance"]{width:168px;height:168px;max-width:none;max-height:none;flex-shrink:0}
#home .client-logo img[src*="ikea"]{width:144px;height:144px;max-width:none;max-height:none;flex-shrink:0}

/* Transparent, pre-rendered marks retain smooth edges on dense screens. */
#home .client-logo img[src$="-clean.png"]{filter:none;mix-blend-mode:normal}
#home .client-logo img[src*="ikea-clean"]{width:144px;height:auto;max-height:64px;max-width:100%;object-fit:contain}
#home .client-logo img[src*="ikea-approved"]{width:144px;height:auto;max-height:64px;max-width:100%;object-fit:contain;filter:none;mix-blend-mode:normal}

/* Feather the photo into the page after the circular reveal expands. */
.portal-stage{background:#090a09}
.portal-art{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 78%,transparent 100%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 78%,transparent 100%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.portal-frame::after{background:linear-gradient(0deg,#090a09d9,transparent 65%),linear-gradient(90deg,#090a0940,transparent 80%)}

/* Rebuilt portfolio: the original slide is the project page content. */
.portfolio-project-slides{margin-top:28px}
.slide-stage{overflow:hidden}
.slide-stage>.portfolio-media-trigger{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:transparent;border:0;color:#fff;padding:0;cursor:pointer;text-decoration:none}
.portfolio-media-trigger>span{display:grid;place-items:center;width:clamp(26px,4vw,50px);height:clamp(26px,4vw,50px);border-radius:50%;background:#000c;border:1px solid #fff8;font-size:clamp(12px,2vw,22px);line-height:1}
.portfolio-media-trigger>small{font-size:clamp(8px,1vw,13px);padding:4px 8px;background:#000d}
.slide-stage>.portfolio-inline-video{position:absolute;margin:0;max-height:none;object-fit:contain;background:#000}
/* Original slides keep their composition, with references linked in place. */
.slide-stage{position:relative}
.slide-stage>.slide-reference{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#050505e8;color:#fff;text-align:center;font-size:clamp(9px,1.2vw,16px);padding:8px;border:1px solid #ffffff26}
.slide-stage>.slide-reference>span:first-child{font-size:clamp(20px,3vw,42px)}
.slide-stage>.slide-reference:hover{background:#151515}
.slide-reference-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin:8px 0 16px;font-size:12px}
.slide-reference-links>a{text-decoration:underline;text-underline-offset:4px}
/* Work gallery: one original cover per project, with no repeated headings. */
#home .project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
#home .campaign-cover{display:block;min-width:0;margin:0;padding:0;border:0}
#home .campaign-cover .project-image{position:relative;display:block;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:#090a09}
#home .campaign-cover .project-image>img{display:block;width:100%;height:100%;object-fit:contain;filter:none;transform:none;padding:0}
#home .campaign-cover .project-image::after{display:none}
@media(max-width:700px){#home .project-grid{grid-template-columns:minmax(0,1fr);gap:22px}}