/*
Theme Name: iLuck Studio
Author: iLuck Studio
Description: iLuck Studio custom WordPress theme. Original visual design preserved; content and portfolio are manageable from WordPress.
Version: 5.0.0
Text Domain: iluck-studio
*/

.admin-bar .nav{top:32px;} @media(max-width:782px){.admin-bar .nav{top:46px;}}
.wp-site-blocks,.entry-content{margin:0;padding:0;}
body{margin:0;}
.iluck-project-link{display:block;width:100%;height:100%;}
.iluck-admin-note{font-size:13px;color:#666;}

/* index.html */
:root{
    --ink:#0c0c0e;
    --ink-soft:#17171a;
    --paper:#f4f2ed;
    --paper-dim:#e7e4dc;
    --signal:#e31c5c;
    --signal-soft:#ff6b95;
    --ember:#2b2b2e;
    --line-dark:rgba(244,242,237,.14);
    --line-light:rgba(12,12,14,.12);
    --mono:'JetBrains Mono',monospace;
    --display:'Cairo',sans-serif;
    --body:'Inter',sans-serif;
    --body-ar:'Cairo',sans-serif;
    --ease:cubic-bezier(.16,.84,.32,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--body);
    overflow-x:hidden;
    cursor:default;
  }
  html[dir="rtl"] body{font-family:var(--body-ar);}
  ::selection{background:var(--signal);color:var(--paper);}

  h1,h2,h3,.disp{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:.95;}
  html[dir="rtl"] .disp{letter-spacing:0;}
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;}
  html[dir="rtl"] .eyebrow{font-family:var(--body-ar);letter-spacing:.02em;}

  a{color:inherit;text-decoration:none;}
  section{position:relative;width:100%;}

  /* ---------- custom cursor dot ---------- */
  .cursor-dot{
    position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
    background:var(--paper);mix-blend-mode:difference;pointer-events:none;z-index:9999;
    transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease);
  }
  .cursor-dot.grow{width:64px;height:64px;}
  @media (hover:none){.cursor-dot{display:none;}}

  /* ---------- nav ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:100;color:var(--paper);
    display:flex;align-items:center;justify-content:space-between;
    padding:1.4rem 2.4rem;background:linear-gradient(180deg,rgba(12,12,14,.55),rgba(12,12,14,0));
    backdrop-filter:blur(6px);
  }
  .nav .mark{display:flex;align-items:center;}
  .nav .mark img{height:24px;width:auto;display:block;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));}
  .nav .mark .logo-icon{display:none;}
  @media(max-width:520px){
    .nav{padding:1.1rem 1.3rem;}
    .nav .mark .logo-full{display:none;}
    .nav .mark .logo-icon{display:block;height:26px;}
    .lang-toggle{gap:.3rem;font-size:.66rem;}
    .lang-toggle button{padding:.32rem .6rem;}
  }
  .lang-toggle{
    display:flex;gap:.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  }
  .lang-toggle button{
    background:none;border:1px solid var(--line-dark);color:var(--paper);
    padding:.4rem .8rem;border-radius:100px;cursor:pointer;transition:.3s var(--ease);
  }
  .lang-toggle button.active{background:var(--paper);color:var(--ink);border-color:var(--paper);}

  /* ---------- hero ---------- */
  .hero{
    height:100vh;min-height:640px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;overflow:hidden;
  }
  .hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.58;}
  .hero-video + #heroCanvas{z-index:1;}
  .hero::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(120% 90% at 50% 30%,rgba(12,12,14,.15),rgba(12,12,14,.75) 75%);
    z-index:1;
  }
  .hero-inner{position:relative;z-index:2;padding:0 1.5rem;}
  .hero h1{font-size:clamp(2.6rem,7vw,6.4rem);}
  .hero h1 span{display:block;}
  .hero-sub{
    margin-top:1.4rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;
    text-transform:uppercase;opacity:.6;
  }
  html[dir="rtl"] .hero-sub{font-family:var(--body-ar);letter-spacing:.02em;text-transform:none;}
  .scroll-cue{
    position:absolute;bottom:2.6rem;left:50%;transform:translateX(-50%);z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:.6rem;
    font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;opacity:.55;
  }
  .scroll-cue .line{width:1px;height:38px;background:var(--paper);opacity:.5;overflow:hidden;position:relative;}
  .scroll-cue .line i{position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--paper);animation:cue 2.2s infinite var(--ease);}
  @keyframes cue{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}

  /* ---------- split panels (services) ---------- */
  .panels{display:flex;height:100vh;min-height:560px;background:var(--ink);}
  .panel{
    position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column;
    justify-content:space-between;padding:2.2rem;color:#fff;
    transition:flex 1.1s cubic-bezier(.19,1,.22,1),filter .6s ease;
  }
  .panels:hover .panel{flex:1;}
  .panels .panel:hover{flex:1.7;}
  .panels.has-hover .panel:not(:hover){filter:brightness(.5) saturate(.55);}
  .panel-bg{position:absolute;inset:0;z-index:0;transition:transform 1.6s cubic-bezier(.19,1,.22,1);background-repeat:no-repeat;}
  .panel-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
  .panel:hover .panel-bg{transform:scale(1.1);}
  .panel-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,.1) 45%,rgba(0,0,0,.35));transition:opacity .6s ease;}
  .panel:hover .panel-bg::after{opacity:.7;}
  .panel.p-design .panel-bg{background:linear-gradient(155deg,#1a1c33,#e31c5c 65%,#ff6b95);}
  .panel.p-video .panel-bg{background:linear-gradient(160deg,#0c0c0e,#2b2b2e 130%);}
  .panel.p-dev .panel-bg{background:linear-gradient(165deg,#0c0c0e,#1a1a1c,#e31c5c 150%);}
  .panel-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;}
  .panel-index{font-family:var(--mono);font-size:.85rem;letter-spacing:.1em;opacity:.75;transition:opacity .4s ease,letter-spacing .4s ease;}
  .panel:hover .panel-index{opacity:1;letter-spacing:.18em;}
  .panel-center{position:relative;z-index:1;align-self:center;margin-inline:auto;}
  .panel-btn{
    width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s ease;
  }
  .panel:hover .panel-btn{transform:scale(1.18) rotate(-10deg);box-shadow:0 16px 40px rgba(227,28,92,.5);}
  html[dir="rtl"] .panel:hover .panel-btn{transform:scale(1.18) rotate(10deg);}
  .panel.p-design .panel-btn{background:var(--ember);}
  .panel.p-video .panel-btn{background:var(--signal);}
  .panel.p-dev .panel-btn{background:var(--paper);}
  .panel.p-dev .panel-btn svg{stroke:var(--ink);}
  .panel-btn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;transition:transform .4s ease;}
  html[dir="rtl"] .panel-btn svg{transform:scaleX(-1);}
  .panel-title{transition:transform .5s var(--ease);}
  .panel:hover .panel-title{transform:translateY(-6px);}
  .panel-bottom{position:relative;z-index:1;}
  .panel-eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75;display:block;margin-bottom:.4rem;}
  html[dir="rtl"] .panel-eyebrow{font-family:var(--body-ar);letter-spacing:.02em;text-transform:none;}
  .panel-title{font-size:clamp(1.5rem,2.6vw,2.2rem);}
  @media(max-width:820px){
    .panels{flex-direction:column;height:auto;}
    .panel{min-height:34vh;flex:none !important;}
  }

  /* ---------- service sections ---------- */
  .service{padding:9rem 0 8rem;overflow:hidden;}
  .service.light{background:var(--paper);color:var(--ink);}
  .service.dark{background:var(--ink);color:var(--paper);}
  .service-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    padding:0 clamp(1.5rem,5vw,4rem);margin-bottom:3.5rem;gap:2rem;
    border-bottom:1px solid;
  }
  .service.light .service-head{border-color:var(--line-light);}
  .service.dark .service-head{border-color:var(--line-dark);}
  .service-num{font-family:var(--mono);font-size:1rem;letter-spacing:.1em;opacity:.5;padding-bottom:1.4rem;}
  .service-title{font-size:clamp(3.2rem,9vw,8rem);padding-bottom:.4rem;}
  .service-desc{
    max-width:20ch;text-align:end;font-size:.95rem;line-height:1.5;padding-bottom:1.6rem;opacity:.75;
  }
  html[dir="rtl"] .service-desc{text-align:start;}

  .service-body{
    padding:0 clamp(1.5rem,5vw,4rem);
    display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem;
  }
  .swatch{
    border-radius:2px;position:relative;overflow:hidden;
    transform:translateY(40px);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease);
  }
  .swatch.reveal{transform:translateY(0);opacity:1;}
  .swatch .tag{
    position:absolute;bottom:1rem;inset-inline-start:1rem;font-family:var(--mono);
    font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;
    background:rgba(0,0,0,.32);padding:.3rem .7rem;border-radius:100px;backdrop-filter:blur(6px);
  }
  .swatch:hover{transform:translateY(-6px) scale(1.01);}

  /* design section blocks */
  .g-design-1{grid-column:1/8;aspect-ratio:16/10;background:linear-gradient(135deg,#e7e4dc,#c9c4b6 40%,#e31c5c);}
  .g-design-2{grid-column:8/13;aspect-ratio:3/4;background:linear-gradient(160deg,#0c0c0e,#e31c5c);align-self:end;}
  .g-design-3{grid-column:1/5;aspect-ratio:1/1;background:conic-gradient(from 200deg,#2b2b2e,#e31c5c,#0c0c0e,#2b2b2e);margin-top:2rem;}
  .g-design-4{grid-column:5/9;aspect-ratio:4/5;background:linear-gradient(200deg,#f4f2ed,#ff6b95);margin-top:2rem;}
  .g-design-5{grid-column:9/13;aspect-ratio:16/11;background:linear-gradient(120deg,#0c0c0e,#1a1a1c 40%,#e31c5c);margin-top:-1rem;}

  /* video section blocks */
  .g-video-1{grid-column:2/9;aspect-ratio:16/9;background:linear-gradient(120deg,#0c0c0e,#e31c5c 60%,#ff6b95);}
  .g-video-2{grid-column:9/13;aspect-ratio:3/5;background:linear-gradient(200deg,#2b2b2e,#0c0c0e 70%);align-self:end;}
  .g-video-3{grid-column:1/6;aspect-ratio:5/6;background:linear-gradient(150deg,#1a1a1c,#e31c5c);margin-top:2.2rem;}
  .g-video-4{grid-column:6/13;aspect-ratio:16/8;background:linear-gradient(90deg,#0c0c0e,#1a1a1c,#0c0c0e);margin-top:2.2rem;}

  /* dev section blocks - browser mockups */
  .browser{
    border-radius:8px;overflow:hidden;background:var(--paper);box-shadow:0 30px 60px rgba(0,0,0,.35);
  }
  .browser .bar{height:28px;background:#dedad0;display:flex;align-items:center;gap:6px;padding:0 10px;}
  .browser .bar span{width:8px;height:8px;border-radius:50%;background:#b8b2a2;}
  .browser .screen{height:calc(100% - 28px);}
  .g-dev-1{grid-column:1/7;aspect-ratio:16/11;}
  .g-dev-1 .screen{background:linear-gradient(160deg,#0c0c0e,#e31c5c);}
  .g-dev-2{grid-column:7/13;aspect-ratio:9/14;align-self:end;}
  .g-dev-2 .screen{background:linear-gradient(200deg,#2b2b2e,#f4f2ed 80%);}
  .g-dev-3{grid-column:2/8;aspect-ratio:16/10;margin-top:2rem;}
  .g-dev-3 .screen{background:linear-gradient(120deg,#1a1a1c,#0c0c0e,#e31c5c);}
  .g-dev-4{grid-column:8/13;aspect-ratio:4/5;margin-top:2rem;}
  .g-dev-4 .screen{background:linear-gradient(160deg,#ff6b95,#0c0c0e);}

  .tags-row{
    padding:2.6rem clamp(1.5rem,5vw,4rem) 0;display:flex;flex-wrap:wrap;gap:.6rem;
  }
  .tags-row span{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
    padding:.5rem 1rem;border-radius:100px;border:1px solid;
  }
  .service.light .tags-row span{border-color:var(--line-light);}
  .service.dark .tags-row span{border-color:var(--line-dark);}
  html[dir="rtl"] .tags-row span{font-family:var(--body-ar);text-transform:none;letter-spacing:0;}

  /* ---------- selected works ---------- */
  .works{background:var(--ink);padding:9rem 0;}
  .works .service-head{border-color:var(--line-dark);}
  .works-grid{
    padding:0 clamp(1.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(12,1fr);
    gap:1.4rem;margin-top:1rem;
  }
  .project{
    position:relative;border-radius:2px;overflow:hidden;cursor:pointer;
    transform:translateY(50px);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease);
  }
  .project.reveal{transform:translateY(0);opacity:1;}
  .project .art{width:100%;height:100%;transition:transform .8s var(--ease);}
  .project:hover .art{transform:scale(1.06);}
  .project .info{
    position:absolute;inset-inline-start:0;bottom:0;padding:1.4rem;
    background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 80%);
    width:100%;
  }
  .project .cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;}
  html[dir="rtl"] .project .cat{font-family:var(--body-ar);letter-spacing:0;text-transform:none;}
  .project .title{font-family:var(--display);font-weight:700;font-size:1.3rem;margin-top:.2rem;}

  .p1{grid-column:1/8;aspect-ratio:16/10;}
  .p1 .art{background:linear-gradient(135deg,#e31c5c,#0c0c0e 70%);}
  .p2{grid-column:8/13;aspect-ratio:3/5;}
  .p2 .art{background:linear-gradient(200deg,#2b2b2e,#1a1a1c);}
  .p3{grid-column:1/5;aspect-ratio:1/1;margin-top:1.4rem;}
  .p3 .art{background:linear-gradient(150deg,#f4f2ed,#ff6b95);}
  .p4{grid-column:5/13;aspect-ratio:16/7;margin-top:1.4rem;}
  .p4 .art{background:linear-gradient(100deg,#0c0c0e,#e31c5c 50%,#1a1a1c);}
  .p5{grid-column:1/7;aspect-ratio:16/11;margin-top:1.4rem;}
  .p5 .art{background:linear-gradient(160deg,#1a1a1c,#0c0c0e,#2b2b2e 120%);}
  .p6{grid-column:7/13;aspect-ratio:16/11;margin-top:1.4rem;}
  .p6 .art{background:linear-gradient(140deg,#ff6b95,#e31c5c,#0c0c0e);}

  /* ---------- clients ---------- */
  .clients{background:#0b0b0d;color:#fff;padding:8rem 0 5rem;}
  .clients .service-head{border-color:rgba(255,255,255,.16);}
  .clients .service-num,.clients .service-title,.clients .service-desc{color:#fff;}
  .client-grid{
    padding:0 clamp(1.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,.16);
  }
  @media(min-width:720px){.client-grid{grid-template-columns:repeat(6,1fr);}}
  .client{
    border-inline-end:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
    display:flex;align-items:center;justify-content:center;height:130px;
    font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:#fff;
    opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease),color .3s var(--ease);
  }
  .client.reveal{opacity:1;transform:translateY(0);}
  .client:hover{color:var(--signal);}
  .client-logo{padding:1.2rem;}
  .client-logo img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.8;transition:filter .3s var(--ease),opacity .3s var(--ease);}
  .client-logo:hover img{filter:grayscale(0) brightness(1) invert(0);opacity:1;}
  .credit{
    text-align:center;margin-top:4rem;font-family:var(--mono);font-size:.7rem;
    letter-spacing:.1em;color:#fff;opacity:.55;text-transform:uppercase;
  }
  html[dir="rtl"] .credit{font-family:var(--body-ar);letter-spacing:0;text-transform:none;}

  @media(max-width:900px){
    .service-head{flex-direction:column;align-items:flex-start;gap:.8rem;}
    .service-desc{text-align:start;max-width:38ch;padding-bottom:0;}
    .g-design-1,.g-video-1,.g-dev-1{grid-column:1/13;}
    .g-design-2,.g-video-2,.g-dev-2{grid-column:1/13;align-self:auto;}
    .g-design-3,.g-video-3,.g-dev-3{grid-column:1/13;}
    .g-design-4,.g-video-4,.g-dev-4{grid-column:1/13;}
    .g-design-5{grid-column:1/13;}
    .p1,.p2,.p3,.p4,.p5,.p6{grid-column:1/13;margin-top:1.4rem;}
    .client-grid{grid-template-columns:repeat(2,1fr);}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
    .swatch,.project,.client{opacity:1;transform:none;}
  }

/* design.html */
:root{
    --ink:#0c0c0e;--ink-soft:#17171a;--paper:#f4f2ed;--paper-dim:#e7e4dc;
    --signal:#e31c5c;--signal-soft:#ff6b95;--ember:#2b2b2e;
    --line-dark:rgba(244,242,237,.14);--line-light:rgba(12,12,14,.12);
    --mono:'JetBrains Mono',monospace;--display:'Cairo',sans-serif;
    --body:'Inter',sans-serif;--body-ar:'Cairo',sans-serif;--ease:cubic-bezier(.16,.84,.32,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden;}
  html[dir="rtl"] body{font-family:var(--body-ar);}
  ::selection{background:var(--signal);color:var(--paper);}
  h1,h2,h3,.disp{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:.95;}
  html[dir="rtl"] .disp{letter-spacing:0;}
  a{color:inherit;text-decoration:none;}
  section{position:relative;width:100%;}

  .cursor-dot{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--ink);mix-blend-mode:difference;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease);}
  .cursor-dot.grow{width:64px;height:64px;}
  @media (hover:none){.cursor-dot{display:none;}}

  .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 2.4rem;color:var(--paper);background:linear-gradient(180deg,rgba(12,12,14,.55),rgba(12,12,14,0));backdrop-filter:blur(6px);}
  .nav .mark{display:flex;align-items:center;}
  .nav .mark img{height:22px;width:auto;display:block;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));}
  .nav .mark .logo-icon{display:none;}
  @media(max-width:520px){
    .nav{padding:1.1rem 1.3rem;}
    .nav .mark .logo-full{display:none;}
    .nav .mark .logo-icon{display:block;height:24px;}
    .lang-toggle{gap:.3rem;font-size:.66rem;}
    .lang-toggle button{padding:.32rem .6rem;}
  }
  .lang-toggle{display:flex;gap:.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;}
  .lang-toggle button{background:none;border:1px solid rgba(244,242,237,.4);color:var(--paper);padding:.4rem .8rem;border-radius:100px;cursor:pointer;transition:.3s var(--ease);}
  .lang-toggle button.active{background:var(--paper);color:var(--ink);border-color:var(--paper);}

  .page-hero{padding:9.5rem clamp(1.5rem,5vw,4rem) 4rem;border-bottom:1px solid var(--line-light);}
  .page-num{font-family:var(--mono);font-size:.85rem;letter-spacing:.14em;opacity:.55;margin-bottom:1.2rem;display:block;}
  .page-hero h1{font-size:clamp(3rem,10vw,7.5rem);}
  .page-hero p{margin-top:1.2rem;max-width:48ch;opacity:.72;font-size:1.02rem;line-height:1.6;}

  .tags-row{padding:2.4rem clamp(1.5rem,5vw,4rem) 0;display:flex;flex-wrap:wrap;gap:.6rem;}
  .tags-row span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.5rem 1rem;border-radius:100px;border:1px solid var(--line-light);}
  html[dir="rtl"] .tags-row span{font-family:var(--body-ar);text-transform:none;letter-spacing:0;}

  .service-body{padding:3rem clamp(1.5rem,5vw,4rem) 8rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem;}
  .swatch{border-radius:2px;position:relative;overflow:hidden;transform:translateY(40px);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease);}
  .swatch.reveal{transform:translateY(0);opacity:1;}
  .swatch .tag{position:absolute;bottom:1rem;inset-inline-start:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.32);padding:.3rem .7rem;border-radius:100px;backdrop-filter:blur(6px);}
  .swatch:hover{transform:translateY(-6px) scale(1.01);}
  .g1{grid-column:1/8;aspect-ratio:16/10;background:linear-gradient(135deg,#e7e4dc,#c9c4b6 40%,#e31c5c);}
  .g2{grid-column:8/13;aspect-ratio:3/4;background:linear-gradient(160deg,#0c0c0e,#e31c5c);align-self:end;}
  .g3{grid-column:1/5;aspect-ratio:1/1;background:conic-gradient(from 200deg,#2b2b2e,#e31c5c,#0c0c0e,#2b2b2e);margin-top:2rem;}
  .g4{grid-column:5/9;aspect-ratio:4/5;background:linear-gradient(200deg,#f4f2ed,#ff6b95);margin-top:2rem;}
  .g5{grid-column:9/13;aspect-ratio:16/11;background:linear-gradient(120deg,#0c0c0e,#1a1a1c 40%,#e31c5c);margin-top:-1rem;}

  .related{background:var(--ink);color:var(--paper);padding:6rem clamp(1.5rem,5vw,4rem);}
  .related .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:2rem;display:block;}
  html[dir="rtl"] .related .eyebrow{font-family:var(--body-ar);letter-spacing:.02em;text-transform:none;}
  .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
  @media(max-width:700px){.related-grid{grid-template-columns:1fr;}}
  .project{position:relative;border-radius:2px;overflow:hidden;cursor:pointer;aspect-ratio:16/11;}
  .project .art{width:100%;height:100%;transition:transform .8s var(--ease);}
  .project:hover .art{transform:scale(1.06);}
  .project .info{position:absolute;inset-inline-start:0;bottom:0;padding:1.4rem;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 80%);width:100%;}
  .project .cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;}
  html[dir="rtl"] .project .cat{font-family:var(--body-ar);letter-spacing:0;text-transform:none;}
  .project .title{font-family:var(--display);font-weight:700;font-size:1.3rem;margin-top:.2rem;}
  .r1 .art{background:linear-gradient(135deg,#e31c5c,#0c0c0e 70%);}
  .r2 .art{background:linear-gradient(150deg,#f4f2ed,#ff6b95);}

  .foot{padding:3.5rem clamp(1.5rem,5vw,4rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
  .foot .home{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65;display:inline-flex;align-items:center;gap:.5rem;}
  .foot .next{font-family:var(--display);font-weight:700;font-size:1.1rem;display:inline-flex;align-items:center;gap:.6rem;}
  .foot .next svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
  html[dir="rtl"] .foot .next svg{transform:scaleX(-1);}

  @media(max-width:700px){
    .service-body{gap:1rem;}
    .g1,.g2,.g3,.g4,.g5{grid-column:1/13;margin-top:0;}
  }
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}.swatch{opacity:1;transform:none;}}

/* video.html */
:root{
    --ink:#0c0c0e;--ink-soft:#17171a;--paper:#f4f2ed;--paper-dim:#e7e4dc;
    --signal:#e31c5c;--signal-soft:#ff6b95;--ember:#2b2b2e;
    --line-dark:rgba(244,242,237,.14);--line-light:rgba(12,12,14,.12);
    --mono:'JetBrains Mono',monospace;--display:'Cairo',sans-serif;
    --body:'Inter',sans-serif;--body-ar:'Cairo',sans-serif;--ease:cubic-bezier(.16,.84,.32,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--ink);color:var(--paper);font-family:var(--body);overflow-x:hidden;}
  html[dir="rtl"] body{font-family:var(--body-ar);}
  ::selection{background:var(--signal);color:var(--paper);}
  h1,h2,h3,.disp{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:.95;}
  html[dir="rtl"] .disp{letter-spacing:0;}
  a{color:inherit;text-decoration:none;}
  section{position:relative;width:100%;}

  .cursor-dot{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--paper);mix-blend-mode:difference;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease);}
  .cursor-dot.grow{width:64px;height:64px;}
  @media (hover:none){.cursor-dot{display:none;}}

  .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 2.4rem;color:var(--paper);background:linear-gradient(180deg,rgba(12,12,14,.55),rgba(12,12,14,0));backdrop-filter:blur(6px);}
  .nav .mark{display:flex;align-items:center;}
  .nav .mark img{height:22px;width:auto;display:block;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));}
  .nav .mark .logo-icon{display:none;}
  @media(max-width:520px){
    .nav{padding:1.1rem 1.3rem;}
    .nav .mark .logo-full{display:none;}
    .nav .mark .logo-icon{display:block;height:24px;}
    .lang-toggle{gap:.3rem;font-size:.66rem;}
    .lang-toggle button{padding:.32rem .6rem;}
  }
  .lang-toggle{display:flex;gap:.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;}
  .lang-toggle button{background:none;border:1px solid rgba(244,242,237,.4);color:var(--paper);padding:.4rem .8rem;border-radius:100px;cursor:pointer;transition:.3s var(--ease);}
  .lang-toggle button.active{background:var(--paper);color:var(--ink);border-color:var(--paper);}

  .page-hero{padding:9.5rem clamp(1.5rem,5vw,4rem) 4rem;border-bottom:1px solid var(--line-dark);}
  .page-num{font-family:var(--mono);font-size:.85rem;letter-spacing:.14em;opacity:.55;margin-bottom:1.2rem;display:block;}
  .page-hero h1{font-size:clamp(3rem,10vw,7.5rem);}
  .page-hero p{margin-top:1.2rem;max-width:48ch;opacity:.72;font-size:1.02rem;line-height:1.6;}

  .tags-row{padding:2.4rem clamp(1.5rem,5vw,4rem) 0;display:flex;flex-wrap:wrap;gap:.6rem;}
  .tags-row span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.5rem 1rem;border-radius:100px;border:1px solid var(--line-dark);}
  html[dir="rtl"] .tags-row span{font-family:var(--body-ar);text-transform:none;letter-spacing:0;}

  .service-body{padding:3rem clamp(1.5rem,5vw,4rem) 8rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem;}
  .swatch{border-radius:2px;position:relative;overflow:hidden;transform:translateY(40px);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease);}
  .swatch.reveal{transform:translateY(0);opacity:1;}
  .swatch .tag{position:absolute;bottom:1rem;inset-inline-start:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.32);padding:.3rem .7rem;border-radius:100px;backdrop-filter:blur(6px);}
  .swatch:hover{transform:translateY(-6px) scale(1.01);}
  .g1{grid-column:2/9;aspect-ratio:16/9;background:linear-gradient(120deg,#0c0c0e,#e31c5c 60%,#ff6b95);}
  .g2{grid-column:9/13;aspect-ratio:3/5;background:linear-gradient(200deg,#2b2b2e,#0c0c0e 70%);align-self:end;}
  .g3{grid-column:1/6;aspect-ratio:5/6;background:linear-gradient(150deg,#1a1a1c,#e31c5c);margin-top:2.2rem;}
  .g4{grid-column:6/13;aspect-ratio:16/8;background:linear-gradient(90deg,#0c0c0e,#1a1a1c,#0c0c0e);margin-top:2.2rem;}

  .related{background:var(--paper);color:var(--ink);padding:6rem clamp(1.5rem,5vw,4rem);}
  .related .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:2rem;display:block;}
  html[dir="rtl"] .related .eyebrow{font-family:var(--body-ar);letter-spacing:.02em;text-transform:none;}
  .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
  @media(max-width:700px){.related-grid{grid-template-columns:1fr;}}
  .project{position:relative;border-radius:2px;overflow:hidden;cursor:pointer;aspect-ratio:16/11;}
  .project .art{width:100%;height:100%;transition:transform .8s var(--ease);}
  .project:hover .art{transform:scale(1.06);}
  .project .info{position:absolute;inset-inline-start:0;bottom:0;padding:1.4rem;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 80%);width:100%;}
  .project .cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;}
  html[dir="rtl"] .project .cat{font-family:var(--body-ar);letter-spacing:0;text-transform:none;}
  .project .title{font-family:var(--display);font-weight:700;font-size:1.3rem;margin-top:.2rem;}
  .r1 .art{background:linear-gradient(160deg,#1a1a1c,#0c0c0e,#2b2b2e 120%);}
  .r2 .art{background:linear-gradient(140deg,#ff6b95,#e31c5c,#0c0c0e);}

  .foot{padding:3.5rem clamp(1.5rem,5vw,4rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
  .foot .home{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65;display:inline-flex;align-items:center;gap:.5rem;}
  .foot .next{font-family:var(--display);font-weight:700;font-size:1.1rem;display:inline-flex;align-items:center;gap:.6rem;}
  .foot .next svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
  html[dir="rtl"] .foot .next svg{transform:scaleX(-1);}

  @media(max-width:700px){
    .service-body{gap:1rem;}
    .g1,.g2,.g3,.g4{grid-column:1/13;margin-top:0;}
  }
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}.swatch{opacity:1;transform:none;}}

/* development.html */
:root{
    --ink:#0c0c0e;--ink-soft:#17171a;--paper:#f4f2ed;--paper-dim:#e7e4dc;
    --signal:#e31c5c;--signal-soft:#ff6b95;--ember:#2b2b2e;
    --line-dark:rgba(244,242,237,.14);--line-light:rgba(12,12,14,.12);
    --mono:'JetBrains Mono',monospace;--display:'Cairo',sans-serif;
    --body:'Inter',sans-serif;--body-ar:'Cairo',sans-serif;--ease:cubic-bezier(.16,.84,.32,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden;}
  html[dir="rtl"] body{font-family:var(--body-ar);}
  ::selection{background:var(--signal);color:var(--paper);}
  h1,h2,h3,.disp{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:.95;}
  html[dir="rtl"] .disp{letter-spacing:0;}
  a{color:inherit;text-decoration:none;}
  section{position:relative;width:100%;}

  .cursor-dot{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--ink);mix-blend-mode:difference;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease);}
  .cursor-dot.grow{width:64px;height:64px;}
  @media (hover:none){.cursor-dot{display:none;}}

  .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 2.4rem;color:var(--paper);background:linear-gradient(180deg,rgba(12,12,14,.55),rgba(12,12,14,0));backdrop-filter:blur(6px);}
  .nav .mark{display:flex;align-items:center;}
  .nav .mark img{height:22px;width:auto;display:block;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35));}
  .nav .mark .logo-icon{display:none;}
  @media(max-width:520px){
    .nav{padding:1.1rem 1.3rem;}
    .nav .mark .logo-full{display:none;}
    .nav .mark .logo-icon{display:block;height:24px;}
    .lang-toggle{gap:.3rem;font-size:.66rem;}
    .lang-toggle button{padding:.32rem .6rem;}
  }
  .lang-toggle{display:flex;gap:.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;}
  .lang-toggle button{background:none;border:1px solid rgba(244,242,237,.4);color:var(--paper);padding:.4rem .8rem;border-radius:100px;cursor:pointer;transition:.3s var(--ease);}
  .lang-toggle button.active{background:var(--paper);color:var(--ink);border-color:var(--paper);}

  .page-hero{padding:9.5rem clamp(1.5rem,5vw,4rem) 4rem;border-bottom:1px solid var(--line-light);}
  .page-num{font-family:var(--mono);font-size:.85rem;letter-spacing:.14em;opacity:.55;margin-bottom:1.2rem;display:block;}
  .page-hero h1{font-size:clamp(3rem,10vw,7.5rem);}
  .page-hero p{margin-top:1.2rem;max-width:48ch;opacity:.72;font-size:1.02rem;line-height:1.6;}

  .tags-row{padding:2.4rem clamp(1.5rem,5vw,4rem) 0;display:flex;flex-wrap:wrap;gap:.6rem;}
  .tags-row span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.5rem 1rem;border-radius:100px;border:1px solid var(--line-light);}
  html[dir="rtl"] .tags-row span{font-family:var(--body-ar);text-transform:none;letter-spacing:0;}

  .service-body{padding:3rem clamp(1.5rem,5vw,4rem) 8rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem;}
  .swatch{border-radius:2px;position:relative;overflow:hidden;transform:translateY(40px);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease);}
  .swatch.reveal{transform:translateY(0);opacity:1;}
  .swatch .tag{position:absolute;bottom:1rem;inset-inline-start:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.32);padding:.3rem .7rem;border-radius:100px;backdrop-filter:blur(6px);}
  .swatch:hover{transform:translateY(-6px) scale(1.01);}
  .browser{border-radius:8px;overflow:hidden;background:var(--paper);box-shadow:0 30px 60px rgba(0,0,0,.25);}
  .browser .bar{height:28px;background:#dedad0;display:flex;align-items:center;gap:6px;padding:0 10px;}
  .browser .bar span{width:8px;height:8px;border-radius:50%;background:#b8b2a2;}
  .browser .screen{height:calc(100% - 28px);}
  .g1{grid-column:1/7;aspect-ratio:16/11;}
  .g1 .screen{background:linear-gradient(160deg,#0c0c0e,#e31c5c);}
  .g2{grid-column:7/13;aspect-ratio:9/14;align-self:end;}
  .g2 .screen{background:linear-gradient(200deg,#2b2b2e,#f4f2ed 80%);}
  .g3{grid-column:2/8;aspect-ratio:16/10;margin-top:2rem;}
  .g3 .screen{background:linear-gradient(120deg,#1a1a1c,#0c0c0e,#e31c5c);}
  .g4{grid-column:8/13;aspect-ratio:4/5;margin-top:2rem;}
  .g4 .screen{background:linear-gradient(160deg,#ff6b95,#0c0c0e);}

  .related{background:var(--ink);color:var(--paper);padding:6rem clamp(1.5rem,5vw,4rem);}
  .related .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:2rem;display:block;}
  html[dir="rtl"] .related .eyebrow{font-family:var(--body-ar);letter-spacing:.02em;text-transform:none;}
  .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
  @media(max-width:700px){.related-grid{grid-template-columns:1fr;}}
  .project{position:relative;border-radius:2px;overflow:hidden;cursor:pointer;aspect-ratio:16/11;}
  .project .art{width:100%;height:100%;transition:transform .8s var(--ease);}
  .project:hover .art{transform:scale(1.06);}
  .project .info{position:absolute;inset-inline-start:0;bottom:0;padding:1.4rem;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 80%);width:100%;}
  .project .cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;}
  html[dir="rtl"] .project .cat{font-family:var(--body-ar);letter-spacing:0;text-transform:none;}
  .project .title{font-family:var(--display);font-weight:700;font-size:1.3rem;margin-top:.2rem;}
  .r1 .art{background:linear-gradient(100deg,#0c0c0e,#e31c5c 50%,#1a1a1c);}
  .r2 .art{background:linear-gradient(140deg,#ff6b95,#e31c5c,#0c0c0e);}

  .foot{padding:3.5rem clamp(1.5rem,5vw,4rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
  .foot .home{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65;display:inline-flex;align-items:center;gap:.5rem;}
  .foot .next{font-family:var(--display);font-weight:700;font-size:1.1rem;display:inline-flex;align-items:center;gap:.6rem;}
  .foot .next svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
  html[dir="rtl"] .foot .next svg{transform:scaleX(-1);}

  @media(max-width:700px){
    .service-body{gap:1rem;}
    .g1,.g2,.g3,.g4{grid-column:1/13;margin-top:0;}
  }
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}.swatch{opacity:1;transform:none;}}

/* iLuck Studio dynamic service media + project request area. Existing layout and visual system remain unchanged. */
.media-swatch{background:#111!important;display:flex;align-items:center;justify-content:center;}
.media-swatch .service-media-image,.media-swatch .service-media-video{width:100%;height:100%;object-fit:cover;display:block;}
.media-swatch .service-media-video{background:#000;}
.service-request{background:var(--paper);color:var(--ink);padding:7rem clamp(1.5rem,5vw,4rem);border-top:1px solid var(--line-light);}
.request-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.5rem;border-bottom:1px solid var(--line-light);padding-bottom:1.5rem;}
.request-head .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.55;display:block;margin-bottom:.5rem;}
.request-head h2{font-size:clamp(2.5rem,6vw,5.5rem);margin:0;max-width:12ch;}
.iluck-request-form{max-width:980px;}
.request-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.iluck-request-form label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.2rem;}
.iluck-request-form input,.iluck-request-form textarea{display:block;width:100%;margin-top:.55rem;border:1px solid rgba(12,12,14,.18);background:transparent;padding:.9rem 1rem;font:inherit;font-family:var(--body);box-sizing:border-box;outline:none;transition:border-color .25s ease;}
.iluck-request-form input:focus,.iluck-request-form textarea:focus{border-color:var(--signal);}
.request-submit{margin-top:.5rem;border:0;background:var(--ink);color:var(--paper);padding:1rem 1.4rem;display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .3s ease,background .3s ease;}
.request-submit:hover{transform:translateY(-2px);background:var(--signal);}
.request-submit svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
.request-success,.request-error{padding:1rem 1.2rem;margin-bottom:1.5rem;border:1px solid rgba(12,12,14,.15);}
.request-error{border-color:var(--signal);}
html[dir="rtl"] .request-head .eyebrow,html[dir="rtl"] .iluck-request-form label{font-family:var(--body-ar);letter-spacing:0;text-transform:none;}
html[dir="rtl"] .request-head{direction:rtl;}
@media(max-width:700px){.request-grid{grid-template-columns:1fr}.request-head{align-items:flex-start;flex-direction:column}.service-request{padding-top:5rem;padding-bottom:5rem;}}
.project-detail-cover{width:100%;height:auto;display:block;margin-bottom:2.5rem}.project-detail-copy{max-width:760px;font-size:1.05rem;line-height:1.8;margin-bottom:2.5rem}.project-detail-video video,.project-detail-gallery img,.project-detail-gallery video{width:100%;height:auto;display:block}.project-detail-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}.project-detail-gallery img,.project-detail-gallery video{background:#111;min-height:200px;object-fit:cover}@media(max-width:700px){.project-detail-gallery{grid-template-columns:1fr}}

/* V4 admin media controls */
.iluck-upload-field{margin:18px 0;padding:16px;border:1px solid #dcdcde;border-radius:10px;background:#fafafa;}
.iluck-single-preview{display:flex;align-items:center;gap:12px;min-height:10px;margin:10px 0;}
.iluck-single-preview img,.iluck-single-preview video{width:240px;max-height:150px;object-fit:cover;border-radius:8px;background:#111;}
.iluck-service-media-row{padding:14px 0;border-top:1px solid #eee;}
.iluck-service-media-row h3{margin:0 0 8px;}

/* =========================================================
   iLuck Labs-style Hero + Google Labs-inspired service carousel
   ========================================================= */
.hero-labs{
  position:relative;min-height:100vh;height:100svh;padding:0;display:block;overflow:hidden;background:#0c0c0e;color:#fff;
}
.hero-slides,.hero-slide,.hero-media,.hero-shade{position:absolute;inset:0;}
.hero-slide{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(7%,0,0) scale(1.07);
  clip-path:inset(0 0 0 8% round 0);
  filter:blur(4px);
  transition:opacity .9s cubic-bezier(.19,1,.22,1),transform 1.2s cubic-bezier(.19,1,.22,1),clip-path 1.2s cubic-bezier(.19,1,.22,1),filter 1.2s ease,visibility 1.2s;
}
.hero-slide.is-prev{transform:translate3d(-7%,0,0) scale(1.02);clip-path:inset(0 8% 0 0);}
.hero-slide.is-next{transform:translate3d(7%,0,0) scale(1.07);clip-path:inset(0 0 0 8%);}
.hero-slide.is-active{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) scale(1);clip-path:inset(0);filter:blur(0);
}
.hero-media{overflow:hidden;background:#121214;}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);transition:transform 8s cubic-bezier(.19,1,.22,1);}
.hero-slide.is-active .hero-media video{transform:scale(1);}
.hero-media-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 25% 30%,rgba(227,28,92,.48),transparent 30%),radial-gradient(circle at 75% 70%,rgba(0,207,254,.25),transparent 30%),linear-gradient(135deg,#111116,#292930);}
.hero-media-placeholder span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.45;}
.hero-shade{pointer-events:none;background:linear-gradient(90deg,rgba(8,8,10,.68),rgba(8,8,10,.08) 58%,rgba(8,8,10,.4)),linear-gradient(0deg,rgba(8,8,10,.62),transparent 55%);}
.hero-slide-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:1400px;width:100%;margin:auto;padding:6rem clamp(1.5rem,7vw,7rem);text-align:start;}
.hero-slide-inner{z-index:100;pointer-events:auto;}
.hero-cta{position:relative;z-index:1000;pointer-events:auto;cursor:pointer;touch-action:manipulation;}
.hero-kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;opacity:.72;margin-bottom:1.2rem;transform:translateY(18px);opacity:0;transition:transform .8s .15s ease,opacity .8s .15s ease;}
.hero-slide-inner h1{margin:0;max-width:12ch;font-size:clamp(3.2rem,7vw,7rem);line-height:.9;letter-spacing:-.055em;text-wrap:balance;transform:translateY(30px);opacity:0;transition:transform 1s .22s cubic-bezier(.19,1,.22,1),opacity 1s .22s ease;}
.hero-slide-inner .hero-sub{max-width:42rem;margin-top:1.6rem;font-size:clamp(.9rem,1.4vw,1.15rem);line-height:1.55;opacity:0;text-transform:none;letter-spacing:0;transform:translateY(22px);transition:transform .9s .36s cubic-bezier(.19,1,.22,1),opacity .9s .36s ease;}
.hero-cta{display:inline-flex;align-items:center;gap:.8rem;margin-top:2rem;padding:.8rem 1.15rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;transition:transform .45s var(--ease),background .45s ease,border-color .45s ease,opacity .8s .5s ease;opacity:0;transform:translateY(18px);}
.hero-slide.is-active .hero-kicker,.hero-slide.is-active .hero-slide-inner h1,.hero-slide.is-active .hero-sub,.hero-slide.is-active .hero-cta{transform:translateY(0);opacity:1;}
html[dir="rtl"] .hero-kicker{font-family:var(--body-ar);letter-spacing:.02em;}
html[dir="rtl"] .hero-slide-inner h1{letter-spacing:0;}
html[dir="rtl"] .hero-cta{font-family:var(--body-ar);letter-spacing:0;}
.hero-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .4s ease;}
.hero-cta:hover{transform:translateY(-3px);background:#fff;color:#0c0c0e;border-color:#fff;}
.hero-cta:hover svg{transform:translateX(4px);}
html[dir="rtl"] .hero-cta:hover svg{transform:translateX(-4px) scaleX(-1);}
.hero-dots{position:absolute;z-index:5;bottom:2.8rem;inset-inline-end:clamp(1.5rem,5vw,5rem);display:flex;align-items:center;gap:.5rem;}
.hero-dots button{width:42px;height:3px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.28);cursor:pointer;overflow:hidden;}
.hero-dots button span{display:block;width:0;height:100%;background:#fff;}
.hero-dots button.is-active span{width:100%;transition:width 6.5s linear;}
.hero-labs .scroll-cue{bottom:2.5rem;left:50%;}

/* Google Labs-style cards */
.lab-sections{position:relative;overflow:hidden;background:#f2f2f0;color:#171719;padding:clamp(5rem,9vw,9rem) 0 4rem;isolation:isolate;}
.lab-sections-glow{display:none !important;}
.lab-glow-one{width:38vw;height:38vw;min-width:420px;min-height:420px;left:-14vw;top:12rem;background:#5e91ff;}
.lab-glow-two{width:34vw;height:34vw;min-width:360px;min-height:360px;right:-10vw;top:1rem;background:#42e889;}
.lab-sections-head{max-width:1500px;margin:0 auto;padding:0 clamp(1.3rem,5vw,5rem) 3rem;display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;}
.lab-sections-kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5;}
.lab-sections-head h2{margin:.8rem 0 0;max-width:11ch;font-size:clamp(3.2rem,6.5vw,7rem);line-height:.88;letter-spacing:-.06em;}
.lab-sections-head p{max-width:30rem;margin:0 0 .35rem;font-size:1rem;line-height:1.6;opacity:.62;}
html[dir="rtl"] .lab-sections-head h2{letter-spacing:0;}
html[dir="rtl"] .lab-sections-kicker{font-family:var(--body-ar);letter-spacing:0;text-transform:none;}
.lab-carousel{overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;scrollbar-width:none;padding:1rem 0 2.5rem;}
.lab-carousel::-webkit-scrollbar{display:none;}
.lab-track{display:flex;gap:2rem;width:max-content;padding:0 max(1.3rem,calc((100vw - 1500px)/2 + 5rem));}
.lab-card{width:min(390px,29vw);min-width:300px;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 20px 60px rgba(20,20,20,.1);transform:rotate(-1.5deg);transition:transform .65s cubic-bezier(.19,1,.22,1),box-shadow .65s ease;scroll-snap-align:center;cursor:pointer;}
.lab-card:nth-child(2n){transform:rotate(1.5deg);}
.lab-card:hover,.lab-card.is-current{transform:translateY(-10px) rotate(0);box-shadow:0 35px 90px rgba(20,20,20,.17);}
.lab-card-media{aspect-ratio:1/1.05;background:#e8e5df;overflow:hidden;}
.lab-card-media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;transition:transform 1s cubic-bezier(.19,1,.22,1);}
.lab-card:hover .lab-card-media img,.lab-card.is-current .lab-card-media img{transform:scale(1.045);}
.lab-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 25% 25%,#fff5ad,transparent 30%),radial-gradient(circle at 75% 70%,#b7d1ff,transparent 35%),#eeeae4;}
.lab-card-placeholder span{font-size:2.4rem;letter-spacing:-.04em;}
.lab-card-body{position:relative;padding:1.45rem 1.5rem 1.55rem;min-height:225px;display:flex;flex-direction:column;}
.lab-card-index{font-family:var(--mono);font-size:.66rem;opacity:.38;letter-spacing:.12em;}
.lab-card-body h3{font-size:clamp(1.7rem,2.1vw,2.2rem);line-height:1;margin:.8rem 0 0;letter-spacing:-.045em;}
html[dir="rtl"] .lab-card-body h3{letter-spacing:0;}
.lab-card-body p{font-size:.95rem;line-height:1.5;opacity:.65;margin:.8rem 0 1.2rem;max-width:30ch;}
.lab-card-link{margin-top:auto;display:inline-flex;align-items:center;gap:.55rem;width:max-content;color:#171719;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;transition:gap .35s ease;}
html[dir="rtl"] .lab-card-link{font-family:var(--body-ar);letter-spacing:0;}
.lab-card-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .35s ease;}
.lab-card-link:hover{gap:.8rem;}
.lab-card-link:hover svg{transform:translateX(3px);}
html[dir="rtl"] .lab-card-link svg{transform:scaleX(-1);}
html[dir="rtl"] .lab-card-link:hover svg{transform:translateX(-3px) scaleX(-1);}
.lab-carousel-nav{display:flex;justify-content:center;align-items:center;gap:1rem;padding-top:.5rem;}
.lab-carousel-nav button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(23,23,25,.13);background:rgba(255,255,255,.28);display:grid;place-items:center;cursor:pointer;transition:transform .35s ease,background .35s ease;}
.lab-carousel-nav button:hover{transform:translateY(-3px);background:#fff;}
.lab-carousel-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;}
.lab-carousel-count{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.68rem;min-width:74px;justify-content:center;}
.lab-carousel-count i{display:block;width:24px;height:1px;background:rgba(23,23,25,.25);}
html[dir="rtl"] .lab-carousel-nav{direction:ltr;}

@media(max-width:820px){
  .hero-slide-inner{justify-content:flex-end;padding:5rem 1.3rem 7rem;}
  .hero-slide-inner h1{font-size:clamp(3.8rem,18vw,6.5rem);}
  .hero-dots{bottom:1.8rem;inset-inline-end:1.3rem;}
  .hero-labs .scroll-cue{display:none;}
  .lab-sections{padding-top:5rem;}
  .lab-sections-head{display:block;padding-bottom:2rem;}
  .lab-sections-head h2{font-size:clamp(3rem,14vw,5rem);}
  .lab-sections-head p{margin-top:1.4rem;max-width:34rem;}
  .lab-track{gap:1rem;padding:0 1.3rem;}
  .lab-card{width:min(82vw,390px);min-width:min(82vw,390px);border-radius:22px;}
  .lab-card-body{min-height:205px;}
  .lab-carousel{padding-bottom:2rem;}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide,.hero-media video,.lab-card,.lab-card-media img{transition:none;}
  .hero-dots button.is-active span{transition:none;width:100%;}
  .lab-carousel{scroll-behavior:auto;}
}

/* Click anywhere on a Labs service card to open its dedicated page. */
.lab-card[data-card-link]{cursor:pointer;}

/* =========================================================
   V8 — Clean Google Labs-inspired service cards + clients fix
   ========================================================= */
.lab-sections{
  background:#f3f3f1 !important;
  color:#171719;
  padding:clamp(4rem,7vw,7rem) 0 3.5rem;
}
.lab-sections-glow{display:none !important;}
.lab-sections-head{
  max-width:1200px;
  padding:0 1.5rem 2.5rem;
}
.lab-carousel{
  overflow-x:auto;
  padding:1rem 0 2rem;
  scroll-snap-type:x mandatory;
}
.lab-track{
  width:max-content;
  gap:1.25rem;
  padding:0 max(1.5rem,calc((100vw - 1200px)/2));
}
.lab-card,
.lab-card:nth-child(2n){
  width:360px;
  min-width:360px;
  max-width:360px;
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 35px rgba(20,20,20,.08);
  transform:none;
  transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s ease;
  scroll-snap-align:center;
}
.lab-card:hover,
.lab-card.is-current{
  transform:translateY(-7px);
  box-shadow:0 24px 55px rgba(20,20,20,.13);
}
.lab-card-media{
  aspect-ratio:16/10;
  background:#e9e9e7;
}
.lab-card-media img{
  object-fit:cover;
}
.lab-card-body{
  min-height:205px;
  padding:1.35rem 1.4rem 1.45rem;
}
.lab-card-index{
  font-size:.64rem;
  color:#777;
  opacity:.65;
}
.lab-card-body h3{
  font-size:clamp(1.65rem,2vw,2rem);
  margin:.7rem 0 0;
}
.lab-card-body p{
  font-size:.9rem;
  line-height:1.5;
  margin:.7rem 0 1rem;
  opacity:.62;
}
.lab-card-link{
  color:#171719;
  font-size:.68rem;
}
.lab-carousel-nav{
  padding-top:.25rem;
}

/* The clients block is intentionally dark; all headings/copy must stay white. */
.clients{
  background:#0b0b0d !important;
  color:#fff !important;
}
.clients .service-head,
.clients .service-head *{
  color:#fff !important;
}
.clients .service-num,
.clients .service-title,
.clients .service-desc{
  color:#fff !important;
}
.clients .credit{color:#fff !important;}

@media(max-width:820px){
  .lab-sections{padding-top:4rem;}
  .lab-track{gap:1rem;padding:0 1rem;}
  .lab-card,
  .lab-card:nth-child(2n){
    width:min(82vw,360px);
    min-width:min(82vw,360px);
    max-width:min(82vw,360px);
  }
}

/* =========================================================
   FINAL V8 OVERRIDES — service navigation, square portfolio,
   and white clients section typography
   ========================================================= */

/* Hero CTA: keep the original hero visual design untouched. */
.hero-cta{cursor:pointer;pointer-events:auto;}

/* Services background: one flat light-gray color, no decorative circles. */
.lab-sections{
  background:#f2f2f0 !important;
}
.lab-sections-glow,
.lab-glow-one,
.lab-glow-two{
  display:none !important;
}

/* Selected Works: consistent square cards in a clean 3-column grid. */
.works{
  background:var(--ink) !important;
  color:#fff !important;
}
.works .service-head,
.works .service-head *{
  color:#fff !important;
}
.works-grid{
  padding:0 clamp(1.25rem,5vw,4rem) !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:1.25rem !important;
  margin-top:1.5rem !important;
}
.works-grid .project,
.works-grid .project.p1,
.works-grid .project.p2,
.works-grid .project.p3,
.works-grid .project.p4,
.works-grid .project.p5,
.works-grid .project.p6{
  grid-column:auto !important;
  grid-row:auto !important;
  aspect-ratio:1 / 1 !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  position:relative !important;
  transform:translateY(50px) !important;
  opacity:0;
  background:#17171a !important;
}
.works-grid .project.reveal{
  transform:translateY(0) !important;
  opacity:1;
}
.works-grid .project .art{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center !important;
  transition:transform .7s var(--ease),filter .7s var(--ease) !important;
}
.works-grid .project:hover .art{
  transform:scale(1.06) !important;
  filter:saturate(1.05);
}
.works-grid .project .info{
  position:absolute !important;
  inset:auto 0 0 !important;
  width:100% !important;
  padding:1.25rem !important;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,0) 85%) !important;
  color:#fff !important;
}
.works-grid .project .info *{
  color:#fff !important;
}
.works-grid .project .cat{
  color:rgba(255,255,255,.72) !important;
}
.works-grid .project .title{
  color:#fff !important;
}

/* Clients / logo showcase: every text element is white on black. */
.clients,
.clients *,
.clients .service-head,
.clients .service-head *,
.clients .service-num,
.clients .service-title,
.clients .service-desc,
.clients .client,
.clients .client .cat,
.clients .client .title,
.clients .credit{
  color:#fff !important;
}
.clients .service-head{
  border-color:rgba(255,255,255,.16) !important;
}
.clients .client{
  color:#fff !important;
}
.clients .client:hover{
  color:#fff !important;
}
.clients .credit{
  opacity:.75 !important;
}

/* Keep uploaded client logos white on the dark background. */
.clients .client-logo img{
  filter:grayscale(1) brightness(0) invert(1) !important;
  opacity:.9 !important;
}
.clients .client-logo:hover img{
  filter:grayscale(1) brightness(0) invert(1) !important;
  opacity:1 !important;
}

@media(max-width:900px){
  .works-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:560px){
  .works-grid{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   iLuck Studio — Square Portfolio Cards
   Clean grid + hover motion for category/project pages
   ========================================================= */
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.35rem;
}

.related-grid .project{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  min-height:0;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  background:#151518;
  transform:translateY(36px);
  opacity:0;
  transition:
    transform .85s cubic-bezier(.19,1,.22,1),
    opacity .7s ease,
    box-shadow .5s ease;
  isolation:isolate;
}

.related-grid .project.reveal{
  transform:translateY(0);
  opacity:1;
}

.related-grid .project:nth-child(2){transition-delay:.08s;}
.related-grid .project:nth-child(3){transition-delay:.16s;}
.related-grid .project:nth-child(4){transition-delay:.24s;}
.related-grid .project:nth-child(5){transition-delay:.32s;}
.related-grid .project:nth-child(6){transition-delay:.40s;}

.related-grid .project .art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  transform:scale(1.001);
  transition:transform .9s cubic-bezier(.19,1,.22,1), filter .7s ease;
  will-change:transform;
}

.related-grid .project::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,.12) 55%,
      rgba(0,0,0,.88) 100%
    );
  opacity:.82;
  transition:opacity .5s ease;
}

.related-grid .project::after{
  content:"↗";
  position:absolute;
  top:1rem;
  inset-inline-end:1rem;
  z-index:3;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  color:#fff;
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:1.05rem;
  opacity:0;
  transform:translateY(-8px) scale(.82) rotate(-8deg);
  transition:
    opacity .4s ease,
    transform .55s cubic-bezier(.34,1.56,.64,1),
    background .3s ease;
}

.related-grid .project:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 45px rgba(0,0,0,.20);
}

.related-grid .project:hover .art{
  transform:scale(1.09);
  filter:saturate(1.08) contrast(1.03);
}

.related-grid .project:hover::before{
  opacity:1;
}

.related-grid .project:hover::after{
  opacity:1;
  transform:translateY(0) scale(1) rotate(0);
}

.related-grid .project .info{
  position:absolute;
  inset-inline:0;
  bottom:0;
  z-index:2;
  padding:1.25rem 1.3rem 1.35rem;
  background:transparent;
  width:100%;
  transform:translateY(7px);
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}

.related-grid .project:hover .info{
  transform:translateY(0);
}

.related-grid .project .cat{
  margin-bottom:.25rem;
  color:rgba(255,255,255,.72);
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.related-grid .project .title{
  color:#fff;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.25);
}

html[dir="rtl"] .related-grid .project .cat{
  font-family:var(--body-ar);
  letter-spacing:0;
  text-transform:none;
}

/* Desktop: a more editorial rhythm while every artwork stays square */
@media(min-width:1100px){
  .related-grid .project:nth-child(3n + 2){
    transform:translateY(52px);
  }
  .related-grid .project:nth-child(3n + 2).reveal{
    transform:translateY(0);
  }
  .related-grid .project:nth-child(3n + 2):hover{
    transform:translateY(-8px);
  }
}

/* Tablet */
@media(max-width:900px){
  .related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
  }
}

/* Mobile */
@media(max-width:600px){
  .related{
    padding-inline:1rem;
  }
  .related-grid{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .related-grid .project{
    border-radius:10px;
  }
}

/* Respect reduced-motion accessibility preference */
@media(prefers-reduced-motion:reduce){
  .related-grid .project,
  .related-grid .project .art,
  .related-grid .project .info,
  .related-grid .project::after{
    transition:none !important;
  }
}

/* Design category / work-group UI */
.design-category-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem;max-width:1450px;margin:0 auto;padding:2.5rem clamp(1rem,4vw,3.5rem) 5rem}
.design-category-card,.category-work-card{position:relative;display:block;min-height:0;aspect-ratio:1 / 1;border:1px solid rgba(0,0,0,.12);border-radius:18px;overflow:hidden;background:#f8f7f3;text-decoration:none;color:#111;isolation:isolate;transform:translateY(25px);opacity:0;animation:iluckCatIn .7s var(--ease) forwards}
.design-category-bg,.category-work-art{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease);z-index:0}
.design-category-shade,.category-work-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.68));z-index:1}
.design-category-meta,.category-work-info{position:absolute;left:1.5rem;right:1.5rem;bottom:1.5rem;z-index:2;color:#fff;display:flex;flex-direction:column;gap:.4rem}
.design-category-meta span,.category-work-info span{font:500 .65rem var(--mono);letter-spacing:.14em;opacity:.8}
.design-category-meta strong,.category-work-info strong{font:700 clamp(1.8rem,3vw,3rem) var(--display);line-height:1}
.design-category-arrow,.category-work-arrow{position:absolute;right:1.25rem;top:1.25rem;z-index:3;width:48px;height:48px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.16);font-size:1.1rem;transition:.4s var(--ease)}
.design-category-card:hover,.category-work-card:hover{color:#fff;transform:translateY(-7px);box-shadow:0 25px 55px rgba(0,0,0,.16)}
.design-category-card:hover .design-category-bg,.category-work-card:hover .category-work-art{transform:scale(1.06)}
.design-category-card:hover .design-category-arrow,.category-work-card:hover .category-work-arrow{transform:rotate(8deg) scale(1.08);background:rgba(0,0,0,.35)}
.design-category-empty{grid-column:1/-1;padding:4rem 2rem;text-align:center;border:1px dashed rgba(0,0,0,.18);border-radius:16px}
.category-page-hero,.work-detail-head{padding:7rem clamp(1rem,5vw,4rem) 3rem;border-bottom:1px solid rgba(0,0,0,.12)}
.category-page-hero .eyebrow,.work-detail-head .eyebrow{font:500 .7rem var(--mono);letter-spacing:.16em}
.category-page-hero h1,.work-detail-head h1{margin:.8rem 0;font-size:clamp(4rem,10vw,8rem);line-height:.88}
.category-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem;max-width:1450px;margin:0 auto;padding:3rem clamp(1rem,4vw,3.5rem) 5rem}
.category-work-card{min-height:0 !important;aspect-ratio:1 / 1}
.work-detail-gallery{width:100%;margin:0;padding:0;background:#111;display:block;line-height:0}
.work-detail-gallery img{display:block;width:100%;height:auto;margin:0;padding:0;border:0}
@keyframes iluckCatIn{to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){.design-category-list,.category-work-grid{grid-template-columns:1fr}.category-work-card{min-height:300px}.category-page-hero h1,.work-detail-head h1{font-size:clamp(3.5rem,16vw,6rem)}}


/* Top back button for service section pages */
.service-top-back{
  position:fixed;
  top:7.25rem;
  left:clamp(1rem,5vw,4rem);
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem 1rem;
  border:1px solid rgba(12,12,14,.16);
  border-radius:999px;
  background:rgba(244,242,237,.86);
  color:#0c0c0e;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font:500 .7rem var(--mono);
  letter-spacing:.04em;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.07);
  transition:transform .35s var(--ease), background .35s ease, box-shadow .35s ease;
}
.service-top-back:hover{
  transform:translateY(-2px);
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
html[dir="rtl"] .service-top-back{direction:rtl;left:auto;right:clamp(1rem,5vw,4rem);}
@media(max-width:700px){
  .service-top-back{top:6.65rem;padding:.6rem .85rem;font-size:.64rem;}
}

/* Top back button for Design category and Work detail pages */
.category-top-back{
  position:fixed;
  top:7.25rem;
  left:clamp(1rem,5vw,4rem);
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.7rem 1rem;
  border:1px solid rgba(12,12,14,.16);
  border-radius:999px;
  background:rgba(244,242,237,.86);
  color:#0c0c0e;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font:500 .7rem var(--mono);
  letter-spacing:.04em;
  box-shadow:0 8px 24px rgba(0,0,0,.07);
  transition:transform .35s var(--ease), background .35s ease, box-shadow .35s ease;
}
.category-top-back:hover{
  transform:translateY(-2px);
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
html[dir="rtl"] .category-top-back{
  left:auto;
  right:clamp(1rem,5vw,4rem);
}
@media(max-width:700px){
  .category-top-back{
    top:6.65rem;
    padding:.6rem .85rem;
    font-size:.64rem;
  }
}

/* Square design category cards */
.design-category-card{
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
}
@media(max-width:800px){
  .design-category-card{
    aspect-ratio:1 / 1 !important;
    min-height:0 !important;
  }
}

/* Smaller, softer portfolio cards */
.design-category-list .design-category-card,
.category-work-grid .category-work-card{
  border-radius:20px;
}
@media (min-width:1500px){
  .design-category-list{grid-template-columns:repeat(3,minmax(0,390px));justify-content:center}
  .category-work-grid{grid-template-columns:repeat(3,minmax(0,390px));justify-content:center}
}
@media (max-width:1100px){
  .design-category-list,.category-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:650px){
  .design-category-list,.category-work-grid{grid-template-columns:1fr;max-width:430px}
  .design-category-list .design-category-card,
  .category-work-grid .category-work-card{width:100%}
}

/* NEW HERO BUTTON */
.hero-new-btn{
  position:relative;z-index:10000;pointer-events:auto;cursor:pointer;touch-action:manipulation;
  appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:.8rem;
  margin-top:2rem;padding:.8rem 1.15rem;border:1px solid rgba(255,255,255,.35);
  border-radius:999px;color:#fff;background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;line-height:1;
  opacity:0;transform:translateY(18px);
  transition:transform .45s var(--ease),background .45s ease,border-color .45s ease,opacity .8s .5s ease;
}
.hero-slide.is-active .hero-new-btn{transform:translateY(0);opacity:1;}
.hero-new-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .4s ease;}
.hero-new-btn:hover{transform:translateY(-3px);background:#fff;color:#0c0c0e;border-color:#fff;}
.hero-new-btn:hover svg{transform:translateX(4px);}
html[dir="rtl"] .hero-new-btn{font-family:var(--body-ar);letter-spacing:0;}
html[dir="rtl"] .hero-new-btn:hover svg{transform:translateX(-4px) scaleX(-1);}

/* FINAL CLICK FIX: the video/media must never sit above the content. */
.hero-slide .hero-media,
.hero-slide .hero-media video,
.hero-slide .hero-media-placeholder,
.hero-slide .hero-shade{
  pointer-events:none !important;
}
.hero-slide .hero-slide-inner{
  position:absolute !important;
  z-index:99999 !important;
  pointer-events:none !important;
}
.hero-slide .hero-slide-inner > *{
  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
}
.hero-slide .hero-new-btn,
.hero-slide .hero-new-btn *{
  pointer-events:auto !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

/* FINAL NATIVE LINK / LAYER ORDER FIX */
.hero-labs,
.hero-slides,
.hero-slide,
.hero-slide.is-active{pointer-events:auto !important;}
.hero-slide .hero-media,
.hero-slide .hero-media *,
.hero-slide .hero-shade{pointer-events:none !important;}
.hero-slide .hero-slide-inner{
  position:absolute !important;
  z-index:2147483000 !important;
  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
}
.hero-slide .hero-slide-inner .hero-kicker,
.hero-slide .hero-slide-inner h1,
.hero-slide .hero-slide-inner .hero-sub{
  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
}
.hero-slide .hero-slide-inner .hero-new-btn{
  position:relative !important;
  z-index:2147483001 !important;
  display:inline-flex !important;
  pointer-events:auto !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  cursor:pointer !important;
}


/* ---------- Live Behance portfolio ---------- */
.behance-live-section{
  padding:5rem clamp(1rem,4vw,3.5rem) 6rem;
  max-width:1450px;
  margin:0 auto;
}
.behance-live-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  padding-bottom:1.5rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.behance-live-head h2{margin-top:.55rem;font-size:clamp(2.4rem,5vw,5rem);line-height:.95;}
.behance-profile-link{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font:600 .72rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
}
.behance-profile-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;}
.behance-live-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.15rem;
}
.behance-live-card{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:18px;
  background:#111;
  color:#fff;
  text-decoration:none;
  transform:translateY(18px);
  opacity:0;
  animation:iluckCatIn .7s var(--ease) forwards;
}
.behance-live-art{position:absolute;inset:0;background:#17171a;}
.behance-live-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s var(--ease);
}
.behance-live-card:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.78) 100%);
  pointer-events:none;
}
.behance-live-info{
  position:absolute;
  z-index:2;
  left:1.2rem;
  right:1.2rem;
  bottom:1.1rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:end;
  gap:.8rem;
}
.behance-live-info span{
  font:500 .65rem var(--mono);
  opacity:.7;
  padding-bottom:.2rem;
}
.behance-live-info strong{
  font:700 1.05rem var(--display);
  line-height:1.15;
}
.behance-live-info i{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  transition:.4s var(--ease);
}
.behance-live-card:hover .behance-live-art img{transform:scale(1.06);}
.behance-live-card:hover .behance-live-info i{transform:rotate(8deg) scale(1.08);background:rgba(255,255,255,.12);}
.behance-live-empty{
  padding:3rem 1.5rem;
  text-align:center;
  border:1px dashed rgba(0,0,0,.18);
  border-radius:18px;
}
.behance-live-empty p{margin-bottom:1rem;}
.behance-live-empty a{font-weight:700;}
@media(max-width:900px){.behance-live-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){
  .behance-live-head{align-items:flex-start;flex-direction:column;}
  .behance-live-grid{grid-template-columns:1fr;}
  .behance-live-section{padding-top:3.5rem;}
}

/* Behance cards: keep the original card design, but make imported project
   titles calmer and easier to read. The original category cards are unchanged. */
.design-category-card.behance-category-card .design-category-meta strong{
  font-size:clamp(1.35rem,2.05vw,2.05rem);
  line-height:1.08;
  max-width:92%;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
html[dir="rtl"] .design-category-card.behance-category-card .design-category-meta strong{
  font-family:var(--body-ar),var(--display),sans-serif;
  line-height:1.18;
}
.behance-project-gallery{
  width:100%;
  display:block;
  background:#111;
  overflow:visible;
}
.behance-project-gallery img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  object-fit:contain;
}
/* Mixed Arabic/English Behance titles: use the site's Arabic-capable font
   only when the card actually contains Arabic characters. */
.design-category-card.behance-category-card .design-category-meta strong:lang(ar){
  font-family:var(--body-ar),var(--display),sans-serif;
}


/* Final Behance project title sizing — smaller on cards and project pages.
   Does not change the layout, images, spacing, or other typography. */
.design-category-card.behance-category-card .design-category-meta strong{
  font-size:clamp(.95rem,1.25vw,1.25rem) !important;
  line-height:1.12 !important;
  max-width:92%;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
html[dir="rtl"] .design-category-card.behance-category-card .design-category-meta strong{
  font-size:clamp(.9rem,1.2vw,1.2rem) !important;
  line-height:1.2 !important;
}

.work-detail-head h1{
  font-size:clamp(2.1rem,4.2vw,3.8rem) !important;
  line-height:.94 !important;
  max-width:1100px;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
@media(max-width:800px){
  .work-detail-head h1{
    font-size:clamp(1.9rem,8vw,3.2rem) !important;
    line-height:.98 !important;
  }
}

/* Mobile performance + consistent project arrow */
.design-category-bg,
.category-work-art{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  border:0;
}
.design-category-arrow svg,
.category-work-arrow svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:700px){
  /* Do not make mobile visitors wait for the card entrance animation. */
  .design-category-card,
  .category-work-card{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .design-category-card:hover,
  .category-work-card:hover{
    transform:none;
    box-shadow:none;
  }
  .design-category-arrow,
  .category-work-arrow{
    width:48px;
    height:48px;
    font-size:0;
  }
}