/* TMGT Group Limited — English-only Hong Kong website.
   Source: published/default Claude Design TMGT, project a22ee300-dd16-425f-829c-b4b4f8f85eb6.
   Mode D values preserved. Remote font import replaced with local files.
   Added: web reset, responsive wrappers and contrast-safe focus. */
@font-face{font-family:Geologica;src:url('/fonts/Geologica.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap;}
@font-face{font-family:'Golos Text';src:url('/fonts/GolosText.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap;}
:root{
/* base */
--tmgt-paper:#F5F5F4;
--tmgt-ink:#10100E;
--tmgt-ink-soft:#3D3B39;
--tmgt-graphite:#55534F;
--tmgt-muted:#8F8D8B;
--tmgt-muted-2:#9A9896;
--tmgt-ghost:#D9D6D1;
--tmgt-ghost-light:#DDDAD4;
--tmgt-hairline:#D5D2CD;
--tmgt-hairline-2:#D8D5D0;
--tmgt-hairline-panel:#CFCCC5;
--tmgt-panel:#EFECE5;
--tmgt-gold:#E3D4A7;
--tmgt-gold-tint:#EDE4C6;
--tmgt-accent:#EC3013;
--tmgt-white:#FFFFFF;
/* brandbook core (added in unified draft) */
--tmgt-brand-black:#10100E;
--tmgt-brand-gray:#AFAFAF;     /* brandbook "Gray" — metallic mid-tone, dark-mode secondary text */
--tmgt-brand-cream:#E3D4A7;    /* brandbook "Butter cream" = --tmgt-gold */
--tmgt-brand-white:#F5F5F5;    /* brandbook "White" — deck light pages */
--tmgt-dark-2:#1A1A18;         /* raised dark panel */
--tmgt-dark-rule:#2E2D2A;      /* hairline on dark */
--tmgt-dark-rule-2:#3A3936;
--tmgt-dark-ghost:#232320;     /* ghost numerals on dark */
--tmgt-dark-muted:#6E6C68;     /* labels on dark */
/* dark-mode semantic (Mode B) */
--surface-dark:var(--tmgt-brand-black);
--surface-dark-raised:var(--tmgt-dark-2);
--surface-light:var(--tmgt-brand-white);
--text-on-dark-secondary:var(--tmgt-brand-gray);
--text-on-dark-label:var(--tmgt-dark-muted);
--text-ghost-on-dark:var(--tmgt-dark-ghost);
--rule-on-dark:var(--tmgt-dark-rule);
--rule-strong-on-dark:var(--tmgt-brand-gray);
--accent-cream:var(--tmgt-brand-cream);
/* semantic */
--surface-page:var(--tmgt-paper);
--surface-panel:var(--tmgt-panel);
--surface-badge:var(--tmgt-gold);
--surface-row-highlight:var(--tmgt-gold-tint);
--surface-chip-dark:var(--tmgt-ink);
--text-body:var(--tmgt-ink);
--text-secondary:var(--tmgt-ink-soft);
--text-label:var(--tmgt-muted);
--text-on-dark:var(--tmgt-white);
--text-ghost-number:var(--tmgt-ghost);
--accent-dot:var(--tmgt-accent);
--rule-strong:var(--tmgt-ink);
--rule-hair:var(--tmgt-hairline);
--border-signature:var(--tmgt-ink);
--underline-fill-in:var(--tmgt-graphite);
}

:root{
/* A4 page geometry (doc-page size="a4": 794×1123 px) */
--page-margin:60px;          /* left/right/effective top margin */
--header-top:50px;           /* running header baseline block */
--header-rule-top:92px;      /* 2.5px rule under running header */
--footer-top:1056px;         /* footer hairline position */
--rule-strong-w:2.5px;
--rule-hair-w:1px;
--signature-border-w:2px;
--ghost-col:142px;           /* ghost-number column (130px on dense pages) */
/* Mode B deck geometry (1920×1080) */
--deck-margin:96px;
--deck-header-top:56px;
--deck-footer-bottom:56px;
--deck-rule-w:2px;
--deck-cols:12; /* @kind other */
--deck-gutter:32px;
/* Mode C brochure (A4) — same 60px margins; modular 6-col grid */
--brochure-cols:6; /* @kind other */
--brochure-gutter:20px;
/* image treatments */
--img-dither-contrast:1.15; /* @kind other */              /* filter: grayscale(1) contrast(1.15) */
--img-metal-filter:grayscale(1) contrast(1.05); /* @kind other */
--img-dither-filter:grayscale(1) contrast(1.2); /* @kind other */
--tint-cream-bg:#E3D4A7;
--grad-silk:linear-gradient(90deg,#10100E 0%,#3A3936 16%,#AFAFAF 40%,#F5F5F5 50%,#AFAFAF 60%,#3A3936 84%,#10100E 100%); /* @kind other */
--grad-brushed:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),linear-gradient(90deg,#55534F 0%,#AFAFAF 30%,#E5E3DE 48%,#AFAFAF 62%,#3D3B39 100%); /* @kind other */
--grad-black-gray:linear-gradient(180deg,#10100E 0%,#2E2D2A 100%); /* @kind other */
--grad-chrome-v:linear-gradient(180deg,#F5F5F5 0%,#AFAFAF 35%,#3A3936 60%,#AFAFAF 80%,#10100E 100%); /* @kind other */
--topo-contours:repeating-radial-gradient(circle at 35% 45%,transparent 0 22px,rgba(175,175,175,.16) 22px 23px); /* @kind other */
--mesh-grid:linear-gradient(rgba(175,175,175,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(175,175,175,.14) 1px,transparent 1px); /* @kind other */
--outline-stroke:1.5px;
--circle-counter-size:120px;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
}

/* Mode D — Digital / Web layer. Derived from the public website audit of 2026-09-03 (visual reference only).
   Geologica is the audited site face; Cyrillic subset is included by Google Fonts. Fallbacks keep the layer usable offline. */
:root{
--font-web:'Geologica','Golos Text',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
--font-web-display:'Geologica','Inter Tight',system-ui,Arial,sans-serif;
/* web surfaces (site values; brand core stays #10100E / #F5F5F5 / #AFAFAF / #E3D4A7) */
--web-ink:#0F0F0F;
--web-page:#FBFBFB;
--web-card:#EFEFEF;
--web-card-dark:#1A1A18;
--web-text-muted:#575757;      /* AA on #EFEFEF and #FBFBFB */
--web-text-inverse-muted:#C9C7C2; /* AA on #0F0F0F */
--web-line:#A5A5A5;
--web-line-dark:#363636;
--web-cream:#E3D4A7;
--web-cream-dark:#91876B;
--web-focus:#E3D4A7;
/* radii — the ONLY mode with rounded containers */
--web-radius-card:20px;
--web-radius-card-sm:16px;
--web-radius-media:18px;
--web-radius-inner:12px;
--web-radius-pill:1000px;
--web-radius-input:3px;
/* rhythm */
--web-nav-height:56px;
--web-gutter:24px;
--web-gutter-lg:48px;
--web-section-gap:120px;
--web-section-gap-mobile:72px;
--web-max-width:1320px;
/* type scale (desktop / mobile in components) */
--web-hero:500 clamp(34px,6vw,96px)/0.98 var(--font-web-display);
--web-h2:500 clamp(28px,3.4vw,48px)/1.08 var(--font-web-display);
--web-h3:500 22px/1.25 var(--font-web-display);
--web-body:400 16px/1.55 var(--font-web);
--web-body-lg:400 18px/1.5 var(--font-web);
--web-small:400 14px/1.5 var(--font-web);
--web-micro:500 12px/1.3 var(--font-web);   /* uppercase, ls 0.08em — never below 12px */
--web-stat:500 clamp(48px,6vw,96px)/0.95 var(--font-web-display);
--web-ghost:600 clamp(160px,22vw,320px)/0.85 var(--font-web-display);
--web-ghost-color-light:#E4E4E4;
--web-ghost-color-dark:#1E1E1B;
/* controls */
--web-control-size:48px;        /* circular plus / arrow — 44px minimum hit target */
--web-control-size-lg:64px;
--web-button-height:52px;
--web-motion:220ms cubic-bezier(.2,.7,.2,1); /* @kind other */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:88px;}
body{margin:0;background:var(--web-page);color:var(--web-ink);font:var(--web-body);}
button,input,select,textarea{font:inherit;}
a{color:inherit;text-underline-offset:.18em;}
button,a{-webkit-tap-highlight-color:transparent;}
button{cursor:pointer;}
img{max-width:100%;height:auto;}
.container{width:min(calc(100% - 2 * var(--web-gutter-lg)),var(--web-max-width));margin-inline:auto;}
.section{padding-block:calc(var(--web-section-gap)/2);}
.hero-title{font:var(--web-hero);letter-spacing:-.04em;max-width:16ch;text-wrap:balance;overflow-wrap:break-word;}
h2{font:var(--web-h2);letter-spacing:-.025em;text-wrap:balance;}
h3{font:var(--web-h3);}
.prose{max-width:70ch;}.muted{color:var(--web-text-muted);}
.card{background:var(--web-card);border-radius:var(--web-radius-card);padding:32px;}
.dark-panel{background:var(--web-card-dark);color:var(--web-page);border-radius:var(--web-radius-card);}
.dark-panel .muted{color:var(--web-text-inverse-muted);}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--web-button-height);padding:12px 24px;border-radius:var(--web-radius-pill);font-weight:500;text-decoration:none;border:1px solid transparent;}
.button-primary{color:var(--web-page);background:var(--web-ink);}
.button-secondary{color:var(--web-ink);background:transparent;border-color:var(--web-ink);}
.dark-panel .button-primary{background:var(--web-cream);color:var(--web-ink);}
/* Dual-color focus remains visible on cream, white, gray and dark surfaces. */
:focus-visible{outline:3px solid var(--web-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--web-page);}
.dark-panel :focus-visible{outline-color:var(--web-page);box-shadow:0 0 0 6px var(--web-ink);}
.skip-link{position:fixed;top:12px;left:12px;z-index:1000;transform:translateY(-160%);padding:12px 20px;background:var(--web-ink);color:var(--web-page);}
.skip-link:focus{transform:none;}
.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;}
@media(max-width:767px){.container{width:calc(100% - 2 * var(--web-gutter));}.section{padding-block:calc(var(--web-section-gap-mobile)/2);}.card{padding:24px;}.hero-title{max-width:100%;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

/* Keep focus visible even where source component selectors are more specific. */
:where(body) :focus-visible{outline:3px solid #0F0F0F!important;outline-offset:3px!important;box-shadow:0 0 0 6px #FBFBFB!important;}