/* Apple-style design layer. Loaded after style.css, so it only restyles; content and behavior are unchanged. */
:root{
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --surface:#161618;
  --hair:rgba(255,255,255,0.08);
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
body,body>div,h1,h2,h3,h4,button,input,textarea,select,.eyebrow,.navlink,.cta-primary,.cta-outline,.cat-title,
[style*="Bebas Neue"],[style*="Manrope"]{font-family:var(--sf) !important;}

/* ---------- Type ---------- */
[style*="Bebas Neue"]{font-weight:700 !important;letter-spacing:-0.02em !important;}
h1{font-size:clamp(46px,8.4vw,116px) !important;font-weight:700 !important;letter-spacing:-0.045em !important;line-height:1.0 !important;
  background:linear-gradient(180deg,#ffffff 30%,#c4c4c9 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
h2{font-size:clamp(32px,5vw,60px) !important;font-weight:700 !important;letter-spacing:-0.035em !important;line-height:1.06 !important;}
h3{letter-spacing:-0.02em !important;}
h4{letter-spacing:-0.01em !important;}
.cat-title{font-size:28px !important;font-weight:700;letter-spacing:-0.03em !important;}
.cat-title span{font-weight:500;}
.cat-line{background:var(--hair) !important;}
.eyebrow{font-size:13px !important;font-weight:600 !important;letter-spacing:0.06em !important;}
body p{letter-spacing:-0.005em;}

/* ---------- Navigation ---------- */
.site-nav{background:rgba(22,22,24,0.72) !important;-webkit-backdrop-filter:saturate(180%) blur(22px) !important;backdrop-filter:saturate(180%) blur(22px) !important;border-bottom:1px solid var(--hair) !important;}
.site-nav>div:first-child{padding-top:12px !important;padding-bottom:12px !important;}
.navlink{font-size:13px !important;font-weight:500 !important;letter-spacing:0 !important;}
.site-nav .cta-primary{padding:8px 18px !important;font-size:13px !important;}

/* ---------- Buttons ---------- */
.cta-primary,.cta-outline{border-radius:980px !important;text-transform:none !important;letter-spacing:-0.01em !important;font-size:16px !important;font-weight:600 !important;padding:14px 28px !important;transition:transform .35s var(--ease),filter .25s ease,background .25s ease !important;}
.cta-primary:hover{opacity:1 !important;filter:brightness(1.1);transform:scale(1.03);}
.cta-primary:active,.cta-outline:active{transform:scale(0.98);}
.cta-outline{background:rgba(255,255,255,0.1) !important;border:1px solid transparent !important;color:#F5F5F7 !important;}
.cta-outline:hover{background:rgba(255,255,255,0.18) !important;border-color:transparent !important;color:#fff !important;transform:scale(1.03);}

/* ---------- Surfaces ---------- */
.divider{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent) !important;}
.card,.svc-card,.way-card{background:var(--surface) !important;border:1px solid var(--hair) !important;border-radius:24px !important;}
.svc-card{padding:34px 30px !important;}
.svc-card,.way-card{transition:transform .5s var(--ease),border-color .3s ease,box-shadow .5s var(--ease) !important;}
.svc-card:hover,.way-card:hover{transform:translateY(-6px);border-color:rgba(212,169,76,0.4) !important;box-shadow:0 24px 60px rgba(0,0,0,0.5);}
.svc-card h3{font-size:19px !important;font-weight:700 !important;}

/* ---------- Portfolio ---------- */
.vcard{transition:transform .6s var(--ease);}
.vcard:hover{transform:translateY(-6px);}
.vthumb{border-radius:22px !important;box-shadow:0 14px 44px rgba(0,0,0,0.45);}
.vplay{background:rgba(255,255,255,0.2) !important;-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,0.25) !important;transition:transform .4s var(--ease),background .25s ease !important;}
.vcard:hover .vplay{transform:scale(1.1);background:rgba(255,255,255,0.3) !important;}
.vtitle{font-weight:700;letter-spacing:-0.02em;}

/* ---------- FAQ ---------- */
.faq-list{border-radius:22px !important;border:1px solid var(--hair) !important;background:var(--hair) !important;}
.faq-q{font-size:17px !important;font-weight:600 !important;letter-spacing:-0.015em;transition:background .2s ease;}
.faq-q:hover{background:rgba(255,255,255,0.03) !important;}

/* ---------- Form ---------- */
input:not([type="hidden"]),textarea,select{background:rgba(255,255,255,0.06) !important;border:1px solid transparent !important;border-radius:14px !important;padding:15px 17px !important;font-size:16px !important;color:#F5F5F7 !important;transition:border-color .2s ease,box-shadow .25s ease,background .2s ease;}
input:not([type="hidden"]):focus,textarea:focus,select:focus{outline:none !important;border-color:var(--gold) !important;background:rgba(255,255,255,0.09) !important;box-shadow:0 0 0 4px rgba(212,169,76,0.2);}
label{font-weight:600 !important;letter-spacing:0.04em !important;}

/* ---------- Cookie banner ---------- */
.cookie-title{font-size:17px !important;font-weight:700 !important;letter-spacing:-0.015em !important;line-height:1.3 !important;}
.cookie-text{font-size:14px !important;}
.cookie-banner{background:rgba(28,28,30,0.78) !important;-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border:1px solid rgba(255,255,255,0.12) !important;border-radius:22px !important;}

/* ---------- Scroll reveal ---------- */
.reveal-in{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease) !important;transition-delay:var(--d,0ms) !important;}
.reveal-in.is-in{opacity:1;transform:none;}

@media (max-width:600px){
  .cookie-title{font-size:16px !important;}
  h1{font-size:clamp(40px,12vw,60px) !important;}
  h2{font-size:clamp(28px,8vw,40px) !important;}
  .cat-title{font-size:22px !important;}
  .svc-card{padding:26px 22px !important;}
  .cta-primary,.cta-outline{font-size:15px !important;padding:13px 24px !important;}
}
@media (prefers-reduced-motion:reduce){
  .reveal-in{opacity:1 !important;transform:none !important;transition:none !important;}
  .svc-card:hover,.way-card:hover,.vcard:hover{transform:none;}
}

/* ---------- Page layer: transparent sections over the page background ---------- */
.page{position:relative;z-index:1;background:transparent !important;}
.page>div:not(.site-nav){background-color:transparent !important;}
#top>div:first-child{mix-blend-mode:normal !important;}