@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{color-scheme:dark;
--primary-50:#331206;--primary-100:#4D1B08;--primary-300:#B34715;--primary-500:#FF5C1F;--primary-600:#FF7A47;--primary-700:#FF9166;--primary-900:#FFD2BF;
--secondary-50:#0B1621;--secondary-100:#122334;--secondary-300:#33648F;--secondary-500:#5C93C4;--secondary-600:#7AA9D2;--secondary-700:#99BEDF;--secondary-900:#D3E3F1;
--neutral-0:#0A0A0B;--neutral-50:#111113;--neutral-100:#19191C;--neutral-200:#232327;--neutral-300:#33333A;--neutral-400:#4D4D55;--neutral-500:#71717A;--neutral-600:#9A9AA3;--neutral-700:#C0C0C7;--neutral-800:#E2E2E6;--neutral-900:#F5F5F7;
--success-100:#0C2617;--success-500:#2FBF6B;--success-700:#6FDCA0;
--warning-100:#2E2306;--warning-500:#E8B21D;--warning-700:#F2CD62;
--error-100:#320D0D;--error-500:#F05252;--error-700:#F58F8F;
--color-bg:#0A0A0B;--color-bg-subtle:#111113;--color-bg-surface:#19191C;--color-bg-elevated:#232327;
--color-border:#33333A;--color-border-strong:#4D4D55;
--color-text:#F5F5F7;--color-text-secondary:#9A9AA3;--color-text-tertiary:#71717A;
--color-accent:#FF5C1F;--color-accent-hover:#FF7A47;--color-accent-contrast:#0A0A0B;
--color-link:#7AA9D2;--color-success:#2FBF6B;--color-warning:#E8B21D;--color-error:#F05252;
--color-focus-ring:#FF5C1F;--color-backdrop:rgb(10 10 11 / 0.72);}
[data-theme="light"]{color-scheme:light;
--primary-50:#FFF3ED;--primary-100:#FFE1D1;--primary-300:#FFA173;--primary-500:#F04E12;--primary-600:#D03E0A;--primary-700:#A93307;--primary-900:#5E1D05;
--secondary-50:#EEF4F9;--secondary-100:#D8E5F0;--secondary-300:#8FB4D4;--secondary-500:#3D6E9E;--secondary-600:#2F5A85;--secondary-700:#254A6F;--secondary-900:#122B44;
--neutral-0:#FFFFFF;--neutral-50:#F7F7F6;--neutral-100:#EDEDEB;--neutral-200:#DCDCD9;--neutral-300:#C2C2BE;--neutral-400:#98988F;--neutral-500:#73736B;--neutral-600:#57574F;--neutral-700:#40403A;--neutral-800:#282824;--neutral-900:#141412;
--success-100:#DDF3E4;--success-500:#178A46;--success-700:#0F6031;
--warning-100:#FCF0D4;--warning-500:#B57F0A;--warning-700:#7D5806;
--error-100:#FBE1E1;--error-500:#CC2B2B;--error-700:#8F1D1D;
--color-bg:#FFFFFF;--color-bg-subtle:#F7F7F6;--color-bg-surface:#FFFFFF;--color-bg-elevated:#FFFFFF;
--color-border:#DCDCD9;--color-border-strong:#C2C2BE;
--color-text:#141412;--color-text-secondary:#57574F;--color-text-tertiary:#73736B;
--color-accent:#F04E12;--color-accent-hover:#D03E0A;--color-accent-contrast:#FFFFFF;
--color-link:#2F5A85;--color-success:#178A46;--color-warning:#B57F0A;--color-error:#CC2B2B;
--color-focus-ring:#F04E12;--color-backdrop:rgb(20 20 18 / 0.48);}

:root{
--font-display:"Cabin","Archivo",system-ui,sans-serif;
--font-sans:"Inter",system-ui,-apple-system,sans-serif;
--font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,monospace;
--font-regular:400;
--font-medium:500;
--font-semibold:600;
--font-bold:700;
--text-display-size:clamp(2.75rem,1.5rem + 4.5vw,4.75rem);
--text-display-lh:1.05;--text-display-ls:-0.03em;
--text-h1-size:clamp(2.25rem,1.4rem + 3vw,3.5rem);
--text-h1-lh:1.1;--text-h1-ls:-0.025em;
--text-h2-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);
--text-h2-lh:1.15;--text-h2-ls:-0.02em;
--text-h3-size:clamp(1.5rem,1.25rem + 0.9vw,1.75rem);
--text-h3-lh:1.25;--text-h3-ls:-0.01em;
--text-h4-size:22px;--text-h4-lh:1.35;--text-h4-ls:-0.005em;
--text-lg-size:18px;--text-lg-lh:1.6;
--text-base-size:16px;--text-base-lh:1.6;
--text-sm-size:14px;--text-sm-lh:1.5;
--text-xs-size:12px;--text-xs-lh:1.4;--text-xs-ls:0.01em;
--text-mono-label-size:12px;--text-mono-label-lh:1.2;--text-mono-label-ls:0.12em;
--text-mono-index-size:13px;--text-mono-index-lh:1;--text-mono-index-ls:0.08em;
--measure:65ch;}

:root{--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-24:96px;--space-32:128px;--space-40:160px;
--radius-none:0px;--radius-sm:2px;--radius-md:4px;--radius-lg:8px;--radius-full:9999px;
--z-base:0;
--z-raised:10;
--z-sticky:100;
--z-header:200;
--z-overlay:300;
--z-modal:400;
--z-popover:500;
--z-toast:600;
--z-tooltip:700;
--container-max:1440px;}

:root{--duration-instant:100ms;
--duration-fast:200ms;
--duration-base:300ms;
--duration-slow:500ms;
--duration-cinematic:800ms;
--ease-standard:cubic-bezier(0.4,0,0.2,1);
--ease-out-expo:cubic-bezier(0.16,1,0.3,1);
--ease-in-quart:cubic-bezier(0.5,0,0.75,0);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}
a{color:var(--color-link);text-decoration:none}
a:hover{text-decoration:underline}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
:where(a,button,input,select,textarea):focus:not(:focus-visible){outline:none}
.container{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--space-5)}
@media (min-width:768px){.container{padding-inline:var(--space-8)}}
@media (min-width:1280px){.container{padding-inline:var(--space-12)}}
.text-display{font-family:var(--font-display);font-size:var(--text-display-size);line-height:var(--text-display-lh);letter-spacing:var(--text-display-ls);font-weight:700}
.text-h1{font-family:var(--font-display);font-size:var(--text-h1-size);line-height:var(--text-h1-lh);letter-spacing:var(--text-h1-ls);font-weight:700}
.text-h2{font-family:var(--font-display);font-size:var(--text-h2-size);line-height:var(--text-h2-lh);letter-spacing:var(--text-h2-ls);font-weight:700}
.text-h3{font-family:var(--font-display);font-size:var(--text-h3-size);line-height:var(--text-h3-lh);letter-spacing:var(--text-h3-ls);font-weight:600}
.text-h4{font-family:var(--font-sans);font-size:var(--text-h4-size);line-height:var(--text-h4-lh);letter-spacing:var(--text-h4-ls);font-weight:600}
.text-lg{font-size:var(--text-lg-size);line-height:var(--text-lg-lh)}
.text-base{font-size:var(--text-base-size);line-height:var(--text-base-lh)}
.text-sm{font-size:var(--text-sm-size);line-height:var(--text-sm-lh)}
.text-xs{font-size:var(--text-xs-size);line-height:var(--text-xs-lh);letter-spacing:var(--text-xs-ls);font-weight:500}
.mono-label{font-family:var(--font-mono);font-size:var(--text-mono-label-size);line-height:var(--text-mono-label-lh);letter-spacing:var(--text-mono-label-ls);text-transform:uppercase;font-weight:400}
.mono-index{font-family:var(--font-mono);font-size:var(--text-mono-index-size);line-height:var(--text-mono-index-lh);letter-spacing:var(--text-mono-index-ls);font-weight:400;color:var(--color-text-tertiary)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}

:root{--font-sans:"Raleway",system-ui,-apple-system,sans-serif;--font-mono:"Raleway",system-ui,-apple-system,sans-serif}
[data-theme="light"]{--color-bg:#F7F7F6;--color-bg-subtle:#EFEFED;--color-bg-surface:#FFFFFF}
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--color-bg);border-bottom:1px solid var(--color-border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.wordmark{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--color-text);letter-spacing:-0.01em}
.logo-mark{width:24px;height:24px}
.wordmark:hover{text-decoration:none}
.site-nav{display:flex;gap:var(--space-6)}
.site-nav a{color:var(--color-text-secondary);font-size:var(--text-sm-size)}
.site-nav a:hover{color:var(--color-text);text-decoration:none}

body{position:relative}
.scroll-art{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.scroll-art svg{display:block;width:100%;height:100%;opacity:0.16}
#scroll-art [data-draw]{stroke:var(--color-text-tertiary);stroke-width:1.25}
#scroll-art .art-accent{stroke:var(--color-accent)}
main,.site-header,.site-footer{position:relative;z-index:1}

.section-grid{display:grid;gap:var(--space-6)}
.rail .mono-index{margin:0}

.hero{padding:var(--space-24) 0 var(--space-16);border-bottom:1px solid var(--color-border)}
.hero h1{margin:0;max-width:18ch}
.hero-intro{margin:var(--space-12) 0 0;max-width:var(--measure);color:var(--color-text-secondary);border-top:1px solid var(--color-border);padding-top:var(--space-6)}

.vista{height:60vh;background-image:url("assets/hong-kong.jpg");background-size:cover;background-position:center;background-attachment:fixed;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
@media (max-width:767px),(hover:none){.vista{background-attachment:scroll;height:45vh}}

.approach{padding:var(--space-24) 0;border-bottom:1px solid var(--color-border)}
.approach,.expertise,.contact,.site-footer{background:transparent}
.site-header{background:var(--color-bg)}
.approach h2{margin:0 0 var(--space-10);max-width:24ch}
.approach-body p{margin:0 0 var(--space-5);max-width:var(--measure);color:var(--color-text-secondary)}
.approach-body p:last-child{margin-bottom:0}

.expertise{padding:var(--space-24) 0;border-bottom:1px solid var(--color-border)}
.expertise h2{margin:0 0 var(--space-12)}
.expertise-list{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--color-border)}
.expertise-list li{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-6);border-bottom:1px solid var(--color-border);font-size:var(--text-lg-size);line-height:var(--text-lg-lh);transition:background-color 240ms var(--ease-out-expo,ease-out)}
.expertise-list li:last-child{border-bottom:none}
.expertise-list li:hover{background:var(--color-bg-surface)}
.area-icon{width:22px;height:22px;color:var(--color-accent);flex-shrink:0}

.contact{padding:var(--space-24) 0}
.contact h2{margin:0 0 var(--space-10)}
.contact-form{max-width:560px;display:grid;gap:var(--space-5)}
.field{display:grid;gap:var(--space-2)}
.field-row{display:grid;gap:var(--space-5)}
.field label{font-family:var(--font-mono);font-size:var(--text-mono-label-size);letter-spacing:var(--text-mono-label-ls);text-transform:uppercase;color:var(--color-text-secondary)}
.field input,.field textarea{font-family:var(--font-sans);font-size:var(--text-base-size);color:var(--color-text);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);width:100%}
.field input:hover,.field textarea:hover{border-color:var(--color-border-strong)}
.field textarea{resize:vertical;min-height:120px}
.btn-submit{justify-self:start;font-family:var(--font-sans);font-weight:500;font-size:var(--text-base-size);color:var(--color-accent-contrast);background:var(--color-accent);border:1px solid var(--color-accent);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-8);cursor:pointer;transition:background-color 160ms var(--ease-out-expo,ease-out)}
.btn-submit:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
.btn-submit:active{transform:translateY(1px)}
.form-note{margin:0;font-size:var(--text-sm-size);color:var(--color-text-secondary);min-height:1.5em}
.form-note.error{color:var(--color-error)}
.form-note.success{color:var(--color-success)}

.site-footer{border-top:1px solid var(--color-border);padding:var(--space-10) 0}
.footer-inner{display:flex;flex-direction:column;gap:var(--space-4)}
.footer-inner>a{color:var(--color-accent)}
.footer-inner>a:hover{color:var(--color-accent-hover)}
.footer-locations{margin:0;color:var(--color-text-tertiary)}
.footer-legal{margin:0;font-size:var(--text-sm-size);color:var(--color-text-tertiary)}
.footer-legal a{color:var(--color-text-secondary)}

.legal-page{padding:var(--space-24) 0}
.error-page{padding:var(--space-32) 0;min-height:60vh}
.error-page .mono-index{margin:0 0 var(--space-4);color:var(--color-accent)}
.error-page h1{margin:0 0 var(--space-6)}
.error-note{max-width:var(--measure);color:var(--color-text-secondary);margin:0 0 var(--space-10)}
.btn-home{display:inline-block;font-weight:500;color:var(--color-accent-contrast);background:var(--color-accent);border:1px solid var(--color-accent);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-8)}
.btn-home:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);text-decoration:none}
.legal-page .mono-index{margin:0 0 var(--space-4)}
.legal-page h1{margin:0 0 var(--space-10)}
.legal-page h2{margin:var(--space-12) 0 var(--space-5)}
.legal-page h3{margin:var(--space-8) 0 var(--space-4)}
.legal-page h4{margin:var(--space-6) 0 var(--space-3)}
.legal-page p{max-width:var(--measure);color:var(--color-text-secondary)}
.legal-page a{color:var(--color-accent);word-break:break-word}
.legal-page a:hover{color:var(--color-accent-hover)}
.legal-list{margin:0 0 var(--space-5);padding-left:var(--space-5);display:grid;gap:var(--space-3);color:var(--color-text-secondary);max-width:var(--measure)}
.legal-list strong{color:var(--color-text)}

@media (min-width:768px){
.field-row{grid-template-columns:1fr 1fr}
.section-grid{grid-template-columns:140px 1fr;gap:var(--space-12)}
.rail{border-right:1px solid var(--color-border)}
.rail .mono-index{position:sticky;top:88px}
.footer-inner{flex-direction:row;align-items:baseline;justify-content:space-between}
}
@media (min-width:1024px){
.hero{padding:var(--space-32) 0 var(--space-24)}
.approach-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10)}
.approach-body p{margin:0}
.expertise-list{grid-template-columns:1fr 1fr}
.expertise-list li{border-bottom:1px solid var(--color-border);min-height:180px;justify-content:space-between}
.expertise-list li:nth-child(odd){border-right:1px solid var(--color-border)}
.expertise-list li:nth-last-child(2){border-bottom:none}
}

.cookie-banner{position:fixed;bottom:var(--space-5);right:var(--space-5);left:var(--space-5);max-width:440px;margin-left:auto;z-index:100;background:var(--color-bg-surface);border:1px solid var(--color-border);padding:var(--space-6);box-shadow:0 8px 32px rgb(0 0 0 / 0.12)}
.cookie-banner p{margin:0 0 var(--space-5);font-size:var(--text-sm-size);line-height:var(--text-sm-lh);color:var(--color-text-secondary)}
.cookie-actions{display:flex;gap:var(--space-3)}
.cookie-btn{font-family:var(--font-sans);font-size:var(--text-sm-size);font-weight:600;padding:var(--space-2) var(--space-5);border-radius:2px;cursor:pointer;transition:background 120ms,border-color 120ms}
.cookie-btn:active{transform:translateY(1px)}
.cookie-accept{background:var(--color-accent);color:var(--color-accent-contrast);border:1px solid var(--color-accent)}
.cookie-accept:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
.cookie-decline{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}
.cookie-decline:hover{border-color:var(--color-border-strong);background:var(--color-bg-subtle)}