/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/49c2d90f-244b-45b6-8f99-8250e026f7b5.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: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/48323ae7-9839-4f6d-8a77-f1f3e73f338b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/a97b296a-bd74-412f-9f3b-9d74957307d3.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: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/c5d1430c-65a7-4e9a-97ab-361e406f3424.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: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/f896bd08-b6df-47fe-9583-2c1bcc04bc38.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/49c2d90f-244b-45b6-8f99-8250e026f7b5.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/48323ae7-9839-4f6d-8a77-f1f3e73f338b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/a97b296a-bd74-412f-9f3b-9d74957307d3.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/c5d1430c-65a7-4e9a-97ab-361e406f3424.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: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/f896bd08-b6df-47fe-9583-2c1bcc04bc38.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/49c2d90f-244b-45b6-8f99-8250e026f7b5.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/48323ae7-9839-4f6d-8a77-f1f3e73f338b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/a97b296a-bd74-412f-9f3b-9d74957307d3.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/c5d1430c-65a7-4e9a-97ab-361e406f3424.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/f896bd08-b6df-47fe-9583-2c1bcc04bc38.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/49c2d90f-244b-45b6-8f99-8250e026f7b5.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/48323ae7-9839-4f6d-8a77-f1f3e73f338b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/a97b296a-bd74-412f-9f3b-9d74957307d3.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/c5d1430c-65a7-4e9a-97ab-361e406f3424.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/f896bd08-b6df-47fe-9583-2c1bcc04bc38.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/49c2d90f-244b-45b6-8f99-8250e026f7b5.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/48323ae7-9839-4f6d-8a77-f1f3e73f338b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/a97b296a-bd74-412f-9f3b-9d74957307d3.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/c5d1430c-65a7-4e9a-97ab-361e406f3424.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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/f896bd08-b6df-47fe-9583-2c1bcc04bc38.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/f2835079-f1f8-4ad3-8f4d-f1335612c80d.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/6026af5e-54ae-4e44-9d34-aac086f8c0f8.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/d90b8679-0724-4f03-bc7a-12f205a134ed.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/50be82ec-c310-4d8c-8a2c-d81f39732a7e.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/d9fd730b-41a6-49f6-a7e3-117d292d193f.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/29534503-c3f8-48a5-937f-6cbe2992375b.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/f2835079-f1f8-4ad3-8f4d-f1335612c80d.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/6026af5e-54ae-4e44-9d34-aac086f8c0f8.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/d90b8679-0724-4f03-bc7a-12f205a134ed.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/50be82ec-c310-4d8c-8a2c-d81f39732a7e.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/d9fd730b-41a6-49f6-a7e3-117d292d193f.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/29534503-c3f8-48a5-937f-6cbe2992375b.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/4ff247bd-83d6-49a5-a2a8-0ab20a6238c0.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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/015dd512-ceae-4e58-9005-07fc75f0bb41.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/7de4f71b-28db-4ce4-9474-bf1d9bed14b6.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/d4bc5d3e-2c7c-4b4b-8afb-00ac5180015c.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;
}



/* =================================================================
   LION MOVES — Hi-Fi Landing
   "Sun-baked editorial" · cream + warm-ink + lion orange
   ================================================================= */

:root{
  /* 3-color palette — schemes only override these three */
  --paper: #f7f1e6;
  --ink:   #1b1410;
  --mane:  #d96b21;
  /* Text color that goes on top of accent (computed per scheme based on luminance) */
  --on-mane: #ffffff;

  /* Derived shades (computed from the 3 bases via color-mix) */
  --paper-2:   color-mix(in srgb, var(--paper) 88%, var(--ink));
  --paper-3:   color-mix(in srgb, var(--paper) 74%, var(--ink));
  --ink-2:     color-mix(in srgb, var(--ink) 82%, var(--paper));
  --ink-3:     color-mix(in srgb, var(--ink) 52%, var(--paper));
  --ink-4:     color-mix(in srgb, var(--ink) 28%, var(--paper));
  --mane-deep: color-mix(in srgb, var(--mane) 72%, var(--ink));
  --mane-soft: color-mix(in srgb, var(--mane) 35%, var(--paper));
  --mane-glow: color-mix(in srgb, var(--mane) 22%, transparent);

  /* Type */
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Radii */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow:    0 8px 24px -8px color-mix(in srgb, var(--ink) 18%, transparent);
  --shadow-lg: 0 24px 60px -20px color-mix(in srgb, var(--ink) 28%, transparent);

  /* Layout */
  --gutter: 20px;
  --max:    1240px;
  --header-h: 64px;

  /* Motion */
  --ease: cubic-bezier(.4, .2, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ============ Subtle paper grain background ============ */
body::before{
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(217, 107, 33, .04), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(200, 154, 58, .04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

.grain{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* =================================================================
   Typography
   ================================================================= */
.display, .display-2, .section-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.display{
  font-size: clamp(48px, 10vw, 124px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.display em, .section-title em, .display-2 em {
  font-style: italic;
  color: var(--mane);
  font-weight: 400;
}
.display-2{
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.section-title{
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.018em;
}

.kicker{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.kicker.light{ color: color-mix(in srgb, var(--paper) 70%, transparent); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  padding: 9px 16px;
  border-radius: 999px;
}
.eyebrow b{ font-family: var(--sans); font-weight: 600; color: var(--ink); }

.stars, .stars-lg{ color: var(--mane); letter-spacing: 1px; }
.stars-lg{ font-size: 22px; }

.lede{
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink);
  max-width: 580px;
  line-height: 1.6;
  margin: 0;
}

/* =================================================================
   Buttons
   ================================================================= */
.btn{
  --bg: var(--ink);
  --fg: var(--paper);
  --br: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  min-height: 48px;
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--br, var(--bg));
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s var(--ease), background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-lg{ padding: 18px 28px; min-height: 56px; font-size: 15px; }
.btn-sm{ padding: 8px 14px; min-height: 36px; font-size: 13px; }
.btn-block{ width: 100%; }

.btn-mane{ --bg: var(--mane); --fg: var(--on-mane); box-shadow: 0 8px 20px -8px var(--mane-glow); }
.btn-mane:hover{ --bg: var(--mane-deep); box-shadow: 0 12px 24px -8px var(--mane-glow); }
.btn-ink{ --bg: var(--ink); --fg: var(--paper); }
.btn-ink:hover{ --bg: color-mix(in srgb, var(--ink) 90%, var(--paper)); }
.btn-ghost{ --bg: transparent; --fg: var(--ink); --br: color-mix(in srgb, var(--ink) 25%, transparent); }
.btn-ghost:hover{ --bg: var(--paper-2); --br: var(--ink); }
.btn-paper{ --bg: var(--paper); --fg: var(--ink); }
.btn-paper:hover{ --bg: color-mix(in srgb, var(--paper) 88%, var(--mane)); }
.btn-outline-paper{ --bg: transparent; --fg: var(--paper); --br: color-mix(in srgb, var(--paper) 35%, transparent); }
.btn-outline-paper:hover{ --bg: color-mix(in srgb, var(--paper) 8%, transparent); --br: var(--paper); }

.btn .ico{ width: 18px; height: 18px; flex-shrink: 0; }
.btn-lg .ico{ width: 20px; height: 20px; }

.btn strong{ font-weight: 600; font-variant-numeric: tabular-nums; }

/* =================================================================
   Header
   ================================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-header.scrolled{
  border-bottom-color: color-mix(in srgb, var(--ink) 8%, transparent);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}
.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark{
  width: 40px; height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}
.brand-word{
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name{
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  font-style: italic;
}
.brand-tag{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}
.brand-light{ color: var(--paper); }
.brand-light .brand-mark{ color: var(--mane); }
.brand-light .brand-tag{ color: color-mix(in srgb, var(--paper) 55%, transparent); }

.site-nav{ display: none; gap: 28px; }
.site-nav a{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
  transition: color .15s var(--ease);
}
.site-nav a:hover{ color: var(--ink); }
.site-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: var(--mane);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease);
}
.site-nav a:hover::after{ transform: scaleX(1); }

.header-cta{ display: flex; align-items: center; gap: 10px; }
.phone-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--mane);
  color: var(--on-mane);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px var(--mane-glow);
  transition: transform .12s var(--ease), background .15s var(--ease);
}
.phone-pill:hover{ background: var(--mane-deep); transform: translateY(-1px); }
.phone-pill .ico{ width: 16px; height: 16px; }
.phone-pill .phone-num{ display: none; }

.phone-pill-light{ background: transparent; color: var(--paper); border: 1.5px solid color-mix(in srgb, var(--paper) 30%, transparent); box-shadow: none; }
.phone-pill-light:hover{ background: color-mix(in srgb, var(--paper) 8%, transparent); border-color: var(--paper); }
.phone-pill-light .phone-num{ display: inline; }

.hide-sm{ display: none; }

/* =================================================================
   Section scaffolding
   ================================================================= */
section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px var(--gutter);
  position: relative;
}
.section-head{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin-bottom: 36px;
}
.section-lede{
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
}

/* =================================================================
   Photo placeholders (intentional, designed)
   ================================================================= */
.photo-fill{
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  overflow: hidden;
}
.photo-fill::before, .photo-fill::after{
  content: "";
  position: absolute;
  border-radius: 50%;
}
/* Each data-photo gets a unique designed treatment */
[data-photo="hero"]{
  background: url("hero.webp") center/cover no-repeat;
}
[data-photo="hero"]::before{ display:none; }
[data-photo="hero"]::after{ display:none; }
[data-photo="crew"]{
  background: url("why-crew.webp") center/cover no-repeat;
}
[data-photo="crew"]::after{ display:none; }
[data-photo="cta"]{
  background: url("cta.webp") center/cover no-repeat;
}
[data-photo="cta"]::after{ display:none; }

/* Service card images */
[data-photo^="svc-"]{ background: linear-gradient(160deg, var(--paper-2), var(--paper-3)); }
[data-photo="svc-res"]{ background: linear-gradient(160deg, #e6d4b3, #c89a6a); }
[data-photo="svc-com"]{ background: linear-gradient(160deg, #d4c4a0, #8a7355); }
[data-photo="svc-pack"]{ background: linear-gradient(160deg, var(--mane-soft), var(--mane)); }
[data-photo="svc-load"]{ background: linear-gradient(160deg, #c89263, #6b3f1c); }
[data-photo="svc-long"]{ background: linear-gradient(160deg, #d9b682, #8a5e3a); }

/* Avatar placeholders */
.avatar{
  display: inline-block;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mane-soft), var(--mane));
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
[data-photo="ava-1"]{ background: linear-gradient(135deg, #e6c89e, #b8501a); }
[data-photo="ava-2"]{ background: linear-gradient(135deg, #d4c4a0, #6b5d4e); }
[data-photo="ava-3"]{ background: linear-gradient(135deg, #f4d2af, #c89a3a); }
[data-photo="ava-4"]{ background: linear-gradient(135deg, #c89263, #533518); }
[data-photo="ava-5"]{ background: linear-gradient(135deg, #e6d4b3, #8a5e3a); }

/* =================================================================
   1 — HERO
   ================================================================= */
.hero{
  padding-top: 32px;
  padding-bottom: 48px;
  overflow: hidden;
}
.hero-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.hero-copy{ display: flex; flex-direction: column; gap: 20px; }
.hero-copy .eyebrow{ align-self: flex-start; }

.hero-ctas{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.hero-ctas .btn{ width: 100%; }
.hero-ctas .btn strong{ font-variant-numeric: tabular-nums; }

.hero-stats{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding-top: 18px;
}
.hero-stats li{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.hero-stats li:first-child{ border-left: 0; padding-left: 0; }
.stat-num{
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  font-style: italic;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-num small{
  font-size: 0.4em;
  font-style: normal;
  font-family: var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.stat-lbl{
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.hero-media{
  display: flex;
  flex-direction: column;
  gap: 14px;
  order: -1;
}
.hero-photo{
  position: relative;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.photo-stamp{
  position: absolute;
  top: 18px; left: 18px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 50%;
  width: 96px; height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-8deg);
  border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  padding: 8px;
  z-index: 2;
}
.stamp-year{
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  letter-spacing: 0;
  line-height: 1;
  margin: 4px 0;
  color: var(--mane);
}
.stamp-line{ line-height: 1; }
.photo-pin{
  position: absolute;
  bottom: 18px; right: 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.pin-dot{
  width: 8px; height: 8px;
  background: var(--mane);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(217, 107, 33, .25);
}

.hero-trust{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
  background: color-mix(in srgb, var(--paper) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: var(--r);
}
.trust-row{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.trust-row .ico{ width: 28px; height: 28px; color: var(--mane); flex-shrink: 0; }
.trust-row b{ display: block; font-weight: 600; color: var(--ink); font-size: 14.5px; line-height: 1.3; }
.trust-row small{ display: block; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0.02em; line-height: 1.4; margin-top: 2px; }

/* =================================================================
   2 — WHY CHOOSE
   ================================================================= */
.why{ padding-top: 56px; }
.why-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.why-photo{
  position: relative;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.photo-caption{
  position: absolute;
  bottom: 16px; left: 16px;
  background: var(--paper);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  max-width: 70%;
}
.photo-caption small{
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.benefits{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.benefit{
  padding: 22px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  align-items: start;
}
.benefit-icon{
  grid-row: 1 / 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--mane);
}
.benefit-icon svg{ width: 20px; height: 20px; }
.benefit h3{
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.benefit p{
  margin: 0;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.6;
}

/* =================================================================
   3 — REVIEWS
   ================================================================= */
.reviews{ padding-top: 80px; }
.reviews-head{ max-width: none; }
.reviews-meta{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.meta-rating{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.big-rating{
  font-family: var(--serif);
  font-style: italic;
  font-size: 60px;
  line-height: 1;
  color: var(--ink);
}
.meta-rating small{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.reviews-arrows{
  display: flex;
  gap: 8px;
}
.arrow{
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  background: transparent;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.arrow:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.arrow svg{ width: 18px; height: 18px; }

.reviews-track{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px var(--gutter) 24px;
  margin: 0 calc(-1 * var(--gutter));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews-track::-webkit-scrollbar{ display: none; }
.review{
  flex: 0 0 86%;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.review:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.review.featured{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.review.featured .stars{ color: var(--mane); }
.review blockquote{
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: inherit;
}
.review blockquote em{ color: var(--mane); font-style: italic; }
.review figcaption{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.review.featured figcaption{ border-top-color: color-mix(in srgb, var(--paper) 15%, transparent); }
.review figcaption b{ display: block; font-weight: 600; font-size: 15px; }
.review figcaption small{ display: block; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0.02em; margin-top: 2px; }
.review.featured figcaption small{ color: color-mix(in srgb, var(--paper) 70%, transparent); }

.source-bar{
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.source-bar .src{
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.dot-sep{ width: 4px; height: 4px; background: var(--ink-4); border-radius: 50%; }

/* =================================================================
   4 — PROCESS
   ================================================================= */
.process{ padding-top: 80px; }
.steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  counter-reset: step;
  position: relative;
}
.step{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 24px;
  row-gap: 8px;
  padding-bottom: 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  position: relative;
}
.step:last-child{ border-bottom: 0; padding-bottom: 0; }
.step-num{
  grid-row: 1 / 4;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.85;
  color: var(--mane);
  letter-spacing: -0.04em;
  align-self: start;
}
.step h3{
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.step p{
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
  max-width: 480px;
}
.step-time{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 6px;
}

/* =================================================================
   5 — SERVICES
   ================================================================= */
.services{ padding-top: 80px; }
.services-head{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: none;
}
.svc-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.svc-card{
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.svc-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--mane);
}
.svc-photo{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.svc-photo .photo-fill{ transition: transform .5s var(--ease); }
.svc-card:hover .svc-photo .photo-fill{ transform: scale(1.05); }
.svc-body{
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.svc-num{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.svc-card h3{
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.svc-card p{
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}
.svc-arrow{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mane);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s var(--ease);
}
.svc-card:hover .svc-arrow{ gap: 8px; }

/* =================================================================
   6 — AREAS
   ================================================================= */
.areas{ padding-top: 80px; }
.areas-card{
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: var(--shadow);
}
.areas-map{
  background: linear-gradient(160deg, var(--paper-2), var(--paper-3));
  color: var(--ink-2);
  padding: 20px;
  position: relative;
  aspect-ratio: 4 / 3;
}
.map-svg{ width: 100%; height: 100%; }
.areas-body{
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.areas-body p{
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
}
.cities{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cities span{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  background: var(--paper-2);
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--ink);
}
.cities .more{ background: var(--ink); color: var(--paper); }

/* =================================================================
   7 — PRICING
   ================================================================= */
.pricing{ padding-top: 80px; }
.pricing-head{ max-width: 760px; }
.tiers{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.tier{
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tier:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.tier-featured{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: var(--shadow);
}
.featured-flag{
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--mane);
  color: var(--on-mane);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 500;
}
.tier-head h3{
  margin: 4px 0 6px;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.tier-featured .tier-head h3{ color: var(--paper); }
.tier-fit{
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  font-family: var(--mono);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.tier-featured .tier-fit{ color: color-mix(in srgb, var(--paper) 75%, transparent); }
.tier-price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.tier-featured .tier-price{ border-color: color-mix(in srgb, var(--paper) 15%, transparent); }
.price-num{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(56px, 8vw, 80px);
  line-height: 0.9;
  color: var(--mane);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price-unit{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.tier-featured .price-unit{ color: color-mix(in srgb, var(--paper) 70%, transparent); }
.tier-feats{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.tier-featured .tier-feats{ color: color-mix(in srgb, var(--paper) 92%, transparent); }
.tier-feats li{
  display: flex;
  align-items: start;
  gap: 8px;
  line-height: 1.45;
}
.tier-feats li::before{
  content: "";
  width: 6px; height: 6px;
  background: var(--mane);
  border-radius: 50%;
  margin-top: 9px;
  flex-shrink: 0;
}
.tier .btn{ margin-top: auto; }

.tier-featured .btn-mane{ background: var(--paper); color: var(--ink); box-shadow: none; border-color: var(--paper); }
.tier-featured .btn-mane:hover{ background: color-mix(in srgb, var(--paper) 90%, var(--mane)); color: var(--ink); }

.pricing-foot{
  margin-top: 20px;
  padding: 22px;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pricing-foot p{
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.6;
  max-width: 640px;
}
.foot-notes{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.foot-notes span{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  padding: 7px 13px;
  border-radius: 999px;
}
.foot-notes b{ color: var(--mane); font-weight: 700; }

/* =================================================================
   8 — CTA BANNER
   ================================================================= */
.cta-banner{
  max-width: none;
  margin-top: 80px;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
.cta-photo{
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.cta-copy{
  padding: 40px var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.cta-copy p{
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 90%, transparent);
  max-width: 520px;
}
.cta-copy .display-2 em{ color: var(--mane); }
.phone-display{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  color: var(--paper);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--paper) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 15%, transparent);
  margin: 8px 0 4px;
  transition: color .15s var(--ease);
}
.phone-display:hover{ color: var(--mane); }
.phone-display .ico{ width: 42px; height: 42px; color: var(--mane); }
.cta-row{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cta-row .btn{ width: 100%; }
.cta-hours{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  text-transform: uppercase;
}

/* =================================================================
   9 — FORM
   ================================================================= */
.quote{ padding-top: 80px; }
.quote-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.quote-copy{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote-copy p{
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
}
.quote-pts{
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quote-pts li{
  font-size: 15.5px;
  color: var(--ink);
  display: flex;
  align-items: start;
  gap: 10px;
  line-height: 1.5;
}
.quote-pts li::before{
  content: "";
  width: 7px; height: 7px;
  background: var(--mane);
  border-radius: 50%;
  margin-top: 10px;
  flex-shrink: 0;
}
.quote-or{
  margin-top: 20px;
  padding: 22px;
  background: var(--paper-2);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quote-phone{
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  transition: color .15s var(--ease);
}
.quote-phone:hover{ color: var(--mane); }
.quote-or small{ font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.04em; }

.quote-form{
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-lg);
  padding: 28px 24px 28px;
  box-shadow: var(--shadow);
  position: relative;
}
.quote-form.submitted .form-success{ display: flex; }
.quote-form.submitted > :not(.form-success){ opacity: 0.1; pointer-events: none; }
.form-success{
  display: none;
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.form-success svg{ width: 56px; height: 56px; color: var(--mane); }
.form-success h4{ font-family: var(--serif); font-size: 28px; font-weight: 400; margin: 0; }
.form-success p{ margin: 0; font-size: 14px; color: var(--ink-2); }
.form-success a{ color: var(--mane); font-weight: 600; }

.form-head h3{
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.form-head small{
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
  border: 0;
  padding: 0;
}
.field-lbl{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0;
  font-weight: 500;
}
.field input{
  font: inherit;
  font-size: 17px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1.5px solid var(--ink-3);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  outline: none;
  transition: border-color .15s var(--ease);
}
.field input::placeholder{ color: var(--ink-4); font-weight: 400; }
.field input:focus{ border-bottom-color: var(--mane); }

.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.size-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.size-opt{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px;
  background: var(--paper-2);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.size-opt input{ position: absolute; opacity: 0; pointer-events: none; }
.size-opt:hover{ background: var(--paper-3); }
.size-opt:has(input:checked){
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.quote-form button[type="submit"]{ margin-top: 22px; }
.form-foot{
  display: block;
  margin-top: 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{
  background: var(--ink);
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  padding: 64px 0 24px;
  margin-top: 80px;
}
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-brand .brand{ align-items: center; }
.footer-tag{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  max-width: 360px;
}
.footer-col h5{
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 12px;
  color: var(--paper);
}
.footer-col ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a{
  color: color-mix(in srgb, var(--paper) 85%, transparent);
  text-decoration: none;
  font-size: 15px;
  transition: color .15s var(--ease);
}
.footer-col a:hover{ color: var(--mane); }
.contact-phone{
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--paper) !important;
  font-variant-numeric: tabular-nums;
}
.contact-phone:hover{ color: var(--mane) !important; }
.license{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  margin-top: 12px;
  line-height: 1.6;
}

.footer-legal{
  max-width: var(--max);
  margin: 32px auto 0;
  padding: 20px var(--gutter) 0;
  border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}
.footer-legal a{ color: inherit; text-decoration: none; }
.footer-legal a:hover{ color: var(--mane); }

/* =================================================================
   STICKY MOBILE CTA
   ================================================================= */
.mobile-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  z-index: 60;
}
.mobile-cta .btn{
  width: 100%;
  padding: 12px 14px;
  min-height: 46px;
  font-size: 13px;
}
body{ padding-bottom: 78px; }

/* =================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================= */

/* ============ TABLET ≥ 640px ============ */
@media (min-width: 640px){
  :root{ --gutter: 28px; }
  section{ padding: 80px var(--gutter); }
  .hero-stats{ gap: 20px; }
  .hero-ctas{ flex-direction: row; flex-wrap: wrap; }
  .hero-ctas .btn{ width: auto; }
  .hero-trust{ grid-template-columns: 1fr 1fr; gap: 20px; }
  .benefits{ grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .svc-grid{ grid-template-columns: 1fr 1fr; gap: 18px; }
  .tiers{ grid-template-columns: 1fr; gap: 16px; }
  .review{ flex: 0 0 460px; }
  .cta-row{ flex-direction: row; }
  .cta-row .btn{ width: auto; }
  .footer-inner{ grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
  .footer-legal{ flex-direction: row; justify-content: space-between; }
  .reviews-meta{ flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* ============ DESKTOP ≥ 960px ============ */
@media (min-width: 960px){
  :root{ --gutter: 36px; --header-h: 72px; }
  .site-nav{ display: flex; }
  .phone-pill .phone-num{ display: inline; }
  .hide-sm{ display: inline-flex; }
  .mobile-cta{ display: none; }
  body{ padding-bottom: 0; }

  /* Hero */
  .hero{ padding-top: 56px; padding-bottom: 80px; }
  .hero-inner{
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: center;
  }
  .hero-media{ order: 0; }
  .hero-photo{ aspect-ratio: 4 / 5; }

  /* Why */
  .why{ padding-top: 100px; }
  .why-grid{ grid-template-columns: .9fr 1.1fr; gap: 56px; }
  .why-photo{ aspect-ratio: 4 / 5; position: sticky; top: 88px; }

  /* Reviews */
  .reviews{ padding-top: 120px; }
  .review{ flex: 0 0 420px; }
  .review.featured{ flex: 0 0 520px; }

  /* Process */
  .process{ padding-top: 120px; }
  .steps{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }
  .step{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    padding-bottom: 0;
    border-bottom: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    padding-top: 20px;
  }
  .step-num{
    grid-row: 1;
    margin-bottom: 8px;
  }

  /* Services */
  .services{ padding-top: 120px; }
  .services-head{ flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .services-head .section-lede{ text-align: right; max-width: 360px; }
  .svc-grid{
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
  .svc-photo{ aspect-ratio: 3 / 4; }

  /* Areas */
  .areas{ padding-top: 120px; }
  .areas-card{ grid-template-columns: 1.2fr 1fr; }
  .areas-map{ aspect-ratio: auto; min-height: 420px; }
  .areas-body{ padding: 48px 44px; justify-content: center; }

  /* Pricing */
  .pricing{ padding-top: 120px; }
  .tiers{ grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
  .tier{ padding: 32px 28px; }
  .tier-featured{ transform: translateY(-8px); }
  .tier-featured:hover{ transform: translateY(-10px); }
  .pricing-foot{ flex-direction: row; justify-content: space-between; align-items: center; padding: 26px 32px; }
  .pricing-foot > div:first-child{ max-width: 60%; }

  /* CTA banner */
  .cta-banner{ grid-template-columns: 1fr 1fr; align-items: center; margin-top: 120px; }
  .cta-copy{ padding: 64px 56px; max-width: 600px; margin: 0; }

  /* Quote */
  .quote{ padding-top: 120px; }
  .quote-grid{ grid-template-columns: 1fr 1.05fr; gap: 56px; }
  .quote-form{ padding: 36px 36px 32px; }
  .size-grid{ grid-template-columns: repeat(4, 1fr); }

  /* Footer */
  .site-footer{ padding: 80px 0 28px; margin-top: 120px; }
}

/* ============ LARGE ≥ 1200px ============ */
@media (min-width: 1200px){
  .hero{ padding-top: 72px; padding-bottom: 100px; }
  .hero-inner{ gap: 80px; }
  .section-head{ margin-bottom: 48px; }
  .quote-form{ padding: 44px 44px 36px; }
}

/* =================================================================
   Motion: respect prefers-reduced-motion
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html{ scroll-behavior: auto; }
}

/* =================================================================
   Tweaks panel
   ================================================================= */
#tweaks-panel{
  position: fixed; bottom: 88px; right: 18px;
  width: 300px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: var(--r);
  padding: 18px;
  font-family: var(--sans);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
}
#tweaks-panel.on{ display: block; }
#tweaks-panel h4{
  margin: 0 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  display: flex; justify-content: space-between; align-items: center;
}
#tweaks-panel .x{
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  background: transparent;
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 16px;
}
#tweaks-panel .tg{ margin-bottom: 14px; }
#tweaks-panel .lbl{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
#tweaks-panel .seg{
  display: flex;
  background: var(--paper-2);
  border-radius: 999px;
  padding: 3px;
}
#tweaks-panel .seg button{
  flex: 1;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 999px;
}
#tweaks-panel .seg button.on{ background: var(--ink); color: var(--paper); }
#tweaks-panel .schemes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#tweaks-panel .scheme{
  position: relative;
  border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  font: inherit;
  text-align: left;
  transition: transform .12s var(--ease), border-color .12s var(--ease), box-shadow .12s var(--ease);
}
#tweaks-panel .scheme:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
#tweaks-panel .scheme.on{ border-color: var(--ink); border-width: 2px; }
#tweaks-panel .scheme.on::after{
  content: "✓";
  position: absolute;
  top: 6px; right: 8px;
  width: 18px; height: 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
#tweaks-panel .scheme-swatches{
  display: flex;
  height: 56px;
}
#tweaks-panel .scheme-swatches > span{ flex: 1; }
#tweaks-panel .scheme-swatches > span:nth-child(2){ flex: 0.5; }
#tweaks-panel .scheme-swatches > span:nth-child(3){ flex: 0.5; }
#tweaks-panel .scheme-name{
  padding: 7px 10px 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
#tweaks-panel .scheme-tag{
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 1px;
}
@media (min-width: 960px){
  #tweaks-panel{ bottom: 18px; }
}

/* Theme: schemes share the same chrome — dark variants flip via .scheme-dark class */
body.scheme-dark .site-header{
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}
body.scheme-dark .site-header.scrolled{ background: color-mix(in srgb, var(--paper) 98%, transparent); }
body.scheme-dark .review.featured{ background: var(--paper-2); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 15%, transparent); }
body.scheme-dark .review.featured figcaption{ border-top-color: color-mix(in srgb, var(--ink) 12%, transparent); }
body.scheme-dark .tier-featured{ background: var(--paper-2); border-color: color-mix(in srgb, var(--ink) 12%, transparent); }
body.scheme-dark .tier-featured .tier-head h3,
body.scheme-dark .tier-featured .tier-fit{ color: inherit; }
body.scheme-dark .cta-banner{ background: var(--paper-2); }
body.scheme-dark .site-footer{ background: var(--paper-2); }
body.scheme-dark .mobile-cta{ background: color-mix(in srgb, var(--paper) 96%, transparent); }
body.scheme-dark #tweaks-panel{ background: var(--paper-2); border-color: color-mix(in srgb, var(--ink) 15%, transparent); }
body.scheme-dark .eyebrow{ background: var(--paper-2); border-color: color-mix(in srgb, var(--ink) 10%, transparent); }
body.scheme-dark .pricing-foot,
body.scheme-dark .quote-or,
body.scheme-dark .cities span,
body.scheme-dark .foot-notes span{ background: var(--paper-2); }
body.scheme-dark .areas-card,
body.scheme-dark .quote-form,
body.scheme-dark .review,
body.scheme-dark .tier,
body.scheme-dark .svc-card{ background: var(--paper-2); border-color: color-mix(in srgb, var(--ink) 15%, transparent); }
body.scheme-dark .areas-map{ background: linear-gradient(160deg, var(--paper-2), var(--paper-3)); color: var(--ink-2); }
body.scheme-dark .form-success{ background: var(--paper-2); }
body.scheme-dark .size-opt:has(input:checked){ background: var(--mane); color: var(--paper); border-color: var(--mane); }
body.scheme-dark .photo-caption{ background: var(--paper-2); color: var(--ink); }
body.scheme-dark .photo-stamp{ background: var(--paper-2); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
body.scheme-dark .hero-trust{ background: color-mix(in srgb, var(--paper-2) 60%, transparent); border-color: color-mix(in srgb, var(--ink) 12%, transparent); }
body.scheme-dark .photo-pin{ background: var(--paper-2); }


/* ── Eyebrow price badge ── */
.eyebrow-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mane);
  color: var(--on-mane, #fff);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.01em;
}

/* ── FAQ section ── */
.faq {
  padding: var(--section-pad) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}
.faq-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 40px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.faq-item {
  background: var(--paper);
  padding: 24px 28px;
}
.faq-item dt {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.faq-item dd {
  color: var(--ink-2);
  line-height: 1.6;
  font-size: .95rem;
}
.faq-item dd a { color: var(--mane); }
body.scheme-dark .faq-item { background: var(--paper-2); }

/* =================================================================
   PROFESSIONAL MINIMAL OVERRIDE
   ================================================================= */

/* ── 1. Design tokens ─────────────────────────────────────────── */
:root {
  --r-sm:  4px;
  --r:     6px;
  --r-lg:  10px;
  --r-xl:  12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 2px 12px rgba(0,0,0,.07);
  --shadow-lg: 0 4px 24px rgba(0,0,0,.09);
}

/* ── 2. Remove decorative backgrounds ─────────────────────────── */
body::before { display: none; }
.grain       { display: none; }

/* ── 3. Typography — full sans, no Instrument Serif ──────────── */
.display,
.display-2,
.section-title {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.display {
  font-size: clamp(38px, 7vw, 96px);
  line-height: 1.03;
}
.display-2 {
  font-size: clamp(28px, 4.5vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.section-title {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

/* em accents: bold underline instead of serif italic */
.display em,
.display-2 em,
.section-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--mane);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mane) 35%, transparent);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* stat numbers: sans, no italic */
.stat-num {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
}

/* review quotes: sans */
.review blockquote {
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.55;
}
.review blockquote em { font-style: normal; font-weight: 700; }

/* big rating number */
.big-rating { font-family: var(--sans); font-style: normal; font-weight: 700; }

/* source bar review platform names */
.source-bar .src { font-family: var(--sans); font-style: normal; font-size: 15px; font-weight: 600; }

/* benefit headings */
.benefit h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(16px, 1.4vw, 20px); }

/* photo caption */
.photo-caption { font-family: var(--sans); font-style: normal; font-size: 13px; }

/* stamp year */
.stamp-year { font-family: var(--sans); font-style: normal; font-size: 24px; font-weight: 700; }

/* step numbers */
.step-num { font-family: var(--sans); font-style: normal; font-weight: 700; }

/* ── 4. Buttons — rectangular, no lift ───────────────────────── */
.btn {
  border-radius: var(--r);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.btn:hover  { transform: none; box-shadow: none; }
.btn:active { transform: none; }

.btn-mane { box-shadow: none; }
.btn-mane:hover { box-shadow: none; background: var(--mane-deep); }
.btn-ghost {
  --br: color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: var(--r);
}
.btn-ghost:hover { --bg: transparent; --br: var(--ink); }

/* ── 5. Header ───────────────────────────────────────────────── */
.site-header {
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.99);
  border-bottom-color: color-mix(in srgb, var(--ink) 12%, transparent);
}

/* brand name — sans, not serif italic */
.brand-name {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* phone pill — outlined, not filled orange */
.phone-pill {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: none;
  border-radius: var(--r);
}
.phone-pill:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  transform: none;
}
.phone-pill .phone-num { display: inline; }

/* ── 6. Eyebrow pill → flat tag ─────────────────────────────── */
.eyebrow {
  border-radius: var(--r);
  background: var(--paper-2);
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  padding: 7px 14px;
  gap: 12px;
}
.eyebrow-price {
  border-radius: var(--r-sm);
}

/* ── 7. Hero ─────────────────────────────────────────────────── */
.hero-photo {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

/* hide decorative stamp overlay */
.photo-stamp { display: none; }

/* location pin — keep but straighten */
.photo-pin {
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
}
.pin-dot { box-shadow: none; }

/* hero trust card */
.hero-trust { border-radius: var(--r); }

/* ── 8. Why section ──────────────────────────────────────────── */
.why-photo {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.photo-caption { border-radius: var(--r-sm); }

/* benefit icon — simple square */
.benefit-icon { border-radius: var(--r); }

/* ── 9. Reviews ──────────────────────────────────────────────── */
.review {
  border-radius: var(--r);
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.review:hover { transform: none; box-shadow: var(--shadow-sm); }

/* arrow buttons — square */
.arrow { border-radius: var(--r); }

/* ── 10. Process / Steps ─────────────────────────────────────── */
.step { row-gap: 6px; }

/* ── 11. Services ────────────────────────────────────────────── */
.svc-card { border-radius: var(--r); }

/* ── 12. Pricing tiers ───────────────────────────────────────── */
.tier { border-radius: var(--r); }
.tier-featured { border-radius: var(--r); }

/* ── 13. CTA Banner ──────────────────────────────────────────── */
.phone-pill-light {
  border-radius: var(--r);
  border: 1.5px solid color-mix(in srgb, var(--paper) 25%, transparent);
}

/* ── 14. Quote form ──────────────────────────────────────────── */
.quote-form { border-radius: var(--r); }

/* form fields */
.field input,
.field select {
  border-radius: var(--r-sm);
}

/* size radio chips */
.size-opt span { border-radius: var(--r-sm); }

/* submit button */
.btn-block { border-radius: var(--r); }

/* ── 15. FAQ section ─────────────────────────────────────────── */
.faq-list { border-radius: var(--r); }
.faq-item:first-child { border-radius: var(--r) var(--r) 0 0; }
.faq-item:last-child  { border-radius: 0 0 var(--r) var(--r); }

/* ── 16. Footer ──────────────────────────────────────────────── */
.site-footer .brand-name {
  font-family: var(--sans);
  font-style: normal;
}

/* ── 17. Mobile CTA bar ──────────────────────────────────────── */
.mobile-cta .btn { border-radius: var(--r); }

/* ── 18. Dark scheme adjustments ─────────────────────────────── */
body.scheme-dark .site-header {
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 12%, transparent);
}

/* =================================================================
   PROMO BAR — $50 off announcement
   ================================================================= */
.promo-bar {
  position: relative;
  background: var(--mane);
  color: var(--on-mane, #fff);
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  z-index: 60;
}
.promo-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.promo-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,0,0,.18);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.promo-cta {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  margin-left: 4px;
}
.promo-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 4px;
}
.promo-close:hover { opacity: 1; }

/* =================================================================
   TRUST STRIP — hero top bar
   ================================================================= */
.trust-strip {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  padding: 10px var(--gutter);
  margin: 0 calc(-1 * var(--gutter));
  margin-top: -32px;    /* flush with hero top padding */
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.trust-strip-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 0;
  justify-content: center;
}
.ts-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  padding: 0 16px;
  white-space: nowrap;
}
.ts-item svg {
  width: 15px; height: 15px;
  color: var(--mane);
  flex-shrink: 0;
}
.ts-item-offer { color: var(--mane); }
.ts-item-offer strong { font-weight: 700; }
.ts-sep {
  width: 1px;
  height: 16px;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
  flex-shrink: 0;
}
.ts-sep-hide { display: none; }

@media (min-width: 640px) {
  .ts-sep-hide { display: block; }
}
@media (max-width: 600px) {
  .trust-strip { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .quote-form { padding: 20px 16px 24px; box-sizing: border-box; width: 100%; }
}

/* =================================================================
   SERVICES — single card with icon grid
   ================================================================= */
.svc-single-card {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-lg);
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px;
  align-items: center;
}
.svc-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: background .15s, color .15s;
}
.svc-icon-item:hover {
  background: color-mix(in srgb, var(--mane) 6%, transparent);
  color: var(--mane);
}
.svc-icon-wrap {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: var(--r);
  transition: background .15s;
}
.svc-icon-item:hover .svc-icon-wrap {
  background: color-mix(in srgb, var(--mane) 10%, transparent);
}
.svc-icon-wrap svg {
  width: 22px; height: 22px;
  color: var(--ink);
  transition: color .15s;
}
.svc-icon-item:hover .svc-icon-wrap svg { color: var(--mane); }
.svc-icon-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.svc-icon-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* =================================================================
   FOOTER — phone number visibility fix
   ================================================================= */
.site-footer .contact-phone {
  color: var(--mane) !important;
  font-weight: 700;
  text-decoration: none;
}
.site-footer .contact-phone:hover {
  text-decoration: underline;
}
.site-footer ul li a {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  text-decoration: none;
}
.site-footer ul li a:hover {
  color: var(--paper);
}
/* plain list items (no links) */
.footer-col ul li {
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  font-size: 14px;
}

/* =================================================================
   BUG FIXES
   ================================================================= */

/* 1. FAQ width — --max-w and --section-pad were undefined variables;
      override with the same values every other section uses */
.faq {
  max-width: var(--max);
  padding: 64px var(--gutter);
}

/* 2. Footer phone-pill-light — the .phone-pill pro-theme override
      sets color: var(--ink) which wins over .phone-pill-light because
      it appears later in the sheet. Force light colour back. */
.phone-pill-light,
.footer-brand .phone-pill {
  color: var(--paper) !important;
  border-color: color-mix(in srgb, var(--paper) 30%, transparent) !important;
}
.phone-pill-light:hover,
.footer-brand .phone-pill:hover {
  background: color-mix(in srgb, var(--paper) 10%, transparent) !important;
  border-color: var(--paper) !important;
}

/* 3. Footer column list items — ensure plain <li> text (no <a>)
      is readable on the dark footer background */
.footer-col li {
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  font-size: 14px;
  line-height: 1.9;
}

/* =================================================================
   $50 OFF POPUP
   ================================================================= */
.offer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 900;
  opacity: 0;
  transition: opacity .3s ease;
}
.offer-backdrop.visible {
  display: block;
  opacity: 1;
}
.offer-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 901;
  padding: 20px;
  pointer-events: none;
}
.offer-popup.visible {
  pointer-events: auto;
}
.offer-popup-inner {
  background: var(--paper);
  border-radius: 16px;
  padding: 40px 32px 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  transform: translateY(24px) scale(.97);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.offer-popup.visible .offer-popup-inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.offer-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--ink-3);
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.offer-close:hover { color: var(--ink); background: var(--paper-2); }
.offer-close svg { width: 18px; height: 18px; display: block; }
.offer-badge {
  display: inline-block;
  background: color-mix(in srgb, var(--mane) 12%, transparent);
  color: var(--mane);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.offer-amount {
  font-family: var(--sans);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: var(--mane);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.offer-amount span {
  font-size: 36px;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: 0;
}
.offer-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.offer-sub {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 24px;
}
.offer-cta { width: 100%; justify-content: center; }
.offer-fine {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.03em;
}

/* =================================================================
   HERO BADGES
   Mobile: overlays bottom of hero image via negative margin-top
   Desktop (≥960px): sits below the image in normal flow
   ================================================================= */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: absolute;
  top: 16px;
  left: 12px;
  right: 12px;
  z-index: 3;
}
.hbadge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #111827;
  border-radius: 10px;
  padding: 8px 14px 8px 10px;
  font-family: var(--sans);
  box-shadow: 0 4px 16px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.07);
  white-space: nowrap;
}
.hbadge-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
}
.hbadge-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hbadge-platform {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  line-height: 1;
}
.hbadge-rating {
  font-size: 12.5px;
  font-weight: 500;
  color: #111827;
  line-height: 1.2;
}
.hbadge-rating strong { font-weight: 700; }

/* hero-media needs to be the containing block on mobile */
.hero-media { position: relative; }

@media (min-width: 960px) {
  .hero-badges {
    position: static;
    margin-top: 16px;
    padding: 0;
    gap: 10px;
  }
  .hbadge {
    box-shadow: 0 1px 6px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.07);
  }
}

/* =================================================================
   MULTI-STEP FORM
   ================================================================= */
.form-progress {
  height: 3px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 99px;
  margin-bottom: 18px;
  overflow: hidden;
}
.form-progress-bar {
  height: 100%;
  background: var(--mane);
  border-radius: 99px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.form-step-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.form-step { display: none; }
.form-step.active { display: block; }
.field-optional {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: none;
  font-weight: 400;
}
#formNextBtn { margin-top: 28px; }
.form-back {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.03em;
  transition: color .15s;
}
.form-back:hover { color: var(--ink); }