500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{--bg:#070707;--panel:#101010;--panel2:#151515;--gold:#d4af37;--gold2:#f3d884;--text:#f6f3eb;--muted:#b5b0a5;--line:rgba(212,175,55,.24);--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;line-height:1.68}a{color:inherit;text-decoration:none}img,video{max-width:100%;display:block}button{font:inherit}.container{width:min(var(--max),calc(100% - 40px));margin:auto}.eyebrow{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);font-weight:700}.gold{color:var(--gold2)}h1,h2,h3{font-family:'Playfair Display',Georgia,serif;line-height:1.08;margin:0 0 20px}h1{font-size:clamp(3rem,7.7vw,7.6rem);letter-spacing:-.045em}h2{font-size:clamp(2.15rem,4.5vw,4.6rem);letter-spacing:-.035em}h3{font-size:1.55rem}p{color:var(--muted);margin:0 0 20px}.lead{font-size:clamp(1.06rem,1.7vw,1.35rem);max-width:760px}.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--line);border-radius:999px;font-weight:700;transition:.25s}.btn.primary{background:var(--gold);color:#080808;border-color:var(--gold)}.btn:hover{transform:translateY(-2px);border-color:var(--gold)}
header{position:fixed;z-index:50;top:0;left:0;right:0;background:linear-gradient(#080808e8,#080808b8,transparent);backdrop-filter:blur(10px)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em}.brand-mark{width:43px;height:43px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-family:Georgia;font-size:1.3rem}.menu{display:flex;gap:24px;align-items:center;font-size:.9rem}.menu a{color:#ddd8cc}.menu a:hover{color:var(--gold2)}.hamb{display:none;background:none;border:0;color:white;font-size:1.5rem}
.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden;padding:150px 0 78px}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,#050505e8 43%,#05050570 70%,#050505c9 100%),linear-gradient(0deg,#070707 0%,transparent 32%)}.hero-portrait{position:absolute;z-index:1;right:2vw;bottom:0;height:90%;width:min(47vw,690px);object-fit:cover;object-position:center top;filter:saturate(.84) contrast(1.05)}.hero-content{position:relative;z-index:2;max-width:800px}.hero h1 span{display:block;color:var(--gold2)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.trustline{display:flex;gap:28px;flex-wrap:wrap;margin-top:58px;padding-top:25px;border-top:1px solid var(--line)}.trustline strong{display:block;font-size:1.2rem;color:#fff}.trustline small{color:var(--muted)}
section{padding:105px 0}.dark2{background:var(--panel)}.grid{display:grid;gap:24px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.card{background:linear-gradient(145deg,#161616,#0d0d0d);border:1px solid rgba(255,255,255,.08);padding:30px;border-radius:18px;position:relative;overflow:hidden}.card:before{content:'';position:absolute;inset:0 auto auto 0;width:80px;height:2px;background:var(--gold)}.card .num{font-family:Georgia;color:var(--gold2);font-size:2rem}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:52px}.section-head p{max-width:550px}.portrait-panel{min-height:570px;border-radius:24px;overflow:hidden;position:relative}.portrait-panel img{height:100%;width:100%;object-fit:cover}.portrait-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000b,transparent 55%)}.quote{font-family:Georgia;font-size:clamp(1.55rem,3vw,2.7rem);line-height:1.3;color:#fff;border-left:2px solid var(--gold);padding-left:28px}.timeline{border-left:1px solid var(--line);margin-left:10px}.time{padding:0 0 38px 36px;position:relative}.time:before{content:'';position:absolute;left:-7px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--gold)}.time b{color:var(--gold2);display:block;margin-bottom:6px}.logo-cloud{display:flex;gap:12px;flex-wrap:wrap}.pill{padding:10px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:#d9d4c9}.stat{padding:30px;border-top:1px solid var(--line)}.stat strong{font-family:Georgia;font-size:2.5rem;color:var(--gold2)}
.page-hero{padding:170px 0 85px;background:radial-gradient(circle at 80% 20%,rgba(212,175,55,.12),transparent 35%),#090909;border-bottom:1px solid rgba(255,255,255,.08)}.page-hero h1{font-size:clamp(3rem,6vw,6rem)}.breadcrumb{font-size:.84rem;color:var(--muted);margin-bottom:22px}.article{max-width:840px}.article h2{font-size:2.25rem;margin-top:55px}.article h3{margin-top:35px}.article li{color:var(--muted);margin-bottom:10px}.feature-img{
border-radius:22px;
width:100%;
height:clamp(330px,38vw,480px);
object-fit:cover;
object-position:center;
margin:35px 0 42px;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 55px rgba(0,0,0,.28)
}
.feature-founder{
height:clamp(390px,48vw,540px);
object-fit:contain;
background:#efefef;
object-position:center
}
.feature-wide{
height:clamp(310px,36vw,460px);
object-fit:cover
}.callout{border:1px solid var(--line);background:#13110b;padding:28px;border-radius:16px;margin:32px 0}.directory a{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}.directory a:hover{color:var(--gold2)}
footer{border-top:1px solid rgba(255,255,255,.09);padding:70px 0 28px;background:#050505}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}.footer-grid h3{font-family:Inter;font-size:.95rem}.footer-grid a{display:block;color:var(--muted);margin:8px 0}.legal{margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:20px;color:#777;font-size:.82rem}
.reveal{opacity:0;transform:translateY(18px);transition:.7s}.reveal.on{opacity:1;transform:none}
@media(max-width:900px){.menu{display:none;position:absolute;top:75px;left:20px;right:20px;background:#111;padding:20px;border:1px solid var(--line);border-radius:15px;flex-direction:column;align-items:flex-start}.menu.open{display:flex}.hamb{display:block}.hero{padding-top:130px}.hero-portrait{right:-26%;width:80vw;opacity:.48}.hero-content{max-width:650px}.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.container{width:min(100% - 26px,var(--max))}.hero{min-height:860px}.hero-portrait{right:-54%;width:130vw;height:72%;bottom:0}.hero h1{font-size:3.3rem}.trustline{gap:16px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:18px}.footer-grid{grid-template-columns:1fr}.legal{display:block}.page-hero{padding-top:135px}section{padding:75px 0}}

@media(max-width:620px){
.feature-img,.feature-wide{height:300px;border-radius:16px;margin:24px 0 32px}
.feature-founder{height:390px;object-fit:contain}
}

/* =========================================================
   TUAN ABDULLAH V8 — FINAL PRODUCTION LAYER
   ========================================================= */
:root{color-scheme:dark}
body{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:#080808}
.skip-link{position:fixed;left:18px;top:-80px;z-index:1000;padding:12px 18px;background:var(--gold);color:#080808;border-radius:0 0 10px 10px;font-weight:800;transition:top .2s}
.skip-link:focus{top:0}
a,button{outline-offset:4px}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold2);outline-offset:4px}
header{transition:background .25s,box-shadow .25s}
header.scrolled{background:rgba(7,7,7,.96);box-shadow:0 8px 32px rgba(0,0,0,.32);border-bottom:1px solid rgba(255,255,255,.06)}
.menu a[aria-current="page"]{color:var(--gold2)}
.hamb{min-width:44px;min-height:44px;cursor:pointer;border-radius:50%}
.btn{min-height:48px;justify-content:center}
.card{transition:transform .25s,border-color .25s,box-shadow .25s}
a.card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:0 18px 45px rgba(0,0,0,.28)}
.footer-intro{margin-top:18px;max-width:390px}
.footer-brand{width:max-content}
.footer-utility{display:flex;flex-wrap:wrap;gap:18px;margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.footer-utility a{color:#999;font-size:.86rem}
.footer-utility a:hover,.footer-grid a:hover{color:var(--gold2)}
.breadcrumb{max-width:100%;overflow-wrap:anywhere}
.article a:not(.btn):not(.card){color:var(--gold2);text-decoration:underline;text-decoration-color:rgba(243,216,132,.35);text-underline-offset:3px}
.article a:not(.btn):not(.card):hover{text-decoration-color:var(--gold2)}
.article p,.article li{max-width:75ch}
.feature-img{background:#0c0c0c}
.hero-video{pointer-events:none}
.hero-portrait{pointer-events:none}
@media(max-width:900px){
  .menu{max-height:calc(100vh - 105px);overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.55)}
  .menu a{width:100%;padding:10px 4px}
  .menu .btn{width:100%}
  body.menu-open{overflow:hidden}
}
@media(max-width:620px){
  h1{overflow-wrap:anywhere}
  .hero{min-height:780px;padding-bottom:48px}
  .hero h1{font-size:clamp(2.8rem,15vw,4rem)}
  .hero .lead{font-size:1.02rem}
  .hero-portrait{right:-48%;width:125vw;height:68%;opacity:.42}
  .trustline{margin-top:38px}
  .trustline>div{width:calc(50% - 10px)}
  .page-hero h1{font-size:clamp(2.6rem,14vw,4rem)}
  .footer-utility{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero-video{display:none}
}
@media print{
  header,.hero-video,.hamb,.btn,footer{display:none!important}
  body{background:#fff;color:#111}
  p,.article li{color:#333}
  main{padding:0}
}


/* =========================================================
   TUAN ABDULLAH V9 — NATURAL PHOTO SYSTEM
   ========================================================= */

/* Global image safety */
img{
  max-width:100%;
}
.article .feature-img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
  border-radius:20px;
  margin:32px auto 42px;
}

/* Founder portrait: preserve full vertical composition */
.article .feature-img.photo-portrait{
  width:min(100%, 760px);
  max-height:980px !important;
}

/* Speaking photo: balanced landscape, full head/microphone visible */
.article .feature-img.photo-speaking{
  width:min(100%, 1080px);
  max-height:760px !important;
}

/* Business and conference photography */
.article .feature-img.photo-landscape{
  width:min(100%, 1160px);
  max-height:760px !important;
}

/* Family and group images: preserve every person */
.article .feature-img.photo-group{
  width:min(100%, 1180px);
  max-height:820px !important;
}

/* Other documentary images */
.article .feature-img.photo-natural{
  width:min(100%, 1080px);
}

/* Never force important photos into a fake aspect ratio */
.article .feature-img[class*="photo-"]{
  aspect-ratio:auto !important;
}

/* Gallery images may use equal cards, but the source remains unstretched */
.gallery img,
.media-grid img,
.card img{
  object-fit:cover;
  object-position:center;
}

/* Better spacing around documentary photos */
.article .feature-img + h2,
.article .feature-img + h3,
.article .feature-img + p{
  margin-top:0;
}

@media(max-width:900px){
  .article .feature-img{
    width:100%;
    margin:26px auto 34px;
    border-radius:16px;
  }
  .article .feature-img.photo-portrait{
    width:min(100%, 640px);
  }
}

@media(max-width:620px){
  .article .feature-img{
    width:100%;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    border-radius:14px;
    margin:20px auto 28px;
  }
  .article .feature-img.photo-portrait{
    width:min(100%, 520px);
  }
}

/* Avoid accidental distortion in legacy rules */
img[width][height]{
  height:auto;
}


/* V9 authentic originals — final image refinements */
.article .feature-img.photo-portrait{
  width:min(100%, 620px);
}
.article .feature-img.photo-speaking{
  width:min(100%, 820px);
}
.article .feature-img.photo-landscape{
  width:min(100%, 1040px);
}
.article .feature-img.photo-group{
  width:min(100%, 1040px);
}
.article .feature-img.photo-portrait-documentary{
  width:min(100%, 520px);
}
.contact-headshot{
  display:block;
  width:150px;
  height:auto;
  margin:0 0 26px;
  border-radius:18px;
  border:1px solid rgba(212,175,55,.32);
}
@media(max-width:620px){
  .article .feature-img.photo-portrait,
  .article .feature-img.photo-speaking,
  .article .feature-img.photo-landscape,
  .article .feature-img.photo-group,
  .article .feature-img.photo-portrait-documentary{
    width:100%;
  }
  .contact-headshot{
    width:120px;
    margin-bottom:22px;
  }
}


/* =========================================================
   TUAN ABDULLAH V10 — FINAL MOBILE & VISUAL POLISH
   ========================================================= */

/* Consistent section rhythm */
section{
  scroll-margin-top:110px;
}
.page-hero,
.article-section,
.section{
  padding-top:clamp(64px,8vw,110px);
  padding-bottom:clamp(64px,8vw,110px);
}

/* Homepage hero balance */
.hero{
  min-height:min(920px,100svh);
  display:flex;
  align-items:center;
  padding-top:140px;
  padding-bottom:80px;
}
.hero .container{
  position:relative;
  z-index:2;
}
.hero h1{
  max-width:900px;
  font-size:clamp(4rem,8vw,7.6rem);
  line-height:.92;
  letter-spacing:-.045em;
}
.hero .lead{
  max-width:760px;
  margin-top:24px;
  font-size:clamp(1.08rem,1.8vw,1.35rem);
  line-height:1.6;
}
.hero-portrait{
  opacity:.5;
  object-fit:contain;
  object-position:right bottom;
}

/* Metrics area */
.trustline{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:48px;
}
.trustline>div{
  min-height:150px;
  padding:24px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.trustline strong{
  display:block;
  font-size:clamp(1.5rem,2vw,2rem);
  line-height:1.1;
  margin-bottom:10px;
}
.trustline span,
.trustline small{
  line-height:1.45;
}

/* Founder portrait */
.article .feature-img.photo-portrait{
  width:min(100%,720px);
  margin-top:24px;
  margin-bottom:48px;
}

/* Better content measure */
.article{
  max-width:1180px;
}
.article p,
.article li{
  max-width:72ch;
}

/* Footer spacing */
footer{
  padding-top:72px;
}
.footer-grid{
  row-gap:36px;
}

/* Tablet */
@media(max-width:900px){
  .hero{
    min-height:auto;
    padding-top:135px;
    padding-bottom:64px;
  }
  .hero h1{
    max-width:720px;
    font-size:clamp(3.5rem,10vw,5.5rem);
  }
  .hero-portrait{
    width:64%;
    right:-10%;
    opacity:.34;
  }
  .trustline{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile */
@media(max-width:620px){
  .container{
    padding-left:20px;
    padding-right:20px;
  }
  header .nav{
    min-height:88px;
  }
  .brand{
    gap:12px;
  }
  .brand-mark{
    font-size:1.7rem;
  }
  .hero{
    min-height:auto;
    padding-top:126px;
    padding-bottom:54px;
    overflow:hidden;
  }
  .hero .eyebrow{
    max-width:90%;
    font-size:.78rem;
    line-height:1.45;
    margin-bottom:18px;
  }
  .hero h1{
    max-width:96%;
    font-size:clamp(3rem,13.4vw,4.35rem);
    line-height:.95;
    letter-spacing:-.038em;
  }
  .hero .lead{
    max-width:95%;
    font-size:1rem;
    line-height:1.55;
    margin-top:22px;
  }
  .hero-portrait{
    width:76%;
    height:56%;
    right:-18%;
    bottom:0;
    opacity:.30;
    object-fit:contain;
    object-position:right bottom;
  }
  .trustline{
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:34px;
  }
  .trustline>div{
    min-height:126px;
    padding:18px 16px;
    border-radius:14px;
  }
  .trustline strong{
    font-size:1.45rem;
    margin-bottom:8px;
  }
  .trustline span,
  .trustline small{
    font-size:.9rem;
  }
  .page-hero{
    min-height:auto;
    padding-top:130px;
    padding-bottom:64px;
  }
  .page-hero h1{
    font-size:clamp(2.7rem,12vw,4rem);
    line-height:.98;
  }
  .page-hero .lead{
    font-size:1rem;
    line-height:1.55;
  }
  .article .feature-img{
    margin-top:18px;
    margin-bottom:34px;
    border-radius:16px;
  }
  .article .feature-img.photo-portrait{
    width:100%;
  }
  section,
  .article-section,
  .section{
    padding-top:58px;
    padding-bottom:58px;
  }
  .footer-grid{
    gap:30px;
  }
  .footer-utility{
    margin-top:30px;
  }
}

/* Small phones */
@media(max-width:390px){
  .hero h1{
    font-size:clamp(2.75rem,13vw,3.65rem);
  }
  .trustline{
    grid-template-columns:1fr;
  }
  .trustline>div{
    min-height:108px;
  }
}