/* Self-hosted Google Fonts — generated by R5 self-host script.
 * Source: https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=JetBrains+Mono:wght@400;500&display=swap
 * Privacy: no DNS to fonts.googleapis.com / fonts.gstatic.com (LG München 2022 compliance).
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-400-normal-23720f.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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-400-normal-20bddc.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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-400-normal-2a392e.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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-500-normal-23720f.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-500-normal-20bddc.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-500-normal-2a392e.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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-600-normal-23720f.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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-600-normal-20bddc.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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-600-normal-2a392e.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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-700-normal-23720f.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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-700-normal-20bddc.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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/archivo-700-normal-2a392e.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;
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivoblack-400-normal-871aed.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: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivoblack-400-normal-1536a2.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fraunces-400-italic-daaf62.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: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fraunces-400-italic-a435d1.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: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fraunces-400-italic-de4b58.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-500-italic-daaf62.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: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-500-italic-a435d1.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: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-500-italic-de4b58.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fraunces-400-normal-f2197f.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: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fraunces-400-normal-1fba8b.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: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fraunces-400-normal-63f165.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;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-500-normal-f2197f.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: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-500-normal-1fba8b.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: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-500-normal-63f165.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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-400-normal-982bf4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-400-normal-ffa6bb.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-400-normal-9cb20f.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-400-normal-8ea5e1.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-400-normal-76306e.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-400-normal-1cd702.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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-500-normal-982bf4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-500-normal-ffa6bb.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-500-normal-9cb20f.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-500-normal-8ea5e1.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-500-normal-76306e.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-500-normal-1cd702.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;
}
/* ═══════════════════════════════════════════════════════════════
   Petit Roig — Sistema visual compartido
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ══ Paleta muestreada del logo real ══ */
  --roig:          #D83000;  /* Roig principal — wordmark */
  --roig-deep:     #A82400;  /* Shadow / pressed */
  --roig-bright:   #F06018;  /* Brillo pecho pájaro */
  --terracota:     #D83000;  /* ALIAS legacy → roig */
  --terracota-deep:#A82400;  /* ALIAS legacy */
  --ocre:          #907830;
  --ocre-deep:     #604830;
  --crema:         #F0C0A8;
  --arena:         #F0E0C8;

  --ink:           #1A1310;
  --ink-soft:      #3D3029;
  --dark:          #1A1310;  /* ALIAS legacy */
  --text:          #1A1310;
  --muted:         #8A7C70;

  --bg:            #FAF5EC;  /* Fondo principal */
  --bg-warm:       #F2ECE0;  /* Fondo cálido secundario */
  --bg-2:          #F2ECE0;
  --border:        #E8DDC9;
  --line:          #E8DDC9;
  --line-strong:   #D4C5AD;

  --verd:          #4A7C59;  /* Conservado para badges "disponible" */

  /* Tipografías */
  --f-display:     'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --f-serif:       'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-sans:        'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:        'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* Aliases legacy (para no romper archivos existentes) */
  --serif:         'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:          'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html, body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
}

body { min-height: 100vh; overflow-x: hidden; }

::selection { background: var(--terracota); color: #fff; }

a { color: inherit; text-decoration: none; }

.logo { text-decoration: none; }

/* ══════════ Container ══════════ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

/* ══════════ Nav universal ══════════ */
/* Global nav height var (keeps layout in sync with fixed header) */
:root { --nav-h: 100px; }
@media (max-width: 720px) { :root { --nav-h: 76px; } }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
}

/* Reserve space at top of page for fixed nav.
   Adds nav-height as a margin so the hero's own padding stacks after it.
   EXCEPTION: dark heroes extend behind the transparent nav — no margin, hero
   adds nav-height to its own top padding. */
body > header.nav-sticky-host + section {
  margin-top: var(--nav-h);
}
body > header.nav-sticky-host.nav-dark-host + section.hero-dark,
body > header.nav-sticky-host.nav-dark-host + section.hero {
  margin-top: 0;
  padding-top: calc(var(--nav-h) + 40px);
}

/* Sticky scroll-reveal nav — fixed-position header that swaps bg on scroll.
   Uses fixed (not sticky) because body has overflow-x:hidden which breaks sticky. */
.nav-sticky-host {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 0.28s ease, box-shadow 0.28s ease;
  background-color: transparent;
}
/* Standard (light) pages — cream bg always so nav is readable over any section */
.nav-sticky-host:not(.nav-dark-host) {
  background-color: #F2ECE0;
}
.nav-sticky-host.is-scrolled:not(.nav-dark-host) {
  box-shadow: 0 1px 0 rgba(28,26,24,0.06);
}
/* Dark-host (home) — subtle dark gradient over hero so nav links stay readable; solid cream when scrolled */
.nav-sticky-host.nav-dark-host {
  background: linear-gradient(to bottom, rgba(20, 17, 14, 0.55) 0%, rgba(20, 17, 14, 0) 100%);
}
.nav-sticky-host.nav-dark-host.is-scrolled {
  background: #F2ECE0;
  box-shadow: 0 1px 0 rgba(28,26,24,0.06);
}
.nav-sticky-host.nav-dark-host.is-scrolled .nav-links-main a {
  color: rgba(28,26,24,0.65);
}
.nav-sticky-host.nav-dark-host.is-scrolled .nav-links-main a:hover,
.nav-sticky-host.nav-dark-host.is-scrolled .nav-links-main a.active {
  color: var(--text);
}
.nav-sticky-host.nav-dark-host.is-scrolled .nav-cta-main {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-warm);
}
.nav-sticky-host.nav-dark-host.is-scrolled .nav-cta-main:hover {
  background: transparent;
  color: var(--text);
}
/* Swap logo to light-bg variant when dark nav becomes cream on scroll */
.nav-sticky-host.nav-dark-host .logo-img-light { display: none; }
.nav-sticky-host.nav-dark-host.is-scrolled .logo-img-dark { display: none; }
.nav-sticky-host.nav-dark-host.is-scrolled .logo-img-light { display: block; }

/* Tighten padding when scrolled */
.nav-sticky-host.is-scrolled .nav,
.nav-sticky-host.is-scrolled .nav-main {
  padding-top: 14px;
  padding-bottom: 14px;
}

.nav-dark {
  padding: 8px 0 56px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  line-height: 0;
}
.logo img {
  height: 56px;
  width: auto;
  display: block;
}
/* Home hero header: same size as everywhere for consistency */
.nav-main .logo img { height: 56px; }
.nav-sticky-host.is-scrolled .nav-main .logo img { height: 56px; }
/* Footer logo: bigger for brand presence */
.footer-brand .logo img { height: 72px; }
/* Legacy helpers (pre-imagen). Harmless if unused. */
.logo-mark { display: none; }
.logo em { font-style: italic; color: var(--roig); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.18s ease;
  position: relative;
}
.nav-dark .nav-links a { color: rgba(242, 236, 224, 0.65); }

.nav-links a:hover {
  color: var(--text);
}
.nav-dark .nav-links a:hover { color: var(--bg-warm); }

.nav-links a.active {
  color: var(--text);
}
.nav-dark .nav-links a.active { color: var(--bg-warm); }

.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--terracota);
}

.nav-cta {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border: 1px solid var(--text);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg-warm);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.nav-cta:hover {
  background: transparent;
  color: var(--text);
}
.nav-dark .nav-cta {
  border-color: var(--bg-warm);
  background: var(--bg-warm);
  color: var(--dark);
}
.nav-dark .nav-cta:hover {
  background: transparent;
  color: var(--bg-warm);
}

/* ══════════ Typography ══════════ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--terracota);
}
.eyebrow-verd::before { background: var(--verd); }
.eyebrow-light { color: rgba(242, 236, 224, 0.6); }

h1.display, h2.display, h3.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
h1.display { font-size: clamp(40px, 6.2vw, 82px); line-height: 1.02; letter-spacing: -0.022em; }
h2.display { font-size: clamp(36px, 4.6vw, 58px); }
h3.display { font-size: clamp(28px, 3vw, 40px); }

.display em {
  font-style: italic;
  color: var(--terracota);
}

.lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 52ch;
}
.lead strong {
  color: var(--text);
  font-weight: 500;
}

/* ══════════ Buttons ══════════ */
.btn-primary {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--terracota);
  border: none;
  padding: 16px 28px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.005em;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 10px 24px -10px rgba(216, 48, 0, 0.55);
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--terracota-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(216, 48, 0, 0.65);
}
.btn-primary svg { transition: transform 0.22s ease; }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-link {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  transition: gap 0.22s ease, color 0.22s ease;
  text-decoration: none;
}
.btn-link:hover {
  color: var(--terracota);
  gap: 12px;
  border-bottom-color: var(--terracota);
}

.btn-ghost {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.005em;
  transition: all 0.22s ease;
  text-decoration: none;
}
.btn-ghost:hover {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg-warm);
}

/* ══════════ Hero dark ══════════ */
.hero-dark {
  position: relative;
  background: var(--dark);
  color: var(--bg-warm);
  overflow: hidden;
  padding: 32px 0 140px;
}
.hero-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at 78% 30%, rgba(216, 48, 0, 0.28), transparent 60%),
    radial-gradient(ellipse 700px 500px at 15% 80%, rgba(216, 48, 0, 0.12), transparent 65%);
  pointer-events: none;
}
.hero-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero-dark h1.display {
  color: var(--bg-warm);
  max-width: 18ch;
}
.hero-dark h1.display .line2 {
  display: block;
  color: rgba(242, 236, 224, 0.72);
}
.hero-dark .lead {
  margin-top: 28px;
  color: rgba(242, 236, 224, 0.7);
}
.hero-dark .lead strong { color: var(--bg-warm); }

.hero-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 1;
}

.diagonal {
  position: relative;
  height: 0;
  z-index: 3;
}
.diagonal-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 140px;
  background: var(--bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

/* ══════════ Sections ══════════ */
.section {
  padding: 110px 0;
}
.section-sm { padding: 72px 0; }
.section-lg { padding: 140px 0; }

.section-warm { background: var(--bg-warm); }
.section-dark { background: var(--dark); color: var(--bg-warm); }
.section-dark .lead { color: rgba(242, 236, 224, 0.7); }
.section-dark .lead strong { color: var(--bg-warm); }

/* ══════════ Card ══════════ */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(26, 19, 16, 0.02),
    0 30px 60px -30px rgba(26, 19, 16, 0.12),
    0 8px 24px -16px rgba(26, 19, 16, 0.08);
}

.card-flat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card-flat:hover {
  border-color: var(--terracota);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(26, 19, 16, 0.12);
}

/* ══════════ Badges ══════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--verd);
  background: rgba(74, 124, 89, 0.08);
  border: 1px solid rgba(74, 124, 89, 0.22);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  letter-spacing: -0.005em;
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verd);
  position: relative;
}
.badge-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--verd);
  opacity: 0.5;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ══════════ Footer ══════════ */
.footer {
  background: var(--dark);
  color: rgba(242, 236, 224, 0.65);
  padding: 80px 0 40px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 400px at 80% 20%, rgba(216, 48, 0, 0.15), transparent 60%);
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(242, 236, 224, 0.1);
}

.footer-brand .logo {
  color: var(--bg-warm);
  margin-bottom: 20px;
}

.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--bg-warm);
  line-height: 1.3;
  max-width: 22ch;
  margin-bottom: 20px;
}

.footer h4 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 236, 224, 0.45);
  margin-bottom: 18px;
  font-weight: 500;
}

.footer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-list a {
  color: rgba(242, 236, 224, 0.75);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.18s ease;
}
.footer-list a:hover {
  color: var(--terracota);
}

.footer-bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(242, 236, 224, 0.4);
  letter-spacing: -0.005em;
}
.footer-bottom a {
  color: rgba(242, 236, 224, 0.55);
  text-decoration: none;
  margin-left: 20px;
  transition: color 0.18s ease;
}
.footer-bottom a:hover { color: var(--bg-warm); }

/* ══════════ Form fields ══════════ */
.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}
.field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--terracota);
  box-shadow: 0 0 0 4px rgba(216, 48, 0, 0.12);
}
.field input.error,
.field select.error,
.field textarea.error {
  border-color: var(--terracota);
  box-shadow: 0 0 0 4px rgba(216, 48, 0, 0.08);
}
.field-error {
  font-size: 12px;
  color: var(--terracota);
  min-height: 14px;
}

/* ══════════ Mobile nav toggle ══════════ */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
}
.nav-dark .nav-toggle {
  border-color: rgba(242, 236, 224, 0.2);
  color: var(--bg-warm);
}

/* ══════════ Responsive ══════════ */
@media (max-width: 860px) {
  .container { padding: 0 24px; }
  .section { padding: 72px 0; }
  .section-lg { padding: 96px 0; }
  .hero-dark { padding: 24px 0 90px; }
  .nav-dark { padding-bottom: 40px; }
  .hero-edge, .diagonal-shape { height: 80px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .footer-bottom a { margin: 0 10px; }
}

/* Mobile menu open state */
.nav-links.open {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  flex-direction: column;
  padding: 24px 32px;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  z-index: 50;
}
.nav-dark .nav-links.open {
  background: var(--dark);
  border-color: rgba(242, 236, 224, 0.1);
}


/* ═══ LANGUAGE SWITCHER ═══ */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.lang-link {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: color 0.18s ease, background 0.18s ease;
  text-transform: uppercase;
}
.lang-link:hover {
  color: var(--text);
  background: rgba(216, 48, 0, 0.06);
}
.lang-link.active {
  color: var(--terracota);
  font-weight: 600;
  background: rgba(216, 48, 0, 0.08);
}
.lang-sep {
  color: var(--border);
  user-select: none;
}

/* Dark host variant (home dark hero) */
.nav-dark-host .lang-link {
  color: rgba(242, 236, 224, 0.55);
}
.nav-dark-host .lang-link:hover {
  color: var(--bg-warm);
  background: rgba(242, 236, 224, 0.08);
}
.nav-dark-host .lang-link.active {
  color: var(--terracota);
  background: rgba(216, 48, 0, 0.18);
}
.nav-dark-host .lang-sep {
  color: rgba(242, 236, 224, 0.2);
}
/* When scrolled (light bg over dark host), revert to standard colors */
.nav-dark-host.is-scrolled .lang-link {
  color: var(--muted);
}
.nav-dark-host.is-scrolled .lang-link:hover {
  color: var(--text);
  background: rgba(216, 48, 0, 0.06);
}
.nav-dark-host.is-scrolled .lang-link.active {
  color: var(--terracota);
  background: rgba(216, 48, 0, 0.08);
}
.nav-dark-host.is-scrolled .lang-sep {
  color: var(--border);
}

/* Mobile: hide separators visually but keep accessible structure */
@media (max-width: 720px) {
  .lang-switcher {
    margin-right: 4px;
    font-size: 10px;
  }
  .lang-link {
    padding: 5px 6px;
  }
}


/* ═══ BLOG ARTICLE ═══ */
.article-hero {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--border);
}
.article-category {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 20px;
  display: inline-block;
}
.article-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.8vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin-bottom: 28px;
  max-width: 22ch;
}
.article-title em {
  font-style: italic;
  color: var(--terracota);
}
.article-deck {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 64ch;
  margin-bottom: 32px;
  font-weight: 400;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
  padding-top: 24px;
}
.article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.article-meta-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 500;
}
.article-meta-author .avatar-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--terracota), var(--roig-deep));
}

.article-body {
  padding: 56px 0 96px;
  max-width: 720px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text);
}
.article-body > p {
  margin-bottom: 22px;
}
.article-body > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 64px;
  float: left;
  line-height: 0.9;
  padding: 6px 12px 0 0;
  font-weight: 400;
  color: var(--terracota);
}
.article-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 56px 0 18px;
}
.article-body h2 em { font-style: italic; color: var(--terracota); }
.article-body h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 19px;
  margin: 36px 0 14px;
  color: var(--text);
}
.article-body strong {
  font-weight: 600;
  color: var(--text);
}
.article-body em {
  font-style: italic;
}
.article-body a {
  color: var(--terracota);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover {
  color: var(--roig-deep);
  text-decoration-thickness: 2px;
}
.article-body ul, .article-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}
.article-body li {
  margin-bottom: 10px;
  padding-left: 4px;
}
.article-body ul li::marker {
  color: var(--terracota);
}
.article-body blockquote {
  margin: 36px 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--terracota);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.article-body code {
  font-family: var(--f-mono);
  font-size: 14px;
  background: var(--bg-warm);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--roig-deep);
}
.article-body pre {
  background: var(--dark);
  color: var(--bg-warm);
  padding: 20px 24px;
  border-radius: 10px;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.6;
  margin: 24px 0;
}
.article-body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.article-pullquote {
  margin: 48px 0;
  padding: 0 0 0 32px;
  border-left: 4px solid var(--terracota);
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.article-pullquote em { font-style: normal; color: var(--terracota); }
.article-callout {
  background: var(--bg-warm);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 32px 0;
  font-size: 16px;
  line-height: 1.65;
}
.article-callout strong {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracota);
  display: block;
  margin-bottom: 6px;
}
.article-divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 56px 0;
}
.article-divider-em {
  border: 0;
  height: 16px;
  background: none;
  margin: 56px 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--muted);
  letter-spacing: 0.5em;
  line-height: 1;
}
.article-divider-em::after {
  content: '· · ·';
}

/* CTA inline */
.article-cta {
  background: var(--dark);
  color: var(--bg-warm);
  border-radius: 18px;
  padding: 40px 36px;
  margin: 64px 0 0;
  text-align: center;
}
.article-cta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--bg-warm);
}
.article-cta h3 em { font-style: italic; color: var(--terracota); }
.article-cta p {
  font-size: 16px;
  color: rgba(242, 236, 224, 0.7);
  margin-bottom: 24px;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}
.article-cta .btn-primary {
  background: var(--terracota);
  color: #fff;
  border: 1px solid var(--terracota);
}
.article-cta .btn-primary:hover {
  background: var(--roig-deep);
  border-color: var(--roig-deep);
}

/* Related articles */
.article-related {
  border-top: 1px solid var(--border);
  padding: 56px 0;
  background: var(--bg-warm);
}
.article-related h4 {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.related-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(26, 19, 16, 0.18);
}
.related-card .cat {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 10px;
  display: block;
}
.related-card h5 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--text);
}
.related-card h5 em { font-style: italic; color: var(--terracota); }
.related-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .article-hero { padding: 40px 0 24px; }
  .article-body { padding: 40px 0 80px; font-size: 17px; }
  .article-body > p:first-of-type::first-letter {
    font-size: 52px;
    padding: 4px 10px 0 0;
  }
  .article-body h2 { font-size: 28px; }
  .article-meta { gap: 16px; font-size: 13px; }
  .article-related-grid { grid-template-columns: 1fr; }
  .article-pullquote { font-size: 22px; padding-left: 22px; }
  .article-cta { padding: 32px 24px; }
}


/* SERVICE LANDING PAGE */
.svc-landing-hero{background:var(--dark);color:var(--bg-warm);padding:140px 0 80px;position:relative;overflow:hidden}
.svc-landing-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 800px 500px at 80% 30%,rgba(216,48,0,0.25),transparent 60%),radial-gradient(ellipse 600px 400px at 15% 90%,rgba(216,48,0,0.1),transparent 65%);pointer-events:none}
.svc-landing-hero>.container{position:relative;z-index:2;max-width:920px}
.svc-landing-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(242,236,224,0.55);margin-bottom:20px}
.svc-landing-eyebrow::before{content:'';width:24px;height:1px;background:var(--terracota)}
.svc-landing-h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,64px);line-height:1.05;letter-spacing:-0.022em;margin-bottom:28px;max-width:22ch;color:var(--bg-warm)}
.svc-landing-h1 em{font-style:italic;color:var(--terracota)}
.svc-landing-deck{font-family:var(--serif);font-size:22px;line-height:1.5;color:rgba(242,236,224,0.82);max-width:60ch;margin-bottom:36px}
.svc-landing-actions{display:flex;gap:14px;flex-wrap:wrap}
.svc-landing-section{padding:80px 0}
.svc-landing-section.warm{background:var(--bg-warm)}
.svc-landing-section .container{max-width:920px}
.svc-landing-section h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,40px);letter-spacing:-0.015em;line-height:1.15;margin-bottom:24px;max-width:24ch}
.svc-landing-section h2 em{font-style:italic;color:var(--terracota)}
.svc-landing-section>.container>p{font-size:18px;line-height:1.65;max-width:64ch;color:var(--ink-soft);margin-bottom:16px}
.pg-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}
.pg-block{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 32px}
.pg-block.pain{border-left:3px solid #C44}
.pg-block.gain{border-left:3px solid #4A7C59}
.pg-block h3{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:16px}
.pg-block.pain h3{color:#C44}
.pg-block.gain h3{color:#4A7C59}
.pg-block ul{list-style:none;padding:0;margin:0}
.pg-block li{font-size:15px;line-height:1.55;color:var(--text);padding:10px 0 10px 24px;position:relative;border-bottom:1px solid var(--border)}
.pg-block li:last-child{border-bottom:0}
.pg-block.pain li::before{content:'✕';position:absolute;left:0;top:10px;color:#C44;font-weight:700}
.pg-block.gain li::before{content:'✓';position:absolute;left:0;top:10px;color:#4A7C59;font-weight:700}
.svc-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.svc-step{background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px;position:relative}
.svc-step-num{font-family:var(--f-mono);font-size:12px;letter-spacing:0.1em;color:var(--terracota);margin-bottom:8px}
.svc-step h4{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.25;margin-bottom:8px}
.svc-step p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.svc-pricing{background:var(--dark);color:var(--bg-warm);border-radius:18px;padding:40px 36px;margin-top:40px}
.svc-pricing-eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--terracota);margin-bottom:14px}
.svc-pricing h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;margin-bottom:16px;color:var(--bg-warm)}
.svc-pricing-list{list-style:none;padding:0;margin:24px 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.svc-pricing-list li{font-size:14px;line-height:1.5;color:rgba(242,236,224,0.75);padding-left:20px;position:relative}
.svc-pricing-list li::before{content:'→';position:absolute;left:0;color:var(--terracota)}
.svc-pricing-cta{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.svc-pricing-cta .from{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(242,236,224,0.5)}
.svc-pricing-cta .amount{font-family:var(--serif);font-style:italic;font-size:36px;color:var(--terracota);line-height:1}
.svc-pricing-cta .vat{font-size:13px;color:rgba(242,236,224,0.55)}
.svc-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.svc-faq-q-block{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px 24px}
.svc-faq-q-block h4{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.3;margin-bottom:10px}
.svc-faq-q-block p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0}
.svc-related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.svc-related-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;text-decoration:none;color:inherit;transition:transform 0.18s ease,box-shadow 0.18s ease}
.svc-related-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(26,19,16,0.15)}
.svc-related-card .cat{font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--terracota);margin-bottom:10px;display:block}
.svc-related-card h5{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25;margin-bottom:8px}
.svc-related-card p{font-size:13px;color:var(--muted);line-height:1.45;margin:0}
@media (max-width:760px){.svc-landing-hero{padding:100px 0 60px}.svc-landing-section{padding:60px 0}.pg-grid,.svc-faq-grid{grid-template-columns:1fr}.svc-timeline{grid-template-columns:1fr 1fr}.svc-related{grid-template-columns:1fr}.svc-pricing-list{grid-template-columns:1fr}.svc-pricing{padding:32px 24px}}

.svc-more{display:inline-block;margin-top:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--terracota);text-decoration:none;border-bottom:1px solid transparent;transition:border 0.15s ease}
.svc-more:hover{border-bottom-color:var(--terracota)}