/* =========================================================================
   HỒ AN / 01 Black Titanium — homepage styles
   Source: Figma frame 44:17 "HỒ AN / 01 Black Titanium / anhocoder.com"
   Desktop reference width: 1440px (content 1288px, gutter 76px)
   ========================================================================= */

:root {
    --t-bg: #090c0d;
    --t-bg-hero: #090b0c;
    --t-bg-proof: #0a0b0c;
    --t-bg-dock: #0b0e0f;

    --t-cream: #f4ecdc;
    --t-cream-2: #f1e8d9;
    --t-ivory: #eee7d8;
    --t-gold: #d8b67f;
    --t-gold-text: #dfc18d;
    --t-gold-soft: #e6c18a;
    --t-muted: #aab5af;
    --t-body: #d1d7d2;

    --t-btn-from: #ead2a6;
    --t-btn-to: #bc9459;
    --t-btn-border: rgba(234, 212, 175, 0.85);
    --t-card-border: rgba(234, 212, 172, 0.95);
    --t-card-bg: linear-gradient(160deg, #2a3031 0%, #151a1c 30%, #222728 71.429%);

    --f-serif: "Playfair Display", Georgia, serif;
    --f-sans: "Source Sans Pro", "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
    --f-display: "Manrope", -apple-system, "Segoe UI", sans-serif;

    --t-max: 1440px;
    --t-gutter: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html.scroll-smooth { scroll-behavior: smooth; }

.t-body {
    margin: 0;
    background: var(--t-bg);
    color: var(--t-body);
    font-family: var(--f-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Resets use :where() (zero specificity) so component classes always win. */
:where(.t-body) :where(img) { display: block; max-width: none; }
:where(.t-body) :where(a) { color: inherit; text-decoration: none; }
:where(.t-body) :where(p, h1, h2, h3, ol, figure) { margin: 0; }
:where(.t-body) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.t-body a:focus-visible,
.t-body button:focus-visible {
    outline: 2px solid var(--t-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.t-container {
    position: relative;
    width: 100%;
    max-width: var(--t-max);
    margin: 0 auto;
    padding: 0 var(--t-gutter);
}

/* Figma "fill" helper: absolutely positioned layer that stretches an asset. */
.t-fill { position: absolute; inset: 0; width: 100%; height: 100%; }

.t-anchor { scroll-margin-top: 88px; }

/* ---------- Buttons ---------- */
.t-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0.8px solid var(--t-btn-border);
    background: linear-gradient(to bottom, var(--t-btn-from), var(--t-btn-to));
    color: #171f1c;
    font-family: var(--f-sans);
    font-weight: 600;
    transition: filter .25s ease, transform .25s ease;
}
.t-btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }

.t-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a0b0c;
    border: 0.7px solid rgba(138, 141, 136, 0.65);
    color: #e4e3de;
    transition: border-color .25s ease, color .25s ease;
}
.t-btn-ghost:hover { border-color: var(--t-gold); color: #fff; }

/* =========================================================================
   01 · Navigation / Titanium Bar
   ========================================================================= */
.t-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 88px;
    background: var(--t-bg);
}
.t-nav::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    opacity: .65;
    background: linear-gradient(90deg, rgba(202,176,128,0) 0%, rgba(202,176,128,.38) 22%, rgba(202,176,128,.2) 72%, rgba(202,176,128,0) 100%);
}
.t-nav__inner {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.t-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 190px;
    margin-top: -3px;
}
.t-brand__sig { width: 174px; height: 60.719px; }
.t-brand__label {
    width: 190px;
    font-family: var(--f-display);
    font-size: 7.4px;
    line-height: 10px;
    letter-spacing: 1.8px;
    text-align: center;
    color: #919999;
}
.t-nav__links {
    display: flex;
    align-items: center;
    gap: 43px;
    font-size: 17px;
    line-height: 24px;
    white-space: nowrap;
    /* Figma: links group centred at x=690 inside 1440 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -30px;
}
.t-nav__link {
    position: relative;
    color: #b7bdbd;
    transition: color .25s ease;
}
.t-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: var(--t-gold);
    opacity: 0;
    transition: opacity .25s ease;
}
.t-nav__link:hover { color: #ebd1a3; }
.t-nav__link.is-active { color: #ebd1a3; font-weight: 600; }
.t-nav__link.is-active::after { opacity: 1; }

.t-nav__actions { display: flex; align-items: center; gap: 14px; }
.t-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 9px;
    background: #111617;
    border: 0.7px solid rgba(65, 70, 70, 0.7);
    transition: border-color .25s ease;
}
.t-icon-btn:hover { border-color: var(--t-gold); }
.t-icon-btn img { width: 22.829px; height: 22.829px; }

.t-nav__cta {
    position: relative;
    width: 210px;
    height: 46px;
    border-radius: 9px;
    padding: 0 36px 0 18px;
    font-size: 16px;
    box-shadow: 0 3px 14px 0 rgba(220, 183, 128, 0.09);
}
.t-nav__cta img { position: absolute; left: 174px; top: 15px; width: 16px; height: 16px; }

/* =========================================================================
   02 · Hero / 01 Black Titanium
   ========================================================================= */
.t-hero {
    position: relative;
    height: 720px;
    overflow: hidden;
    background: var(--t-bg-hero);
}
.t-hero::after { /* hairline divider */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0.878px;
    background: #3c3932;
    opacity: .65;
    z-index: 3;
}
/* 1440×720 artwork stage, centred so the composition matches Figma at 1440. */
.t-hero__stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1440px;
    height: 720px;
    margin-left: -720px;
}
.t-hero__env { position: absolute; inset: 0; width: 1440px; height: 720px; object-fit: cover; }

.t-hero__glass { position: absolute; left: 1017px; top: 136px; width: 420px; height: 540px; overflow: hidden; }
.t-hero__glass > div { position: absolute; }
.t-hero__glass .g1 { inset: 4.9% 3.33% 0.56% 2.86%; }
.t-hero__glass .g1 > div { position: absolute; inset: 0 0 -0.1% 0; }
.t-hero__glass .g2 { top: 25%; right: 10.48%; bottom: 12.96%; left: 11.67%; }
.t-hero__glass .g2 > div { position: absolute; inset: -0.15% -0.11%; }
.t-hero__glass .g3 { inset: 30.37% 14.05% 19.4% 15.48%; }
.t-hero__glass .g3 > div { position: absolute; inset: -0.2% -0.19%; }
.t-hero__glass .g4 { inset: 32.96% 16.67% 18.52% 24.05%; }
.t-hero__glass .g4 > div { position: absolute; inset: -0.14% -0.16% -0.2% 0; }
.t-hero__glass .g5 { inset: 36.8% 16.12% 37.17% 39.21%; }
.t-hero__glass img { width: 100%; height: 100%; }

.t-hero__portrait {
    position: absolute;
    left: 600px;
    top: -85px;
    width: 640px;
    height: 960px;
    -webkit-mask-image: url("../images/titanium/hero-portrait-mask.svg");
    mask-image: url("../images/titanium/hero-portrait-mask.svg");
    -webkit-mask-size: 640px 960px;
    mask-size: 640px 960px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-mode: alpha;
}
.t-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
.t-hero__floor {
    position: absolute;
    left: 600px;
    top: 664px;
    width: 840px;
    height: 56px;
    background: linear-gradient(to bottom, rgba(9,11,12,0), rgba(9,11,12,.78));
}

.t-hero__content { position: relative; z-index: 2; height: 720px; }
.t-hero__content > * { position: absolute; }

.t-badge {
    left: 76px;
    top: 82px;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 31px;
    padding: 0 12px 0 15px;
    border-radius: 18px;
    background: #0c180e;
    border: 0.7px solid rgba(101, 147, 101, 0.8);
    color: #a4e49b;
    font-weight: 600;
    font-size: 13.2px;
    line-height: 17.561px;
    letter-spacing: 0.1px;
    white-space: nowrap;
}
.t-badge img { width: 7.5px; height: 7.5px; }

.t-hero__name {
    left: 68px;
    top: 123px;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 166px;
    line-height: 182px;
    color: #fff1de;
    white-space: nowrap;
}
.t-hero__role {
    left: 77px;
    top: 305px;
    font-family: var(--f-display);
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 6px;
    color: #bdbebe;
}
.t-hero__tagline {
    left: 76px;
    top: 358px;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 43px;
    line-height: 53px;
    color: #f4eee3;
}
.t-hero__tagline span { display: block; color: #e3c695; }
.t-hero__accent { left: 77px; top: 484px; width: 38px; height: 1px; background: #c5a472; }
.t-hero__stack {
    left: 77px;
    top: 517px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 2.1px;
    color: #b9b9b8;
    white-space: pre;
}
.t-hero__actions { left: 76px; top: 562px; display: flex; gap: 17px; }
.t-hero__primary {
    width: 250px;
    height: 58px;
    border-radius: 10px;
    font-size: 17px;
    color: #222722;
    filter: drop-shadow(0 0 11px rgba(220, 183, 128, 0.15));
    gap: 20px;
}
.t-hero__primary img { width: 24.585px; height: 24.585px; }
.t-hero__secondary { width: 150px; height: 58px; border-radius: 10px; font-size: 20px; }

/* =========================================================================
   03 · Proof
   ========================================================================= */
.t-proof { position: relative; background: var(--t-bg-proof); height: 110px; }
.t-proof::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0.878px;
    background: #6f5d40;
    opacity: .65;
}
.t-proof__row { display: flex; padding-top: 17px; }
.t-proof__item { position: relative; display: flex; align-items: flex-start; width: 429px; height: 76px; flex-shrink: 0; }
.t-proof__num {
    width: 103px;
    margin-top: 2px;
    font-weight: 600;
    font-size: 48px;
    line-height: 47.415px;
    color: #ecd7b4;
}
.t-proof__num--text { width: 165px; margin-top: 16px; font-size: 35px; color: #eedcbd; }
.t-proof__label { margin-left: 6px; margin-top: 21px; font-size: 15px; line-height: 21px; color: #bfc0bc; }
.t-proof__num--text + .t-proof__label { margin-left: 11px; }
.t-proof__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 385px;
    top: 21px;
    width: 0.6px;
    height: 35px;
    background: #b9a177;
    opacity: .65;
}

/* =========================================================================
   Section heading helpers
   ========================================================================= */
.t-h2 {
    font-family: var(--f-serif);
    font-weight: 700;
    color: var(--t-cream);
}

/* =========================================================================
   04 · Selected work
   ========================================================================= */
.t-work { background: var(--t-bg); padding: 104px 0 78px; }
.t-work__accent { width: 42px; height: 1px; background: #c5a472; }
.t-work__title { margin-top: 16px; font-size: 50px; line-height: 66px; }
.t-work__intro { margin-top: 11px; font-size: 18px; line-height: 26px; color: #b8c0c2; }
.t-cases { display: flex; flex-direction: column; gap: 48px; margin-top: 42px; }

.t-case { position: relative; display: flex; gap: 48px; align-items: flex-start; }
.t-case + .t-case::before,
.t-case + .t-case::after {
    content: "";
    position: absolute;
    left: 0;
    top: -24px;
}
.t-case + .t-case::before { right: 0; height: 0.8px; background: #4f554a; }
.t-case + .t-case::after { width: 40px; height: 1.5px; background: #b49a6e; }

.t-case__art {
    position: relative;
    flex: 0 0 620px;
    height: 552px;
    border: 0.7px solid rgba(121, 120, 109, 0.35);
    border-radius: 6px;
    overflow: hidden;
}
.t-case__art img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.t-case--reverse .t-case__art { order: 2; }

.t-case__body { flex: 0 0 620px; display: flex; flex-direction: column; gap: 12px; padding: 20px 0 16px; }
.t-case__identity { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 84px; padding-left: 110px; }
.t-case__index {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 72px;
    border-radius: 10px;
    background: #141b1b;
    border: 0.8px solid rgba(158, 137, 99, 0.55);
    text-align: center;
}
.t-case__index b { font-family: var(--f-display); font-weight: 700; font-size: 38px; line-height: 47px; color: #e6c894; }
.t-case__index small { font-size: 7.5px; line-height: 10.875px; letter-spacing: 2px; color: #b5a17e; }
.t-case__name { font-family: var(--f-serif); font-weight: 400; font-size: 32px; line-height: 42px; min-height: 45px; color: #f1e9da; }
.t-case__name--sm { font-size: 29px; }
.t-case__meta { font-size: 11px; line-height: 15.4px; letter-spacing: 1.5px; color: #af956d; white-space: pre-wrap; }

.t-case__row {
    display: flex;
    gap: 25px;
    min-height: 75px;
    padding-top: 14px;
    border-top: 0.7px solid rgba(75, 81, 75, 0.6);
}
.t-case__row--result { min-height: 79px; padding-top: 12px; }
.t-case__label { flex: 0 0 87px; font-size: 14px; line-height: 19.6px; color: var(--t-muted); }
.t-case__text { flex: 1 1 auto; max-width: 508px; font-size: 16px; line-height: 23px; color: var(--t-body); }
.t-case__results { display: flex; gap: 20px; flex: 1 1 auto; max-width: 508px; }
.t-case__result { display: flex; flex-direction: column; gap: 2px; flex: 0 0 244px; }
.t-case__result--wide { flex-basis: 100%; }
.t-case__result b { font-family: var(--f-serif); font-weight: 400; font-size: 24px; line-height: 32px; min-height: 34px; color: #dec18d; }
.t-case__result--wide b { font-size: 22px; }
.t-case__result small { font-size: 12px; line-height: 16.8px; color: #aab3ae; }

.t-case__foot { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
.t-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.t-chip {
    padding: 5px 9px;
    border-radius: 4px;
    background: #101617;
    border: 0.7px solid rgba(114, 126, 118, 0.65);
    font-size: 11px;
    line-height: 15px;
    color: #bdc7c0;
    white-space: nowrap;
}
.t-case__more { display: flex; align-items: center; gap: 9px; font-size: 14px; line-height: 19.6px; color: var(--t-gold-text); }
.t-case__more img { width: 15px; height: 15px; }

/* =========================================================================
   05 · Career
   ========================================================================= */
.t-career {
    background: linear-gradient(138.37deg, #111719 0%, #090d0e 35.714%, #0c1112 71.429%);
    padding: 56px 0 46px;
}
.t-career .t-container { padding-left: 38px; padding-right: 33px; }
.t-career__title { margin-left: 16px; font-size: 62px; line-height: 82px; color: var(--t-cream-2); }
.t-career__intro { margin-left: 20px; margin-top: 5px; font-size: 22px; line-height: 31px; color: #acb8b2; }

.t-career__grid { display: flex; gap: 39px; margin-top: 40px; }
.t-career__col--main { flex: 0 0 812px; }
.t-career__col--side { flex: 0 0 518px; }

.t-colhead { display: flex; align-items: center; height: 30px; margin-bottom: 16px; }
.t-colhead__idx { display: flex; align-items: center; gap: 14px; width: 114px; font-size: 16px; line-height: 22.4px; color: #9da9a6; }
.t-colhead__idx::after { content: ""; width: 58px; height: 0.7px; background: #d0b484; }
.t-colhead__label { font-weight: 600; font-size: 20px; line-height: 16.8px; letter-spacing: 3.5px; color: #d6ba88; }
.t-career__col--main .t-colhead { padding-left: 14px; }
.t-career__col--side .t-colhead__idx { width: 116px; }

.t-timeline { position: relative; }
.t-timeline::before { /* rail */
    content: "";
    position: absolute;
    left: 27px;
    top: 0;
    width: 0.8px;
    height: 646px;
    background: #c3b28d;
}
.t-role {
    position: relative;
    display: flex;
    gap: 38px;
    min-height: 162px;
    padding: 32px 16px 0 54px;
    border-bottom: 0.7px solid rgba(93, 104, 97, 0.65);
}
.t-role--featured {
    min-height: 168px;
    padding: 32px 16px 0 54px;
    border: 0.8px solid var(--t-card-border);
    border-radius: 8px;
    background: linear-gradient(164.58deg, #2a3031 0%, #151a1c 30%, #222728 71.429%);
}
.t-role__dot {
    position: absolute;
    left: 20px;
    top: 46px;
    width: 15px;
    height: 15px;
    border-radius: 2px;
    background: #fff1d2;
    border: 1.5px solid #d9b46c;
    box-shadow: 0 0 9px 1px rgba(225, 185, 108, 0.6);
}
.t-role__date {
    flex: 0 0 192px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 8px;
    background: #111718;
    border: 0.8px solid var(--t-card-border);
    font-size: 16px;
    line-height: 19.6px;
    color: #e0e4dc;
}
.t-role__body { flex: 0 1 512px; display: flex; flex-direction: column; gap: 5px; }
.t-role--featured .t-role__body { background: #141a1c; }
.t-role__company { font-family: var(--f-serif); font-weight: 700; font-size: 28px; line-height: 37px; color: #f1e7d7; }
.t-role__title { font-weight: 600; font-size: 19px; line-height: 27px; color: var(--t-gold-soft); }
.t-role__rule { height: 0.7px; background: #4d5652; }
.t-role__desc { font-size: 17px; line-height: 25px; color: #c3ceca; }

.t-skills { display: flex; flex-direction: column; gap: 14px; margin-top: -3px; }
.t-skill {
    position: relative;
    display: flex;
    gap: 28px;
    min-height: 120px;
    padding: 14px 21px;
    border-radius: 8px;
    border: 0.8px solid var(--t-card-border);
    background: var(--t-card-bg);
    box-shadow: inset 0 1px 4px 0 rgba(245, 213, 162, 0.11);
}
.t-skill--wide { flex-direction: column; gap: 16px; padding: 20px 21px 16px; }
.t-skill__head { display: flex; gap: 28px; }
.t-skill__icon {
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 0.8px solid var(--t-card-border);
    background: linear-gradient(126.87deg, #2a3031 0%, #151a1c 30%, #222728 71.429%);
}
.t-skill__icon img { width: 48px; height: 48px; }
.t-skill__name { font-family: var(--f-serif); font-weight: 700; font-size: 30px; line-height: 38px; color: #f4ead8; }
.t-skill--wide .t-skill__name { line-height: 42px; }
.t-skill__desc { margin-top: 1px; font-size: 16px; line-height: 23px; color: #c6d0c9; }
.t-skill--wide .t-skill__desc { margin-top: 3px; font-size: 17px; line-height: 23.8px; color: #c7ceca; }
.t-skill__stack { margin-top: 1px; font-size: 17px; line-height: 24px; color: #d6ded7; }
.t-skill__cols { display: flex; gap: 22px; padding-top: 14px; border-top: 0.7px solid rgba(89, 97, 90, 0.65); }
.t-skill__cols > div { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; }
.t-skill__cols b { font-weight: 600; font-size: 19px; line-height: 26.6px; color: #e2bf87; }
.t-skill__cols p { font-size: 18px; line-height: 25.2px; color: #d3dbd7; }

/* =========================================================================
   06 · Education & recognition
   ========================================================================= */
.t-edu {
    background: linear-gradient(138.37deg, #101719 0%, #090d0e 35.714%, #141a1b 71.429%);
    padding: 105px 0 60px;
}
.t-edu .t-container { padding-left: 36px; padding-right: 34px; }
.t-edu__title { margin-left: 40px; font-size: 58px; line-height: 75.4px; color: #f3e8d7; }
.t-edu__rule { margin: 23px 0 0 40px; width: 98px; height: 3px; background: #d8b780; }
.t-edu__grid { display: flex; gap: 20px; margin-top: 50px; }
.t-edu__col { flex: 0 0 526px; display: flex; flex-direction: column; gap: 20px; }

.t-surface { position: relative; }
.t-surface > .t-fill { z-index: 0; }
.t-surface > :not(.t-fill) { position: relative; z-index: 1; }

.t-school { display: flex; flex-direction: column; gap: 14px; padding: 32px 32px 24px; min-height: 352px; }
.t-school--funix { min-height: 272px; padding-bottom: 26px; }
.t-school__head { display: flex; gap: 26px; }
.t-tile { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.t-tile--90 { width: 90px; height: 90px; }
.t-tile--64 { width: 64px; height: 64px; }
.t-tile__label {
    position: absolute;
    left: 50%;
    top: 32.72px;
    transform: translateX(-50%);
    width: 33.48px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 15.624px;
    line-height: 20.311px;
    text-align: center;
    color: #e5d5b6;
}
/* Figma icon boxes: outer box → percentage inset group → bleed wrapper → img */
.t-ico { position: relative; display: block; overflow: hidden; flex: 0 0 auto; }
.t-ico > span { position: absolute; display: block; }
.t-ico > span > span { position: absolute; display: block; }
.t-ico img { width: 100%; height: 100%; }

.t-school__name { font-family: var(--f-serif); font-weight: 700; font-size: 31px; line-height: 40.3px; color: #f2e7d5; }
.t-school--funix .t-school__name { font-size: 34px; line-height: 44.2px; min-height: 48px; }
.t-school__info { display: flex; flex-direction: column; gap: 10px; }
.t-school--funix .t-school__info { gap: 8px; }
.t-period { display: flex; align-items: center; gap: 12px; font-size: 21px; line-height: 27.3px; color: #eae4d8; }
.t-divider { height: 0.8px; background: #747a6d; }
.t-details { display: flex; flex-direction: column; gap: 5px; }
.t-school--funix .t-details { gap: 8px; }
.t-detail { display: flex; align-items: center; gap: 20px; min-height: 34px; font-size: 21px; line-height: 27.3px; color: #e0e4db; }
.t-detail--sm { font-size: 18px; line-height: 23.4px; }
.t-detail--xs { font-size: 17.5px; line-height: 22.75px; }

.t-award { flex: 0 0 824px; min-height: 644px; padding: 46px 16px 34px 36px; }
.t-award__top { display: flex; justify-content: space-between; }
.t-award__main { width: 450px; }
.t-award__rank { display: flex; align-items: flex-start; }
.t-award__rank .t-ico { margin-top: 26px; }
.t-award__vr { width: 0.8px; height: 108px; margin: 26px 23px 0 12px; background: #b79f75; }
.t-award__title { font-family: var(--f-serif); font-weight: 700; font-size: 68px; line-height: 88.4px; color: #e4c08b; }
.t-award__event { margin-top: 6px; font-weight: 600; font-size: 32px; line-height: 41.6px; color: #f0e6d7; }
.t-award__team { display: flex; align-items: center; gap: 20px; margin: 38px 0 0 8px; font-size: 29px; line-height: 37.7px; color: #eae4d8; }
.t-award__hr { width: 435px; height: 0.8px; margin: 20px 0 0 4px; background: #747a6d; }
.t-award__art { width: 342px; margin-top: -26px; text-align: center; }
.t-award__art img { width: 342px; height: 276px; object-fit: contain; }
.t-award__caption { margin-top: 7px; font-size: 13.5px; line-height: 17.55px; color: #bac2b7; }

.t-foresy { display: flex; gap: 26px; margin: -7px 0 0 4px; }
.t-foresy__name { font-family: var(--f-serif); font-weight: 700; font-size: 42px; line-height: 54.6px; color: #e1bd86; }
.t-foresy__purpose { margin-top: 2px; font-size: 23px; line-height: 29.9px; color: #e7e7db; }
.t-foresy__tech { display: flex; align-items: flex-start; gap: 23px; margin: 9px 0 0 16px; font-size: 23px; line-height: 29.9px; color: #eae4d8; }

.t-pubs { display: flex; gap: 28px; margin: 42px 0 0 -4px; max-width: 760px; min-height: 126px; padding: 25px 28px 20px; }
.t-pub { display: flex; gap: 20px; flex: 0 0 338px; }
.t-pub__name { font-family: var(--f-serif); font-weight: 700; font-size: 28px; line-height: 36.4px; min-height: 40px; color: #e3c28e; transition: color .25s ease; }
.t-pub:hover .t-pub__name { color: #f6e4bf; }
.t-pub__date { margin-top: 5px; font-size: 18px; line-height: 23.4px; color: #b9c3b9; }

/* =========================================================================
   07 · Contact
   ========================================================================= */
.t-contact { position: relative; background: var(--t-bg-dock); min-height: 890px; overflow: hidden; }
.t-contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-contact .t-container { position: relative; padding-top: 110px; padding-bottom: 61px; }
.t-contact__title { font-family: var(--f-serif); font-weight: 700; color: var(--t-ivory); }
.t-contact__title span { display: block; }
.t-contact__line1 { font-size: 94px; line-height: 117.5px; }
.t-contact__line2 { font-size: 80px; line-height: 100px; margin-top: 6px; }
.t-contact__line2 em { font-style: italic; font-weight: 400; color: #dcc091; }

.t-slab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 38px;
    height: 168px;
    margin-top: 37px;
    padding: 0 40px 0 58px;
}
.t-slab__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-slab > :not(.t-slab__bg) { position: relative; }
.t-slab__mail { width: 68px; height: 68px; flex: 0 0 auto; }
.t-slab__sep { width: 1px; height: 78px; background: #8c806a; flex: 0 0 auto; }
.t-slab__label { flex: 1 1 auto; font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 55px; color: var(--t-ivory); }
.t-slab__go {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    margin-right: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 42px;
    background: linear-gradient(to bottom, #f6e4bf, #ae8751);
    transition: transform .25s ease;
}
.t-slab__go img { width: 42px; height: 42px; }
.t-slab:hover .t-slab__go { transform: translateX(4px); }

.t-channels { display: flex; gap: 30px; margin: 57px 0 0 20px; }
.t-channel { flex: 0 0 380px; display: flex; flex-direction: column; gap: 15px; min-height: 108px; }
.t-channel__idx { font-family: var(--f-display); font-weight: 700; font-size: 16px; line-height: 20px; min-height: 26px; letter-spacing: 3px; color: var(--t-ivory); }
.t-channel__action { display: flex; align-items: center; gap: 12px; height: 48px; font-size: 28px; line-height: 35px; color: var(--t-ivory); }
.t-channel__action span { flex: 0 1 320px; }
.t-channel__action img { width: 24px; height: 24px; transition: transform .25s ease; }
.t-channel:hover .t-channel__action img { transform: translate(2px, -2px); }
.t-channel__vr { flex: 0 0 1px; height: 100px; background: #5c594c; }

.t-contact__foot { display: flex; align-items: flex-end; justify-content: space-between; margin: 37px 22px 0 20px; }
.t-status { display: flex; align-items: center; gap: 18px; padding-bottom: 25px; font-size: 23px; line-height: 28.75px; color: var(--t-ivory); }
.t-status img { width: 12px; height: 12px; }
.t-contact__sig { width: 252.3px; height: 88.042px; }

/* =========================================================================
   08 · Footer / Signature Dock
   ========================================================================= */
.t-footer { background: var(--t-bg-dock); padding: 18px 24px; }
.t-dock {
    position: relative;
    max-width: 1392px;
    margin: 0 auto;
    min-height: 244px;
    padding: 30px 56px 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.t-dock__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-dock > :not(.t-dock__bg) { position: relative; }
.t-dock__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.t-dock__row--main { min-height: 108px; }
.t-dock__brand { display: flex; flex-direction: column; gap: 8px; width: 250px; }
.t-dock__brand img { width: 200.1px; height: 69.827px; }
.t-dock__brand span { font-family: var(--f-display); font-weight: 700; font-size: 11.5px; line-height: 14.95px; letter-spacing: 2.4px; color: #bdbbae; }
.t-dock__nav { display: flex; align-items: center; gap: 29px; font-size: 22px; line-height: 28.6px; color: #dcdacf; }
.t-dock__nav a { display: flex; align-items: center; height: 44px; transition: color .25s ease; }
.t-dock__nav a:hover { color: #ebd1a3; }
.t-totop { display: flex; align-items: center; gap: 12px; width: 210px; font-size: 20px; line-height: 26px; color: #dcdacf; }
.t-totop__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: #222827;
    border: 1px solid #b5a280;
    transition: transform .25s ease;
}
.t-totop:hover .t-totop__circle { transform: translateY(-2px); }
.t-totop__circle img { width: 24px; height: 24px; }
.t-dock__divider { width: 100%; height: 1px; }
.t-dock__row--util { min-height: 38px; font-size: 18px; line-height: 23.4px; color: #dcdacf; }
.t-dock__copy { width: 200px; font-size: 17px; line-height: 22.1px; color: #acafa7; }
.t-dock__site { width: 220px; text-align: center; }
.t-dock__contacts { display: flex; align-items: center; gap: 24px; width: 580px; }
.t-dock__contacts a { display: flex; align-items: center; gap: 12px; transition: color .25s ease; }
.t-dock__contacts a:hover, .t-dock__site:hover { color: #ebd1a3; }
.t-dock__contacts img { width: 23px; height: 23px; }
.t-dock__contacts .t-dock__mail { width: 370px; }
.t-dock__vr { width: 1px; height: 23px; background: #5f6259; }

/* =========================================================================
   Responsive — design is 1440 desktop; below are adaptations.
   ========================================================================= */
@media (min-width: 1441px) {
    /* Wider than the 1440 artboard: fade the artwork edges into the page background. */
    .t-hero__env {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
}

@media (max-width: 1439px) {
    .t-proof__item { flex: 1 1 0; width: auto; }
    .t-proof__item:not(:last-child)::after { left: auto; right: 44px; }
    .t-case__art, .t-case__body { flex: 1 1 0; min-width: 0; }
    .t-career__col--main { flex: 1 1 812px; min-width: 0; }
    .t-career__col--side { flex: 0 1 518px; min-width: 0; }
    .t-edu__col { flex: 0 1 526px; }
    .t-award { flex: 1 1 824px; min-width: 0; }
    .t-channel { flex: 1 1 0; min-width: 0; }
    /* Fixed artboard widths must shrink below 1440 (prevents right-edge clipping at 1024–1399). */
    .t-case__result { flex: 1 1 0; min-width: 0; }
    .t-award__top { gap: 16px; }
    .t-award__main { width: auto; flex: 1 1 auto; min-width: 0; }
    .t-award__art { flex: 0 1 342px; min-width: 0; }
    .t-award__art img { width: 100%; max-width: 342px; height: auto; aspect-ratio: 342 / 276; }
    .t-award__hr { width: auto; max-width: 435px; }
    .t-pub { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 1279px) {
    :root { --t-gutter: 40px; }
    .t-nav__links { position: static; transform: none; margin: 0; gap: 28px; }
    .t-hero__name { font-size: 128px; line-height: 150px; top: 130px; }
    .t-hero__role { top: 290px; }
    .t-hero__stage { left: auto; right: -260px; margin-left: 0; }

    .t-career .t-container, .t-edu .t-container { padding-left: var(--t-gutter); padding-right: var(--t-gutter); }
    .t-career__title, .t-career__intro, .t-edu__title { margin-left: 0; }
    .t-edu__rule { margin-left: 0; }
    .t-career__grid { flex-direction: column; gap: 48px; }
    .t-career__col--side { flex-basis: auto; }
    .t-skills { display: grid; grid-template-columns: 1fr 1fr; }
    .t-skill--wide { grid-row: span 3; }

    .t-edu__grid { flex-direction: column; }
    .t-edu__col { flex-direction: row; flex-basis: auto; }
    .t-edu__col > * { flex: 1 1 0; min-width: 0; }
    .t-award { flex-basis: auto; }

    .t-contact__line1 { font-size: 76px; line-height: 96px; }
    .t-contact__line2 { font-size: 64px; line-height: 82px; }
    .t-slab__label { font-size: 36px; }
    .t-slab__go { margin-right: 32px; }

    .t-dock__row { flex-wrap: wrap; }
    .t-dock__contacts { width: auto; }
    .t-dock__contacts .t-dock__mail { width: auto; }
}

@media (max-width: 1023px) {
    /* Nav links move to a second, horizontally scrollable row inside the sticky header. */
    .t-nav { height: auto; }
    .t-nav__inner { flex-wrap: wrap; height: auto; min-height: 88px; }
    .t-nav__links {
        order: 3;
        width: 100%;
        height: 44px;
        gap: 28px;
        overflow-x: auto;
        scrollbar-width: none;
        font-size: 16px;
        border-top: 0.7px solid rgba(202, 176, 128, 0.18);
    }
    .t-nav__links::-webkit-scrollbar { display: none; }
    .t-nav__link::after { bottom: 4px; }
    .t-anchor { scroll-margin-top: 132px; }

    /* Hero: text first, artwork below */
    .t-hero { height: auto; }
    .t-hero__content { height: auto; padding: 56px var(--t-gutter) 48px; }
    .t-hero__content > * { position: static; }
    .t-badge { display: inline-flex; }
    .t-hero__name { margin-top: 22px; font-size: clamp(72px, 15vw, 128px); line-height: 1.1; }
    .t-hero__role { margin-top: 4px; font-size: 15px; letter-spacing: 4px; }
    .t-hero__tagline { margin-top: 28px; font-size: clamp(30px, 5vw, 43px); line-height: 1.24; }
    .t-hero__accent { margin-top: 18px; }
    .t-hero__stack { margin-top: 26px; white-space: normal; }
    .t-hero__actions { margin-top: 22px; flex-wrap: wrap; }
    .t-hero__stage { position: relative; left: 50%; right: auto; margin-left: -720px; height: 560px; }
    .t-hero__env { height: 560px; }
    .t-hero__glass { display: none; }
    .t-hero__portrait { left: 400px; top: 20px; }
    .t-hero__floor { left: 0; width: 1440px; top: 504px; }
    .t-hero__stage { order: 2; }
    .t-hero { display: flex; flex-direction: column; }
    .t-hero__content { order: 1; }
    .t-hero__portrait { left: 400px; }

    .t-proof { height: auto; padding: 24px 0; }
    .t-proof__row { flex-direction: column; gap: 8px; padding-top: 0; }
    .t-proof__item { height: auto; min-height: 64px; }
    .t-proof__item:not(:last-child)::after { display: none; }

    .t-work { padding: 72px 0 56px; }
    .t-case, .t-case--reverse { flex-direction: column; gap: 24px; }
    .t-case--reverse .t-case__art { order: 0; }
    .t-case__art { flex: none; width: 100%; height: auto; aspect-ratio: 620 / 552; }
    .t-case__body { flex: none; width: 100%; padding: 0; }

    .t-skills { grid-template-columns: 1fr; }
    .t-skill--wide { grid-row: auto; }
    .t-edu__col { flex-direction: column; }
    .t-edu__col > * { flex: none; }
    .t-award__top { flex-direction: column-reverse; gap: 8px; }
    .t-award__art { margin: 0 auto; }
    .t-award__main { width: auto; }
    .t-award__hr { width: auto; }
    .t-foresy { margin-top: 24px; }
    .t-pubs { flex-direction: column; gap: 20px; }
    .t-pub { flex-basis: auto; }

    .t-channels { flex-direction: column; gap: 24px; margin-left: 0; }
    .t-channel { flex: none; min-height: 0; }
    .t-channel__vr { display: none; }
    .t-contact__foot { flex-direction: column; align-items: flex-start; gap: 24px; margin: 40px 0 0; }

    .t-dock__nav { flex-wrap: wrap; gap: 8px 24px; font-size: 19px; }
}

/* =========================================================================
   Mobile navigation overlay (Figma 667:487) — opened from .t-menu-btn (≤767px only)
   ========================================================================= */
.t-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 5px;
    background: #141c1e;
    border: 0.75px solid #51534a;
}
.t-menu-btn img { width: 22px; height: 22px; }
.t-menu { position: fixed; inset: 0; z-index: 100; }
.t-menu[hidden] { display: none; }
.t-menu__backdrop { position: absolute; inset: 0; background: rgba(5, 8, 9, 0.72); }
.t-menu__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 100%;
    overflow-y: auto;
    padding: 24px 24px 32px;
    background: #0c1315;
}
.t-menu__head { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.t-menu__sig { width: 130px; height: 45.365px; }
.t-menu__rule { height: 0.75px; background: #44463e; }
.t-menu__links { display: flex; flex-direction: column; gap: 20px; }
.t-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    font-family: var(--f-serif);
    font-size: 22px;
    line-height: 31px;
    color: #eae3d4;
}
.t-menu__link img { width: 22px; height: 22px; }
.t-menu__site { font-size: 14px; line-height: 20px; color: #a5b6aa; }
/* Lock on <body> so the overflow propagates to the viewport (locking <html> turns body into a scroller and detaches the sticky header). */
html.t-menu-open .t-body { overflow: hidden; }

/* Breakpoint-only content (mobile = Figma 663:254 "Mobile 390").
   Exact complement of the mobile block below, so fractional widths (767.x px) never match both or neither. */
@media not all and (max-width: 767px) {
    .t-only-m { display: none !important; }
}

/* =========================================================================
   Mobile ≤767px — Figma 663:254 "HỒ AN / 01 Black Titanium / Mobile 390"
   Reference width 390 (content 342, gutter 24). Overrides the 1023/1279/1439 rules.
   ========================================================================= */
@media (max-width: 767px) {
    :root { --t-gutter: 24px; }
    .t-only-d { display: none !important; }
    .t-anchor { scroll-margin-top: 76px; }
    #top { scroll-margin-top: 76px; }

    /* 01 · Navigation (663:256) */
    .t-nav { height: 76px; background: #090f10; }
    .t-nav::after { display: none; }
    .t-nav__inner { flex-wrap: nowrap; height: 76px; min-height: 0; }
    .t-brand { width: auto; margin: 0; gap: 0; }
    .t-brand__sig { width: 110px; height: 38.385px; }
    .t-brand__label, .t-nav__links, .t-nav__cta { display: none; }
    .t-nav__actions { gap: 10px; }
    .t-icon-btn { display: flex; width: 44px; height: 44px; border-radius: 8.609px; border-width: 0.67px; }
    .t-icon-btn img { width: 21.837px; height: 21.837px; }

    /* 02 · Hero (663:268): badge → identity → statement → stack → stage → actions */
    .t-hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 24px var(--t-gutter) 32px;
        background: #0b1113;
    }
    .t-hero::after, .t-hero__accent { display: none; }
    .t-hero__content { display: contents; }
    .t-badge { order: 1; }
    .t-hero__name { order: 2; }
    .t-hero__role { order: 3; }
    .t-hero__tagline { order: 4; }
    .t-hero__stack { order: 5; }
    .t-hero__stage { order: 6; }
    .t-hero__actions { order: 7; }

    .t-badge {
        display: flex;
        align-self: flex-start;
        width: 165px;
        height: 28px;
        margin: 0;
        padding: 0 0 0 12px;
        gap: 8px;
        border: 0;
        border-radius: 14px;
        background: #14251d;
        font-size: 13px;
        line-height: 18px;
        letter-spacing: 0;
        color: #a6d4b5;
    }
    .t-badge img { display: none; }
    .t-badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #58dd8a; }
    .t-hero__name { margin-top: 18px; font-size: 64px; line-height: 90px; color: #eae3d4; }
    .t-hero__role { margin: 0; font-weight: 700; font-size: 11px; line-height: 15px; letter-spacing: 2.3px; color: #b6c0bc; }
    .t-hero__tagline { margin-top: 18px; font-size: 29px; line-height: 41px; color: #eae3d4; }
    .t-hero__tagline span { color: #eae3d4; }
    .t-hero__stack { margin-top: 18px; font-size: 15px; line-height: 21px; letter-spacing: 0; color: #b9c3bf; white-space: pre-wrap; }

    .t-hero__stage {
        position: relative;
        left: auto;
        right: auto;
        width: 100%;
        height: 358px;
        margin: 18px 0 0;
        border-radius: 5px;
        overflow: hidden;
    }
    /* Composition centred on the 342px Figma stage (centre x = 171). */
    .t-hero__env { left: calc(50% - 421px); top: 0; width: 716px; height: 358px; }
    .t-hero__glass { display: block; left: calc(50% - 6px); top: 88px; width: 185px; height: 237.857px; }
    .t-hero__portrait {
        left: calc(50% - 159px);
        top: -28px;
        width: 300px;
        height: 450px;
        -webkit-mask-size: 300px 450px;
        mask-size: 300px 450px;
    }
    .t-hero__floor { left: 0; top: 312px; width: 100%; height: 46px; background: linear-gradient(to bottom, rgba(11, 17, 19, 0), #0b1113); }

    .t-hero__actions { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 18px; }
    .t-hero__primary, .t-hero__secondary {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        height: 52px;
        justify-content: flex-start;
        gap: 8px;
        padding: 0 18px;
        border-radius: 5px;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        filter: none;
    }
    .t-hero__primary { border: 0; background: linear-gradient(to bottom, #edd7a8, #b28c54); color: #131a19; }
    .t-hero__primary img { display: none; }
    .t-hero__secondary { background: #111a1b; border: 1px solid #bda16e; color: #eae3d4; }

    /* 03 · Proof (663:315) */
    .t-proof { height: auto; padding: 20px 0; background: #091011; }
    .t-proof::after { display: block; left: var(--t-gutter); right: var(--t-gutter); bottom: 20px; height: 0.75px; background: #44463e; opacity: 1; }
    .t-proof__row {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        padding: 0 calc(var(--t-gutter) + 36px) 18.75px var(--t-gutter);
    }
    .t-proof__item { flex: 0 1 102px; width: auto; height: auto; min-height: 0; flex-direction: column; gap: 3px; }
    .t-proof__item:not(:last-child)::after { display: none; }
    .t-proof__num, .t-proof__num--text { width: auto; margin: 0; font-weight: 600; font-size: 29px; line-height: 41px; color: #e1c38e; }
    .t-proof__num--text { font-size: 23px; line-height: 32px; }
    .t-proof__label, .t-proof__num--text + .t-proof__label { margin: 0; font-size: 12px; line-height: 17px; color: #abb7b2; }
    .t-proof__label br { display: none; }

    /* 04 · Selected work (663:327) */
    .t-work { padding: 48px 0; background: #0b1113; }
    .t-work__accent { display: none; }
    .t-work__title { margin: 0; font-size: 32px; line-height: 45px; color: #eae3d4; }
    .t-work__intro { margin-top: 12px; font-size: 16px; line-height: 22px; color: #b8c3be; }
    .t-cases { gap: 64.75px; margin-top: 32px; }
    .t-case + .t-case::before { top: -32.375px; height: 0.75px; background: #44463e; }
    .t-case + .t-case::after { display: none; }
    .t-case, .t-case--reverse { flex-direction: column; align-items: stretch; gap: 18px; }
    .t-case__art { flex: none; width: 100%; height: auto; aspect-ratio: 342 / 304.49; }
    .t-case__body { flex: none; width: 100%; gap: 18px; padding: 0; }
    .t-case__identity {
        display: grid;
        grid-template-columns: 44px 1fr;
        align-items: center;
        column-gap: 12px;
        row-gap: 18px;
        min-height: 0;
        padding: 0;
    }
    .t-case__index { position: static; width: 44px; height: 44px; border-radius: 5px; background: #141c1e; border: 0.75px solid #51534a; }
    .t-case__index b { font-size: 21px; line-height: 29px; color: #d9bd88; }
    .t-case__index small { display: none; }
    .t-case__name { min-height: 0; font-size: 27px; line-height: 38px; color: #eae3d4; }
    .t-case__name--sm { font-size: 24px; line-height: 34px; }
    .t-case__meta { grid-column: 1 / -1; font-weight: 600; font-size: 12px; line-height: 17px; letter-spacing: 0; color: #c5a66b; }
    .t-case__row { flex-direction: column; gap: 5px; min-height: 0; padding: 0; border: 0; }
    .t-case__row::before { content: ""; height: 0.75px; background: #44463e; }
    .t-case__label { flex: none; font-weight: 600; font-size: 13px; line-height: 18px; color: #9eafa8; }
    .t-case__text { max-width: none; font-size: 16px; line-height: 22px; color: #eae3d4; }
    .t-case__row--result { gap: 6px; min-height: 0; padding: 14px; border: 0.75px solid #51534a; border-radius: 5px; background: #141c1e; }
    .t-case__row--result::before { display: none; }
    .t-case__row--result .t-case__label { color: #a6b6ad; }
    .t-case__results { flex-direction: column; gap: 6px; max-width: none; }
    .t-case__result, .t-case__result--wide { flex: none; gap: 0; }
    .t-case__result b, .t-case__result--wide b { min-height: 0; font-size: 22px; line-height: 31px; color: #d9bd88; }
    .t-case__result small { font-size: 13px; line-height: 18px; color: #acb9b2; }
    .t-case__foot { flex-wrap: nowrap; min-height: 0; }
    .t-case__more { display: none; }
    .t-chip {
        /* Figma chips are fixed-width (text box 60.48px), so long labels wrap ("React Native"). */
        width: 82.2px;
        white-space: normal;
        padding: 5.6px 10.08px;
        border-width: 0.784px;
        border-radius: 4.48px;
        font-size: 13.8px;
        line-height: 18.816px;
        text-align: center;
    }
    .t-case__cta {
        display: flex;
        justify-content: space-between;
        height: 52px;
        padding: 0 18px;
        border: 0;
        border-radius: 5px;
        background: linear-gradient(to bottom, #edd7a8, #b28c54);
        color: #131a19;
        font-size: 16px;
        line-height: 22px;
    }
    .t-case__cta img { width: 20px; height: 20px; }

    /* 05 · Experience & strengths (664:386) */
    .t-career { padding: 48px 0; background: #11181a; }
    .t-career .t-container { padding-left: var(--t-gutter); padding-right: var(--t-gutter); }
    .t-career__title { margin: 0; font-size: 32px; line-height: 45px; color: #eae3d4; }
    .t-career__intro { margin: 12px 0 0; font-size: 16px; line-height: 22px; color: #bcc5bf; }
    .t-career__grid { flex-direction: column; gap: 28px; margin-top: 28px; }
    .t-career__col--main, .t-career__col--side { flex: none; }
    .t-colhead, .t-career__col--main .t-colhead { height: auto; margin: 0 0 28px; padding: 0; }
    .t-colhead__idx { display: none; }
    .t-colhead__label { font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0; color: #d9bd88; }

    .t-timeline { display: flex; flex-direction: column; gap: 16px; }
    .t-timeline::before, .t-role__dot, .t-role__rule { display: none; }
    .t-role, .t-role--featured {
        flex-direction: column;
        gap: 9px;
        min-height: 0;
        padding: 20px;
        border: 0.75px solid #51534a;
        border-radius: 5px;
        background: #141c1e;
    }
    .t-role__date {
        flex: none;
        width: auto;
        height: auto;
        justify-content: flex-start;
        gap: 8px;
        border: 0;
        border-radius: 0;
        background: none;
        font-weight: 600;
        font-size: 13px;
        line-height: 18px;
        color: #c5ac7a;
    }
    .t-role__date::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #e5c38b; }
    .t-role__body, .t-role--featured .t-role__body { flex: none; gap: 9px; background: none; }
    .t-role__company { font-size: 23px; line-height: 32px; color: #eae3d4; }
    .t-role__title { font-size: 15px; line-height: 21px; color: #e0c18d; }
    .t-role__desc { font-size: 16px; line-height: 22px; color: #b8c4bd; }

    .t-skills { display: flex; flex-direction: column; gap: 16px; margin: 0; }
    .t-skill {
        display: grid;
        grid-template-columns: 48px 1fr;
        align-items: center;
        gap: 0 12px;
        min-height: 0;
        padding: 18px;
        border: 0.75px solid #51534a;
        border-radius: 5px;
        background: #141c1e;
        box-shadow: none;
    }
    .t-skill:not(.t-skill--wide) > div:not(.t-skill__icon) { display: contents; }
    .t-skill__icon {
        grid-column: 1;
        grid-row: 1 / 3;
        flex: none;
        width: 48px;
        height: 48px;
        border: 0.468px solid rgba(234, 212, 172, 0.95);
        border-radius: 6.439px;
    }
    .t-skill__icon img { width: 28.098px; height: 28.098px; }
    .t-skill__name { grid-column: 2; font-size: 23px; line-height: 32px; color: #eae3d4; }
    .t-skill__desc, .t-skill--wide .t-skill__desc { grid-column: 2; margin-top: 4px; font-size: 15px; line-height: 21px; color: #acbcb2; }
    .t-skill__stack { grid-column: 1 / -1; margin-top: 16px; font-size: 15px; line-height: 21px; color: #d1c095; }
    .t-skill--wide { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
    .t-skill--wide .t-skill__head { gap: 12px; align-items: center; }
    .t-skill--wide .t-skill__name { line-height: 32px; }
    .t-skill__cols { flex-direction: row; gap: 16px; padding-top: 16px; border-top: 0.75px solid #44463e; }
    .t-skill__cols > div { flex: 1 1 0; gap: 6px; }
    .t-skill__cols b { font-size: 14px; line-height: 20px; color: #d9bd88; }
    .t-skill__cols p { font-size: 15px; line-height: 21px; color: #eae3d4; }

    /* 06 · Education & distinction (664:550) */
    .t-edu { padding: 48px 0; background: #0b1113; }
    .t-edu .t-container { padding-left: var(--t-gutter); padding-right: var(--t-gutter); }
    .t-edu__title { margin: 0; font-size: 32px; line-height: 45px; color: #eae3d4; }
    .t-edu__rule { width: 72px; height: 0.75px; margin: 16px 0 0; background: #44463e; }
    .t-edu__grid { flex-direction: column; gap: 28px; margin-top: 28px; }
    .t-edu__col { flex: none; flex-direction: column; gap: 28px; }
    .t-edu__col > * { flex: none; }
    .t-school > .t-fill, .t-award > .t-fill, .t-pubs > .t-fill { display: none; }
    .t-school, .t-school--funix {
        gap: 16px;
        min-height: 0;
        padding: 20px;
        border: 0.75px solid #51534a;
        border-radius: 5px;
        background: #141c1e;
    }
    .t-school__head { align-items: center; gap: 12px; }
    .t-tile--90 { width: 48px; height: 48px; }
    .t-tile--90 .t-ico { width: 29.76px !important; height: 29.76px !important; }
    .t-tile__label { top: 17.45px; width: 17.856px; font-size: 8.333px; line-height: 10.833px; }
    .t-school__info, .t-school--funix .t-school__info { gap: 7px; }
    .t-school__name, .t-school--funix .t-school__name { min-height: 0; font-size: 22px; line-height: 31px; color: #eae3d4; }
    .t-period { gap: 0; font-size: 14px; line-height: 20px; color: #c4b591; }
    .t-divider { height: 0.75px; background: #44463e; }
    .t-details, .t-school--funix .t-details { gap: 16px; }
    .t-detail, .t-detail--sm, .t-detail--xs { min-height: 0; gap: 0; font-size: 16px; line-height: 22px; color: #b8c4bd; }
    .t-period .t-ico, .t-detail .t-ico, .t-award__team .t-ico, .t-foresy__tech .t-ico, .t-pub .t-ico { display: none; }

    .t-award {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-height: 0;
        padding: 20px;
        border: 0.75px solid #51534a;
        border-radius: 5px;
        background: #141c1e;
    }
    .t-award__top, .t-award__main, .t-award__art, .t-foresy { display: contents; }
    .t-award__rank { align-items: center; gap: 12px; }
    .t-award__rank .t-ico { margin: 0; width: 46px !important; height: 46px !important; }
    .t-award__vr, .t-foresy .t-tile { display: none; }
    .t-award__title { font-size: 39px; line-height: 55px; color: #e2c28a; white-space: nowrap; }
    .t-award__event { margin: 0; font-size: 18px; line-height: 25px; color: #eae3d4; }
    .t-award__team { gap: 0; margin: 0; font-weight: 600; font-size: 16px; line-height: 22px; color: #bcbfb1; }
    .t-award__hr { width: auto; max-width: none; height: 0.75px; margin: 0; background: #44463e; }
    .t-award__art img { width: 100%; max-width: none; height: auto; aspect-ratio: 302 / 244; object-fit: contain; }
    .t-award__caption { margin: 0; text-align: left; font-size: 12px; line-height: 17px; color: #95a69a; }
    .t-foresy > div { display: flex; flex-direction: column; gap: 7px; }
    .t-foresy__name { font-size: 29px; line-height: 41px; color: #dec08c; }
    .t-foresy__purpose { margin: 0; font-size: 17px; line-height: 24px; color: #eae3d4; }
    .t-foresy__tech { gap: 0; margin: -9px 0 0; font-size: 15px; line-height: 21px; color: #b5c0b8; }
    .t-pubs { flex-direction: column; gap: 10px; max-width: none; min-height: 0; margin: 0; padding: 0; }
    .t-pub {
        flex: none;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        height: 62px;
        padding: 0 14px;
        border: 0.75px solid #51534a;
        border-radius: 5px;
        background: #141c1e;
    }
    .t-pub__name { min-height: 0; font-size: 19px; line-height: 27px; color: #eae3d4; }
    .t-pub__date { margin-top: 2px; font-size: 12px; line-height: 17px; color: #a5b4aa; }
    .t-pub__ext { flex: none; width: 20px; height: 20px; }

    /* 07 · Contact (664:655) */
    .t-contact { min-height: 0; background: #111819; }
    .t-contact__bg, .t-slab__bg, .t-slab__sep, .t-channel__vr { display: none; }
    .t-contact .t-container { display: flex; flex-direction: column; gap: 28px; padding: 48px var(--t-gutter); }
    .t-contact__title { color: #eae3d4; }
    .t-contact__line1 { font-size: 43px; line-height: 60px; }
    .t-contact__line2 { margin-top: 2px; font-size: 38px; line-height: 53px; }
    .t-contact__line2 em { display: block; color: #ddc18e; }
    .t-slab {
        height: 88px;
        min-height: 0;
        margin: 0;
        gap: 14px;
        padding: 0 14px 0 18px;
        border: 0.75px solid #ceb78a;
        border-radius: 5px;
        background: #141c1e;
    }
    .t-slab__mail { width: 28px; height: 28px; }
    .t-slab__label { font-size: 21px; line-height: 29px; color: #eae3d4; }
    .t-slab__go { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; border-radius: 20px; }
    .t-slab__go img { width: 20px; height: 20px; }
    .t-channels { flex-direction: column; gap: 18px; margin: 0; }
    .t-channel { flex: none; gap: 5px; min-height: 0; padding-bottom: 5px; border-bottom: 0.75px solid #44463e; }
    .t-channel__idx { min-height: 0; font-family: var(--f-sans); font-weight: 600; font-size: 12px; line-height: 17px; letter-spacing: 0; color: #c3b08b; }
    .t-channel__action { justify-content: space-between; height: 44px; font-size: 19px; line-height: 27px; color: #eae3d4; }
    .t-channel__action span { flex: 1 1 auto; }
    .t-channel__action img { width: 22px; height: 22px; }
    .t-contact__foot { flex-direction: column; align-items: flex-start; gap: 28px; margin: 0; }
    .t-status { gap: 10px; padding: 0; font-size: 15px; line-height: 21px; color: #eae3d4; }
    .t-status img { display: none; }
    .t-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5ad77a; }
    .t-contact__sig { width: 180px; height: 62.813px; }

    /* 08 · Footer (664:697) */
    .t-footer { padding: 32px var(--t-gutter) 24px; background: #0b1113; }
    .t-dock { gap: 24px; max-width: none; min-height: 0; padding: 0; }
    .t-dock__bg, .t-dock__divider, .t-dock__vr, .t-dock__contacts img { display: none; }
    .t-dock__row--main { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 24px; min-height: 0; }
    .t-dock__brand { width: auto; align-items: center; gap: 4px; }
    .t-dock__brand img { width: 150px; height: 52.344px; }
    .t-dock__brand span { font-size: 10px; line-height: 14px; letter-spacing: 2px; text-align: center; color: #abb7ae; }
    .t-dock__nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 8px; font-size: 16px; line-height: 22px; color: #eae3d4; }
    .t-dock__nav a { justify-content: center; height: 44px; }
    .t-dock__nav .t-dock__nav-extra { display: none; }
    .t-totop {
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: 0;
        width: auto;
        height: 52px;
        padding: 0 18px;
        border: 0.75px solid #51534a;
        border-radius: 5px;
        background: #141c1e;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #eae3d4;
    }
    .t-totop__circle { width: 22px; height: 22px; border: 0; border-radius: 0; background: none; }
    .t-totop__circle img { width: 22px; height: 22px; }
    .t-dock__row--util {
        display: grid;
        grid-template-columns: 135px 88px;
        justify-content: center;
        align-items: start;
        column-gap: 24px;
        row-gap: 10px;
        min-height: 0;
        padding-top: 24px;
        border-top: 0.75px solid #44463e;
        font-size: 15px;
        line-height: 21px;
        text-align: center;
        color: #eae3d4;
    }
    .t-dock__contacts { display: contents; }
    .t-dock__row--util a { align-items: flex-start; }
    .t-dock__contacts .t-dock__mail { grid-column: 1 / -1; grid-row: 1; width: auto; justify-content: center; }
    .t-dock__site { display: block; grid-column: 1; grid-row: 2; width: auto; height: 44px; text-align: center; }
    .t-dock__contacts a:not(.t-dock__mail) { grid-column: 2; grid-row: 2; height: 44px; justify-content: flex-start; }
    .t-dock__copy { grid-column: 1 / -1; grid-row: 3; width: auto; font-size: 13px; line-height: 18px; color: #8d9d92; }
}

@media (prefers-reduced-motion: reduce) {
    html.scroll-smooth { scroll-behavior: auto; }
    .t-body * { transition: none !important; }
}