/* Holy Sheet brand layer: Ashley's logo palette, bold sticker style.
   Loaded after site.css and overrides it. */

:root {
  --cream: #fbf8ee;
  --linen: #f4edd9;
  --linen-2: #eadfc3;
  --line: #dccfae;
  --ink: #0c372d;
  --ink-2: #4b5f57;
  --accent: #13563f;
  --accent-ink: #0c372d;
  --accent-soft: #dcebe2;
  --gold: #e3ad39;
  --gold-hi: #f0bd4a;
  --gold-ink: #8a5f00;
  --sky: #e2f2f7;
  --sky-2: #a9d9ea;
  --sun: #e3ad39;
  --sun-soft: #fbefcc;
  --pine: #13563f;
  --pine-soft: #dcebe2;
  --font-script: "Yellowtail", "Brush Script MT", cursive;
  --pop: 6px 6px 0 var(--ink);
  --edge: 2.5px solid var(--ink);
}

body { background: var(--cream); }
h1, h2, h3 { font-weight: 800; font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); line-height: 1; }
::selection { background: var(--gold); color: var(--ink); }
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; font-variation-settings: normal; }

/* Eyebrows become tilted stickers */
.eyebrow {
  display: inline-flex; gap: 8px; padding: 7px 14px 6px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--gold); color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em;
  transform: rotate(-2deg); transform-origin: left center;
}
.eyebrow::before { display: none; }
.section--navy .eyebrow { color: var(--ink); box-shadow: 3px 3px 0 var(--gold-ink); }
.section--sky .eyebrow { background: var(--white); }
.section--sun .eyebrow { background: var(--sky-2); }

/* Buttons: chunky pills with an offset shadow */
.btn { border: var(--edge); box-shadow: 4px 4px 0 var(--ink); font-weight: 800; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--primary, .btn--light { background: var(--gold); color: var(--ink); }
.btn--primary:hover, .btn--light:hover { background: var(--gold-hi); color: var(--ink); }
.btn--ghost, .btn--outline-light { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover, .btn--outline-light:hover { background: var(--white); color: var(--ink); }
.cta-band .btn, .review-google .btn { box-shadow: 4px 4px 0 #04190f; }
.more { color: var(--accent); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.js .nav .nav-quote { color: var(--ink); }

/* Header */
.site-header { background: rgba(251, 248, 238, 0.93); border-bottom: 2.5px solid transparent; }
.site-header.is-scrolled { border-bottom-color: var(--ink); }
.brand-ghost { width: 54px; height: auto; flex: none; transform: rotate(-6deg); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.brand:hover .brand-ghost { transform: rotate(4deg) translateY(-2px); }
.brand-name { font-weight: 900; font-size: 1.45rem; color: var(--ink); }
.brand-name small { font-weight: 800; color: var(--accent); letter-spacing: 0.22em; }
.nav a { font-weight: 700; }
.nav a:hover { background: var(--sun-soft); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--sun-soft); box-shadow: inset 0 -3px 0 var(--gold); }
.nav-toggle { border: var(--edge); box-shadow: 3px 3px 0 var(--ink); background: var(--gold); }

/* Hero */
.hero.weave, .page-hero.weave, .section.weave {
  background-color: var(--cream);
  background-image: radial-gradient(circle at 1px 1px, rgba(12, 55, 45, 0.13) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
}
.hero::before, .page-hero::before {
  background:
    radial-gradient(38% 48% at 96% 6%, rgba(169, 217, 234, 0.6), transparent 70%),
    radial-gradient(30% 40% at 0% 100%, rgba(227, 173, 57, 0.3), transparent 70%);
}
.h1-big { font-weight: 900; font-size: clamp(3.2rem, 1.4rem + 7vw, 7rem); line-height: 0.92; }
.h1-big em {
  color: var(--accent);
  background: linear-gradient(transparent 60%, rgba(227, 173, 57, 0.85) 60%, rgba(227, 173, 57, 0.85) 90%, transparent 90%);
}
.h1-sub { color: var(--ink); font-weight: 700; }
.h1-script {
  display: block; font-family: var(--font-script); font-weight: 400; letter-spacing: 0;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); color: var(--gold-ink);
  margin-bottom: 8px; transform: rotate(-3deg); transform-origin: left;
}
.hero-points svg { color: var(--accent); }
.page-hero h1 { font-weight: 900; }

.hero-media::before { background: var(--gold); border: var(--edge); opacity: 1; left: -10%; top: -8%; width: 40%; }
.hero-media::after { background: var(--sky-2); border: var(--edge); right: -8%; bottom: -6%; width: 54%; }
.fold-card::after { display: none; }
.fold-card .img-slot { clip-path: none; }
.photo-tilt { transform: rotate(2.5deg); }
.img-slot { border: var(--edge); box-shadow: 7px 7px 0 var(--ink); border-radius: 24px; }
.split .img-slot, .svc-media .img-slot { transform: rotate(1.6deg); }
.split--reverse .img-slot, .section--sky .split .img-slot { transform: rotate(-1.6deg); }

.mascot {
  position: absolute; z-index: 3; width: clamp(150px, 46%, 270px); height: auto; left: -14%; bottom: -16%;
  filter: drop-shadow(5px 6px 0 rgba(12, 55, 45, 0.22));
}
@media (prefers-reduced-motion: no-preference) {
  .mascot { animation: ghost-bob 4.2s ease-in-out infinite; }
}
@keyframes ghost-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}
.tag { left: auto; right: -16px; bottom: auto; top: 26px; border: var(--edge); box-shadow: 4px 4px 0 var(--ink); transform: rotate(3deg); z-index: 3; }
.tag-icon { background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
@media (max-width: 860px) {
  .tag { right: 8px; top: 12px; }
  .mascot { left: -6%; bottom: -12%; width: 46%; }
  .hero-media { margin: 10px 14px 48px; }
}

/* Spinning badge */
.badge-spin { position: absolute; z-index: 4; width: 136px; height: 136px; right: -26px; bottom: -40px; }
.badge-spin .ring { position: absolute; inset: 0; border-radius: 50%; background: var(--ink); box-shadow: 4px 4px 0 var(--gold); }
.badge-spin .spin { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge-spin text { font: 800 13px var(--font-body); letter-spacing: 3px; fill: var(--cream); }
.badge-spin .star { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); }
.badge-spin .star svg { width: 44px; height: 44px; }
@media (prefers-reduced-motion: no-preference) {
  .badge-spin .spin { animation: badge-spin 18s linear infinite; transform-origin: 50% 50%; }
}
@keyframes badge-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .badge-spin { width: 104px; height: 104px; right: -4px; bottom: -30px; } .badge-spin text { font-size: 12px; } }

/* Marquee ticker */
.marquee {
  background: var(--accent); color: var(--gold); border-block: 2.5px solid var(--ink);
  overflow: hidden; white-space: nowrap; padding: 16px 0;
}
.marquee-track { display: inline-flex; align-items: center; }
.marquee-track span {
  font: 900 clamp(1.4rem, 1rem + 1.6vw, 2.2rem)/1 var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1; text-transform: uppercase; padding: 0 22px;
}
.marquee-track i { font-style: normal; color: var(--cream); font-size: 1.3rem; }
.marquee-track .script { font-family: var(--font-script); text-transform: none; color: var(--cream); font-weight: 400; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 36s linear infinite; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Promise strip */
.promise { background: var(--cream); border-block: 0; }
.promise svg, .turn-col h3 svg { border: 2px solid var(--ink); }

/* Service rows */
.svc-list { border-top: 3px solid var(--ink); }
.svc-row { border-bottom: 2px solid var(--ink); }
.svc-row:hover { background: var(--sun-soft); }
.svc-list li .svc-num {
  font-weight: 900; font-size: 3rem; color: transparent; -webkit-text-stroke: 2px var(--ink);
  transition: color var(--duration-fast) var(--ease-out);
}
.svc-list li .svc-row:hover .svc-num { color: var(--gold); }
.svc-arrow { border: var(--edge); background: var(--white); }
.svc-row:hover .svc-arrow { background: var(--gold); border-color: var(--ink); color: var(--ink); }

/* Steps */
.steps::before { border-top: 3px dashed var(--ink); opacity: 0.3; }
.step-num, .section--sky .step-num { background: var(--gold); color: var(--ink); border: var(--edge); box-shadow: 4px 4px 0 var(--ink); }
@media (max-width: 760px) { .steps::before { border-top: 0; border-left: 3px dashed var(--ink); } }

/* Cards */
.standard-card, .quote-card, .aside-card, .map-card, .report-mock, .review-google, .review-empty-note {
  border: var(--edge); box-shadow: var(--pop); border-radius: 24px;
}
.standard-card::before { border-color: var(--sun-soft); }
.section--navy .standard-card { box-shadow: 7px 7px 0 var(--gold); }
.signature b { font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 2.3rem; color: var(--accent); }
.ghost-review { border-color: var(--ink); opacity: 0.8; }
.turn-grid { border: var(--edge); box-shadow: var(--pop); border-radius: 24px; overflow: hidden; }
.town-chips a, .chip { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-weight: 700; }
.town-chips a:hover, .chip:hover { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.checks li::before {
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c372d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
  border: 1.5px solid var(--ink); border-radius: 50%;
}
.section--navy .checks li::before { border-color: var(--gold); }
.towns, .faq-list, .values { border-top: 3px solid var(--ink); }
.t-acc-head { font-weight: 800; }
.t-acc-chevron { border: var(--edge); background: var(--white); }
.t-acc[data-open="true"] .t-acc-chevron { background: var(--gold); }
.timeline li::before { background: var(--accent); height: 6px; }
.report-head .avatar { background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
.g-logo { border: 2px solid var(--gold); }

/* Forms */
.t-input { border: 2px solid var(--ink); border-radius: 14px; }
.t-input:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--sun-soft), 3px 3px 0 var(--ink); }
.tiles.t-input:focus-within { box-shadow: none; }
.tile span, .addon { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tile:hover span { border-color: var(--ink); background: var(--sun-soft); }
.tile input:checked + span { background: var(--gold); border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent); }
.addon:hover { border-color: var(--ink); }
.addon:has(input:checked) { background: var(--sun-soft); border-color: var(--ink); }
.addon .t-check, .addon .t-check[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.addon .t-check[aria-checked="true"] { background: var(--accent); }
.progress-bar { height: 14px; border: 2px solid var(--ink); background: var(--white); }
.progress-fill { background: var(--gold); border-radius: 0; }
.progress-dots li[aria-current="step"], .progress-dots li[data-done="true"] { color: var(--accent); font-weight: 800; }

/* Coloured bands */
.section--navy { background: var(--accent); }
.cta-band { background: var(--ink); overflow: visible; }
.cta-band::before { opacity: 0.06; }
.cta-band h2 { color: var(--cream); font-weight: 900; }
.cta-band h2 .script { display: block; color: var(--gold); font-size: 0.6em; transform: rotate(-3deg); transform-origin: left; margin-bottom: 6px; }
.cta-ghost { position: absolute; right: 3%; top: -54px; width: 180px; height: auto; transform: rotate(8deg); pointer-events: none; z-index: 2; }
.cta-band .wrap { padding-right: clamp(16px, 14vw, 220px); }
@media (max-width: 860px) {
  .cta-ghost { width: 112px; top: -40px; right: 8px; }
  .cta-band .wrap { padding-right: var(--gutter); }
}

/* Footer */
.footer-logo { display: inline-block; background: var(--cream); border-radius: 24px; padding: 12px 16px; border: 2.5px solid var(--gold); box-shadow: 5px 5px 0 var(--gold); }
.footer-logo img { width: 210px; height: auto; display: block; }
.site-footer h2 { color: var(--gold); }

.mobile-bar { background: rgba(251, 248, 238, 0.97); border-top: 2.5px solid var(--ink); }
.mobile-bar a { border: 2px solid var(--ink); }
.mobile-bar a.go { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.toast { background: var(--accent); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--gold); }

/* Map */
.area-map .home-dot { fill: var(--gold); stroke: var(--ink); stroke-width: 2; }
.area-map .home-halo { fill: rgba(227, 173, 57, 0.3); }
.area-map .spoke { stroke: rgba(19, 86, 63, 0.35); }
.area-map .town .home-label { fill: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .mascot, .marquee-track, .badge-spin .spin { animation: none !important; }
}