/* Trident Treehouse Singapore — static port of the Higgsfield site (Sep 2026).
   Tokens carried over from trident-treehouse.co.id. */
:root{--ink:#1a1a1a;--teal:#437982;--deep:#28494e;--aqua:#5dc3c3;--mist:#f1f9fb;
  --display:"Cormorant SC",Georgia,serif;--body:"Montserrat","Segoe UI",Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff;color:var(--ink)}
body{font-family:var(--body);background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--aqua);color:var(--ink)}
.wrap{max-width:1152px;margin:0 auto;padding:0 16px}
.display{font-family:var(--display);font-weight:600;line-height:1.1}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.muted{color:rgba(26,26,26,.72)}
svg.i{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* nav */
.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(26,26,26,.1);background:rgba(255,255,255,.82);backdrop-filter:blur(12px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand img{height:36px;width:auto}
.nav .brand span{display:none;border-left:1px solid rgba(26,26,26,.15);padding-left:12px;font-family:var(--display);font-size:14px;letter-spacing:.18em;color:var(--deep)}
.nav nav{display:flex;align-items:center;gap:24px}
.nav nav a{font-size:14px;font-weight:500;color:rgba(26,26,26,.7)}
.nav nav a:hover{color:var(--teal)}
.nav nav a.hide{display:none}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;padding:16px 28px;font-size:14px;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.btn .i{width:16px;height:16px;transition:transform .3s}
.btn:hover .i{transform:translateX(4px)}
.btn-aqua{background:var(--aqua);color:var(--deep)}.btn-aqua:hover{background:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(6px)}.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-ghost:hover .i{transform:translateY(2px)}
.nav .btn-teal{background:var(--teal);color:#fff!important;padding:10px 20px;box-shadow:0 1px 2px rgba(0,0,0,.08)}.nav .btn-teal:hover{background:var(--deep)}
@media(min-width:640px){.nav .brand span{display:inline}}
@media(min-width:820px){.nav nav a.hide{display:inline}}

/* hero */
.hero{padding:12px 12px 0}
.hero .card{position:relative;max-width:1280px;margin:0 auto;min-height:min(82dvh,860px);display:flex;align-items:flex-end;overflow:hidden;border-radius:32px}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(40,73,78,.9),rgba(40,73,78,.35) 50%,transparent)}
.hero .in{position:relative;width:100%;padding:160px 24px 48px}
.hero h1{max-width:760px;font-family:var(--display);font-weight:600;font-size:clamp(38px,6vw,72px);line-height:1.08;color:#fff}
.hero p{margin-top:16px;max-width:580px;color:rgba(255,255,255,.85);font-size:17px;line-height:1.6}
.hero .ctas{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero .proof{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px 40px;border-top:1px solid rgba(255,255,255,.2);padding-top:24px;font-size:14px;color:rgba(255,255,255,.8)}
.hero .proof span{display:flex;align-items:center;gap:10px}
.hero .proof span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--aqua)}
@media(min-width:820px){.hero{padding:20px 20px 0}.hero .card{border-radius:40px}.hero .in{padding:160px 56px 64px}}

/* clientele */
.clients{padding:56px 16px}
.clients p{text-align:center;color:rgba(26,26,26,.5)}
.marquee{position:relative;overflow:hidden;margin-top:32px}
.marquee .track{display:flex;width:max-content;align-items:center;animation:mq 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee ul{display:flex;align-items:center;list-style:none}
.marquee li{padding-right:64px;color:rgba(26,26,26,.45);white-space:nowrap;transition:color .3s}
.marquee li:hover{color:var(--deep)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:64px;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(to right,#fff,transparent)}
.marquee::after{right:0;background:linear-gradient(to left,#fff,transparent)}
.wm-kronos b{font-size:20px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.wm-small{font-size:9.6px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;margin-left:8px}
.wm-serif{font-family:var(--display);font-size:24px;font-weight:600}
.wm-serif-i{font-family:var(--display);font-size:24px;font-style:italic;font-weight:500}
.wm-stone b{font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.wm-stone span{font-size:14px;font-weight:300;text-transform:uppercase;letter-spacing:.22em;margin-left:6px}
.wm-tm{font-size:20px;font-weight:700;letter-spacing:-.02em}.wm-tm span{font-weight:300}
.wm-doc{font-size:20px;font-weight:800;letter-spacing:-.02em}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:820px){.marquee li{padding-right:96px}.clients{padding:64px 16px}}

/* intro */
.intro{padding:24px 16px 80px;text-align:center}
.intro .wrap{max-width:768px}
.intro h2{font-size:clamp(30px,4vw,40px);color:var(--deep)}
.rule{height:1px;width:64px;background:var(--aqua);margin:20px auto 0}
.intro p{margin-top:24px;font-size:17px;line-height:1.7}
.intro a{display:inline-block;margin-top:28px;font-size:14px;font-weight:600;color:var(--teal);text-decoration:underline;text-decoration-color:var(--aqua);text-decoration-thickness:2px;text-underline-offset:4px}
.intro a:hover{color:var(--deep)}

/* services bento */
.services{padding:0 16px 80px}
.services h2{margin-top:12px;font-size:clamp(30px,4vw,40px);color:var(--deep)}
.services .eyebrow{color:var(--teal)}
.bento{margin-top:40px;display:grid;grid-template-columns:1fr;gap:16px}
.cell{border-radius:24px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s,box-shadow .3s,background .3s}
.cell:hover{transform:translateY(-4px);box-shadow:0 20px 40px -12px rgba(40,73,78,.18)}
.cell .top{display:flex;align-items:flex-start;justify-content:space-between}
.cell .ic{width:28px;height:28px;color:var(--teal)}
.circle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:50%;border:1px solid rgba(67,121,130,.3);color:var(--teal);transition:all .3s}
.circle .i{width:16px;height:16px}
.cell:hover .circle,.rel:hover .circle{border-color:var(--teal);background:var(--teal);color:#fff}
.cell h3{font-size:20px;color:var(--deep)}
.cell p{margin-top:8px;font-size:14px;line-height:1.6;color:rgba(26,26,26,.7)}
.cell .body{margin-top:40px}
.cell.mist{background:var(--mist)}.cell.white{border:1px solid rgba(26,26,26,.1);background:#fff}
.cell.image{position:relative;min-height:300px;overflow:hidden;justify-content:flex-end;padding:0}
.cell.image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cell.image:hover img{transform:scale(1.03)}
.cell.image .veil{position:absolute;inset:0;background:rgba(40,73,78,.6);transition:background .3s}
.cell.image:hover .veil{background:rgba(40,73,78,.5)}
.cell.image .in{position:relative;padding:28px}
.cell.image .ic{color:var(--aqua)}
.cell.image h3{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:24px;color:#fff}
.cell.image h3 .i{width:20px;height:20px;color:var(--aqua);transition:transform .3s}
.cell.image:hover h3 .i{transform:translateX(4px)}
.cell.image p{max-width:440px;color:rgba(255,255,255,.8)}
.cell.strip{background:var(--deep);flex-direction:column;gap:24px}
.cell.strip:hover{background:var(--teal)}
.cell.strip .row{display:flex;align-items:flex-start;gap:20px}
.cell.strip .ic{color:var(--aqua);flex:none}
.cell.strip h3{display:flex;align-items:center;gap:12px;color:#fff}
.cell.strip h3 .i{width:16px;height:16px;color:var(--aqua);transition:transform .3s}
.cell.strip:hover h3 .i{transform:translateX(4px)}
.cell.strip p{margin-top:4px;max-width:720px;color:rgba(255,255,255,.75)}
@media(min-width:820px){.bento{grid-template-columns:repeat(6,1fr)}.cell.image{grid-column:span 4}.cell.mist,.cell.white{grid-column:span 2}.cell.strip{grid-column:span 6;flex-direction:row;align-items:center}.cell.strip .row{align-items:center}}

/* steps */
.steps{border-top:1px solid rgba(26,26,26,.1);padding:80px 16px}
.steps h2{max-width:560px;font-size:clamp(30px,4vw,40px);color:var(--deep)}
.steps .grid{margin-top:40px;display:grid;gap:16px}
.step{border-radius:24px;border:1px solid rgba(26,26,26,.1);background:#fff;padding:32px;transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-4px);box-shadow:0 20px 40px -12px rgba(40,73,78,.15)}
.num{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(93,195,195,.2);font-family:var(--display);font-size:18px;font-weight:600;color:var(--deep)}
.step h3{margin-top:24px;font-size:18px;font-weight:600}
.step p{margin-top:12px;line-height:1.65;color:rgba(26,26,26,.7)}
@media(min-width:820px){.steps .grid{grid-template-columns:repeat(3,1fr)}}

/* team */
.team{background:var(--mist);padding:80px 16px}
.team .wrap{display:grid;gap:48px;align-items:center}
.team .photo{position:relative;width:100%;max-width:448px;justify-self:center}
.team .photo img{aspect-ratio:4/5;width:100%;border-radius:32px;object-fit:cover;box-shadow:0 20px 40px -12px rgba(40,73,78,.2)}
.team .pin{position:absolute;bottom:-20px;left:20px;display:flex;align-items:center;gap:10px;border-radius:999px;background:#fff;padding:12px 20px;font-size:12px;font-weight:600;color:var(--deep);box-shadow:0 10px 24px -8px rgba(40,73,78,.15)}
.team .pin .i{width:16px;height:16px;color:var(--teal)}
.team h2{font-size:clamp(30px,4vw,40px);color:var(--deep)}
.team p{margin-top:20px;line-height:1.7}
.team p+p{margin-top:16px}
@media(min-width:820px){.team .wrap{grid-template-columns:1fr 1fr}.team .photo{justify-self:start}}

/* two countries */
.two{padding:80px 16px}
.two .box{overflow:hidden;border-radius:32px;background:var(--deep);color:#fff}
.two .head{padding:40px 32px 0}
.two .eyebrow{color:var(--aqua)}
.two h2{margin-top:12px;max-width:640px;font-size:clamp(30px,4vw,40px)}
.two .cols{margin-top:32px;display:grid;gap:1px;background:rgba(255,255,255,.15)}
.two .col{background:var(--deep);padding:32px}
.two h3{font-size:24px;color:var(--aqua)}
.two .col p{margin-top:16px;line-height:1.7;color:rgba(255,255,255,.8)}
.two .col .here{margin-top:24px;font-size:14px;color:rgba(255,255,255,.6)}
.two .col a{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:14px;font-weight:600;color:var(--aqua)}
.two .col a:hover{color:#fff}
.two .col a .i{width:16px;height:16px;transition:transform .3s}.two .col a:hover .i{transform:translateX(4px)}
@media(min-width:820px){.two .head{padding:48px 40px 0}.two .cols{grid-template-columns:1fr 1fr}.two .col{padding:40px}}

/* contact */
.contact{padding:80px 16px}
.contact .wrap{display:grid;gap:40px;align-items:start}
.contact h2{font-size:clamp(30px,4vw,40px);color:var(--deep)}
.contact p{margin-top:20px;max-width:440px;line-height:1.7}
.contact .mail{display:inline-block;margin-top:28px;font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,30px);color:var(--deep);text-decoration:underline;text-decoration-color:var(--aqua);text-decoration-thickness:2px;text-underline-offset:8px}
.contact .mail:hover{color:var(--teal)}
.contact .addr{border-radius:32px;border:1px solid rgba(26,26,26,.1);background:var(--mist);padding:32px}
.contact .addr .i{width:24px;height:24px;color:var(--teal)}
.contact .addr h3{margin-top:20px;font-size:16px;font-weight:600}
.contact .addr p{margin-top:12px;font-size:14px;line-height:1.7;color:rgba(26,26,26,.7)}
@media(min-width:820px){.contact .wrap{grid-template-columns:1fr 1fr}.contact .addr{padding:40px}}

/* footer */
.foot{background:var(--deep);color:#fff;padding:56px 16px}
.foot .wrap{display:grid;gap:40px}
.foot .name{font-family:var(--display);font-size:24px;font-weight:600}
.foot .addr{margin-top:16px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.6)}
.foot .mail{display:inline-block;margin-top:16px;font-size:14px;color:var(--aqua)}.foot .mail:hover{color:#fff}
.foot h4{font-size:14px;font-weight:600;color:rgba(255,255,255,.8)}
.foot ul{list-style:none;margin-top:16px}
.foot li+li{margin-top:10px}
.foot li a{font-size:14px;color:rgba(255,255,255,.6)}.foot li a:hover{color:var(--aqua)}
.foot .copy{max-width:1152px;margin:48px auto 0;border-top:1px solid rgba(255,255,255,.15);padding-top:24px;font-size:12px;color:rgba(255,255,255,.45)}
@media(min-width:820px){.foot .wrap{grid-template-columns:repeat(3,1fr)}}

/* service page */
.sp-head{background:var(--deep);color:#fff;padding:56px 16px}
.crumb{font-size:12px;color:rgba(255,255,255,.6)}
.crumb a:hover{color:var(--aqua)}
.crumb span{margin:0 8px}
.crumb b{font-weight:400;color:rgba(255,255,255,.85)}
.sp-head .row{margin-top:32px;display:flex;align-items:flex-start;gap:20px}
.sp-head .ic{display:none;width:36px;height:36px;flex:none;margin-top:8px;color:var(--aqua)}
.sp-head h1{font-size:clamp(36px,5vw,48px)}
.sp-head .lead{margin-top:16px;max-width:680px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.8)}
.sp-head .rule{margin:24px 0 0}
.sec{padding:64px 16px}
.sec h2{font-size:30px;color:var(--deep)}
.checks{margin-top:32px;display:grid;gap:12px}
.check{display:flex;align-items:flex-start;gap:16px;border-radius:16px;background:rgba(241,249,251,.7);padding:20px}
.check .dot{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;margin-top:2px;border-radius:50%;border:1px solid rgba(67,121,130,.4);background:#fff}
.check .dot .i{width:14px;height:14px;color:var(--teal)}
.check p{font-size:15px;line-height:1.6;color:rgba(26,26,26,.8)}
.prose{max-width:768px}
.prose p{margin-top:20px;line-height:1.75;color:rgba(26,26,26,.75)}
.sp-steps{background:var(--mist)}
.sp-steps .grid{margin-top:40px;display:grid;gap:40px}
.sp-steps .s{display:flex;align-items:flex-start;gap:20px}
.sp-steps .num{width:56px;height:56px;font-size:20px;flex:none}
.sp-steps h3{font-size:16px;font-weight:600}
.sp-steps p{margin-top:8px;font-size:14px;line-height:1.6;color:rgba(26,26,26,.7)}
.rels{margin-top:32px;display:grid;gap:12px}
.rel{display:flex;align-items:center;justify-content:space-between;border-radius:16px;border:1px solid rgba(26,26,26,.1);padding:20px;transition:all .3s}
.rel:hover{transform:translateY(-2px);border-color:rgba(67,121,130,.4);box-shadow:0 14px 30px -12px rgba(40,73,78,.15)}
.rel span:first-child{font-weight:500}.rel:hover span:first-child{color:var(--teal)}
.cta{padding:0 16px 80px}
.cta .box{overflow:hidden;border-radius:32px;background:var(--deep);padding:56px 24px;text-align:center;color:#fff}
.cta h2{font-size:clamp(30px,4vw,40px)}
.cta p{margin:16px auto 0;max-width:560px;line-height:1.7;color:rgba(255,255,255,.75)}
.cta .btn{margin-top:32px}
@media(min-width:820px){.sp-head{padding:80px 16px}.sp-head .ic{display:block}.sec{padding:80px 16px}.checks,.rels{grid-template-columns:1fr 1fr}.sp-steps .grid{grid-template-columns:repeat(3,1fr)}}