/* Each service has its own composition and semantic interaction. */
body[data-experience]{--bg:#f7faf8;--ink:#123c2d;--muted:#415e52;--accent:#b9edca;--soft:#e5f2eb;--line:#b1c8ba;background:var(--bg);color:var(--ink)}
body[data-experience=campaign]{--bg:#fff9f2;--ink:#3f2520;--muted:#73574f;--accent:#ffc1a3;--soft:#f9e5d6;--line:#d4b6a6}
body[data-experience=calling]{--bg:#111e2a;--ink:#eef5fa;--muted:#b8cbd9;--accent:#a5dbef;--soft:#1d3040;--line:#4b6578}
body[data-experience=visitor]{--bg:#f7f8fe;--ink:#233653;--muted:#52617c;--accent:#c9d8fc;--soft:#e8edf9;--line:#b0bbd2}
body[data-experience=pipeline]{--bg:#faf9f4;--ink:#30392b;--muted:#5a6553;--accent:#d6e89f;--soft:#edf0df;--line:#bac5a5}
body[data-experience] ::selection{background:var(--accent);color:var(--ink)}
body[data-experience=calling] ::selection{color:#111e2a}
body[data-experience]{scrollbar-color:var(--muted) var(--bg)}
body[data-experience] .brand-mark{color:var(--bg)}
body[data-experience] .button{background:var(--ink);color:var(--bg);border-color:var(--ink)}
body[data-experience] .button:hover{background:var(--accent);color:var(--ink)}
body[data-experience] .header-cta{color:var(--ink);background:transparent}
body[data-experience] :focus-visible{outline:3px solid var(--muted);outline-offset:5px}
.service-experience h1{font-size:clamp(3rem,5.5vw,5.4rem);font-weight:600;line-height:1.03;letter-spacing:-.04em;text-wrap:balance;max-width:900px}
.service-experience h2{font-size:clamp(2.3rem,4vw,4rem);font-weight:550;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.service-experience h3{font-size:25px;line-height:1.2;letter-spacing:-.02em;font-weight:550}
.experience-copy>p{font-size:19px;max-width:540px;margin:25px 0 28px;line-height:1.65;color:var(--muted)}
.service-experience p{color:var(--muted)}
.service-experience button:not(.button){cursor:pointer;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:11px 16px;font:inherit;transition:background .2s,transform .2s}
.service-experience button:hover{background:var(--soft)}
.service-experience button[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--ink)}
.preview-note{font-size:13px;margin-top:20px;max-width:65ch}
.service-deliverables{padding-top:100px;padding-bottom:100px}
.service-deliverables h2{max-width:760px;margin-bottom:45px}
.service-deliverables dl{display:grid;grid-template-columns:1fr 1fr;gap:32px 70px;margin:0}
.service-deliverables dl>div{padding-top:22px;border-top:1px solid var(--line)}
.service-deliverables dt{font-size:23px;font-weight:550;margin-bottom:12px}
.service-deliverables dd{margin:0;max-width:58ch;color:var(--muted);line-height:1.7}
.experience-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;padding-top:55px;padding-bottom:95px}
.experience-faq details{border-bottom:1px solid var(--line);padding:20px 0}
.experience-faq summary{cursor:pointer;font-size:21px;line-height:1.4}
.experience-faq details p{margin-top:15px;line-height:1.7;max-width:65ch}
body[data-experience] .contact{background:var(--soft);border-radius:16px;margin-top:35px}
body[data-experience] .contact h2{font-size:clamp(2.7rem,4.5vw,4.6rem)}
body[data-experience] .enquiry-form input,body[data-experience] .enquiry-form select,body[data-experience] .enquiry-form textarea{background:var(--bg);color:var(--ink);border-color:var(--muted);caret-color:var(--ink)}
body[data-experience] .enquiry-form input::placeholder,body[data-experience] .enquiry-form textarea::placeholder{color:var(--muted)}
body[data-experience] .text-link,body[data-experience] .inline-link{color:var(--ink)}
body[data-experience] dialog{background:var(--bg);color:var(--ink)}
body[data-experience] dialog p,body[data-experience] .dialog-close{color:var(--ink)}
body[data-experience=calling] .button:hover{color:#111e2a}
body[data-experience=calling] .service-experience button[aria-pressed=true]{color:#111e2a}
body[data-experience=calling] #form-status[data-state=success]{color:#b5edc7}
body[data-experience=calling] #form-status[data-state=error]{color:#ffc1b8}
/* WhatsApp: a conversation-led studio, followed by a broad message journey. */
.messaging-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-top:55px;padding-bottom:65px}
.chat-studio{background:#fff;border:1px solid #b1c8ba;border-radius:18px;overflow:hidden;box-shadow:0 24px 55px #123c2d12}
.chat-top{background:#123c2d;color:#fff;padding:21px 26px;display:flex;flex-direction:column;gap:4px}
.chat-top span{font-size:13px;color:#d0e4d8}
.language-options{display:flex;gap:8px;padding:16px 24px;border-bottom:1px solid var(--line)}
.message-scene{padding:24px;display:flex;flex-direction:column;gap:13px;min-height:310px;background:#eff6f2}
.message-scene p{margin:0;background:#fff;color:#123c2d;padding:13px 17px;border-radius:12px 12px 12px 3px;align-self:flex-start;max-width:90%;font-size:16px;line-height:1.5}
.message-scene p.customer{align-self:flex-end;background:#c9eed7;border-radius:12px 12px 3px 12px}
.chat-bottom{padding:15px 24px;display:flex;align-items:center;gap:15px}
.chat-bottom span{font-size:12px;color:var(--muted)}
.conversation-path{padding-top:65px;padding-bottom:70px}
.message-path{display:grid;grid-template-columns:1fr 1.05fr 1.2fr;gap:28px;margin-top:45px;align-items:start}
.message-path article{padding:28px;background:var(--soft);border-radius:22px 22px 22px 4px}
.message-path article:nth-child(2){margin-top:45px;background:#d5ebdf;border-radius:22px 22px 4px 22px}
.message-path article:last-child{margin-top:90px;background:#c9eed7}
.message-path span{font-size:14px;display:block;margin-bottom:17px}
.message-path p{margin-top:15px;line-height:1.6}
.language-story{padding-top:65px;padding-bottom:75px;border-top:1px solid var(--line)}
.language-story>p{max-width:660px;font-size:19px;margin-top:23px}
.language-story blockquote{margin:45px 0 0;font-size:clamp(1.8rem,3vw,3rem);color:var(--ink)}
/* Meta: an editorial campaign board and a branching response. */
.campaign-hero{padding-top:50px;padding-bottom:60px}
.campaign-hero .experience-copy{display:grid;grid-template-columns:1.3fr 1fr;gap:20px 65px;align-items:start}
.campaign-hero h1{grid-row:span 2}
.campaign-hero .experience-copy>p{margin:5px 0 0}
.campaign-hero .button{justify-self:start}
.campaign-stage{display:grid;grid-template-columns:1.1fr .75fr;gap:40px;margin-top:50px;align-items:center}
.ad-sheet{padding:30px;background:#f7ddca;border-radius:12px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ad-sheet>span{grid-column:1/-1;font-size:13px;grid-row:3}
.ad-sheet h2{font-size:clamp(2rem,3.7vw,3.8rem);align-self:center}
.ad-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
.ad-sheet h2{overflow-wrap:anywhere}
.ad-composition{padding:25px;min-height:220px;background:#ffc1a3;display:flex;flex-direction:column;justify-content:space-between;border-radius:100px 100px 8px 8px;color:#3f2520}
.ad-composition strong{font-size:28px;line-height:1.1}
.ad-sheet>button{grid-column:1/-1;justify-self:start;background:#fff9f2!important}
.dm-sheet{background:var(--bg);padding:28px;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px #3f252014;transform:rotate(2deg)}
.dm-sheet>strong{font-size:23px}
.dm-sheet p{margin:16px 0;line-height:1.6}
#dm-response button{margin:0 6px 8px 0}
.campaign-selector{padding-top:55px;padding-bottom:70px}
.campaign-choices{display:flex;gap:22px;margin-top:35px}
.campaign-choices button{flex:1;text-align:left;padding:24px!important}
.campaign-choices strong,.campaign-choices span{display:block}
.campaign-choices strong{font-size:21px}.campaign-choices span{font-size:15px;margin-top:12px}
.campaign-map{padding-top:70px;padding-bottom:50px;border-top:1px solid var(--line)}
.campaign-map ol{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;counter-reset:steps}
.campaign-map li:before{counter-increment:steps;content:counter(steps);display:block;font-size:45px;color:var(--muted);margin-bottom:23px}
.campaign-map p{margin-top:15px;line-height:1.6}
/* Voice: a full-width call console with transcript, not a chat reskin. */
.calling-hero{padding-top:60px;padding-bottom:65px}
.voice-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.voice-heading .experience-copy>p{max-width:680px}
.call-language{display:flex;gap:8px;padding-bottom:8px}
.call-console{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border:1px solid var(--line);border-radius:16px;margin-top:42px;overflow:hidden}
.call-display{padding:40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.call-display>span{font-size:17px}.call-display h2{font-size:31px;margin-bottom:25px}.call-display p{font-size:13px;margin-top:20px;max-width:38ch}
.waveform{display:flex;gap:5px;align-items:center;height:130px;margin:25px 0;width:100%;justify-content:center}
.waveform i{height:var(--height);width:5px;border-radius:5px;background:var(--accent);transform:scaleY(.2);transition:transform .4s}
.call-console[data-running=true] .waveform i{animation:speech 850ms ease-in-out var(--delay) 4 alternate}
@keyframes speech{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.call-transcript{background:#152635;padding:32px;border-left:1px solid var(--line);min-height:330px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.call-transcript p{margin:0;line-height:1.6;max-width:55ch}
.call-transcript small{display:block;color:#a5dbef;margin-bottom:3px}
.voice-boundaries{padding-top:50px;padding-bottom:60px}
.voice-brief{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:40px}
.voice-brief article{border-top:1px solid var(--line);padding-top:24px}
.voice-brief p{margin-top:18px;line-height:1.7}
.voice-languages{padding-top:60px;padding-bottom:65px;border-top:1px solid var(--line)}
.voice-languages>p{max-width:700px;font-size:19px;margin-top:25px}
.voice-language-lines{display:flex;gap:50px;margin-top:35px;font-size:clamp(1.8rem,4vw,3.5rem);color:var(--accent)}
/* Website: a browser journey that changes as the visitor chooses. */
.visitor-hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;padding-top:70px;padding-bottom:70px}
.browser-demo{border:1px solid var(--line);background:#fff;border-radius:12px;box-shadow:0 25px 50px #23365314;overflow:hidden}
.browser-address{padding:15px 24px;border-bottom:1px solid var(--line);background:var(--soft);font-size:13px;color:var(--muted)}
.course-demo{padding:35px}.course-demo h2{font-size:35px}.course-demo>p{margin:20px 0;font-size:16px;line-height:1.6}
.visitor-actions{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}
#visitor-view{min-height:120px;border-top:1px solid var(--line);padding-top:23px}
#visitor-view h3{font-size:22px}#visitor-view p{margin-top:12px;line-height:1.6}
.website-help{margin:0 25px 25px;background:var(--soft);border-radius:10px;padding:22px}
.website-help p{margin-top:10px;line-height:1.5;font-size:15px}
.visitor-journey{padding-top:60px;padding-bottom:60px}
.visitor-stops{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:40px}
.visitor-stops article{padding:30px;border-top:1px solid var(--line)}
.visitor-stops article:nth-child(2){background:var(--soft)}
.visitor-stops p{margin-top:18px;line-height:1.65}
.website-blueprint{padding-top:65px;padding-bottom:70px;border-top:1px solid var(--line)}
.website-blueprint>p{font-size:19px;max-width:690px;margin-top:25px}
.blueprint-line{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.blueprint-line span{font-size:23px;padding:20px 0;border-bottom:2px solid var(--muted)}
/* Leads: the pipeline is the hero and state movement is the signature. */
.pipeline-hero{padding-top:60px;padding-bottom:65px}
.pipeline-hero .experience-copy{max-width:960px}.pipeline-hero .experience-copy>p{max-width:740px}
.pipeline-demo{position:relative;margin-top:40px;padding:28px;background:var(--soft);border:1px solid var(--line);border-radius:14px}
.pipeline-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}
.pipeline-top h2{font-size:26px}.pipeline-top>span{font-size:13px;color:var(--muted)}
.pipeline-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pipeline-columns>div{background:var(--bg);min-height:215px;border-radius:8px;padding:20px}
.pipeline-columns h3{font-size:19px}
.lead-sample{position:absolute;left:48px;top:131px;width:calc((100% - 88px)/3 - 20px);padding:19px;background:#d6e89f;border-radius:8px;transition:left .65s cubic-bezier(.16,1,.3,1);color:#30392b}
.lead-sample>strong,.lead-sample>span{display:block}.lead-sample>span{font-size:12px;margin-top:5px}.lead-sample p{font-size:14px;margin-top:14px;color:#415034;line-height:1.5}
.pipeline-demo[data-stage=qualified] .lead-sample{left:calc(33.333% + 28px)}
.pipeline-demo[data-stage=booked] .lead-sample{left:calc(66.666% + 8px)}
.pipeline-actions{display:flex;gap:10px;margin-top:20px}.pipeline-demo>p{margin-top:16px;font-size:15px}
.source-system{padding-top:60px;padding-bottom:70px}
.source-connect{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:50px;align-items:center;margin-top:40px}
.source-connect>div{display:flex;flex-direction:column;gap:17px}
.source-connect span{padding:14px 0;font-size:20px;border-bottom:1px solid var(--line)}
.source-connect article{padding:30px;background:var(--accent);border-radius:12px;text-align:center}
.source-connect article p{margin-top:18px;line-height:1.6}
.pipeline-workspace{padding-top:60px;padding-bottom:60px;border-top:1px solid var(--line)}
.pipeline-workspace figure{margin:35px 0 0}.pipeline-workspace img{width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
.pipeline-workspace figcaption{font-size:13px;color:var(--muted);margin-top:14px}
@media(max-width:1000px){.messaging-hero,.visitor-hero{gap:30px}.voice-heading{display:block}.call-language{margin-top:25px}.campaign-hero .experience-copy{grid-template-columns:1.2fr 1fr;gap:20px 30px}.lead-sample{top:132px}.source-connect{gap:25px}.campaign-map ol{grid-template-columns:1fr 1fr}}
@media(max-width:780px){.service-experience h1{font-size:clamp(2.65rem,8vw,4rem)}.service-experience h2{font-size:clamp(2rem,7vw,3rem)}.experience-copy>p{font-size:17px}.messaging-hero,.visitor-hero{grid-template-columns:1fr;padding-top:35px;padding-bottom:35px;gap:35px}.campaign-hero{padding-top:35px}.campaign-hero .experience-copy{display:block}.campaign-hero .experience-copy>p{margin:24px 0}.campaign-stage{grid-template-columns:1fr;gap:25px;margin-top:35px}.ad-sheet{padding:24px}.ad-sheet h2{font-size:30px}.ad-composition{min-height:200px;padding:22px}.dm-sheet{transform:none}.campaign-choices{flex-direction:column;gap:12px}.campaign-choices button{padding:20px!important}.message-path{grid-template-columns:1fr;gap:18px;margin-top:30px}.message-path article:nth-child(2),.message-path article:last-child{margin-top:0}.message-path article:nth-child(2){margin-left:25px}.message-path article:last-child{margin-right:25px}.conversation-path,.service-deliverables,.language-story,.campaign-selector,.campaign-map,.voice-boundaries,.voice-languages,.visitor-journey,.website-blueprint,.source-system,.pipeline-workspace{padding-top:50px;padding-bottom:50px}.service-deliverables dl{grid-template-columns:1fr;gap:25px}.service-deliverables h2{margin-bottom:30px}.experience-faq{grid-template-columns:1fr;gap:15px;padding-top:30px;padding-bottom:45px}.experience-faq summary{font-size:19px}.calling-hero,.pipeline-hero{padding-top:35px;padding-bottom:35px}.call-console{grid-template-columns:1fr}.call-display{padding:30px 20px}.call-transcript{border-left:0;border-top:1px solid var(--line);padding:25px;min-height:220px}.voice-brief{grid-template-columns:1fr;gap:25px}.voice-language-lines{gap:20px;flex-wrap:wrap}.visitor-stops{grid-template-columns:1fr}.visitor-stops article{padding:25px 0}.visitor-stops article:nth-child(2){padding:25px}.blueprint-line{grid-template-columns:1fr 1fr}.blueprint-line span{font-size:19px}.course-demo{padding:25px}.course-demo h2{font-size:28px}.source-connect{grid-template-columns:1fr;gap:25px}.source-connect>div{display:grid;grid-template-columns:1fr 1fr}.pipeline-top{display:block}.pipeline-top>span{display:block;margin-top:10px}.pipeline-demo{padding:20px}.pipeline-columns{gap:8px}.pipeline-columns>div{padding:13px 8px;min-height:240px}.pipeline-columns h3{font-size:15px}.lead-sample{left:28px;top:145px;width:calc((100% - 56px)/3 - 8px);padding:10px}.lead-sample>strong{font-size:14px}.lead-sample>span{font-size:11px}.lead-sample p{font-size:12px}.pipeline-demo[data-stage=qualified] .lead-sample{left:calc(33.333% + 15px)}.pipeline-demo[data-stage=booked] .lead-sample{left:calc(66.666% + 2px)}.pipeline-actions{gap:7px;flex-wrap:wrap}.pipeline-actions button{font-size:13px!important;padding:10px!important}.chat-bottom{flex-direction:column;align-items:flex-start}.language-options{padding:14px 18px}.language-options button{font-size:14px!important}.message-scene{padding:18px;min-height:340px}body[data-experience] .contact{padding:30px 24px}.campaign-map ol{gap:30px 20px}.campaign-map h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.service-experience *, .service-experience *:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}.waveform i{transform:scaleY(.65)}}
.lead-sample,.pipeline-demo[data-stage=qualified] .lead-sample,.pipeline-demo[data-stage=booked] .lead-sample{position:static;width:100%;margin-top:18px;transition:none}
@media(max-width:780px){.pipeline-columns{grid-template-columns:1fr}.pipeline-columns>div{min-height:65px;padding:16px}.pipeline-columns h3{font-size:18px}.lead-sample{padding:17px}.lead-sample>strong{font-size:18px}.lead-sample>span{font-size:13px}.lead-sample p{font-size:15px}}