html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.syifa-portfolio-root{--ink:#1d1a19;--mute:#77716d;--bg:#fdfcfb;--panel:#f3f1ef;--rg:#b98a88;--rg2:#d3bfbb;--line:#1d1a191c;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;width:100%;min-height:100vh;font-family:Inter,system-ui,sans-serif;line-height:1.65;position:relative;overflow-x:hidden;& *{box-sizing:border-box;margin:0}& a{color:inherit;text-decoration:none}& :focus-visible{outline:2px solid var(--rg);outline-offset:3px}& .c{max-width:1120px;margin:auto;padding:0 5vw}& h1,& h2,& h3{letter-spacing:-.01em;font-family:Bodoni Moda,Playfair Display,Georgia,serif;font-weight:700}& h2{font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.05}& h2 i{color:inherit;font-weight:500}& .k{letter-spacing:.22em;text-transform:uppercase;color:var(--rg);margin-bottom:12px;font-size:.72rem;font-weight:600;display:block}& .ctr{text-align:center}& .sub{color:var(--mute);margin:12px 0 44px}& .btn{background:var(--ink);color:var(--bg);letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink);cursor:pointer;padding:14px 30px;font:600 .78rem Inter,sans-serif;transition:background .25s,border-color .25s,color .25s;display:inline-block}& .btn:hover{background:var(--rg);border-color:var(--rg);color:#fff}& .btn.out{color:var(--ink);background:0 0}& nav{z-index:10;-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#fcfbf9eb;position:sticky;top:0}& nav .c{justify-content:space-between;align-items:center;height:68px;display:flex}& nav b{font:700 1.25rem Bodoni Moda,serif}& nav ul{letter-spacing:.18em;text-transform:uppercase;gap:34px;padding:0;font-size:.74rem;font-weight:500;list-style:none;display:flex}& nav ul a{border-bottom:1px solid #0000;padding-bottom:4px;transition:border-color .2s,color .2s}& nav ul a:hover{color:var(--rg);border-color:var(--rg)}& #home{text-align:center;padding:70px 0 100px}& #home h1{text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(3.4rem,13vw,10rem);line-height:.9}& #home h1 i{text-transform:none;color:var(--rg);font-weight:500}& .role{letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin:20px 0 52px;font-size:.78rem;font-weight:500}& .hero-img{max-width:440px;margin:0 auto 56px;position:relative}& .hero-img:before{content:"";border:1px solid var(--line);position:absolute;inset:18px -18px -18px 18px}& .ph{background:var(--panel);text-align:center;color:var(--mute);border:1px solid var(--line);place-items:center;padding:16px;font:italic 500 1rem Bodoni Moda,serif;display:grid;position:relative;overflow:hidden}& .ph img{object-fit:cover;width:100%;height:100%}& .hero-img .ph{aspect-ratio:4/5}& .chip{background:var(--bg);border:1px solid var(--line);letter-spacing:.18em;text-transform:uppercase;z-index:2;padding:10px 18px;font-size:.7rem;font-weight:600;position:absolute;box-shadow:0 8px 26px #1d1a1912}& .chip.a{top:40px;left:-40px}& .chip.b{color:var(--mute);bottom:50px;right:-32px}& section{padding:100px 0}& #about{border-block:1px solid var(--line)}& .about{grid-template-columns:.9fr 1.1fr;align-items:center;gap:70px;display:grid}& .about .ph{aspect-ratio:4/5}& .about h2{margin-bottom:18px}& .about p{color:var(--mute)}& .about h3{margin:34px 0 14px;font-size:1.1rem}& .meas{border:1px solid var(--line);grid-template-columns:repeat(4,1fr);display:grid}& .meas div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 14px;font:700 1.1rem Bodoni Moda,serif}& .meas div:nth-child(4n){border-right:0}& .meas div:nth-last-child(-n+4){border-bottom:0}& .meas small{letter-spacing:.18em;text-transform:uppercase;color:var(--rg);font:600 .62rem Inter,sans-serif;display:block}& .ins{margin-top:90px}& .ins h3{margin-bottom:6px;font-size:1.7rem}& .isub{color:var(--mute);margin-bottom:30px}& .stats{border:1px solid var(--line);background:var(--bg);grid-template-columns:repeat(4,1fr);display:grid}& .stats div{border-right:1px solid var(--line);padding:28px 22px}& .stats div:last-child{border:0}& .stats b{font:700 2.6rem/1 Bodoni Moda,serif;display:block}& .stats small{letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-size:.66rem}& .bars{max-width:540px;margin-top:34px}& .bars p{letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;font-size:.7rem;font-weight:600}& .bar{grid-template-columns:90px 1fr 54px;align-items:center;gap:14px;margin:10px 0;font-size:.88rem;display:grid}& .bar i{background:var(--line);height:3px;display:block}& .bar i s{background:var(--rg);height:100%;display:block}& .bar span:last-child{text-align:right;color:var(--mute)}& .bb{background:var(--bg)}& .tags{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:56px;display:flex}& .tags a{border:1px solid var(--line);background:var(--bg);letter-spacing:.16em;text-transform:uppercase;padding:9px 20px;font-size:.7rem;font-weight:600;transition:border-color .2s,color .2s}& .tags a:hover{border-color:var(--rg);color:var(--rg)}& .sec-h{border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;margin-bottom:28px;padding-bottom:12px;display:flex}& .sec-h h3{font-size:1.5rem}& .sec-h span{letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-size:.68rem}& .vids{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}& .vid .ph{aspect-ratio:9/16;margin-bottom:10px;transition:border-color .25s}& .vid .ph:after{content:"";border-left:16px solid var(--rg);opacity:.8;border-block:10px solid #0000;position:absolute;top:50%;left:50%;transform:translate(-30%,-50%)}& .vid:hover .ph{border-color:var(--rg)}& .vid b{font:700 1rem Bodoni Moda,serif}& .tabs{border-bottom:1px solid var(--line);justify-content:center;gap:28px;margin-bottom:36px;display:flex}& .tabs button{border:0;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);cursor:pointer;background:0 0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:12px 4px;font:600 .74rem Inter,sans-serif;transition:color .2s,border-color .2s}& .tabs button:hover{color:var(--rg)}& .tabs button[aria-selected=true]{color:var(--ink);border-color:var(--rg)}& .pane{grid-template-columns:repeat(3,1fr);gap:14px;display:none}& .pane.on{display:grid}& .pane .ph{aspect-ratio:4/5}& .pane.v{grid-template-columns:repeat(4,1fr)}& .pane.v .ph{aspect-ratio:9/16}& .pane .ph:nth-child(2n){background:var(--panel);color:var(--mute);border:1px solid var(--line)}& .cn{background:var(--panel);color:var(--ink)}& .cn .k{color:var(--rg)}& .cn .sub{color:var(--mute)}& .cards{grid-template-columns:repeat(3,1fr);gap:16px;max-width:860px;margin:0 auto 36px;display:grid}& .cc{border:1px solid var(--line);background:var(--bg);text-align:left;padding:24px;transition:border-color .2s,background .2s;display:block}& .cc small{letter-spacing:.2em;text-transform:uppercase;color:var(--rg);margin-bottom:4px;font-size:.66rem;display:block}& .cc b{overflow-wrap:anywhere;font:700 1.1rem Bodoni Moda,serif}& a.cc:hover{border-color:var(--rg);background:var(--bg)}& .fol{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}& .cn .btn{background:var(--ink);border-color:var(--ink);color:var(--bg)}& .cn .btn:hover{background:var(--rg);border-color:var(--rg);color:#fff}& .cn .btn.out{border-color:var(--ink);color:var(--ink);background:0 0}& .cn .btn.out:hover{background:var(--ink);color:var(--bg)}& footer{background:var(--panel);color:var(--mute);border-top:1px solid var(--line);padding:36px 0;font-size:.8rem}& footer .c{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;display:flex}& footer b{color:var(--ink);font:700 1.15rem Bodoni Moda,serif}& footer div{letter-spacing:.16em;text-transform:uppercase;gap:22px;font-size:.7rem;display:flex}& footer a:hover{color:var(--rg)}& footer .btn{background:var(--ink);border-color:var(--ink);color:var(--bg);padding:10px 20px;font-size:.68rem}& footer .btn:hover{background:var(--rg);border-color:var(--rg);color:#fff}@media (width<=820px){& nav{border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);background:#fcfbf9d1;border-radius:99px;position:fixed;top:12px;left:12px;right:12px;box-shadow:0 10px 30px #1d1a1924}& nav .c{height:54px;padding:0 22px}& nav ul{letter-spacing:.1em;gap:14px;font-size:.62rem}& #home{padding:110px 0 70px}& section{padding:80px 0}& section[id]{scroll-margin-top:84px}& .about,& .cards{grid-template-columns:1fr;gap:50px}& .cards{gap:14px}& .chip.a{left:-8px}& .chip.b{right:-8px}& .meas{grid-template-columns:1fr 1fr}& .meas div:nth-child(4n){border-right:1px solid var(--line)}& .meas div:nth-child(2n){border-right:0}& .meas div:nth-last-child(-n+4){border-bottom:1px solid var(--line)}& .meas div:nth-last-child(-n+2){border-bottom:0}& .stats{grid-template-columns:1fr 1fr}& .stats div:nth-child(2){border-right:0}& .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}& .ins{margin-top:70px}& .sec-h span{display:none}& .vids,& .pane,& .pane.v{grid-template-columns:1fr 1fr}& .tabs{gap:16px}}@media (width<=520px){& nav b{display:none}& nav ul{justify-content:space-between;width:100%}}}
