/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("e4354724-a6c8-4735-88a5-9831930d1213") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("267c21a3-3703-454e-b947-90b4c5087de9") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("0265e78f-4fc2-44b5-8a08-244c7102be01") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bina 24 Jam — legacy token names remapped onto Vela Ranks values.
   Loaded after the Vela token sheets so existing var() usage picks up Vela. */
:root{
  --color-white:#ffffff;
  --color-off-white:#ffffff;
  --color-charcoal:#09182b;
  --color-charcoal-83:rgba(9,24,43,0.86);
  --color-charcoal-82:rgba(9,24,43,0.78);
  --color-charcoal-40:rgba(9,24,43,0.40);
  --color-charcoal-4:rgba(9,24,43,0.04);
  --color-charcoal-3:rgba(9,24,43,0.03);
  --color-muted-gray:#5c6672;
  --color-border-light:#ccd6df;
  --color-ring-blue:#0e6ee0;
  --color-dark-surface:#152d1d;
  --color-dark-surface-2:#0e341a;
  --color-lime:#5cd87b;
  --color-lime-soft:#d4ffdc;
  --color-green:#48a860;
  --color-green-tint:#f4f8f5;

  --bg-page:#ffffff;
  --bg-surface:#ffffff;
  --surface-card:#ffffff;
  --surface-card-tint:#f4f8f5;
  --surface-dark:#152d1d;
  --text-primary:#09182b;
  --text-secondary:#5c6672;
  --text-strong-secondary:rgba(9,24,43,0.86);
  --text-body:#444e5a;
  --text-on-dark:#ffffff;
  --text-accent:#2f7a46;
  --accent-green:#2f7a46;
  --accent-lime:#5cd87b;
  --accent-lime-soft:#d4ffdc;
  --border-subtle:#ccd6df;
  --border-interactive:#a9aeb3;
  --hover-tint:#f4f8f5;
  --overlay-faint:rgba(9,24,43,0.03);
  --focus-ring:rgba(92,216,123,0.6);
  --placeholder-text:#828890;

  --content-max-width:1200px;
  --color-sage-tint:#f4f8f5;

  --font-sans:"Creato Display",Archivo,"Helvetica Neue",system-ui,sans-serif;
  --font-display-italic:"Playfair Display",Georgia,serif;

  --radius-micro:6px;
  --radius-xs:6px;
  --radius-standard:8px;
  --radius-comfortable:10px;
  --radius-card:20px;
  --radius-container:26px;
  --radius-pill:100px;
}

/* Headlines set in Archivo; only the emphasis turn switches to Playfair italic. */
h1,h2{font-family:"Bricolage Grotesque",var(--font-sans) !important;font-weight:700 !important;letter-spacing:-0.03em !important}
h1 em,h2 em,h1 [style*="font-display-italic"],h2 [style*="font-display-italic"]{font-family:"Playfair Display",Georgia,serif !important;font-style:italic !important;font-weight:700 !important;letter-spacing:-0.01em !important}

/* Chips keep Vela's dark-tone ink when they land on any dark ground. */
.vr-chip{white-space:nowrap}
[style*="surface-dark"] .vr-chip,[style*="grad-dark"] .vr-chip{color:var(--vr-on-dark-muted);border-color:rgba(255,255,255,0.18)}

/* Archivo sets slightly wider than the old sans — keep short CTA labels on one line. */
a[style*="radius-pill"],button[style*="radius-pill"]{white-space:nowrap}

/* ---------- Mobile UX + motion polish (shared by every page) ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
a,button,summary,[role="button"],label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty;overflow-wrap:break-word}
img,video,iframe{max-width:100%}
:focus-visible{outline:2px solid var(--vr-brand-bright,#5cd87b);outline-offset:2px}

/* Pressed feedback — works on touch, never depends on hover */
a[style*="radius-pill"],button[style*="radius-pill"],a[style*="grad-cta"],button,summary{transition:transform 120ms ease,box-shadow 120ms ease,background 200ms ease,opacity 120ms ease}
a[style*="radius-pill"]:active,button:active,a[style*="grad-cta"]:active{transform:scale(0.97) !important}
summary:active{opacity:0.7}
html [data-stagger].reveal>a:active,html [data-drag-row] a:active{transform:scale(0.985) !important;transition-duration:120ms}

/* Hover lifts only where a real pointer exists — stops "stuck" hover after a tap */
@media (hover:none){
  html a[style*="radius-pill"]:hover{transform:none}
  html [data-stagger].reveal>[style*="border-radius"]:hover{transform:none}
  html [data-stagger].reveal>[style*="border-radius"]:hover::after{opacity:0}
  a:hover{text-decoration:none !important}
}

/* Bigger tap targets for small inline links, without moving anything */
@media (pointer:coarse){
  footer a,[data-b24-lang],a[href="portfolio.dc.html"][style*="accent-lime"]{position:relative}
  footer a::after,[data-b24-lang]::after,a[href="portfolio.dc.html"][style*="accent-lime"]::after{content:"";position:absolute;inset:-12px -6px}
}

/* Mobile: calmer, faster reveals */
@media (max-width:767px){
  html [data-reveal]:not(.reveal),html [data-stagger]:not(.reveal)>*{transform:translateY(12px)}
  html [data-reveal],html [data-stagger]>*{transition-duration:.45s}
  html [data-stagger]>*{transition-delay:calc(var(--i,0)*40ms)}
  html [data-hero]:not(.reveal)>*{transform:translateY(10px)}
}

/* Mobile menu: slide in + fade backdrop, lock page scroll while open */
@keyframes rcDrawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes rcBackdropIn{from{opacity:0}to{opacity:1}}
[data-nav-drawer]{animation:rcDrawerIn .28s cubic-bezier(.22,1,.36,1);overscroll-behavior:contain}
[data-nav-backdrop]{animation:rcBackdropIn .2s ease-out}
[data-nav-drawer] a{transition:background 150ms ease}
[data-nav-drawer] a:active{background:var(--hover-tint)}
html:has([data-nav-drawer]){overflow:hidden}

/* FAQ accordions: smooth open/close where supported, chevron turns */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:hidden;transition:block-size .32s cubic-bezier(.22,1,.36,1),content-visibility .32s allow-discrete}
  details[open]::details-content{block-size:auto}
}
summary svg{transition:transform .25s ease}
details[open]>summary svg{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  details::details-content,summary svg,[data-nav-drawer],[data-nav-backdrop]{transition:none !important;animation:none !important}
  a:active,button:active{transform:none !important}
}