/* Marchmont Christmas Lighting theme.
   Loads after /assets/site.css and only applies to pages with <body class="xmas">,
   so the rest of the window cleaning site stays blue. Colours come from the logo. */
body.xmas{
  --red:#d62828; --red-deep:#a3161c; --red-night:#5c0a0e;
  --green:#1e8e3e; --green-deep:#145f2a; --gold:#f4b400; --bulb-blue:#1e88e5;
  --navy:var(--red-deep); --blue:var(--red);
  --ink:#2a1414; --muted:#6a4f4c;
  --glass:#fff7f4; --sky:#fde7e4; --line:#f1d6d1;
  --glow:#ffd36b; --glow-soft:rgba(255,211,107,.4);
}

/* header logo */
body.xmas .top img.xlogo{height:58px;width:auto}
@media (max-width:600px){body.xmas .top img.xlogo{height:42px}}

/* buttons: red primary, green secondary (like the logo) */
body.xmas .btn-navy{background:var(--green)}
body.xmas .btn-blue:hover{background:var(--red-deep)}
body.xmas .eyebrow{color:var(--green)}
body.xmas .checks li::before{background:#e5f4e9;color:var(--green)}
body.xmas .chip{background:#e5f4e9;color:var(--green-deep)}
body.xmas .link-card:hover{box-shadow:0 14px 30px rgba(163,22,28,.12)}
body.xmas .nav.open{box-shadow:0 18px 30px rgba(92,10,14,.12)}
body.xmas .nav a.xnav{color:var(--red);font-weight:700}

/* hero: red night sky with a multicolour lit roofline */
body.xmas .phero.xhero{background:radial-gradient(120% 95% at 82% 8%,#e0393d 0%,#b81c22 32%,#7d0d12 70%,#4a070a 100%)}
body.xmas .phero::after{background:linear-gradient(100deg,rgba(60,4,8,.78) 0%,rgba(90,8,12,.4) 55%,rgba(90,8,12,0) 100%)}
body.xmas .phero .sub{color:#ffe9e6}
body.xmas .crumbs{color:#ffd0cb}
body.xmas .crumbs a{color:#fff3f1}
body.xmas .crumbs li+li::before{color:var(--glow)}
.xhero{padding-bottom:clamp(190px,21vw,300px)!important}
.xhero .xart{position:absolute;left:0;bottom:0;width:100%;height:clamp(170px,19vw,290px);z-index:1;pointer-events:none}
.xhero .xsnow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6}
.xhero .wrap{position:relative;z-index:2}
.xhero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,64px);align-items:center}
body.xmas .xhero h1{font-size:clamp(2.1rem,4vw,3.5rem);max-width:none}
.xhero-form{box-shadow:0 24px 60px rgba(30,2,4,.45);border-top:6px solid var(--green)}
.xform-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.xform-head b{font:800 1.4rem/1.1 var(--display);color:var(--navy)}
.xform-head span{font-size:.85rem;color:var(--green);font-weight:700}
.xhero-form .form-note a{color:var(--red);font-weight:700;text-decoration:none}
.xhero.xphoto{padding-bottom:clamp(52px,8vw,108px)!important}
@media (max-width:960px){
  .xhero-grid{grid-template-columns:1fr}
  .xhero{padding-bottom:clamp(150px,34vw,220px)!important}
  .xhero .xart{height:clamp(140px,32vw,210px)}
}
.xbadge{display:inline-flex;align-items:center;gap:8px;font:700 .78rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#4a2a00;background:var(--gold);padding:8px 12px;border-radius:999px;margin-bottom:18px}
.xbadge::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px #fff}
.xhook{font:700 clamp(1.25rem,2.2vw,1.65rem)/1.25 var(--display);color:#fff;max-width:30ch;margin:22px 0 0;letter-spacing:-.005em}
.xhook-a{color:#ffe1dc;font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:50ch;margin-top:10px}
.xpromise{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;color:#ffe9e6;font-weight:500}
.xpromise span{display:inline-flex;align-items:center;gap:8px}
.xpromise span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px 3px var(--glow-soft)}
.xpromise span:nth-child(2)::before{background:#5fe08a;box-shadow:0 0 10px 3px rgba(95,224,138,.45)}
.xpromise span:nth-child(3)::before{background:#6ab8ff;box-shadow:0 0 10px 3px rgba(106,184,255,.45)}

/* process illustrations */
.pimg.xill{background:radial-gradient(90% 80% at 70% 15%,#d62828,#a3161c 45%,#5c0a0e);display:grid;place-items:center}
body.xmas .pimg::after{background:linear-gradient(180deg,rgba(60,4,8,0) 55%,rgba(60,4,8,.55))}
.pimg.xill svg{width:46%;height:auto;position:relative;z-index:1}
.pimg.xill::before{content:"";position:absolute;left:0;right:0;top:14px;height:30px;background:radial-gradient(circle,var(--glow) 0 3px,transparent 4px) 0 50%/34px 30px repeat-x;filter:drop-shadow(0 0 4px var(--glow));opacity:.95}

/* option cards with multicolour bulbs */
.link-card.static{cursor:default}
.link-card.static:hover{transform:none;box-shadow:none}
.link-card .xdot{width:12px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--red);margin-bottom:6px;position:relative}
.link-card .xdot::before{content:"";position:absolute;top:-5px;left:3px;width:6px;height:5px;border-radius:2px;background:#1f2937}
.link-card:nth-child(4n+2) .xdot{background:var(--gold)}
.link-card:nth-child(4n+3) .xdot{background:var(--bulb-blue)}
.link-card:nth-child(4n+4) .xdot{background:var(--green)}

/* method grid */
.xmethod{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.xmethod .m{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.xmethod .m .k{font:800 1.4rem/1 var(--display);color:var(--red);margin-bottom:12px}
.xmethod .m b{display:block;font:700 1.12rem/1.15 var(--display);color:var(--navy);margin-bottom:6px}
.xmethod .m span{color:var(--muted);font-size:1rem}
@media (max-width:900px){.xmethod{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.xmethod{grid-template-columns:1fr}}

/* keyword section */
.xkw{max-width:780px}
.xkw p{color:var(--muted);margin-top:16px}
.xkw p:first-of-type{margin-top:0}

.xalso{margin-top:22px;font-size:1rem;color:var(--muted)}
.xalso a{color:var(--red);font-weight:700}

/* quote section + footer */
body.xmas .quote{background:linear-gradient(135deg,#a3161c,#6e0b10)}
body.xmas .quote .lede{color:#ffd9d4}
body.xmas .contact-lines b{color:var(--glow)}
body.xmas footer{background:#0f2a18;color:#cfe3d5}
body.xmas footer .xflogo{background:#fff;border-radius:12px;padding:10px 14px;display:inline-block}
body.xmas footer .xflogo img{height:62px;width:auto}
body.xmas footer .xby{margin-top:12px;font-size:.92rem;color:#a9c9b3}

/* sticky mobile bar hides while a quote form is on screen (see christmas.js) */
body.xmas .mobile-bar{transition:transform .25s ease,opacity .25s ease}
body.xmas .mobile-bar.xhide{transform:translateY(110%);opacity:0;pointer-events:none}

/* Phones and tablets: the hero form drops out so the page can breathe; this button jumps to the full form near the bottom */
.xhero-cta{display:none}
@media (max-width:960px){
  .xhero-form{display:none}
  .xhero-cta{display:inline-flex;margin-top:28px}
}

/* Trust tabs in the service-area section */
.xtrust{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.xtrust span{display:inline-flex;align-items:center;gap:8px;font:700 .82rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--green);padding:10px 14px;border-radius:8px}
.xtrust span::before{content:"";width:14px;height:8px;border:solid #fff;border-width:0 0 3px 3px;transform:rotate(-45deg) translateY(-2px)}
.xtrust + .areas-list{margin-top:22px}