/* ==========================================================================
   Hasan Saqer — Elementor bridge + custom widget styling
   Loaded after style.css. Everything here styles markup this theme renders
   (the credit tables, video grid, press slider). Page layout itself is
   Elementor's, so it stays editable in the editor.
   ========================================================================== */

/* Elementor content sits full-bleed under the fixed header */
.elementor-page #hs-main > .elementor{width:100%}
#hs-main{overflow-x:clip}

/* ---------- Section head used across the custom widgets ---------- */
.hs-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.hs-sec-head h2{font-size:clamp(1.4rem,3vw,2rem);margin:0}
.hs-sec-head .hs-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted3)}

/* ---------- Filter chips (filmography / media tabs) ---------- */
.hs-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.hs-tab{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line4);background:transparent;
  color:var(--muted2);cursor:pointer;transition:all .25s ease;display:inline-flex;gap:8px;align-items:center;
}
.hs-tab .hs-tab-n{color:var(--muted4);font-size:.66rem}
.hs-tab:hover{border-color:var(--lineHover);color:var(--ink)}
.hs-tab.hs-active{background:var(--chip);border-color:var(--gold);color:var(--ink)}
.hs-tab.hs-active .hs-tab-n{color:var(--gold)}

/* ---------- Credit / hosting / commercial tables ---------- */
.hs-group{margin-bottom:44px}
.hs-group:last-child{margin-bottom:0}
.hs-rows{border-top:1px solid var(--line)}
.hs-row{
  display:grid;gap:16px;align-items:baseline;
  grid-template-columns:78px 1.6fr 1.3fr 1.3fr;
  padding:var(--row-pad) 12px;border-bottom:1px solid var(--line3);
  transition:background .25s ease,border-color .25s ease;
}
.hs-row:nth-child(odd){background:var(--stripe1)}
.hs-row:hover{background:var(--stripe2);border-bottom-color:var(--lineHover)}
.hs-row .hs-y{font-family:var(--font-mono);font-size:.76rem;color:var(--gold);letter-spacing:.06em}
.hs-row .hs-t{color:var(--ink);font-weight:400}
.hs-row .hs-r{color:var(--muted);font-size:.92rem}
.hs-row .hs-p{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted3)}
.hs-rows[data-cols="3"] .hs-row{grid-template-columns:78px 1.8fr 1.2fr}
.hs-empty{padding:26px 12px;color:var(--muted3);font-family:var(--font-mono);font-size:.78rem}

/* ---------- Awards ---------- */
.hs-award{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:24px 12px;
  border-bottom:1px solid var(--line3);transition:background .25s ease}
.hs-award:hover{background:var(--stripe1)}
.hs-award .hs-y{font-family:var(--font-mono);font-size:.8rem;color:var(--gold)}
.hs-award h3{font-size:1.05rem;margin:0 0 6px;font-family:var(--font-body);font-weight:400;color:var(--ink)}
.hs-award p{margin:0;font-size:.9rem;color:var(--muted2)}

/* ---------- Video grid ---------- */
.hs-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hs-video{border:1px solid var(--line2);background:var(--panel);overflow:hidden;cursor:pointer;
  transition:border-color .3s ease,transform .3s ease}
.hs-video:hover{border-color:var(--gold);transform:translateY(-3px)}
.hs-video .hs-thumb{position:relative;padding-top:56.25%;background:var(--stripe2);overflow:hidden}
.hs-video .hs-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease,filter .4s ease;filter:saturate(.7)}
.hs-video:hover .hs-thumb img{transform:scale(1.05);filter:none}
.hs-video .hs-noimg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center;padding:16px;
  background:linear-gradient(160deg,var(--stripe2),var(--panel))}
.hs-video .hs-noimg b{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);font-weight:400}
.hs-video .hs-noimg span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted3)}
.hs-video .hs-play{position:absolute;left:14px;bottom:14px;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:rgba(0,0,0,.55);
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.hs-video .hs-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px}
.hs-video .hs-meta b{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:.98rem}
.hs-video .hs-meta span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted3)}
@media(max-width:1024px){.hs-videos{grid-template-columns:repeat(2,1fr)}}

/* ---------- Press slider ---------- */
.hs-press{border:1px solid var(--line2);background:var(--panel);padding:34px}
.hs-press .hs-src{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px}
.hs-press blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.1rem,2.4vw,1.6rem);
  line-height:1.45;color:var(--ink2)}
.hs-press .hs-press-nav{display:flex;align-items:center;gap:14px;margin-top:22px}
.hs-press .hs-press-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line4);
  background:transparent;color:var(--muted2);cursor:pointer}
.hs-press .hs-press-nav button:hover{border-color:var(--gold);color:var(--gold)}
.hs-press .hs-press-count{font-family:var(--font-mono);font-size:.72rem;color:var(--muted3)}

/* ---------- Skill bars ---------- */
.hs-skill{margin-bottom:18px}
.hs-skill .hs-skill-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.hs-skill .hs-skill-top b{font-weight:400;color:var(--ink);font-size:.94rem}
.hs-skill .hs-skill-top span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted3)}
.hs-skill .hs-bar{height:2px;background:var(--line2)}
.hs-skill .hs-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width 1.1s cubic-bezier(.2,.7,.3,1)}

/* ---------- Marquee ---------- */
.hs-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.hs-marquee-track{display:flex;gap:44px;width:max-content;animation:hs-marquee 34s linear infinite}
.hs-marquee:hover .hs-marquee-track{animation-play-state:paused}
.hs-marquee span{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted3);white-space:nowrap}
.hs-marquee span::after{content:'·';margin-left:44px;color:var(--gold)}
@keyframes hs-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Stat counters ---------- */
.hs-stat .hs-n{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--ink);line-height:1}
.hs-stat .hs-l{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted3);margin-top:8px;display:block}

/* ---------- Vitals ---------- */
.hs-vitals{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.hs-vitals div{display:flex;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line3)}
.hs-vitals span:first-child{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted3)}
.hs-vitals span:last-child{color:var(--ink2);font-size:.9rem}

/* ---------- Contact form (CF7) ---------- */
.hs-form .wpcf7 p{margin:0}
.hs-form .wpcf7 br{display:none}
.hs-form label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted3);margin:18px 0 8px}
.hs-form input[type=text],.hs-form input[type=email],.hs-form textarea,.hs-form select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line4);
  color:var(--ink);font-family:var(--font-body);font-size:1rem;padding:10px 2px;
  transition:border-color .3s ease}
.hs-form input:focus,.hs-form textarea:focus,.hs-form select:focus{outline:none;border-bottom-color:var(--gold)}
.hs-form textarea{min-height:120px;resize:vertical}
.hs-form input[type=submit]{
  margin-top:26px;background:transparent;border:1px solid var(--gold);color:var(--gold);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 32px;border-radius:999px;cursor:pointer;transition:all .3s ease;width:auto}
.hs-form input[type=submit]:hover{background:var(--gold);color:var(--onGold)}
.hs-form .wpcf7-not-valid-tip{color:#e08a72;font-family:var(--font-mono);font-size:.7rem;margin-top:6px}
.hs-form .wpcf7-response-output{border-color:var(--line4)!important;color:var(--muted);
  font-family:var(--font-mono);font-size:.76rem;margin:22px 0 0!important;padding:12px 16px!important}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hs-row{grid-template-columns:64px 1fr;row-gap:6px}
  .hs-row .hs-r,.hs-row .hs-p{grid-column:2}
  .hs-rows[data-cols="3"] .hs-row{grid-template-columns:64px 1fr}
  .hs-award{grid-template-columns:70px 1fr;gap:14px}
  .hs-videos{grid-template-columns:1fr}
  .hs-vitals{grid-template-columns:1fr}
  .hs-press{padding:24px}
}

/* ==========================================================================
   v1.1 — hero composition, motion, cursor, client logos
   ========================================================================== */

/* ---------- Custom cursor (fine pointers only) ---------- */
#hs-cursor{
  position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:9998;opacity:0;
  transition:opacity .3s ease,background .25s ease,border-color .25s ease;
  will-change:transform;
}
#hs-cursor.hs-hot{background:rgba(217,178,113,.16)}
@media (pointer:coarse){#hs-cursor{display:none}}
html.hs-has-cursor,html.hs-has-cursor a,html.hs-has-cursor button,
html.hs-has-cursor [data-hover]{cursor:none}

/* ---------- Ghost outline headline ---------- */
.hs-ghost{
  position:absolute;right:-1%;top:5%;z-index:0;max-width:72%;text-align:right;
  pointer-events:none;user-select:none;line-height:.8;letter-spacing:-.02em;
}
.hs-ghost .elementor-heading-title{
  font-family:var(--font-display);font-size:clamp(62px,10.5vw,168px);
  color:transparent;-webkit-text-stroke:1px rgba(217,178,113,.13);
}
#hero,#top,.hs-has-ghost{position:relative}
#hero > .e-con-inner > .e-con{position:relative;z-index:1}
@media(max-width:900px){.hs-ghost{display:none}}

/* ---------- Hero media composition ---------- */
.hs-heromedia{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:end}
.hs-heromedia .hs-portrait{position:relative;aspect-ratio:4/5;border:1px solid var(--line2);
  overflow:hidden;background:var(--panel)}
.hs-heromedia .hs-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.hs-heromedia .hs-portrait:not(.hs-stage):hover img{transform:scale(1.04)}
.hs-heromedia .hs-side{display:flex;flex-direction:column;gap:14px}
.hs-heromedia .hs-filmcard{position:relative;aspect-ratio:1/1;overflow:hidden;
  border:1px solid var(--line2);cursor:pointer}
.hs-heromedia .hs-filmcard img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.05);
  transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.hs-heromedia .hs-filmcard:hover img{transform:scale(1.08);filter:none}
.hs-heromedia .hs-filmcard span{position:absolute;inset:auto 0 0 0;padding:12px;
  background:linear-gradient(transparent,rgba(11,10,9,.9));
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#f3eee6}
.hs-heromedia .hs-badge{border:1px solid var(--line2);background:var(--panel);padding:16px}
.hs-heromedia .hs-badge b{display:block;font-family:var(--font-display);font-size:34px;
  line-height:1;color:var(--gold);font-weight:400}
.hs-heromedia .hs-badge span{display:block;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-top:8px;line-height:1.5}
@media(max-width:600px){
  .hs-heromedia{grid-template-columns:1fr}
  .hs-heromedia .hs-side{flex-direction:row}
  .hs-heromedia .hs-side>*{flex:1}
}

/* ---------- Typewriter ---------- */
.hs-typewriter{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted2);font-size:.78rem}
.hs-typewriter i{font-style:normal;color:var(--gold)}
.hs-typewriter::after{content:'';display:inline-block;width:8px;height:1em;
  background:var(--gold);margin-left:4px;vertical-align:-.14em;animation:hs-caret 1s steps(1) infinite}
@keyframes hs-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- Client logo marquee ---------- */
.hs-logos{overflow:hidden;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hs-logos-track{display:flex;align-items:center;gap:56px;width:max-content;
  animation:hs-marquee 40s linear infinite}
.hs-logos:hover .hs-logos-track{animation-play-state:paused}
.hs-logos-item{display:flex;align-items:center;justify-content:center;height:52px;flex:0 0 auto}
.hs-logos-item img{max-height:44px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1) brightness(1.6);opacity:.55;transition:filter .35s ease,opacity .35s ease}
.hs-logos-item:hover img{filter:none;opacity:1}
html[data-hs-theme="light"] .hs-logos-item img{filter:grayscale(1) brightness(.4);opacity:.6}
html[data-hs-theme="light"] .hs-logos-item:hover img{filter:none;opacity:1}
.hs-logos-item b{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted3);font-weight:400;white-space:nowrap;
  transition:color .3s ease}
.hs-logos-item:hover b{color:var(--gold)}

/* ---------- Motion polish shared across the site ---------- */
.hs-row{transition:background .25s ease,border-color .25s ease,padding-left .32s cubic-bezier(.2,.8,.2,1)}
.hs-row:hover{padding-left:22px}
.hs-award{transition:background .25s ease,padding-left .32s cubic-bezier(.2,.8,.2,1)}
.hs-award:hover{padding-left:22px}
.hs-stat{border-left:1px solid var(--line2);padding-left:18px}
[id^="hs-svc-"],[id^="hs-pack-"],[id^="hs-hl-"]{
  transition:border-color .35s ease,transform .5s cubic-bezier(.2,.8,.2,1),background .35s ease}
[id^="hs-svc-"]:hover,[id^="hs-pack-"]:hover,[id^="hs-hl-"]:hover{
  border-color:var(--lineHover)!important;transform:translateY(-6px)}
.elementor-widget-image img{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hs-zoom:hover img{transform:scale(1.04)}
.hs-video{transition:border-color .3s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.elementor-button{transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .28s ease!important}
.elementor-button:hover{transform:translateY(-2px)}

/* Parallax targets: class hs-par-N moves at N/100 of scroll. */
[class*="hs-par-"]{will-change:transform}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  .hs-marquee-track,.hs-logos-track{animation:none}
  #hs-cursor{display:none}
  [class*="hs-par-"]{transform:none!important}
}

/* ==========================================================================
   v1.2 — pinned horizontal media strip, scroll-read statement, cursor label,
   wipe reveals. All of it degrades to plain stacked content when motion is
   switched off or the screen is small.
   ========================================================================== */

/* ---------- Horizontal media strip ----------
   The outer block is tall; the viewport inside it sticks to the top of the
   screen while the track slides sideways. Height is set by JS from the real
   track width so the sideways travel always finishes exactly on time. */
.hs-hstrip{position:relative}
.hs-hstrip-vp{
  position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;
  justify-content:center;gap:22px;overflow:hidden;padding:90px 0 40px}
.hs-hstrip-head{flex:0 0 auto;padding:0 4px}
.hs-hstrip-head h2{font-size:clamp(1.4rem,3vw,2rem);margin:0}
.hs-hstrip-head .hs-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted3);display:block;margin-top:8px}
.hs-hstrip-track{display:flex;gap:22px;width:max-content;will-change:transform}
.hs-hcard{width:var(--hs-cw,440px);flex:0 0 auto;cursor:pointer;
  border:1px solid var(--line2);background:var(--panel);overflow:hidden;
  transition:border-color .35s ease}
.hs-hcard:hover{border-color:var(--gold)}
.hs-hcard .hs-hfig{position:relative;overflow:hidden;aspect-ratio:var(--hs-ar,16/9);background:var(--stripe2)}
.hs-hcard .hs-hfig img{width:100%;height:100%;object-fit:cover;filter:saturate(.72);
  transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .5s ease}
.hs-hcard:hover .hs-hfig img{transform:scale(1.06);filter:none}
.hs-hcard .hs-hnum{position:absolute;left:14px;top:12px;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.16em;color:var(--ink);background:rgba(0,0,0,.5);padding:5px 10px;border-radius:999px;
  backdrop-filter:blur(6px)}
.hs-hcard .hs-hnoimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:18px;background:linear-gradient(160deg,var(--stripe2),var(--panel));
  font-family:var(--font-display);font-size:1.3rem;color:var(--ink)}
.hs-hcard .hs-hmeta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:16px 18px}
.hs-hcard .hs-hmeta b{font-weight:400;color:var(--ink);font-size:1rem}
.hs-hcard .hs-hmeta span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted3)}
.hs-hstrip-prog{flex:0 0 auto;height:2px;background:var(--line2);position:relative;margin:0 4px}
.hs-hstrip-prog i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--gold)}

/* Phones and tablets get a swipeable rail instead of a pinned section. */
@media(max-width:900px){
  .hs-hstrip{height:auto!important}
  .hs-hstrip-vp{position:static;height:auto;padding:0;overflow:visible}
  .hs-hstrip-track{width:auto;transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:14px}
  .hs-hstrip-track::-webkit-scrollbar{height:2px}
  .hs-hstrip-track::-webkit-scrollbar-thumb{background:var(--line4)}
  .hs-hcard{width:78vw;scroll-snap-align:start}
  .hs-hstrip-prog{display:none}
}

/* ---------- Statement that reads itself in ---------- */
.hs-statement{font-family:var(--font-display);line-height:1.24;color:var(--ink);margin:0}
.hs-statement i{font-style:normal;display:inline-block;opacity:.16;transition:opacity .45s ease}
.hs-statement i.hs-lit{opacity:1}

/* ---------- Label that rides with the cursor ---------- */
#hs-tip{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--gold);color:var(--onGold);padding:5px 11px;border-radius:999px;white-space:nowrap;
  opacity:0;transform:translate(-50%,-50%);transition:opacity .2s ease;will-change:transform}
#hs-tip.hs-on{opacity:1}

/* ---------- Wipe reveal for images ---------- */
.hs-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.76,0,.24,1)}
.hs-wipe.hs-in{clip-path:inset(0 0 0 0)}
.hs-wipe-up{clip-path:inset(100% 0 0 0);transition:clip-path 1.05s cubic-bezier(.76,0,.24,1)}
.hs-wipe-up.hs-in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .hs-wipe,.hs-wipe-up{clip-path:none!important;transition:none}
  .hs-statement i{opacity:1}
  .hs-hstrip{height:auto!important}
  .hs-hstrip-vp{position:static;height:auto;padding:0}
  .hs-hstrip-track{width:auto;transform:none!important;overflow-x:auto}
}

/* ==========================================================================
   v1.3 — silent video previews, retiring header, quieter scroll cue
   ========================================================================== */

/* A muted YouTube frame sits on top of the still and loops. Scaled up so the
   player's own furniture is cropped away and only the picture is left.
   Pointer events stay off, so a click still belongs to the card. */
.hs-prev{position:absolute;top:50%;left:50%;width:100%;height:100%;border:0;
  transform:translate(-50%,-50%) scale(1.36);pointer-events:none;opacity:0;
  transition:opacity .8s ease}
.hs-playing .hs-prev{opacity:1}
.hs-playing .hs-hfig>img,.hs-playing .hs-thumb>img{opacity:0}
.hs-hfig>img,.hs-thumb>img{transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .5s ease,opacity .8s ease}
.hs-sound{position:absolute;right:12px;bottom:12px;z-index:2;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:5px 10px;border-radius:999px;
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.hs-playing .hs-sound{opacity:1;transform:none}

/* Header steps out of the way going down and comes back on the way up. */
.hs-header{transition:transform .45s cubic-bezier(.4,0,.2,1),background .3s ease,border-color .3s ease}
.hs-header.hs-away{transform:translateY(-102%)}

/* The scroll cue has said its piece once the page starts moving. */
#hs-scrollcue{transition:opacity .5s ease,transform .5s ease}
#hs-scrollcue.hs-gone{opacity:0;transform:translateY(8px);pointer-events:none}

/* One easing and one length for every entrance on the site. */
.elementor-element.animated{animation-duration:.9s!important;
  animation-timing-function:cubic-bezier(.22,1,.36,1)!important}

@media (prefers-reduced-motion:reduce){
  .hs-prev{display:none}
  .hs-header.hs-away{transform:none}
}

/* ==========================================================================
   v1.4 — persona sequence in the hero, Instagram block, story-style ticks
   ========================================================================== */

/* ---------- Persona stage ----------
   A small theatre for one actor. Each role is lit in by a spotlight that
   opens as a circle from wherever the visitor points or clicks, while the
   previous role steps back into the dark. Pointing at the frame tilts it a
   little and a warm light follows the cursor. Nothing here touches scroll. */
.hs-heromedia .hs-stage{overflow:hidden;background:#050505;isolation:isolate;cursor:pointer;
  transform-origin:50% 50%;will-change:transform;border-radius:2px}
.hs-stage .hs-ps{position:absolute;inset:0;margin:0;z-index:1;
  clip-path:circle(0% at var(--x,50%) var(--y,32%))}
.hs-stage .hs-ps.hs-in{clip-path:circle(150% at var(--x,50%) var(--y,32%));
  transition:clip-path 1.3s cubic-bezier(.76,0,.24,1)}
.hs-stage .hs-ps img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);
  transition:transform 1.6s cubic-bezier(.2,.7,.3,1),filter 1.2s ease}
.hs-stage .hs-ps.hs-live img{transform:scale(1);transition:transform 8s cubic-bezier(.12,.75,.3,1),filter 1.2s ease}
.hs-stage .hs-ps.hs-out img{transform:scale(1.05);filter:brightness(.42) saturate(.5);
  transition:transform 1.3s cubic-bezier(.76,0,.24,1),filter 1.3s ease}

/* The light that follows the pointer, and the dark it pushes to the edges. */
.hs-stage .hs-spot{position:absolute;inset:0;z-index:60;pointer-events:none;opacity:0;
  transition:opacity .6s ease;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(255,236,214,.55) 0,rgba(255,236,214,0) 34%)}
.hs-stage::before{content:'';position:absolute;inset:0;z-index:59;pointer-events:none;opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(0,0,0,0) 26%,rgba(0,0,0,.42) 92%)}
.hs-stage.hs-hover .hs-spot,.hs-stage.hs-hover::before{opacity:1}

.hs-stage::after{content:'';position:absolute;inset:auto 0 0 0;height:40%;z-index:61;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0))}
.hs-ps-cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:62;display:flex;
  justify-content:space-between;align-items:baseline;gap:12px;color:#fff;pointer-events:none;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}
.hs-ps-cap .hs-ps-n{opacity:.82}
.hs-ps-cap .hs-ps-note{text-align:right;transition:opacity .3s ease,transform .3s ease}
.hs-ps-cap .hs-ps-note.hs-swap{opacity:0;transform:translateY(6px)}
.hs-ps-bar{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:63;pointer-events:none;
  background:rgba(255,255,255,.14)}
.hs-ps-bar::after{content:'';position:absolute;inset:0;background:var(--gold);
  transform:scaleX(var(--p,0));transform-origin:left center}

/* ---------- Role switcher under the name ---------- */
.hs-roles{display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;
  font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.hs-role{position:relative;background:none;border:0;margin:0;padding:6px 0 9px;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted3);transition:color .3s ease}
.hs-role:hover,.hs-role:focus-visible{color:var(--ink);outline:none}
.hs-role.hs-on{color:var(--gold)}
.hs-role i{position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--line4);
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.hs-role.hs-on i{transform:scaleX(1)}
.hs-role i::after{content:'';position:absolute;inset:0;background:var(--gold);
  transform:scaleX(var(--p,0));transform-origin:left}
.hs-role-sep{color:var(--line4);margin:0 .9em;user-select:none}

/* ---------- Instagram block ---------- */
.hs-ig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:48px;align-items:center}
.hs-ig-head{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.hs-ig-avatar{width:58px;height:58px;border-radius:50%;padding:2px;flex:0 0 auto;
  background:conic-gradient(from 210deg,var(--gold),#d4a24c,var(--gold))}
.hs-ig .hs-ig-avatar img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:50%;border:2px solid var(--bg);display:block}
.hs-ig-head b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.35rem;color:var(--ink)}
.hs-ig-head span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--muted3)}
.hs-ig-count{font-family:var(--font-display);font-size:clamp(3.6rem,9vw,7.4rem);line-height:.9;color:var(--ink);
  letter-spacing:-.02em;display:flex;align-items:baseline;gap:.08em}
.hs-ig-count em{font-style:italic;color:var(--gold)}
.hs-ig-label{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted3);margin:14px 0 26px;display:flex;gap:22px;flex-wrap:wrap}
.hs-ig-label b{color:var(--ink);font-weight:500}
.hs-ig-live{display:inline-flex;align-items:center;gap:8px}
.hs-ig-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 var(--gold);animation:hs-pulse 2.2s ease-out infinite}
@keyframes hs-pulse{0%{box-shadow:0 0 0 0 rgba(176,31,66,.55)}70%{box-shadow:0 0 0 10px rgba(176,31,66,0)}100%{box-shadow:0 0 0 0 rgba(176,31,66,0)}}
.hs-ig-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;padding:14px 26px;border-radius:999px;
  background:var(--gold);color:var(--onGold);transition:background .3s ease,color .3s ease}
.hs-ig-btn:hover{background:var(--ink);color:var(--bg)}
.hs-ig-btn svg{width:16px;height:16px}
.hs-ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hs-ig-grid a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--stripe2)}
.hs-ig-grid a:nth-child(3n+2){transform:translateY(28px)}
.hs-ig .hs-ig-grid a img{width:100%;height:100%;max-width:none;object-fit:cover;filter:saturate(.8);
  transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .5s ease}
.hs-ig-grid a::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .35s ease}
.hs-ig .hs-ig-grid a:hover img{transform:scale(1.07);filter:none}
.hs-ig-grid a:hover::after{opacity:1}
.hs-ig-grid a svg{position:absolute;left:50%;top:50%;width:28px;height:28px;z-index:2;color:#fff;
  transform:translate(-50%,-50%) scale(.7);opacity:0;transition:opacity .35s ease,transform .35s ease}
.hs-ig-grid a:hover svg{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(max-width:900px){
  .hs-ig{grid-template-columns:1fr;gap:30px}
  .hs-ig-grid a:nth-child(3n+2){transform:none}
}

@media (prefers-reduced-motion:reduce){
  .hs-stage .hs-ps,.hs-stage .hs-ps img{transition:none!important}
  .hs-stage .hs-ps img{transform:none!important}
  .hs-ig-live::before{animation:none}
}
/* Face-safe crops for tall portraits placed in short frames. */
.hs-pos-top img{object-position:50% 22%!important}
.hs-pos-high img{object-position:50% 18%!important}

/* ==========================================================================
   v1.6 — hero composition: a lit stage with floating cards, ambient colour,
   viewfinder marks, an editorial role caption; film grain; title reveal.
   ========================================================================== */

/* ---------- Composition ----------
   The stage carries the hero. The film and the award float over its left
   edge like prints laid on a contact sheet, so the block reads in depth
   instead of as three boxes in a row. */
.hs-heromedia.hs-has-stage{display:block;position:relative;isolation:isolate;padding:30px 0 40px}
.hs-heromedia.hs-has-stage .hs-stage{width:80%;margin-left:auto;aspect-ratio:4/5;border:0;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.hs-heromedia.hs-has-stage .hs-side{position:absolute;inset:0;display:block;pointer-events:none;z-index:5}
.hs-heromedia.hs-has-stage .hs-side>*{position:absolute;pointer-events:auto;will-change:transform;
  transition:box-shadow .4s ease}
.hs-heromedia.hs-has-stage .hs-filmcard{left:0;bottom:0;width:36%;aspect-ratio:4/5;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 60px -24px rgba(0,0,0,.9)}
.hs-heromedia.hs-has-stage .hs-filmcard img{filter:none}
.hs-heromedia.hs-has-stage .hs-filmcard.hs-playing>img{opacity:0}
.hs-heromedia.hs-has-stage .hs-filmcard>span{z-index:3}
.hs-heromedia.hs-has-stage .hs-badge{left:7%;top:0;padding:14px 18px 15px;
  background:color-mix(in srgb,var(--panel) 72%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.hs-heromedia.hs-has-stage .hs-badge b{font-style:italic;font-size:40px}

/* ---------- Ambient light ---------- */
.hs-ambient{position:absolute;inset:-10% -14% -6% 2%;z-index:-1;pointer-events:none}
.hs-ambient i{position:absolute;inset:0;background-size:cover;background-position:center 30%;
  filter:blur(72px) saturate(1.5);opacity:0;transform:scale(1.08);transition:opacity 1.8s ease}
.hs-ambient i.hs-on{opacity:.36}
html[data-hs-theme="light"] .hs-ambient i.hs-on{opacity:.26}

/* ---------- Stage furniture ---------- */
.hs-stage .hs-vf{position:absolute;inset:14px;z-index:64;pointer-events:none;opacity:.7;--c:rgba(255,255,255,.9);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/22px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/1px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/22px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/1px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/22px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/1px 22px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/22px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/1px 22px no-repeat}
.hs-stage>.hs-ps-n{position:absolute;top:27px;left:30px;z-index:65;pointer-events:none;color:#fff;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;display:flex;align-items:center;gap:9px}
.hs-stage>.hs-ps-n::before{content:'';width:6px;height:6px;border-radius:50%;background:#e2304f;
  box-shadow:0 0 0 0 rgba(226,48,79,.6);animation:hs-pulse 2s ease-out infinite}
.hs-stage .hs-ps-cap{display:block;left:30px;right:30px;bottom:32px;text-align:left}
.hs-ps-mask{display:block;overflow:hidden;padding:0 0 .08em}
.hs-ps-role{display:block;font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.7rem,2.5vw,2.5rem);line-height:1.05;letter-spacing:0;text-transform:none;color:#fff;
  transition:transform .55s cubic-bezier(.7,0,.3,1)}
.hs-ps-role.hs-swap{transform:translateY(112%)}
.hs-stage .hs-ps-cap .hs-ps-note{display:block;text-align:left;margin-top:10px;opacity:.82}
.hs-stage::after{height:46%;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.18) 60%,rgba(0,0,0,0))}

/* ---------- Smaller screens ---------- */
@media(max-width:1024px){
  .hs-heromedia.hs-has-stage{max-width:560px;margin:10px auto 0}
}
@media(max-width:600px){
  .hs-heromedia.hs-has-stage{padding:22px 0 30px}
  .hs-heromedia.hs-has-stage .hs-stage{width:84%}
  .hs-heromedia.hs-has-stage .hs-filmcard{width:38%}
  .hs-heromedia.hs-has-stage .hs-badge{left:3%;padding:10px 13px}
  .hs-heromedia.hs-has-stage .hs-badge b{font-size:28px}
  .hs-stage .hs-ps-cap{left:22px;right:20px;bottom:24px}
  .hs-stage>.hs-ps-n{top:22px;left:24px}
}

/* ---------- Title that rises line by line ---------- */
.hs-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hs-line>span{display:block;transform:translateY(108%);transition:transform 1.15s cubic-bezier(.19,1,.22,1)}
.hs-line+.hs-line>span{transition-delay:.11s}
.hs-lines-in .hs-line>span{transform:none}

/* ---------- Film grain ---------- */
#hs-grain{position:fixed;inset:-50%;z-index:9989;pointer-events:none;opacity:.05;
  background-image:url(../images/grain.png);background-size:128px 128px;
  animation:hs-grain 1s steps(6) infinite}
html[data-hs-theme="light"] #hs-grain{opacity:.035}
@keyframes hs-grain{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(5%,-7%)}
  60%{transform:translate(-3%,8%)}80%{transform:translate(7%,2%)}100%{transform:translate(0,0)}}

@media (prefers-reduced-motion:reduce){
  #hs-grain{animation:none}
  .hs-line>span{transform:none;transition:none}
  .hs-stage>.hs-ps-n::before{animation:none}
}
/* A 16:9 preview inside the portrait film card: sized to cover, not letterbox. */
.hs-filmcard .hs-prev{width:auto;height:100%;aspect-ratio:16/9;transform:translate(-50%,-50%) scale(1.22)}
/* The prints sit on the stage's left edge, so the stage's own words live on
   the right where nothing covers them. */
.hs-stage>.hs-ps-n{left:auto;right:30px;flex-direction:row-reverse}
.hs-stage .hs-ps-cap{left:auto;right:30px;max-width:66%;text-align:right}
.hs-stage .hs-ps-cap .hs-ps-note{text-align:right}
@media(max-width:600px){
  .hs-stage>.hs-ps-n{right:24px}
  .hs-stage .hs-ps-cap{right:22px;max-width:60%}
}

/* ==========================================================================
   v1.7 — polish
   ========================================================================== */

/* The film card reads as a black-and-white print until it moves or is touched. */
.hs-heromedia.hs-has-stage .hs-filmcard>img{filter:grayscale(1) contrast(1.08) brightness(.82);
  transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .6s ease,opacity .8s ease}
.hs-heromedia.hs-has-stage .hs-filmcard:hover>img{filter:none}

/* Pinned strip: tighter frame so the cards fill the screen while it holds. */
.hs-hstrip-vp{padding:84px 0 26px;gap:26px}

/* Service cards: on hover the matching photograph rises behind the words. */
[id^="hs-svc-"]{position:relative;overflow:hidden;
  transition:transform .55s cubic-bezier(.2,.7,.3,1),border-color .4s ease,box-shadow .55s ease}
/* Elementor reserves a container's ::before for its background overlay and
   switches it off with content:none, so this one has to insist. */
[id^="hs-svc-"]::before,[id^="hs-svc-"]::after{content:''!important;position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  width:auto;height:auto;mix-blend-mode:normal}
[id^="hs-svc-"]::before{background-size:cover!important;background-position:center 22%;background-repeat:no-repeat!important;
  opacity:0!important;transform:scale(1.1);z-index:0!important;
  transition:opacity .6s ease,transform 1.4s cubic-bezier(.2,.7,.3,1)!important}
[id^="hs-svc-"]::after{background:linear-gradient(to top,rgba(8,7,6,.96) 22%,rgba(8,7,6,.5));transition:opacity .6s ease}
html[data-hs-theme="light"] [id^="hs-svc-"]::after{background:linear-gradient(to top,rgba(247,244,239,.97) 24%,rgba(247,244,239,.62))}
[id^="hs-svc-"]>*{position:relative;z-index:1}
[id^="hs-svc-"]:hover{transform:translateY(-6px);border-color:var(--gold)!important;box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
[id^="hs-svc-"]:hover::before{opacity:1!important;transform:scale(1)}
[id^="hs-svc-"]:hover::after{opacity:1}
#hs-svc-1::before{background-image:url(../images/hasan-drama-window-2.jpg)}
#hs-svc-2::before{background-image:url(../images/hasan-stage.jpg)}
#hs-svc-3::before{background-image:url(../images/hasan-radio.jpg);background-position:62% 30%}
#hs-svc-4::before{background-image:url(../images/hasan-studio-cap.jpg)}

/* Every other bordered card lifts the same way, so cards feel like one family. */
[id^="hs-pack-"],[id^="hs-hl-"]{transition:transform .55s cubic-bezier(.2,.7,.3,1),border-color .4s ease}
[id^="hs-pack-"]:hover,[id^="hs-hl-"]:hover{transform:translateY(-6px);border-color:var(--gold)!important}

/* Closing band: a slow maroon light behind the last word. */
#cta{position:relative;overflow:hidden}
#cta::after{content:''!important;position:absolute;width:720px;height:720px;right:-160px;left:auto;top:50%;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 34%,transparent),transparent 62%);
  animation:hs-breathe 9s ease-in-out infinite alternate}
#cta>*{position:relative;z-index:1}
@keyframes hs-breathe{from{opacity:.55;transform:translateY(-50%) scale(.9)}to{opacity:1;transform:translateY(-50%) scale(1.08)}}
@media (prefers-reduced-motion:reduce){#cta::after{animation:none}}


/* ==========================================================================
   v1.8 — the media rail scrolls sideways on its own; nothing pins the page.
   ========================================================================== */
.hs-hstrip{position:relative;height:auto!important}
.hs-hstrip-vp{position:static;height:auto;display:block;overflow:visible;padding:96px 0 64px}
.hs-hstrip-head{max-width:var(--maxw);margin:0 auto 30px;padding:0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:20px}
.hs-hstrip-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.hs-rail-nav{display:flex;gap:10px;flex:0 0 auto}
.hs-rail-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line4);background:transparent;
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .3s ease,background .3s ease,color .3s ease,opacity .3s ease}
.hs-rail-btn svg{width:18px;height:18px}
.hs-rail-btn:hover:not(:disabled){border-color:var(--gold);background:var(--gold);color:var(--onGold)}
.hs-rail-btn:disabled{opacity:.3;cursor:default}
.hs-hstrip-track{width:auto;transform:none!important;will-change:auto;display:flex;gap:22px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:0 max(0px,calc((100% - var(--maxw)) / 2)) 6px;
  scroll-padding-left:max(0px,calc((100% - var(--maxw)) / 2))}
.hs-hstrip-track::-webkit-scrollbar{display:none}
.hs-hstrip-track .hs-hcard{scroll-snap-align:start}
.hs-hstrip-track.hs-grabbing{cursor:grabbing;scroll-snap-type:none;user-select:none}
.hs-hstrip-track.hs-grabbing .hs-hcard{pointer-events:none}
.hs-hstrip-prog{max-width:var(--maxw);margin:28px auto 0;height:2px;background:var(--line2);position:relative;display:block}
.hs-hstrip-prog i{position:absolute;inset:0;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(.08);
  transition:transform .25s ease-out}
@media(max-width:900px){
  .hs-hstrip-vp{padding:56px 0 40px}
  .hs-hstrip-head{margin-bottom:22px}
  .hs-rail-nav{display:none}
  .hs-hstrip-track{scroll-snap-type:x mandatory}
  .hs-hstrip-track .hs-hcard{width:80vw}
  .hs-hstrip-prog{display:block;margin-top:20px}
}

/* Grain holds still: a moving full-screen layer costs a repaint every step. */
#hs-grain{inset:0;animation:none;opacity:.045}
html[data-hs-theme="light"] #hs-grain{opacity:.03}

/* The ambient light paints inside its own box only. */
.hs-ambient{contain:strict}
.hs-ambient i{will-change:opacity}

/* Header glass is lighter on the GPU while the page moves under it. */
.hs-header.hs-stuck{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* The rail runs to the screen edges so the next card always peeks in; the
   heading and progress line stay on the page's content column. */
.hs-hstrip-head,.hs-hstrip-prog{width:min(var(--maxw),calc(100% - 48px));margin-left:auto;margin-right:auto}
.hs-hstrip-track{padding-left:max(24px,calc((100% - var(--maxw)) / 2));padding-right:max(24px,calc((100% - var(--maxw)) / 2));
  scroll-padding-left:max(24px,calc((100% - var(--maxw)) / 2))}
@media(max-width:900px){
  .hs-hstrip-head,.hs-hstrip-prog{width:calc(100% - 40px)}
  .hs-hstrip-track{padding-left:20px;padding-right:20px;scroll-padding-left:20px}
}
/* Vitals: air between the two columns so a value never runs into the next label. */
.hs-vitals{column-gap:40px}
/* Stacked hero: the stage gets a width the browser can know before layout.
   A percentage of a flex item there resolves to nothing while the column is
   being measured, and the column then collapses under the photograph. */
@media(max-width:1024px){.hs-heromedia.hs-has-stage .hs-stage{width:calc(.8 * min(560px, 100vw - 48px))}}
@media(max-width:600px){.hs-heromedia.hs-has-stage .hs-stage{width:calc(.84 * (100vw - 40px))}}

/* Client logos: white marks, one optical size (the files carry their own
   padding), quiet until hovered; dark marks in light mode. */
.hs-logos-track{gap:64px}
.hs-logos-item{height:60px}
.hs-logos-item img{height:52px;max-height:none!important;width:auto;max-width:none;
  filter:none;opacity:.62;transition:opacity .35s ease}
.hs-logos-item:hover img{opacity:1;filter:none}
html[data-hs-theme="light"] .hs-logos-item img{filter:invert(1);opacity:.62}
html[data-hs-theme="light"] .hs-logos-item:hover img{filter:invert(1);opacity:1}
@media(max-width:600px){.hs-logos-track{gap:44px}.hs-logos-item img{height:42px}}

/* v2.2 — Reels: vertical video cards, and a 9:16 player for them */
#hs-modal .hs-modal-frame.hs-tall{padding-top:0;aspect-ratio:9/16;width:min(420px,calc(78vh * 9 / 16),100%);margin:0 auto}
#hs-modal .hs-modal-frame video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}
.hs-reels{--hs-reels-cols:5;display:grid;grid-template-columns:repeat(var(--hs-reels-cols),minmax(0,1fr));gap:18px}
.hs-reel{position:relative;cursor:pointer;outline:none}
.hs-reel-fig{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:14px;background:#0b0a09;border:1px solid var(--line)}
.hs-reels .hs-reel-fig img,.hs-reels .hs-reel-fig video{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;border-radius:0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s ease}
.hs-reel-fig video{opacity:0}
.hs-reel-fig video.hs-on{opacity:1}
.hs-reel:hover .hs-reel-fig img,.hs-reel:hover .hs-reel-fig video,.hs-reel:focus-visible .hs-reel-fig img{transform:scale(1.04)}
.hs-reel-fig::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.72));pointer-events:none}
.hs-reel-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;background:linear-gradient(160deg,#1a1715,#0b0a09)}
.hs-reel-ph b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:#fff}
.hs-reel-tag{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:5px 9px;border-radius:999px}
.hs-reel-play{position:absolute;left:14px;bottom:14px;z-index:2;width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--onGold);display:flex;align-items:center;justify-content:center;font-size:13px;padding-left:2px;transition:transform .3s ease}
.hs-reel:hover .hs-reel-play{transform:scale(1.08)}
.hs-reel-meta{padding:12px 2px 0}
.hs-reel-meta b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.06rem;line-height:1.25;color:var(--ink)}
.hs-reel-meta span{display:block;margin-top:4px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted3)}
@media(max-width:1024px){.hs-reels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}.hs-reels::-webkit-scrollbar{display:none}.hs-reel{scroll-snap-align:start}}
@media(max-width:767px){.hs-reels{grid-auto-columns:62%;gap:14px}}
/* v2.2 — photo galleries: even crops, soft corners */
.hs-gal .gallery{margin:0 -5px!important}
.hs-gal .gallery-item{margin:0!important;padding:5px!important}
.hs-gal .gallery-item img{display:block;width:100%!important;height:auto;object-fit:cover;border-radius:10px;border:0!important;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.hs-gal .gallery-icon{overflow:hidden;border-radius:10px}
.hs-gal .gallery-item:hover img{transform:scale(1.04)}
.hs-gal-square .gallery-item img{aspect-ratio:1/1}
.hs-gal-tall .gallery-item img{aspect-ratio:3/4}