/* Zikrullah Advisory / Mihrab. Marun, emas dan gading, berteraskan geometri Islam. */
:root{--red:#7c1424;--red-dark:#4c0a15;--night:#1b0a0e;--night-2:#26101a;--gold:#b5945a;--gold-light:#dcc594;--ink:#1f1714;--muted:#655a52;--paper:#fbf7ef;--line:#e6dac5;--soft:#f3ecdf;--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--sans:Jost,Arial,Helvetica,sans-serif;--arabic:Amiri,'Traditional Arabic',serif;
--lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23dcc594' stroke-opacity='.14' stroke-width='.8'%3E%3Cpath d='M60 18l12.300 17.700H84.300V48L102 60 84.300 72v12.300H72L60 102 48 84.300H35.700V72L18 60l17.700-12V35.700H48Z'/%3E%3Cpath d='M60 0v18M60 102v18M0 60h18M102 60h18M0 0l35.700 35.700M120 0L84.300 35.700M0 120l35.700-35.700M120 120L84.300 84.300'/%3E%3Cpath d='M60 36l24 24-24 24-24-24Z'/%3E%3C/svg%3E")}
body{font:400 17px/1.7 var(--sans);letter-spacing:.005em}
::selection{background:var(--gold);color:var(--night)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.svg-defs{position:absolute}
h2,h3{font-family:var(--serif);font-weight:500}
h2{font-size:clamp(44px,5vw,76px);letter-spacing:-.012em;line-height:1.06}
h2 em,h3 em{font-weight:400}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.22em}
.body-copy,.section-heading>p{font-size:17px;line-height:1.8}
.section{padding-block:clamp(84px,10vw,164px)}
.section-meta{position:relative;border-top:1px solid var(--gold);font-size:12.5px;letter-spacing:.1em;padding-top:20px}
.section-meta:before{content:'';position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
.text-link{font-size:14px;font-weight:500;letter-spacing:.03em}
.button{font-size:14px;font-weight:500;letter-spacing:.06em;border-radius:1px;min-height:60px;padding-inline:30px 24px}
.button-light{background:linear-gradient(115deg,#e5cf9f,#c5a468);color:var(--night)}
.button-light:hover{background:linear-gradient(115deg,#efdfba,#d2b37a)}
.button-red{background:var(--night);color:var(--gold-light);box-shadow:inset 0 0 0 1px var(--gold)}
.button-red:hover{background:var(--red-dark)}

/* Kepala laman kekal gading kerana logo berlatar putih. */
.site-header{background:#fbf7eff5;border-bottom:1px solid var(--line)}
.site-header.is-scrolled{box-shadow:0 10px 30px #1b0a0e12}
.desktop-nav{gap:34px}
.desktop-nav a{font-size:14.500px}
.desktop-nav a:after,.reading-progress{background:var(--gold)}
.header-contact{font-size:14px;font-weight:500}
.round-arrow{background:var(--night);color:var(--gold-light);box-shadow:inset 0 0 0 1px var(--gold)}
.site-menu{background:var(--night) var(--lattice)}
.menu-links>a{font-size:clamp(26px,3vw,38px);padding-block:8px;font-weight:500;border-color:#dcc59433}
.menu-links small{font-size:12px;color:var(--gold-light)}
.menu-top,.menu-bottom{font-size:14px}

/* Hero: pasukan berdiri dalam lengkung mihrab. */
.hero{margin:0;border-radius:0;grid-template-columns:.92fr 1.08fr;align-items:end;background:var(--night) var(--lattice);background-size:150px;position:relative;isolation:isolate}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 76% 34%,#7c142488,transparent 70%)}
.hero-copy{background:none;padding:clamp(40px,5vw,84px) clamp(28px,4vw,48px) 56px var(--gutter);min-height:calc(100svh - 204px);justify-content:center;overflow:visible}
.bismillah{font:400 clamp(22px,2vw,28px)/1.5 var(--arabic);color:var(--gold-light);margin-bottom:30px}
.hero-copy .eyebrow{font-size:12px;gap:14px;color:var(--gold-light)}
.tiny-star{width:20px;height:20px;flex:none}
.hero h1{font-size:clamp(64px,7.4vw,124px);font-weight:500;letter-spacing:-.018em;line-height:.98;margin:30px 0 28px}
.hero h1 em{color:var(--gold-light)}
.hero-description{font-size:clamp(17px,1.35vw,20px);line-height:1.75;color:#eadfd2;max-width:520px;margin-bottom:38px}
.hero-note{font-size:14px;color:#d6c6b4;margin-top:0;padding-top:36px}
.location-dot{background:var(--gold-light);transform:rotate(45deg);border-radius:0;width:7px;height:7px}
.hero-thread{display:none}
.hero-portrait{background:none;overflow:visible;margin:clamp(30px,3.4vw,52px) var(--gutter) 0 0;aspect-ratio:1536/1515;align-self:end}
.hero-portrait>img{clip-path:url(#mihrab-arch);object-fit:contain;object-position:50% 100%;transform:none}
.hero-portrait:after{display:none}
.arch-line{position:absolute;inset:-12px -12px 0;width:calc(100% + 24px);height:calc(100% + 12px);fill:none;stroke:var(--gold);stroke-width:1;overflow:visible;pointer-events:none}
.hero-portrait figcaption{left:24px;right:24px;bottom:24px;background:#1b0a0ed9;color:#f4ead9;border:1px solid #dcc59455;padding:16px 20px;font-family:var(--serif);font-size:21px;line-height:1.2}
.hero-portrait figcaption small{font:500 11px/1.4 var(--sans);letter-spacing:.16em;color:var(--gold-light)}
.hero-portrait figcaption a{border-color:var(--gold);color:var(--gold-light);font-family:var(--sans)}
.hero-directory{background:#1b0a0ecc;border:0;border-top:1px solid #dcc59440;color:#f4ead9;position:relative}
.hero-directory>a{font:500 clamp(20px,1.9vw,26px)/1.2 var(--serif);min-height:100px;padding-inline:var(--gutter)}
.hero-directory>a+a{border-left:1px solid #dcc59440}
.hero-directory small{font:500 12px var(--sans);color:var(--gold-light)}
.hero-directory>a>span:last-child{color:var(--gold-light);font-family:var(--sans)}
.hero-directory>a:hover{background:#7c142466}

.manifesto>.eyebrow{font-size:12px;color:var(--gold)}
.manifesto-title{font-size:clamp(54px,7.4vw,118px);letter-spacing:-.015em;line-height:1.06}
.manifesto-bottom{grid-template-columns:.7fr 1.9fr 1fr}
.manifesto-bottom>p{font-size:17px}
.manifesto-bottom>.text-link{font-size:14px}
.rotating-seal{width:96px;height:96px;color:var(--gold)}

.situations{background:var(--soft)}
.situation-grid{background:#e0d2ba;border-color:#e0d2ba}
.situation{min-height:300px;padding:40px clamp(24px,3vw,48px)}
.item-number{font-size:12.500px;color:var(--gold);font-weight:500;letter-spacing:.12em}
.situation h3{font-size:clamp(28px,2.700vw,38px);letter-spacing:-.005em;line-height:1.14}
.situation p{font-size:15.500px;max-width:320px;line-height:1.7}
.situation-mark{color:var(--gold)}
.situation:hover{background:var(--paper)}
.situation-invite{background:var(--night) var(--lattice);background-size:120px;color:#f4ead9}
.situation-invite:hover{background-color:var(--red-dark)}
.situation-invite .item-number{color:var(--gold-light)}
.situation-invite p{color:#ddcfc0}
.situation-invite .text-link{font-size:14px;border-color:var(--gold)}
.news-line>.eyebrow{font-size:11px}
.news-line>strong{font-size:68px;font-weight:500;color:var(--red);letter-spacing:0}
.news-line>p:not(.eyebrow){font-size:16px}
.news-line small{font-size:13.500px}
.news-line .text-link{font-size:14px}

.service-workspace{border-color:var(--gold);box-shadow:0 30px 70px #1b0a0e14}
.service-tabs{background:var(--soft)}
.service-tabs button>span{font-size:12.500px;letter-spacing:.08em}
.service-tabs button>strong{font-size:30px;font-weight:500;letter-spacing:0}
.service-tabs button[aria-selected="true"]{background:var(--night);border-bottom-color:var(--night)}
.service-tabs button[aria-selected="true"]>span{color:var(--gold-light)}
.service-tabs button[aria-selected="true"]>strong{color:#f4ead9}
.service-tabs button[aria-selected="true"]>i{color:var(--gold-light)}
.service-panel{background:var(--paper)}
.service-art,.planning-art{background:var(--red-dark) var(--lattice);background-size:130px;border-right:1px solid var(--gold)}
.service-art:before,.service-art:after{border-color:#dcc59455;border-radius:0;transform:translate(-50%,-50%) rotate(45deg);width:340px;height:340px}
.service-art:after{transform:translate(-50%,-50%);width:340px;height:340px}
.paper{background:#fbf7ef;border-color:#dcc594;box-shadow:0 22px 44px #0d030588}
.paper-back{background:#b5945a}
.paper-mid{background:#e3d2ae}
.paper-label{font:500 10px/1.4 var(--sans)}
.paper-title{font-weight:500;font-size:48px;letter-spacing:-.01em}
.paper-seal{background:var(--night);color:var(--gold-light);outline-color:var(--gold)}
.paper-foot{font-size:6px;color:#7a6a55}
.art-index{font-size:11px;color:var(--gold-light)}
.service-copy>.eyebrow{font-size:12px;color:var(--gold)}
.service-copy h3{font-size:clamp(36px,3.800vw,56px);letter-spacing:-.008em}
.service-copy>p:not(.eyebrow){font-size:17px;max-width:520px}
.service-list li{font-size:15.500px;border-color:var(--line)}
.service-list li:before{content:'';top:21px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.service-copy .button{font-size:14px}
.service-seo-link{display:flex;width:fit-content;margin-top:14px}

.holistic{background:var(--night) var(--lattice);background-size:150px;color:#f6efe2}
.holistic .section-meta{border-color:var(--gold)}
.holistic .section-meta>span:last-child,.holistic .body-copy,.map-detail p{color:#cdc0b2}
.holistic-copy>.eyebrow{font-size:12px;color:var(--gold-light)}
.holistic h2{font-size:clamp(44px,4.700vw,70px)}
.holistic h2 em{color:var(--gold-light)}
.holistic .body-copy{font-size:17px;max-width:480px}
.map-detail{border-color:#dcc59440;max-width:480px}
.map-detail>span{font-size:12.500px;color:var(--gold-light)}
.map-detail h3{font-size:32px}
.map-detail p{font-size:16px}
.map-lines circle{stroke:#dcc59430}
.map-lines path{stroke:#dcc59445}
.map-lines path.is-active{stroke:var(--gold-light)}
.map-center{background:var(--red-dark);border-color:var(--gold)}
.map-center strong{font-size:29px;font-weight:500;letter-spacing:0}
.map-center small{font-size:8px;color:var(--gold-light)}
.map-flower{width:34px;height:34px;color:var(--gold-light)}
.map-node{background:var(--night);border-color:#dcc59466;box-shadow:0 0 0 6px var(--night);min-width:122px}
.map-node small{font-size:10px;color:var(--gold-light)}
.map-node>span{font-size:14px}
.map-node[aria-pressed="true"]{background:var(--gold-light);border-color:var(--gold-light);color:var(--night)}
.map-node[aria-pressed="true"] small{color:var(--red-dark)}
.map-hint{font-size:13.500px;color:#cdc0b2}

.process-intro h2{font-size:clamp(44px,4.700vw,70px)}
.process-intro>.body-copy{font-size:17px;max-width:420px}
.process-intro>.text-link{color:var(--red);font-size:14px}
.process-step:after{background:var(--gold)}
.process-number{font-size:42px;color:var(--gold)}
.process-step small{font-size:12px;letter-spacing:.14em}
.process-step h3{font-size:36px;letter-spacing:-.005em}
.process-step p{font-size:16px;max-width:400px}

.about{background:var(--soft)}
.brand-film{border-radius:0;aspect-ratio:auto;background:var(--night);box-shadow:0 0 0 1px var(--gold),0 0 0 8px var(--soft),0 0 0 9px #b5945a66;align-self:center}
.brand-film picture,.brand-film picture img{position:static;width:100%;height:auto;object-fit:initial}
.film-caption{display:none}
.film-caption>span:last-child{font-size:18px}
.about-copy>.eyebrow{font-size:12px;color:var(--gold)}
.about-copy h2{font-size:clamp(44px,4.600vw,68px)}
.about-copy>.body-copy{font-size:17px}
.about-values span{font-size:14px}
.about-values span:before{width:7px;height:7px;border-radius:0;background:var(--gold);transform:rotate(45deg)}
.google-link{font-size:15px;border-color:var(--line)}
.google-link small{font-size:13.500px}
.google-link>span:last-child{color:var(--gold)}

.faq h2{font-size:clamp(44px,4.700vw,70px)}
.faq-list{border-color:var(--gold)}
.faq summary{font:500 23px/1.3 var(--serif);padding-block:24px}
.faq summary:after{color:var(--gold);font-family:var(--sans);top:22px}
.faq details[open] summary{color:var(--red);font-weight:500}
.faq details p{font-size:16px}

.contact{background:var(--red-dark) var(--lattice);background-size:150px}
.contact .section-meta{border-color:var(--gold)}
.contact .section-meta>span:last-child{color:var(--gold-light)}
.contact h2{font-size:clamp(50px,6.600vw,104px)}
.contact h2 em{color:var(--gold-light)}
.contact-orb{border-color:var(--gold-light);color:var(--gold-light);border-radius:0;transform:rotate(45deg);width:150px;height:150px;outline:1px solid #dcc59455;outline-offset:8px;flex-direction:row}
.contact-orb>*{transform:rotate(-45deg)}
.contact-orb>span:first-child{display:none}
.contact-orb>span:last-child{font-size:15px;line-height:1.4}
.contact-orb:hover{background:var(--gold-light);color:var(--night);border-color:var(--gold-light);transform:rotate(45deg) scale(1.03)}
.contact-orb:hover>span:first-child{transform:rotate(-45deg)}
.contact-bottom>p{font-size:17px;color:#eadfd2}
.contact-bottom>a{font-size:32px;font-weight:500;border-color:var(--gold)}
.contact-word{font:400 clamp(180px,26vw,420px)/1 var(--arabic);letter-spacing:0;color:#dcc5940d;bottom:-60px;left:auto;right:4%}

.footer-top>p{font-size:30px;font-weight:500;letter-spacing:0}
.footer-top nav a{font-size:15px}
.footer-top nav a:hover{color:var(--red)}
.back-top{border-color:var(--gold);color:var(--gold)}
.disclaimer{font-size:13.500px}
.footer-bottom{font-size:13px}
.floating-contact{background:var(--night);color:var(--gold-light);border:1px solid var(--gold);border-radius:1px;font-size:14px}

@media(max-width:1200px){.hero h1{font-size:8vw}.brand{width:185px}.map-node{min-width:104px}}
@media(max-width:1000px){.hero{grid-template-columns:.92fr 1.08fr}.hero-copy{min-height:0;padding-block:48px}.hero h1{font-size:7.600vw}.hero-copy .eyebrow{font-size:11px}.hero-description{font-size:16px}.hero-note{font-size:13px}.hero .button{font-size:13px}.hero-portrait{min-height:0}.hero-directory>a{font-size:20px;padding-inline:22px}.section-heading>p{font-size:16px}.situation h3{font-size:28px}.situation p{font-size:15px}.news-line>strong{font-size:52px}.news-line>p:not(.eyebrow),.news-line .text-link{font-size:14px}.service-tabs button>strong{font-size:25px}.service-art:before,.service-art:after{width:280px;height:280px}.service-copy h3{font-size:38px}.holistic h2{font-size:44px}.map-node{min-width:90px}.map-node>span{font-size:12px}.map-hint{font-size:13px}.process-step h3{font-size:31px}.about-copy h2{font-size:44px}.contact h2{font-size:7vw}.contact-orb{width:124px;height:124px}.contact-bottom>a{font-size:26px}.footer-top>p{font-size:25px}}
@media(max-width:760px){body{font-size:16px}h2,.section-heading h2,.holistic-copy>h2,.process-intro h2,.about-copy h2,.faq h2{font-size:clamp(40px,10.500vw,54px)}.site-header{height:76px}.hero{grid-template-columns:1fr}.hero-copy{padding:40px var(--gutter) 34px}.bismillah{margin-bottom:22px}.hero h1{font-size:clamp(64px,19vw,92px);margin:22px 0 20px}.hero-description{font-size:17px}.hero .button{width:100%;font-size:14px}.hero-note{padding-top:22px}.hero-portrait{margin:12px var(--gutter) 0;aspect-ratio:1536/1515;max-height:none}.brand-film{aspect-ratio:auto;max-width:none}.arch-line{inset:-8px -8px 0;width:calc(100% + 16px);height:calc(100% + 8px)}.hero-portrait figcaption{left:14px;right:14px;bottom:14px;font-size:19px;padding:12px 14px}.hero-directory{margin-top:0}.hero-directory>a{font-size:22px;min-height:68px;padding-inline:var(--gutter)}.hero-directory>a+a{border-top:1px solid #dcc59440}.manifesto>.eyebrow{font-size:11px}.manifesto-title{font-size:clamp(42px,11.500vw,60px)}.manifesto-title>span{white-space:normal}.manifesto-bottom{grid-template-columns:56px 1fr}.manifesto-bottom>p{font-size:16px}.rotating-seal{width:56px;height:56px}.section-meta{font-size:11.500px}.section-meta>span:last-child{font-size:11.500px}.situation-grid{grid-template-columns:1fr}.situation{min-height:0}.situation h3{font-size:30px}.situation p{font-size:16px;max-width:none}.news-line>.eyebrow{font-size:10px}.service-tabs button>span{font-size:11.500px;max-width:none}.service-tabs button>strong{font-size:23px}.service-art{height:300px;border-right:0;border-bottom:1px solid var(--gold)}.paper-title{font-size:34px}.paper-label{font-size:7px}.paper-foot{font-size:4px}.art-index{font-size:10px}.service-copy h3{font-size:38px}.service-list li{font-size:15px}.service-copy .button{font-size:13px}.map-center strong{font-size:23px}.map-center small{font-size:6px}.map-flower{width:24px;height:24px}.map-node{min-width:84px;padding:7px 8px}.map-node>span{font-size:12px}.map-node small{font-size:9px}.map-hint{font-size:13px}.map-detail h3{font-size:30px}.process-step h3{font-size:32px}.process-number{font-size:34px}.process-step small{font-size:11px}.about-values span{font-size:13.500px}.faq summary{font-size:21px}.contact h2{font-size:clamp(42px,11vw,62px)}.contact-orb{width:112px;height:112px;margin:18px 22px 18px 0}.contact-orb>span:last-child{font-size:12.500px}.contact-bottom>a{font-size:28px}.contact-word{font-size:62vw;right:0;bottom:-20px}.footer-top>p{font-size:26px}.footer-top nav a{font-size:15px}.disclaimer{font-size:13px}.footer-bottom{font-size:12.500px}.floating-contact{font-size:13px}}
@media(max-width:450px){.hero h1{font-size:19.500vw}.section-meta>span:last-child{max-width:150px;font-size:11px}.service-tabs button>span{font-size:10.500px}.service-tabs button>strong{font-size:20px}.map-center{width:104px;height:104px}.map-center strong{font-size:20px}.map-node{min-width:80px}.map-node>span{font-size:11px}.contact h2{font-size:clamp(40px,11.500vw,52px)}}
@media(max-width:360px){.hero h1{font-size:19vw}.map-center{width:88px;height:88px}.map-center strong{font-size:17px}.map-node{min-width:72px}.map-node>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.manifesto-title>span{color:var(--ink)!important}.manifesto-title em{color:var(--red)!important}}
