/* SeanRoberts.ca body redesign V3
   Scope: body components on the four V3 pages only.
   Existing navigation, hero, footer and structural layout remain controlled by seanroberts_ca.css. */

.srv3-page {
    --srv3-bg-1: #080b10;
    --srv3-bg-2: #0d1219;
    --srv3-bg-3: #111822;
    --srv3-bg-4: #1e1e28;
    --srv3-text: #ffffff;
    --srv3-text-soft: #d6dce2;
    --srv3-blue: #7abaff;
    --srv3-yellow: #f4f293;
    --srv3-border: rgba(122, 186, 255, 0.22);
    --srv3-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    --srv3-radius: 18px;
    --srv3-space: clamp(22px, 3.3vw, 46px);
    color: var(--srv3-text);
    background: transparent;
    padding: 0;
    margin: 0 0 34px;
}

.srv3-page--home { --srv3-wash: rgba(244, 178, 91, 0.08); --srv3-edge: rgba(244, 178, 91, 0.24); }
.srv3-page--design { --srv3-wash: rgba(96, 157, 183, 0.10); --srv3-edge: rgba(96, 157, 183, 0.32); }
.srv3-page--apps { --srv3-wash: rgba(185, 108, 88, 0.09); --srv3-edge: rgba(185, 108, 88, 0.30); }
.srv3-page--referral { --srv3-wash: rgba(211, 177, 141, 0.10); --srv3-edge: rgba(211, 177, 141, 0.34); }

.srv3-page *, .srv3-page *::before, .srv3-page *::after { box-sizing: border-box; }

.srv3-page a { color: var(--srv3-blue); }
.srv3-page a:hover, .srv3-page a:focus-visible { color: var(--srv3-yellow); }

.srv3-intro,
.srv3-section,
.srv3-callout,
.srv3-faq {
    margin: 0 0 var(--srv3-space);
    border: 1px solid var(--srv3-border);
    border-radius: var(--srv3-radius);
    background:
        linear-gradient(145deg, var(--srv3-wash), transparent 42%),
        var(--srv3-bg-2);
    box-shadow: var(--srv3-shadow);
    overflow: hidden;
}

.srv3-intro { padding: clamp(24px, 4vw, 52px); }
.srv3-section, .srv3-faq { padding: clamp(22px, 3.4vw, 42px); }
.srv3-callout { padding: clamp(24px, 4vw, 44px); background: linear-gradient(120deg, var(--srv3-bg-3), var(--srv3-bg-1)); }

.srv3-kicker {
    display: block;
    margin: 0 0 10px;
    color: var(--srv3-yellow);
    font-size: clamp(0.82rem, 1vw, 0.96rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.srv3-page h2,
.srv3-page h3 {
    margin-top: 0;
    text-wrap: balance;
}

.srv3-page h2 {
    margin-bottom: 16px;
    color: var(--srv3-blue);
    font-size: clamp(1.75rem, 3vw, 2.65rem);
    line-height: 1.18;
}

.srv3-page h3 {
    margin-bottom: 10px;
    color: var(--srv3-yellow);
    font-size: clamp(1.18rem, 1.8vw, 1.5rem);
    line-height: 1.3;
}

.srv3-page p,
.srv3-page li {
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.72;
}

.srv3-page p { max-width: 78ch; margin: 0 0 18px; color: var(--srv3-text-soft); }
.srv3-page p:last-child { margin-bottom: 0; }
.srv3-page strong { color: #fff; }
.srv3-lead { max-width: 68ch !important; color: #fff !important; font-size: clamp(1.12rem, 1.6vw, 1.35rem) !important; line-height: 1.66 !important; }
.srv3-note { color: var(--srv3-text-soft); font-size: 0.96rem; }

.srv3-split {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
    gap: clamp(24px, 4vw, 48px);
    /* align-items: center; */
}
.srv3-split--reverse { grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr); }
.srv3-split--reverse .srv3-copy { order: 2; }
.srv3-split--reverse .srv3-figure { order: 1; }

.srv3-figure {
    margin: 0;
    border: 1px solid var(--srv3-edge);
    border-radius: 16px;
    background: var(--srv3-bg-1);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
.srv3-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.srv3-figure figcaption { padding: 11px 14px 13px; color: var(--srv3-text-soft); font-size: 0.86rem; line-height: 1.5; border-top: 1px solid var(--srv3-border); background: rgba(0,0,0,.24); }

.srv3-grid { display: grid; gap: 18px; }
.srv3-grid--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.srv3-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srv3-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.srv3-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.srv3-card {
    min-width: 0;
    padding: clamp(18px, 2.3vw, 26px);
    border: 1px solid var(--srv3-border);
    border-radius: 14px;
    background: var(--srv3-bg-3);
}
.srv3-card p { font-size: 1rem; line-height: 1.62; }
.srv3-card h3 { color: var(--srv3-blue); font-size: clamp(1.12rem, 1.6vw, 1.35rem); }

.srv3-list { list-style: none; margin: 18px 0 0; padding: 0; }
.srv3-list li { position: relative; margin: 0 0 12px; padding: 0 0 0 30px; color: #fff; }
.srv3-list li::before { content: "\2713"; position: absolute; left: 0; top: 0.08em; color: var(--srv3-blue); font-weight: 700; }

.srv3-steps { counter-reset: srv3-step; list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.srv3-steps li { counter-increment: srv3-step; position: relative; padding: 18px 18px 18px 66px; border: 1px solid var(--srv3-border); border-radius: 12px; background: var(--srv3-bg-3); color: var(--srv3-text-soft); }
.srv3-steps li::before { content: counter(srv3-step); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--srv3-blue); color: #06110a; font-weight: 800; line-height: 1; }

.srv3-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.srv3-metric { padding: 18px; border: 1px solid var(--srv3-border); border-radius: 12px; background: var(--srv3-bg-4); }
.srv3-metric strong { display: block; margin-bottom: 4px; color: var(--srv3-yellow); font-size: clamp(1.05rem, 1.5vw, 1.28rem); }
.srv3-metric span { color: var(--srv3-text-soft); font-size: 0.94rem; line-height: 1.55; }

.srv3-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.srv3-button, .srv3-button--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid var(--srv3-blue);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.srv3-button { background: var(--srv3-blue); color: #06110a !important; }
.srv3-button--secondary { background: transparent; color: #fff !important; }
.srv3-button:hover, .srv3-button:focus-visible, .srv3-button--secondary:hover, .srv3-button--secondary:focus-visible { transform: translateY(-1px); background: var(--srv3-yellow); border-color: var(--srv3-yellow); color: #06110a !important; }

.srv3-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr);
    gap: 20px;
    align-items: stretch;
    margin-top: 26px;
}
.srv3-price__panel { padding: 24px; border: 1px solid var(--srv3-edge); border-radius: 14px; background: var(--srv3-bg-4); }
.srv3-price__value { margin: 0 0 6px; color: var(--srv3-yellow); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; }
.srv3-price__value small { font-size: .35em; color: #fff; }
.srv3-price__panel p { font-size: .98rem; }

.srv3-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.srv3-tags li { padding: 8px 11px; border: 1px solid var(--srv3-border); border-radius: 999px; background: rgba(255,255,255,.035); color: #fff; font-size: .9rem; line-height: 1.2; }

.srv3-agencies { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.srv3-agencies li { padding: 10px 13px; border-radius: 10px; background: var(--srv3-bg-4); border: 1px solid var(--srv3-border); color: #fff; font-size: .95rem; line-height: 1.3; }

.srv3-faq > p { max-width: 70ch; }
.srv3-faq__list { display: grid; gap: 10px; margin-top: 22px; }
.srv3-faq__item { border: 1px solid var(--srv3-border); border-radius: 12px; background: var(--srv3-bg-3); overflow: hidden; }
.srv3-faq__item summary { cursor: pointer; padding: 16px 48px 16px 18px; color: #fff; font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 700; line-height: 1.45; }
.srv3-faq__item summary:hover, .srv3-faq__item summary:focus-visible { color: var(--srv3-yellow); }
.srv3-faq__answer { padding: 0 18px 18px; }
.srv3-faq__answer p { font-size: 1rem; line-height: 1.65; }

.srv3-offer {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 22px;
    align-items: stretch;
}
.srv3-offer__reward { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--srv3-edge); border-radius: 16px; background: linear-gradient(145deg, rgba(211,177,141,.14), transparent 60%), var(--srv3-bg-4); }
.srv3-offer__amount { display: block; margin: 8px 0 10px; color: var(--srv3-yellow); font-size: clamp(2.7rem, 6vw, 5.1rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.srv3-offer__amount small { font-size: .24em; color: #fff; letter-spacing: normal; }
.srv3-deadline { display: inline-block; margin-top: 10px; padding: 8px 11px; border-radius: 8px; background: rgba(244,242,147,.10); color: var(--srv3-yellow); font-weight: 700; }

@media (max-width: 1080px) {
    .srv3-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .srv3-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
    .srv3-split, .srv3-split--reverse, .srv3-price, .srv3-offer { grid-template-columns: 1fr; }
    .srv3-split--reverse .srv3-copy, .srv3-split--reverse .srv3-figure { order: initial; }
    .srv3-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .srv3-page { --srv3-space: 24px; }
    .srv3-intro, .srv3-section, .srv3-callout, .srv3-faq { border-radius: 12px; }
    .srv3-grid--2, .srv3-grid--3, .srv3-grid--4 { grid-template-columns: 1fr; }
    .srv3-actions { flex-direction: column; align-items: stretch; }
    .srv3-button, .srv3-button--secondary { width: 100%; }
    .srv3-page p, .srv3-page li { font-size: 1rem; }
    .srv3-figure figcaption { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .srv3-button, .srv3-button--secondary { transition: none; }
}