/* Cormorant Garamond - normal 300 */
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap;
      src: url(fonts/CG-300-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap;
      src: url(fonts/CG-300-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap;
      src: url(fonts/CG-300-vietnamese.woff2) 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; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap;
      src: url(fonts/CG-300-latin-ext.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap;
      src: url(fonts/CG-300-latin.woff2) 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; }

    /* Cormorant Garamond - normal 400 */
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
      src: url(fonts/CG-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
      src: url(fonts/CG-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
      src: url(fonts/CG-400-vietnamese.woff2) 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; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
      src: url(fonts/CG-400-latin-ext.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
      src: url(fonts/CG-400-latin.woff2) 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; }

    /* Cormorant Garamond - normal 600 */
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
      src: url(fonts/CG-600-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
      src: url(fonts/CG-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
      src: url(fonts/CG-600-vietnamese.woff2) 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; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
      src: url(fonts/CG-600-latin-ext.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
      src: url(fonts/CG-600-latin.woff2) 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; }

    /* Cormorant Garamond - italic 300 */
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap;
      src: url(fonts/CG-italic-300-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap;
      src: url(fonts/CG-italic-300-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap;
      src: url(fonts/CG-italic-300-vietnamese.woff2) 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; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap;
      src: url(fonts/CG-italic-300-latin-ext.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap;
      src: url(fonts/CG-italic-300-latin.woff2) 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; }

    /* Cormorant Garamond - italic 400 */
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
      src: url(fonts/CG-italic-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
      src: url(fonts/CG-italic-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
      src: url(fonts/CG-italic-400-vietnamese.woff2) 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; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
      src: url(fonts/CG-italic-400-latin-ext.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
      src: url(fonts/CG-italic-400-latin.woff2) 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; }

    /* DM Sans - normal 300 */
    @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap;
      src: url(fonts/DMS-300-latin-ext.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap;
      src: url(fonts/DMS-300-latin.woff2) 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; }

    /* DM Sans - normal 400 */
    @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
      src: url(fonts/DMS-400-latin-ext.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
      src: url(fonts/DMS-400-latin.woff2) 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; }

    /* DM Sans - normal 500 */
    @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap;
      src: url(fonts/DMS-500-latin-ext.woff2) 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap;
      src: url(fonts/DMS-500-latin.woff2) 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; }

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

    :root {
      --gold: #c9a84c;
      --gold-dim: #8a6e2a;
      --teal: #2d4a52;
      --teal-mid: #3a5f6a;
      --teal-light: #4d7a88;
      --t: 0.25s ease;

      --tx-xs:  clamp(11px, 0.85vw, 14px);
      --tx-sm:  clamp(13px, 1vw,   16px);
      --tx-md:  clamp(15px, 1.1vw, 18px);
      --tx-lg:  clamp(18px, 1.4vw, 22px);
      --tx-xl:  clamp(22px, 1.8vw, 28px);
      --tx-2xl: clamp(28px, 2.5vw, 40px);
      --tx-3xl: clamp(40px, 4vw,   64px);

      --sp-xs: clamp(8px,  0.8vw, 14px);
      --sp-sm: clamp(14px, 1.2vw, 20px);
      --sp-md: clamp(22px, 2vw,   36px);
      --sp-lg: clamp(36px, 4vw,   64px);
      --sp-xl: clamp(56px, 6vw,   96px);

      --nav-h:  clamp(60px, 5.5vw, 88px);
      --logo-h: clamp(52px, 4.2vw, 72px);
      --max-w:  1320px;
    }

    [data-theme="dark"] {
      --bg:         #0d1a1f;
      --bg-s:       #1a2e35;
      --bg-r:       #254048;
      --bg-teal:    #2d4a52;
      --bd:         rgba(255,255,255,0.1);
      --bd-gold:    rgba(201,168,76,0.28);
      --t1:         #eae8e0;
      --t2:         rgba(234,232,224,0.75);
      --t3:         rgba(234,232,224,0.45);
      --nav-bg:     rgba(13,26,31,0.95);
    }

    [data-theme="light"] {
      --bg:         #f4efE4;
      --bg-s:       #ddd6c4;
      --bg-r:       #cec6b2;
      --bg-teal:    #2d4a52;
      --bd:         rgba(45,74,82,0.15);
      --bd-gold:    rgba(138,110,42,0.32);
      --t1:         #111315;
      --t2:         rgba(17,19,21,0.72);
      --t3:         rgba(17,19,21,0.52);
      --nav-bg:     rgba(240,235,224,0.93);
      --gold:       #7a5e1e;
      --gold-dim:   #5a4415;
      --gold-btn:   #c9a84c;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      font-size: var(--tx-md);
      line-height: 1.75;
      background: var(--bg);
      color: var(--t1);
      transition: background var(--t), color var(--t);
      overflow-x: hidden;
    }

    /* NAV */
    nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 200;
      height: var(--nav-h);
      background: var(--nav-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--bd);
      transition: background var(--t);
    }

    .nav-in {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--sp-md);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-md);
    }

    .nav-logo { flex-shrink: 0; cursor: pointer; display: flex; align-items: center; color: #eae8e0; }
    [data-theme="light"] .nav-logo { color: #1a2e35; }
    .nav-logo img { height: var(--logo-h); width: auto; display: block; }








    .nav-links {
      display: flex;
      align-items: center;
      gap: clamp(16px, 2vw, 36px);
      list-style: none;
    }

    .nav-links a {
      font-size: var(--tx-xs);
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--t2);
      text-decoration: none;
      transition: color var(--t);
    }
    .nav-links a:hover { color: var(--gold); }

    .nav-r { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 20px); flex-shrink: 0; }

    .btn-theme {
      background: none;
      border: 1px solid var(--bd);
      color: var(--t3);
      width: clamp(30px, 2.4vw, 40px);
      height: clamp(30px, 2.4vw, 40px);
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: var(--tx-sm);
      transition: all var(--t);
    }
    .btn-theme:hover { border-color: var(--gold-dim); color: var(--gold); }

    .btn-nav {
      font-size: var(--tx-xs);
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      text-decoration: none;
      border: 1px solid var(--gold-dim);
      padding: clamp(6px,0.6vw,10px) clamp(14px,1.4vw,22px);
      transition: all var(--t);
      white-space: nowrap;
    }
    .btn-nav:hover { background: var(--gold-btn, var(--gold)); color: #111; border-color: var(--gold-btn, var(--gold)); }

    .btn-mob { display: none; background: none; border: none; color: var(--t2); font-size: var(--tx-xl); cursor: pointer; padding: 4px; line-height: 1; }

    @media (max-width: 680px) {
      .nav-links { display: none; }
      .nav-links.open {
        display: flex; flex-direction: column;
        position: fixed; top: var(--nav-h); left: 0; right: 0;
        background: var(--nav-bg); backdrop-filter: blur(16px);
        padding: var(--sp-md); gap: var(--sp-md);
        border-bottom: 1px solid var(--bd); z-index: 199;
      }
      .btn-nav { display: none; }
      .btn-mob { display: block; }
    }

    /* PAGES */
    .page { display: none; padding-top: var(--nav-h); }
    .page.active { display: block; }

    /* LAYOUT */
    .wrap { max-width: var(--max-w); margin: 0 auto; padding-left: var(--sp-md); padding-right: var(--sp-md); }

    .eyebrow {
      font-size: var(--tx-xs);
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: clamp(10px,1vw,16px);
    }

    .display {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      line-height: 1.1;
      color: var(--t1);
    }

    .lead {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      line-height: 1.55;
      color: var(--t2);
    }

    hr.rule { border: none; border-top: 1px solid var(--bd); margin: 0; }

    /* BUTTONS */
    .btn-p { background: var(--gold-btn, var(--gold));
      display: inline-block;
      font-size: var(--tx-xs); font-weight: 400;
      letter-spacing: 0.14em; text-transform: uppercase;
      background: var(--gold); color: #111;
      border: none; padding: clamp(10px,1vw,16px) clamp(22px,2.2vw,36px);
      cursor: pointer; text-decoration: none;
      transition: opacity var(--t), transform var(--t);
    }
    .btn-p:hover { opacity: 0.82; transform: translateY(-1px); }

    .btn-g {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: var(--tx-xs); font-weight: 400;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--t2); text-decoration: none;
      transition: color var(--t);
    }
    .btn-g:hover { color: var(--gold); }
    .btn-g::after { content: '→'; transition: transform var(--t); }
    .btn-g:hover::after { transform: translateX(5px); }

    /* HOME HERO */
    .hero {
      min-height: calc(100vh - var(--nav-h));
      display: flex; align-items: center;
      padding: var(--sp-xl) 0;
    }

    .hero-in {
      max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-md);
      display: grid; grid-template-columns: 1fr 1fr;
      gap: var(--sp-lg); align-items: center;
    }
    @media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; } }

    .hero h1 { font-size: var(--tx-3xl); margin-bottom: clamp(12px,1.2vw,20px); }
    .hero h1 .accent { color: var(--gold); }
    .hero .lead { font-size: var(--tx-lg); margin-bottom: clamp(14px,1.4vw,24px); }
    .hero-tag { font-size: var(--tx-sm); color: var(--t2); margin-bottom: var(--sp-md); max-width: 480px; }
    .hero-acts { display: flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap; }

    .hero-panel {
      background: var(--bg-teal);
      padding: var(--sp-lg);
      display: flex; flex-direction: column; gap: var(--sp-md);
    }

    .panel-hd {
      font-size: var(--tx-xs); font-weight: 400;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(236,234,227,0.55);
      border-bottom: 1px solid rgba(77,122,136,0.3);
      padding-bottom: clamp(10px,1vw,16px);
      margin-bottom: clamp(4px,0.4vw,8px);
    }
    [data-theme="light"] .panel-hd { color: rgba(236,234,227,0.55); }

    .panel-item { display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: opacity var(--t); }
    .panel-item:hover { opacity: 0.72; }
    .panel-num { font-size: var(--tx-xs); color: var(--gold); letter-spacing: 0.1em; }
    .panel-name { font-size: var(--tx-sm); font-weight: 400; color: #eae8e0; }
    .panel-desc { font-size: var(--tx-xs); color: rgba(234,232,224,0.5); line-height: 1.55; }

    /* WORK STRIP */
    .work-strip { background: var(--bg-s); padding: var(--sp-xl) 0; }
    .strip-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-md); gap: var(--sp-md); flex-wrap: wrap; }
    .strip-hd h2 { font-size: var(--tx-2xl); }

    .proj-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--bd); }
    @media (max-width: 780px) { .proj-row { grid-template-columns: 1fr; } }

    .proj-card {
      background: var(--bg-s); padding: var(--sp-md);
      cursor: pointer; transition: background var(--t);
      position: relative;
    }
    .proj-card:hover { background: var(--bg-r); }
    .proj-card::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0;
      height: 2px; background: var(--gold);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.35s ease;
    }
    .proj-card:hover::after { transform: scaleX(1); }

    .proj-cat { font-size: var(--tx-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: clamp(8px,0.8vw,14px); }
    .proj-t { font-family: 'Cormorant Garamond', serif; font-size: var(--tx-xl); font-weight: 400; color: var(--t1); margin-bottom: clamp(8px,0.8vw,14px); line-height: 1.25; }
    .proj-d { font-size: var(--tx-sm); color: var(--t2); line-height: 1.7; }
    .proj-lnk { display: inline-block; margin-top: clamp(12px,1.2vw,20px); font-size: var(--tx-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); transition: color var(--t); }
    .proj-card:hover .proj-lnk { color: var(--gold); }

    /* ABOUT STRIP */
    .about-strip { padding: var(--sp-xl) 0; }
    .about-strip-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: center; }
    @media (max-width: 780px) { .about-strip-in { grid-template-columns: 1fr; } }

    .about-q {
      font-size: var(--tx-xl);
      border-left: 2px solid var(--gold);
      padding-left: var(--sp-md);
      color: var(--t1);
    }
    .about-cta-bl { display: flex; flex-direction: column; gap: var(--sp-sm); }
    .about-cta-bl p { font-size: var(--tx-sm); color: var(--t2); max-width: 400px; }

    /* FOOTER */
    footer { border-top: 1px solid var(--bd); padding: var(--sp-md) 0; }
    .foot-in { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-md); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
    .foot-copy { font-size: var(--tx-xs); color: var(--t3); letter-spacing: 0.05em; }
    .foot-copy strong { color: var(--gold); font-weight: 400; }

    /* PAGE HERO */
    .pg-hero { padding: var(--sp-xl) 0 var(--sp-lg); }
    .pg-title { font-size: var(--tx-3xl); margin-bottom: clamp(12px,1.2vw,20px); }
    .pg-intro { font-size: var(--tx-lg); max-width: 640px; }

    /* SERVICES */
    .svcs-body { padding-bottom: var(--sp-xl); }

    .svc-row {
      border-top: 1px solid var(--bd);
      padding: var(--sp-lg) 0;
      display: grid;
      grid-template-columns: clamp(200px,22%,300px) 1fr;
      gap: var(--sp-lg);
    }
    .svc-row:last-child { border-bottom: 1px solid var(--bd); }
    @media (max-width: 780px) { .svc-row { grid-template-columns: 1fr; gap: var(--sp-md); } }

    .svc-num { font-size: var(--tx-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: clamp(6px,0.6vw,10px); }
    .svc-name { font-family: 'Cormorant Garamond', serif; font-size: var(--tx-xl); font-weight: 400; line-height: 1.25; color: var(--t1); }

    .svc-body p { font-size: var(--tx-md); color: var(--t2); margin-bottom: clamp(10px,1vw,18px); line-height: 1.8; }
    .svc-body p:first-child { color: var(--t1); }
    .svc-body strong { color: var(--t1); font-weight: 400; }

    .tags { display: flex; flex-wrap: wrap; gap: clamp(4px,0.4vw,8px); margin-top: clamp(12px,1.2vw,20px); }
    .tag { font-size: var(--tx-xs); letter-spacing: 0.06em; color: var(--t3); border: 1px solid var(--bd); padding: clamp(3px,0.3vw,5px) clamp(8px,0.8vw,14px); transition: all var(--t); }
    .tag:hover { border-color: var(--gold-dim); color: var(--gold); }

    /* WORK */
    .wk-groups { padding-bottom: var(--sp-xl); }
    .wk-group { margin-bottom: var(--sp-lg); }
    .grp-lbl { font-size: var(--tx-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); padding-bottom: clamp(10px,1vw,16px); border-bottom: 1px solid var(--bd); margin-bottom: 0; }

    .wk-item {
      display: grid;
      grid-template-columns: clamp(200px,24%,320px) 1fr;
      gap: var(--sp-lg);
      padding: var(--sp-md) 0;
      border-bottom: 1px solid var(--bd);
    }
    @media (max-width: 680px) { .wk-item { grid-template-columns: 1fr; gap: var(--sp-sm); } }

    .wk-name { font-family: 'Cormorant Garamond', serif; font-size: var(--tx-lg); font-weight: 400; color: var(--t1); line-height: 1.3; }
    .wk-type { font-size: var(--tx-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); margin-top: clamp(4px,0.4vw,6px); }
    .wk-desc { font-size: var(--tx-sm); color: var(--t2); line-height: 1.8; }
    .tech-l { display: flex; flex-wrap: wrap; gap: clamp(4px,0.4vw,6px); margin-top: clamp(10px,1vw,16px); }
    .tech { font-size: var(--tx-xs); color: var(--t3); background: var(--bg-r); padding: clamp(2px,0.2vw,4px) clamp(6px,0.6vw,10px); }

    /* ABOUT */
    .abt-pg { padding: var(--sp-xl) 0; }
    .abt-grid { display: grid; grid-template-columns: 1fr clamp(220px,28%,360px); gap: var(--sp-xl); align-items: start; }
    @media (max-width: 780px) { .abt-grid { grid-template-columns: 1fr; } }

    .abt-lead { font-size: var(--tx-lg); margin-bottom: var(--sp-md); }
    .abt-body { font-size: var(--tx-md); color: var(--t2); line-height: 1.85; margin-bottom: clamp(10px,1vw,18px); }

    .sidebar-card { background: var(--bg-teal); padding: var(--sp-md); }
    .sb-sec { margin-bottom: var(--sp-md); }
    .sb-sec:last-child { margin-bottom: 0; }
    .sb-hd { font-size: var(--tx-xs); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(201,168,76,0.8); margin-bottom: clamp(8px,0.8vw,14px); padding-bottom: clamp(6px,0.6vw,10px); border-bottom: 1px solid rgba(255,255,255,0.08); }
    .sb-list { list-style: none; display: flex; flex-direction: column; gap: clamp(6px,0.6vw,10px); }
    .sb-list li { font-size: var(--tx-sm); color: rgba(234,232,224,0.65); }

    /* CONTACT */
    .ct-pg { padding: var(--sp-xl) 0; }
    .ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); align-items: start; }
    @media (max-width: 780px) { .ct-grid { grid-template-columns: 1fr; } }

    .ct-note { font-size: var(--tx-md); color: var(--t2); line-height: 1.8; max-width: 440px; margin-top: var(--sp-sm); }

    .form { display: flex; flex-direction: column; gap: var(--sp-sm); }
    .field { display: flex; flex-direction: column; gap: clamp(5px,0.5vw,8px); }
    .field label { font-size: var(--tx-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); }
    .field input, .field textarea {
      font-family: 'DM Sans', sans-serif; font-size: var(--tx-md); font-weight: 300;
      background: var(--bg-s); border: 1px solid var(--bd); color: var(--t1);
      padding: clamp(10px,1vw,16px) clamp(12px,1.2vw,18px);
      outline: none; width: 100%; transition: border-color var(--t);
      -webkit-appearance: none; border-radius: 0;
    }
    .field input:focus, .field textarea:focus { border-color: var(--gold); }
    .field input::placeholder, .field textarea::placeholder { color: var(--t3); }
    .field textarea { resize: vertical; min-height: clamp(100px,10vw,160px); }

    .form-sub { background: var(--gold-btn, var(--gold));
      font-family: 'DM Sans', sans-serif; font-size: var(--tx-xs); font-weight: 400;
      letter-spacing: 0.14em; text-transform: uppercase;
      background: var(--gold); color: #111; border: none;
      padding: clamp(12px,1.2vw,18px) clamp(24px,2.4vw,40px);
      cursor: pointer; align-self: flex-start; transition: opacity var(--t);
    }
    .form-sub:hover { opacity: 0.82; }

    [data-theme="light"] .hero-panel { --gold: #c9a84c; }
    [data-theme="light"] .btn-p,
    [data-theme="light"] .btn-p:hover { background: #c9a84c; }
    [data-theme="light"] .form-sub { background: #c9a84c; }
    [data-theme="light"] .btn-nav:hover { background: #c9a84c; border-color: #c9a84c; }



    /* Logo light mode */