/* Graceful Auto Detailing — shared styles for every page
   Direction: "Detail Bay" — a freshly coated panel at night: water beads and a
   reflection streak over gloss navy, electric blue + cyan accents. */

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

/* ═══════════════ 1. COLOR SYSTEM ═══════════════ */
:root {
  /* Grounds: gloss navy, never flat black */
  --ground: #050a16;
  --ground-deep: #03070f;
  --navy-1: #0a1428;
  --navy-2: #0f1c36;
  --navy-3: #16264a;
  /* Brand + LED accents */
  --cobalt: #1565c8;
  --cobalt-deep: #0d3f8f;
  --electric: #2b8af5;
  --electric-hi: #6cb4ff;
  --cyan: #22d3ee;
  --cyan-hi: #8ef0ff;
  --ink: #04121c;           /* dark ink on LED-lit surfaces */
  --star: #f5c518;
  /* Text */
  --text: #f2f6fc;
  --text-2: #b9c4d8;
  --text-3: #8c9ab3;
  --on-cobalt-2: #dbe8ff;
  /* Lines */
  --line: rgba(148,190,255,0.12);
  --line-2: rgba(148,190,255,0.24);
  --line-cyan: rgba(34,211,238,0.45);
  /* LED light */
  --led: linear-gradient(100deg, #2b8af5 0%, #1fb0f2 55%, #22d3ee 100%);
  --led-hover: linear-gradient(100deg, #45a0ff 0%, #3cc4f6 55%, #5fe3f5 100%);
  --led-line: linear-gradient(90deg, transparent, rgba(34,211,238,0.7), rgba(43,138,245,0.7), transparent);
  --glow: 0 12px 30px -12px rgba(34,211,238,0.7);
  --glow-strong: 0 16px 40px -10px rgba(34,211,238,0.85);
  --card-shadow: 0 24px 50px -30px rgba(0,0,0,0.9);
  /* Water beading on a ceramic-coated panel (pure CSS) */
  --beads:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.62' cy='.68' r='.7'%3E%3Cstop offset='0' stop-color='%2396c3ff' stop-opacity='.13'/%3E%3Cstop offset='.7' stop-color='%2396c3ff' stop-opacity='.04'/%3E%3Cstop offset='1' stop-color='%23cfe6ff' stop-opacity='.12'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='39.2' cy='169.2' r='2.8' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='38.2' cy='168.2' rx='0.9' ry='0.6' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 38.2 168.2)'/%3E%3Ccircle cx='139.3' cy='95.1' r='2.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='138.6' cy='94.2' rx='0.7' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 138.6 94.2)'/%3E%3Ccircle cx='131.9' cy='9.7' r='2.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='131.2' cy='8.9' rx='0.7' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 131.2 8.9)'/%3E%3Ccircle cx='18.2' cy='23.6' r='3.4' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='17.0' cy='22.3' rx='1.1' ry='0.7' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 17.0 22.3)'/%3E%3Ccircle cx='215.0' cy='32.2' r='3.3' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='213.8' cy='30.9' rx='1.1' ry='0.7' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 213.8 30.9)'/%3E%3Ccircle cx='163.1' cy='246.4' r='2.5' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='162.3' cy='245.5' rx='0.8' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 162.3 245.5)'/%3E%3Ccircle cx='103.1' cy='253.8' r='4.4' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='101.6' cy='252.2' rx='1.4' ry='1.0' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 101.6 252.2)'/%3E%3Ccircle cx='223.2' cy='75.3' r='2.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='222.4' cy='74.5' rx='0.7' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 222.4 74.5)'/%3E%3Ccircle cx='30.6' cy='80.2' r='2.3' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='29.8' cy='79.3' rx='0.7' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 29.8 79.3)'/%3E%3Ccircle cx='47.0' cy='151.2' r='6.9' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='44.6' cy='148.6' rx='2.2' ry='1.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 44.6 148.6)'/%3E%3Ccircle cx='96.8' cy='142.4' r='4.9' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='95.1' cy='140.5' rx='1.6' ry='1.1' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 95.1 140.5)'/%3E%3Ccircle cx='15.5' cy='53.5' r='2.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='14.7' cy='52.7' rx='0.7' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 14.7 52.7)'/%3E%3Ccircle cx='111.2' cy='81.7' r='5.3' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='109.3' cy='79.7' rx='1.7' ry='1.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 109.3 79.7)'/%3E%3Ccircle cx='181.7' cy='63.5' r='6.6' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='179.4' cy='61.0' rx='2.1' ry='1.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 179.4 61.0)'/%3E%3Ccircle cx='136.6' cy='227.5' r='4.4' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='135.0' cy='225.9' rx='1.4' ry='1.0' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 135.0 225.9)'/%3E%3Ccircle cx='74.9' cy='-5.2' r='5.8' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='72.8' cy='-7.4' rx='1.9' ry='1.3' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 72.8 -7.4)'/%3E%3Ccircle cx='74.9' cy='254.8' r='5.8' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='72.8' cy='252.6' rx='1.9' ry='1.3' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 72.8 252.6)'/%3E%3Ccircle cx='108.7' cy='196.9' r='2.3' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='107.9' cy='196.0' rx='0.7' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 107.9 196.0)'/%3E%3Ccircle cx='198.8' cy='149.0' r='5.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='197.0' cy='147.0' rx='1.7' ry='1.1' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 197.0 147.0)'/%3E%3Ccircle cx='81.6' cy='180.8' r='7.6' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='78.9' cy='177.9' rx='2.4' ry='1.7' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 78.9 177.9)'/%3E%3Ccircle cx='150.8' cy='118.6' r='4.5' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='149.2' cy='116.9' rx='1.4' ry='1.0' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 149.2 116.9)'/%3E%3Ccircle cx='245.6' cy='123.3' r='7.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='243.1' cy='120.5' rx='2.3' ry='1.6' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 243.1 120.5)'/%3E%3Ccircle cx='15.8' cy='182.4' r='5.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='14.0' cy='180.4' rx='1.7' ry='1.1' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 14.0 180.4)'/%3E%3Ccircle cx='-1.8' cy='213.7' r='5.0' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='-3.5' cy='211.8' rx='1.6' ry='1.1' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 -3.5 211.8)'/%3E%3Ccircle cx='258.2' cy='213.7' r='5.0' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='256.5' cy='211.8' rx='1.6' ry='1.1' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 256.5 211.8)'/%3E%3Ccircle cx='100.3' cy='173.8' r='2.7' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='99.4' cy='172.8' rx='0.9' ry='0.6' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 99.4 172.8)'/%3E%3Ccircle cx='120.0' cy='43.7' r='2.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='119.3' cy='42.9' rx='0.7' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 119.3 42.9)'/%3E%3Ccircle cx='15.3' cy='199.7' r='2.3' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='14.5' cy='198.9' rx='0.7' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 14.5 198.9)'/%3E%3C/svg%3E") 0 0 / 260px 260px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.62' cy='.68' r='.7'%3E%3Cstop offset='0' stop-color='%2396c3ff' stop-opacity='.13'/%3E%3Cstop offset='.7' stop-color='%2396c3ff' stop-opacity='.04'/%3E%3Cstop offset='1' stop-color='%23cfe6ff' stop-opacity='.12'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='117.3' cy='107.9' r='1.0' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='116.9' cy='107.6' rx='0.3' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 116.9 107.6)'/%3E%3Ccircle cx='36.7' cy='134.7' r='1.5' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='36.2' cy='134.2' rx='0.5' ry='0.3' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 36.2 134.2)'/%3E%3Ccircle cx='87.1' cy='85.9' r='2.6' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='86.2' cy='84.9' rx='0.8' ry='0.6' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 86.2 84.9)'/%3E%3Ccircle cx='0.5' cy='63.1' r='1.1' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='0.2' cy='62.7' rx='0.4' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 0.2 62.7)'/%3E%3Ccircle cx='170.5' cy='63.1' r='1.1' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='170.2' cy='62.7' rx='0.4' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 170.2 62.7)'/%3E%3Ccircle cx='11.8' cy='134.9' r='1.8' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='11.1' cy='134.3' rx='0.6' ry='0.4' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 11.1 134.3)'/%3E%3Ccircle cx='39.6' cy='7.2' r='1.1' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='39.2' cy='6.8' rx='0.4' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 39.2 6.8)'/%3E%3Ccircle cx='125.6' cy='148.8' r='3.6' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='124.3' cy='147.4' rx='1.1' ry='0.8' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 124.3 147.4)'/%3E%3Ccircle cx='5.8' cy='55.9' r='1.9' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='5.1' cy='55.2' rx='0.6' ry='0.4' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 5.1 55.2)'/%3E%3Ccircle cx='19.7' cy='161.8' r='1.6' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='19.1' cy='161.2' rx='0.5' ry='0.3' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 19.1 161.2)'/%3E%3Ccircle cx='26.3' cy='139.0' r='1.3' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='25.9' cy='138.5' rx='0.4' ry='0.3' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 25.9 138.5)'/%3E%3Ccircle cx='157.8' cy='77.0' r='1.0' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='157.4' cy='76.6' rx='0.3' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 157.4 76.6)'/%3E%3Ccircle cx='58.3' cy='82.4' r='1.7' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='57.7' cy='81.8' rx='0.5' ry='0.4' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 57.7 81.8)'/%3E%3Ccircle cx='6.3' cy='147.2' r='1.1' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='5.9' cy='146.8' rx='0.3' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 5.9 146.8)'/%3E%3Ccircle cx='132.6' cy='35.5' r='1.1' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='132.3' cy='35.0' rx='0.4' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 132.3 35.0)'/%3E%3Ccircle cx='152.0' cy='128.3' r='3.4' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='150.8' cy='127.0' rx='1.1' ry='0.8' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 150.8 127.0)'/%3E%3Ccircle cx='98.7' cy='124.1' r='2.4' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='97.9' cy='123.1' rx='0.8' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 97.9 123.1)'/%3E%3Ccircle cx='81.0' cy='140.6' r='1.0' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='80.6' cy='140.2' rx='0.3' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 80.6 140.2)'/%3E%3Ccircle cx='156.9' cy='150.9' r='1.1' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='156.6' cy='150.5' rx='0.3' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 156.6 150.5)'/%3E%3Ccircle cx='62.1' cy='76.7' r='1.4' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='61.6' cy='76.2' rx='0.4' ry='0.3' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 61.6 76.2)'/%3E%3Ccircle cx='15.9' cy='122.1' r='1.0' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='15.5' cy='121.7' rx='0.3' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 15.5 121.7)'/%3E%3Ccircle cx='127.2' cy='37.7' r='1.7' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='126.6' cy='37.1' rx='0.5' ry='0.4' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 126.6 37.1)'/%3E%3Ccircle cx='94.6' cy='105.8' r='1.9' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='93.9' cy='105.1' rx='0.6' ry='0.4' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 93.9 105.1)'/%3E%3Ccircle cx='28.9' cy='59.2' r='1.1' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='28.5' cy='58.8' rx='0.3' ry='0.2' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 28.5 58.8)'/%3E%3Ccircle cx='58.9' cy='101.5' r='3.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='57.8' cy='100.3' rx='1.0' ry='0.7' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 57.8 100.3)'/%3E%3Ccircle cx='17.6' cy='11.2' r='1.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='17.1' cy='10.7' rx='0.4' ry='0.3' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 17.1 10.7)'/%3E%3Ccircle cx='132.1' cy='63.7' r='2.7' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='131.2' cy='62.7' rx='0.8' ry='0.6' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 131.2 62.7)'/%3E%3Ccircle cx='114.9' cy='152.8' r='2.1' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='114.2' cy='152.0' rx='0.7' ry='0.5' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 114.2 152.0)'/%3E%3Ccircle cx='69.2' cy='-1.9' r='3.4' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='68.0' cy='-3.1' rx='1.1' ry='0.7' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 68.0 -3.1)'/%3E%3Ccircle cx='69.2' cy='168.1' r='3.4' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='68.0' cy='166.9' rx='1.1' ry='0.7' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 68.0 166.9)'/%3E%3Ccircle cx='100.4' cy='150.1' r='3.4' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='99.2' cy='148.9' rx='1.1' ry='0.7' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 99.2 148.9)'/%3E%3Ccircle cx='63.8' cy='42.0' r='1.5' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='63.3' cy='41.4' rx='0.5' ry='0.3' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 63.3 41.4)'/%3E%3Ccircle cx='27.6' cy='11.8' r='2.9' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='26.6' cy='10.7' rx='0.9' ry='0.6' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 26.6 10.7)'/%3E%3Ccircle cx='131.6' cy='82.1' r='2.6' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='130.7' cy='81.1' rx='0.8' ry='0.6' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 130.7 81.1)'/%3E%3Ccircle cx='8.9' cy='43.9' r='2.8' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='7.9' cy='42.8' rx='0.9' ry='0.6' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 7.9 42.8)'/%3E%3Ccircle cx='71.3' cy='29.0' r='1.2' fill='url(%23b)' stroke='%23b9dcff' stroke-opacity='.16' stroke-width='.6'/%3E%3Cellipse cx='70.9' cy='28.6' rx='0.4' ry='0.3' fill='%23ffffff' fill-opacity='.55' transform='rotate(-35 70.9 28.6)'/%3E%3C/svg%3E") 61px 37px / 170px 170px;
  /* Type */
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Shape + space */
  --r-card: 14px;
  --r-ctl: 10px;
  --nav-h: 70px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 7.5rem);

  /* Names still used by inline styles in the page markup */
  --black: #050a16;
  --dark: #050a16;
  --panel: #0f1c36;
  --panel2: #0a1428;
  --blue2: #6cb4ff;
  --silver: #b9c4d8;
  --chrome: #f2f6fc;
  --white: #ffffff;
  --border: rgba(148,190,255,0.12);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; background: var(--ground); }
body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: 0.005em;
  background: var(--ground);
  color: var(--text-2);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
picture { display: block; }
a { color: var(--electric-hi); text-underline-offset: 3px; }
strong { color: var(--text); font-weight: 600; }
::selection { background: rgba(34,211,238,0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: #24365e var(--ground); }
input, select, textarea, button { font: inherit; }

.icon { width: 1em; height: 1em; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chrome { color: var(--text); }
.blue-glow { color: var(--electric-hi); }
.shield-frame, .cross-glow, .hero-shield-bg, .scroll-hint, .hero-divider, .shield-divider { display: none; }

/* ═══════════════ 2. NAV ═══════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  height: var(--nav-h);
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  display: flex; align-items: center; gap: 1.5rem;
  background: rgba(5,10,22,0.82);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--led-line); opacity: 0.55; pointer-events: none; }
.nav-logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; min-height: 44px; flex: none; }
.nav-logo img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1; }
.nav-logo-name { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: 0.03em; text-transform: uppercase; }
.nav-logo-sub { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); margin-top: 0.3rem; }
.nav-links { display: flex; gap: clamp(1rem, 1.8vw, 1.75rem); list-style: none; margin-left: auto; }
.nav-links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-2); text-decoration: none; font-size: 0.98rem; font-weight: 500;
  transition: color 0.2s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--led); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-phone {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 1rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nav-phone .icon { width: 17px; height: 17px; color: var(--cyan); }
.nav-phone:hover { color: var(--cyan-hi); }
.nav-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--led); color: var(--ink); padding: 0 1.3rem; border-radius: var(--r-ctl);
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: var(--glow); transition: box-shadow 0.25s, transform 0.2s;
}
.nav-cta:hover { background: var(--led-hover); box-shadow: var(--glow-strong); transform: translateY(-1px); }
.hamburger {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border-radius: var(--r-ctl);
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: rgba(15,28,54,0.8); border: 1px solid var(--line-2); cursor: pointer;
}
.hamburger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; }

/* ═══════════════ 3. BUTTONS ═══════════════ */
.btn-primary, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 54px; padding: 0 1.9rem; border-radius: var(--r-ctl);
  font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.1;
  transition: background 0.25s, border-color 0.2s, color 0.2s, box-shadow 0.25s, transform 0.2s;
}
.btn-primary { background: var(--led); color: var(--ink); border: 0; box-shadow: var(--glow); }
.btn-primary:hover { background: var(--led-hover); box-shadow: var(--glow-strong); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-outline { background: rgba(15,28,54,0.55); color: var(--text); border: 1px solid var(--line-2); }
.btn-outline:hover { border-color: var(--cyan); color: #fff; background: rgba(34,211,238,0.1); box-shadow: 0 0 0 1px var(--line-cyan) inset; }

/* ═══════════════ 4. HERO (home) ═══════════════ */
#hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 920px);
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 3.5rem) var(--gutter) 0;
  background:
    linear-gradient(112deg, transparent 22%, rgba(170,205,255,0.045) 30%, transparent 37%, transparent 58%, rgba(170,205,255,0.025) 62%, transparent 66%),
    radial-gradient(60rem 26rem at 0% 100%, rgba(21,101,200,0.12), transparent 70%),
    linear-gradient(180deg, #060b16 0%, #03060c 100%);
}
/* Water beads on a freshly coated panel: thick along the top, drying out toward the content */
#hero::before, .page-hero::before, .mobile-menu::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--beads);
  opacity: 1;
  -webkit-mask: radial-gradient(120% 90% at 85% 0%, #000 0%, rgba(0,0,0,0.45) 45%, transparent 80%);
          mask: radial-gradient(120% 90% at 85% 0%, #000 0%, rgba(0,0,0,0.45) 45%, transparent 80%);
}
/* No z-index here: the logo blends with the black backdrop behind it */
.hero-content {
  position: relative;
  width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  grid-template-areas:
    "copy   logo"
    "ctas   logo"
    "rating logo"
    "stats  stats";
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-content > picture { grid-area: logo; justify-self: center; position: relative; }
/* true-black backdrop: the logo's own black blends in and nothing brightens it */
.hero-content > picture::before {
  content: ''; position: absolute; inset: -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0.6) 80%, transparent);
}
.hero-logo { position: relative; display: block; width: min(440px, 36vw); height: auto; mix-blend-mode: lighten; }
.hero-tagline-wrap { grid-area: copy; align-self: end; }
.hero-h1 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.75rem, 6vw, 5.4rem); line-height: 0.92; letter-spacing: -0.005em;
  color: #fff; max-width: 13ch; text-wrap: balance;
}
.hero-h1 span { color: var(--cyan); display: inline-block; text-shadow: 0 0 28px rgba(34,211,238,0.45); }
.hero-sub { font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.5; color: var(--text); margin: 1.4rem 0 0.8rem; max-width: 34ch; }
.hero-tagline { font-size: 0.88rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }
.hero-tagline span { color: var(--cyan-hi); }
.hero-buttons { grid-area: ctas; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; }
.hero-rating {
  grid-area: rating; align-self: start; justify-self: start;
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  min-height: 44px; margin-top: 1rem;
  color: var(--text-2); text-decoration: none; font-size: 1rem; font-weight: 500;
}
.hero-rating:hover { color: #fff; }
.hero-stats {
  grid-area: stats; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: clamp(2.5rem, 6vh, 4.5rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  background: rgba(10,20,40,0.72); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
}
.hero-stats::before { content: ''; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; background: var(--led-line); }
.hero-stat { padding: 1.3rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.hero-stat + .hero-stat { border-left: 1px solid var(--line); }
.hs-num { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; color: #fff; text-transform: uppercase; }
.hs-label { font-size: 0.92rem; color: var(--text-3); }

/* ═══════════════ 5. SECTIONS: distinct grounds ═══════════════ */
section { padding: var(--section-y) var(--gutter); position: relative; }
.container { max-width: 1240px; margin: 0 auto; position: relative; }
.text-center { text-align: left; }   /* section heads read left-aligned in this design */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan);
}
.section-eyebrow::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--led); box-shadow: 0 0 10px rgba(34,211,238,0.8); }
.section-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.5rem, 5vw, 3.9rem); line-height: 0.95; letter-spacing: -0.003em;
  color: #fff; margin-bottom: 1.3rem; text-wrap: balance;
}
.services-intro, .why-intro, .process-intro, .area-intro, .work-intro {
  max-width: 60ch; font-size: 1.12rem; line-height: 1.7; color: var(--text-2); margin: 0 0 3rem;
}

#services {
  background:
    radial-gradient(50rem 30rem at 100% 0%, rgba(21,101,200,0.12), transparent 65%),
    var(--navy-1);
}
#our-work {
  background:
    radial-gradient(50rem 22rem at 50% 100%, rgba(21,101,200,0.1), transparent 70%),
    var(--ground);
}
#why { background: linear-gradient(180deg, var(--navy-1), var(--ground) 85%); }
#about {
  background:
    radial-gradient(40rem 30rem at 0% 30%, rgba(21,101,200,0.1), transparent 70%),
    var(--ground);
}
#process { background: var(--navy-1); }
/* the cobalt-drenched band: one fully saturated brand moment */
#testimonials {
  background:
    linear-gradient(160deg, #0f4fa8 0%, #0a3580 50%, #071f4f 100%);
  color: var(--on-cobalt-2);
}
#testimonials::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--beads); opacity: 0.45;
  -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%);
}
#service-area {
  background:
    radial-gradient(44rem 26rem at 90% 100%, rgba(21,101,200,0.1), transparent 70%),
    var(--navy-1);
}
#faq { background: var(--ground); }
#contact .section-eyebrow { color: var(--cyan-hi); }
#contact {
  background:
    radial-gradient(40rem 30rem at 82% 40%, rgba(21,101,200,0.16), transparent 70%),
    var(--ground);
}
#services, #our-work, #why, #about, #process, #service-area, #faq, #contact { border-top: 1px solid var(--line); }

/* ═══════════════ 6. SERVICES ═══════════════ */
.services-intro { margin-bottom: 1.1rem; }
.services-note {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 3rem;
  font-size: 1rem; font-weight: 500; color: var(--cyan-hi);
}
.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.service-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid transparent; border-radius: var(--r-card);
  background:
    linear-gradient(180deg, var(--navy-2), #0c1730) padding-box,
    linear-gradient(160deg, rgba(148,190,255,0.28), rgba(148,190,255,0.08)) border-box;
  padding: 1.85rem 1.5rem 1.5rem;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, background 0.3s;
}
.service-card:hover {
  transform: translateY(-4px);
  background:
    linear-gradient(180deg, var(--navy-2), #0c1730) padding-box,
    linear-gradient(160deg, rgba(34,211,238,0.75), rgba(43,138,245,0.35)) border-box;
  box-shadow: 0 28px 60px -30px rgba(34,211,238,0.45);
}
.service-card:has(.badge-popular) {
  background:
    radial-gradient(22rem 12rem at 50% 0%, rgba(34,211,238,0.14), transparent 70%) padding-box,
    linear-gradient(180deg, #11234a, #0c1730) padding-box,
    linear-gradient(160deg, var(--cyan), var(--electric)) border-box;
  box-shadow: 0 30px 60px -28px rgba(34,211,238,0.55);
}
.badge-popular, .badge-best {
  position: absolute; top: -0.8rem; left: 1.5rem;
  font-family: var(--display); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 0.75rem; border-radius: 999px; line-height: 1;
}
.badge-popular { background: var(--led); color: var(--ink); box-shadow: var(--glow); }
.badge-best { background: var(--star); color: #1d1500; box-shadow: 0 10px 24px -10px rgba(245,197,24,0.7); }
.service-icon-wrap { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.15rem; }
.service-icon {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: var(--cyan);
  background: radial-gradient(circle at 30% 20%, rgba(34,211,238,0.25), rgba(21,101,200,0.18));
  border: 1px solid rgba(34,211,238,0.35);
  box-shadow: 0 0 18px -6px rgba(34,211,238,0.7);
}
.service-icon .icon { width: 24px; height: 24px; }
.service-duration { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.service-card:has(.badge-popular) .service-duration { color: var(--text-2); }
.service-name {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.7rem; line-height: 1; letter-spacing: 0.005em; color: #fff; margin-bottom: 0.75rem;
}
h3.service-name { line-height: 1; }
.service-desc { font-size: 1rem; line-height: 1.6; color: var(--text-2); margin-bottom: 1.3rem; }
.service-features { list-style: none; flex: 1; display: grid; align-content: start; gap: 0.6rem; margin-bottom: 1.25rem; }
.service-features li { display: flex; gap: 0.6rem; font-size: 0.97rem; line-height: 1.4; color: var(--text); text-align: left; }
.service-features li::before, .check-list li::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 0.15em;
  background: var(--cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.service-link { color: inherit; text-decoration: none; }
.service-link:hover, .service-link:focus-visible { color: var(--cyan-hi); text-decoration: underline; text-underline-offset: 4px; }
.service-more {
  align-self: stretch; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; margin-bottom: 0.9rem; padding: 0.55rem 1rem;
  border: 1px solid var(--electric-hi); border-radius: 10px;
  color: var(--electric-hi); text-decoration: none; font-weight: 600; font-size: 0.98rem; line-height: 1.3;
  transition: background 0.2s, color 0.2s;
}
.service-more:hover, .service-more:focus-visible { background: rgba(43,138,245,0.14); color: var(--cyan-hi); }
.service-price {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 0.9rem;
  border-top: 1px solid var(--line); padding-top: 1.15rem;
}
.price-block { display: flex; flex-direction: column; gap: 0.4rem; line-height: 1; }
.price-from { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-hi); }
.price-amount {
  font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 0.88; color: #fff;
  text-shadow: 0 0 24px rgba(34,211,238,0.4);
  font-variant-numeric: tabular-nums;
}
.service-price a.price-book {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.05rem; border-radius: var(--r-ctl);
  background: var(--led); color: var(--ink); text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: var(--glow); transition: background 0.25s, box-shadow 0.25s, transform 0.2s;
}
.service-price a.price-book:hover { background: var(--led-hover); box-shadow: var(--glow-strong); transform: translateY(-1px); }

/* Add-ons */
.addons { margin-top: clamp(3.5rem, 7vw, 5rem) !important; padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.addons .section-title { font-size: clamp(2rem, 3.8vw, 2.7rem) !important; margin-bottom: 0.5rem; }
.addon-hint { font-size: 1.05rem; color: var(--text-2); margin-bottom: 1.5rem; }
.addon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.addon-btn {
  display: flex; align-items: center; gap: 0.85rem; width: 100%; min-height: 62px;
  padding: 0.85rem 1.1rem; border-radius: 12px; text-align: left; cursor: pointer;
  background: rgba(15,28,54,0.85); color: var(--text); border: 1px solid var(--line-2);
  font-family: var(--body); font-weight: 600; font-size: 1.04rem;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.25s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.addon-btn:hover { border-color: var(--cyan); }
.addon-btn:active { transform: scale(0.985); }
.addon-check {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center; line-height: 1; font-size: 1.05rem; font-weight: 700;
  border: 1.5px solid var(--cyan); color: var(--cyan);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.addon-name { flex: 1; }
.addon-price { white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: 1.55rem; color: #fff; font-variant-numeric: tabular-nums; }
.addon-from { font-family: var(--body); font-size: 0.58em; font-weight: 500; color: var(--text-3); margin-right: 0.25em; }
.addon-btn[aria-pressed="true"] {
  border-color: var(--cyan); background: linear-gradient(100deg, rgba(43,138,245,0.22), rgba(34,211,238,0.16));
  box-shadow: 0 0 0 1px var(--cyan) inset, var(--glow);
}
.addon-btn[aria-pressed="true"] .addon-check { background: var(--cyan); color: var(--ink); box-shadow: 0 0 14px rgba(34,211,238,0.8); }

/* ═══════════════ 7. OUR WORK: the lightbox ═══════════════ */
/* Photos keep their own shape: nothing cropped, BEFORE/AFTER labels always show */
.work-intro { margin-bottom: 2.75rem; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; text-align: left; }
.work-item {
  display: block; min-width: 0;
  margin: 0; padding: 8px 8px 0;
  border: 1px solid transparent; border-radius: 16px;
  background:
    linear-gradient(180deg, #0f1c36, #0a1428) padding-box,
    linear-gradient(170deg, rgba(142,240,255,0.45), rgba(43,138,245,0.15) 40%, rgba(148,190,255,0.1)) border-box;
  box-shadow: 0 30px 60px -36px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.2);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s;
}
.work-item:hover { transform: translateY(-4px); box-shadow: 0 36px 70px -36px rgba(34,211,238,0.5); }
.work-item img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--navy-1); }
.work-item figcaption { padding: 0.75rem 0.4rem 0.85rem; font-size: 0.98rem; font-weight: 500; line-height: 1.45; color: var(--text); }

/* ═══════════════ 8. WHY US ═══════════════ */
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.why-card {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.3rem; align-content: start;
  padding: 1.9rem; border-radius: var(--r-card);
  background: rgba(15,28,54,0.6); border: 1px solid var(--line);
  transition: border-color 0.3s, background 0.3s;
}
.why-card:hover { border-color: var(--line-cyan); background: rgba(15,28,54,0.9); }
.why-card:first-child {
  background: radial-gradient(28rem 14rem at 0% 0%, rgba(34,211,238,0.14), transparent 70%), rgba(15,28,54,0.85);
  border-color: var(--line-cyan);
}
.why-icon {
  grid-row: span 2; width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; color: var(--cyan);
  background: radial-gradient(circle at 30% 20%, rgba(34,211,238,0.25), rgba(21,101,200,0.18));
  border: 1px solid rgba(34,211,238,0.35); box-shadow: 0 0 22px -8px rgba(34,211,238,0.8);
}
.why-icon .icon { width: 27px; height: 27px; }
.why-title { font-family: var(--display); font-weight: 800; font-size: 1.65rem; line-height: 1.05; text-transform: uppercase; color: #fff; margin-bottom: 0.55rem; }
.why-desc { font-size: 1.02rem; line-height: 1.65; color: var(--text-2); max-width: 52ch; }

/* ═══════════════ 9. ABOUT + VERSE ═══════════════ */
.about-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
/* not sticky: a sticky box would stop the logo blending into the section glow */
.about-logo-wrap { display: flex; flex-direction: column; align-items: center; }
.about-logo-wrap img { width: 100%; max-width: 340px; height: auto; mix-blend-mode: lighten; }
.about-stats {
  display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 380px; margin-top: 1.5rem;
  background: rgba(15,28,54,0.75); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.stat { padding: 1.15rem 1.25rem; }
.stat:nth-child(odd) { border-right: 1px solid var(--line); }
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.stat-num { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; color: #fff; text-transform: uppercase; }
.stat-label { font-size: 0.9rem; color: var(--text-3); margin-top: 0.3rem; }
.about-text p { font-size: 1.08rem; line-height: 1.8; color: var(--text-2); margin-bottom: 1.2rem; max-width: 64ch; }
.about-verse {
  position: relative; margin: 2.4rem 0 0; padding: 2rem 2rem 1.9rem 4.25rem;
  border-radius: var(--r-card);
  background: radial-gradient(26rem 12rem at 0% 0%, rgba(34,211,238,0.16), transparent 70%), linear-gradient(160deg, #11234a, #0b1730);
  border: 1px solid var(--line-cyan);
  box-shadow: 0 26px 50px -30px rgba(34,211,238,0.45);
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.3; color: #fff;
}
.about-verse::before {
  content: ''; position: absolute; left: 1.6rem; top: 2.15rem; width: 20px; height: 30px;
  background: var(--cyan); filter: drop-shadow(0 0 8px rgba(34,211,238,0.9));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Crect x='7' y='0' width='4' height='28' rx='1'/%3E%3Crect x='0' y='7' width='18' height='4' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Crect x='7' y='0' width='4' height='28' rx='1'/%3E%3Crect x='0' y='7' width='18' height='4' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.about-verse br { display: block; content: ''; margin-top: 0.9rem; }
.about-verse strong {
  font-family: var(--body); font-style: normal; font-weight: 600; font-size: 0.88rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan);
}
.about-pillars { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.about-pillar {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 42px; padding: 0 1rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(15,28,54,0.7);
  font-size: 0.98rem; font-weight: 500; color: var(--text);
}
.about-pillar span { display: grid; place-items: center; color: var(--cyan); }
.about-pillar .icon { width: 17px; height: 17px; }

/* ═══════════════ 10. PROCESS ═══════════════ */
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; position: relative; }
.process-grid::before {
  content: ''; position: absolute; top: 25px; left: 26px; right: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--electric) 60%, transparent);
  box-shadow: 0 0 12px rgba(34,211,238,0.6); opacity: 0.6;
}
.process-step { position: relative; }
.step-num {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 1.35rem;
  display: grid; place-items: center;
  background: var(--navy-1); border: 2px solid var(--cyan); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  box-shadow: 0 0 22px -2px rgba(34,211,238,0.6), inset 0 0 12px rgba(34,211,238,0.25);
}
.step-title { font-family: var(--display); font-weight: 800; font-size: 1.55rem; line-height: 1.05; text-transform: uppercase; color: #fff; margin-bottom: 0.6rem; }
.step-desc { font-size: 1rem; line-height: 1.65; color: var(--text-2); }

/* ═══════════════ 11. REVIEWS (cobalt band) ═══════════════ */
#testimonials .section-eyebrow { color: #e6fbff; }
#testimonials .section-eyebrow::before { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.7); }
.rating-summary {
  display: inline-flex; align-items: center; gap: 1.1rem; margin-bottom: 2.5rem;
  padding: 1rem 1.5rem; border-radius: var(--r-card);
  background: rgba(4,18,40,0.55); border: 1px solid rgba(219,232,255,0.25);
}
.rs-score { font-family: var(--display); font-weight: 800; font-size: 3.2rem; line-height: 1; color: #fff; }
.rs-stars { color: var(--star); font-size: 1.2rem; letter-spacing: 3px; line-height: 1.2; }
.rs-label { font-size: 0.98rem; color: var(--on-cobalt-2); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.testimonial-card {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0c1d42, #091633); border: 1px solid rgba(219,232,255,0.18); border-radius: var(--r-card);
  padding: 1.85rem; box-shadow: 0 30px 60px -34px rgba(2,8,24,0.9);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s;
}
.testimonial-card:hover { transform: translateY(-3px); border-color: rgba(142,240,255,0.5); }
.t-stars { color: var(--star); letter-spacing: 2px; font-size: 1.05rem; margin-bottom: 1rem; }
.t-text { flex: 1; font-size: 1.08rem; line-height: 1.7; color: var(--text); margin-bottom: 1.5rem; }
.t-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.t-author { font-weight: 600; font-size: 1.02rem; color: #fff; }
.t-verified { font-size: 0.88rem; color: #7ee2a0; margin-top: 0.2rem; }
.t-service {
  font-size: 0.82rem; font-weight: 600; color: var(--cyan-hi); white-space: nowrap;
  background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.3);
  padding: 0.3rem 0.65rem; border-radius: 999px;
}
#testimonials .area-note { color: #fff; }
#testimonials .area-note a { display: inline-flex; align-items: center; min-height: 44px; color: #fff !important; font-weight: 600; text-decoration: underline !important; text-decoration-color: rgba(142,240,255,0.7) !important; }
#testimonials .btn-outline { display: inline-flex !important; background: #fff; color: #0a2f73; border-color: #fff; }
#testimonials .btn-outline:hover { background: var(--cyan-hi); border-color: var(--cyan-hi); color: var(--ink); }

/* ═══════════════ 12. SERVICE AREA ═══════════════ */
.area-grid { display: flex; flex-wrap: wrap; gap: 0.65rem; list-style: none; max-width: 1000px; }
.area-city {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 50px; padding: 0 1.2rem 0 0.95rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(15,28,54,0.85);
  font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.area-city:hover { border-color: var(--cyan); box-shadow: var(--glow); }
.area-city::before {
  content: ''; width: 16px; height: 16px; flex: none; background: var(--cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.area-note { margin-top: 1.8rem; font-size: 1.04rem; font-weight: 500; color: var(--cyan-hi); }

/* ═══════════════ 13. FAQ ═══════════════ */
.faq-list { max-width: 880px; text-align: left; display: grid; gap: 0.7rem; }
.faq-item {
  border-radius: var(--r-card); background: rgba(15,28,54,0.6); border: 1px solid var(--line);
  transition: border-color 0.25s, background 0.25s;
}
.faq-item:hover { border-color: var(--line-2); }
.faq-item[open] { border-color: var(--line-cyan); background: rgba(15,28,54,0.95); box-shadow: 0 24px 50px -32px rgba(34,211,238,0.45); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: 68px; padding: 1.1rem 1.4rem;
  font-family: var(--display); font-weight: 800; font-size: 1.4rem; line-height: 1.15;
  text-transform: uppercase; color: #fff; border-radius: var(--r-card);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--line-cyan);
  background:
    linear-gradient(var(--cyan), var(--cyan)) center / 12px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) center / 2px 12px no-repeat;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); box-shadow: 0 0 14px rgba(34,211,238,0.6); }
.faq-item summary h3 { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; margin: 0; }
.faq-item p { padding: 0 3.5rem 1.5rem 1.4rem; font-size: 1.05rem; line-height: 1.75; color: var(--text-2); max-width: 72ch; }

/* ═══════════════ 14. CONTACT + BOOKING FORM ═══════════════ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact-logo { display: block; width: 96px; height: auto; margin-bottom: 1.5rem; mix-blend-mode: lighten; }
.contact-lead { font-size: 1.1rem; line-height: 1.75; color: #cdd6e6; margin-bottom: 1.5rem; max-width: 56ch; }
.contact-info { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.contact-item { display: flex; align-items: flex-start; gap: 1rem; }
.ci-icon {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: var(--cyan);
  background: radial-gradient(circle at 30% 20%, rgba(34,211,238,0.25), rgba(21,101,200,0.18));
  border: 1px solid rgba(34,211,238,0.35);
}
.ci-icon .icon { width: 22px; height: 22px; }
.ci-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-hi); margin-bottom: 0.2rem; }
.ci-value { font-size: 1.1rem; font-weight: 600; color: #fff; }
.ci-value a { display: inline-flex; align-items: center; min-height: 44px; }
.ci-value a:hover { color: var(--cyan-hi) !important; }
.ci-sub { font-size: 0.95rem; color: var(--text-2); margin-top: 0.15rem; }
.trust-badges { display: grid; gap: 0.75rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.trust-badge { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 1.02rem; color: #cdd6e6; }
.trust-badge-icon { color: var(--cyan-hi); font-weight: 700; line-height: 1.6; }

.contact-form {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem;
  border: 1px solid transparent; border-radius: 20px;
  background:
    linear-gradient(180deg, #0f1c36, #0a1428) padding-box,
    linear-gradient(160deg, var(--cyan), rgba(43,138,245,0.5) 40%, rgba(148,190,255,0.12)) border-box;
  padding: clamp(1.25rem, 3vw, 2.1rem);
  box-shadow: 0 40px 80px -40px rgba(34,211,238,0.5), 0 30px 60px -30px rgba(0,0,0,0.8);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.45rem; }
.form-group label { font-size: 0.98rem; font-weight: 600; color: #fff; }
.form-group label span[style] { opacity: 1 !important; color: var(--text-3); font-weight: 500; letter-spacing: 0 !important; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; min-height: 52px;
  background: rgba(5,10,22,0.85); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  padding: 0.75rem 1rem; font-size: 1.02rem;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #8391aa; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: rgba(148,190,255,0.4); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,0.22); }
.form-group select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px;
}
.form-group select option { background: var(--navy-2); color: var(--text); }
.form-group input[type="date"] { color-scheme: dark; }
.form-group textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.form-addons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.form-addons .addon-btn { min-height: 50px; padding: 0.55rem 0.75rem; gap: 0.55rem; font-size: 0.95rem; background: rgba(5,10,22,0.85); }
.form-addons .addon-check { width: 22px; height: 22px; font-size: 0.85rem; }
.form-addons .addon-price { font-size: 1.1rem; }
.est-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.15rem; border-radius: var(--r-ctl);
  border: 1px solid var(--line-cyan); background: linear-gradient(100deg, rgba(43,138,245,0.18), rgba(34,211,238,0.12));
  font-size: 1rem; font-weight: 500; color: var(--text);
}
.est-total[hidden] { display: none; }
.est-total strong { font-family: var(--display); font-weight: 800; font-size: 2rem; color: #fff; margin-left: 0.4rem; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(34,211,238,0.5); }
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.slot-btn {
  min-height: 50px; padding: 0 0.3rem; border-radius: var(--r-ctl); cursor: pointer;
  background: rgba(5,10,22,0.85); color: var(--text); border: 1px solid var(--line-2);
  font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.slot-btn:hover:not(:disabled) { border-color: var(--cyan); }
.slot-btn.selected { background: var(--led); border-color: transparent; color: var(--ink); box-shadow: var(--glow); }
.slot-btn:disabled { color: var(--text-3); background: transparent; border-style: dashed; cursor: not-allowed; text-decoration: line-through; opacity: 0.6; }
.slot-msg { grid-column: 1 / -1; font-size: 1rem; color: var(--text-2); padding: 0.4rem 0; }
.slot-note { font-size: 0.92rem; color: var(--text-3); }
.btn-submit {
  min-height: 60px; padding: 0.9rem 1rem; border: none; border-radius: var(--r-ctl); cursor: pointer;
  background: var(--led); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: var(--glow); transition: background 0.25s, box-shadow 0.25s, transform 0.2s;
}
.btn-submit:hover:not(:disabled) { background: var(--led-hover); box-shadow: var(--glow-strong); transform: translateY(-1px); }
.btn-submit:disabled { cursor: progress; }
/* The booking script paints red/green backgrounds for its error/success messages: switch to white text on those */
.btn-submit[style*="gradient"] { color: #fff; box-shadow: none; }
.form-note { font-size: 0.92rem; line-height: 1.55; color: var(--text-3); text-align: center; }

/* ═══════════════ 15. FOOTER ═══════════════ */
footer { position: relative; background: var(--ground-deep); padding: clamp(3.5rem, 7vw, 5rem) var(--gutter) 1.75rem; }
footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--led-line); opacity: 0.7; }
.footer-inner { max-width: 1240px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.footer-logo { width: 64px; height: auto; margin-bottom: 1rem; border-radius: 10px; }
.footer-brand-name { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1.05; text-transform: uppercase; margin-bottom: 0.35rem; }
.footer-brand-tag { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.1rem; }
.footer-desc { font-size: 1rem; line-height: 1.7; color: var(--text-2); max-width: 38ch; margin-bottom: 1.25rem; }
.footer-faith { font-size: 0.98rem; font-style: italic; color: var(--text-3); padding-top: 1rem; border-top: 1px solid var(--line); max-width: 38ch; }
.footer-col-title { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.9rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; }
.footer-links a { display: inline-flex; align-items: center; min-height: 38px; color: var(--text-2); text-decoration: none; font-size: 1rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--cyan-hi); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-3); }

/* ═══════════════ 16. MOBILE MENU + STICKY BAR ═══════════════ */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 1000; isolation: isolate;
  background: radial-gradient(30rem 20rem at 80% 100%, rgba(21,101,200,0.14), transparent 70%), var(--ground);
  overflow-y: auto;
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: 1.25rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
}
.mobile-menu::before { opacity: 0.45; }
.mobile-menu.open { display: flex; }
.mobile-logo { width: 56px; height: auto; margin: 0.25rem 0 1.5rem; border-radius: 10px; }
.mobile-menu a {
  display: flex; align-items: center; min-height: 58px; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 800; font-size: 1.85rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
}
.mobile-menu a:hover { color: var(--cyan); }
.mobile-menu a:last-child {
  justify-content: center; margin-top: 1.5rem; border: none; border-radius: var(--r-ctl);
  background: var(--led); color: var(--ink); box-shadow: var(--glow); font-size: 1.4rem; letter-spacing: 0.08em;
}
.mobile-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 48px; height: 48px; border-radius: var(--r-ctl);
  display: grid; place-items: center;
  background: rgba(15,28,54,0.8); border: 1px solid var(--line-2); color: var(--text);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.mobile-bar { display: none; }

/* ═══════════════ 17. REVEAL MOTION ═══════════════ */
.fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.fade-up.vis { opacity: 1; transform: none; }

/* ═══════════════ 18. INNER PAGES ═══════════════ */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + 4.25rem) var(--gutter) 3.75rem;
  background:
    linear-gradient(112deg, transparent 40%, rgba(170,205,255,0.04) 48%, transparent 55%),
    radial-gradient(42rem 22rem at 0% 100%, rgba(21,101,200,0.12), transparent 70%),
    linear-gradient(180deg, #060b16 0%, #03060c 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero::before { height: 90%; }
.page-hero .container { max-width: 980px; }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1.1rem; font-size: 0.98rem; color: var(--text-3); }
.breadcrumb li + li::before { content: '/'; margin-right: 0.4rem; color: var(--text-3); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cyan-hi); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--text-2); }
.page-h1 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 0.94; letter-spacing: -0.005em;
  color: #fff; margin-bottom: 1.3rem; max-width: 17ch; text-wrap: balance;
}
.page-lead { font-size: clamp(1.1rem, 1.6vw, 1.24rem); line-height: 1.7; color: var(--text); max-width: 64ch; margin-bottom: 1.85rem; }
.info-badges {
  position: relative; display: flex; flex-wrap: wrap; margin-bottom: 2rem; width: fit-content; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: rgba(10,20,40,0.8);
}
.info-badges::before { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: var(--led-line); }
.info-badge { padding: 0.9rem 1.5rem; }
.info-badge + .info-badge { border-left: 1px solid var(--line); }
.info-badge b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.05; color: #fff; }
.info-badge:first-child b { color: var(--cyan); text-shadow: 0 0 18px rgba(34,211,238,0.45); }
.info-badge span { font-size: 0.92rem; color: var(--text-3); }
.page-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.page-section { padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter); border-bottom: 1px solid var(--line); background: var(--ground); }
.page-section:nth-of-type(even) { background: radial-gradient(40rem 22rem at 100% 0%, rgba(21,101,200,0.16), transparent 70%), var(--navy-1); }
.page-section .container { max-width: 980px; }
.page-section h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 4.2vw, 2.9rem); line-height: 0.98; color: #fff; margin-bottom: 1.3rem; text-wrap: balance;
}
.page-section p { font-size: 1.08rem; line-height: 1.8; margin-bottom: 1rem; max-width: 68ch; }
.page-section a:not(.btn-primary):not(.btn-outline) { color: var(--cyan-hi); }
.page-section a:not(.btn-primary):not(.btn-outline):hover { color: #fff; }
.page-section h3.service-name { font-size: 1.55rem; }
.check-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0.8rem 2rem; margin: 0.5rem 0 1.5rem; }
.check-list li { display: flex; gap: 0.7rem; font-size: 1.08rem; line-height: 1.5; color: var(--text); }
.check-list li::before { margin-top: 0.25em; }
.check-list a { display: inline-flex; align-items: center; min-height: 44px; }
.check-list li:has(> a) { align-items: center; }
.check-list li:has(> a)::before { margin-top: 0; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--navy-2); box-shadow: var(--card-shadow); }
.compare { width: 100%; border-collapse: collapse; min-width: 600px; font-size: 1.02rem; }
.compare th, .compare td { text-align: left; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.compare tr:last-child td { border-bottom: none; }
.compare th { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); background: var(--navy-3); }
.compare td:nth-child(2), .compare td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.compare td a { font-weight: 600; }
.compare tr.current td { background: linear-gradient(100deg, rgba(43,138,245,0.2), rgba(34,211,238,0.12)); color: #fff; }
.compare tr.current td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.steps { list-style: none; counter-reset: step; display: grid; gap: 1.1rem; }
.steps li { counter-increment: step; display: flex; gap: 1rem; font-size: 1.06rem; line-height: 1.7; }
.steps li::before {
  content: counter(step); flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--cyan); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  box-shadow: 0 0 16px -2px rgba(34,211,238,0.6);
}
.review-quote {
  margin: 0 0 1.1rem; padding: 1.5rem 1.6rem;
  background: var(--navy-2); border: 1px solid var(--line-2); border-radius: var(--r-card);
  font-size: 1.08rem; line-height: 1.7; color: var(--text);
}
.review-quote cite { display: block; margin-top: 0.75rem; font-style: normal; font-size: 0.95rem; font-weight: 600; color: var(--cyan-hi); }
.cta-box {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.9rem, 4vw, 3rem); text-align: left;
  border-radius: 20px;
  background: radial-gradient(30rem 18rem at 100% 0%, rgba(142,240,255,0.08), transparent 70%), linear-gradient(150deg, #0f4fa8, #0a3580 50%, #071f4f);
  box-shadow: 0 40px 70px -40px rgba(21,101,200,0.8);
  color: var(--on-cobalt-2);
}
.cta-box::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--beads); opacity: 0.45;
}
.cta-box h2 { margin-bottom: 0.9rem; }
.cta-box p { color: #fff; }
.cta-box .page-ctas { margin-top: 1.6rem; }
.cta-box .btn-outline { background: #fff; color: #0a2f73; border-color: #fff; }
.cta-box .btn-outline:hover { background: var(--cyan-hi); border-color: var(--cyan-hi); color: var(--ink); }
.policy h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.policy h2:first-of-type { margin-top: 1.5rem; }
.policy ul { margin: 0 0 1.1rem 1.2rem; line-height: 1.8; font-size: 1.06rem; }
.policy li { margin-bottom: 0.3rem; }
.policy li::marker { color: var(--cyan); }

/* ═══════════════ 19. RESPONSIVE ═══════════════ */
@media (max-width: 1180px) {
  .nav-phone { display: none; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .hamburger { display: flex; margin-left: 0; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-logo-wrap { flex-direction: row; align-items: center; gap: 1.5rem; }
  .about-logo-wrap picture { flex: 0 0 34%; max-width: 220px; }
  .about-stats { margin-top: 0; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .process-grid::before { display: none; }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 680px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #hero { min-height: 0; padding-top: calc(var(--nav-h) + 1.75rem); }
  #hero::before { opacity: 0.55; }
  .hero-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "logo" "copy" "ctas" "rating" "stats";
  }
  .hero-content > picture { justify-self: start; margin-bottom: 1.1rem; }
  .hero-logo { width: 108px; }
  .hero-h1 { max-width: 18ch; }
  .hero-stats { grid-template-columns: 1fr 1fr; margin-top: 2rem; }
  .hero-stat { padding: 1rem 1.1rem 1.1rem; }
  .hero-stat + .hero-stat { border-left: none; }
  .hero-stat:nth-child(even) { border-left: 1px solid var(--line); }
  .hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  nav { gap: 0.75rem; }
  .nav-logo img { width: 40px; height: 40px; }
  .nav-logo-name { font-size: 1.28rem; }
  .nav-cta { display: none; }
  .hamburger { margin-left: auto; }
  .hero-h1 { font-size: clamp(2.5rem, 12vw, 3.1rem); max-width: none; }
  .hero-sub { font-size: 1.1rem; margin-top: 1rem; }
  .hero-buttons { flex-direction: column; margin-top: 1.5rem; }
  .hero-buttons a { width: 100%; }
  .hero-rating { font-size: 0.95rem; }
  .section-title { font-size: clamp(2.3rem, 10vw, 2.8rem); }
  .services-grid, .addon-grid { grid-template-columns: 1fr; }
  .service-card { padding: 1.75rem 1.3rem 1.3rem; }
  .price-amount { font-size: 2.7rem; }
  .form-row { grid-template-columns: 1fr; }
  .form-addons { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-form { padding: 1.25rem 1rem; border-radius: 16px; }
  .work-grid { gap: 0.65rem; }
  .work-item { padding: 5px 5px 0; border-radius: 12px; }
  .work-item img { border-radius: 8px; }
  .work-item figcaption { font-size: 0.88rem; padding: 0.5rem 0.25rem 0.6rem; }
  .why-card { padding: 1.4rem 1.2rem; column-gap: 1rem; }
  .why-icon { width: 48px; height: 48px; }
  .process-grid { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .process-step { display: grid; grid-template-columns: 52px 1fr; column-gap: 1rem; }
  .step-num { grid-row: span 2; margin-bottom: 0; }
  .about-logo-wrap { flex-direction: column; align-items: flex-start; }
  .about-logo-wrap picture { max-width: 150px; }
  .about-verse { padding: 1.6rem 1.2rem 1.5rem 3.2rem; }
  .about-verse::before { left: 1.1rem; top: 1.8rem; }
  .rating-summary { display: flex; }
  .testimonial-card { padding: 1.5rem 1.3rem; }
  .faq-item summary { font-size: 1.22rem; padding: 1rem 1.1rem; }
  .faq-item p { padding: 0 1.1rem 1.3rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-links a { min-height: 44px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .page-ctas a { flex: 1 1 100%; }
  .info-badges { width: 100%; }
  .info-badge { flex: 1 1 0; padding: 0.85rem 0.9rem; }
  .info-badge b { font-size: 1.5rem; }

  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(5,10,22,0.92);
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--line-2);
  }
  .mobile-bar::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--led-line); }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px;
    border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: rgba(15,28,54,0.9);
    color: #fff; text-decoration: none;
    font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .mobile-bar a[href^="tel"]::before, .mobile-bar a[href^="sms"]::before {
    content: ''; width: 18px; height: 18px; flex: none; background: var(--cyan);
    -webkit-mask: var(--bar-icon) center / contain no-repeat; mask: var(--bar-icon) center / contain no-repeat;
  }
  .mobile-bar a[href^="tel"] { --bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.8 4.5-2.3 1.4a11 11 0 0 0 6.1 6.1l1.4-2.3L20 15.5V19a1.5 1.5 0 0 1-1.6 1.5C10.6 20 4 13.4 3.5 5.6A1.5 1.5 0 0 1 5 4z'/%3E%3C/svg%3E"); }
  .mobile-bar a[href^="sms"] { --bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v11H10l-4.5 3.5v-3.5H4z'/%3E%3C/svg%3E"); }
  .mobile-bar a.mb-book { background: var(--led); border-color: transparent; color: var(--ink); box-shadow: var(--glow); }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .nav-logo-sub { letter-spacing: 0.16em; }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (hover: none) {
  .service-card:hover, .work-item:hover, .testimonial-card:hover { transform: none; }
}

/* Reduced motion: keep every state change, drop the travel and the flicker */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  .service-card:hover, .work-item:hover, .testimonial-card:hover, .btn-primary:hover, .nav-cta:hover, .btn-submit:hover { transform: none; }
}

/* "Don't see your town?" box in the service area section */
.area-ask {
  max-width: 640px; margin: 2.5rem auto 0; padding: 1.75rem 1.5rem;
  border: 1px solid var(--electric-hi); border-radius: 16px;
  background: rgba(43,138,245,0.08); text-align: center;
}
.area-ask-title { font-size: 1.35rem; margin: 0 0 0.5rem; color: var(--text, #fff); }
.area-ask p { margin: 0 auto 1.2rem; max-width: 480px; line-height: 1.6; }
.area-ask-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.area-ask-buttons a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .area-ask-buttons a { flex: 1 1 100%; } }