:root{--black:#101010;--white:#fff;--grey:#737373;--line:#e5e5e5;--light:#f5f5f5;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;color:var(--black);font:16px/1.55 Inter,Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}.header{position:sticky;top:0;z-index:20;background:#ffffffed;backdrop-filter:blur(12px);border-bottom:1px solid #eee}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}.logo{width:210px;max-height:62px;object-fit:contain}.links{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;background:#111;color:#fff;border:1px solid #111;font-weight:700;font-size:13px;cursor:pointer;transition:.2s}.btn:hover{background:#fff;color:#111}.btn.light{background:#fff;color:#111;border-color:#fff}.btn.outline{background:transparent;color:#fff;border-color:#777}.hero{background:#101010;color:#fff;padding:92px 0 60px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;color:#858585}.hero .eyebrow{color:#aaa}.hero h1{font-size:clamp(48px,8.5vw,112px);line-height:.91;letter-spacing:-.075em;max-width:1000px;margin:22px 0}.hero p{max-width:620px;color:#ccc;font-size:18px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.showreel{margin-top:48px;aspect-ratio:16/7;background:#1b1b1b;display:grid;place-items:center;border:1px solid #333;overflow:hidden}.showreel iframe{width:100%;height:100%;border:0}.reel-placeholder{text-align:center;color:#aaa;padding:25px}.reel-placeholder .play{margin:auto auto 14px;width:60px;height:60px;border:1px solid #777;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:20px}.section{padding:88px 0}.head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:32px}.section h2{font-size:clamp(35px,5vw,62px);letter-spacing:-.06em;line-height:1;margin:12px 0 0}.intro{max-width:440px;color:var(--grey);margin:0}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.filter{border:1px solid var(--line);padding:9px 14px;background:#fff;font-size:12px;cursor:pointer}.filter.active,.filter:hover{background:#111;color:#fff;border-color:#111}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}.card{min-width:0}.preview{width:100%;aspect-ratio:16/10;background:#111;overflow:hidden;position:relative;display:block}.preview img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.card:hover .preview img{transform:scale(1.04)}.preview iframe{width:100%;height:100%;border:0;display:block}.preview .embed-wrap{width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;background:#111}.preview .embed-wrap.instagram iframe{width:100%;height:100%;min-height:500px;transform-origin:top center}.preview .embed-wrap.facebook iframe{width:100%;height:100%;min-height:260px}.card-meta{padding-top:12px}.card h3{font-size:16px;margin:0 0 3px;letter-spacing:-.02em}.meta{color:#777;font-size:12px;margin:0}.watch{display:inline-block;font-size:12px;font-weight:700;margin-top:8px;border-bottom:1px solid #aaa}.services{background:#f5f5f5}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ddd;margin-top:34px}.service{padding:24px 18px 18px 0;border-bottom:1px solid #ddd}.service+.service{padding-left:20px;border-left:1px solid #ddd}.service small{color:#777;font-size:11px;letter-spacing:.12em}.service h3{font-size:22px;letter-spacing:-.04em;margin:30px 0 8px}.service p{font-size:14px;color:#666}.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #eee;margin-top:35px}.step{padding:20px 16px 0 0}.step b{font-size:12px;color:#777}.step h3{font-size:17px;margin:18px 0 5px}.step p{font-size:13px;color:#777}.aboutbox{background:#111;color:#fff;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:35px}.aboutbox h2{font-size:clamp(36px,5vw,60px);line-height:1;letter-spacing:-.06em;margin:15px 0}.aboutbox p{color:#ccc}.contact{background:#f4f4f4}.contactgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px}.contactform{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:700}.field input,.field textarea,.field select{border:1px solid #d4d4d4;padding:13px;background:#fff;border-radius:0;width:100%;font:inherit}.field textarea{min-height:120px}.notice{padding:12px 15px;background:#eef7ed;margin-bottom:16px;font-size:14px}.footer{background:#111;color:#ddd;padding:28px 0;font-size:12px}.footerrow{display:flex;justify-content:space-between;align-items:center;gap:18px}.footer img{width:150px;background:#fff}.wa{position:fixed;right:20px;bottom:20px;z-index:25;padding:13px 16px;background:#111;color:#fff;font-size:12px;font-weight:700;box-shadow:0 5px 22px #0002}.hamb{display:none;background:none;border:0;font-size:24px}.hidden{display:none!important}.fade{opacity:0;transform:translateY(16px);transition:.6s}.fade.visible{opacity:1;transform:none}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-grid{grid-template-columns:repeat(2,1fr)}.service:nth-child(3){padding-left:0;border-left:0}.contactgrid{grid-template-columns:1fr;gap:30px}.steps{grid-template-columns:repeat(3,1fr);row-gap:18px}.aboutbox{grid-template-columns:1fr}}
@media(max-width:650px){.wrap{width:calc(100% - 30px)}.nav{min-height:68px}.logo{width:160px}.hamb{display:block}.links{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid #eee}.links.open{display:flex}.links .btn{width:100%}.hero{padding:65px 0 40px}.hero h1{font-size:clamp(45px,13vw,70px)}.hero p{font-size:16px}.showreel{aspect-ratio:4/3;margin-top:35px}.section{padding:60px 0}.head{display:block}.intro{margin-top:15px}.grid{gap:23px 12px}.card h3{font-size:14px}.meta{font-size:11px}.service-grid{grid-template-columns:1fr}.service,.service+.service{padding:20px 0;border-left:0;border-top:1px solid #ddd}.service h3{margin-top:18px}.steps{grid-template-columns:1fr 1fr}.aboutbox{padding:25px}.contactform{grid-template-columns:1fr}.field.full{grid-column:auto}.footerrow{align-items:flex-start;flex-direction:column}.wa{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fade{opacity:1;transform:none;transition:none}}

.clients-section{background:#f6f6f6}.client-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #ddd;border-left:1px solid #ddd}.client-wordmark{min-height:94px;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;font-size:clamp(15px,1.6vw,22px);font-weight:800;letter-spacing:-.04em;color:#222;filter:grayscale(1)}.client-wordmark:nth-child(4n+2){font-weight:600;letter-spacing:-.02em}.client-wordmark.more{color:#777;font-size:14px;font-weight:600;letter-spacing:0}@media(max-width:650px){.client-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.client-wordmark{min-height:76px;padding:12px;font-size:16px}}

/* Live social previews: use the original platform embed rather than a placeholder image. */
.preview.social-preview{aspect-ratio:16/10;background:#f7f7f7;overflow:hidden;display:flex;align-items:center;justify-content:center}.preview.social-preview.instagram{aspect-ratio:9/12;background:#fff}.social-embed{width:100%;height:100%;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;background:#fff}.social-embed iframe{display:block;border:0;width:100%;height:100%;min-height:100%;background:#fff}.social-embed.instagram iframe{min-width:100%;height:100%;min-height:520px}.social-embed.facebook iframe{min-height:300px}.social-open{position:absolute;bottom:8px;right:8px;padding:7px 10px;background:#111;color:#fff;font-size:10px;font-weight:700;z-index:2;opacity:.92}.social-embed.instagram .social-open{bottom:8px}

/* Reliable local previews for Instagram and Facebook portfolio items */
.social-thumbnail{display:block;position:relative;width:100%;height:100%;min-height:220px;overflow:hidden;background:#e9e9e9;color:#fff;text-decoration:none}
.social-thumbnail img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover;transition:transform .45s ease}
.social-thumbnail:hover img{transform:scale(1.035)}
.social-thumbnail:focus-visible{outline:3px solid #0a6fe8;outline-offset:-3px}
.social-thumbnail .play-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:20px;padding-left:3px;box-sizing:border-box}
.social-thumbnail .platform-chip{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.76);color:#fff;border-radius:3px;padding:7px 10px;font-size:11px;letter-spacing:.02em}

/* Client logo section */
.client-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.client-logo{min-height:150px;background:#fff;border:1px solid #e8e8e8;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 16px;gap:10px;text-align:center}
.client-logo img{width:100%;height:82px;object-fit:contain}
.client-logo span{font-size:12px;font-weight:700;color:#333}
.showreel-section{background:#101010;color:#fff}
.showreel-section .intro{color:#bbb}
.showreel-section .showreel{margin-top:0}
@media(max-width:650px){.client-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.client-logo{min-height:125px;padding:12px}.client-logo img{height:65px}}

[data-filter-empty]{grid-column:1/-1;padding:28px 0;color:#666;text-align:center}[data-filter-empty][hidden]{display:none!important}

/* Client logo wall styled to match the supplied reference */
.clients-section{background:#202020;color:#fff;position:relative;overflow:hidden;background-image:linear-gradient(135deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.025) 50%,rgba(255,255,255,.025) 75%,transparent 75%,transparent);background-size:42px 42px}
.clients-section .eyebrow,.clients-section .intro{color:#c9c9c9}
.clients-section .head h2{color:#fff}
.client-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;border:0;align-items:stretch}
.client-logo{height:76px;min-height:76px;background:#fff;border:0;border-radius:6px;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:10px 16px;gap:0;text-align:center;overflow:hidden}
.client-logo img{width:100%;height:100%;max-width:100%;object-fit:contain}
.client-logo span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.client-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.client-logo{height:72px;min-height:72px;padding:9px}}
@media(max-width:560px){.client-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.client-logo{height:68px;min-height:68px;padding:8px}}

/* Final client-wall override: match supplied reference */
.clients-section{background-color:#202020!important;color:#fff!important;background-image:linear-gradient(135deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.025) 50%,rgba(255,255,255,.025) 75%,transparent 75%,transparent)!important;background-size:42px 42px!important;padding-top:54px;padding-bottom:54px}
.clients-section .head{margin-bottom:26px}
.clients-section .eyebrow,.clients-section .intro{color:#c9c9c9!important}
.clients-section .head h2{color:#fff!important}
.clients-section .client-logos{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:18px!important;border:0!important;align-items:stretch}
.clients-section .client-logo{height:76px!important;min-height:76px!important;background:#fff!important;border:0!important;border-radius:6px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;padding:10px 16px!important;gap:0!important;text-align:center!important;overflow:hidden!important;position:relative}
.clients-section .client-logo img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:contain!important}
.clients-section .client-logo span{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:900px){.clients-section .client-logos{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}.clients-section .client-logo{height:72px!important;min-height:72px!important;padding:9px!important}}
@media(max-width:560px){.clients-section .client-logos{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.clients-section .client-logo{height:68px!important;min-height:68px!important;padding:8px!important}}
/* Client filters: independent from category filters, with clear active state */
.client-filters{margin-top:-10px;margin-bottom:28px}
.client-filters .filter{font-size:13px;padding:10px 16px}
.client-filters .filter.active{background:#111;color:#fff;border-color:#111}
.filter-empty{grid-column:1/-1;padding:28px 0;color:#666;text-align:center}
.filter-empty[hidden]{display:none!important}


/* Fixed, consistent portfolio thumbnail geometry for every platform. */
#work .grid { align-items: start; }
#work .card { align-self: start; min-width: 0; }
#work .preview {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #111;
}
#work .preview > a,
#work .preview > button {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#work .preview img,
#work .preview .social-thumbnail img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}
#work .social-thumbnail { min-height: 0 !important; height: 100% !important; aspect-ratio: auto !important; }
#work .preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; }


/* Final uniform thumbnail override: all portfolio cards use the same 16:9 frame. */
#work .grid .card .preview,
#work .grid .card .preview.social-preview,
#work .grid .card .preview.social-preview.instagram,
#work .grid .card .preview.social-preview.facebook {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
}
#work .grid .card .preview > a,
#work .grid .card .preview > button {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#work .grid .card .preview img,
#work .grid .card .preview > a img,
#work .grid .card .preview > button img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}