:root{
  --ink:#101112;--paper:#f3f0ea;--white:#fff;--muted:#6d706f;--line:rgba(16,17,18,.12);
  --accent:#5e46ff;--lime:#d8ff50;--max:1240px;--pad:clamp(20px,4vw,54px);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}img{display:block;width:100%}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(calc(100% - var(--pad)*2),var(--max));margin:auto}.kicker{display:block;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.18em;font-weight:800;margin-bottom:16px}.topbar{position:fixed;z-index:100;left:16px;right:16px;top:14px;height:64px;padding:0 18px;display:flex;align-items:center;gap:30px;background:rgba(245,242,236,.86);border:1px solid rgba(16,17,18,.11);backdrop-filter:blur(18px);transition:.25s}.topbar.scrolled{top:8px;box-shadow:0 10px 40px rgba(0,0,0,.07)}.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em}.logo img{width:31px;height:31px}.topbar nav{margin-left:auto;display:flex;gap:26px;font-size:13px}.topbar nav a{opacity:.68;transition:.2s}.topbar nav a:hover{opacity:1}.nav-cta{font-size:12px;font-weight:800;border:1px solid var(--ink);padding:10px 15px}.nav-cta:hover,.nav-cta.active{background:var(--ink);color:#fff}.menu{display:none;margin-left:auto;border:0;background:none;font-weight:700}.hero{padding:110px 16px 18px}.hero-shell{min-height:610px;max-width:1500px;margin:auto;background:#111214;color:#fff;display:grid;grid-template-columns:.84fr 1.16fr;overflow:hidden}.hero-copy{align-self:end;padding:clamp(34px,5vw,78px);padding-right:30px}.hero-copy .kicker{color:#b7b8b8}.hero h1{font-size:clamp(43px,5vw,72px);line-height:.95;letter-spacing:-.055em;max-width:9.2ch;margin:0 0 30px;font-weight:690;text-wrap:balance}.pill-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;padding:14px 17px;border-radius:999px;background:#fff;color:#111;font-weight:800;font-size:12px;min-width:214px;transition:.25s}.pill-cta:hover{transform:translateY(-3px)}.pill-cta span{font-size:17px}.pill-cta.light{background:#fff}.hero-masonry{position:relative;min-height:610px;padding:28px 28px 28px 0;display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:1.05fr .95fr;gap:12px}.masonry-tile{position:relative;overflow:hidden;background:#25272b}.masonry-tile img{height:115%;object-fit:cover;object-position:top;will-change:transform;transition:filter .3s,scale .5s}.masonry-tile:hover img{filter:brightness(.92);scale:1.02}.tile-a{grid-row:1 / 3}.tile-b{grid-column:2;grid-row:1}.tile-c{grid-column:2;grid-row:2}.tile-d{position:absolute;width:33%;height:29%;left:44%;bottom:7%;border:8px solid #111214;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.selected-work{padding:72px 0 84px}.section-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}.section-title-row h2,.studio-grid h2,.process-copy h2,.directions-copy h2,.contact-content h2{font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.045em;margin:0;max-width:13ch;font-weight:680}.section-note{max-width:40ch;margin:0 0 4px;color:var(--muted);line-height:1.55;font-size:14px}.text-link{display:inline-flex;align-items:center;gap:20px;font-size:13px;font-weight:800;padding-bottom:5px;border-bottom:1px solid var(--ink);white-space:nowrap}.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.showcase-card{min-width:0}.showcase-wide{grid-column:span 1}.showcase-media{display:block;height:340px;overflow:hidden;background:#ddd}.showcase-media img{width:106%;height:112%;margin:-3%;object-fit:cover;object-position:top center;will-change:transform;transition:scale .5s}.showcase-media:hover img{scale:1.02}.showcase-meta{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 8px;border-bottom:1px solid var(--line)}.showcase-meta span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.13em}.showcase-meta h3{font-size:18px;margin:4px 0 0;letter-spacing:-.025em}.showcase-meta>a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);transition:.2s}.showcase-meta>a:hover{background:#111;color:#fff}
.studio-strip{padding:86px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.studio-copy>p{font-size:clamp(18px,2.1vw,26px);line-height:1.35;letter-spacing:-.025em;margin:2px 0 34px;max-width:30ch}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.mini-stats div{padding:18px 12px 0 0}.mini-stats strong{display:block;font-size:30px;letter-spacing:-.04em}.mini-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.services{padding:92px 0;background:#151619;color:#fff}.services .kicker,.services .section-note{color:#aaaeb3}.service-media-grid{display:grid;grid-template-columns:1.3fr .7fr;grid-template-rows:320px 320px 400px;gap:12px}.service-media-card{position:relative;overflow:hidden;min-width:0;background:#24262a}.service-large{grid-row:1 / 3}.service-wide{grid-column:1 / 3}.service-media-card img{position:absolute;inset:-6%;width:112%;height:118%;object-fit:cover;object-position:top center;will-change:transform}.media-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78) 100%)}.service-content{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}.service-content>span{font-size:10px;opacity:.65}.service-content h3{font-size:26px;letter-spacing:-.035em;margin:5px 0 5px}.service-content p{font-size:13px;line-height:1.5;color:#d3d4d6;margin:0;max-width:38ch}
.markets{padding:92px 0}.market-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.market-card{height:520px;position:relative;overflow:hidden;background:#222}.market-card img{position:absolute;inset:-5%;width:110%;height:115%;object-fit:cover;object-position:top center;will-change:transform}.market-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06) 30%,rgba(0,0,0,.82) 100%)}.market-content{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;color:#fff}.flags{display:flex;gap:7px;margin-bottom:16px}.flags span{font-size:27px;line-height:1}.market-content h3{font-size:28px;margin:0 0 6px;letter-spacing:-.035em}.market-content p{margin:0;color:#d9d9da;font-size:13px;line-height:1.5;max-width:34ch}
.process{padding:92px 0;background:#e7e1d7}.process-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.process-media{position:relative;height:610px}.process-shot{position:absolute;overflow:hidden;background:#ccc}.process-shot img{position:absolute;inset:-5%;width:110%;height:115%;object-fit:cover;object-position:top center;will-change:transform}.shot-one{left:0;top:0;width:68%;height:82%}.shot-two{right:0;bottom:0;width:49%;height:56%;border:10px solid #e7e1d7}.process-badge{position:absolute;left:5%;bottom:4%;z-index:5;background:var(--lime);padding:14px 18px;font-size:12px;font-weight:850;line-height:1.3;transform:rotate(-2deg)}.process-copy h2{margin-bottom:34px}.process-steps{border-top:1px solid rgba(16,17,18,.18)}.process-steps article{display:grid;grid-template-columns:40px 1fr;gap:18px;padding:19px 0;border-bottom:1px solid rgba(16,17,18,.18)}.process-steps article>span{font-size:10px;padding-top:5px;color:#6c6c68}.process-steps h3{font-size:20px;margin:0 0 4px;letter-spacing:-.025em}.process-steps p{margin:0;color:#686963;font-size:13px}
.directions{padding:100px 0;background:#f7f5f1}.directions-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:center}.directions-copy{text-align:left}.directions-copy p{font-size:15px;color:var(--muted);line-height:1.65;max-width:36ch;margin:22px 0 28px}.directions-media{height:610px;position:relative}.direction-main,.direction-small{position:absolute;overflow:hidden;background:#ddd}.direction-main{left:0;top:0;width:72%;height:100%}.direction-small{right:0;width:42%;height:43%;border:9px solid #f7f5f1}.direction-small.top{top:8%}.direction-small.bottom{bottom:4%}.directions-media img{position:absolute;inset:-5%;width:110%;height:115%;object-fit:cover;object-position:top center;will-change:transform}
.contact{padding:18px 16px 70px;background:#f7f5f1}.contact-panel{position:relative;overflow:hidden;min-height:510px;max-width:1500px!important;width:min(calc(100% - 0px),1500px)!important;background:#111;color:#fff;display:flex;align-items:flex-end}.contact-collage{position:absolute;inset:0}.contact-img{position:absolute;object-fit:cover;object-position:top}.contact-img.a{width:58%;height:100%;right:0;top:0}.contact-img.b{width:32%;height:48%;right:50%;top:7%;transform:rotate(-3deg);box-shadow:0 20px 50px rgba(0,0,0,.25)}.contact-img.c{width:26%;height:42%;right:38%;bottom:0;transform:rotate(4deg);box-shadow:0 20px 50px rgba(0,0,0,.25)}.contact-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.76) 32%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.08) 100%)}.contact-content{position:relative;z-index:2;padding:clamp(32px,5vw,70px);max-width:620px}.contact-content .kicker{color:#c8c8c8}.contact-content h2{font-size:clamp(36px,4.2vw,58px);max-width:10ch;margin-bottom:28px}
footer{padding:30px 0 42px;background:#f7f5f1}.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center;border-top:1px solid var(--line);padding-top:22px}.footer-grid p{margin:0;font-size:11px;color:var(--muted)}.wa{position:fixed;z-index:120;right:19px;bottom:19px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.2);transition:.22s}.wa:hover{transform:translateY(-4px) scale(1.03)}.wa svg{width:29px;height:29px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}.reveal.show{opacity:1;transform:none}
/* PORTFOLIO PAGE */
.portfolio-hero{padding:170px 0 70px}.portfolio-hero h1{font-size:clamp(52px,7vw,94px);line-height:.88;letter-spacing:-.06em;margin:0 0 24px;max-width:9ch}.portfolio-hero p{font-size:16px;line-height:1.6;color:var(--muted);max-width:45ch}.portfolio-page{padding:10px 0 90px}.portfolio-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:54px 24px}.portfolio-page-card:nth-child(5n+1){grid-column:span 2}.portfolio-page-shot{display:block;height:370px;overflow:hidden;background:#ddd}.portfolio-page-card:nth-child(5n+1) .portfolio-page-shot{height:530px}.portfolio-page-shot img{width:106%;height:114%;margin:-3%;object-fit:cover;object-position:top center;will-change:transform;transition:scale .45s}.portfolio-page-shot:hover img{scale:1.02}.portfolio-page-meta{display:flex;align-items:center;justify-content:space-between;padding:14px 1px;border-bottom:1px solid var(--line)}.portfolio-page-meta span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.portfolio-page-meta h3{font-size:20px;margin:4px 0 0}.portfolio-page-meta>a{font-size:18px}
@media(max-width:1000px){.topbar nav{display:none}.menu{display:block}.nav-cta{margin-left:auto}.topbar.menu-open nav{display:flex;position:absolute;top:70px;left:0;right:0;background:#f3f0ea;border:1px solid var(--line);padding:20px;flex-direction:column;gap:16px}.hero-shell{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:56px 34px 42px}.hero h1{font-size:54px;max-width:10ch}.hero-masonry{min-height:520px;padding:0 18px 18px}.showcase-media{height:300px}.service-media-grid{grid-template-columns:1fr 1fr;grid-template-rows:420px 340px}.service-large{grid-row:auto}.service-wide{grid-column:auto}.market-cards{grid-template-columns:1fr 1fr}.market-card:last-child{grid-column:span 2;height:430px}.process-layout,.directions-grid{grid-template-columns:1fr;gap:46px}.process-media,.directions-media{height:540px}.directions-copy{max-width:650px}.portfolio-page-card:nth-child(5n+1){grid-column:auto}.portfolio-page-shot,.portfolio-page-card:nth-child(5n+1) .portfolio-page-shot{height:360px}}
@media(max-width:700px){.topbar{left:8px;right:8px;top:8px;height:58px;padding:0 12px}.topbar .logo span{display:none}.nav-cta{font-size:11px;padding:9px 11px}.menu{font-size:12px}.hero{padding:82px 8px 8px}.hero-copy{padding:40px 22px 34px}.hero h1{font-size:42px;margin-bottom:24px}.hero-masonry{min-height:440px;padding:0 8px 8px;gap:7px}.tile-d{border-width:5px}.selected-work,.services,.markets,.process,.directions{padding:66px 0}.section-title-row{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:24px}.section-title-row h2,.studio-grid h2,.process-copy h2,.directions-copy h2{font-size:34px}.showcase-grid{grid-template-columns:1fr;gap:30px}.showcase-media{height:270px}.studio-strip{padding:64px 0}.studio-grid{grid-template-columns:1fr;gap:32px}.studio-copy>p{font-size:20px}.service-media-grid{grid-template-columns:1fr;grid-template-rows:none}.service-media-card,.service-large,.service-wide{height:380px;grid-column:auto;grid-row:auto}.market-cards{grid-template-columns:1fr}.market-card,.market-card:last-child{grid-column:auto;height:420px}.process-media,.directions-media{height:450px}.shot-one{width:78%;height:78%}.shot-two{width:53%;height:51%;border-width:6px}.direction-main{width:78%}.direction-small{width:46%;border-width:6px}.contact{padding:8px 8px 46px}.contact-panel{min-height:500px}.contact-img.a{width:80%;opacity:.85}.contact-img.b{width:46%;right:48%;top:10%}.contact-img.c{width:40%;right:25%}.contact-shade{background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.45))}.contact-content{padding:28px 22px}.contact-content h2{font-size:38px;max-width:9ch}.footer-grid{grid-template-columns:1fr;gap:10px}.portfolio-hero{padding:130px 0 50px}.portfolio-hero h1{font-size:54px}.portfolio-page-grid{grid-template-columns:1fr;gap:38px}.portfolio-page-shot,.portfolio-page-card:nth-child(5n+1) .portfolio-page-shot{height:300px}.wa{width:54px;height:54px;right:13px;bottom:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}[data-shift]{transform:none!important}}

/* ===== FINAL MEDIA + CTA + PORTFOLIO REFINEMENT ===== */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.01em;transition:.22s ease;white-space:nowrap}.button:hover{transform:translateY(-2px)}.button-dark{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 8px 22px rgba(16,17,18,.12)}.button-dark:hover{background:#2a2b2c}.button-light{background:#fff;color:#111;border-color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18)}.button-light:hover{background:#f0f0ee}.button-outline{background:transparent;color:var(--ink);border-color:rgba(16,17,18,.3)}.button-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.project-button{display:inline-flex!important;align-items:center;justify-content:center!important;width:auto!important;height:38px!important;min-width:104px;padding:0 13px!important;border:1px solid var(--ink)!important;border-radius:5px;background:transparent;font-size:11px!important;font-weight:800;line-height:1;transition:.2s}.project-button:hover{background:var(--ink)!important;color:#fff!important}

/* Show complete screenshots instead of cutting them */
.masonry-tile,.showcase-media,.service-media-card,.market-card,.process-shot,.direction-main,.direction-small,.contact-img{background:#e8e8e5}
.masonry-tile{display:flex;align-items:center;justify-content:center;padding:20px 10px 10px}.masonry-tile:before{content:"";position:absolute;left:13px;top:10px;width:5px;height:5px;border-radius:50%;background:#c9c9c6;box-shadow:9px 0 #d6d6d2,18px 0 #e1e1dd;z-index:2}.masonry-tile img{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;margin:0!important;object-fit:contain!important;object-position:center top!important;transform:none!important;scale:1!important}.masonry-tile:hover img{filter:none;scale:1!important}
.showcase-media{height:360px;padding:22px;background:#e9e7e2;position:relative}.showcase-media:before{content:"";position:absolute;left:22px;top:10px;width:5px;height:5px;border-radius:50%;background:#babbb9;box-shadow:9px 0 #cacbc8,18px 0 #d8d8d4}.showcase-media img{width:100%!important;height:100%!important;margin:0!important;object-fit:contain!important;object-position:center top!important;transform:none!important;scale:1!important}.showcase-media:hover img{scale:1!important}
.showcase-meta{gap:16px}.showcase-meta>div{min-width:0}.showcase-meta h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-media-card{background:#202226}.service-media-card img{inset:18px!important;width:calc(100% - 36px)!important;height:calc(100% - 36px)!important;object-fit:contain!important;object-position:center top!important;transform:none!important;background:#f1f0ed}.media-fade{background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.88) 100%)}
.market-card img{inset:16px 16px 96px!important;width:calc(100% - 32px)!important;height:calc(100% - 112px)!important;object-fit:contain!important;object-position:center top!important;transform:none!important;background:#f1f0ed}.market-overlay{background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.88) 100%)}
.process-shot{padding:18px;background:#f3f1ec;box-shadow:0 18px 44px rgba(0,0,0,.08)}.process-shot img,.directions-media img{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center top!important;transform:none!important}.direction-main,.direction-small{padding:16px;background:#eae8e3;box-shadow:0 16px 40px rgba(0,0,0,.08)}
.contact-img{object-fit:contain!important;object-position:center top!important;background:#f5f4f1;padding:10px;box-shadow:0 16px 38px rgba(0,0,0,.25)}

/* Portfolio redesigned */
.portfolio-body{background:#f5f3ee}.portfolio-hero-clean{padding:145px 0 42px;border-bottom:1px solid var(--line)}.portfolio-heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:50px}.portfolio-hero-clean h1{font-size:clamp(40px,5vw,68px);line-height:.96;max-width:none;margin:0;letter-spacing:-.055em}.portfolio-hero-clean p{max-width:42ch;margin:0 0 2px;font-size:14px;line-height:1.55}.portfolio-page-new{padding:28px 0 90px}.portfolio-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;position:sticky;top:82px;z-index:30;padding:12px;background:rgba(245,243,238,.92);border:1px solid var(--line);backdrop-filter:blur(14px)}.filter-btn{border:1px solid rgba(16,17,18,.17);background:#fff;color:var(--ink);min-height:36px;padding:0 13px;border-radius:5px;font-size:11px;font-weight:750;cursor:pointer;transition:.18s}.filter-btn:hover,.filter-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}.portfolio-status{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;margin:0 2px 18px;min-height:18px}.portfolio-masonry{columns:3;column-gap:18px;transition:opacity .14s ease}.portfolio-masonry.is-filtering{opacity:.42}.portfolio-card-new{break-inside:avoid;margin:0 0 22px;background:#fff;border:1px solid rgba(16,17,18,.1);box-shadow:0 8px 26px rgba(14,15,16,.045)}.portfolio-shot-new{display:block;padding:0;background:#e7e6e2;border-bottom:1px solid var(--line)}.browser-bar{height:24px;display:flex;align-items:center;gap:5px;padding:0 9px;background:#f8f8f6;border-bottom:1px solid #d9d9d6}.browser-bar i{width:5px;height:5px;border-radius:50%;background:#c2c2bf}.portfolio-image-stage{display:flex;align-items:flex-start;justify-content:center;padding:12px;background:#ecebe7}.portfolio-image-stage img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top}.size-s .portfolio-image-stage{height:280px}.size-m .portfolio-image-stage{height:330px}.size-l .portfolio-image-stage{height:380px}.portfolio-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px}.portfolio-card-meta>div{min-width:0}.portfolio-card-meta span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.13em}.portfolio-card-meta h3{margin:4px 0 0;font-size:16px;line-height:1.1;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portfolio-contact{padding-top:30px}

@media(max-width:1000px){.portfolio-masonry{columns:2}.portfolio-heading-row{align-items:flex-start}.showcase-media{height:330px}}
@media(max-width:700px){.button{min-height:42px;padding:0 16px}.project-button{min-width:96px!important;height:36px!important}.showcase-media{height:300px;padding:18px}.portfolio-hero-clean{padding:115px 0 34px}.portfolio-heading-row{display:block}.portfolio-hero-clean p{margin-top:16px}.portfolio-toolbar{top:70px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding:9px}.filter-btn{flex:0 0 auto}.portfolio-masonry{columns:1}.size-s .portfolio-image-stage,.size-m .portfolio-image-stage,.size-l .portfolio-image-stage{height:340px}.portfolio-card-new{margin-bottom:18px}.service-media-card img{inset:12px!important;width:calc(100% - 24px)!important;height:calc(100% - 24px)!important}.market-card img{inset:12px 12px 100px!important;width:calc(100% - 24px)!important;height:calc(100% - 112px)!important}.process-shot,.direction-main,.direction-small{padding:10px}}


/* ===== Final media-safe layout: preserve every screenshot without cropping or letterbox gaps ===== */
.masonry-tile,.showcase-media,.service-media-card,.market-card,.process-shot,.direction-main,.direction-small,.portfolio-shot-new,.portfolio-image-stage{background:transparent!important}

/* Hero collage uses the screenshots at their native proportions. */
.hero-masonry{min-height:0!important;align-self:center;display:grid!important;grid-template-columns:1.05fr .95fr!important;grid-template-rows:auto auto!important;gap:12px!important;padding:30px 30px 30px 0!important}
.masonry-tile{position:relative!important;display:block!important;padding:0!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.12);background:#18191b!important}
.masonry-tile:before{display:none!important}
.masonry-tile img{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;max-height:none!important;margin:0!important;object-fit:unset!important;object-position:unset!important;transform:none!important;scale:1!important}
.tile-a{grid-row:auto!important;grid-column:1!important}.tile-b{grid-row:auto!important;grid-column:2!important}.tile-c{grid-row:auto!important;grid-column:1!important}.tile-d{position:relative!important;grid-row:auto!important;grid-column:2!important;width:auto!important;height:auto!important;left:auto!important;bottom:auto!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important}

/* Selected work: images keep their real 1.2–2.2:1 screenshot proportions. */
.showcase-grid{align-items:start}
.showcase-media{height:auto!important;padding:0!important;overflow:hidden!important;border:1px solid var(--line);background:#fff!important}
.showcase-media:before{display:none!important}
.showcase-media img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;margin:0!important;object-fit:unset!important;transform:none!important;scale:1!important}
.showcase-meta{padding:15px 0 12px!important}

/* Media-led service cards: no fake grey canvas, no crop. */
.service-media-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:none!important;gap:16px!important;align-items:start}
.service-media-card,.service-large,.service-wide{grid-column:auto!important;grid-row:auto!important;height:auto!important;min-height:0!important;background:#1b1c1f!important;border:1px solid rgba(255,255,255,.1)}
.service-media-card img{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;margin:0!important;object-fit:unset!important;object-position:unset!important;transform:none!important;background:transparent!important}
.media-fade{display:none!important}.service-content{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;padding:20px 22px 22px!important;background:#1b1c1f}
.service-content h3{font-size:22px!important}.service-content p{max-width:48ch!important}

/* Markets: screenshot first, copy beneath. */
.market-card{height:auto!important;min-height:0!important;background:#17181a!important;border:1px solid rgba(16,17,18,.1)}
.market-card img{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;margin:0!important;object-fit:unset!important;object-position:unset!important;transform:none!important;background:transparent!important}
.market-overlay{display:none!important}.market-content{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;padding:20px 22px 24px!important;background:#17181a;color:#fff}
.flags{margin-bottom:10px!important}.flags span{font-size:24px!important}.market-content h3{font-size:23px!important}

/* Process and visual range: actual media proportions, clean overlapping without clipping. */
.process-media{height:auto!important;display:grid!important;grid-template-columns:1.15fr .85fr!important;gap:14px!important;align-items:end!important}
.process-shot{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:auto!important;padding:0!important;background:transparent!important;box-shadow:0 18px 44px rgba(0,0,0,.08)!important;overflow:hidden!important}
.process-shot img{position:relative!important;width:100%!important;height:auto!important;object-fit:unset!important}
.shot-two{border:0!important;transform:translateY(34px)}.process-badge{left:4%!important;bottom:-18px!important}
.directions-media{height:auto!important;display:grid!important;grid-template-columns:1.15fr .85fr!important;grid-template-rows:auto auto!important;gap:14px!important}
.direction-main,.direction-small{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:auto!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:0 16px 40px rgba(0,0,0,.08)!important;overflow:hidden!important}
.direction-main{grid-row:1 / 3}.direction-small.top,.direction-small.bottom{grid-column:2}
.directions-media img{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;object-fit:unset!important;transform:none!important}

/* Portfolio: true 3-column masonry, each screenshot shown completely at natural aspect ratio. */
.portfolio-hero-clean{padding:140px 0 34px!important}.portfolio-heading-row{display:block!important}.portfolio-page-new{padding-top:22px!important}
.portfolio-masonry{columns:3!important;column-gap:18px!important}
.portfolio-card-new{display:inline-block!important;width:100%!important;break-inside:avoid!important;margin:0 0 18px!important;background:#fff!important;border:1px solid rgba(16,17,18,.1)!important;vertical-align:top!important}
.portfolio-shot-new{display:block!important;background:#fff!important}
.browser-bar{height:22px!important;background:#f7f6f2!important}
.portfolio-image-stage{display:block!important;height:auto!important;padding:0!important;background:#fff!important;overflow:hidden!important}
.portfolio-image-stage img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:unset!important;object-position:unset!important;background:transparent!important}
.portfolio-card-meta{padding:13px 14px 14px!important;align-items:flex-end!important}.portfolio-card-meta h3{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}.portfolio-card-meta .project-button{flex:0 0 auto}
.portfolio-toolbar{border-radius:8px!important}.filter-btn{border-radius:999px!important;padding:0 14px!important}.portfolio-status{margin-top:2px!important}

@media(max-width:1000px){
  .hero-masonry{padding:0 22px 22px!important}.portfolio-masonry{columns:2!important}.service-media-grid{grid-template-columns:1fr 1fr!important}.process-media{margin-bottom:36px!important}
}
@media(max-width:700px){
  .hero-masonry{grid-template-columns:1fr 1fr!important;gap:7px!important;padding:0 8px 8px!important}.portfolio-masonry{columns:1!important}.service-media-grid,.market-cards{grid-template-columns:1fr!important}.process-media,.directions-media{grid-template-columns:1fr!important;display:grid!important}.direction-main{grid-row:auto!important}.direction-small.top,.direction-small.bottom{grid-column:auto!important}.shot-two{transform:none!important}.process-badge{position:relative!important;left:auto!important;bottom:auto!important;margin-top:8px!important;display:inline-block!important}.portfolio-card-meta{gap:10px!important}.project-button{min-width:96px!important}
}


/* Final WhatsApp CTA + portfolio filter refinements */
.whatsapp-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-height:48px!important;padding:0 20px!important;background:#25D366!important;color:#fff!important;border:1px solid #25D366!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;line-height:1!important;box-shadow:0 10px 24px rgba(37,211,102,.24)!important;transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important}
.whatsapp-cta svg{width:21px!important;height:21px!important;flex:0 0 21px!important;color:#fff!important}
.whatsapp-cta span{color:#fff!important}
.whatsapp-cta:hover{background:#1ebe5d!important;border-color:#1ebe5d!important;transform:translateY(-2px)!important;box-shadow:0 14px 30px rgba(37,211,102,.32)!important}
.portfolio-toolbar{position:static!important;top:auto!important;z-index:auto!important;padding:0!important;margin:0 0 22px!important;background:transparent!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important}
@media(max-width:700px){.portfolio-toolbar{position:static!important;top:auto!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding:0 0 6px!important;background:transparent!important;border:0!important}.whatsapp-cta{min-height:46px!important;padding:0 17px!important}}


/* FINAL PORTFOLIO RESTYLE */
.project-icon-button{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;border-radius:50%;background:#111214;color:#fff;border:1px solid #111214;transition:transform .2s ease,background .2s ease,color .2s ease}
.project-icon-button svg{width:17px;height:17px;display:block}.project-icon-button:hover{transform:translateY(-2px);background:#6e4cff;border-color:#6e4cff}
.portfolio-body{background:#f4f1eb!important}.portfolio-hero-clean{padding:128px 0 28px!important;border-bottom:0!important}.portfolio-hero-clean h1{font-size:clamp(42px,5vw,66px)!important;letter-spacing:-.055em!important}.portfolio-page-new{padding:12px 0 96px!important}
.portfolio-toolbar{position:static!important;display:flex!important;gap:9px!important;flex-wrap:wrap!important;margin:0 0 18px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.filter-btn{height:40px!important;min-height:40px!important;padding:0 17px!important;border-radius:999px!important;border:1px solid rgba(17,18,20,.14)!important;background:#fff!important;color:#111214!important;font-size:11px!important;font-weight:760!important;letter-spacing:.01em!important;transition:.2s ease!important}
.filter-btn:hover{border-color:#111214!important}.filter-btn.active{background:#111214!important;color:#fff!important;border-color:#111214!important}
.portfolio-status{margin:0 2px 18px!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.1em!important}
.portfolio-masonry{columns:3!important;column-gap:20px!important;transition:opacity .16s ease!important}.portfolio-masonry.is-filtering{opacity:.35!important}
.portfolio-card-new{display:inline-block!important;width:100%!important;break-inside:avoid!important;margin:0 0 20px!important;background:#fff!important;border:1px solid rgba(17,18,20,.08)!important;border-radius:14px!important;overflow:hidden!important;box-shadow:0 9px 30px rgba(19,18,15,.055)!important;vertical-align:top!important;transition:transform .25s ease,box-shadow .25s ease!important}
.portfolio-card-new:hover{transform:translateY(-3px)!important;box-shadow:0 16px 38px rgba(19,18,15,.09)!important}
.portfolio-shot-new{display:block!important;background:#111214!important;border-bottom:1px solid rgba(17,18,20,.08)!important}
.browser-bar{height:30px!important;padding:0 11px!important;gap:5px!important;background:#f9f8f5!important;border:0!important;color:#86837d!important}.browser-bar i{width:6px!important;height:6px!important;background:#c8c5be!important}.browser-bar b{font-size:8px!important;font-weight:600!important;letter-spacing:.02em!important;margin-left:5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.portfolio-image-stage{position:relative!important;display:grid!important;place-items:center!important;height:300px!important;padding:13px!important;overflow:hidden!important;background:#141414!important;isolation:isolate!important}
.portfolio-image-stage::before{content:"";position:absolute;inset:-24px;background-image:var(--shot);background-size:cover;background-position:top center;filter:blur(24px) brightness(.52) saturate(.85);transform:scale(1.14);opacity:.8;z-index:-2}
.portfolio-image-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.2));z-index:-1}
.portfolio-image-stage img{display:block!important;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain!important;object-position:center top!important;background:transparent!important;box-shadow:0 10px 30px rgba(0,0,0,.22)!important}
.portfolio-card-meta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:15px 15px 16px!important;background:#fff!important}.portfolio-card-meta>div{min-width:0!important}.portfolio-card-meta span{font-size:9px!important;color:#8b8881!important;letter-spacing:.12em!important}.portfolio-card-meta h3{font-size:17px!important;line-height:1.15!important;margin:5px 0 0!important;letter-spacing:-.025em!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
@media(max-width:1000px){.portfolio-masonry{columns:2!important}.portfolio-image-stage{height:310px!important}}
@media(max-width:700px){.portfolio-hero-clean{padding:104px 0 24px!important}.portfolio-page-new{padding-top:8px!important}.portfolio-toolbar{flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:7px!important;-webkit-overflow-scrolling:touch!important}.filter-btn{flex:0 0 auto!important}.portfolio-masonry{columns:1!important}.portfolio-image-stage{height:330px!important}.project-icon-button{width:38px!important;height:38px!important;min-width:38px!important}}


/* ===== BILINGUAL LANGUAGE SWITCHER + CHATBOT FEATURE ===== */
.language-switcher{position:relative;flex:0 0 auto}
.language-current,.language-menu button{border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.language-current{height:40px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid rgba(16,17,18,.14);background:#fff;border-radius:8px;font-size:11px;font-weight:750}
.language-current img,.language-menu img{width:20px;height:14px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.09)}
.language-current svg{width:10px;height:7px;transition:transform .18s ease}.language-switcher.open .language-current svg{transform:rotate(180deg)}
.language-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:146px;padding:6px;background:#fff;border:1px solid rgba(16,17,18,.12);box-shadow:0 16px 38px rgba(0,0,0,.12);border-radius:10px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s ease;z-index:150}
.language-switcher.open .language-menu{opacity:1;visibility:visible;transform:none}
.language-menu button{width:100%;height:38px;padding:0 9px;display:flex;align-items:center;gap:9px;border-radius:7px;font-size:11px;font-weight:700;text-align:left}
.language-menu button:hover{background:#f2efe9}

.chatbot-feature{padding:92px 0;background:#e9e4da;border-top:1px solid rgba(16,17,18,.08);border-bottom:1px solid rgba(16,17,18,.08)}
.chatbot-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}
.chatbot-copy h2{font-size:clamp(32px,3.8vw,52px);line-height:.96;letter-spacing:-.047em;margin:0 0 20px;max-width:12ch;font-weight:680}
.chatbot-copy>p{font-size:15px;line-height:1.7;color:#64645f;max-width:51ch;margin:0 0 26px}
.chatbot-benefits{display:grid;gap:0;border-top:1px solid rgba(16,17,18,.16);margin-bottom:28px}
.chatbot-benefits article{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid rgba(16,17,18,.16)}
.chatbot-benefits strong{font-size:10px;color:#77746d;padding-top:5px}.chatbot-benefits h3{font-size:17px;margin:0 0 3px;letter-spacing:-.02em}.chatbot-benefits p{margin:0;font-size:12px;line-height:1.5;color:#6c6a65}
.chatbot-button{background:#111214;color:#fff;border-color:#111214}.chatbot-button:hover{background:#282a2d}
.chatbot-media{position:relative;min-height:590px;isolation:isolate}
.chatbot-media-main{position:absolute;inset:0 5% 0 8%;overflow:hidden;background:#0b0f24;box-shadow:0 28px 70px rgba(15,13,28,.18)}
.chatbot-media-main img{width:100%;height:100%;object-fit:cover;object-position:center}
.chatbot-media::before{content:"";position:absolute;width:62%;height:58%;right:-3%;top:-5%;background:#745cff;border-radius:50%;filter:blur(85px);opacity:.14;z-index:-1}
.chatbot-message{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;max-width:270px;padding:14px 16px;background:rgba(255,255,255,.94);border:1px solid rgba(16,17,18,.08);box-shadow:0 14px 36px rgba(0,0,0,.14);backdrop-filter:blur(12px);border-radius:13px;animation:chatFloat 5.5s ease-in-out infinite}
.chatbot-message p{margin:0;font-size:12px;line-height:1.4;color:#18191b}.msg-one{left:-3%;top:16%}.msg-two{right:-2%;bottom:18%;animation-delay:-2.2s}
.chat-dot{width:9px;height:9px;border-radius:50%;background:#7656ff;box-shadow:0 0 0 5px rgba(118,86,255,.12);flex:0 0 auto}.chat-dot.user{background:#25d366;box-shadow:0 0 0 5px rgba(37,211,102,.13)}
.chatbot-pulse{position:absolute;left:2%;bottom:8%;width:70px;height:70px;border-radius:50%;border:1px solid rgba(118,86,255,.42);animation:pulseRing 2.4s ease-out infinite}
@keyframes chatFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulseRing{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.5);opacity:0}}

/* Arabic / RTL */
html[dir="rtl"] body{font-family:"Cairo",Tahoma,Arial,sans-serif}
html[dir="rtl"] .topbar nav{margin-left:0;margin-right:auto}
html[dir="rtl"] .language-menu{right:auto;left:0}
html[dir="rtl"] .language-menu button{text-align:right}
html[dir="rtl"] .section-title-row,html[dir="rtl"] .showcase-meta,html[dir="rtl"] .portfolio-card-meta{direction:rtl}
html[dir="rtl"] .hero-copy,html[dir="rtl"] .studio-copy,html[dir="rtl"] .chatbot-copy,html[dir="rtl"] .process-copy,html[dir="rtl"] .directions-copy,html[dir="rtl"] .contact-content,html[dir="rtl"] .market-content,html[dir="rtl"] .service-content{text-align:right}
html[dir="rtl"] .directions-copy{text-align:right}
html[dir="rtl"] .chatbot-benefits article,html[dir="rtl"] .process-steps article{grid-template-columns:1fr 42px}
html[dir="rtl"] .chatbot-benefits article>strong,html[dir="rtl"] .process-steps article>span{grid-column:2;grid-row:1;text-align:right}
html[dir="rtl"] .chatbot-benefits article>div,html[dir="rtl"] .process-steps article>div{grid-column:1;grid-row:1}
html[dir="rtl"] .footer-grid{direction:rtl}
html[dir="rtl"] .portfolio-toolbar{direction:rtl}
html[dir="rtl"] .browser-bar{direction:ltr}
html[dir="rtl"] .msg-one{left:auto;right:-3%}html[dir="rtl"] .msg-two{right:auto;left:-2%}

@media(max-width:1120px){
  .topbar{gap:16px}.topbar nav{gap:17px}.language-current span{display:none}.language-current{width:40px;padding:0;justify-content:center}.language-current svg{display:none}.language-menu{min-width:138px}
}
@media(max-width:1000px){
  .language-switcher{margin-left:auto}.nav-cta{margin-left:0}.chatbot-layout{grid-template-columns:1fr;gap:44px}.chatbot-media{min-height:540px}
  html[dir="rtl"] .language-switcher{margin-left:0;margin-right:auto}
}
@media(max-width:700px){
  .language-current{width:36px;height:36px}.language-current img{width:19px;height:13px}.language-menu{right:-48px;left:auto}.language-menu button span{display:inline}.chatbot-feature{padding:66px 0}.chatbot-layout{gap:34px}.chatbot-copy h2{font-size:34px;max-width:13ch}.chatbot-copy>p{font-size:14px}.chatbot-media{min-height:420px}.chatbot-media-main{inset:0 3%}.chatbot-message{max-width:220px;padding:11px 12px}.msg-one{left:0;top:10%}.msg-two{right:0;bottom:10%}
  html[dir="rtl"] .language-menu{left:-48px;right:auto}html[dir="rtl"] .msg-one{right:0;left:auto}html[dir="rtl"] .msg-two{left:0;right:auto}
}
\n\n/* ===== SiteSleek original brand + refined Arabic typography ===== */\n@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');\n:root{--ink:#001b50;--paper:#f6f8fc;--white:#fff;--muted:#60708b;--line:rgba(0,27,80,.13);--accent:#063d8c;--lime:#d9e7ff}\nbody{background:var(--paper);color:var(--ink)}\n.topbar{background:rgba(248,250,253,.9);border-color:rgba(0,27,80,.12)}\n.logo{gap:0}.logo img{width:158px!important;height:auto!important;max-height:44px;object-fit:contain}.logo>span{display:none!important}\n.hero-shell{background:#031739}.service-media,.service-media-card,.market-card,.contact-panel{background:#031739!important}\n.nav-cta,.filter-btn.active,.project-icon-button:hover{background:#001b50!important;border-color:#001b50!important;color:#fff!important}\n.pill-cta{color:#001b50}.kicker{color:#063d8c}.chatbot-feature{background:#eef4ff!important}.chatbot-badge{background:#dbe8ff!important;color:#063d8c!important}.chatbot-benefits strong{color:#063d8c}.chatbot-media::before{background:#063d8c!important}\n.whatsapp-cta{background:#25D366!important;color:#fff!important;border-color:#25D366!important}\nhtml[dir="rtl"] body{font-family:"Cairo",Tahoma,Arial,sans-serif!important;font-weight:500;line-height:1.85;letter-spacing:0}\nhtml[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{font-family:"Cairo",Tahoma,Arial,sans-serif!important;letter-spacing:0!important;line-height:1.34!important;font-weight:700!important}\nhtml[dir="rtl"] .hero h1{line-height:1.22!important;max-width:11ch!important;margin-bottom:28px!important}\nhtml[dir="rtl"] .section-title-row h2,html[dir="rtl"] .studio-grid h2,html[dir="rtl"] .process-copy h2,html[dir="rtl"] .directions-copy h2,html[dir="rtl"] .contact-content h2,html[dir="rtl"] .chatbot-copy h2{line-height:1.35!important;margin-bottom:18px!important}\nhtml[dir="rtl"] p{line-height:1.95!important}\nhtml[dir="rtl"] .kicker{letter-spacing:0!important;font-size:12px!important;margin-bottom:18px!important;font-weight:700!important}\nhtml[dir="rtl"] .topbar nav{font-size:12px;gap:22px}\nhtml[dir="rtl"] .button,html[dir="rtl"] .pill-cta,html[dir="rtl"] .filter-btn,html[dir="rtl"] .language-current,html[dir="rtl"] .language-menu button{font-family:"Cairo",Tahoma,Arial,sans-serif!important;font-weight:700!important}\nhtml[dir="rtl"] .service-content p,html[dir="rtl"] .market-content p,html[dir="rtl"] .chatbot-benefits p,html[dir="rtl"] .process-steps p{line-height:1.8!important}\nhtml[dir="rtl"] .portfolio-card-meta span{text-transform:none!important;letter-spacing:0!important;font-size:11px!important}\n@media(max-width:700px){.logo img{width:132px!important;max-height:38px}html[dir="rtl"] .hero h1{font-size:38px!important;max-width:12ch!important}html[dir="rtl"] .chatbot-copy h2{font-size:31px!important;max-width:15ch!important}}\n