/* Editorial photography: real workday context, alongside the DDC illustration system. */
.ph-figure{position:relative;min-width:0;margin:0}
.ph-frame{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/3;border-radius:10px 58px 10px 10px;background:#e5dfd5}
.ph-frame:after{content:"";position:absolute;inset:0;border:1px solid #20222912;border-radius:inherit;pointer-events:none}
.ph-frame>img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--photo-focus,50% 50%);translate:0 var(--photo-drift,0px);scale:1.045;transition:scale .9s var(--ease);will-change:auto}
.ph-figure:hover .ph-frame>img{scale:1.07}
.ph-pixels{position:absolute;right:0;bottom:0;width:24px;height:24px;background:var(--paper);z-index:2;box-shadow:-24px 0 var(--cyan),0 -24px var(--blue)}
.ph-caption{display:flex;align-items:baseline;gap:13px;margin-top:17px;color:var(--muted);font-size:11px;line-height:1.7;letter-spacing:.01em}
.ph-caption:before{content:"";display:block;width:30px;height:1px;background:var(--blue);flex:0 0 30px}
.ph-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(35px,6vw,90px);align-items:center}
.ph-story-copy>.ip-copy{margin-top:25px;max-width:37em}
.ph-story-copy>.ddc-link{margin-top:25px}
.ph-story .ws-editorial-list{margin-top:25px}
.ph-story .ph-frame{aspect-ratio:1.12}
.ph-story--reverse .ph-figure{order:-1}
.ph-home{margin-top:37px;max-width:470px}
.ph-home .ph-frame{aspect-ratio:1.65;border-top-right-radius:42px;--photo-focus:50% 42%}
.ph-home .ph-caption{font-size:10px}
.ph-calling-hero{gap:clamp(35px,5.5vw,85px)}
.ph-calling-hero .ph-frame{aspect-ratio:1.03;--photo-focus:54% 50%}
.ph-call-note{position:absolute;z-index:2;bottom:22px;left:22px;right:22px;display:flex;align-items:center;gap:16px;padding:15px 18px;background:#101722ed;color:var(--white);border:1px solid #7dd0dc38;border-radius:12px;box-shadow:0 10px 25px #10172225}
.ph-call-note img{width:45px;height:45px;flex:0 0 45px;object-fit:contain;animation:ph-signal 5s ease-in-out infinite}
.ph-call-note p{font-size:12px;line-height:1.7;color:#f8f7f3}
.ph-call-note strong{font-weight:600;color:var(--cyan)}
.ph-church{border-top:1px solid var(--line);padding-top:65px;padding-bottom:75px}
.ph-church .ph-frame{aspect-ratio:1.38;border-radius:58px 10px 10px 10px}
.ph-church .ip-heading{font-size:clamp(36px,4.3vw,61px)}
.ph-chat-needs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 70px;align-items:center}
.ph-chat-needs .bp-editorial-heading{display:block}
.ph-chat-needs .bp-editorial-heading .ip-copy{margin-top:25px;max-width:34em}
.ph-chat-needs .ph-frame{aspect-ratio:1.5;--photo-focus:58% 45%}
.ph-chat-needs .bp-chat-needs-list{grid-column:1/-1;margin-top:8px}
.ph-search-figure .ph-frame{aspect-ratio:1.05;--photo-focus:61% 50%}
.ph-search-tag{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:10px;background:var(--paper);box-shadow:0 4px 25px #10172218;color:var(--ink)}
.ph-search-tag svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round}
.ph-search-tag p{font-size:12px;line-height:1.6;font-weight:500}
.ph-real-people{display:flex;align-items:center;gap:20px;margin-top:28px}
.ph-real-portraits{display:flex;align-items:flex-end;gap:5px;flex-shrink:0}
.ph-real-portraits img{width:60px;height:66px;object-fit:contain;object-position:bottom}
.ph-real-people>p{font-size:11px;line-height:1.8;color:var(--muted)}
.ph-real-people strong{font-size:14px;font-weight:600;color:var(--ink)}
.ip-dark .ph-real-people>p{color:var(--night-subtle)}
.ip-dark .ph-real-people strong{color:#f8f7f3}
@keyframes ph-signal{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@media(max-width:1000px){.ph-story{gap:40px}.ph-story .ph-frame{aspect-ratio:.96}.ph-chat-needs{gap:35px}.ph-calling-hero .ph-frame{aspect-ratio:.9}.ph-call-note{left:14px;right:14px;bottom:14px;padding:13px;gap:12px}.ph-call-note p{font-size:11px}.ph-call-note img{width:37px;height:37px;flex-basis:37px}}
@media(max-width:800px){.ph-story,.ph-chat-needs{grid-template-columns:1fr;gap:32px}.ph-story-copy{max-width:620px}.ph-story .ph-figure{max-width:640px;width:100%;justify-self:end}.ph-story .ph-frame{aspect-ratio:1.5}.ph-story--reverse .ph-figure{order:0}.ph-chat-needs .ph-figure{width:83%;justify-self:end}.ph-chat-needs .bp-chat-needs-list{margin-top:6px}.ph-church{padding-top:48px;padding-bottom:55px}.ph-calling-hero .ph-figure{width:100%;max-width:620px;margin:auto}.ph-calling-hero .ph-frame{aspect-ratio:.9}.ph-search-figure{width:90%;max-width:570px;justify-self:end}.ph-search-figure .ph-frame{aspect-ratio:1.35}.ph-home{max-width:560px;margin-top:30px}.ph-home .ph-frame{aspect-ratio:1.85}}
@media(max-width:560px){.ph-frame{border-top-right-radius:38px}.ph-story .ph-frame{aspect-ratio:1.19}.ph-story-copy>.ip-copy{margin-top:22px}.ph-story .ph-figure{width:100%}.ph-pixels{width:18px;height:18px;box-shadow:-18px 0 var(--cyan),0 -18px var(--blue)}.ph-caption{font-size:10px;margin-top:13px;gap:11px}.ph-caption:before{width:25px;flex-basis:25px}.ph-home{margin-top:28px}.ph-home .ph-frame{aspect-ratio:1.45}.ph-home .ph-caption{font-size:10px}.ph-calling-hero .ph-frame{aspect-ratio:1.04;--photo-focus:55% 50%}.ph-call-note{bottom:15px;left:15px;right:15px;padding:12px 14px}.ph-call-note p{font-size:11px}.ph-call-note img{width:38px;height:38px;flex-basis:38px}.ph-church .ph-frame{aspect-ratio:1.28;border-top-left-radius:38px}.ph-church .ip-heading{font-size:36px}.ph-chat-needs{gap:28px}.ph-chat-needs .ph-figure{width:92%}.ph-chat-needs .ph-frame{aspect-ratio:1.2;--photo-focus:58% 50%}.ph-chat-needs .bp-chat-needs-list{gap:28px}.ph-search-figure{width:100%}.ph-search-figure .ph-frame{aspect-ratio:1.2}.ph-search-tag{left:15px;right:15px;bottom:15px;padding:13px 14px;gap:10px}.ph-search-tag p{font-size:11px}.ph-real-people{gap:16px}.ph-real-portraits img{width:51px;height:57px}.ph-real-people strong{font-size:13px}}
.ddc-motion-paused .ph-frame>img{translate:none;scale:1;transition:none}
.ddc-motion-paused .ph-call-note img{animation:none}
@media(prefers-reduced-motion:reduce){.ph-frame>img,.ph-figure:hover .ph-frame>img{translate:none;scale:1;transition:none}.ph-call-note img{animation:none}}
/* V4 hybrid: the same colour accents, set in the site's sans-serif family.
   Load after the page-specific CSS so old italic-size compensations cannot win. */
.ddc-serif{
 font-family:Manrope,Arial,sans-serif;
 font-style:normal;
 font-weight:inherit;
 letter-spacing:inherit;
 line-height:inherit;
}

.v4-hero h1 .ddc-serif,
.v4-section-heading h2 .ddc-serif,
.v4-beacon-heading .ddc-serif,
.v4-product-text h3 .ddc-serif,
.v4-voice-layout h3 .ddc-serif,
.v4-website-intro .ddc-serif,
.v4-people-copy h2 .ddc-serif,
.v4-big-contact .ddc-serif,
.ddc-case-hero h1 .ddc-serif,
.ddc-build-cta h2 .ddc-serif,
.bf-heading h2 .ddc-serif,
.bf-flow-heading h3 .ddc-serif,
.bf-demo-copy h3 .ddc-serif,
.bf-chat h3 .ddc-serif{
 font-size:1em;
 line-height:inherit;
 letter-spacing:inherit;
}

/* Sans-serif letters have a different width: allow natural wrapping instead
   of keeping phrases locked to the old narrow italic measure. */
.v4-beacon-heading .ddc-serif,
.bf-heading h2 .ddc-serif,
.v4-big-contact .ddc-serif{
 white-space:normal;
}

.ddc-menu-proof blockquote{
 font-family:Manrope,Arial,sans-serif;
 font-style:normal;
 font-weight:500;
 font-size:clamp(21px,1.7vw,25px);
 line-height:1.3;
 letter-spacing:-.035em;
}
.v4-quote-mark{
 font-family:Manrope,Arial,sans-serif;
 font-style:normal;
 font-weight:700;
}

@media(max-width:800px){
 .ddc-menu-proof blockquote{font-size:25px}
}
@media(max-width:560px){
 .ddc-menu-proof blockquote{font-size:24px}
 /* Keep the existing voice ribbon clear of the wider sans-serif heading. */
 .bf-demo-copy h3{font-size:clamp(44px,14vw,60px)}
}


/* One type hierarchy across the hero, story and product sections. */
.v4-section-heading h2,
.bf-heading h2,
.bf-demo-copy h3,
.v4-website-intro h2,
.v4-people-copy h2,
.v4-big-contact,
.ddc-case-hero h1,
.ddc-case-close h2,
.ddc-generic h1{
 font-weight:600;
 letter-spacing:-.045em;
}
.bf-flow-heading h3,
.bf-chat h3,
.bf-flow h4,
.v4-service-list h3,
.ddc-build-summary h2,
.ddc-build-cta h2,
.ddc-prose h2{
 font-weight:600;
 letter-spacing:-.035em;
}
/* The headline makes the statement; quotes and paragraphs keep a human voice. */
.v4-main-review blockquote{font-weight:500;letter-spacing:-.035em}
.v4-section-heading h2,.v4-people-copy h2{line-height:1.13}
@media(min-width:801px){.v4-work{padding-top:96px}}
@media(max-width:560px){
 .bf-heading h2{font-size:clamp(34px,11.25vw,60px)}
 .bf-flow-heading h3{font-size:clamp(24px,7vw,28px);max-width:100%;text-wrap:balance}
}
/* Final shared details across the selected V4 pages. */
.ws-church-link{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding:25px 0 55px}.ws-church-link>p{font-size:15px;color:var(--muted)}.ws-church-link .ddc-link{font-size:14px}
@media(max-width:600px){.ws-church-link{align-items:flex-start;flex-direction:column;gap:18px;padding-bottom:40px}}
.ddc-nav>a[aria-current=page],.ddc-services-heading>a[aria-current=page]{color:var(--blue-strong);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.ddc-nav>a.ddc-current-section,.ddc-services-heading>a.ddc-current-section{color:var(--blue-strong)}
.ddc-dark .ddc-nav>a[aria-current=page],.ddc-dark .ddc-services-heading>a[aria-current=page],.ddc-dark .ddc-nav>a.ddc-current-section{color:var(--blue-light)}
.ddc-menu-item[aria-current=page] .ddc-menu-title{color:var(--blue-strong)}
.ddc-footer-links a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.ph-real-people>p{font-size:12px}.ip-dark .ph-real-people>p{color:var(--night-muted)}
.ct-form input,.ct-form select,.ct-form textarea{font-size:16px}
@media(max-width:800px){.ddc-disclosure{min-width:44px;min-height:44px}.ddc-mobile-toggle{min-height:44px}}
@media(max-width:560px){.ddc-footer-tagline{font-size:11px;line-height:1.7}.ddc-footer-links .ddc-label{font-size:9px}.ddc-footer-links a{min-height:44px}.ddc-footer-bottom{font-size:10px;line-height:1.7}.ddc-footer-legal{row-gap:7px;flex-wrap:wrap}.ddc-footer-legal a{min-height:32px;display:inline-flex;align-items:center}.ddc-footer-signoff{font-size:10px;align-items:center}.ddc-motion-toggle{min-height:40px;font-size:10px}.ph-real-people>p{font-size:11px}}

/* One shared header: the existing navigation becomes compact after the opening. */
:root{--ddc-expanded-row:112px;--ddc-phone-strip:37px;--ddc-nav-height:72px;--ddc-stick-top:calc(var(--ddc-nav-height) + 24px)}
html{scroll-padding-top:var(--ddc-stick-top)}
.ddc-header{min-height:calc(var(--ddc-expanded-row) + var(--ddc-phone-strip))}
.ddc-header.ddc-is-compact .ddc-header-main{position:fixed;inset:0 0 auto;background:rgba(248,247,243,.96);border-bottom:1px solid var(--line);box-shadow:0 8px 28px #2022290b;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:ddc-nav-arrive .25s ease-out}
.ddc-header.ddc-is-compact .ddc-header-inner{height:var(--ddc-nav-height);border-bottom:0}
.ddc-header.ddc-is-compact .ddc-logo{width:145px;flex-basis:145px}
.ddc-header.ddc-is-compact .ddc-header-cta{padding:11px 18px;min-height:44px}
.ddc-header.ddc-is-compact .ddc-mega{top:calc(100% - 1px);max-height:calc(100dvh - var(--ddc-nav-height) - 20px);overflow-y:auto;overscroll-behavior:contain}
.ddc-dark .ddc-header.ddc-is-compact .ddc-header-main{background:rgba(16,23,34,.96);border-color:var(--night-line);box-shadow:0 8px 28px #0002}
.ddc-sticky-column{position:relative;top:auto;align-self:start}
.ddc-call-icon{display:block;width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ddc-live-dot{position:relative;display:inline-block;width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#259466;box-shadow:0 0 0 3px #25946612}
.ddc-live-dot:after{content:'';position:absolute;inset:-4px;border:1px solid #25946670;border-radius:50%;animation:ddc-call-pulse 3s ease-out infinite}
.ddc-call-status{display:flex;align-items:center;gap:9px}.ddc-mobile-call{display:none}
.hy-call-note{font-size:12px;line-height:1.8;color:var(--muted);margin-top:16px}.hy-call-note a{color:var(--ink);font-weight:600}.hy-call-note+.hy-proof{margin-top:24px}
.ct-project-actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:35px}.ct-project-actions>.ddc-link{font-size:13px}.ct-local-phone a{text-decoration:underline;text-underline-offset:3px}
@keyframes ddc-call-pulse{0%,70%,100%{transform:scale(.75);opacity:0}20%{opacity:.7}55%{transform:scale(1.6);opacity:0}}
@media(min-width:901px){.ddc-sticky-column[data-sticky-ready]{position:sticky;top:var(--ddc-stick-top)}}
@keyframes ddc-nav-arrive{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){:root{--ddc-expanded-row:96px}}
@media(max-width:800px){
 :root{--ddc-expanded-row:86px;--ddc-nav-height:64px;--ddc-stick-top:84px}
 .ddc-header.ddc-is-compact .ddc-logo{width:132px;flex-basis:132px}
 .ddc-header.ddc-is-compact .ddc-mobile-toggle{padding:10px 16px;min-height:44px}
 .ddc-header.ddc-is-compact .ddc-nav{top:calc(100% + 8px);max-height:calc(100dvh - var(--ddc-nav-height) - 24px)}
 .ddc-header.ddc-is-compact .ddc-mega{max-height:none;overflow:visible}
 .ddc-header .ddc-header-inner{gap:12px}.ddc-header .ddc-mobile-toggle{order:3}.ddc-header .ddc-mobile-call{order:2;display:inline-flex;position:relative;width:44px;height:44px;min-width:44px;padding:0;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;gap:0;margin-left:auto;transition:background .2s,border-color .2s}.ddc-header.ddc-is-compact .ddc-mobile-call{padding:0}.ddc-mobile-call:hover{background:var(--blue-wash);border-color:var(--blue)}.ddc-dark .ddc-mobile-call:hover{background:var(--night-line)}.ddc-mobile-call .ddc-live-dot{position:absolute;right:1px;top:1px;width:6px;height:6px;box-shadow:0 0 0 3px var(--paper)}.ddc-dark .ddc-mobile-call .ddc-live-dot{box-shadow:0 0 0 3px var(--night)}
}
@media(max-width:560px){:root{--ddc-phone-strip:45px}.ddc-header .ddc-logo{width:132px;flex-basis:132px}.ddc-contact-strip>.ddc-wrap{gap:10px;font-size:10px}.ddc-contact-strip a{gap:5px}.ddc-contact-strip svg{display:none}.ddc-contact-strip .ddc-live-dot{width:6px;height:6px;flex-basis:6px}.ddc-contact-strip .ddc-call-status{gap:7px}.ct-project-actions{align-items:flex-start;flex-direction:column;gap:20px}.ct-project-actions>.ddc-pill{font-size:12px;gap:16px;padding:16px 20px}.hy-call-note{font-size:12px}}
@media(max-width:380px){.ddc-header .ddc-header-inner{gap:6px}}
@media(max-width:800px){.ddc-dark .ddc-nav.ddc-nav-open>a[aria-current=page],.ddc-dark .ddc-nav.ddc-nav-open>a.ddc-current-section{color:var(--blue-strong)}}
@media(prefers-reduced-motion:reduce){.ddc-header.ddc-is-compact .ddc-header-main{animation:none}}
.ddc-motion-paused .ddc-header.ddc-is-compact .ddc-header-main{animation:none}
@media(prefers-reduced-motion:reduce){.ddc-live-dot:after{animation:none;opacity:0}}
.ddc-motion-paused .ddc-live-dot:after{animation:none;opacity:0}


/* Services menu: Beacon AI Calling leads, and phones get one calm panel that needs no scrolling. */
.ddc-menu-icon{display:none;width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ddc-toggle-close,.ddc-close-icon{display:none}
.ddc-close-icon{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ddc-mobile-toggle[aria-expanded=true] .ddc-toggle-open,.ddc-mobile-toggle[aria-expanded=true] .ddc-chevron{display:none}
.ddc-mobile-toggle[aria-expanded=true] .ddc-toggle-close,.ddc-mobile-toggle[aria-expanded=true] .ddc-close-icon{display:block}
/* AI Calling comes first in a soft blue card: easy to find, without outshouting the other services. */
.ddc-menu-feature{background:var(--blue-wash);border:1px solid #d3e0f7;transition:background .25s,border-color .25s,box-shadow .3s}
.ddc-menu-feature .ddc-menu-icon{display:block;width:40px;height:40px;padding:9px;border-radius:50%;background:#fff;color:var(--blue-strong)}
.ddc-menu-feature:hover,.ddc-menu-feature:focus-visible{background:#e2ebfa;border-color:var(--blue-soft)}
.ddc-menu-feature:hover .ddc-arrow,.ddc-menu-feature:focus-visible .ddc-arrow{transform:translate(2px,-2px)}
.ddc-menu-feature[aria-current=page]{border-color:var(--blue)}

@media(min-width:801px){
 .ddc-mega:not(.ddc-mega-open){display:none}
 .ddc-mega .ddc-menu-feature{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center;margin-top:14px;padding:16px 18px 17px 14px;border-radius:12px}
 .ddc-mega .ddc-menu-feature .ddc-menu-icon{grid-row:span 2}
 .ddc-mega .ddc-menu-feature .ddc-menu-desc{margin-top:4px}
 .ddc-mega .ddc-menu-feature+.ddc-menu-item{margin-top:16px}
 /* Every option answers the pointer and the keyboard: the other services pick up the AI Calling card's soft blue, the title turns blue and the arrow nudges. */
 .ddc-mega .ddc-menu-item{position:relative;isolation:isolate}
 .ddc-mega .ddc-menu-item:not(.ddc-menu-feature)::before{content:"";position:absolute;z-index:-1;inset:7px -12px;border:1px solid #d3e0f7;border-radius:12px;background:var(--blue-wash);opacity:0;transform:scale(.985);transition:opacity .25s,transform .35s var(--ease),box-shadow .3s}
 .ddc-mega .ddc-menu-item:not(.ddc-menu-feature):hover::before,.ddc-mega .ddc-menu-item:not(.ddc-menu-feature):focus-visible::before{opacity:1;transform:none}
 .ddc-mega .ddc-menu-feature:hover,.ddc-mega .ddc-menu-feature:focus-visible,.ddc-mega .ddc-menu-item:not(.ddc-menu-feature):hover::before,.ddc-mega .ddc-menu-item:not(.ddc-menu-feature):focus-visible::before{box-shadow:0 12px 22px -16px #2a4c9a73}
 .ddc-mega .ddc-menu-title{transition:color .2s}
 .ddc-mega .ddc-menu-item:hover .ddc-menu-title,.ddc-mega .ddc-menu-item:focus-visible .ddc-menu-title{color:var(--blue-strong)}
 .ddc-mega .ddc-menu-item:hover .ddc-arrow,.ddc-mega .ddc-menu-item:focus-visible .ddc-arrow{transform:translate(2px,-2px)}
 /* Keyboard focus: a slim ring that follows the card's rounded corners. */
 .ddc-mega .ddc-menu-feature:focus-visible{outline:2px solid var(--blue-strong);outline-offset:2px}
 .ddc-mega .ddc-menu-item:not(.ddc-menu-feature):focus-visible{outline:none}
 .ddc-mega .ddc-menu-item:not(.ddc-menu-feature):focus-visible::before{outline:2px solid var(--blue-strong);outline-offset:2px}
 /* The smaller links turn blue as well. */
 .ddc-mega .ddc-menu-support a,.ddc-mega .ddc-link{transition:color .2s}
 .ddc-mega .ddc-menu-support a:hover,.ddc-mega .ddc-menu-support a:focus-visible{color:var(--blue-strong);text-decoration:underline;text-underline-offset:4px}
 .ddc-mega .ddc-link:hover,.ddc-mega .ddc-link:focus-visible{color:var(--blue-strong)}
 .ddc-mega .ddc-link:focus-visible .ddc-arrow{transform:translate(2px,-2px)}
}

@media(max-width:800px){
 html.ddc-menu-open{overflow:hidden}
 /* The cookie notice and Beacon's chat button step aside while the menu is open. Beacon resets its children with all:initial, so they are hidden too. */
 html.ddc-menu-open .ddc-consent{visibility:hidden!important}
 html.ddc-menu-open #beacon-chat-floating #beacon-chat-floating-launcher,html.ddc-menu-open #beacon-chat-floating #beacon-chat-floating-invitation,html.ddc-menu-open #beacon-chat-floating #beacon-chat-floating-launcher *,html.ddc-menu-open #beacon-chat-floating #beacon-chat-floating-invitation *{visibility:hidden!important;pointer-events:none!important}
 .ddc-header .ddc-nav,.ddc-header.ddc-is-compact .ddc-nav{--ink:#202229;--muted:#60626d;--line:#dfe0e6;position:absolute;top:100%;left:0;right:0;height:calc(100vh - var(--ddc-menu-top,150px));height:calc(100dvh - var(--ddc-menu-top,150px));max-height:none;margin:0;padding:14px max(20px,calc((100% - 600px)/2)) calc(28px + env(safe-area-inset-bottom));background:#f8f7f3;color:var(--ink);border:0;border-radius:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
 /* Six narrow columns: service tiles take three (two to a row), Projects, About and Reviews take two (three to a row).
    Each row starts at its compact size and grows evenly into any free height up to a cap, so the menu fills shorter
    phones as well as tall ones. Rows: Services label, AI Calling, three rows of tiles, the page links, Start a project. */
 .ddc-header .ddc-nav.ddc-nav-open{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto minmax(min-content,70px) repeat(3,minmax(min-content,62px)) minmax(min-content,70px) minmax(min-content,72px);gap:8px;align-content:start;animation:ddc-sheet-in .3s var(--ease) both}
 .ddc-nav .ddc-services-menu,.ddc-nav .ddc-mega,.ddc-nav .ddc-menu-col,.ddc-nav .ddc-menu-support{display:contents}
 .ddc-nav .ddc-menu-col>.ddc-label,.ddc-nav .ddc-menu-beacon>.ddc-link,.ddc-nav .ddc-menu-proof,.ddc-nav .ddc-disclosure{display:none}
 /* Main pages: Projects, About and Reviews sit together below the services, large and quiet, each with a small blue arrow
    so they read as links. The arrow is drawn in CSS (two borders and a diagonal), so the shared header markup is unchanged. */
 .ddc-header .ddc-nav>a:not(.ddc-mobile-start){order:1;grid-column:span 2;display:flex;align-items:center;min-width:0;min-height:48px;margin-top:10px;padding:8px 2px;border-top:1px solid var(--line);border-bottom:0;font-size:clamp(19px,5.9vw,25px);font-weight:500;letter-spacing:-.04em;line-height:1.2;white-space:nowrap}
 .ddc-header .ddc-nav>a:not(.ddc-mobile-start)::after{content:"";flex:0 0 auto;box-sizing:border-box;width:.48em;height:.48em;margin:.06em 0 0 .3em;border-top:1.5px solid;border-right:1.5px solid;background:linear-gradient(to bottom right,transparent calc(50% - .75px),currentColor calc(50% - .75px),currentColor calc(50% + .75px),transparent calc(50% + .75px)) border-box;color:var(--blue-strong);transition:transform .35s var(--ease)}
 .ddc-header .ddc-nav>a:not(.ddc-mobile-start):active::after{transform:translate(2px,-2px)}
 /* Spread the three evenly: Projects on the left, About centred, Reviews on the right edge in line with the Start a project arrow. */
 .ddc-header .ddc-nav>a.ddc-nav-half:not(.ddc-nav-half+a){justify-content:center}
 .ddc-header .ddc-nav>a.ddc-nav-half+a.ddc-nav-half{justify-content:flex-end}
 .ddc-header .ddc-services-heading{grid-column:1/-1;display:block;padding:4px 2px 2px;border:0}
 .ddc-header .ddc-services-heading>a{display:inline-block;padding:4px 0;font-size:11px;font-weight:700;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
 /* Beacon AI Calling: first, full width, with one line on what it does. */
 .ddc-nav .ddc-menu-feature{grid-column:1/-1;display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center;align-content:center;margin:0;padding:8px 14px 9px 11px;border-radius:12px}
 .ddc-nav .ddc-menu-feature .ddc-menu-icon{grid-row:span 2;width:36px;height:36px;padding:8px}
 .ddc-nav .ddc-menu-feature .ddc-menu-title{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
 .ddc-nav .ddc-menu-feature .ddc-menu-title .ddc-arrow{display:none}
 .ddc-nav .ddc-menu-feature .ddc-menu-desc{font-size:12px;line-height:1.45;margin-top:2px}
 /* The other services: small tiles, two to a row. */
 .ddc-nav .ddc-menu-item:not(.ddc-menu-feature),.ddc-nav .ddc-menu-support>a,.ddc-nav .ddc-link.ddc-menu-all{display:flex;align-items:center;justify-content:flex-start;grid-column:span 3;gap:11px;min-height:50px;margin:0;padding:7px 12px;border:1px solid var(--line);border-radius:12px;background:#fdfcf9;font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.015em;transition:background .2s,border-color .2s}
 .ddc-nav .ddc-menu-item:not(.ddc-menu-feature) .ddc-menu-title{font-size:inherit;letter-spacing:inherit;line-height:inherit}
 .ddc-nav .ddc-menu-item:not(.ddc-menu-feature) .ddc-menu-desc,.ddc-nav .ddc-menu-item:not(.ddc-menu-feature) .ddc-arrow,.ddc-nav .ddc-menu-all>.ddc-arrow{display:none}
 .ddc-nav .ddc-menu-item:not(.ddc-menu-feature) .ddc-menu-icon,.ddc-nav .ddc-menu-support .ddc-menu-icon,.ddc-nav .ddc-menu-all .ddc-menu-icon{display:block;color:var(--blue-strong)}
 .ddc-nav .ddc-menu-item:not(.ddc-menu-feature):active,.ddc-nav .ddc-menu-support>a:active,.ddc-nav .ddc-menu-all:active,.ddc-nav .ddc-menu-item:not(.ddc-menu-feature):focus-visible,.ddc-nav .ddc-menu-support>a:focus-visible,.ddc-nav .ddc-menu-all:focus-visible{background:var(--blue-wash);border-color:var(--blue)}
 .ddc-nav .ddc-menu-item:focus-visible,.ddc-nav .ddc-menu-support>a:focus-visible,.ddc-nav .ddc-menu-all:focus-visible{outline:2px solid var(--blue-strong);outline-offset:2px}
 .ddc-nav .ddc-menu-item[aria-current=page]:not(.ddc-menu-feature),.ddc-nav .ddc-menu-support>a[aria-current=page],.ddc-nav .ddc-menu-all[aria-current=page]{border-color:var(--blue);background:var(--blue-wash);color:var(--blue-strong);text-decoration:none}
 .ddc-header .ddc-nav>a.ddc-mobile-start{order:2;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:14px 22px;border:0;border-radius:100px;background:var(--blue-strong);color:#fff;font-size:15px;font-weight:600;letter-spacing:0;transition:background .2s}
 .ddc-header .ddc-nav>a.ddc-mobile-start:hover,.ddc-header .ddc-nav>a.ddc-mobile-start:active{background:var(--blue-hover)}
 .ddc-dark .ddc-nav.ddc-nav-open>a.ddc-mobile-start:hover{color:#fff}
}
/* Narrow windows with a mouse: the service tiles light up on hover, as they do when tapped. */
@media(max-width:800px) and (hover:hover){
 .ddc-nav .ddc-menu-item:not(.ddc-menu-feature):hover,.ddc-nav .ddc-menu-support>a:hover,.ddc-nav .ddc-menu-all:hover{background:var(--blue-wash);border-color:var(--blue)}
 .ddc-header .ddc-nav>a:not(.ddc-mobile-start):hover::after{transform:translate(2px,-2px)}
}
/* The shortest phones (iPhone SE size with the browser bars showing): tighter spacing so the whole menu still fits on one screen. */
@media(max-width:800px) and (max-height:620px){
 .ddc-header .ddc-nav,.ddc-header.ddc-is-compact .ddc-nav{padding-top:6px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
 .ddc-header .ddc-nav.ddc-nav-open{gap:7px}
 .ddc-header .ddc-services-heading{padding-top:0;padding-bottom:0}
 .ddc-nav .ddc-menu-item:not(.ddc-menu-feature),.ddc-nav .ddc-menu-support>a,.ddc-nav .ddc-link.ddc-menu-all{min-height:48px}
 .ddc-header .ddc-nav>a:not(.ddc-mobile-start){min-height:44px;margin-top:6px}
 .ddc-header .ddc-nav>a.ddc-mobile-start{margin-top:8px;padding-top:12px;padding-bottom:12px}
}
@keyframes ddc-sheet-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ddc-motion-paused .ddc-header .ddc-nav.ddc-nav-open{animation:none}

/* Page-to-page loading cue: shares the scroll bar's place and colours, and only shows when a click takes a moment. */
.ddc-page-loading{position:fixed;left:0;right:0;top:0;height:3px;z-index:151;pointer-events:none;opacity:0;transition:opacity .2s}
.ddc-page-loading span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--cyan),var(--blue))}
.ddc-page-leaving .ddc-page-loading{opacity:1}
.ddc-page-leaving .ddc-page-loading span{animation:ddc-page-loading 10s cubic-bezier(.08,.6,.2,1) forwards}
.ddc-page-leaving .ddc-scroll-progress{opacity:0}
@keyframes ddc-page-loading{0%{transform:scaleX(0)}8%{transform:scaleX(.3)}100%{transform:scaleX(.94)}}
@media (prefers-reduced-motion:reduce){.ddc-page-leaving .ddc-page-loading span{animation:none;transform:scaleX(1);opacity:.7}}
.ddc-motion-paused .ddc-page-loading span{animation:none!important;transform:scaleX(1);opacity:.7}

/* Desktop reading sizes (November 1, 2026). Matt approved a slight bump after
   Graham felt the menu and body text were small on desktop. Loaded last on
   every page so it wins over the page files without !important. Phones and
   small accent labels, notes, captions and illustrative chat or screen text keep
   their own sizes. Main reading text is 16px, card copy 15px, articles 17px. */
@media(min-width:801px){
 /* Menu and header button */
 .ddc-nav{font-size:14px}
 .ddc-header-cta{font-size:13px}

 /* Homepage */
 .hy-intro{font-size:16px;line-height:1.75;max-width:500px}
 .v4-section-heading>p,
 .v4-website-intro>p:not(.ddc-label),
 .v4-people-copy>p:not(.ddc-label),
 .v4-service-list p,
 .bf-intro>p:first-child,
 .bf-demo-copy>p:not(.ddc-label){font-size:16px}
 .bf-outcomes p,
 .bf-knowledge>p:not(.ddc-label),
 .v4-contact-bottom p{font-size:15px}
 .bf-chat>div>p:not(.ddc-label),
 .bf-dashboard>p{font-size:14px}

 /* Inner pages: intros, text under headings and FAQ answers */
 .bl-copy .ip-copy,
 .pw-next-chapter .ip-copy,
 .ct-guide>.ip-copy,
 .so-care .ip-copy,
 .so-chat .ip-copy,
 .sp-close-copy .ip-copy,
 .ac-transfer-copy>.ip-copy,
 .ac-connect-copy .ip-copy,
 .ac-demo-copy>.ip-copy,
 .ac-worlds-heading .ip-copy,
 .ip-faq details>p,
 .ip-faq details>div,
 .bp-faq-list>.ip-faq>p,
 .ws-process-list p,
 .ws-build-option>p:not(.ip-eyebrow):not(.ws-option-detail),
 .ws-hosting-choice>div>p:not(.ip-eyebrow),
 .ws-brand-element>div>p:not(.ip-eyebrow),
 .ws-seo-rows p,
 .lp-services-grid p,
 .ch-integration-list article>p:last-child,
 .ch-beacon-options article>p:not(.ip-eyebrow),
 .bp-chat-needs-list p,
 .bp-transfer-steps p,
 .bp-setup-list article>p:not(.ddc-label),
 .hp-plugin-details p,
 .so-support-list p,
 .dx-timeline p:not(.dx-stage-label),
 .dx-services-question>p:not(.ip-eyebrow),
 .dx-brand-notes>p,
 .dx-chat-outcome>p,
 .ac-scenario-heading>p,
 .pw-work-note p{font-size:16px}
 .dx-care-book p:not(.dx-care-note):not(.ip-eyebrow),
 .dx-hosting-route p,
 .dx-contact-next p,
 .dx-callout p,
 .hp-addon-copy>p:last-child,
 .bl-points li,
 .ac-aftercall p:not(.ddc-label),
 .ac-outcomes p,
 .ac-knowledge>p:last-of-type,
 .ac-worlds-close>p{font-size:15px}

 /* Articles and legal pages */
 .ddc-prose{font-size:16px}
 .ddc-case-article .ddc-prose{font-size:17px}
 .ddc-gallery-intro-copy{font-size:16px}
 .ddc-build-cta>p{font-size:14px}
}
@media(min-width:1600px){
 .hy-intro{font-size:17px;max-width:530px}
}