/* ============================================================
   NOVO REALTY — Colors & Type Foundations
   ============================================================ */

/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/font-01.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;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/font-02.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;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/font-03.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;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/font-04.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;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/font-05.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;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/font-06.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-09.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-10.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-11.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-12.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;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-13.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-09.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-10.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-11.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-12.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;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-13.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-09.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-10.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-11.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-12.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;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/font-13.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-09.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-10.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-11.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-12.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;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/font-13.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-14.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-15.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-16.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-17.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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-18.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/font-19.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-14.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-15.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-16.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-17.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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-18.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/font-19.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;
}


:root {
  /* ==========================================================
     COLORS — Brand
     "Pine, terracotta, ivory, slate" — Himachal-rooted warm editorial
     ========================================================== */

  /* Primary — Pine (deep forest, conveys rootedness, trust) */
  --pine-50:  #f1f4f1;
  --pine-100: #dde5dd;
  --pine-200: #b8c8b8;
  --pine-300: #8ea58e;
  --pine-400: #5e7d5e;
  --pine-500: #3d5a3d;
  --pine-600: #2d4630;  /* primary brand */
  --pine-700: #233628;
  --pine-800: #19261d;
  --pine-900: #0f1812;

  /* Accent — Terracotta (warmth, home, hearth) */
  --terra-50:  #fbf3ee;
  --terra-100: #f4ddcd;
  --terra-200: #e9b99a;
  --terra-300: #dc9468;
  --terra-400: #cc7544;
  --terra-500: #b85d2f;  /* accent */
  --terra-600: #9a4825;
  --terra-700: #783820;
  --terra-800: #582a18;
  --terra-900: #3a1c10;

  /* Neutral — Ivory & Stone (warm grays, paper-feel) */
  --ivory-50:  #fbfaf6;  /* page bg */
  --ivory-100: #f5f2ea;  /* card bg */
  --ivory-200: #ebe6d8;  /* subtle divider */
  --stone-300: #d4cdb9;
  --stone-400: #a8a08c;
  --stone-500: #7d7665;
  --stone-600: #5a544a;
  --stone-700: #3d3933;
  --stone-800: #26241f;
  --stone-900: #14130f;

  /* Semantic */
  --success: #5e7d5e;
  --warning: #c89455;
  --danger:  #a8412e;
  --info:    #4a6b7a;

  /* ==========================================================
     SEMANTIC COLOR VARS — use these in components
     ========================================================== */
  --bg-page:      var(--ivory-50);
  --bg-card:      #ffffff;
  --bg-subtle:    var(--ivory-100);
  --bg-muted:     var(--ivory-200);
  --bg-inverse:   var(--pine-800);

  --fg-1:         var(--stone-900);   /* primary text */
  --fg-2:         var(--stone-700);   /* body / secondary */
  --fg-3:         var(--stone-500);   /* meta / tertiary */
  --fg-4:         var(--stone-400);   /* placeholder */
  --fg-on-dark:   var(--ivory-50);
  --fg-on-accent: #ffffff;

  --border-1:     var(--ivory-200);
  --border-2:     var(--stone-300);
  --border-strong:var(--stone-700);

  --brand-primary: var(--pine-600);
  --brand-accent:  var(--terra-500);
  --link:          var(--pine-600);

  /* ==========================================================
     TYPOGRAPHY
     Display: Fraunces (variable, opsz, soft contrast serif)
     UI/Body: Inter Tight
     Mono:    JetBrains Mono
     Hindi/Punjabi: system fallback (Noto Serif Devanagari to be added if uploaded)
     ========================================================== */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — editorial-feeling, dense UI compatible */
  --fs-display-xl: clamp(56px, 7vw, 96px);
  --fs-display-l:  clamp(44px, 5vw, 72px);
  --fs-display:    clamp(36px, 4vw, 56px);
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-l: 17px;
  --fs-body:   15px;
  --fs-small:  13px;
  --fs-micro:  11px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-base:    0;
  --tracking-wide:    0.06em;
  --tracking-caps:    0.14em;

  /* ==========================================================
     SPACING (4px grid, dense)
     ========================================================== */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ==========================================================
     RADII — slight, paper-like. No big pills except for tags.
     ========================================================== */
  --r-0:    0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ==========================================================
     SHADOWS — soft, warm, low-elevation. Editorial not flashy.
     ========================================================== */
  --shadow-xs: 0 1px 2px rgba(38, 36, 31, 0.04);
  --shadow-sm: 0 1px 3px rgba(38, 36, 31, 0.06), 0 1px 2px rgba(38, 36, 31, 0.04);
  --shadow-md: 0 4px 12px rgba(38, 36, 31, 0.08), 0 1px 3px rgba(38, 36, 31, 0.04);
  --shadow-lg: 0 12px 32px rgba(38, 36, 31, 0.10), 0 2px 6px rgba(38, 36, 31, 0.05);
  --shadow-xl: 0 24px 56px rgba(38, 36, 31, 0.14), 0 4px 12px rgba(38, 36, 31, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(38, 36, 31, 0.06);

  /* ==========================================================
     MOTION
     ========================================================== */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.t-display-xl { font-family: var(--font-display); font-weight: 350; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 144, "SOFT" 30; }
.t-display    { font-family: var(--font-display); font-weight: 350; font-size: var(--fs-display);    line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 144, "SOFT" 30; }
.t-display-italic { font-family: var(--font-display); font-style: italic; font-weight: 350; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }

.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h3 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h4 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--fg-1); }

.t-body-l { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--fg-2); }
.t-body   { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body);   line-height: var(--lh-base);  color: var(--fg-2); }
.t-small  { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-small);  line-height: var(--lh-base);  color: var(--fg-3); }
.t-micro  { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-micro);  line-height: 1.4;             color: var(--fg-3); }

.t-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 11px; line-height: 1.2; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.t-quote   { font-family: var(--font-display); font-style: italic; font-weight: 350; font-size: 28px; line-height: 1.35; color: var(--fg-1); }
.t-mono    { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); }

/* Inline accent: italic display word inside sans body — signature flourish */
.accent-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body { background: var(--bg-page); color: var(--fg-1); }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }

  /* ====== HEADER ====== */
  .header { position: sticky; top: 0; z-index: 50; background: rgba(251,250,246,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-1); }
  .nav { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; }
  .nav-logo { height: 38px; }
  .nav-links { display: flex; gap: 32px; align-items: center; }
  .nav-links a { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--fg-1); position: relative; padding: 6px 0; }
  .nav-links a:hover { color: var(--terra-500); }
  .nav-cta { display: flex; gap: 8px; align-items: center; }
  .lang { font-family: var(--font-sans); font-size: 12px; color: var(--fg-3); padding: 6px 10px; border-radius: var(--r-md); cursor: pointer; }
  .lang:hover { background: var(--ivory-100); }
  .btn { font-family: var(--font-sans); font-weight: 500; font-size: 14px; padding: 10px 18px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all var(--dur-base) var(--ease-standard); letter-spacing: -0.005em; }
  .btn svg { width: 16px; height: 16px; stroke-width: 1.5; }
  .btn-primary { background: var(--pine-600); color: #fff; }
  .btn-primary:hover { background: var(--pine-700); }
  .btn-accent { background: var(--terra-500); color: #fff; }
  .btn-accent:hover { background: var(--terra-600); }
  .btn-secondary { background: transparent; color: var(--pine-700); border-color: var(--stone-300); }
  .btn-secondary:hover { background: var(--ivory-100); }
  .btn-ghost { background: transparent; color: var(--pine-700); }

  /* ====== HERO ====== */
  .hero { padding: 56px 32px 96px; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
  .hero .eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra-600); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 8px; }
  .hero .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--terra-500); }
  .hero h1 { font-family: var(--font-display); font-weight: 350; font-size: clamp(48px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 24px; font-variation-settings: "opsz" 144, "SOFT" 30; }
  .hero h1 em { color: var(--terra-500); font-style: italic; font-weight: 300; }
  .hero p.lead { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; color: var(--fg-2); max-width: 48ch; margin: 0 0 28px; }
  .hero-actions { display: flex; gap: 12px; align-items: center; }

  /* Search bar */
  .search { background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-xl); padding: 8px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0; box-shadow: var(--shadow-sm); margin-top: 36px; }
  .search-cell { padding: 10px 16px; border-right: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 2px; }
  .search-cell:nth-last-child(2) { border-right: none; }
  .search-cell label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; color: var(--fg-3); }
  .search-cell .v { font-family: var(--font-sans); font-size: 14px; color: var(--fg-1); }
  .search button { background: var(--terra-500); color: #fff; border: none; border-radius: var(--r-lg); padding: 0 22px; font-family: var(--font-sans); font-weight: 500; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
  .search button:hover { background: var(--terra-600); }
  .search button svg { width: 16px; height: 16px; }

  /* Hero image — Sparshika overlapping with property */
  .hero-visual { position: relative; aspect-ratio: 5/6; border-radius: var(--r-xl); overflow: hidden; }
  .hero-visual .property-bg {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(28,26,23,0) 30%, rgba(28,26,23,0.4) 100%),
      linear-gradient(160deg, #f4e9d7 0%, #d4a373 40%, #8b6f47 80%, #3d2e20 100%);
  }
  .hero-visual .founder-portrait {
    position: absolute; bottom: -2%; right: -4%; width: 62%; aspect-ratio: 4/5;
    background:
      linear-gradient(135deg, rgba(45,70,48,0.35), rgba(184,93,47,0.25)),
      radial-gradient(circle at 40% 35%, #d4a373, #8b6f47 60%, #3d3933);
    background-blend-mode: multiply;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 70%, transparent 100%);
  }
  .hero-visual .signature {
    position: absolute; top: 24px; left: 24px;
    font-family: var(--font-display); font-style: italic; font-size: 22px;
    color: var(--ivory-50); text-shadow: 0 2px 8px rgba(28,26,23,0.4);
    max-width: 220px; line-height: 1.2;
  }
  .hero-visual .quote-card {
    position: absolute; bottom: 24px; left: 24px; max-width: 240px;
    background: rgba(251,250,246,0.96); backdrop-filter: blur(8px);
    padding: 16px 18px; border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  }
  .hero-visual .quote-card .q { font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.35; color: var(--fg-1); margin: 0 0 8px; }
  .hero-visual .quote-card .who { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-3); text-transform: uppercase; }

  /* ====== STATS STRIP ====== */
  .strip { background: var(--ivory-100); border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); padding: 28px 32px; }
  .strip-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .stat { display: flex; flex-direction: column; gap: 4px; }
  .stat .num { font-family: var(--font-display); font-weight: 400; font-size: 36px; letter-spacing: -0.02em; color: var(--pine-700); }
  .stat .num em { font-style: italic; color: var(--terra-500); }
  .stat .label { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }

  /* ====== SECTIONS ====== */
  section { padding: 96px 32px; max-width: 1280px; margin: 0 auto; }
  .section-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra-600); margin-bottom: 16px; }
  .section-title { font-family: var(--font-display); font-weight: 350; font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; max-width: 22ch; }
  .section-title em { color: var(--terra-500); font-style: italic; }
  .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 32px; }
  .section-head p { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--fg-2); max-width: 44ch; margin: 0; }

  /* ====== LISTING GRID ====== */
  .listings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .property-card { background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); transition: all var(--dur-base) var(--ease-standard); cursor: pointer; }
  .property-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .property-card .img { aspect-ratio: 4/3; position: relative; overflow: hidden; }
  .property-card .img > .gradient { position: absolute; inset: 0; transition: transform 8s ease; }
  .property-card:hover .gradient { transform: scale(1.04); }
  .property-card .badge { position: absolute; top: 14px; left: 14px; background: rgba(251,250,246,0.94); backdrop-filter: blur(8px); padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine-800); z-index: 2; }
  .property-card .save { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(251,250,246,0.94); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 2; cursor: pointer; }
  .property-card .save svg { width: 16px; height: 16px; stroke: var(--terra-500); }
  .property-card .save.saved svg { fill: var(--terra-500); }
  .property-card .body { padding: 20px; }
  .property-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg-1); margin: 0 0 4px; }
  .property-card h3 em { font-style: italic; color: var(--terra-500); }
  .property-card .loc { font-family: var(--font-sans); font-size: 13px; color: var(--fg-3); margin: 0 0 14px; display: flex; align-items: center; gap: 4px; }
  .property-card .loc svg { width: 13px; height: 13px; }
  .property-card .meta { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border-1); }
  .property-card .meta-item { display: flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 13px; color: var(--fg-2); }
  .property-card .meta-item svg { width: 14px; height: 14px; stroke-width: 1.5; color: var(--fg-3); }
  .property-card .price { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--border-1); }
  .property-card .price .num { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--terra-500); letter-spacing: -0.01em; }
  .property-card .price .per { font-family: var(--font-sans); font-size: 11px; color: var(--fg-3); }

  .gradient.g1 { background: linear-gradient(160deg, #e9c598 0%, #b08560 50%, #6b4f35 100%); }
  .gradient.g2 { background: linear-gradient(160deg, #a8c0a3 0%, #5e7d5e 60%, #19261d 100%); }
  .gradient.g3 { background: linear-gradient(170deg, #d4a373 0%, #783820 100%); }
  .gradient.g4 { background: linear-gradient(180deg, #f4e9d7 0%, #d4c4a8 60%, #8a7a5e 100%); }
  .gradient.g5 { background: linear-gradient(180deg, #c8b894 0%, #5e7d5e 100%); }
  .gradient.g6 { background: linear-gradient(135deg, #b8956b 0%, #2d4630 100%); }

  /* ====== FOUNDER SECTION ====== */
  .founder-section { background: var(--pine-800); color: var(--ivory-50); padding: 96px 32px; }
  .founder-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
  .founder-img {
    aspect-ratio: 4/5; border-radius: var(--r-xl);
    background:
      linear-gradient(135deg, rgba(45,70,48,0.5), rgba(184,93,47,0.3)),
      radial-gradient(circle at 40% 35%, #d4a373, #6b4f35 60%, #1c1a17);
    background-blend-mode: multiply;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
  }
  .founder-img::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
    background: linear-gradient(180deg, transparent, rgba(15,24,18,0.5));
  }
  .founder-section .eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra-300); margin-bottom: 20px; }
  .founder-section h2 { font-family: var(--font-display); font-weight: 300; font-size: 56px; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 28px; }
  .founder-section h2 em { color: var(--terra-300); font-style: italic; }
  .founder-section p { font-family: var(--font-sans); font-size: 17px; line-height: 1.7; color: var(--stone-300); margin: 0 0 16px; max-width: 52ch; }
  .signature-line { font-family: var(--font-display); font-style: italic; font-size: 32px; color: var(--terra-300); margin-top: 28px; letter-spacing: -0.01em; }

  /* ====== HOW WE WORK ====== */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .step { background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg); padding: 28px; }
  .step .num { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 48px; color: var(--terra-400); line-height: 1; margin-bottom: 16px; letter-spacing: -0.02em; }
  .step h4 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; margin: 0 0 8px; color: var(--fg-1); }
  .step p { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--fg-2); margin: 0; }

  /* ====== FOOTER ====== */
  footer { background: var(--pine-900); color: var(--ivory-200); padding: 64px 32px 32px; }
  .footer-inner { max-width: 1280px; margin: 0 auto; }
  .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 64px; padding-bottom: 48px; border-bottom: 1px solid rgba(245,242,234,0.1); }
  .footer-grid h5 { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-400); margin: 0 0 16px; }
  .footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .footer-grid a { font-family: var(--font-sans); font-size: 14px; color: var(--ivory-200); }
  .footer-grid a:hover { color: var(--terra-300); }
  .footer-brand .pitch { font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.4; color: var(--ivory-200); margin: 16px 0; max-width: 36ch; }
  .footer-brand .addr { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; color: var(--stone-400); }
  .footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 12px; color: var(--stone-400); }

  /* ====== Floating CTA ====== */
  .float-cta { position: fixed; bottom: 24px; right: 24px; z-index: 60; background: var(--pine-700); color: #fff; padding: 12px 18px 12px 14px; border-radius: var(--r-pill); font-family: var(--font-sans); font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); cursor: pointer; transition: transform var(--dur-base); }
  .float-cta:hover { background: var(--pine-800); transform: translateY(-2px); }
  .float-cta .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--terra-300), var(--terra-500)); }
  .float-cta .pulse { width: 8px; height: 8px; background: var(--terra-300); border-radius: 50%; animation: pulse 2s infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }


  /* ============================================================
     Responsive — phone breakpoints (added in mobile pass)
     ============================================================ */

  /* Hamburger toggle: hidden on desktop, shown in the mobile breakpoint */
  .nav-toggle { display: none; }

  /* Tablet: drop a column off the densest grids before things crush */
  @media (max-width: 1024px) {
    .listings { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    section { padding: 80px 24px; }
    .strip { padding: 24px 24px; }
    .founder-section { padding: 80px 24px; }
  }

  @media (max-width: 900px) {
    /* Header: hide CTA chunk on mobile (the floating CTA is always
       visible). Show hamburger; nav-links becomes a drawer. */
    .nav { padding: 14px 20px; gap: 12px; position: relative; }
    .nav-logo { height: 28px; }
    .nav-cta { display: none; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--border-1); border-radius: var(--r-md); color: var(--fg-1); cursor: pointer; padding: 0; }
    .nav-toggle:hover { background: var(--ivory-100); }
    .nav-toggle .icon-close { display: none; }
    .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
    .nav-toggle[aria-expanded="true"] .icon-close { display: inline-flex; }

    .nav-links {
      position: absolute;
      top: 100%; left: 0; right: 0;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--ivory-50);
      border-bottom: 1px solid var(--border-1);
      padding: 8px 0;
      box-shadow: var(--shadow-md);
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 14px 24px; font-size: 16px; border-bottom: 1px solid var(--ivory-200); }
    .nav-links a:last-child { border-bottom: none; }
    .nav-links a[aria-current="page"] { color: var(--terra-500); font-weight: 600; }

    /* Tap target: bump btn vertical padding to clear 44px on phone */
    .btn { padding: 12px 18px; }

    /* Hero: stack text over visual, photo first to anchor the page */
    .hero { grid-template-columns: 1fr; gap: 40px; padding: 32px 20px 64px; }
    .hero-visual { order: -1; max-height: 65vh; }
    .hero-actions { flex-wrap: wrap; gap: 8px; }
    .hero-actions .btn { flex: 1 1 auto; justify-content: center; }

    /* Stats strip: 2x2 instead of 4 across */
    .strip { padding: 28px 20px; }
    .strip-inner { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .stat .num { font-size: 30px; }

    /* Section padding shrinks; titles cap at a sane size */
    section { padding: 56px 20px; }
    .section-head { padding: 0 0 24px; flex-direction: column; gap: 8px; align-items: flex-start; }
    .section-title { font-size: 36px; max-width: 100%; }

    /* Listings: single column on phone */
    .listings { grid-template-columns: 1fr; gap: 16px; }

    /* From Sparshika: stack image above text, image full width */
    .founder-section { padding: 56px 20px; }
    .founder-inner { grid-template-columns: 1fr; gap: 32px; }
    .founder-img { aspect-ratio: 4/5; max-height: 70vh; }
    .founder-section h2 { font-size: 36px; line-height: 1.1; }
    .founder-section p { font-size: 16px; }
    .signature-line { font-size: 26px; }

    /* How we work: stack steps */
    .steps { grid-template-columns: 1fr; gap: 24px; }
    .step .num { font-size: 36px; margin-bottom: 8px; }

    /* Footer: 2x2 grid, then full prose stacks */
    footer { padding: 48px 20px 24px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 32px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }

    /* Floating CTA: lower so it doesn't sit on body text. Keep tap target ≥44px */
    .float-cta { bottom: 16px; right: 16px; font-size: 13px; gap: 8px; }
  }

  @media (max-width: 480px) {
    /* Tighter still on small phones (iPhone SE / mini) */
    .hero h1 { font-size: 40px; }
    .section-title { font-size: 30px; }
    .founder-section h2 { font-size: 30px; }
    .property-card h3 { font-size: 20px; }
    /* Single-column footer on very narrow screens */
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-brand { grid-column: auto; }
    /* Floating CTA shrinks to a compact pill */
    .float-cta { padding: 10px 14px 10px 12px; }
    .float-cta .avatar { width: 24px; height: 24px; }
  }