/* ============================================================
   NORA MYSTIC CLEANING — Brand System
   Royal Blue & Gold · Editorial-luxe meets modern service app
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand palette (from brief) */
  --blue-900:#16293F;
  --blue:#1F3A5F;        /* Primary */
  --blue-600:#2E5077;    /* Secondary */
  --blue-400:#5C7799;
  --gold:#C8A96A;        /* Muted gold */
  --gold-deep:#B7934E;
  --gold-soft:#E6D3A3;   /* Soft gold */
  --warm-white:#FAFAF8;
  --beige:#F4EFEA;
  --beige-deep:#EBE3D8;
  --grey:#E5E5E5;
  --ink:#2B2B2B;
  --ink-soft:#5B5751;

  /* Semantic */
  --bg:var(--warm-white);
  --surface:#FFFFFF;
  --text:var(--ink);
  --muted:var(--ink-soft);
  --line:rgba(43,43,43,.10);
  --line-strong:rgba(43,43,43,.16);

  /* Type */
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Radii & shadow */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(31,58,95,.06), 0 2px 8px rgba(31,58,95,.05);
  --shadow:0 6px 24px rgba(31,58,95,.09), 0 2px 8px rgba(31,58,95,.05);
  --shadow-lg:0 24px 60px rgba(22,41,63,.16), 0 8px 24px rgba(22,41,63,.08);
  --shadow-gold:0 10px 30px rgba(183,147,78,.28);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--gold-soft);color:var(--blue-900);}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.01em;margin:0;}
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--gold);display:inline-block;}
.eyebrow.center::after{content:"";width:26px;height:1.5px;background:var(--gold);display:inline-block;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:.95em 1.5em;border-radius:var(--r-pill);border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(31,58,95,.22);}
.btn-primary:hover{background:var(--blue-900);transform:translateY(-2px);box-shadow:0 14px 30px rgba(31,58,95,.28);}
.btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:var(--blue-900);box-shadow:var(--shadow-gold);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(183,147,78,.36);}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue);color:#fff;transform:translateY(-2px);}
.btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px);}
.btn-light:hover{background:#fff;color:var(--blue);transform:translateY(-2px);}

/* ---------- Chips / pills ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.82rem;font-weight:600;color:var(--blue);
  background:var(--beige);border:1px solid var(--line);
  padding:.5em .9em;border-radius:var(--r-pill);
}

/* ---------- Warm interior photo placeholders ---------- */
.ph{
  position:relative;overflow:hidden;background:#e9dfd1;
  border-radius:var(--r);isolation:isolate;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 100% at 78% 18%, rgba(255,250,238,.95), rgba(255,250,238,0) 55%),
    radial-gradient(140% 120% at 12% 92%, rgba(46,80,119,.20), rgba(46,80,119,0) 60%),
    linear-gradient(135deg, #efe4d3 0%, #e3d4bd 48%, #d8c6ac 100%);
}
.ph::after{ /* soft window-light streaks + faint texture */
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 2px, rgba(255,255,255,0) 2px 26px),
    repeating-linear-gradient(25deg, rgba(122,96,58,.06) 0 1px, rgba(122,96,58,0) 1px 18px);
  mix-blend-mode:soft-light;
}
.ph.tone-blue::before{background:
    radial-gradient(120% 100% at 80% 16%, rgba(214,228,242,.9), rgba(214,228,242,0) 55%),
    linear-gradient(135deg,#3a587b,#21405f 60%,#16293f);}
.ph.tone-blue::after{opacity:.35;}
.ph .ph-label{
  position:absolute;left:14px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;
  color:var(--blue-900);background:rgba(255,255,255,.82);
  padding:.42em .75em;border-radius:var(--r-pill);
  backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.ph.tone-blue .ph-label{color:#fff;background:rgba(22,41,63,.55);}
.ph .ph-ico{width:13px;height:13px;opacity:.8;}

/* ---------- Real photos layered into .ph containers ---------- */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1.4s var(--ease);}
.ph.has-photo::before{opacity:0;}                 /* hide gradient fill when a real photo is present */
.ph.has-photo::after{                              /* soft bottom scrim so labels/numbers stay legible */
  opacity:1;mix-blend-mode:normal;z-index:1;
  background:linear-gradient(to top, rgba(22,41,63,.42), rgba(22,41,63,0) 46%);}
.ph .ph-label,.ph .svc-num{z-index:2;}
.svc-card:hover .ph.has-photo img{transform:scale(1.08);}

/* utility */
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.reveal{opacity:0;transform:translateY(22px);}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease), transform .8s var(--ease);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
  *{scroll-behavior:auto !important;}
}

/* ============================================================
   Shared stylised MAP component (.nm-map)
   A lightweight Apple-Maps-style tile drawn in CSS — no API.
   ============================================================ */
.nm-map{position:relative;overflow:hidden;border-radius:var(--r);background:#d9e0d8;isolation:isolate;}
.nm-map__canvas{position:absolute;inset:0;
  background-color:#cdd5cd;
  background-image:
    /* water (corner) */
    radial-gradient(120% 90% at 108% -8%, #bcd6e6 0 38%, rgba(188,214,230,0) 39%),
    /* park */
    radial-gradient(58% 50% at 22% 82%, #c4ddbf 0 60%, rgba(196,221,191,0) 62%),
    /* two main roads (warm) */
    linear-gradient(64deg, transparent calc(50% - 7px), #f3ead2 calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
    linear-gradient(-26deg, transparent calc(32% - 5px), #f3ead2 calc(32% - 5px) calc(32% + 5px), transparent calc(32% + 5px)),
    /* block grid (multiply) */
    repeating-linear-gradient(0deg,  #f1f4ef 0 46px, #d2d9d1 46px 52px),
    repeating-linear-gradient(90deg, #f1f4ef 0 64px, #d2d9d1 64px 70px);
  background-blend-mode:normal,normal,normal,normal,multiply,normal;
  background-size:cover,cover,cover,cover,auto,auto;
}
.nm-map__grain{position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 1px, transparent 1px 22px);}
/* route line for "directions" */
.nm-map__route{position:absolute;left:14%;top:78%;width:0;height:0;z-index:2;}
.nm-map svg.route-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;}
.nm-map svg.route-svg path{stroke:var(--blue);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:2 9;
  animation:routeFlow 1.1s linear infinite;}
@keyframes routeFlow{to{stroke-dashoffset:-22;}}
.nm-map__start{position:absolute;left:13%;top:79%;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--blue);transform:translate(-50%,-50%);z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.2);}
/* the pin */
.nm-map__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:4;transition:left .5s var(--ease),top .5s var(--ease);}
.nm-map__pin svg{width:38px;height:38px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));}
.nm-map__pin::after{content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);width:16px;height:5px;border-radius:50%;background:rgba(0,0,0,.22);filter:blur(1px);}
.nm-map__pulse{position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;background:rgba(31,58,95,.3);transform:translate(-50%,-50%);z-index:3;animation:mapPulse 2s var(--ease) infinite;}
@keyframes mapPulse{0%{transform:translate(-50%,-50%) scale(.6);opacity:.7;}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0;}}
.nm-map.interactive{cursor:crosshair;}
.nm-map__hint{position:absolute;left:12px;top:12px;z-index:5;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);border-radius:var(--r-pill);font-size:.74rem;font-weight:600;color:var(--blue-900);padding:.4em .8em;box-shadow:var(--shadow-sm);}
.nm-map__locate{position:absolute;right:12px;bottom:12px;z-index:5;width:40px;height:40px;border-radius:12px;background:#fff;border:none;display:grid;place-items:center;color:var(--blue);box-shadow:var(--shadow);transition:.2s;}
.nm-map__locate:hover{background:var(--blue);color:#fff;}
.nm-map__locate svg{width:19px;height:19px;}
.nm-map__locate.spin svg{animation:locSpin .9s linear;}
@keyframes locSpin{to{transform:rotate(360deg);}}
.nm-map__zoom{position:absolute;right:12px;top:12px;z-index:5;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);}
.nm-map__zoom button{width:36px;height:36px;background:#fff;border:none;color:var(--blue-900);font-size:1.2rem;line-height:1;border-bottom:1px solid var(--line);}
.nm-map__zoom button:last-child{border-bottom:none;}