/* SAMCO Painting & Decorating theme: gallery-white canvas, charcoal ink (from the logo),
   and the logo's red / orange / yellow / green / blue spectrum as the creative accent.
   Follows the visitor's light or dark preference. */
:root {
    color-scheme: light dark;
    --red: #e23b2e;
    --orange: #f39224;
    --yellow: #f5c01e;
    --green: #16a05a;
    --blue: #1f6fd6;
    --indigo: #2b3a8f;
    --spectrum: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--indigo));

    --head-weight: 800;
    --bg: #f6f7f8;
    --bg-alt: #eceef1;
    --surface: #ffffff;
    --surface-2: #f1f3f5;
    --ink: #17191f;
    --ink-2: #525965;
    --line: rgba(23, 25, 31, 0.1);
    --line-2: rgba(23, 25, 31, 0.24);
    --accent: #17191f;
    --accent-hover: #2b2f38;
    --on-accent: #ffffff;
    --accent-ink: #c4321f;
    --focus: #1f6fd6;
    --hdr-bg: rgba(246, 247, 248, 0.84);
    --shadow: 23 25 31;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121418;
        --bg-alt: #171a1f;
        --surface: #1c1f25;
        --surface-2: #252930;
        --ink: #f1f2f4;
        --ink-2: #a8aeb9;
        --line: rgba(255, 255, 255, 0.1);
        --line-2: rgba(255, 255, 255, 0.24);
        --accent: #f1f2f4;
        --accent-hover: #ffffff;
        --on-accent: #121418;
        --accent-ink: #ff8266;
        --focus: #6ea8ff;
        --hdr-bg: rgba(18, 20, 24, 0.82);
        --shadow: 0 0 0;
    }
}

/* Primary buttons pick up a spectrum underline on hover */
.btn-primary { --btn-fill: rgba(255, 255, 255, 0.12); }
.btn-primary::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--spectrum); transform: scaleX(0); transition: transform 0.5s var(--ease); }
.btn-primary:hover::after { transform: scaleX(1); }
@media (prefers-color-scheme: dark) { .btn-primary { --btn-fill: rgba(0, 0, 0, 0.08); } }

.eyebrow { color: var(--accent-ink); }
.brand .logo { height: 54px; }
@media (max-width: 639px) { .brand .logo { height: 44px; } }
.sister-builders .sister-in { position: relative; overflow: hidden; isolation: isolate; }
.sister-builders .sister-in::after { content: ""; position: absolute; inset: 0 0 0 40%; z-index: -1; background: url("/assets/img/site/tex-blueprint-664.webp") right center / cover; opacity: 0.55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.h2 { letter-spacing: -0.03em; }

/* ---------- Hero ---------- */
.p-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 88px); overflow: clip; }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.p-hero-title { font-size: clamp(2.6rem, 1.5rem + 3.5vw, 4.9rem); line-height: 1.02; letter-spacing: -0.04em; }
.pig { font-style: normal; }
.pig, .pig .w > span { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p-hero-sub { margin-top: 24px; max-width: 42ch; font-size: var(--step-1); color: var(--ink-2); }
.p-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.p-hero-art { position: relative; justify-self: center; width: min(100%, 520px); }
.p-hero-art::before, .p-hero-art::after { content: ""; position: absolute; z-index: -1; width: 46%; aspect-ratio: 2 / 3; border-radius: 14px; box-shadow: 0 30px 50px -30px rgb(var(--shadow) / 0.5); }
.p-hero-art::before { top: 6%; left: -9%; background: linear-gradient(var(--red) 0 33%, var(--orange) 0 66%, var(--yellow) 0); transform: rotate(-9deg); }
.p-hero-art::after { bottom: 14%; right: -12%; background: linear-gradient(var(--green) 0 33%, var(--blue) 0 66%, var(--indigo) 0); transform: rotate(8deg); }
.brush-frame { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); box-shadow: 0 50px 90px -50px rgb(var(--shadow) / 0.6); }
.brush-frame img { width: 100%; height: 100%; object-fit: cover; }
.js .brush-frame img { filter: grayscale(1) contrast(0.92) brightness(1.06); transition: filter 1.4s var(--ease); }
.js .brush-frame.is-full img { filter: none; }
.brush-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: url("/assets/img/site/cursor-brush.png") 2 24, crosshair; cursor: -webkit-image-set(url("/assets/img/site/cursor-brush.png") 1x, url("/assets/img/site/cursor-brush@2x.png") 2x) 2 24, crosshair; cursor: image-set(url("/assets/img/site/cursor-brush.png") 1x, url("/assets/img/site/cursor-brush@2x.png") 2x) 2 24, crosshair; }
.brush-hint { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.9); color: #17191f; font-weight: 600; font-size: 0.85rem; pointer-events: none; transition: opacity 0.5s, transform 0.5s var(--ease); }
.brush-frame.is-touched .brush-hint { opacity: 0; transform: translateY(-6px); }
.no-js .brush-hint, html:not(.js) .brush-hint { display: none; }
.brush-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; }
.brush-ctrl p { flex: 1 1 100%; font-size: 0.9rem; color: var(--ink-2); }
.chip-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 0.88rem; transition: border-color 0.25s, transform 0.3s var(--ease); }
.chip-btn:hover { border-color: var(--ink); }
.chip-btn:active { transform: scale(0.97); }
@media (max-width: 899px) {
    .p-hero-grid { grid-template-columns: 1fr; }
    .p-hero-art { width: min(100%, 460px); margin-top: 8px; }
    .p-hero-art::before { left: -6%; }
    .p-hero-art::after { right: -6%; }
}

.p-ribbon { height: 20px; background: url("/assets/img/site/tex-paint-694.webp") center / cover, var(--spectrum); }

/* ---------- Services as paint chips ---------- */
.chips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.pchip:nth-child(3n + 2) { margin-top: 56px; }
.pchip a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.pchip a:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgb(var(--shadow) / 0.5); }
.pchip-band { position: relative; display: flex; align-items: center; height: 60px; padding: 0 18px; background: var(--sw); overflow: hidden; }
.pchip-band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgb(255 255 255 / 0.12) 0 2px, transparent 2px 9px); opacity: 0.7; }
.pchip-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: #17191f; font-size: 1.15rem; }
.pchip-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.pchip-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pchip-img::after { content: ""; position: absolute; inset: 0; background: var(--sw); mix-blend-mode: color; opacity: 0; transition: opacity 0.6s var(--ease); }
.pchip a:hover .pchip-img img { transform: scale(1.06); }
.pchip a:hover .pchip-img::after { opacity: 0.32; }
.pchip-body { display: grid; gap: 8px; padding: 22px 22px 24px; }
.pchip-title { font: 800 var(--step-2)/1.1 var(--font-head); letter-spacing: -0.025em; }
.pchip-text { color: var(--ink-2); }
.pchip-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; color: var(--accent-ink); }
.pchip-more .ph { transition: transform 0.4s var(--ease); }
.pchip a:hover .pchip-more .ph { transform: translateX(5px); }
@media (max-width: 1099px) { .chips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pchip:nth-child(3n + 2) { margin-top: 0; } .pchip:nth-child(even) { margin-top: 40px; } }
@media (max-width: 639px) { .chips-grid { grid-template-columns: 1fr; } .pchip:nth-child(even) { margin-top: 0; } }

/* ---------- Process ---------- */
.proc { background: var(--bg-alt); }
.proc-step:nth-child(1) { --sw: var(--red); }
.proc-step:nth-child(2) { --sw: var(--orange); }
.proc-step:nth-child(3) { --sw: var(--green); }
.proc-step:nth-child(4) { --sw: var(--blue); }
.proc-track { --track: var(--spectrum); }

/* ---------- Why ---------- */
.p-why-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.p-why-photo { position: relative; margin: 0; }
.p-why-photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: var(--r-lg); background: linear-gradient(200deg, var(--red), var(--orange) 22%, var(--yellow) 40%, var(--green) 58%, var(--blue) 78%, var(--indigo)); z-index: 0; }
.p-why-photo img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r-lg); }
.p-reasons { display: grid; gap: 26px; }
.p-reasons li { display: flex; gap: 18px; align-items: flex-start; }
.p-reason-ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--sw) 14%, var(--surface)); color: var(--sw); font-size: 1.4rem; }
.p-reasons h3 { font-size: var(--step-1); line-height: 1.25; margin-bottom: 6px; }
.p-reasons p { color: var(--ink-2); }
@media (max-width: 899px) { .p-why-grid { grid-template-columns: 1fr; } .p-why-photo { margin-right: 18px; } }

/* ---------- Testimonials ---------- */
.p-quotes-panel { position: relative; padding: clamp(32px, 6vw, 88px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.p-quotes-panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(180deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--indigo)); }
.p-quotes-mark { display: block; font-size: 3.4rem; margin-bottom: 18px; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p-quotes .quote blockquote p { max-width: 34ch; }

/* ---------- Service pages ---------- */
.svc-hero .h1::after { content: ""; display: block; width: 84px; height: 10px; margin-top: 26px; border-radius: 10px; background: var(--svc, var(--red)); }
.svc-hero .incl .ph { color: var(--svc); }

/* ---------- CTA band ---------- */
.cta-in { background: #17191f; color: #fff; }
.cta-in::before { content: ""; position: absolute; inset: auto 0 0 0; height: 12px; background: url("/assets/img/site/tex-paint-694.webp") center / cover; }
.cta-in::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; border-radius: 50%; background: conic-gradient(var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--indigo), var(--red)); opacity: 0.22; filter: blur(30px); z-index: -1; }
.cta-in .btn-primary { background: #fff; color: #17191f; --btn-fill: rgba(0, 0, 0, 0.06); }
.cta-in .btn-primary:hover { background: #fff; }

:root { --progress: var(--spectrum); }