/* =========================================================
   SPiFFYz Cleaning Services — Brand tokens + core components
   Shared by the website (index.html) and the style guide.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Nunito:wght@400;600;700;800&family=Patrick+Hand&display=swap');

:root {
  /* ---- Core palette ---- */
  --splash:      #7FE3F5;  /* Splash Cyan — the brand's signature background */
  --splash-soft: #C9F3FB;
  --mist:        #EEFBFE;  /* Mist — quiet section background */
  --lagoon:      #0A7C96;  /* Lagoon — accessible cyan for links & icons on white */
  --bubble:      #A9CCFF;  /* Bubble Blue — left-hand foam shadow */
  --blush:       #F9C6DA;  /* Blush Pink — right-hand foam shadow */
  --bubblegum:   #FF6FA8;  /* Bubblegum — highlight / attention accent */
  --ink:         #17171F;  /* Ink — outlines, headlines, primary buttons */
  --slate:       #5A606E;  /* Slate — body copy (from “Cleaning Services”) */
  --foam:        #FFFFFF;  /* Foam — the llama's wool */
  --sunny:       #FFE27A;  /* Sunny — rare celebratory accent (badges, stars) */

  /* ---- Type ---- */
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:    'Patrick Hand', 'Comic Sans MS', cursive;

  /* ---- Shape ---- */
  --line: 3px;                 /* the Ink outline weight */
  --r-sm: 12px; --r-md: 20px; --r-lg: 32px; --r-pill: 999px;
  --foam-shadow:    -5px 6px 0 var(--bubble), 5px 6px 0 var(--blush);
  --foam-shadow-lg: -8px 10px 0 var(--bubble), 8px 10px 0 var(--blush);
  --ink-shadow: 4px 5px 0 var(--ink);

  --space-xs: 8px; --space-s: 16px; --space-m: 24px;
  --space-l: 32px; --space-xl: 56px;
  --section-space: 96px; --section-space-mobile: 64px;
  --motion-fast: 150ms; --motion-response: 240ms;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate);
  background: var(--foam);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* Let grid/flex children shrink so long words (emails, URLs) never push the page sideways */
.wrap > *, [class*="grid"] > *, .card { min-width: 0; }
p, a, h1, h2, h3, h4, .contact-line, code { overflow-wrap: anywhere; }
a { color: var(--lagoon); font-weight: 700; text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.45rem; font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }

.hand { font-family: var(--font-hand); font-weight: 400; letter-spacing: .01em; }
.eyebrow {
  font-family: var(--font-hand); font-size: 1.35rem; color: var(--lagoon);
  display: inline-block; margin-bottom: .35rem;
}
.lead { font-size: 1.2rem; }

/* Bubblegum swipe under a key word in a headline */
.swipe { position: relative; white-space: nowrap; z-index: 0; }
.swipe::after {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: .06em; height: .32em;
  background: var(--bubblegum); opacity: .8; border-radius: 6px; z-index: -1; transform: rotate(-1.2deg);
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
@media (max-width: 560px) { .wrap { padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); } }

/* ---- Backgrounds ---- */
.bg-splash  { background: var(--splash) url('pattern.svg') repeat; background-size: 400px; }
.bg-mist    { background: var(--mist); }
.bg-ink     { background: var(--ink); color: #D8DCE6; }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--foam); }

/* Foam edge — scalloped "suds" divider between sections */
.foam-edge { height: 34px; background:
  linear-gradient(var(--edge, var(--foam)), var(--edge, var(--foam))) 0 100% / 100% 4px no-repeat,
  radial-gradient(circle at 22px 34px, var(--edge, var(--foam)) 22px, transparent 23px) 0 0 / 44px 34px repeat-x; }
.foam-edge.flip { transform: scaleY(-1); }
/* Scallops laid OVER the bottom of the patterned section above (pulled up 34px), so the
   section's own pattern runs underneath the bumps with no cut line. Sections before one of
   these need ≥34px bottom padding. */
.foam-edge.bg-splash { position: relative; z-index: 1; margin-top: -34px;
  background: linear-gradient(var(--edge, var(--foam)), var(--edge, var(--foam))) 0 100% / 100% 4px no-repeat,
    radial-gradient(circle at 22px 34px, var(--edge, var(--foam)) 22px, transparent 23px) 0 0 / 44px 34px repeat-x; }
/* Lagoon on Splash is only 3.3:1, so small cyan text switches to Ink on splash backgrounds */
.bg-splash .eyebrow { color: var(--ink); }

/* ---- Buttons ---- */
.btn {
  --bg: var(--ink); --fg: var(--foam); --sh: var(--bubblegum);
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; text-decoration: none;
  background: var(--bg); color: var(--fg);
  border: var(--line) solid var(--ink); border-radius: var(--r-pill);
  padding: .78em 1.5em; cursor: pointer;
  box-shadow: 4px 5px 0 var(--sh);
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
@media (hover: hover) { .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 7px 0 var(--sh); } }
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--sh); }
.btn:focus-visible { outline: 3px dashed var(--lagoon); outline-offset: 4px; }
.btn-secondary { --bg: var(--foam); --fg: var(--ink); --sh: var(--ink); }
.btn-pink      { --bg: var(--bubblegum); --fg: var(--ink); --sh: var(--ink); }
.btn-sm { font-size: .95rem; padding: .55em 1.1em; }

/* ---- Cards (outline + foam shadow = the signature look) ---- */
.card {
  background: var(--foam); border: var(--line) solid var(--ink); border-radius: var(--r-md);
  box-shadow: var(--foam-shadow); padding: 28px;
}
.card-lift { transition: transform var(--motion-response) ease, box-shadow var(--motion-response) ease; }
@media (hover: hover) { .card-lift:hover { transform: translateY(-4px); box-shadow: var(--foam-shadow-lg); } }

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 800; font-size: .82rem; letter-spacing: .02em; color: var(--ink);
  background: var(--foam); border: 2px solid var(--ink); border-radius: var(--r-pill); padding: .3em .85em;
}
.chip.pink { background: var(--blush); } .chip.blue { background: var(--bubble); } .chip.cyan { background: var(--splash-soft); }

.icon-badge {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--splash-soft); border: var(--line) solid var(--ink); box-shadow: -3px 4px 0 var(--bubble), 3px 4px 0 var(--blush);
}
.icon-badge svg { width: 32px; height: 32px; stroke: var(--ink); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Bubbles (decoration) ---- */
.bubble {
  position: absolute; border-radius: 50%; background: var(--foam);
  border: var(--line) solid var(--ink); pointer-events: none;
  box-shadow: inset -4px -4px 0 rgba(169,204,255,.7);
}
.bubble::after { content: ''; position: absolute; width: 26%; height: 26%; top: 18%; left: 20%; border-radius: 50%; background: var(--foam); box-shadow: 0 0 0 2px rgba(23,23,31,.0); }
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
.float { animation: floaty 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } html { scroll-behavior: auto; } }

/* ---- Forms ---- */
.field { display: grid; gap: 6px; }
.field label { font-weight: 800; color: var(--ink); font-size: .95rem; }
.input, .select, .textarea {
  font: inherit; color: var(--ink); background: var(--foam);
  border: 2.5px solid var(--ink); border-radius: var(--r-sm); padding: .75em .9em; width: 100%;
  transition: box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: -3px 4px 0 var(--bubble), 3px 4px 0 var(--blush); }
.textarea { min-height: 110px; resize: vertical; }
/* iOS Safari: replace the native select chrome with our outlined style + chevron */
.select { -webkit-appearance: none; appearance: none; padding-right: 2.6em; background: var(--foam) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9em center / 18px; }
.input, .textarea { -webkit-appearance: none; appearance: none; }

/* Toggle-pill choices (radio styled as chips) */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label {
  cursor: pointer; font-weight: 700; color: var(--ink); background: var(--foam);
  border: 2.5px solid var(--ink); border-radius: var(--r-pill); padding: .45em 1em; font-size: .95rem;
  transition: background .15s ease;
}
.choices input:checked + label { background: var(--splash); box-shadow: 3px 3px 0 var(--ink); }
.choices input:focus-visible + label { outline: 3px dashed var(--lagoon); outline-offset: 3px; }

.placeholder-note {
  font-family: var(--font-hand); font-size: 1rem; color: #B23A6E;
  background: #FFF0F6; border: 2px dashed #F59CC2; border-radius: 10px; padding: .15em .6em; display: inline-block;
}

/* Shared editorial components — documented in guide / Handoff */
.editorial { display:grid; grid-template-columns: .85fr 1.15fr; gap:var(--space-xl); align-items:center; }
.annotation { font-family:var(--font-hand); color:var(--ink); font-size:1.25rem; }
.spiff-note { display:flex; gap:var(--space-s); align-items:center; padding:var(--space-s) 0; border-top:2px dashed var(--ink); color:var(--ink); }
.spiff-note img { width:64px; height:64px; border-radius:50%; border:var(--line) solid var(--ink); flex:none; }
.spiff-note p { margin:0; }
.spiff-note.react img { animation:spiff-nod var(--motion-response) ease-out; }
@keyframes spiff-nod { 50% { transform:rotate(-5deg); } }
.caption { font-size:.9rem; margin-top:var(--space-s); }
.mockup-stage { padding:var(--space-m); background:var(--foam); border-bottom:var(--line) solid var(--ink); }
.mockup-stage svg { width:100%; height:auto; display:block; }
:focus-visible { outline:3px dashed var(--ink); outline-offset:5px; }
[hidden] { display:none !important; }
@media(max-width:900px) { .editorial { grid-template-columns:1fr; gap:var(--space-l); } }
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .btn:hover, .btn:active, .card-lift:hover { transform:none; }
}

.comparison { --reveal:50%; }
.comparison-images { position:relative; border:var(--line) solid var(--ink); border-radius:var(--r-md); overflow:hidden; }
.comparison figure { margin:0; position:relative; }
.comparison figcaption { position:absolute; top:var(--space-s); left:var(--space-s); background:var(--foam); color:var(--ink); padding:4px 12px; border:2px solid var(--ink); border-radius:var(--r-pill); font-weight:800; }
.comparison.enhanced .comparison-after { position:absolute; inset:0; clip-path:inset(0 0 0 calc(100% - var(--reveal))); }
.comparison .comparison-after figcaption { left:auto; right:var(--space-s); }
.wipe-line { display:none; }
.enhanced .wipe-line { display:block; position:absolute; top:0; bottom:0; left:calc(100% - var(--reveal)); width:3px; background:var(--ink); pointer-events:none; }
.comparison-controls { margin-top:var(--space-m); color:var(--ink); font-weight:800; }
.comparison-controls input { display:block; width:100%; min-height:44px; accent-color:var(--ink); cursor:ew-resize; }
.comparison-buttons { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-s); }

.btn:disabled { cursor:not-allowed; opacity:.65; transform:none; }

/* Spiff avatar (option G): circle + pop-out ears are baked into the PNG, so no CSS ring, crop or shadow */
img[src$="spiff-avatar-g.png"] { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; object-fit: contain !important; background: none !important; }