body{margin:0;background:#0A0A0A}
a{color:#D9BC86}a:hover{color:#F3E2BF}
.gg{--vh:min(100svh,1000px);--ease:cubic-bezier(.2,.8,.2,1)}
.eyebrow{font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#C9A86A;margin:0}
.display{font-family:'Lora',serif;font-weight:400;font-size:clamp(46px,7.4vw,118px);line-height:1;letter-spacing:-.02em;color:#F3EEE6;margin:0}
.h2{font-family:'Lora',serif;font-weight:400;font-size:clamp(36px,5vw,72px);line-height:1.04;letter-spacing:-.015em;color:#F3EEE6;margin:0}
.gold{color:#D9BC86}
.lede{font-family:'Lora',serif;font-style:italic;font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:#C3BCB0;margin:0}
.body{font-family:'Lora',serif;font-size:16px;line-height:1.75;color:#ABA59B;margin:0}
.label{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#C9A86A}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 30px;font-family:'Jost',sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;box-sizing:border-box;cursor:pointer;transition:background-color .4s,color .4s,border-color .4s}
.btn-gold{background:#C9A86A;color:#0A0A0A;border:1px solid #C9A86A}
.btn-gold:hover{background:#F3EEE6;border-color:#F3EEE6;color:#0A0A0A}
.btn-ghost{background:transparent;color:#F3EEE6;border:1px solid rgba(243,238,230,.45)}
.btn-ghost:hover{border-color:#D9BC86;color:#D9BC86}
.icon-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(243,238,230,.45);background:rgba(10,10,10,.25);color:#F3EEE6;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .4s,color .4s}
.icon-btn:hover{border-color:#D9BC86;color:#D9BC86}
.menu-link{font-family:'Lora',serif;font-size:clamp(30px,4.4vw,60px);line-height:1.15;color:#F3EEE6;text-decoration:none;display:flex;align-items:baseline;gap:22px;transition:color .4s,transform .5s var(--ease)}
.menu-link:hover{color:#D9BC86;transform:translateX(12px)}
.ln{display:block;overflow:clip}
.ln>span{display:block}
.zoom-hover{transition:transform 1.4s var(--ease)}
.zoom-wrap:hover .zoom-hover{transform:scale(1.06)}

/* ---------- Preloader & hero (time-based) ---------- */
@keyframes pre-mark{0%{opacity:0;transform:scale(.8)}25%{opacity:1;transform:scale(1)}85%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
@keyframes pre-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pre-out{0%{clip-path:inset(0 0 0 0)}99%{clip-path:inset(0 0 100% 0);visibility:visible}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes hero-zoom{from{transform:scale(1.28)}to{transform:scale(1)}}
@keyframes rise{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes hdr-in{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.pre{animation:pre-out 1.1s cubic-bezier(.77,0,.18,1) 2.1s forwards}
.pre-mark{animation:pre-mark 2.2s var(--ease) both}
.pre-line{transform-origin:left;animation:pre-line 1.6s cubic-bezier(.65,0,.35,1) .3s both}
.hero-img{animation:hero-zoom 3s var(--ease) 2.1s both}
.hero-rise{animation:rise 1.3s var(--ease) both}
.hero-fade{animation:fadeup 1.2s var(--ease) both}
.hdr{animation:hdr-in 1s var(--ease) 2.7s both}
.mq-track{animation:mq 70s linear infinite}
.hint{animation:hint 2.2s cubic-bezier(.65,0,.35,1) infinite}

/* ---------- Scroll-driven motion ---------- */
@property --num{syntax:'<integer>';inherits:false;initial-value:0}
.ct{counter-reset:num var(--num)}
.ct::after{content:counter(num)}
.ct-52{--num:52}.ct-24{--num:24}.ct-8{--num:8}.ct-2{--num:2}
@keyframes c52{from{--num:0}to{--num:52}}
@keyframes c24{from{--num:0}to{--num:24}}
@keyframes c8{from{--num:0}to{--num:8}}
@keyframes c2{from{--num:0}to{--num:2}}
@keyframes wordlit{from{opacity:.14}to{opacity:1}}
@keyframes clipup{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes clipleft{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes unzoom{from{transform:scale(1.32)}to{transform:scale(1)}}
@keyframes par{from{transform:translateY(-9%)}to{transform:translateY(9%)}}
@keyframes floaty{from{transform:translateY(14%)}to{transform:translateY(-14%)}}
@keyframes hero-out{to{opacity:0;transform:translateY(-120px)}}
@keyframes hero-sink{to{transform:translateY(32%)}}
@keyframes dim{from{opacity:0}to{opacity:.85}}
@keyframes shrink{from{height:62px}to{height:42px}}
@keyframes hdrbg{from{opacity:0}to{opacity:1}}
@keyframes prog{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cardback{to{transform:scale(.9);filter:brightness(.4)}}
@keyframes hzmove{to{transform:translateX(calc(-100% + 100vw))}}
@keyframes expand{from{clip-path:inset(16% 20% 16% 20% round 6px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes scaleup{from{transform:scale(1.25)}to{transform:scale(1)}}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@supports (animation-timeline: view()){
.sd-ln{view-timeline-name:--ln}
.sd-ln>span{animation:rise both var(--ease);animation-timeline:--ln;animation-range:entry 15% cover 38%}
.sd-fade{animation:fadeup both var(--ease);animation-timeline:view();animation-range:entry 10% cover 32%}
.sd-word{animation:wordlit linear both;animation-timeline:view();animation-range:cover 18% cover 42%}
.sd-clip{view-timeline-name:--clip;animation:clipup both cubic-bezier(.7,0,.2,1);animation-timeline:view();animation-range:entry 0% cover 48%}
.sd-clip .sd-inner{animation:unzoom both var(--ease);animation-timeline:--clip;animation-range:entry 0% cover 65%}
.sd-clipx{animation:clipleft both cubic-bezier(.7,0,.2,1);animation-timeline:view();animation-range:entry 10% cover 50%}
.sd-par{view-timeline-name:--par}
.sd-par .sd-pi{animation:par linear both;animation-timeline:--par;animation-range:cover 0% cover 100%}
.sd-float{animation:floaty linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.sd-rule{transform-origin:left;animation:rule both var(--ease);animation-timeline:view();animation-range:entry 20% cover 40%}
.hero{view-timeline-name:--hero}
.hero-copy{animation:hero-out linear both;animation-timeline:--hero;animation-range:exit 0% exit 65%}
.hero-sink{animation:hero-sink linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
.hero-dim{animation:dim linear both;animation-timeline:--hero;animation-range:exit 0% exit 90%}
.hdr-logo{animation:shrink linear both;animation-timeline:scroll(root);animation-range:0px 420px}
.hdr-bg{animation:hdrbg linear both;animation-timeline:scroll(root);animation-range:200px 600px}
.prog{transform-origin:top;animation:prog linear both;animation-timeline:scroll(root)}
.ct-52,.ct-24,.ct-8,.ct-2{animation-timing-function:cubic-bezier(.15,.7,.2,1);animation-fill-mode:both;animation-timeline:view();animation-range:entry 30% cover 50%}
.ct-52{animation-name:c52}.ct-24{animation-name:c24}.ct-8{animation-name:c8}.ct-2{animation-name:c2}
.stack{timeline-scope:--c2,--c3,--c4}
.card-2{view-timeline-name:--c2}.card-3{view-timeline-name:--c3}.card-4{view-timeline-name:--c4}
.card-1>.card-in{animation:cardback linear both;animation-timeline:--c2;animation-range:entry 0% entry 100%}
.card-2>.card-in{animation:cardback linear both;animation-timeline:--c3;animation-range:entry 0% entry 100%}
.card-3>.card-in{animation:cardback linear both;animation-timeline:--c4;animation-range:entry 0% entry 100%}
.hz{view-timeline-name:--hz}
.hz-track{animation:hzmove linear both;animation-timeline:--hz;animation-range:contain 0% contain 100%}
.xp{view-timeline-name:--xp}
.xp-img{animation:expand linear both;animation-timeline:--xp;animation-range:contain 0% contain 55%}
.xp-img img{animation:scaleup linear both;animation-timeline:--xp;animation-range:contain 0% contain 55%}
.xp-copy{animation:fadeup both var(--ease);animation-timeline:--xp;animation-range:contain 45% contain 75%}
}
@supports not (animation-timeline: view()){
.hz{height:auto !important}
.hz-sticky{position:static !important;height:auto !important;overflow-x:auto !important;padding:40px 0}
.xp{height:auto !important}
.xp-sticky{position:relative !important}
}
.ig-ov{opacity:0;transition:opacity .4s}
.ig-tile img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.ig-tile:hover .ig-ov,.ig-tile:focus-visible .ig-ov{opacity:1}
.ig-tile:hover img{transform:scale(1.07)}
.ig-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,238,230,.35);color:#E6DFD3;transition:color .4s,border-color .4s}
.ig-link:hover{color:#D9BC86;border-color:#D9BC86}
@media (max-width: 900px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media (max-width: 760px){.hdr-ig{display:none !important}}
/* ---------- Luxury additions ---------- */
.tbc{display:inline-block;vertical-align:middle;margin-left:10px;padding:4px 8px;border:1px dashed #C9A86A;color:#C9A86A;font-family:'Jost',sans-serif;font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;font-style:normal;white-space:nowrap}
.ph{color:#8F897F;font-style:italic}
.stick-col{position:sticky;top:120px}
@media (max-width: 900px){.stick-col{position:static}}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#C9A86A}
.field input,.field select,.field textarea{font-family:'Lora',serif;font-size:16px;color:#F3EEE6;background:#0A0A0A;border:1px solid #3A342B;padding:14px 16px;min-height:52px;box-sizing:border-box;border-radius:0;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #C9A86A;outline-offset:0;border-color:#C9A86A}
.bar-fill{transition:width .8s cubic-bezier(.65,0,.35,1)}
@keyframes clipright{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@supports (animation-timeline: view()){
.sd-clipr{animation:clipright both cubic-bezier(.7,0,.2,1);animation-timeline:view();animation-range:entry 10% cover 50%}
}
@media (max-width: 760px){.hide-sm{display:none}}
#about,#services,#reporting,#privacy,#team,#area{scroll-margin-top:90px}
.svc-scroll{scrollbar-width:thin;scrollbar-color:#C9A86A rgba(243,238,230,.12);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);padding-bottom:28px}
.svc-scroll::-webkit-scrollbar{width:3px}
.svc-scroll::-webkit-scrollbar-track{background:rgba(243,238,230,.12)}
.svc-scroll::-webkit-scrollbar-thumb{background:#C9A86A}
.svc-scroll:focus-visible{outline:1px solid #C9A86A;outline-offset:6px}
.svc-hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:18px}
.svc-hit:focus-visible{outline:2px solid #C9A86A;outline-offset:-4px}
.svc-plus{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(243,238,230,.55);background:rgba(10,10,10,.35);color:#F3EEE6;transition:background-color .4s,color .4s,border-color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.zoom-wrap:hover .svc-plus{background:#C9A86A;border-color:#C9A86A;color:#0A0A0A;transform:rotate(90deg)}
.svc-tap{display:inline-flex;align-items:center;gap:10px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#E6DFD3}
.ct-40{--num:40}.ct-100{--num:100}
@keyframes c40{from{--num:0}to{--num:40}}
@keyframes c100{from{--num:0}to{--num:100}}
@supports (animation-timeline: view()){
.ct-40,.ct-100{animation-timing-function:cubic-bezier(.15,.7,.2,1);animation-fill-mode:both;animation-timeline:view();animation-range:entry 30% cover 50%}
.ct-40{animation-name:c40}.ct-100{animation-name:c100}
}
/* ---------- Apple-style reveals ---------- */
@keyframes appleup{from{opacity:0;transform:translate3d(0,60px,0);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes lineup{from{opacity:0;transform:translateY(105%);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@supports (animation-timeline: view()){
.sd-fade,.ar{animation:appleup both cubic-bezier(.16,1,.3,1);animation-timeline:view();animation-range:entry 5% cover 30%}
.sd-ln>span{animation-name:lineup;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.sd-stagger>*:nth-child(4n+2){animation-range:entry 11% cover 35%}
.sd-stagger>*:nth-child(4n+3){animation-range:entry 17% cover 40%}
.sd-stagger>*:nth-child(4n+4){animation-range:entry 23% cover 45%}
}
@media (prefers-reduced-motion: reduce){.sd-fade,.ar,.sd-ln>span{animation:none !important;opacity:1 !important;filter:none !important;transform:none !important}}
/* ---------- Testimonial word reveal ---------- */
.qw{display:inline-block;opacity:0;filter:blur(10px);transform:translate3d(0,.45em,0);transition:opacity .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.q-in .qw{opacity:1;filter:blur(0);transform:none}
.q-cite{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.q-in .q-cite{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.qw,.q-cite{opacity:1 !important;filter:none !important;transform:none !important;transition:none !important}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tw-caret{display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.15em;background:#C9A86A;animation:twblink .9s steps(1) infinite}
@keyframes twblink{50%{opacity:0}}
.tw-dots{position:absolute;left:clamp(26px,3vw,46px);top:clamp(30px,3.2vw,46px);display:inline-flex;gap:7px}
.tw-dots span{display:block;width:9px;height:9px;border-radius:50%;background:#C9A86A;animation:twdot 1.2s ease-in-out infinite}
.tw-dots span:nth-child(2){animation-delay:.15s}.tw-dots span:nth-child(3){animation-delay:.3s}
@keyframes twdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
/* ---------- Technology MacBook ---------- */
.tech-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.tech-device{grid-column:2;grid-row:1;position:sticky;top:max(110px,16vh)}
.tech-panels{grid-column:1;grid-row:1;display:flex;flex-direction:column}
.tech-panel{min-height:78vh;display:flex;align-items:center;transition:opacity .6s ease}
@media (max-width: 860px){
.tech-grid{grid-template-columns:minmax(0,1fr);gap:8px}
.tech-device{grid-column:1;grid-row:1;top:88px;z-index:3;background:#0A0A0A;padding:12px 6% 16px;margin:0 -6%}
.tech-panels{grid-column:1;grid-row:2}
.tech-panel{min-height:62vh}
}
/* ---------- Live signature ---------- */
.sig{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:0}
.sig-tilt{display:block;transform:rotate(-7deg);transform-origin:12% 60%;margin:10px 0 18px -6px}
.sig-ink{display:block;width:clamp(260px,30vw,420px);height:auto;filter:drop-shadow(0 0 .4px rgba(234,223,198,.6))}
@keyframes sign{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0% 0;mask-position:0% 0}}
@keyframes swash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@supports (animation-timeline: view()){
.sig{view-timeline-name:--sig}
.sig-ink{-webkit-mask-image:linear-gradient(90deg,#000 44%,transparent 56%);mask-image:linear-gradient(90deg,#000 44%,transparent 56%);-webkit-mask-size:230% 100%;mask-size:230% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:sign linear both;animation-timeline:--sig;animation-range:entry 70% cover 52%}
}
/* ---------- Report backdrop ---------- */
.rpt-bg{-webkit-mask-image:radial-gradient(ellipse 62% 78% at 74% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 62% 78% at 74% 50%,#000 30%,transparent 100%)}
.rpt-glow{background:radial-gradient(ellipse 30% 40% at 74% 50%,rgba(201,168,106,.10),transparent 70%)}
@media (max-width: 860px){
.rpt-bg{-webkit-mask-image:radial-gradient(ellipse 95% 50% at 50% 74%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 95% 50% at 50% 74%,#000 30%,transparent 100%)}
.rpt-glow{background:radial-gradient(ellipse 60% 26% at 50% 74%,rgba(201,168,106,.10),transparent 70%)}
}
/* ---------- Phone adjustments ---------- */
@keyframes fleetout{from{transform:scale(3.2)}to{transform:scale(1)}}
@media (max-width: 760px){
.team-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:34px 14px !important}
.team-grid figcaption>span:first-child{font-size:17px !important}
.team-grid .label{font-size:10px;letter-spacing:.14em;line-height:1.6}
.xp{height:calc(var(--vh) * 2.6) !important}
.hero-copy{padding-bottom:calc(clamp(56px, 9vh, 96px) + 84px) !important}
.hero-eyebrow{color:#D9BC86;text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.9)}
.hz{height:auto !important}
.hz-sticky{position:static !important;height:auto !important;overflow:visible !important;gap:28px !important;padding-bottom:60px}
.hz-track{animation:none !important;transform:none !important;width:auto !important;flex-direction:column;gap:20px !important}
.hz-card{width:100% !important}
.xp-img img{position:absolute;top:32%;left:0;width:100% !important;height:auto !important;translate:0 -50%;transform-origin:50% 20%}
}
@supports (animation-timeline: view()){
@media (max-width: 760px){
.xp-img{animation:none !important;clip-path:none !important}
.xp-img img{animation:fleetout linear both !important;animation-timeline:--xp !important;animation-range:contain 0% contain 70% !important}
.xp-copy{animation-range:contain 62% contain 88% !important}
}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important}
.pre{display:none !important}
}

html{scroll-behavior:auto}
[hidden]{display:none !important}
.svc-hit{z-index:2}

.no-pre .hdr{animation-delay:.1s}
.menu-link[aria-current="page"]{color:#D9BC86}
.next-link .next-t{transition:color .4s}
.next-link .next-t svg{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.next-link:hover .next-t,.next-link:focus-visible .next-t{color:#D9BC86}
.next-link:hover .next-t svg{transform:translateX(10px)}
