/*
 * Creative Exposure V2 - shared presentation for the website service pages
 * (Business Solutions, Website Design, Our Philosophy).
 *
 * Presentation only, realigned to the live creative.ky page system (owner direction): the dark
 * page hero (photo-led where an owner-approved photograph exists) with the pill tag and the
 * white + copper headline, off-white / cream section rhythm with one dark mid section where
 * the live About page has one, rounded hairline cards with rust-pale icon boxes, rounded
 * package cards with the featured tier in charcoal, the live numbered-circle process steps,
 * link cards, and the dark closing call to action. DDR-001 tokens only; the shared shell,
 * tags, buttons, hero, CTA, steps and link cards come from style.css. Every rule is
 * namespaced under .ce-spage so no shared utility, the homepage, or any other template is
 * affected. No pricing, cart, checkout or SEO output. No em dashes.
 */

.ce-spage { background: var(--ce-color-bg-page); color: var(--ce-color-text); }

/* Editorial helpers */
.ce-spage .spg-lede { font-size: 1.02rem; line-height: 1.7; color: var(--ce-color-text-mid); max-width: 640px; margin: 0; }
.ce-spage .spg-lede + .spg-lede { margin-top: 16px; }
.ce-spage .ce-sec--dark .spg-lede { color: var(--ce-text-on-dark); }
.ce-spage .spg-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: var(--ce-fw-bold); color: var(--ce-color-rust-light); }
.ce-spage .ce-sec--cream .spg-link, .ce-spage .ce-sec--page .spg-link { color: var(--ce-color-rust); }
.ce-spage .spg-center { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.ce-spage .spg-hint { width: 100%; text-align: center; font-size: 0.84rem; color: var(--ce-color-text-muted); margin: 0; }

/* Two-column editorial moments (creative.ky "Who We Are" composition). */
.ce-spage .spg-two { display: grid; grid-template-columns: 1fr; gap: 24px 64px; align-items: start; }
.ce-spage .spg-two .ce-sec__head { margin-bottom: 0; }
.ce-spage .spg-two__side .spg-lede { max-width: none; }
.ce-spage .spg-duo { display: grid; grid-template-columns: 1fr; gap: 40px 64px; }
.ce-spage .spg-duo .ce-sec__head { margin-bottom: 0; }

/* Owner-approved photograph crops inside the shared photo hero. Business Solutions: the wall
   wordmark is kept out of the frame (never a fragment); Our Philosophy keeps the foreground
   worker, the press and the wall message. Tuned per viewport in the media queries below. */
.ce-spage .ce-hero__photo--business img { object-position: 78% 50%; }
.ce-spage .ce-hero__photo--philosophy img { object-position: 6% 50%; }

/* Service / capability cards (creative.ky "Choose Your Path" cards). */
.ce-spage .spg-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ce-spage .spg-card { display: flex; flex-direction: column; background: var(--ce-color-bg-page); border: 1px solid rgba(28, 26, 23, 0.1); border-radius: 16px; padding: 28px 24px; transition: transform var(--ce-transition), box-shadow var(--ce-transition), border-color var(--ce-transition); }
.ce-spage .spg-card:hover { transform: translateY(-4px); box-shadow: var(--ce-shadow-lg); }
.ce-spage .spg-card--cream { background: var(--ce-color-bg-cream); border-color: transparent; }
.ce-spage .spg-card__ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--ce-rust-pale); color: var(--ce-color-rust); margin-bottom: 16px; }
.ce-spage .spg-card__n { font-size: 1.05rem; font-weight: var(--ce-fw-bold); line-height: 1.3; color: var(--ce-color-text); margin: 0 0 8px; }
.ce-spage .spg-card__d { font-size: 0.88rem; line-height: 1.65; color: var(--ce-color-text-mid); margin: 0 0 18px; }
.ce-spage .spg-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ce-color-rust); transition: color var(--ce-transition); }
.ce-spage .spg-card__cta:hover { color: var(--ce-color-rust-light); }

/* Package cards (creative.ky .svc-card: featured tier in charcoal with a rust border). */
.ce-spage .spg-pkgs { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ce-spage .spg-pkg { position: relative; display: flex; flex-direction: column; background: var(--ce-color-bg-page); border: 1px solid var(--ce-line-dark); border-radius: 16px; padding: 32px 28px; color: var(--ce-color-text); transition: transform var(--ce-transition), box-shadow var(--ce-transition); }
.ce-spage .spg-pkg:hover { transform: translateY(-4px); box-shadow: var(--ce-shadow-lg); }
.ce-spage .spg-pkg--feat { background: var(--ce-color-black); border-color: var(--ce-color-rust); color: var(--ce-text-on-dark); }
.ce-spage .spg-pkg__tag { display: inline-block; align-self: flex-start; font-size: 0.68rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ce-color-rust); margin-bottom: 14px; }
.ce-spage .spg-pkg--feat .spg-pkg__tag { background: var(--ce-color-rust); color: var(--ce-color-bg-page); padding: 4px 10px; border-radius: var(--ce-radius-pill); }
.ce-spage .spg-pkg__n { font-size: 1.3rem; font-weight: var(--ce-fw-bold); letter-spacing: -0.01em; margin: 0 0 10px; color: var(--ce-color-text); }
.ce-spage .spg-pkg--feat .spg-pkg__n { color: var(--ce-color-bg-page); }
.ce-spage .spg-pkg__price { font-size: 2rem; line-height: 1.05; font-weight: var(--ce-fw-extrabold); letter-spacing: -0.02em; color: var(--ce-color-rust); margin: 0; }
.ce-spage .spg-pkg--feat .spg-pkg__price { color: var(--ce-color-rust-light); }
.ce-spage .spg-pkg__per { font-size: 0.74rem; font-weight: var(--ce-fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ce-color-text-muted); margin: 6px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--ce-line-dark); }
.ce-spage .spg-pkg--feat .spg-pkg__per { color: var(--ce-text-on-dark); border-bottom-color: var(--ce-line-light); }
/* Sales hierarchy: value headline, then supporting copy, then what it gives the business. The
   technical scope sits below the print bundle in a compact disclosure so it never becomes the
   opening argument or turns the card into a wall of specifications. */
.ce-spage .spg-pkg__head { font-size: 1.02rem; line-height: 1.45; font-weight: var(--ce-fw-bold); color: var(--ce-color-text); margin: 0 0 10px; }
.ce-spage .spg-pkg--feat .spg-pkg__head { color: var(--ce-color-bg-page); }
.ce-spage .spg-pkg__value { font-size: 0.9rem; line-height: 1.65; color: var(--ce-color-text-mid); margin: 0 0 18px; }
.ce-spage .spg-pkg--feat .spg-pkg__value { color: var(--ce-text-on-dark); }
.ce-spage .spg-pkg__gl { font-size: 0.66rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-color-text-muted); margin: 0 0 10px; }
.ce-spage .spg-pkg--feat .spg-pkg__gl { color: var(--ce-color-rust-light); }
.ce-spage .spg-pkg ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ce-spage .spg-pkg__gives { flex: 1; }

/* Build inclusions: owner-locked to stay fully expanded. No disclosure control, nothing hidden. */
.ce-spage .spg-pkg__scope { margin: 0 0 20px; border-top: 1px solid var(--ce-line-dark); padding-top: 16px; }
.ce-spage .spg-pkg--feat .spg-pkg__scope { border-top-color: var(--ce-line-light); }
.ce-spage .spg-pkg__scope ul { margin: 0; }

/* Owner-locked print bundle. Deliberately a band, not a footnote: it is the part of the offer
   customers remember, so it reads at the same weight as the feature list above it. */
.ce-spage .spg-pkg__bundle { display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px; padding: 14px 16px; border-radius: var(--ce-radius-card-sm); background: var(--ce-rust-pale); border-left: 3px solid var(--ce-color-rust); }
.ce-spage .spg-pkg__bundle-l { font-size: 0.66rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-color-rust); }
.ce-spage .spg-pkg__bundle-v { font-size: 0.98rem; font-weight: var(--ce-fw-bold); line-height: 1.4; color: var(--ce-color-text); }
.ce-spage .spg-pkg--feat .spg-pkg__bundle { background: rgba(181, 86, 42, 0.22); border-left-color: var(--ce-color-rust-light); }
.ce-spage .spg-pkg--feat .spg-pkg__bundle-l { color: var(--ce-color-rust-light); }
.ce-spage .spg-pkg--feat .spg-pkg__bundle-v { color: var(--ce-color-bg-page); }
.ce-spage .spg-pkg__note { font-size: 0.8rem; line-height: 1.6; color: var(--ce-color-text-mid); margin: 0 0 20px; }
.ce-spage .spg-pkg li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--ce-color-text-mid); }
.ce-spage .spg-pkg li::before { content: "\2713"; color: var(--ce-color-rust); font-weight: var(--ce-fw-extrabold); font-size: 0.9rem; flex-shrink: 0; }
.ce-spage .spg-pkg--feat li { color: var(--ce-text-on-dark); }
.ce-spage .spg-pkg--feat li::before { color: var(--ce-color-rust-light); }
.ce-spage .spg-pkg .ce-btn { width: 100%; }
.ce-spage .spg-pkgs--duo { margin-top: 24px; }
.ce-spage .spg-pkgnote { font-size: 0.8rem; line-height: 1.6; color: var(--ce-color-text-muted); margin: 24px 0 0; max-width: 720px; }

/* Included checklist (basic SEO + GBP) */
.ce-spage .spg-incl { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0 32px; margin: 8px 0 0; padding: 0; }
.ce-spage .spg-incl li { display: flex; align-items: baseline; gap: 10px; font-size: 0.92rem; line-height: 1.6; color: var(--ce-color-text); padding: 10px 0; border-bottom: 1px solid var(--ce-line-dark); }
.ce-spage .spg-incl li::before { content: "\2713"; color: var(--ce-color-rust); font-weight: var(--ce-fw-extrabold); font-size: 0.85rem; }
.ce-spage .spg-fineprint { font-size: 0.8rem; line-height: 1.6; color: var(--ce-color-text-muted); margin: 24px 0 0; max-width: 720px; }

/* ------------------------------------------------------------ DESKTOP DENSITY
   Owner correction: short modular information must not sit in one narrow column with half the
   desktop viewport left empty. The readable measure still governs long editorial copy; these
   compositions apply only to Q&A groups, disclosures and structured process information. */

/* Heading column beside its content. Roughly 38 / 62 with a controlled gap. */
.ce-spage .ce-split { display: grid; grid-template-columns: 1fr; gap: 28px; }
.ce-spage .ce-split__intro h2 { margin-bottom: 14px; }
.ce-spage .ce-split__intro .ce-sec__lede { margin-bottom: 0; }
.ce-spage .ce-split .ce-faq { max-width: none; }

/* Two-column Q&A. The split is made in the template, so a question and its answer are always
   one intact unit and can never break across the column boundary. */
.ce-spage .ce-faqcols { display: grid; grid-template-columns: 1fr; gap: 0; }
.ce-spage .ce-faqcols .ce-faq { max-width: none; }

/* Full-width Q&A row: heading above, answers across the whole canvas beneath it. Each question
   and answer is one grid item, so nothing can break across a column. Ruled, not boxed. */
.ce-spage .ce-qagrid { display: grid; grid-template-columns: 1fr; gap: 0 48px; }
.ce-spage .ce-qa { border-top: 1px solid var(--ce-line-dark); padding: 22px 0; }
.ce-spage .ce-qa:last-child { border-bottom: 1px solid var(--ce-line-dark); }
.ce-spage .ce-qa__q { font-size: 1.05rem; font-weight: var(--ce-fw-bold); line-height: 1.4; color: var(--ce-color-text); margin: 0 0 10px; }
.ce-spage .ce-qa__a { font-size: 0.95rem; line-height: 1.75; color: var(--ce-color-text-mid); margin: 0; }

/* Trust grid (creative.ky .highlight): rounded cream / white items with a rust-pale icon. */
.ce-spage .spg-trust { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ce-spage .spg-trust__item { display: flex; gap: 12px; align-items: center; border: 1px solid var(--ce-line-dark); border-radius: var(--ce-radius-card-sm); background: var(--ce-color-bg-page); padding: 16px 18px; }
.ce-spage .spg-trust__ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: var(--ce-rust-pale); color: var(--ce-color-rust); }
.ce-spage .spg-trust__t { font-size: 0.9rem; line-height: 1.5; color: var(--ce-color-text); }

/* Dark cards on the dark mid section (creative.ky .why-dark-card). */
.ce-spage .spg-dcards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ce-spage .spg-dcard { background: rgba(253, 250, 246, 0.05); border: 1px solid var(--ce-line-light); border-radius: var(--ce-radius-card-sm); padding: 26px 26px; transition: background-color var(--ce-transition); }
.ce-spage .spg-dcard:hover { background: rgba(253, 250, 246, 0.08); }
.ce-spage .spg-dcard__ic { display: inline-flex; color: var(--ce-color-rust-light); margin-bottom: 14px; }
.ce-spage .spg-dcard h3 { font-size: 1.02rem; font-weight: var(--ce-fw-bold); color: var(--ce-color-bg-page); margin: 0 0 8px; }
.ce-spage .spg-dcard p { font-size: 0.88rem; line-height: 1.7; color: var(--ce-text-on-dark); margin: 0; }

/* Teaser (Monthly Plans) and the owner-governed catalog-breadth callout: rounded cards. */
.ce-spage .spg-teaser, .ce-spage .spg-breadth { display: flex; flex-direction: column; background: var(--ce-color-bg-page); border: 1.5px solid rgba(28, 26, 23, 0.1); border-radius: var(--ce-radius-card); padding: 28px; }
.ce-spage .spg-breadth { border-left: 3px solid var(--ce-color-rust); }
.ce-spage .spg-teaser h3, .ce-spage .spg-breadth h3 { font-size: 1.05rem; font-weight: var(--ce-fw-bold); margin: 0 0 10px; color: var(--ce-color-text); }
.ce-spage .spg-teaser p, .ce-spage .spg-breadth p { font-size: 0.9rem; line-height: 1.7; color: var(--ce-color-text-mid); margin: 0 0 18px; flex: 1; }
.ce-spage .spg-teaser .ce-hero__actions, .ce-spage .spg-breadth .ce-hero__actions { gap: 10px; }

/* ---------------------------------------------------- MEMORIAL PACKAGE CARDS
   The memorial packages are photograph-led: the owner's package photographs are the argument, so
   these cards lead with the image where the website package cards lead with a price. The media
   frame is the shared .ce-card-media contract from style.css (4/3, cover, center top), NOT a
   private crop, so a memorial card and a catalog card crop identically. Everything else reuses the
   established .ce-spage vocabulary. No price element exists here because no memorial package price
   is governed. */
.ce-spage .mem-pkgs { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ce-spage .mem-pkg { display: flex; flex-direction: column; background: var(--ce-color-bg-page); border: 1px solid var(--ce-line-dark); border-radius: 16px; overflow: hidden; transition: transform var(--ce-transition), box-shadow var(--ce-transition), border-color var(--ce-transition); }
.ce-spage .mem-pkg:hover { transform: translateY(-4px); box-shadow: var(--ce-shadow-lg); }
.ce-spage .mem-pkg--feat { border-color: var(--ce-color-rust); border-width: 1.5px; }
.ce-spage .mem-pkg__img { position: relative; }
.ce-spage .mem-pkg__flag { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--ce-color-rust); color: var(--ce-color-bg-page); font-size: 0.66rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--ce-radius-pill); }
.ce-spage .mem-pkg__bd { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.ce-spage .mem-pkg__n { font-size: 1.15rem; font-weight: var(--ce-fw-bold); letter-spacing: -0.01em; color: var(--ce-color-text); margin: 0 0 8px; }
.ce-spage .mem-pkg__lede { font-size: 0.89rem; line-height: 1.65; color: var(--ce-color-text-mid); margin: 0 0 16px; }
/* The published starting price is the card's primary commercial fact and reads at package-price
   weight, directly under the name. It is never "from" or "on request": the ladder is public. */
.ce-spage .mem-pkg__price { font-size: 1.55rem; line-height: 1.1; font-weight: var(--ce-fw-extrabold); letter-spacing: -0.02em; color: var(--ce-color-rust); margin: 0 0 10px; }
.ce-spage .mem-pkg__min { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: var(--ce-fw-semibold); color: var(--ce-color-text); margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ce-line-dark); }
.ce-spage .mem-pkg__gl { font-size: 0.64rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-color-text-muted); margin: 0 0 10px; }

/* What the family actually receives. This is the card's substance, so it is never truncated,
   collapsed or pushed below the fold of the card. */
.ce-spage .mem-pkg__incl { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ce-spage .mem-pkg__incl li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.85rem; line-height: 1.55; color: var(--ce-color-text-mid); }
.ce-spage .mem-pkg__incl li::before { content: "\2713"; color: var(--ce-color-rust); font-weight: var(--ce-fw-extrabold); font-size: 0.85rem; flex-shrink: 0; line-height: 1.55; }
/* An either/or inclusion is marked so the card can never read as though both are supplied. The
   marker is an inline chip inside the same text flow as the inclusion it qualifies, so it wraps
   with the copy instead of breaking the tick and the text onto separate lines. */
.ce-spage .mem-pkg__choose { display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: var(--ce-radius-pill); background: var(--ce-rust-pale); font-size: 0.58rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ce-color-rust); vertical-align: 1px; }
.ce-spage .mem-pkg__cta { width: 100%; }

/* The memorial hero photograph is a wide keepsake table; the subject sits right of centre, so the
   crop holds that side rather than the empty room behind it. */
.ce-spage .ce-hero__photo--memorial img { object-position: 62% 50%; }

/* ------------------------------------------------------- MEMORIAL REQUEST PAGE
   The family's own intake page. The urgent WhatsApp path sits above the form deliberately: a
   family working to a service date two days away should not have to scroll a form to find the
   fastest way to reach us. Field styling comes from the shared ce-quote-form.css, so this adds
   grouping and the urgent band only. */
.ce-spage.memreq .memreq-top { padding-bottom: 44px; }
.ce-spage.memreq .memreq-top h1 { color: var(--ce-color-bg-page); margin: 6px 0 14px; }
.ce-spage.memreq .memreq-lede { color: var(--ce-text-on-dark); max-width: 720px; }
.ce-spage.memreq .memreq-urgent { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin: 28px 0 14px; padding: 22px 24px; border-radius: 16px; background: rgba(253, 250, 246, 0.07); border: 1px solid var(--ce-line-light); border-left: 3px solid var(--ce-color-rust-light); }
.ce-spage.memreq .memreq-urgent__h { font-size: 1.08rem; font-weight: var(--ce-fw-bold); color: var(--ce-color-bg-page); margin: 0 0 6px; }
.ce-spage.memreq .memreq-urgent__p { font-size: 0.92rem; line-height: 1.6; color: var(--ce-text-on-dark); margin: 0; }
.ce-spage.memreq .memreq-urgent__cta { flex-shrink: 0; }
.ce-spage.memreq .memreq-note { font-size: 0.8rem; line-height: 1.6; color: var(--ce-text-on-dark); opacity: 0.85; margin: 0; max-width: 760px; }

.ce-spage.memreq .memreq-form { max-width: 880px; }
.ce-spage.memreq .memreq-set { border: 0; margin: 0 0 34px; padding: 0; }
.ce-spage.memreq .memreq-legend { display: block; width: 100%; font-size: 0.68rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ce-color-rust); margin: 0 0 16px; padding: 0 0 10px; border-bottom: 1px solid var(--ce-line-dark); }
.ce-spage.memreq .memreq-help { font-size: 0.86rem; line-height: 1.6; color: var(--ce-color-text-mid); margin: 0 0 16px; }
.ce-spage.memreq .memreq-opt { font-weight: var(--ce-fw-regular); color: var(--ce-color-text-muted); text-transform: none; letter-spacing: 0; }
.ce-spage.memreq .memreq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ce-spage.memreq .memreq-guest { flex-basis: 100%; margin: 4px 0 0; }

@media (min-width: 768px) {
	.ce-spage.memreq .memreq-urgent { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
}

@media (min-width: 640px) {
	.ce-spage .spg-cards { grid-template-columns: 1fr 1fr; }
	.ce-spage .mem-pkgs { grid-template-columns: 1fr 1fr; }
	.ce-spage .spg-trust { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
	.ce-spage .spg-incl { grid-template-columns: 1fr 1fr; }
	.ce-spage .spg-dcards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
	.ce-spage .spg-duo { grid-template-columns: 1fr 1fr; }
	.ce-spage .spg-pkgs--duo { grid-template-columns: 1fr 1fr; }
	.ce-spage .ce-hero__photo--business { width: 62%; }
	.ce-spage .ce-hero__photo--business img { object-position: 82% 50%; }
}
@media (max-width: 1023px) {
	/* Stacked columns must not double the hairline where one column ends and the next begins. */
	.ce-spage .ce-faqcols .ce-faq + .ce-faq .ce-faq__item:first-child { border-top: 0; }
}
@media (min-width: 1024px) {
	.ce-spage .spg-cards { grid-template-columns: repeat(3, 1fr); }
	/* Five packages across three columns: the photographs stay large enough to read, and the
	   featured tier closes the first row rather than being stranded alone. Cards stretch to the
	   row height (the "Shown here" panel takes up the slack) so every Request a Quote button in a
	   row sits on the same baseline instead of stepping with the copy length. */
	.ce-spage .mem-pkgs { grid-template-columns: repeat(3, 1fr); }
	.ce-spage .spg-cards--five { grid-template-columns: repeat(5, 1fr); gap: 16px; }
	.ce-spage .spg-cards--five .spg-card { padding: 26px 22px; }
	.ce-spage .spg-dcards { grid-template-columns: repeat(3, 1fr); }
	.ce-spage .spg-two { grid-template-columns: 0.9fr 1.1fr; }
	.ce-spage .spg-pkgs { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	/* The two secondary cards carry different amounts of detail, so they size to their content
	   rather than stretching the shorter one into a tall empty box. */
	.ce-spage .spg-pkgs--duo { grid-template-columns: repeat(2, 1fr); align-items: start; }
	.ce-spage .ce-split { grid-template-columns: 38fr 62fr; gap: 56px; align-items: start; }
	.ce-spage .ce-faqcols { grid-template-columns: 1fr 1fr; gap: 0 56px; }
	/* Two answers across at 1024, three from 1280 (below). */
	.ce-spage .ce-qagrid { grid-template-columns: 1fr 1fr; }
	.ce-spage .spg-incl--duo { grid-template-columns: 1fr 1fr; gap: 0 40px; }
	.ce-spage.bsol .ce-hero--photo { min-height: 700px; }
	.ce-spage .ce-hero__photo--business { width: 50%; }
	.ce-spage .ce-hero__photo--business img { object-position: 100% 50%; }

	/* Website Design vertical rhythm. Several sections carry a small amount of information inside
	   very large padding, which reads as sparse rather than premium and forces needless scrolling.
	   Trimmed moderately on this page only; the rest of the site keeps its spacing. */
	.ce-spage.wdes .ce-sec { padding: 68px 0; }
	.ce-spage.wdes .ce-sec__head { margin-bottom: 32px; }

	/* The six launch steps are short and structured, so they run in two columns rather than one
	   760px column down the middle of a 1368px canvas. */
	.ce-spage.wdes .ce-steps { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
	.ce-spage.wdes .ce-step:nth-last-child(2) { border-bottom: 0; }
}

@media (min-width: 1280px) {
	/* The three domain and hosting answers run across the full canvas so the section carries no
	   empty quadrant. Each answer stays an intact unit. */
	.ce-spage .ce-qagrid { grid-template-columns: repeat(3, 1fr); }
	.ce-spage .ce-qa { border-bottom: 1px solid var(--ce-line-dark); }
}