/* White canvas, strong Pointed violet, white supporting surfaces and genuine client display colours. */
:root{--paper:#fff;--pointed-contact-paper:#fff;--commercial-paper:#fff;--pointed-cream:#fff;--pointed-neutral-line:#e5dfed}
body,.review-home,.campaign-page,.commercial-page{background:#fff;--paper:#fff;--commercial-paper:#fff}
.review-home .hero,.commercial-intro,.comparison-hero,.comparison-editorial.scope-section,.comparison-directory,.pricing-family,.comparison-directory>section:nth-child(even),.pricing-family:nth-of-type(even),.commercial-offers{background:#fff}
.page-hero{background:#fff}
.campaign-hero:not(.dark-opening)::before{background:none}
.campaign-page[data-service=branding] .campaign-hero{background:#fff}
.commercial-page .all-fees.price-bars-section,.landing-comparison.price-bars-landing,.comparison-index-intro{background:#fff;background-image:none}
.offer-card{background:#fff;border-color:var(--pointed-neutral-line)}
.price-bars-panel,.price-pair-average,.campaign-form{background:#fff;border-color:var(--pointed-neutral-line)}
.price-bar-average,.comparison-method{background:#fff}
.campaign-form .selected-offer-note{background:var(--pointed-cream)}
.enquiry-section{background:#fff}
.service-assurances,.optional-commercial,.process-and-form,.scope-and-form,.comp-showcase,.campaign-page[data-service=websites] .package-list article,.portal-views article{background:#fff}
/* Give primary brand sections a clear role in the page sequence. */
.comp-benefits:not(.comp-benefits-dark){background:#4c1d95;color:#fff}
.comp-benefits:not(.comp-benefits-dark) h2,.comp-benefits:not(.comp-benefits-dark) h3,.comp-benefits:not(.comp-benefits-dark) p{color:#fff}
.comp-benefits:not(.comp-benefits-dark) .service-icon{background:#fff;color:#4c1d95}
.commercial-page .commercial-close{background:#4c1d95;border:0;color:#fff}
.commercial-page .commercial-close h2,.commercial-page .commercial-close p{color:#fff}
.commercial-page .commercial-close .pointed-action{background:#fff!important;border-color:#fff!important;color:#4c1d95!important}
.review-preview{background:#4c1d95;color:#fff}
#website-process{background:var(--pointed-cream)}
/* The surrounding Pointed frame stays; browser chrome belongs to the displayed client. */
.proof-browser[data-proof-brand=fernfolk]{--client-bar:#e9ebe4;--client-address:#f8f7f4;--client-ink:#343a34;--client-line:#c9ccc2}
.proof-browser[data-proof-brand=timelesscasting]{--client-bar:#153d3e;--client-address:#0c292c;--client-ink:#f7f3ec;--client-line:#688283}
.proof-browser[data-proof-brand=the-iki-society]{--client-bar:#10100e;--client-address:#292923;--client-ink:#f4f1e8;--client-line:#706f67}
.proof-browser .proof-browser-bar{background:var(--client-bar,#fff);color:var(--client-ink,#1e0b3c);border-bottom-color:var(--client-line,#e5dfed)}
.proof-browser .proof-address{background:var(--client-address,#fff);color:var(--client-ink,#1e0b3c);border-color:var(--client-line,#e5dfed)}
.home-hero-browser{background:#153d3e;border-color:#688283}
.home-hero-browser span{background:#c4a26b}
.project-mat{background:#fff;border-color:var(--pointed-neutral-line)}
.project-row[data-project=the-iki-society] .project-browser-bar{background:#10100e;color:#f4f1e8;border-color:#706f67}
.project-row[data-project=reachspot] .project-browser-bar{background:#fff;color:#1e0b3c}
.project-row[data-project=the-iki-society] .project-browser-dots i{background:#d3d0c7}
/* Pointed demo UI gets neutral chrome; client photography and website pixels stay unchanged. */
.browser-bar{background:#fff}
.project-row[data-project=hollow-lane] .project-browser-bar{background:#245c43;color:#f1f3ee;border-color:#506052}
.project-row[data-project=voltmark] .project-browser-bar{background:#12171d;color:#eef1f4;border-color:#506052}
.project-row[data-project=voltmark] .project-browser-dots i{background:#ffb020}
.project-row[data-project=thameside] .project-browser-bar{background:#0b4fa8;color:#fff;border-color:#0b4fa8}
.project-row[data-project=thameside] .project-browser-dots i{background:#fff}
/* Hardware frames remain silver/charcoal rather than inheriting a cream surface. */
.laptop{background:linear-gradient(135deg,#e8e8ef,#545465 30%,#171728 55%,#d7d7df)}
.laptop::after{background:linear-gradient(#dedee7,#717181 44%,#e5e5ee)}
.phone{background:linear-gradient(135deg,#f1f1f7,#565666 28%,#181826 61%,#e4e4ed)}
/* Preserve the brochure's own serif identity after its semantic heading was promoted to h2. */
.brochure-open h2{font:400 clamp(27px,3vw,43px)/1.05 Georgia,serif;letter-spacing:-.03em;margin-top:23px;text-transform:none}
@media(max-width:600px){.brochure-open h2{font-size:29px}}

/* Restore the original ink/white/violet word map; use strong icon tiles on light surfaces. */
.service-icon,.enquiry-step-icon{background:#4c1d95;color:#fff;border-color:#4c1d95;box-shadow:0 7px 14px #4c1d9518}
.service-link:hover .service-icon{box-shadow:0 10px 18px #4c1d9524}

/* Open editorial sections, with the pattern belonging to the section rather than a card. */
#website-process>.wrap,.home-domain-section>.wrap{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
#website-process{background:#fff;color:#1e0b3c}
#website-process h2,#website-process h3,#website-process p,#website-process .section-label,#website-process .steps li{color:#1e0b3c}
#website-process .steps li{background:transparent}
#website-process .step-icon{background:#4c1d95;color:#fff;border-color:#4c1d95}
.home-domain-section>.wrap,.home-domain-section h2,.home-domain-section p{color:#fff}
@media(max-width:600px){#website-process{background-size:auto 100%;background-position:70% center}}

/* Keep all public footer copy white on the ink background. */
.site-footer,.site-footer p,.site-footer small,.simple-footer p,.services-footer p{color:#fff!important}

/* Service examples have their own physical context; Pointed pages stay white and violet. */
.campaign-page{--line:#dfe3eb;--pointed-cream:#fff}
.campaign-page .selected-offer-note,.campaign-page .workspace-stats>div,.campaign-page .demo-summary,.campaign-page .email-paper,.campaign-page .calculator .estimate{background:#fff;background-image:none}
.campaign-page .process li:before,.campaign-page .detail-sequence article>span{background:#4c1d95;color:#fff}
.campaign-page .process li:before{box-shadow:none}
.context-image{margin:0;width:100%}
.context-image>img{width:100%;height:auto;border-radius:10px;display:block;box-shadow:0 20px 38px #1e0b3c20}
.context-image>figcaption{font:400 11px/1.6 Inter,sans-serif;margin-top:13px;color:#62566f;text-align:left}
.dark-opening .context-image>figcaption{color:#fff}
.context-device{position:relative;min-width:0;width:100%;margin:18px auto 30px;padding:12px;background:#20232b;border:1px solid #5c626d;border-radius:18px;box-shadow:0 24px 42px #1e0b3c26;isolation:isolate}
.context-device[data-example-brand]:before{content:attr(data-example-brand);display:block;color:#fff;font:600 10px/1.5 Inter,sans-serif;padding:0 5px 10px;letter-spacing:.04em}
.context-screen{position:relative;min-width:0;overflow:hidden;border-radius:7px;background:#fff;color:#1e0b3c}
.context-screen .demo-browser,.context-screen .native-plan,.context-screen .landing-browser,.context-screen .native-landing-stack{transform:none!important;box-shadow:none;border:0;border-radius:0;margin:0}
.context-laptop>.context-hardware{position:absolute;left:-3%;right:-3%;height:13px;bottom:-12px;background:linear-gradient(#cdd1d8,#7a808c);border:1px solid #737a86;border-radius:2px 2px 45% 45%}
.context-monitor{border:10px solid #252832!important;border-radius:14px!important;box-shadow:0 24px 40px #1e0b3c25!important;background:#fff}
.context-device.context-monitor{margin-bottom:62px}
.context-device.context-monitor>.context-hardware{position:absolute;bottom:-44px;left:39%;width:22%;height:38px;background:linear-gradient(90deg,#737a86,#ced3dc,#737a86);clip-path:polygon(22% 0,78% 0,85% 85%,100% 90%,100% 100%,0 100%,0 90%,15% 85%)}
.context-screen .demo-body{padding:24px}
.context-screen .workspace{display:block}
.context-screen .workspace-sidebar{display:flex;flex-wrap:wrap;gap:12px;padding:18px;background:#153b30;color:#fff}
.example-client-name{font:600 12px/1.6 Inter,sans-serif;letter-spacing:.06em}
.example-client-name>span{display:block;font-size:8px;letter-spacing:.1em}
.context-screen .workspace-sidebar>span{font-size:10px}
.context-screen .workspace-main{padding:24px;min-width:0}
.context-screen .workspace-columns{grid-template-columns:1fr}
.context-screen .workspace-stats{gap:8px}
.context-screen .workspace-stats>div{padding:12px 8px;border-color:#dfe3eb}
.context-screen .workspace-line{gap:15px}
.context-screen .workspace-toolbar{gap:12px;font-size:11px}
.context-screen .workspace h3{font-size:24px;letter-spacing:-.02em}
.context-screen .native-plan{background:#fff;padding:24px}
.context-screen .landing-mini-hero{background:#f4f6f7}
.native-video-pair article,.native-social article,.content-formats .format-post{border:7px solid #20232b;border-radius:24px;box-shadow:0 18px 30px #1e0b3c25;background-clip:padding-box}
.native-video-pair article:after,.native-social article:after,.content-formats .format-post:after{content:'';position:absolute;top:6px;left:35%;width:30%;height:7px;background:#20232b;border-radius:0 0 7px 7px;pointer-events:none}
.native-social article{position:relative;overflow:hidden}
.native-filmstrip>div{border:6px solid #20232b;border-radius:19px;overflow:hidden;box-shadow:0 15px 25px #1e0b3c20}
.brand-object,.brand-board,.physical-desk{background:#e9edf1;background-image:linear-gradient(135deg,#f4f6f8,#dfe4e9);padding:30px;border-radius:8px;box-shadow:inset 0 1px 0 #fff}
.brand-object,.brand-board{--violet:#1c463a;--ink:#153b30;--tint:#6d8b7b;--paper:#fff;--line:#cbd7d0}
.physical-desk .business-card{--violet:#174333;--ink:#174333;--paper:#fff;--line:#d2ddd7}
.brand-object .identity-mark{background:#153b30;color:#fff}
.native-work-pair>a.context-monitor{border-width:8px!important}
.bespoke-websites .desktop-browser{border:10px solid #20232b;border-bottom-width:22px;border-radius:16px;box-shadow:0 23px 35px #1e0b3c24}
.bespoke-websites .phone-browser{border-color:#20232b;background:#20232b}
.context-screen .presentation-slide{padding:30px!important;aspect-ratio:auto!important;min-height:240px}
.context-screen .presentation-slide h3{font-size:clamp(27px,3vw,45px)!important}
@media(max-width:700px){.context-device{padding:8px;border-radius:12px;margin-bottom:25px}.context-screen .demo-body,.context-screen .workspace-main{padding:16px}.context-screen .workspace-stats strong{font-size:16px}.context-screen .workspace-stats span{font-size:10px}.context-image>img{border-radius:7px}.campaign-hero .context-image{margin-top:12px}.native-social article{border-width:6px}.brand-object,.brand-board,.physical-desk{padding:18px}.context-screen .demo-tabs{max-width:100%;flex-wrap:wrap}.context-screen .native-landing-stack{padding:14px}.context-screen .landing-mini-hero h3{font-size:25px}}

/* Show the example, chart, prices and enquiry before supporting detail. */
.campaign-page .campaign-hero{display:block;grid-template-columns:1fr;min-height:0;padding-bottom:30px;max-width:1200px;margin:auto;background:transparent}
.campaign-page .campaign-hero .hero-copy{max-width:850px;width:100%}
.campaign-page .campaign-hero h1{max-width:23ch;font-size:clamp(34px,4vw,56px)}
.campaign-page .campaign-hero .hero-intro{max-width:65ch}
.service-primary-example{padding:20px max(5%,calc((100vw - 1100px)/2)) 55px;background:#f1f3f6;color:#1e0b3c}
.service-primary-example .hero-demonstration{min-width:0;max-width:1100px;margin:auto}
.service-primary-example .bespoke-example{max-width:100%;margin:auto}
.service-primary-example .context-image>figcaption{color:#51475e}
.service-primary-example .native-video-pair,.service-primary-example .native-social{max-width:850px;margin:auto}
.service-primary-example .context-device{max-width:900px}
.service-primary-example .context-monitor{max-width:100%}
.campaign-page [data-service-stage=comparison]{margin-top:0}
@media(max-width:700px){.campaign-page .campaign-hero{padding-bottom:22px}.service-primary-example{padding-top:20px;padding-bottom:35px}.campaign-page .campaign-hero h1{font-size:34px}.service-primary-example .context-image{margin:0}}
/* Keep the former dark-opening hero readable after separating its example. */
.campaign-page .campaign-hero,.campaign-page .campaign-hero h1,.campaign-page .campaign-hero .hero-intro{color:#1e0b3c}
.campaign-page .campaign-hero .hero-assurance{color:#62566f}
.native-social article:before{content:'';position:absolute;inset:28% 0 0;background:linear-gradient(transparent,#101b20e6);z-index:-1;pointer-events:none}
.native-social article:after{inset:auto;top:6px;left:35%;width:30%;height:7px;z-index:4}
.native-social article :is(h2,h3){position:absolute;left:9%;right:5%;bottom:21%;color:#fff;font:750 clamp(15px,1.8vw,26px)/1.1 Inter,sans-serif;letter-spacing:-.03em;text-transform:none}
@media(max-width:700px){.native-social article :is(h2,h3){font-size:clamp(12px,4vw,21px)}}
.service-concept-note{max-width:1100px;margin:18px auto 0;color:#62566f;font:400 12px/1.6 Inter,sans-serif}

/* Phone hardware occupies its own safe area above the example content. */
.native-social article>span{position:relative;padding:24px 5px 10px;line-height:1.3;white-space:nowrap;text-align:center}
.native-video-pair .video-frame-label{top:25px}
.content-formats .format-post>span{top:25px}
.content-formats .format-post:before{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#1e0b3ccd);z-index:-1;pointer-events:none}
.native-video-pair article:after,.native-video-pair .edited-frame:after,.native-social article:after,.content-formats .format-post:after{inset:auto;top:6px;left:35%;width:30%;height:7px;z-index:4}
@media(max-width:700px){.native-social article>span{padding:23px 3px 8px;font-size:6px}.native-video-pair .video-frame-label{top:23px}.content-formats .format-post>span{top:23px}}
.native-video-pair .edited-frame:after{background:#20232b}
.native-video-pair .edited-frame:before{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#1e0b3c90);pointer-events:none}

/* The approved studio composition contains its own devices and contact shadows. */
.campaign-page[data-service=websites] .service-primary-example{background:#fff}
.website-device-composition{margin:0}
.website-device-composition>img{display:block;width:100%;height:auto}
.website-device-composition>figcaption{margin-top:18px;text-align:center;color:#51475e}

/* Owner correction: the final enquiry supplies violet between white process and ink footer. */
.round-two-home .home-final-section{background:#4c1d95;color:#fff}
.round-two-home .home-final-cta{background:transparent;color:#fff;border:0;border-radius:0;box-shadow:none}
.round-two-home .home-final-cta :is(h2,p){color:#fff}