/* Scoped to /web-design-wrexham/ (page-id-2406) and /services/web-design/ (page-id-1885) only.
   Never edit assets/style.css or any shared template for these rules. */

.page-id-2406 .avatar.sm-av-1, .page-id-1885 .avatar.sm-av-1{ background:var(--lime); }
.page-id-2406 .avatar.sm-av-2, .page-id-1885 .avatar.sm-av-2{ background:var(--teal); }
.page-id-2406 .avatar.sm-av-3, .page-id-1885 .avatar.sm-av-3{ background:var(--blue); color:#fff; }

/* Featured work cards keep their own dark card background and light text
   if they ever sit on an on-paper section. */
.page-id-2406 .on-paper .featured-card h3,
.page-id-1885 .on-paper .featured-card h3{ color:var(--text); }
.page-id-2406 .on-paper .featured-card .fc-line,
.page-id-1885 .on-paper .featured-card .fc-line{ color:var(--text-soft); }
.page-id-2406 .on-paper .featured-card .fc-line .arrow,
.page-id-1885 .on-paper .featured-card .fc-line .arrow{ color:var(--blue); }

/* Bold lead-ins in includes-list items and process steps, readable on paper. */
.page-id-2406 .on-paper .includes-list li strong,
.page-id-1885 .on-paper .includes-list li strong{ color:#140524; }
.page-id-2406 .on-paper .process-timeline .pt-step h4,
.page-id-1885 .on-paper .process-timeline .pt-step h4{ color:#140524; }
.page-id-2406 .on-paper .process-timeline .pt-step p,
.page-id-1885 .on-paper .process-timeline .pt-step p{ color:#3D3750; }
.page-id-2406 .on-paper .process-timeline::before,
.page-id-1885 .on-paper .process-timeline::before{ background:rgba(10,0,20,0.15); }

/* Logo strip label, forced centred above the logos. */
.page-id-2406 .trust-bar p.logo-strip-label,
.page-id-1885 .trust-bar p.logo-strip-label{ display:block !important; text-align:center !important; width:100% !important; }

/* Hero mockup: stretch to match the height of the copy column next to it,
   instead of sitting at its own short natural height with empty space
   below. Does not increase the hero's overall height (the row height is
   already set by the taller copy column), so it cannot push anything
   under the sticky header. */
.page-id-2406 .page-hero .svc-hero-grid,
.page-id-1885 .page-hero .svc-hero-grid,
.page-id-2137 .page-hero .svc-hero-grid{ align-items:stretch; }
.page-id-2406 .hero-mockup-wrap.hero-showcase,
.page-id-1885 .hero-mockup-wrap.hero-showcase,
.page-id-2137 .hero-mockup-wrap.hero-showcase{ display:flex; align-items:stretch; justify-content:center; }
.page-id-2406 .hero-showcase-frame,
.page-id-1885 .hero-showcase-frame,
.page-id-2137 .hero-showcase-frame{
	position:relative;
	height:100%;
	aspect-ratio:9/16;
	margin-inline:auto;
	border-radius:28px;
	overflow:hidden;
	background:var(--ink-2);
	box-shadow:0 30px 60px -20px rgba(0,0,0,0.55), 0 0 0 6px rgba(255,255,255,0.08) inset;
}
@media (max-width:900px){
	.page-id-2406 .hero-showcase-frame,
	.page-id-1885 .hero-showcase-frame,
	.page-id-2137 .hero-showcase-frame{ height:auto; width:min(100%, 300px); }
}
.page-id-2406 .hs-shot,
.page-id-1885 .hs-shot,
.page-id-2137 .hs-shot{ position:absolute; top:0; left:0; width:100%; height:auto; display:block; opacity:0; will-change:transform, opacity; }
.page-id-2406 .hs-shot:first-child,
.page-id-1885 .hs-shot:first-child,
.page-id-2137 .hs-shot:first-child{ opacity:1; }

/* Hide the sitewide footer closing CTA band on these two pages only,
   since each page already ends with its own closing CTA. footer.php
   itself is never edited. */
.page-id-2406 .footer-cta-row,
.page-id-1885 .footer-cta-row{ display:none; }

/* Approach (Wrexham) / What's Included (services) sections: fill the
   negative space to the right of the text with a project mockup. */
.page-id-2406 .approach-grid,
.page-id-1885 .includes-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:3rem; align-items:center; }
@media (max-width:900px){
	.page-id-2406 .approach-grid,
	.page-id-1885 .includes-grid{ grid-template-columns:1fr; }
	.page-id-2406 .approach-mockup,
	.page-id-1885 .includes-mockup{ margin-top:2rem; }
}
.page-id-2406 .approach-mockup img,
.page-id-1885 .includes-mockup img{ width:100%; height:auto; display:block; }
/* Contact page only (page-id-1865). Added per Craig brief 28 Oct 2026. */
.page-id-1865 .contact-hero-grid{
	display:grid; grid-template-columns:1fr 1.05fr;
	grid-template-areas:"copy form" "proof form";
	grid-template-rows:auto 1fr;
	column-gap:3.5rem; row-gap:1.8rem; align-items:start;
}
.page-id-1865 .contact-hero-copy{ grid-area:copy; }
.page-id-1865 .contact-hero-form{ grid-area:form; }
.page-id-1865 .contact-hero-proof{ grid-area:proof; }
.page-id-1865 .contact-hero-proof .rating-chip{ margin-top:1.4rem; }

.page-id-1865 form.project-form input,
.page-id-1865 form.project-form select{ min-height:48px; }
.page-id-1865 form.project-form button[type="submit"]{ width:100%; justify-content:center; min-height:52px; }
.page-id-1865 .form-reassure{ display:flex; gap:0.9rem; align-items:flex-start; margin-top:1.3rem; }
.page-id-1865 .form-reassure img{ width:48px; height:48px; border-radius:50%; flex-shrink:0; }
.page-id-1865 .form-reassure p{ margin:0; font-size:0.88rem; line-height:1.5; color:#4A4458; }
.page-id-1865 .form-reassure strong{ color:var(--ink); }
.page-id-1865 .form-reassure a{ color:var(--blue); text-decoration:underline; }

.page-id-1865 .contact-details-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; align-items:start; }
.page-id-1865 .contact-details-grid iframe{ border-radius:6px; }

/* The page ends with its own lime CTA band, so hide the sitewide footer
   CTA row on this page only (footer.php is not edited). */
.page-id-1865 .footer-cta-row{ display:none; }

@media (max-width:900px){
	.page-id-1865 .contact-hero-grid{
		grid-template-columns:1fr;
		grid-template-areas:"copy" "form" "proof";
		grid-template-rows:auto;
		row-gap:1.6rem;
	}
	.page-id-1865 .contact-details-grid{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:520px){
	.page-id-1865 #projectForm{ padding:1.5rem 1.3rem !important; }
}

/* Charity & Non-Profit page only (page-id-1893). Added per Craig brief 28 Oct 2026. */
.page-id-1893 .featured-card .fc-line{ color:var(--text-soft); }
.page-id-1893 .on-paper .includes-list li strong{ color:#140524; }
.page-id-1893 .on-paper .related-row a{ border-color:rgba(10,0,20,0.2); color:var(--ink); }
.page-id-1893 .on-paper .related-row a:hover{ background:var(--ink); color:var(--lime); border-color:var(--ink); }

.page-id-1893 form.project-form input{ min-height:48px; }
.page-id-1893 form.project-form button[type="submit"]{ width:100%; justify-content:center; min-height:52px; }
.page-id-1893 .form-reassure{ margin-top:1.2rem; font-size:0.88rem; line-height:1.5; color:#4A4458; }
.page-id-1893 .form-reassure strong{ color:var(--ink); }
.page-id-1893 .form-reassure a{ color:var(--blue); text-decoration:underline; }

/* Hero image column (only once the image exists). */
.page-id-1893 .charity-hero-media img{ width:100%; height:auto; display:block; border-radius:20px; }

/* Own closing CTA band, so hide the sitewide footer CTA row here only. */
.page-id-1893 .footer-cta-row{ display:none; }

@media (max-width:900px){
	.page-id-1893 .charity-hero-media{ margin-top:2rem; }
}
@media (max-width:520px){
	.page-id-1893 #brandReviewForm{ padding:1.5rem 1.3rem !important; }
}

/* Dale Evans testimonial: initials avatar and Google review label */
.page-id-1893 .avatar.sm-av-1{ background:var(--lime); }
.page-id-1893 .testi-attrib .who .review-src{ display:block; font-size:0.78rem; opacity:0.75; margin-top:0.15rem; }


/* Visual fixes round, 28 Oct 2026 */

/* 1. Contact: bold lead-ins in the guarantee blocks were inheriting the
   light on-dark text colour, invisible on the now on-paper section.
   Same class of fix as the includes-list/process-timeline strong fix
   above. Also a touch more space under the heading before the list. */
.page-id-1865 .on-paper .guarantee strong{ color:#140524; }
.page-id-1865 .contact-details-grid .guarantee:first-of-type{ margin-top:1.6rem; }

/* 2 & 5. Testimonial: centre the quote column against the (taller)
   left column instead of top-aligning it, so there's no dead space
   under a shorter quote. */
.page-id-1865 .case-testi.bubble .case-testi-grid,
.page-id-1893 .case-testi.bubble .case-testi-grid{ align-items:center; }

/* 4. Charity video-review form: .btn-solid defaults to lime, but an
   on-paper section overrides it to ink/black. Force it back to lime
   here specifically, to match the Contact form's submit button. */
.page-id-1893 #video-review .btn-solid{ background:var(--lime); color:var(--ink); border-color:var(--lime); }

/* 6. Charity proof section: less empty space below the CTA before
   the next section, while the cards are still waiting on images. */
.page-id-1893 .charity-proof-section{ padding-bottom:4rem; }

/* 7. Logo strip: at >=1160px the base rule wraps to two rows and
   centres each row independently, so two rows of different total
   width (Warner Bros is narrower than the rest) end up offset from
   each other. A fixed 8-column grid keeps both rows on the same
   column tracks so they line up. */
@media (min-width:1160px){
	.page-id-1865 .trust-bar-strip,
	.page-id-1893 .trust-bar-strip{
		display:grid; grid-template-columns:repeat(8, 1fr);
		justify-items:center; align-items:center;
		column-gap:2.6rem; row-gap:1.8rem;
	}
}

/* 8. Final CTA band: flat lime instead of the lime-to-teal gradient,
   so the blue highlight and the dark "All Industries" link read
   clearly against it. */
.page-id-1865 .cta-band-lime,
.page-id-1893 .cta-band-lime{ background:var(--lime); }

/* 9. Form placeholders, darkened a touch for readability. */
.page-id-1865 ::placeholder,
.page-id-1893 ::placeholder,
.page-id-1865 form.project-form textarea::placeholder,
.page-id-1893 form.project-form textarea::placeholder{ color:rgba(10,0,20,0.65); }
/* Logo Design page only (page-id-1875). Added per Craig brief 29 Oct 2026. */
.page-id-1875 .featured-card .fc-line{ color:var(--text-soft); }
.page-id-1875 .on-paper .includes-list li{ color:#2A2238; }
.page-id-1875 .on-paper .includes-list li a{ color:var(--blue); text-decoration:underline; }
.page-id-1875 form.project-form input,
.page-id-1875 form.project-form select{ min-height:48px; font-size:1rem; }
.page-id-1875 form.project-form button[type="submit"]{ width:100%; justify-content:center; min-height:52px; }
.page-id-1875 .form-reassure{ margin-top:1.2rem; font-size:0.88rem; line-height:1.5; color:#4A4458; }
.page-id-1875 .form-reassure a{ color:var(--blue); text-decoration:underline; }

@media (min-width:901px){ .page-id-1875 .featured-work-grid{ grid-template-columns:repeat(3,1fr); } }

/* Hero image column (only once the image exists). */
.page-id-1875 .logo-hero-media img{ width:100%; height:auto; display:block; border-radius:20px; }
@media (min-width: 1024px) {
	.page-id-1875 .svc-hero-grid { align-items: center; }
	.page-id-1875 .logo-hero-media { align-self: stretch; display: flex; align-items: center; }
	.page-id-1875 .page-hero img[src*="logo-hero"] {
		transform: scale(1.4);
		transform-origin: left center;
	}
	.page-id-1875 .page-hero { overflow-x: clip; }
}

/* Own closing CTA band, so hide the sitewide footer CTA row on this page only. */
.page-id-1875 .footer-cta-row{ display:none; }

@media (max-width:900px){
	.page-id-1875 .logo-hero-media{ margin-top:2rem; }
	.page-id-1875 .featured-work-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
	.page-id-1875 #brandReviewForm{ padding:1.5rem 1.3rem !important; }
	.page-id-1875 .page-hero .cta-row .btn{ width:100%; justify-content:center; min-height:48px; }
}

/* Industries hub only (page-id-1861). Added per Craig brief 29 Oct 2026. */
.page-id-1861 .sector-group + .sector-group{ margin-top:3.2rem; padding-top:2.4rem; border-top:1px solid var(--line); }
.page-id-1861 .sector-group-title{ font-size:1.25rem; margin-bottom:1.3rem; }
.page-id-1861 .sector-grid{ gap:1.4rem; }
.page-id-1861 .sector-card{ display:block; transition:border-color 0.15s ease, transform 0.15s ease; }
.page-id-1861 .sector-card:hover{ border-color:var(--lime); transform:translateY(-2px); }
.page-id-1861 .sector-card h4{ font-size:1.08rem; }
.page-id-1861 .sector-card p{ font-size:0.92rem; margin-top:0.6rem; color:var(--text-soft); }
.page-id-1861 .sector-card .textlink{ margin-top:1rem; display:inline-block; }
.page-id-1861 .featured-card .fc-line{ color:var(--text-soft); }
.page-id-1861 form.project-form input,
.page-id-1861 form.project-form select{ min-height:48px; font-size:1rem; }
.page-id-1861 form.project-form button[type="submit"]{ width:100%; justify-content:center; min-height:52px; }
.page-id-1861 .form-reassure{ margin-top:1.2rem; font-size:0.88rem; line-height:1.5; color:#4A4458; }
.page-id-1861 .form-reassure a{ color:var(--blue); text-decoration:underline; }
.page-id-1861 .footer-cta-row{ display:none; }

@media (min-width:901px){ .page-id-1861 .featured-work-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .page-id-1861 .featured-work-grid{ grid-template-columns:1fr; } }
@media (max-width:640px){
	.page-id-1861 .sector-grid{ grid-template-columns:1fr 1fr; gap:0.9rem; }
	.page-id-1861 .sector-card p{ display:none; }
}
@media (max-width:520px){
	.page-id-1861 #brandReviewForm{ padding:1.5rem 1.3rem !important; }
	.page-id-1861 .page-hero .cta-row .btn{ width:100%; justify-content:center; min-height:48px; }
}

/* Logo design hero: column widths left at the shared default
   (1.2fr / 0.8fr), just vertically centred against the text column.
   The image itself is allowed to overhang its own column to the
   right instead (see .logo-hero-media below), so the text column
   is never squeezed. */

/* Sector card icons (page-id-1861). Added 29 Oct 2026. */
.page-id-1861 .sector-card .sector-icon{ display:block; width:44px; height:44px; margin-bottom:0.8rem; color:var(--text); transition:color 0.15s ease; }
.page-id-1861 .sector-card .sector-icon .accent{ stroke:var(--lime); fill:var(--lime); }
.page-id-1861 .sector-card:hover .sector-icon{ color:var(--lime); }
@media (prefers-reduced-motion: reduce){
	.page-id-1861 .sector-card .sector-icon{ transition:none; }
}

/* North Wales (page-id-2137). Added 30 Oct 2026. */
.page-id-2137 .nw-proof-title{ margin-top:2rem; font-size:1.3rem; }
.page-id-2137 #video-review .quiz-form-error{ color:#C0152F; margin-top:0.8rem; }
.page-id-2137 #video-review .form-reassure{ margin-top:1.2rem; font-size:0.85rem; color:#5C5570; }
.page-id-2137 #video-review .form-reassure a{ color:#5C5570; text-decoration:underline; }

/* Telford (page-id-2362). Added 30 Oct 2026. */
.page-id-2362 .tf-review-intro{ display:flex; align-items:flex-start; gap:1.6rem; margin-top:1.6rem; }
.page-id-2362 .tf-review-intro p{ margin:0; }
.page-id-2362 #review-telford .quiz-form-error{ color:#C0152F; margin-top:0.8rem; }
.page-id-2362 #review-telford .form-reassure{ margin-top:1.2rem; font-size:0.85rem; color:#5C5570; }
.page-id-2362 #review-telford .form-reassure a{ color:#5C5570; text-decoration:underline; }