:root{
  --bg:#fc6023;
  --pine:#f2f2f2;
  --pine-60:rgba(242,242,242,.6);
  --divider:rgba(234,235,232,.2);
  --cream:#f4efe3;
  --ink:#1a1a1a;
  --ink-green:#17241b;
  --card:#dadada;
  --gutter:40px;
  --row-pad:32px;
  --max:1728px;
  --sans:"Poppins",system-ui,sans-serif;
  --ui:"Geist",system-ui,sans-serif;
  --serif:"Merriweather",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--pine);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Nav ---------- */
.nav{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:24px var(--gutter);position:relative;z-index:2}
.nav-menu{display:contents}
.nav-toggle{display:none;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.nav-toggle svg{display:block;width:24px;height:24px}
.nav-toggle path{transform-box:fill-box;transform-origin:center;transition:transform .2s ease}
.nav-toggle[aria-expanded="true"] path:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] path:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.logo{font-family:var(--serif);font-weight:800;font-size:24px;letter-spacing:.48px;line-height:1}
.nav-links{display:flex;gap:40px;font-weight:500;font-size:13px;letter-spacing:.26px;line-height:1}
.nav-links a{position:relative;display:inline-block;overflow:hidden;padding:6px 0}
.nav-links a > span{display:block;position:relative;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.nav-links a > span::after{content:attr(data-text);position:absolute;left:0;top:calc(100% + 6px)}
.nav-links a:hover > span,.nav-links a:focus-visible > span{transform:translateY(calc(-100% - 6px))}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.nav-links a.soon{opacity:.6;cursor:default}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border:1px solid var(--pine);border-radius:99px;font-family:var(--sans);font-size:13px;letter-spacing:.26px;line-height:1;transition:background .2s,color .2s}
.btn:hover{background:var(--pine);color:var(--bg)}

/* ---------- Shared type ---------- */
.h1{font-family:var(--sans);font-weight:600;font-size:clamp(28px,2.4vw + 6px,40px);line-height:1.2}
.label{font-weight:400;font-size:16px;line-height:1.2;letter-spacing:.32px}
.body{font-family:var(--sans);font-size:20px;line-height:1.5}
.body strong{font-weight:600}

/* ---------- Cursor ---------- */
.cursor{position:fixed;left:0;top:0;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border:1px solid var(--pine);border-radius:50%;pointer-events:none;z-index:100;opacity:0;transition:opacity .2s,background-color .2s,border-color .2s,width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),margin .35s cubic-bezier(.2,.7,.2,1)}
.cursor.on{opacity:1}
.cursor.hot{background:var(--pine)}
.cursor.big{width:80px;height:80px;margin:-40px 0 0 -40px}
.cursor{display:flex;align-items:center;justify-content:center;color:var(--bg)}
.cursor svg{flex:none;opacity:0;transform:scale(.4) rotate(-45deg);transition:opacity .2s,transform .35s cubic-bezier(.2,.7,.2,1)}
.cursor.big svg{opacity:1;transform:none}
.cursor.dark{border-color:var(--ink)}
.cursor.dark.hot{background:var(--ink)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- Get in touch + footer ---------- */
.touch{padding:220px 0;display:flex;flex-wrap:wrap;align-items:center;gap:24px;font-family:var(--sans);font-size:32px;line-height:1.2}
.touch-title{font:inherit;font-weight:600}
.touch .btn{flex:none}
.footer{border-top:1px solid var(--divider);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;padding:24px 0;font-size:14px;line-height:1.2;letter-spacing:.28px}
.footer button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-decoration:underline;cursor:pointer}

/* ---------- Home ---------- */
.hero{position:relative;padding:157px 0 0;min-height:574px}
.hero .h1{max-width:760px}
.say{margin-top:24px;display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--pine);font:16px/1.2 var(--ui);letter-spacing:.32px;cursor:pointer;padding:0}
.say svg{flex:none}
.say:hover span{text-decoration:underline}
.say.playing svg{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

.grid + .touch{margin:80px 0 0}
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:57px;padding-bottom:0}
.card{display:flex;flex-direction:column;gap:11px;min-width:0}
.card-media{position:relative;aspect-ratio:816/558;border-radius:32px;overflow:hidden;background:var(--card);isolation:isolate}
.card-media > *{position:absolute}
a.card .card-media{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
a.card:hover .card-media{transform:scale(.985)}
.card-title{display:flex;flex-direction:column;gap:12px;line-height:1}
.card-title .kicker{font-size:15px;letter-spacing:.3px;color:var(--pine-60)}
.card-title .name{font-weight:500;font-size:20px;letter-spacing:.4px;line-height:1.2}
a.card .name::after{content:" →";opacity:0;transition:opacity .2s}
a.card:hover .name::after{opacity:1}
.placeholder{left:32px;top:32px;font-size:16px;color:#595959}
.center{left:50%;transform:translateX(-50%)}
.cover{width:100%;height:100%;object-fit:cover}

/* Qatar phone mockup */
.phone{left:31.62%;top:13.62%;width:36.64%;aspect-ratio:299/608;filter:drop-shadow(32px 32px 32px rgba(16,24,40,.2)) drop-shadow(16px 16px 16px rgba(16,24,40,.08))}
.phone > *{position:absolute}
.phone img{width:100%;height:100%}
.phone .screen{inset:2.23% 5.26% 2.46% 5.02%;background:#fff;overflow:hidden}
.phone .screen > *{position:absolute}

/* Web design blob */
.blob{left:12.69%;top:25.19%;width:123.03%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.blob-inner{width:70.92%;aspect-ratio:1;transform:rotate(-40.59deg);filter:blur(15px);overflow:hidden;position:relative}
.blob-inner img{position:absolute;left:-204.6%;top:-140.77%;width:509.17%;height:380.81%;object-fit:cover}
.video-slot{left:50%;top:calc(50% - 10px);width:57.6%;height:46.6%;transform:translate(-50%,-50%);background:#fff;border-radius:4px;box-shadow:0 217px 87px rgba(0,0,0,.03),0 122px 73px rgba(0,0,0,.11),0 54px 54px rgba(0,0,0,.19);display:flex;align-items:center;justify-content:center;font-size:14px;color:#8a8a8a}

/* ---------- About ---------- */
.about-hero{display:grid;grid-template-columns:280fr 32fr 712fr 178fr 446fr;padding-top:118px;align-items:start}
.about-hero .label{grid-column:1;padding-top:39px}
.about-hero .h1{grid-column:3;padding-top:39px}
.portrait{grid-column:5;aspect-ratio:446/560;border-radius:32px;overflow:hidden;position:relative}
.portrait img{position:absolute;left:0;top:-3.1%;width:100%;height:106.19%;object-fit:cover}
.timeline{margin-top:115px}
.tl-row{display:grid;grid-template-columns:279.5fr 279.5fr 279.5fr 761.4fr;gap:16px;padding:var(--row-pad) 0;border-top:1px solid var(--divider)}
.tl-row .label{padding-top:2px}
.tl-row .co,.tl-row .role{font-family:var(--sans);font-weight:600;font-size:20px;line-height:1.2}
.tl-row .desc{font-family:var(--sans);font-size:20px;line-height:1.5}
.tl-row .desc + .desc{grid-column:4;margin-top:-4px}

/* ---------- Case study ---------- */
body.case{background:var(--cream)}
/* orange band ends ~2/3 down the first image, like the design (606 of 900px) */
.band{--cut:calc(80px + (min(100vw,var(--max)) - 2 * var(--gutter)) * .1784);background:linear-gradient(var(--bg) calc(100% - var(--cut)),var(--cream) 0)}
.case-navigation{padding-top:24px}
.case-navigation + .cs-hero{padding-top:32px}
.case-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 13px/1 var(--ui);letter-spacing:.26px}
.case-back-arrow{display:block;flex:none;width:28px;height:16px}
.case-back:hover .case-back-label{text-decoration:underline;text-underline-offset:4px}
.case-back:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.case-navigation-end{padding:0 0 64px;color:var(--ink)}
.cs-hero{display:flex;gap:32px;padding:61px 0 120px}
.cs-hero > .label{flex:0 0 280px}
.cs-intro{flex:0 1 712px;display:flex;flex-direction:column;gap:32px}
.facts{display:flex;gap:24px;margin-block:16px}
.facts div{flex:0 1 auto;min-width:0;max-width:160px;display:flex;flex-direction:column;gap:8px;line-height:1.4}
.facts dt{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--pine-60)}
.facts dd{font-family:var(--ui);font-weight:400;font-size:15px;letter-spacing:-.02em}
.cs-img{padding-bottom:120px}
.band .cs-img{padding-bottom:80px}
.img-card{position:relative;border-radius:32px;overflow:hidden;background:var(--card)}
.img-card > *{position:absolute}
.img-card.full{aspect-ratio:1648/900}
.img-card.config{aspect-ratio:1648/820}
.img-card .contain{object-fit:contain;width:64%;left:18%}
.full .contain{height:80%;top:10%}
.config .contain{height:80%;top:10%}

.cs-row{display:flex;gap:32px;border-top:1px solid rgba(23,36,27,.12);color:var(--ink);margin-bottom:80px;padding-top:var(--row-pad)}
.cs-row.last{margin-bottom:120px}
.cs-row > .label{flex:0 0 280px;padding-top:2px}
.cs-row .stack{flex:0 1 712px;display:flex;flex-direction:column;gap:24px}

/* Heatmap on/off pair */
.pair{inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 7.46%}
.pair-row{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:1402px}
.pair-col{display:flex;flex-direction:column;align-items:center;gap:40px}
.pair-col h3{font:500 16px/1.2 var(--sans);letter-spacing:.96px;color:var(--ink-green);text-align:center}
.mac{position:relative;width:100%;aspect-ratio:701/425}
.mac > img{position:absolute}
.mac .frame{inset:0;width:100%;height:100%}
.mac .scr{left:10.16%;top:3.4%;width:79.8%;height:85.59%}
.caption{font:500 16px/1.2 var(--sans);letter-spacing:.96px;color:rgba(23,36,27,.5)}
.pair .caption{position:absolute;left:2%;bottom:3.2%}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo .img-card{aspect-ratio:816/900}
.duo .white{background:#fff}
.duo .dark{background:#0d0d0d}
.duo .white img{left:-19.24%;top:23.56%;width:111.4%;height:61.22%;object-fit:cover}
.duo .dark .rot{inset:8% 5% 16%;display:flex;align-items:center;justify-content:center}
.duo .dark .rot img{width:100%;height:auto;max-height:100%;object-fit:contain;transform:rotate(-2deg);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.duo .caption{left:4.9%;right:4.9%;bottom:6.2%;text-align:center}
.duo .dark .caption{color:rgba(242,242,242,.6)}

.quote{display:flex;flex-direction:column;gap:12px;padding:8px 0;line-height:1.2}
.quote p{font-family:var(--sans);font-weight:600;font-size:40px;color:var(--ink-green)}
.quote cite{font-style:normal;font-size:16px;color:rgba(23,36,27,.6)}
.case .touch,.case .footer{color:var(--pine)}
.case .tail{background:var(--bg)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .about-hero{grid-template-columns:1fr 1fr;gap:32px}
  .about-hero .label{grid-column:1/-1;padding-top:0}
  .about-hero .h1{grid-column:1;padding-top:0}
  .portrait{grid-column:2}
  .tl-row{grid-template-columns:1fr 1fr 1fr 2fr}
  .cs-hero > .label,.cs-row > .label{flex-basis:180px}
}
@media (max-width:820px){
  :root{--gutter:16px;--row-pad:24px}
  .nav{flex-wrap:wrap;row-gap:16px}
  .nav-links{order:3;width:100%;gap:24px}
  .nav.nav-ready{flex-wrap:nowrap;gap:16px}
  .nav-ready .nav-toggle{display:inline-flex}
  .nav-ready .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:24px;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;padding:8px 32px 24px;border-bottom:1px solid var(--divider);background:var(--bg)}
  .nav-ready.menu-open .nav-menu{display:flex}
  .nav-ready .nav-links{order:0;flex-direction:column;align-items:stretch;gap:0;font:400 17px/1.5 var(--sans);letter-spacing:0}
  .nav-ready .nav-links a{min-height:48px;padding:12px 0}
  .nav-ready .nav-links a>span{transform:none;transition:none}
  .nav-ready .nav-links a>span::after{display:none}
  .nav-ready .nav-links a[aria-current="page"]::after{display:none}
  .nav-ready .nav-links a[aria-current="page"]>span{text-decoration:underline;text-underline-offset:4px}
  .nav-ready .nav-menu>.btn{flex:none}
  .grid{grid-template-columns:1fr;row-gap:40px}
  .hero{padding-top:64px;min-height:0;padding-bottom:64px}
  .card-media{border-radius:20px}
  .about-hero{grid-template-columns:1fr;padding-top:48px}
  .about-hero .h1,.portrait{grid-column:1}
  .portrait{max-width:446px}
  .timeline{margin-top:64px}
  .tl-row{grid-template-columns:1fr;gap:8px}
  .tl-row .desc,.tl-row .desc + .desc{grid-column:1/-1;font-size:17px}
  .tl-row .label{grid-column:1/-1}
  .cs-hero{flex-direction:column;gap:16px;padding:40px 0 64px}
  .cs-hero > .label{flex:none}
  .cs-intro,.cs-row .stack{flex-basis:auto}
  .facts{flex-direction:column;gap:16px;margin-block:8px}
  .facts div{flex:none;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:baseline;gap:16px}
  .cs-row{flex-direction:column;gap:16px;margin-bottom:56px}
  .cs-row > .label{flex:none}
  .case .cs-row > .label,.case .imported-section > .label{padding-top:0;font:600 20px/1.3 var(--sans);letter-spacing:0}
  .body{font-size:17px}
  .cs-img{padding-bottom:64px}
  .band .cs-img{padding-bottom:56px}
  .img-card{border-radius:20px}
  .img-card.full,.img-card.config{aspect-ratio:4/3}
  .img-card .contain{width:90%;left:5%}
  .pair-row{grid-template-columns:1fr;gap:24px}
  .pair{padding:24px 16px;justify-content:flex-start}
  .pair-col{gap:12px}
  .pair-col .mac{max-width:360px}
  .pair .caption{position:static;align-self:stretch;margin-top:24px;font-size:14px;line-height:1.5;letter-spacing:.02em}
  .img-card.pairs{aspect-ratio:auto;height:auto}
  .img-card.pairs .pair{position:relative}
  .duo{grid-template-columns:1fr}
  .quote p{font-size:28px}
  .touch{padding:92px 0;font-size:24px}
  .band{--cut:calc(56px + (100vw - 2 * var(--gutter)) * .25)}
  .footer{gap:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Product screenshots inside image cards */
.mac .scr{object-fit:cover;object-position:top left}
.img-card .shot{height:80%;width:auto;max-width:90%;aspect-ratio:1440/1024;object-fit:cover;object-position:top left;left:50%;top:10%;transform:translateX(-50%);border-radius:12px;box-shadow:0 40px 80px rgba(0,0,0,.12),0 12px 24px rgba(0,0,0,.08)}
.card-media .shot{height:auto;width:68%;aspect-ratio:1440/1024;object-fit:cover;object-position:top left;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:8px;box-shadow:0 54px 54px rgba(0,0,0,.14),0 14px 30px rgba(0,0,0,.16)}
@media (max-width:820px){.img-card .shot{height:auto;width:90%;top:50%;transform:translate(-50%,-50%)}}

/* Animated screen player: product frames crossfade like a recording */
.player{overflow:hidden;background:#fff}
.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.015);transition:opacity .7s ease,transform 3.2s ease-out}
.player img.on{opacity:1;transform:none}
.player.contain{background:none;box-shadow:none;border-radius:0}
.player.contain img{object-fit:contain;object-position:center}
.player-ui{position:absolute;left:0;right:0;bottom:3.5%;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.player-label{font:500 16px/1.2 var(--sans);letter-spacing:.96px;color:var(--ink-green);text-align:center;transition:opacity .3s}
.player-label.swap{opacity:0}
.player-dots{display:flex;gap:6px;pointer-events:auto}
.player-dots button{width:24px;height:4px;border:0;border-radius:2px;background:rgba(23,36,27,.18);padding:0;cursor:pointer;overflow:hidden;position:relative}
.player-dots button i{position:absolute;inset:0;background:var(--ink-green);transform:scaleX(0);transform-origin:left}
.player-dots button.done i{transform:scaleX(1)}
.player-dots button.on i{animation:fill var(--dur,2800ms) linear forwards}
.player-dots.paused button.on i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}

/* ---------- Case study image viewer ---------- */
body.image-viewer-open{overflow:hidden}
.image-viewer{position:fixed;inset:0;margin:auto;width:calc(100vw - 48px);height:calc(100vh - 48px);height:calc(100dvh - 48px);max-width:none;max-height:none;padding:0;border:1px solid rgba(23,36,27,.15);border-radius:20px;background:var(--cream);color:var(--ink);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.25)}
.image-viewer[open]{display:flex;flex-direction:column}
.image-viewer::backdrop{background:rgba(0,0,0,.72)}
.image-viewer-toolbar{display:flex;align-items:center;gap:12px;flex:none;padding:16px 24px;border-bottom:1px solid rgba(23,36,27,.15)}
.image-viewer-toolbar h2{margin-right:auto;font:500 17px/1.4 var(--sans)}
.image-viewer-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid rgba(23,36,27,.3);border-radius:99px;background:transparent;color:inherit;font:500 14px/1.4 var(--ui);cursor:pointer}
.image-viewer-close{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.image-viewer-button:focus-visible,.image-viewer-canvas:focus-visible,.image-viewer-viewport:focus-visible{outline:3px solid var(--ink);outline-offset:-4px}
.image-viewer-viewport{flex:1;min-height:0;overflow:auto;padding:24px;overscroll-behavior:contain}
.image-viewer-canvas{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.image-viewer-canvas img{display:block;width:100%;max-width:none;height:auto;border-radius:8px}
.image-viewer[data-zoom="actual"] .image-viewer-canvas{width:var(--image-width,1996px);cursor:zoom-out}
@media(max-width:820px){
  .image-viewer{width:calc(100vw - 16px);height:calc(100vh - 16px);height:calc(100dvh - 16px);border-radius:12px}
  .image-viewer-toolbar{flex-wrap:wrap;padding:12px}
  .image-viewer-toolbar h2{width:100%}
  .image-viewer-button{padding:10px 12px}
  .image-viewer-viewport{padding:12px}
}
@media (max-width:820px){.player-label{font-size:13px}.player-ui{bottom:2.5%;gap:8px}.player-dots button{width:16px}}
@media (max-width:820px){
  .img-card:has(.player:not(.contain)){aspect-ratio:10/9}
  .img-card .player:not(.contain){top:6%;transform:translateX(-50%)}
}