/* SAMCO Builders Inc. theme: drafting-white canvas, logo navy ink, gold actions,
   and blueprint grid lines. Dark mode turns the page into the blueprint itself. */
:root {
    color-scheme: light dark;
    --head-weight: 700;
    --plan: #0e2a52;
    --grid: rgba(15, 36, 64, 0.055);
    --grid-major: rgba(15, 36, 64, 0.09);
    --bg: #f4f6f9;
    --bg-alt: #e9eef4;
    --surface: #ffffff;
    --surface-2: #eef2f7;
    --ink: #0f2440;
    --ink-2: #4a5b72;
    --line: rgba(15, 36, 64, 0.12);
    --line-2: rgba(15, 36, 64, 0.26);
    --accent: #c9a96a;
    --accent-hover: #d7ba82;
    --on-accent: #0f2440;
    --accent-ink: #876628;
    --focus: #1d5fbf;
    --hdr-bg: rgba(244, 246, 249, 0.86);
    --shadow: 15 36 64;
    --btn-fill: rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
    :root {
        --grid: rgba(150, 190, 255, 0.06);
        --grid-major: rgba(150, 190, 255, 0.1);
        --bg: #0b1a30;
        --bg-alt: #0e2140;
        --surface: #10264a;
        --surface-2: #163059;
        --ink: #eaf0f8;
        --ink-2: #a7b6cc;
        --line: rgba(190, 210, 240, 0.14);
        --line-2: rgba(190, 210, 240, 0.28);
        --accent: #d4b373;
        --accent-hover: #e2c58d;
        --on-accent: #0b1a30;
        --accent-ink: #e2c58d;
        --focus: #8fb8ff;
        --hdr-bg: rgba(11, 26, 48, 0.84);
        --shadow: 0 0 0;
    }
    .co-mark-builders, .co-mark-painting { background: #fff; }
}
h1, h2, h3 { letter-spacing: -0.03em; }
.eyebrow { color: var(--accent-ink); }
.brand .logo { height: 44px; }

/* Blueprint grid on alternate sections */
.sec-alt, .b-svc, .proc {
    background-color: var(--bg-alt);
    background-image:
        linear-gradient(var(--grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    background-position: -1px -1px;
}

/* ---------- Hero: blueprint to built ---------- */
.b-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 5vw, 72px); }
.b-hero-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.b-hero-title { font-size: var(--step-5); line-height: 1; letter-spacing: -0.04em; }
.b-gold { color: var(--accent-ink); }
.b-hero-sub { font-size: var(--step-1); color: var(--ink-2); max-width: 40ch; }
.b-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 899px) { .b-hero-top { grid-template-columns: 1fr; } }

.b-compare { --pos: 52%; position: relative; aspect-ratio: 21 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--plan); box-shadow: 0 50px 90px -50px rgb(var(--shadow) / 0.6); isolation: isolate; user-select: none; }
.b-layer { position: absolute; inset: 0; }
.b-layer img { width: 100%; height: 100%; object-fit: cover; }
.b-plan {
    background-color: var(--plan);
    background-image:
        linear-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.1) 1px, transparent 1px),
        linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.b-plan img { opacity: 1; }
.b-layer img { object-position: 50% 45%; }
.b-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; z-index: 2; }
.b-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--accent); color: #0f2440; font-size: 1.4rem; box-shadow: 0 10px 30px rgb(0 0 0 / 0.35), 0 0 0 6px rgb(201 169 106 / 0.25); transition: transform 0.3s var(--ease); }
.b-compare:hover .b-knob { transform: scale(1.08); }
.b-compare:has(input:focus-visible) .b-knob { outline: 3px solid #fff; outline-offset: 3px; }
.b-compare input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.b-tag { position: absolute; top: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; pointer-events: none; }
.b-tag-plan { left: 18px; background: rgb(14 42 82 / 0.85); color: #dce8ff; border: 1px solid rgb(255 255 255 / 0.25); }
.b-tag-built { right: 18px; background: rgb(255 255 255 / 0.92); color: #0f2440; }
@media (max-width: 767px) { .b-compare { aspect-ratio: 4 / 3; } }

.b-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.b-trust li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 0.95rem; }
.b-trust .ph { color: var(--accent-ink); font-size: 1.35rem; }
@media (max-width: 899px) { .b-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .b-trust { grid-template-columns: 1fr; } }

/* ---------- Services as spec sheets ---------- */
.b-svc-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.b-svc-intro { position: sticky; top: calc(var(--hdr-h) + 32px); }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spec { --c: var(--line-2); position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 26px 34px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color 0.35s, transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.spec::before, .spec::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--accent); border-style: solid; transition: width 0.5s var(--ease), height 0.5s var(--ease); }
.spec::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.spec::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.spec:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgb(var(--shadow) / 0.5); }
.spec:hover::before, .spec:hover::after { width: 40px; height: 40px; }
.spec-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.spec-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; background: var(--surface-2); color: var(--ink); font-size: 1.45rem; border: 1px solid var(--line); }
.spec-go { color: var(--ink-2); font-size: 1.15rem; transition: transform 0.4s var(--ease), color 0.3s; }
.spec:hover .spec-go { transform: translate(3px, -3px); color: var(--accent-ink); }
.spec-title { font: 700 var(--step-2)/1.1 var(--font-head); letter-spacing: -0.03em; }
.spec-text { color: var(--ink-2); }
.spec-dim { position: absolute; left: 26px; right: 26px; bottom: 16px; height: 9px; border-left: 1px solid var(--c); border-right: 1px solid var(--c); }
.spec-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--c); transform: scaleX(0.2); transform-origin: left; transition: transform 0.7s var(--ease); }
.spec:hover .spec-dim { --c: var(--accent); }
.spec:hover .spec-dim::before { transform: scaleX(1); }
@media (max-width: 1023px) { .b-svc-grid { grid-template-columns: 1fr; } .b-svc-intro { position: static; } }
@media (max-width: 599px) { .spec-grid { grid-template-columns: 1fr; } }

/* ---------- Process: five stages ---------- */
.proc-track { --n: 5; }
.proc-ic { border-radius: 4px; transform-origin: center; }
.proc-step .proc-ic { border-color: var(--ink); color: var(--ink); }
.proc-track { --track: var(--accent); }
.proc-step { --act-bg: var(--accent); --act-fg: #0f2440; }

/* ---------- Featured project spotlight ---------- */
.b-spot { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); margin-top: clamp(32px, 4vw, 48px); align-items: stretch; }
.b-spot-stage { position: relative; min-height: 420px; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.b-spot-photo { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.7s var(--ease); }
.b-spot-photo.is-on { opacity: 1; }
.b-spot-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.b-spot-photo.is-on img { transform: none; }
.b-spot-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 16px; padding: 60px 24px 22px; background: linear-gradient(transparent, rgb(8 18 34 / 0.78)); color: #fff; }
.b-spot-photo figcaption span { opacity: 0.8; }
.b-spot-list { display: grid; gap: 10px; align-content: start; }
.b-spot-item { width: 100%; display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color 0.3s, background-color 0.3s, transform 0.4s var(--ease); }
.b-spot-item:hover { transform: translateX(4px); }
.b-spot-item.is-on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.b-spot-thumb { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.b-spot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.b-spot-text { display: grid; gap: 2px; }
.b-spot-text strong { font-size: 0.98rem; line-height: 1.3; }
.b-spot-text span { color: var(--ink-2); font-size: 0.85rem; }
@media (max-width: 899px) { .b-spot { grid-template-columns: 1fr; } .b-spot-stage { min-height: 0; aspect-ratio: 4 / 3; } .b-spot-list { grid-template-columns: 1fr 1fr; } .b-spot-item { grid-template-columns: 64px 1fr; } }
@media (max-width: 519px) { .b-spot-list { grid-template-columns: 1fr; } }

/* ---------- Why: a blueprint sheet ---------- */
.b-why-panel {
    position: relative;
    padding: clamp(32px, 6vw, 80px);
    border-radius: var(--r-lg);
    color: #eaf0f8;
    background-color: #0e2a52;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px),
        linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    overflow: hidden;
}
.b-why-panel::after { content: ""; position: absolute; right: 0; bottom: 0; width: 55%; height: 100%; background: url("/assets/img/site/tex-blueprint-664.webp") right center / cover; opacity: 0.35; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.b-why-head { position: relative; z-index: 1; max-width: 640px; }
.b-why-head .lead { color: #b9c8de; margin-top: 18px; }
.b-why-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: clamp(40px, 5vw, 64px); }
.b-why-list li { padding-top: 22px; border-top: 1px solid rgb(201 169 106 / 0.6); }
.b-why-list .ph { font-size: 1.7rem; color: var(--gold-soft); }
.b-why-list h3 { margin: 16px 0 8px; font-size: var(--step-1); line-height: 1.25; }
.b-why-list p { color: #b9c8de; }
@media (max-width: 999px) { .b-why-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .b-why-list { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.b-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.b-quote-grid .is-lead { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: start; }
.b-quote-grid .is-lead figcaption { grid-column: 2; }
.b-quote-grid .is-lead blockquote p { font: 500 var(--step-2)/1.35 var(--font-head); letter-spacing: -0.015em; }
.qcard { border-radius: 4px; }
@media (max-width: 767px) { .b-quote-grid { grid-template-columns: 1fr; } .b-quote-grid .is-lead { grid-column: auto; display: flex; } }

/* ---------- Shared pieces, builders styling ---------- */
.svc-hero .h1::after { content: ""; display: block; width: 96px; height: 9px; margin-top: 26px; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat; }
.incl li { border-radius: 4px; }
.cta-in { background-color: #0e2a52; color: #fff; background-image: linear-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.07) 1px, transparent 1px); background-size: 32px 32px; }
.cta-in::after { content: ""; position: absolute; inset: 0 0 0 45%; background: url("/assets/img/site/tex-blueprint-664.webp") right center / cover; opacity: 0.5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); z-index: -1; }
.cta-in .btn-primary { background: var(--gold); color: #0f2440; }
.sister-painting .sister-in { background: #17191f; position: relative; overflow: hidden; }
.sister-painting .sister-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #e23b2e, #f39224, #f5c01e, #16a05a, #1f6fd6, #2b3a8f); }
.sister-painting .link-arrow { color: #fff; }
.b-plan.is-tinted img { filter: grayscale(1) contrast(1.4) brightness(1.1); mix-blend-mode: screen; opacity: 0.55; }