/* Pattern library: editorial sections shared across templates (brief 2.12.1).
   Pinned and heavy home components live in pinned.css, explorer.css and
   hero-home.css, loaded only where used. Mobile below 760px throughout. */

/* Section heads ------------------------------------------------------------ */
.dc-section-head{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-10)}
.dc-section-head .dc-h2{max-width:20em}
.dc-section-head__lead{max-width:46ch;font-size:16px}
.dc-section-head__link{margin-top:var(--space-1)}
.dc-section-head__link a,.dc-link-arrow{font:500 14px/1.4 var(--font-body);text-decoration:none}
.is-style-dc-ink .dc-link-arrow{color:var(--dc-signal-blue)}
.is-style-dc-ink .dc-link-arrow:hover{color:var(--dc-paper)}
@media (min-width:1100px){.dc-section-head:has(.dc-section-head__link){flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end}.dc-section-head:has(.dc-section-head__link)>.dc-eyebrow{flex-basis:100%}}

/* Shared media placeholders (preview only; real images replace them) ------ */
.is-empty{background:var(--dc-stone);display:grid;place-items:center;min-height:200px}
.is-style-dc-ink .is-empty{background:var(--dc-ink-2)}
.dc-media__ph{font:500 11px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dc-graphite)}
.is-style-dc-ink .dc-media__ph{color:var(--dc-silver)}

/* hero-page and hero-page--aside ------------------------------------------ */
.dc-hero-page{padding-top:var(--hero-top);padding-bottom:var(--space-12)}
.dc-hero-page .dc-breadcrumb{margin-bottom:28px}
.dc-hero-page__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-8);margin-top:clamp(28px,5vh,56px);padding-top:28px;border-top:var(--rule);align-items:start}
.dc-hero-page__main{grid-column:1/span 8;display:flex;flex-direction:column;gap:var(--space-5)}
.dc-hero-page__grid.has-aside .dc-hero-page__main{grid-column:1/span 7}
.dc-hero-page__aside{grid-column:9/span 4}
.dc-hero-page__title,.wp-block-heading.dc-hero-page__title{font-family:var(--font-display);font-weight:800;font-size:var(--text-section);line-height:1.05;letter-spacing:-.025em;max-width:18em}
.dc-hero-page__lead{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--dc-graphite);max-width:52ch}
.dc-hero-page__proof a{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--dc-ink);text-decoration:none}
.dc-hero-page__proof a::before{content:'';width:3px;height:18px;background:var(--dc-blue)}
.dc-hero-page__proof a:hover{color:var(--dc-blue)}
.dc-hero-page__body{margin-top:clamp(28px,5vh,56px);padding-top:28px;border-top:var(--rule);display:flex;flex-direction:column;gap:var(--space-4)}
@media (max-width:1099px){.dc-hero-page__grid.has-aside .dc-hero-page__main{grid-column:1/span 7}.dc-hero-page__aside{grid-column:8/span 5}}
@media (max-width:759px){
	.dc-hero-page__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
	.dc-hero-page__main,.dc-hero-page__grid.has-aside .dc-hero-page__main,.dc-hero-page__aside{grid-column:1/-1}
}

/* At a glance (Ink aside) ------------------------------------------------- */
.dc-glance{background:var(--dc-ink);color:var(--dc-paper);padding:var(--space-6)}
.dc-glance__head{margin:0 0 6px;font:500 11px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dc-silver)}
.dc-glance dl{margin:0}
.dc-glance__row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--dc-ink-3);font-size:14px;line-height:1.5}
.dc-glance dt{color:var(--dc-silver)}
.dc-glance dd{margin:0}

/* hero-case (Ink) ---------------------------------------------------------- */
.dc-hero-case{padding-top:var(--hero-top)}
.dc-hero-case .dc-lockup{margin-top:32px}
.dc-lockup.is-inverted .dc-lockup__break{flex-basis:100%}
.dc-lockup.is-inverted .dc-lockup__word{font-size:.42em;letter-spacing:.3em;margin-top:.08em}
.dc-hero-case__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-8);margin-top:48px;padding-top:28px;border-top:1px solid var(--dc-ink-3);align-items:start}
.dc-hero-case__main{grid-column:1/span 6;display:flex;flex-direction:column;gap:var(--space-4)}
.dc-hero-case .dc-facts{grid-column:8/span 5}
.dc-hero-case__summary{font-size:clamp(18px,1.6vw,23px);line-height:1.5}
.dc-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0}
.dc-tags a{height:30px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--dc-ink-3);color:var(--dc-paper);font-size:12px;text-decoration:none}
.dc-tags a:hover{border-color:var(--dc-signal-blue);color:var(--dc-paper)}
.dc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.dc-fact{border-top:1px solid var(--dc-signal-blue);padding-top:14px}
.dc-fact__v{font-family:var(--font-display);font-weight:900;font-size:clamp(26px,3vw,48px);line-height:1;letter-spacing:-.035em}
.dc-fact__l{margin-top:8px;font-size:13px;line-height:1.4;color:var(--dc-silver)}
.dc-facts--paper .dc-fact{border-top-color:var(--dc-stone)}
.dc-facts--paper .dc-fact__v{font-size:clamp(24px,2.4vw,36px)}
.dc-facts--paper .dc-fact__l{color:var(--dc-graphite)}
@media (max-width:759px){
	.dc-hero-case__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
	.dc-hero-case__main,.dc-hero-case .dc-facts{grid-column:1/-1}
	.dc-facts{grid-template-columns:1fr 1fr 1fr;gap:12px}
}

/* hero-utility and answer-block --------------------------------------------- */
.dc-hero-utility{padding-top:var(--hero-top);padding-bottom:var(--space-10)}
.dc-hero-utility .dc-breadcrumb{margin-bottom:var(--space-8)}
.dc-hero-utility .dc-eyebrow{margin-bottom:var(--space-3)}
.dc-hero-utility__title,.wp-block-heading.dc-hero-utility__title{font-size:var(--text-section);line-height:1.05;letter-spacing:-.025em;margin-bottom:var(--space-3)}
.dc-answer-block{padding-block:0 var(--space-12)}
.dc-section.dc-answer-block{border-top:0}
.dc-answer{font-size:var(--text-lead);line-height:1.45;max-width:60ch;text-wrap:pretty}

/* Route rows built from groups (stretched link) ----------------------------- */
.dc-rows>.wp-block-group{border-bottom:var(--rule);margin:0}
.dc-row--link{position:relative;overflow:clip}
.dc-row--link .dc-row__meta{grid-column:1}
.dc-row--link .dc-row__title{grid-column:2}
.dc-row--link .dc-row__aside{grid-column:3}
.dc-row--link::after{content:'→';grid-column:4;grid-row:1;justify-self:end;font-size:20px;color:var(--dc-blue);transition:transform 320ms var(--ease-out)}
/* The stretched link. QA cycle 4: the title always carries a transform (none of it visible at rest), so it is the
   link layer's containing block in every state and the hover or focus indent below never resizes that layer (a
   transform arriving only on hover made the layer shrink to the title, a layout shift, and left the rest of the
   row unclickable). The layer is drawn oversize and the row clips it, so the whole row stays the link; the title
   sits above the cells that move on hover so they never cover it. */
.dc-row--link>.dc-row__title{position:relative;z-index:1;transform:translateX(0)}
.dc-row--link .dc-row__title a::after{content:'';position:absolute;inset:-100vh -100vw}
/* QA cycle 4: the row's 16px indent on hover and focus is drawn by transform (the cells move in, the row's box never changes), so pointing at a row moves no layout. */
.dc-row--link:hover,.dc-row--link:focus-within{background:var(--dc-white)}
.dc-row--link:hover>.dc-row__meta,.dc-row--link:hover>.dc-row__title,.dc-row--link:focus-within>.dc-row__meta,.dc-row--link:focus-within>.dc-row__title{transform:translateX(var(--space-4))}
.dc-row--link:hover>.dc-row__aside,.dc-row--link:focus-within>.dc-row__aside{transform:translateX(calc(-1 * var(--space-4)))}
.dc-row--link:focus-within::after{transform:translateX(calc(-1 * var(--space-4)))}
.dc-row--link:hover::after{transform:translateX(calc(6px - var(--space-4)))}
.dc-row--link .dc-row__title a:focus-visible{outline:none}
.dc-row--link:focus-within{outline:var(--focus-ring);outline-offset:2px}
@media (max-width:759px){.dc-row--link .dc-row__title{grid-column:1}.dc-row--link .dc-row__aside{grid-column:1}.dc-row--link::after{grid-column:2;grid-row:2}}
.dc-insight-rows{border-top:1px solid var(--dc-ink)}
.dc-insight-rows .dc-row__meta{color:var(--dc-blue)}
.dc-insight-rows .dc-row__title{font-weight:700;font-size:clamp(19px,1.7vw,24px);line-height:1.3;letter-spacing:-.01em}

/* Case rows (More work) ------------------------------------------------------- */
.dc-case-rows__list{border-bottom:var(--rule)}
.dc-case-row{border-top:var(--rule);padding:var(--space-6) 0}
.dc-case-row__title,.wp-block-heading.dc-case-row__title{font-size:clamp(24px,2.9vw,44px);line-height:1.08;letter-spacing:-.025em}
.dc-case-row__tags{margin-top:6px;font-size:14px;color:var(--dc-graphite)}
.dc-case-row__panel{display:grid;gap:var(--space-6);padding-top:var(--space-6)}
.dc-case-row__story .dc-label{margin-top:var(--space-4)}
.dc-case-row__story .dc-label:first-child{margin-top:0}
.dc-case-row__story p:not(.dc-label){font-size:15px;line-height:1.6;margin-top:5px;max-width:62ch}
.dc-case-rows.is-enhanced .dc-case-row{padding:0}
.dc-case-row__name{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.9vw,44px);line-height:1.08;letter-spacing:-.025em}
.dc-case-row__tagcol{font:400 14px/1.5 var(--font-body);color:var(--dc-graphite)}
.dc-case-row__toggle{font:inherit;width:100%;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,280px) 44px;gap:var(--space-5);align-items:center;padding:28px 0;background:transparent;border:0;text-align:left;color:var(--dc-ink);cursor:pointer}
/* QA cycle 4: the 12px hover indent is drawn by transform (the cells move in; the toggle's box never changes). */
.dc-case-row__toggle>.dc-case-row__n,.dc-case-row__toggle>.dc-case-row__name,.dc-case-row__toggle>.dc-case-row__tagcol{transition:transform 480ms var(--ease-out)}
.dc-case-row__toggle:hover>.dc-case-row__n,.dc-case-row__toggle:hover>.dc-case-row__name{transform:translateX(var(--space-3))}
.dc-case-row__toggle:hover>.dc-case-row__tagcol{transform:translateX(calc(-1 * var(--space-3)))}
.dc-case-row__toggle:hover>.dc-case-row__sign{transform:translateX(calc(-1 * var(--space-3)))}
.dc-case-row__toggle[aria-expanded=true]:hover>.dc-case-row__sign{transform:translateX(calc(-1 * var(--space-3))) rotate(45deg)}
.dc-case-row__n{font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--dc-graphite)}
.dc-case-row__sign{justify-self:end;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--dc-stone);font:300 22px/1 var(--font-body);transition:transform 480ms var(--ease-out),background-color 200ms,color 200ms}
.dc-case-row__toggle[aria-expanded=true] .dc-case-row__sign{transform:rotate(45deg);background:var(--dc-ink);color:var(--dc-paper);border-color:var(--dc-ink)}
/* QA cycle 4: a row opens or closes in one frame, on the click itself, and the
   opened row arrives over the same 680ms with opacity and transform only (no
   animated height), its image opening from a slash (clip-path). */
.dc-case-rows.is-enhanced .dc-case-row__wrap{display:grid;grid-template-rows:0fr}
.dc-case-rows.is-enhanced .dc-case-row__wrap.is-open{grid-template-rows:1fr}
.dc-case-rows.is-enhanced .dc-case-row__clip{overflow:hidden;min-height:0}
/* Collapsed rows leave the tab order and the accessibility tree (accessibility B3). */
.dc-case-rows.is-enhanced .dc-case-row__wrap:not(.is-open) .dc-case-row__clip{visibility:hidden}
.dc-case-rows.is-enhanced .dc-case-row__wrap.is-open .dc-case-row__clip{visibility:visible}
.dc-case-rows.is-enhanced .dc-case-row__wrap.is-open .dc-case-row__panel{animation:dc-open 680ms var(--ease-out) both}
.dc-case-rows.is-enhanced .dc-case-row__wrap.is-open .dc-case-row__media{animation:dc-slash-open 680ms var(--ease-in-out) both}
@keyframes dc-slash-open{from{clip-path:polygon(56% 0%,60% 0%,44% 100%,40% 100%)}to{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}}
@media (prefers-reduced-motion:reduce){.dc-case-rows.is-enhanced .dc-case-row__wrap.is-open .dc-case-row__panel,.dc-case-rows.is-enhanced .dc-case-row__wrap.is-open .dc-case-row__media{animation:none}}
.dc-case-rows.is-enhanced .dc-case-row__panel{padding:4px 0 48px}
.dc-float-card{position:fixed;left:0;top:0;z-index:var(--z-float);pointer-events:none;width:264px;background:var(--dc-ink);color:var(--dc-paper);padding:18px;opacity:0;transition:opacity 220ms;will-change:transform}
.dc-float-card.is-on{opacity:1}
.dc-float-card p{margin:0;font-size:13px;line-height:1.5;color:var(--dc-silver)}
.dc-float-card p:first-child{font:500 11px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.dc-float-card p+p{margin-top:8px;color:var(--dc-paper)}
@media (max-width:759px){.dc-case-row__toggle{grid-template-columns:28px minmax(0,1fr) 44px}.dc-case-row__toggle .dc-case-row__tagcol{display:none}}
/* QA cycle 4: the rows are drawn closed from first paint whenever JavaScript
   runs: each title is laid out exactly as the toggle cases.js builds around
   it (the number from a CSS counter, the title, the services column left for
   the script to fill, the 44px "+" box), and the tags and story wait hidden,
   so building the toggles moves nothing. Without JavaScript every row reads
   in full. */
html.dc-js .dc-case-rows__list{counter-reset:dc-case}
html.dc-js .dc-case-rows:not(.is-enhanced) .dc-case-row{padding:0;counter-increment:dc-case}
html.dc-js .dc-case-rows:not(.is-enhanced) .dc-case-row>:not(.dc-case-row__title){display:none}
html.dc-js .dc-case-rows:not(.is-enhanced) .dc-case-row__title{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,280px) 44px;gap:var(--space-5);align-items:center;padding:28px 0;color:var(--dc-ink)}
html.dc-js .dc-case-rows:not(.is-enhanced) .dc-case-row__title::before{content:counter(dc-case,decimal-leading-zero);font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--dc-graphite)}
html.dc-js .dc-case-rows:not(.is-enhanced) .dc-case-row__title::after{content:'+';grid-column:4;justify-self:end;box-sizing:border-box;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--dc-stone);font:300 22px/1 var(--font-body)}
@media (max-width:759px){html.dc-js .dc-case-rows:not(.is-enhanced) .dc-case-row__title{grid-template-columns:28px minmax(0,1fr) 44px}html.dc-js .dc-case-rows:not(.is-enhanced) .dc-case-row__title::after{grid-column:3}}

/* Why list ------------------------------------------------------------------- */
.dc-why{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-8)}
.dc-why__head{grid-column:1/span 5;position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:var(--space-4)}
.dc-why__head .dc-muted{font-size:17px;max-width:36ch}
.dc-why__list{grid-column:7/span 6;counter-reset:why}
.dc-why__item{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--space-4);row-gap:10px;padding:32px 0;border-top:var(--rule);counter-increment:why}
.dc-why__item::before{content:counter(why,decimal-leading-zero);grid-row:1/span 3;font:500 13px/1 var(--font-body);color:var(--dc-blue);padding-top:9px}
.dc-why__item>*{grid-column:2}
.dc-why__item .dc-muted{max-width:50ch}
@media (max-width:759px){.dc-why{grid-template-columns:1fr}.dc-why__head,.dc-why__list{grid-column:1;position:static}}

/* Results (conditional) ---------------------------------------------------- */
.dc-results__h{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,5.6vw,92px);line-height:.98;letter-spacing:-.035em;max-width:11em;margin:18px 0 64px}
.dc-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:40px var(--gutter)}
.dc-metric{border-top:1px solid var(--dc-ink-3);padding-top:20px}
.dc-metric__v{font-family:var(--font-display);font-weight:900;font-size:clamp(56px,5.6vw,92px);line-height:1;letter-spacing:-.04em}
.dc-metric__l{margin:14px 0 6px;font-size:16px;line-height:1.5}
.dc-results__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:72px;padding-top:28px;border-top:1px solid var(--dc-ink-3)}

/* Approach steps ---------------------------------------------------------------- */
.dc-steps__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-6)}
.dc-steps__titles{display:flex;flex-direction:column;gap:var(--space-4)}
.dc-steps__lead{font-size:17px;max-width:42ch}
.dc-steps__list{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:36px var(--gutter);margin-top:56px;padding-top:31px}
.dc-steps__list::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(var(--dc-blue),var(--dc-blue)) 0 0/calc(var(--fill,0) * 100%) 100% no-repeat,var(--dc-stone)}
html:not(.dc-js) .dc-steps__list::before{background:var(--dc-blue)}
.dc-step{display:flex;flex-direction:column;gap:10px}
.dc-step__n{font:500 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dc-blue)}
.dc-step__t,.wp-block-heading.dc-step__t{font-size:28px;line-height:1.1;letter-spacing:-.02em}
.dc-step .dc-muted{font-size:15px}
.dc-step__get{font-size:14px;line-height:1.5}
.dc-steps__stack{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--space-6) var(--gutter);align-items:start;margin-top:72px;padding-top:28px;border-top:var(--rule)}
.dc-stack{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;font:500 clamp(16px,1.4vw,20px)/1.5 var(--font-body)}
.dc-stack li{display:flex;align-items:center}
.dc-stack li+li::before{content:'/';color:var(--dc-blue);font-weight:300;padding:0 12px}
@media (max-width:759px){.dc-steps__stack{grid-template-columns:1fr}}

/* Client wall ----------------------------------------------------------------- */
.dc-clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(50%,240px),1fr));gap:1px;background:var(--dc-stone);border:1px solid var(--dc-stone)}
/* Accessibility S7 (QA cycle 4): the cell is at least 120px tall rather than
   exactly 120px, so a name the reader's own wider text spacing (WCAG 1.4.12)
   makes taller grows the cell instead of being cut; the reveal layer sits
   absolutely just below the name layer, the cell's height, so the hover and
   focus slide is unchanged. At normal spacing every cell is 120px, as before. */
.dc-client{position:relative;min-height:120px;overflow:hidden;background:var(--dc-white)}
.dc-client>*{min-height:120px;display:grid;place-items:center;padding:0 var(--space-4);text-align:center;transition:transform 560ms var(--ease-out)}
.dc-client>.dc-client__name{min-height:max(120px,100%)}
.dc-client>.dc-client__reveal{position:absolute;top:100%;left:0;right:0;height:100%;min-height:0}
.dc-client__name{font-family:var(--font-display);font-weight:800;font-size:clamp(18px,1.6vw,24px);line-height:1.15;letter-spacing:-.01em;color:var(--dc-graphite);text-wrap:balance;overflow-wrap:anywhere}
.dc-client__reveal{background:var(--dc-blue);color:#fff;font-size:14px;line-height:1.4}
.dc-client.has-reveal:hover>*,.dc-client.has-reveal:focus-within>*{transform:translateY(-100%)}
/* Keyboard focus is drawn on the cell, inside its bounds: the link slides out of the
   clipped cell with the reveal, so a ring on the link would be cut off with it. The cell
   is its own stacking context with its two layers beneath it, so its outline paints over
   the reveal. White on the Blue reveal (5.17:1), as in every Blue section; Electric Blue
   on a cell without a reveal. Hover and mouse focus are unchanged. */
.dc-client{z-index:0}
.dc-client>*{position:relative;z-index:-1}
.dc-client:has(a:focus-visible){outline:2px solid #fff;outline-offset:-5px}
.dc-client:not(.has-reveal):has(a:focus-visible){outline-color:var(--dc-blue)}
.dc-client:has(a:focus-visible) a:focus-visible{outline:none}
.dc-clients__link{margin-top:var(--space-6)}
@media (prefers-reduced-motion:reduce){.dc-client>*{transition:none}}

/* Testimonial ------------------------------------------------------------------ */
.dc-quote,.wp-block-quote.dc-quote{margin:0;max-width:1000px;padding:0;border:0}
.dc-quote p{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.4vw,52px);line-height:1.15;letter-spacing:-.025em;text-wrap:pretty}
.dc-quote cite{display:flex;gap:14px;margin-top:28px;font:400 15px/1.5 var(--font-body);font-style:normal}
.dc-quote cite::before{content:'';flex:none;width:3px;background:var(--dc-blue)}

/* Final CTA (Blue) -------------------------------------------------------------- */
.dc-final-cta__label{display:block;margin:32px 0 16px;font-size:16px;line-height:1.5}
.dc-final-cta__lockup{width:100%}
.dc-final-cta__field{position:relative;display:block;flex:1 1 0;min-width:0;overflow:hidden}
.dc-final-cta__ph{position:absolute;left:0;top:0;pointer-events:none;transition:opacity var(--dur-micro)}
.dc-final-cta.has-value .dc-final-cta__ph{opacity:0}
.dc-final-cta__input{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid #fff;border-radius:0;outline:none;color:#fff;font:inherit;letter-spacing:inherit;text-transform:uppercase;line-height:1.3;padding:0 0 0 .24em;caret-color:var(--dc-ink)}
.dc-final-cta__input:focus{border-bottom-color:var(--dc-ink)}
.dc-final-cta__input:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.dc-final-cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:48px}
.dc-final-cta__pause{height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;font:500 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
html:not(.dc-js) .dc-final-cta__pause{display:none}
.dc-final .dc-contact-links{margin-top:var(--space-8)}

/* Service index (services hub) ---------------------------------------------------- */
.dc-service-index{padding-top:var(--hero-top)}
.dc-service-index .dc-breadcrumb{margin-bottom:28px}
.dc-service-index__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-6);align-items:end;padding-bottom:32px;border-bottom:var(--rule)}
.dc-service-index__h{grid-column:1/span 7;display:flex;flex-direction:column;gap:var(--space-4)}
.dc-service-index__title,.wp-block-heading.dc-service-index__title{font-weight:900;font-size:clamp(40px,5.6vw,92px);line-height:.98;letter-spacing:-.04em}
.dc-service-index__lead{grid-column:8/span 5;display:flex;flex-direction:column;gap:var(--space-5)}
.dc-service-index__list{margin-top:40px}
.dc-svc-group{margin:28px 0 8px}
.dc-svc{padding:20px 0;border-bottom:var(--rule)}
.dc-svc__name,.wp-block-heading.dc-svc__name{font-weight:900;font-size:clamp(30px,4vw,60px);line-height:1.04;letter-spacing:-.035em}
.dc-svc__name a{color:inherit;text-decoration:none}
.dc-svc__line{margin-top:8px;font-size:16px;color:var(--dc-graphite);max-width:60ch}
.dc-svc__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dc-chip-static{height:30px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--dc-stone);background:var(--dc-white);font-size:12px}
.dc-svc__caps{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;font-size:14px}
.dc-svc__links{margin-top:12px;display:flex;flex-wrap:wrap;gap:12px 20px}
.dc-service-index.is-enhanced .dc-service-index__list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.dc-service-index.is-enhanced .dc-svc-detail{grid-column:1/span 5;grid-row:1/span 20;position:sticky;top:104px;align-self:start}
.dc-service-index.is-enhanced .dc-svc,.dc-service-index.is-enhanced .dc-svc-group{grid-column:7/span 6}
.dc-service-index.is-enhanced .dc-svc>:not(.dc-svc__name){display:none}
.dc-service-index.is-enhanced .dc-svc{padding:14px 0;transition:color 240ms}
.dc-service-index.is-enhanced .dc-svc__name a{display:flex;align-items:center;gap:14px;color:var(--dc-graphite)}
/* QA cycle 4: the slash marker grows in front of the active row's name by
   transform only. It takes no width (a .16em bar with a -.16em margin), so the
   name's box never moves; the name is drawn .16em to the right while active,
   by transform, exactly where the growing marker used to push it. */
.dc-service-index.is-enhanced .dc-svc__name a{transition:color 240ms,transform 420ms var(--ease-out)}
.dc-service-index.is-enhanced .dc-svc__name a::before{content:'';flex:none;width:.16em;margin-right:-.16em;height:.7em;background:var(--dc-blue);transform-origin:0 50%;transform:skewX(-18deg) scaleX(0);transition:transform 420ms var(--ease-out)}
.dc-service-index.is-enhanced .dc-svc.is-active .dc-svc__name a{color:var(--dc-ink);transform:translateX(.16em)}
.dc-service-index.is-enhanced .dc-svc.is-active .dc-svc__name a::before{transform:translateX(-.16em) skewX(-18deg) scaleX(1)}
/* SEO re-test D9: at 760px and wider the two-column explorer layout is drawn at
   first paint whenever JavaScript runs (html.dc-js is set in the head), so the
   module only fills the empty left column and moves nothing. The first row is
   drawn active, as the module will make it. .is-stacked marks a page that loaded
   below 760px (tap-to-open rows), which keeps its stacked layout if widened.
   Without JavaScript every row reads in full. */
@media (min-width:760px){
	html.dc-js .dc-service-index:not(.is-stacked) .dc-service-index__list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
	html.dc-js .dc-service-index:not(.is-stacked) .dc-svc,html.dc-js .dc-service-index:not(.is-stacked) .dc-svc-group{grid-column:7/span 6}
	html.dc-js .dc-service-index:not(.is-stacked) .dc-svc>:not(.dc-svc__name){display:none}
	html.dc-js .dc-service-index:not(.is-stacked) .dc-svc{padding:14px 0;transition:color 240ms}
	html.dc-js .dc-service-index:not(.is-stacked) .dc-svc__name a{display:flex;align-items:center;gap:14px;color:var(--dc-graphite)}
	html.dc-js .dc-service-index:not(.is-stacked) .dc-svc__name a{transition:color 240ms,transform 420ms var(--ease-out)}
	html.dc-js .dc-service-index:not(.is-stacked) .dc-svc__name a::before{content:'';flex:none;width:.16em;margin-right:-.16em;height:.7em;background:var(--dc-blue);transform-origin:0 50%;transform:skewX(-18deg) scaleX(0);transition:transform 420ms var(--ease-out)}
	html.dc-js .dc-service-index:not(.is-enhanced):not(.is-stacked) .dc-service-index__list>.dc-svc:first-of-type .dc-svc__name a{color:var(--dc-ink);transform:translateX(.16em)}
	html.dc-js .dc-service-index:not(.is-enhanced):not(.is-stacked) .dc-service-index__list>.dc-svc:first-of-type .dc-svc__name a::before{transform:translateX(-.16em) skewX(-18deg) scaleX(1)}
}
.dc-svc-detail .dc-lockup{--lk-s:min(7.4vw,112px);margin-bottom:var(--space-5)}
/* Containers for lockups sized to fit their column (dc-motion.js fitLockup, QA cycle 4). */
.dc-svc-detail,.dc-mix__panel{container-type:inline-size}
/* QA cycle 4: the services index and explorer lockups are drawn at the size fitLockup gives them (their widest
   word, with the slash and the word mask's overhang, is 5.5455 DC sizes wide) from the frame they appear in,
   so the script's measurement, taken once the web fonts are in, changes nothing. */
.dc-svc-detail .dc-lockup,.dc-explorer__info>.dc-explorer__lock.dc-lockup{flex-wrap:nowrap;font-size:min(var(--lk-s), calc(98cqi / 5.5455))}
.dc-svc-detail__body>*+*{margin-top:var(--space-4)}
.dc-svc-detail__stack{display:grid}
.dc-svc-detail__stack>.dc-svc-detail__body{grid-area:1/1;visibility:hidden}
.dc-svc-detail__stack>.dc-svc-detail__body.is-current{visibility:visible}
@media (max-width:759px){
	.dc-service-index__top{grid-template-columns:1fr}
	.dc-service-index__h,.dc-service-index__lead{grid-column:1}
	.dc-svc__caps{grid-template-columns:1fr}
	/* QA cycle 4: below 760px the tap-to-open rows are drawn from first paint
	   whenever JavaScript runs: each row shows its name and line, the rest waits
	   hidden, and the space of its 48px "+" button (12px above it) is kept, so
	   service-index.js only adds the buttons into that space. Without JavaScript
	   every row reads in full. */
	html.dc-js .dc-service-index:not(.is-stacked) .dc-svc>:not(.dc-svc__name):not(.dc-svc__line){display:none}
	html.dc-js .dc-service-index:not(.is-stacked) .dc-svc:has(>:not(.dc-svc__name):not(.dc-svc__line))::after{content:'';display:block;height:60px}
	.dc-service-index.is-stacked .dc-svc>.dc-chip{display:flex;width:fit-content;margin-top:12px}
}

/* Find your mix (Ink) --------------------------------------------------------------- */
.dc-mix__lead{margin:8px 0 40px;font-size:17px;max-width:48ch}
.dc-mix__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px}
.dc-mix-tile{font:inherit;color:var(--dc-paper);text-align:left;width:100%;position:relative;min-height:92px;padding:16px 44px 16px 18px;border:1px solid var(--dc-ink-3);background:var(--dc-ink-2);display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.dc-mix-tile__label{font:600 16px/1.3 var(--font-body)}
.dc-mix-tile__hint{font-size:12px;color:var(--dc-silver)}
.dc-mix__plans{margin-top:var(--space-8);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--space-6)}
.dc-mix-plan__why{font-size:13px;color:var(--dc-silver);margin:4px 0 8px}
.dc-mix__empty,.dc-mix__quiet{margin-top:var(--space-5)}
.dc-mix.is-enhanced .dc-mix__layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-6);align-items:start}
.dc-mix.is-enhanced .dc-mix__tiles{grid-column:1/span 7}
.dc-mix.is-enhanced .dc-mix__panel{grid-column:8/span 5;border:1px solid var(--dc-ink-3);background:var(--dc-panel);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:var(--space-5)}
.dc-mix.is-enhanced .dc-mix__plans{display:none}
.dc-mix-tile[role=button]{cursor:pointer;transition:background-color 220ms,border-color 220ms}
.dc-mix-tile[role=button]:hover{border-color:var(--dc-signal-blue)}
.dc-mix-tile[aria-pressed=true]{background:var(--dc-blue);border-color:var(--dc-blue)}
.dc-mix-tile[aria-pressed=true] .dc-mix-tile__hint{color:#fff}
.dc-mix-tile::after{content:'';position:absolute;top:16px;right:18px;width:5px;height:20px;background:#fff;transform:skewX(-18deg) scaleY(0);transform-origin:50% 100%;transition:transform 320ms var(--ease-out)}
.dc-mix-tile[aria-pressed=true]::after{transform:skewX(-18deg) scaleY(1)}
.dc-mix__recs{list-style:none;margin:0;padding:0;border-top:1px solid var(--dc-ink-3)}
.dc-mix__recs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--dc-ink-3)}
.dc-mix__recs strong{font:600 17px/1.3 var(--font-body)}
.dc-mix__recs span{font-size:13px;color:var(--dc-silver)}
.dc-mix__recs .dc-mix__why{grid-column:1/-1}
.dc-mix__restart{height:44px;background:transparent;border:0;color:var(--dc-silver);font:500 14px var(--font-body);text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.dc-mix.is-enhanced .dc-mix__panel{min-height:var(--mix-h)}
@media (max-width:759px){.dc-mix.is-enhanced .dc-mix__tiles,.dc-mix.is-enhanced .dc-mix__panel{grid-column:1/-1}.dc-mix.is-enhanced .dc-mix__layout{grid-template-columns:1fr}}
/* QA cycle 4: Find your mix is drawn from first paint whenever JavaScript
   runs: the plans, the panel heading, the empty line, the call to action and
   the Start again label (all hidden or moved into the panel by mix.js) wait
   hidden, the tiles take the panel's neighbouring column, and the panel's
   space is kept beside them (below them on phones). The panel's empty state
   is given a fixed height (--mix-h: padding, border, its DC / YOUR MIX lockup
   at 1.08em, the heading and two lines of the empty text, with the gaps), the
   same in both states, so building it moves nothing. The lockup is sized for
   the widest pair of service words it can show on one line ("OUTBOUND + PAID
   SOCIAL", 7.79 times the DC size with the mask), as the Blue band is, so a
   choice never wraps it. The empty text runs to one, two or three lines
   depending on the column (--mix-e, by the frame's width, measured with the
   site's fonts), so the fixed height is the panel's own natural height at
   every width and adds no space. Without JavaScript every plan reads in full. */
.dc-mix>.dc-frame{container-type:inline-size}
.dc-mix__tiles,.dc-mix__panel{--mix-e:51.2px;--mix-p:clamp(20px,2.4vw,32px);--mix-w:calc((100cqi - 11 * var(--gutter)) * 5 / 12 + 4 * var(--gutter));--mix-f:min(clamp(44px,4.4vw,68px), calc(.98 * (var(--mix-w) - 2 * var(--mix-p) - 2px) / 7.79));--mix-h:calc(2 * var(--mix-p) + 1.08 * var(--mix-f) + 106.8px + var(--mix-e))}
@media (max-width:759px){
	.dc-mix__tiles,.dc-mix__panel{--mix-w:100cqi}
	@container (max-width:280.5px){.dc-mix__tiles,.dc-mix__panel{--mix-e:76.8px}}
	@container (min-width:505.7px){.dc-mix__tiles,.dc-mix__panel{--mix-e:25.6px}}
}
@media (min-width:760px){
	@container (max-width:700.9px){.dc-mix__tiles,.dc-mix__panel{--mix-e:76.8px}}
	@container (min-width:1299.76px){.dc-mix__tiles,.dc-mix__panel{--mix-e:25.6px}}
}
.dc-mix__lock.dc-lockup{font-size:min(clamp(44px,4.4vw,68px), calc(98cqi / 7.79));height:1.08em;flex-wrap:nowrap}
html.dc-js .dc-mix:not(.is-enhanced) .dc-mix__plans,html.dc-js .dc-mix:not(.is-enhanced) .dc-mix__panel-h,html.dc-js .dc-mix:not(.is-enhanced) .dc-mix__empty,html.dc-js .dc-mix:not(.is-enhanced) .dc-mix__cta,html.dc-js .dc-mix:not(.is-enhanced) .dc-mix__restart-label{display:none}
html.dc-js .dc-mix:not(.is-enhanced) .dc-mix__tiles{width:calc((100% - 11 * var(--gutter)) * 7 / 12 + 6 * var(--gutter));min-height:var(--mix-h)}
@media (max-width:759px){html.dc-js .dc-mix:not(.is-enhanced) .dc-mix__tiles{width:auto;min-height:0;padding-bottom:calc(var(--space-6) + var(--mix-h))}}

/* Three columns and price grid (hairline) ----------------------------------------------- */
.dc-cols,.dc-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;background:var(--dc-stone);border:1px solid var(--dc-stone)}
.dc-col,.dc-price-cell{background:var(--dc-paper);padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;gap:18px;transition:background-color 240ms}
.dc-col:hover,.dc-price-cell:hover{background:var(--dc-white)}
.dc-col__n{font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--dc-blue)}
.dc-col__foot{margin-top:auto;padding-top:8px;font-size:13px}
.dc-price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.dc-price-cell__name,.wp-block-heading.dc-price-cell__name{font-size:var(--text-h3)}
.dc-price-cell__price{font-family:var(--font-display);font-weight:900;font-size:var(--text-h3);line-height:1.15;letter-spacing:-.02em}
.dc-price-cell__term{font-size:14px;color:var(--dc-graphite)}
.dc-price-cell__links{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 16px}
.dc-price-addon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding:clamp(24px,2.4vw,36px);border:1px solid var(--dc-stone);border-top:0;background:var(--dc-paper)}
.dc-price-addon .dc-muted{grid-column:1/-1}
@media (max-width:1099px){.dc-price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759px){.dc-price-grid{grid-template-columns:1fr}.dc-price-addon{grid-template-columns:1fr}}

/* Problem select ------------------------------------------------------------------------ */
.dc-problems__h{margin:16px 0 40px}
.dc-problems__list{border-top:1px solid var(--dc-ink)}
.dc-problem{padding:24px 0;border-bottom:var(--rule)}
.dc-problem__q,.wp-block-heading.dc-problem__q{font-size:clamp(20px,1.9vw,28px);line-height:1.2;letter-spacing:-.015em}
.dc-problem__panel{margin-top:var(--space-4);display:grid;gap:10px}
.dc-problem__panel .dc-label{margin-top:var(--space-2)}
.dc-problem__label-blue{color:var(--dc-blue)}
.dc-problem__change{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.02em}
/* QA cycle 4: with JavaScript the selectable layout is drawn from first paint
   (html.dc-js is set in the head), so problems.js adds behaviour, not layout.
   The list is a 12-column grid: each question takes the left six columns and
   every answer panel takes the right six, all stacked in one area that spans
   the questions' rows plus a flexible last row, so the area is as tall as the
   tallest panel and choosing another question (by hover too) never changes
   any height. Only the chosen panel is visible. Before the script runs, each
   question is drawn exactly as its button will be (the number from a CSS
   counter) with the first one chosen. Without JavaScript every question and
   answer reads in full, one after another. */
html.dc-js .dc-problems__list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);border-top:0;counter-reset:dc-problem}
html.dc-js .dc-problems__list:has(>.dc-problem:nth-child(2):last-child){grid-template-rows:auto auto 1fr}
html.dc-js .dc-problems__list:has(>.dc-problem:nth-child(3):last-child){grid-template-rows:auto auto auto 1fr}
html.dc-js .dc-problems__list:has(>.dc-problem:nth-child(4):last-child){grid-template-rows:auto auto auto auto 1fr}
html.dc-js .dc-problems__list:has(>.dc-problem:nth-child(5):last-child){grid-template-rows:auto auto auto auto auto 1fr}
html.dc-js .dc-problem{display:contents}
html.dc-js .dc-problem__q{grid-column:1/span 6;margin:0;counter-increment:dc-problem}
html.dc-js .dc-problem:first-child>.dc-problem__q{border-top:1px solid var(--dc-ink)}
html.dc-js .dc-problem__panel{grid-column:7/span 6;grid-row:1/-1;margin:0;align-content:start;background:var(--dc-white);border:var(--rule);padding:clamp(24px,2.6vw,40px);visibility:hidden}
html.dc-js .dc-problem__panel.is-shown,html.dc-js .dc-problems:not(.is-enhanced) .dc-problem:first-child>.dc-problem__panel{visibility:visible}
html.dc-js .dc-problems:not(.is-enhanced) .dc-problem__q{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:baseline;padding:24px 28px 24px 0;border-bottom:var(--rule);color:var(--dc-graphite)}
html.dc-js .dc-problems:not(.is-enhanced) .dc-problem__q::before{content:counter(dc-problem,decimal-leading-zero);font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--dc-graphite)}
html.dc-js .dc-problems:not(.is-enhanced) .dc-problem:first-child>.dc-problem__q{color:var(--dc-ink)}
html.dc-js .dc-problems:not(.is-enhanced) .dc-problem:first-child>.dc-problem__q::before{color:var(--dc-blue)}
.dc-problem__btn{position:relative;width:100%;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:baseline;text-align:left;padding:24px 28px 24px 0;border:0;border-bottom:var(--rule);background:transparent;color:var(--dc-graphite);cursor:pointer;transition:color 240ms}
.dc-problem__btn:hover,.dc-problem__btn[aria-pressed=true]{color:var(--dc-ink)}
/* QA cycle 4: the selected row's 12px indent is drawn by transform (hover selects, and pointing is not input to the browser's layout-shift rule). */
.dc-problem__btn>.dc-problem__n,.dc-problem__btn>.dc-problem__text{transition:transform 420ms var(--ease-out)}
.dc-problem__btn[aria-pressed=true]>.dc-problem__n,.dc-problem__btn[aria-pressed=true]>.dc-problem__text{transform:translateX(12px)}
.dc-problem__btn .dc-problem__n{font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--dc-graphite)}
.dc-problem__btn[aria-pressed=true] .dc-problem__n{color:var(--dc-blue)}
.dc-problem__btn .dc-problem__text{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,1.9vw,28px);line-height:1.2;letter-spacing:-.015em}
.dc-problem__btn::after{content:'';position:absolute;right:0;top:50%;width:5px;height:24px;margin-top:-12px;background:var(--dc-blue);transform:skewX(-18deg) scaleY(0);transition:transform 320ms var(--ease-out)}
.dc-problem__btn[aria-pressed=true]::after{transform:skewX(-18deg) scaleY(1)}
@media (max-width:759px){
	html.dc-js .dc-problems__list{grid-template-columns:minmax(0,1fr)}
	html.dc-js .dc-problem__q{grid-column:1}
	html.dc-js .dc-problem__panel{grid-column:1;grid-row:-2/-1;margin-top:var(--space-6)}
}

/* Before and after slider (Ink) ------------------------------------------------------------ */
.dc-slider__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-5);margin-bottom:40px}
.dc-slider__head .dc-section-head{margin:0}
.dc-slider__head .dc-muted{max-width:40ch}
.dc-slider{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.dc-slider__before,.dc-slider__after{padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6);min-height:360px}
.dc-slider__before{background:var(--dc-ink-2);color:var(--dc-silver)}
.dc-slider__after{background:var(--dc-blue);color:#fff}
.dc-ba__l{font-size:13px}
.dc-ba__v{font-family:var(--font-display);font-weight:900;font-size:clamp(32px,4vw,60px);line-height:1;letter-spacing:-.03em}
.dc-ba__bar{display:block;height:6px;margin-top:6px;background:currentColor}
.dc-ba__rows{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5)}
/* Overlaid slider: the before panel sets the height from its own content and the after panel lies exactly over it, so nothing is cut off at any width. */
.dc-slider.is-enhanced,html.dc-js .dc-slider{display:block;position:relative;overflow:hidden;touch-action:pan-y;user-select:none}
.dc-slider.is-enhanced .dc-slider__before,html.dc-js .dc-slider__before{position:relative}
.dc-slider.is-enhanced .dc-slider__after,html.dc-js .dc-slider__after{position:absolute;inset:0}
.dc-slider.is-enhanced .dc-slider__after>.dc-label,html.dc-js .dc-slider__after>.dc-label{text-align:right}
/* The slider's overlaid layout is drawn from first paint whenever JavaScript runs, and each row that will get a proportional bar (dc-ba__row--bar, printed by the block) keeps its 12px from first paint, so slider.js moves nothing. The after panel starts clipped at 86%, as the slider does. */
html.dc-js .dc-slider:not(.is-enhanced) .dc-slider__after{clip-path:polygon(86% 0%,100% 0%,100% 100%,86% 100%)}
html.dc-js .dc-slider:not(.is-enhanced) .dc-ba__row--bar::after{content:'';display:block;height:12px}
/* With the two homepage captures (dc-slider--shots): on wider screens the capture sits left and the measures right, in the same place in both panels, so dragging the slash compares capture with capture and figure with figure. Below 760px the slider compares the captures only, its two labels move to the legend above it (one label per side, so they never meet at the slash), and the plain list beneath carries every figure. Without JavaScript the panels stack and keep their own labels. */
.dc-slider__legend{display:none}
@media (min-width:760px){
	.dc-slider--shots.is-enhanced .dc-slider__before,.dc-slider--shots.is-enhanced .dc-slider__after,html.dc-js .dc-slider--shots .dc-slider__before,html.dc-js .dc-slider--shots .dc-slider__after{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,3vw,48px);row-gap:var(--space-6);align-items:stretch}
	.dc-slider--shots.is-enhanced .dc-label,html.dc-js .dc-slider--shots .dc-label{grid-column:1/-1;grid-row:1}
	.dc-slider--shots.is-enhanced .dc-slider__img,html.dc-js .dc-slider--shots .dc-slider__img{grid-column:1;grid-row:2;align-self:start}
	.dc-slider--shots.is-enhanced .dc-ba__rows,html.dc-js .dc-slider--shots .dc-ba__rows{grid-column:2;grid-row:2}
}
@media (max-width:759px){
	.dc-slider--shots.is-enhanced .dc-slider__before,.dc-slider--shots.is-enhanced .dc-slider__after,html.dc-js .dc-slider--shots .dc-slider__before,html.dc-js .dc-slider--shots .dc-slider__after{min-height:0;justify-content:flex-start}
	.dc-slider--shots.is-enhanced .dc-ba__rows,html.dc-js .dc-slider--shots .dc-ba__rows,.dc-slider--shots.is-enhanced .dc-label,html.dc-js .dc-slider--shots .dc-label{display:none}
	html.dc-js .dc-slider__legend,.dc-slider__legend:has(+.dc-slider--shots.is-enhanced){display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-bottom:12px}
	.dc-slider__legend .dc-label:first-child{color:var(--dc-silver)}
	.dc-slider__legend .dc-label:last-child{text-align:right}
}
.dc-slider__handle{position:absolute;top:-8%;bottom:-8%;left:0;width:44px;margin-left:-22px;display:flex;justify-content:center;cursor:ew-resize;outline-offset:-6px}
.dc-slider__handle::before{content:'';display:block;width:12px;height:100%;background:var(--dc-paper);transform:skewX(-18deg)}
.dc-slider__handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--dc-ink);color:#fff;font:500 11px/1 var(--font-body);letter-spacing:.14em;padding:8px 10px;white-space:nowrap}
.dc-slider__handle:focus-visible{outline:2px solid var(--dc-signal-blue)}
.dc-slider__list{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px var(--gutter)}
.dc-slider__list li{padding-top:12px;border-top:1px solid var(--dc-ink-3);font-size:14px}
@media (max-width:759px){.dc-slider{grid-template-columns:1fr}}

/* Capability rows ----------------------------------------------------------------------------- */
.dc-cap-rows__h{margin:16px 0 40px}
.dc-cap-rows{border-top:1px solid var(--dc-ink);counter-reset:cap}
.dc-cap-row{display:grid;grid-template-columns:64px minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:10px var(--gutter);align-items:baseline;padding:28px 0;border-bottom:var(--rule);counter-increment:cap}
.dc-cap-row::before{content:counter(cap,decimal-leading-zero);font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--dc-blue)}
.dc-cap-row__t,.wp-block-heading.dc-cap-row__t{font-size:var(--text-h3);line-height:1.15;letter-spacing:-.02em}
.dc-cap-row__b{font-size:15px}
.dc-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.dc-chips li{height:28px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--dc-stone);background:var(--dc-white);font-size:12px;color:var(--dc-ink)}
@media (max-width:1099px){.dc-cap-row{grid-template-columns:48px minmax(0,1fr) minmax(0,1fr)}.dc-cap-row .dc-chips{grid-column:2/-1;justify-content:flex-start}}
@media (max-width:759px){.dc-cap-row{grid-template-columns:36px minmax(0,1fr)}.dc-cap-row>*{grid-column:2}.dc-cap-row::before{grid-row:1}}

/* Case feature (White) --------------------------------------------------------------------------- */
.dc-case-feature{border-block:var(--rule)}
.dc-case-feature__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-8);align-items:center}
.dc-case-feature__media{grid-column:1/span 6;position:relative;aspect-ratio:16/10;min-height:0;overflow:hidden}
.dc-case-feature__media img{width:100%;height:100%;object-fit:cover}
.dc-case-feature__body{grid-column:8/span 5;display:flex;flex-direction:column;gap:18px}
.dc-case-feature__title,.wp-block-heading.dc-case-feature__title{font-weight:900;font-size:clamp(30px,3.2vw,48px);line-height:1.02;letter-spacing:-.03em}
.dc-case-feature .dc-facts{padding-top:var(--space-4);border-top:var(--rule)}
@media (max-width:759px){.dc-case-feature__grid{grid-template-columns:1fr}.dc-case-feature__media,.dc-case-feature__body{grid-column:1}}

/* FAQ accordion (handoff Accordion) ------------------------------------------------------------- */
.dc-faqs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:28px}
.dc-faqs__head{grid-column:1/span 4;display:flex;flex-direction:column;gap:14px}
.dc-faqs__list{grid-column:6/span 7}
@media (max-width:759px){.dc-faqs{grid-template-columns:1fr}.dc-faqs__head,.dc-faqs__list{grid-column:1}}
.dc-faq{border-top:1px solid var(--dc-ink)}
.dc-faq__item{border-bottom:var(--rule)}
.dc-faq__q{margin:0;font:600 17px/1.4 var(--font-body);letter-spacing:0}
.dc-faq__q button{width:100%;min-height:64px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:18px 0;background:transparent;border:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.dc-faq__icon{flex:none;position:relative;width:32px;height:32px;border:var(--rule);transition:transform 420ms var(--ease-out)}
.dc-faq__icon::before,.dc-faq__icon::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.dc-faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.dc-faq__q button[aria-expanded=true] .dc-faq__icon{transform:rotate(45deg)}
.dc-faq__body{padding:0 0 22px;font-size:15px;line-height:1.65;color:var(--dc-graphite);max-width:62ch}
.dc-faq__body>*+*{margin-top:.8em}
/* QA cycle 4 (D11): the collapsed answers are drawn at first paint whenever
   JavaScript runs (html.dc-js is set in the head), so dc-core.js adds
   behaviour, not layout. The answer opens or closes in one frame, on the click
   or key press itself, and the opened answer arrives with opacity and a short
   transform only (no animated height), so nothing below it is animated.
   Without JavaScript every answer reads in full. */
html.dc-js .dc-faq .dc-faq__a{display:grid;grid-template-rows:0fr}
html.dc-js .dc-faq .dc-faq__a.is-open{grid-template-rows:1fr}
html.dc-js .dc-faq .dc-faq__clip{overflow:hidden;min-height:0}
/* Closed answers leave the tab order and the accessibility tree (accessibility B3); search results add is-open, so they stay reachable. */
html.dc-js .dc-faq .dc-faq__a:not(.is-open) .dc-faq__clip{visibility:hidden}
html.dc-js .dc-faq .dc-faq__a.is-open .dc-faq__clip{visibility:visible}
html.dc-js .dc-faq .dc-faq__a.is-open .dc-faq__body{animation:dc-open 480ms var(--ease-out) both}
@keyframes dc-open{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.dc-js .dc-faq .dc-faq__a.is-open .dc-faq__body{animation:none}}
html:not(.dc-js) .dc-faq__icon{display:none}
.dc-faq__all{padding-top:var(--space-5)}
.is-style-dc-ink .dc-faq{border-top-color:var(--dc-paper)}
.is-style-dc-ink .dc-faq__item{border-bottom-color:var(--dc-ink-3)}
.is-style-dc-ink .dc-faq__body{color:var(--dc-silver)}

/* Next link (angled wipe) and service rail ----------------------------------------------------- */
.dc-next{border-top:var(--rule)}
.dc-next__link{display:block;color:var(--dc-ink);text-decoration:none;background:linear-gradient(108deg,var(--dc-ink) 50%,transparent 50%) no-repeat;background-size:240% 100%;background-position:100% 0;transition:background-position 720ms var(--ease-in-out),color 400ms}
.dc-next__link:hover,.dc-next__link:focus-visible{background-position:0 0;color:var(--dc-paper)}
.dc-next__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-5);padding-block:clamp(48px,7vw,96px)}
.dc-next__text{display:flex;flex-direction:column;gap:14px;min-width:0}
.dc-next__label{font:500 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.dc-next .dc-lockup{font-size:min(9vw,104px);color:inherit;--lk-slash:var(--dc-blue)}
.dc-next__arrow{font-size:clamp(32px,4vw,56px);font-weight:300}
.dc-next__rail{padding-block:20px;border-top:var(--rule)}
.dc-next__rail ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dc-next__rail a{height:36px;display:inline-flex;align-items:center;padding:0 12px;border:var(--rule);background:transparent;color:var(--dc-ink);font:500 13px/1 var(--font-body);text-decoration:none;transition:border-color var(--dur-micro)}
.dc-next__rail a:hover{border-color:var(--dc-ink)}
.dc-next__rail a[aria-current=page]{background:var(--dc-ink);color:var(--dc-paper);border-color:var(--dc-ink)}
@media (max-width:759px){.dc-next .dc-lockup{font-size:16vw}}

/* Story chapters (case study) -------------------------------------------------------------------- */
.dc-story__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px}
.dc-story__chapters{grid-column:4/span 8;display:flex;flex-direction:column;gap:96px}
.dc-story__rail{grid-column:1/span 3}
.dc-story__rail ol{position:sticky;top:120px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.dc-story__rail a{display:flex;flex-direction:column;gap:8px;color:var(--dc-ink);text-decoration:none;font:500 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.dc-story__rail a:hover{color:var(--dc-blue)}
.dc-story__bar{position:relative;display:block;height:3px;background:var(--dc-stone);overflow:hidden;transform:skewX(-18deg)}
.dc-story__bar span{position:absolute;inset:0;background:var(--dc-blue);transform-origin:0 50%;transform:scaleX(0)}
.dc-chapter{scroll-margin-top:100px}
.dc-chapter__label{margin:0 0 14px;font:500 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dc-blue)}
.dc-chapter__statement{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,40px);line-height:1.2;letter-spacing:-.02em;text-wrap:pretty}
@media (max-width:1099px){.dc-story__chapters{grid-column:1/-1}.dc-story__rail{display:none}}

/* Gallery (drag or scroll) ---------------------------------------------------------------------- */
.dc-gallery__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;margin-bottom:28px}
.dc-gallery{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:none;user-select:none}
.dc-gallery::-webkit-scrollbar{display:none}
.dc-gallery>*{flex:none;width:min(560px,80vw);scroll-snap-align:start}
.dc-gallery__item{aspect-ratio:4/3}
.dc-gallery:focus-visible{outline:2px solid var(--dc-signal-blue);outline-offset:4px}

/* Inline CTA panel ------------------------------------------------------------------------------ */
.dc-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5);padding:28px;background:var(--dc-white);border:var(--rule)}
.dc-panel__line{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:-.02em;max-width:28em}
.dc-section.dc-inline-cta{border-top:0}

/* Timeline (vertical list; pinned version in pinned.css) ------------------------------------------- */
.dc-timeline__list{margin-top:28px}
.dc-milestone{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--space-4);padding:22px 0;border-top:1px solid var(--dc-ink-3)}
.dc-milestone>*{grid-column:2}
.dc-milestone__year{grid-column:1;grid-row:1/span 2;font:300 18px/1.3 var(--font-body);letter-spacing:.2em;color:var(--dc-signal-blue)}
.dc-milestone__t,.wp-block-heading.dc-milestone__t{font-size:22px;line-height:1.2;margin-bottom:6px}
.dc-milestone .dc-muted{font-size:15px}

/* Principles (stacked; track in pinned.css) ----------------------------------------------------------- */
.dc-principles__head{margin-bottom:40px}
.dc-principles__track{display:flex;flex-direction:column;gap:var(--gutter)}
.dc-principle{min-height:320px;padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;border:var(--rule);background:var(--dc-white)}
.dc-principle.is-ink{background:var(--dc-ink);color:var(--dc-paper);border-color:var(--dc-ink)}
.dc-principle.is-blue{background:var(--dc-blue);color:#fff;border-color:var(--dc-blue)}
.dc-principle__n{font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--dc-blue)}
.dc-principle.is-ink .dc-principle__n{color:var(--dc-signal-blue)}
.dc-principle.is-blue .dc-principle__n{color:#fff}
.dc-principle__t{font-family:var(--font-display);font-weight:900;font-size:clamp(36px,4.6vw,76px);line-height:.98;letter-spacing:-.04em}
.dc-principle__b{font-size:17px;line-height:1.55;max-width:36ch}
.dc-principle.is-white .dc-principle__b{color:var(--dc-graphite)}
.dc-principle.is-ink .dc-principle__b{color:var(--dc-silver)}

/* Founder card ------------------------------------------------------------------------------------ */
.dc-founder{display:flex;flex-direction:column;gap:14px;max-width:340px}
.dc-founder__media{position:relative;aspect-ratio:4/5;background:var(--dc-stone);overflow:hidden;clip-path:polygon(42% 0,74% 0,58% 100%,26% 100%);transition:clip-path 760ms var(--ease-in-out)}
.dc-founder:hover .dc-founder__media,.dc-founder:focus-within .dc-founder__media{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
@media (hover:none){.dc-founder__media{clip-path:none}}
.dc-founder__media img{width:100%;height:100%;object-fit:cover}
.dc-founder__media.is-typographic{clip-path:none;background:var(--dc-ink);color:var(--dc-paper);display:flex;align-items:flex-end;padding:24px}
.dc-founder__mono{font-family:var(--font-display);font-weight:900;font-size:clamp(36px,4vw,56px);line-height:.95;letter-spacing:-.04em}
.dc-founder__name{font:600 18px/1.3 var(--font-body)}
.dc-founder__role{margin-top:-8px;font-size:14px;color:var(--dc-graphite)}
.dc-founder__ask{font-size:13px;line-height:1.5}
.dc-founder__link a{font-size:12px;font-weight:500;text-decoration:none}

/* Fact grid (Ink hairline) ---------------------------------------------------------------------------- */
.dc-fact-grid__h{margin:16px 0 40px}
.dc-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--dc-ink-3);border:1px solid var(--dc-ink-3)}
.dc-cell{background:var(--dc-ink);padding:28px;display:flex;flex-direction:column;gap:12px;transition:background-color 240ms}
.dc-cell:hover{background:var(--dc-ink-2)}
.dc-cell:hover .dc-cell__n{color:var(--dc-silver)} /* Signal Blue on Ink 2 is 4.36:1, under AA for 12px text */
.dc-cell__n{font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--dc-signal-blue)}
.dc-cell__t{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1.15;letter-spacing:-.015em}
.dc-cell__b{font-size:15px;line-height:1.6;color:var(--dc-silver)}

/* Work grid (asymmetric editorial) ------------------------------------------------------------------------ */
.dc-section--flush-top{padding-top:0}
.dc-work-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:96px;align-items:start}
.dc-work-card a{display:flex;flex-direction:column;gap:var(--space-4);color:var(--dc-ink);text-decoration:none}
.dc-work-card__media{position:relative;display:block;background:var(--dc-stone);overflow:hidden}
.dc-work-card__media img{width:100%;height:100%;object-fit:cover}
.dc-work-card__title{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.2vw,32px);line-height:1.1;letter-spacing:-.02em}
.dc-work-card__meta{margin-top:-6px;font-size:13px;color:var(--dc-graphite)}
.dc-work-card--0{grid-column:1/span 7}.dc-work-card--0 .dc-work-card__media{aspect-ratio:16/10}
.dc-work-card--1{grid-column:8/span 5;margin-top:120px}.dc-work-card--1 .dc-work-card__media{aspect-ratio:4/5}
.dc-work-card--2{grid-column:1/span 5}.dc-work-card--2 .dc-work-card__media{aspect-ratio:4/5}
.dc-work-card--3{grid-column:6/span 7;margin-top:96px}.dc-work-card--3 .dc-work-card__media{aspect-ratio:16/10}
.dc-work-card--4{grid-column:2/span 6}.dc-work-card--4 .dc-work-card__media{aspect-ratio:3/2}
.dc-work-card--5{grid-column:8/span 5;margin-top:80px}.dc-work-card--5 .dc-work-card__media{aspect-ratio:1/1}
@media (max-width:1099px){.dc-work-card[class*='dc-work-card--']{grid-column:span 6;margin-top:0}.dc-work-card:nth-child(even){margin-top:64px}}
@media (max-width:759px){.dc-work-grid{grid-template-columns:1fr;row-gap:56px}.dc-work-card[class*='dc-work-card--']{grid-column:1;margin-top:0}.dc-work-card .dc-work-card__media{aspect-ratio:4/3}}

/* FAQ search (FAQs page) ------------------------------------------------------------------------------------ */
.dc-faq-search-section{padding-top:var(--hero-top)}
.dc-faq-search__label{display:block;margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--dc-graphite)}
.dc-faq-search__lockup{width:100%}
.dc-faq-search__field{position:relative;display:block;flex:1 1 0;min-width:0;overflow:hidden}
.dc-faq-search__ph{position:absolute;left:0;top:0;pointer-events:none;color:var(--dc-graphite);transition:opacity var(--dur-micro)}
.dc-faq-search.has-value .dc-faq-search__ph,.dc-faq-search.is-focused .dc-faq-search__ph{opacity:0}
.dc-faq-search__input{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--dc-ink);border-radius:0;outline:none;color:var(--dc-ink);font:inherit;letter-spacing:inherit;text-transform:uppercase;line-height:1.3;padding:0 0 0 .24em;caret-color:var(--dc-blue);-webkit-appearance:none;appearance:none}
.dc-faq-search__input:focus{border-bottom-color:var(--dc-blue)}
.dc-faq-search__input:focus-visible{outline:2px solid var(--dc-blue);outline-offset:-2px}
.dc-faq-search__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:28px}
.dc-faq-search__chips{display:flex;flex-wrap:wrap;gap:8px}
/* The chips and Pause need JavaScript, so they render at first paint whenever
   it runs (html.dc-js is set in the head) instead of being revealed by the
   module after paint, which shifted the answers down (QA cycle 1, item 7). */
html:not(.dc-js) .dc-faq-search__chips,html:not(.dc-js) .dc-faq-search__pause{display:none}
.dc-chip__n{font-size:11px;color:var(--dc-graphite);margin-left:6px}
.dc-chip[aria-pressed=true] .dc-chip__n{color:var(--dc-silver)}
.dc-faq-search__count{font:500 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dc-graphite);white-space:nowrap}
.dc-faq-search__count span{color:var(--dc-ink)}
.dc-faq-search__pause{height:40px;padding:0 12px;border:var(--rule);background:transparent;font:500 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
/* QA cycle 2 (layout-shift sampling): the count and Pause keep the width they
   have in Poppins whichever font is showing, so whether they share the chips'
   line never changes when the web font arrives (it moved them across the bar). */
.dc-faq-search__count{flex:none;width:8.75em}
.dc-faq-search__pause{flex:none;width:6em}
.dc-faq-search__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:56px}
.dc-faq-search__main{grid-column:1/span 8;min-width:0}
.dc-faq-search__aside{grid-column:10/span 3}
.dc-faq-search__card{position:sticky;top:110px;background:var(--dc-ink);color:var(--dc-paper);padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.dc-faq-search__card-label{font:500 11px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dc-silver)}
.dc-faq-search__card-line{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.2}
.dc-faq-search__phone{color:var(--dc-paper);font-size:14px;text-decoration:none}
.dc-faq-search__phone:hover{color:var(--dc-signal-blue)}
.dc-faq-group{margin-bottom:48px}
.dc-faq-group__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--dc-ink);font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.dc-faq-group__n{font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--dc-graphite)}
.dc-faq-group .dc-faq{border-top:0}
.dc-faq__body mark,.dc-faq__q mark{background:var(--dc-blue-25);color:inherit}
.dc-faq__helpful{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;font-size:13px;color:var(--dc-graphite)}
/* QA cycle 4: "Was this helpful?" needs JavaScript, so it is drawn from first paint whenever it runs (inside the closed answer) instead of being revealed by the module. */
html:not(.dc-js) .dc-faq__helpful{display:none}
.dc-faq__helpful button{height:32px;padding:0 12px;border:var(--rule);background:var(--dc-white);color:var(--dc-ink);font:500 12px/1 var(--font-body);cursor:pointer}
.dc-faq__helpful button:hover{border-color:var(--dc-ink)}
.dc-faq-elsewhere{margin-bottom:48px}
.dc-faq-search__none{border:var(--rule);background:var(--dc-white);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:var(--space-4)}
.dc-faq-search__none-h{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:-.02em}
[data-faq-item][hidden],.dc-faq-group[hidden]{display:none}
@media (max-width:1099px){.dc-faq-search__main{grid-column:1/span 12}.dc-faq-search__aside{grid-column:1/span 12;margin-bottom:48px}.dc-faq-search__card{position:static}}

/* Ask, audit and success layouts (form styling in forms.css) -------------------------------------------------- */
.dc-ask,.dc-audit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-8);align-items:start}
.dc-ask__head{grid-column:1/span 5;display:flex;flex-direction:column;gap:var(--space-4)}
.dc-ask__form{grid-column:7/span 6}
.dc-audit__info{grid-column:1/span 6;display:flex;flex-direction:column;gap:var(--space-4)}
.dc-audit__form{grid-column:8/span 5}
@media (max-width:759px){.dc-ask,.dc-audit{grid-template-columns:1fr}.dc-ask__head,.dc-ask__form,.dc-audit__info,.dc-audit__form{grid-column:1}}
.dc-success{padding-top:var(--hero-top)}
.dc-success__title,.wp-block-heading.dc-success__title{margin-top:clamp(28px,5vh,56px);padding-top:28px;border-top:var(--rule);font-size:var(--text-section)}
.dc-success__line{margin-top:var(--space-4)}
.dc-success__named{display:none}
.dc-success__ref{margin-top:var(--space-3)}
.dc-success__steps{margin-top:var(--space-8)}
.dc-success__links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:var(--space-6)}
html:not(.dc-js) .dc-success__ref{display:none}

/* Prose section and contents aside --------------------------------------------------------------------------- */
.dc-prose-section{padding-top:var(--space-10)}
.dc-toc-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-6)}
.dc-toc-layout__aside{grid-column:1/span 3}
.dc-toc-layout__main{grid-column:5/span 8}
.dc-toc{position:sticky;top:104px}
.dc-toc__title{font:500 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dc-graphite);cursor:pointer;list-style:none;margin-bottom:12px}
.dc-toc__title::-webkit-details-marker{display:none}
.dc-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--dc-stone)}
.dc-toc a{display:block;padding-left:14px;margin-left:-1px;border-left:3px solid transparent;color:var(--dc-ink);font-size:14px;line-height:1.4;text-decoration:none}
.dc-toc a:hover,.dc-toc a.is-current{border-left-color:var(--dc-blue);color:var(--dc-blue)}
@media (max-width:759px){
	.dc-toc-layout{grid-template-columns:1fr}
	.dc-toc-layout__aside,.dc-toc-layout__main{grid-column:1}
	.dc-toc{position:static;border-block:var(--rule)}
	.dc-toc__title{display:flex;justify-content:space-between;align-items:center;min-height:64px;margin:0;font:600 17px/1.4 var(--font-body);letter-spacing:0;text-transform:none;color:var(--dc-ink)}
	/* The sign is decorative: its empty alternative text keeps it out of the toggle's name ("Contents"). The first content value is for browsers without alternative text. */
	.dc-toc__title::after{content:'+';content:'+' / '';font:300 22px/1 var(--font-body)}
	.dc-toc__details[open] .dc-toc__title::after{content:'−';content:'−' / ''}
	.dc-toc ol{padding-bottom:var(--space-5)}
	/* QA cycle 4 (D12): below 760px the Contents is drawn closed from first paint
	   whenever JavaScript runs, until dc-core.js has closed it for real
	   (data-dc-ready), so the prose never jumps up after first paint. Without
	   JavaScript it stays open. */
	html.dc-js .dc-toc__details:not([data-dc-ready])>:not(summary){display:none}
	html.dc-js .dc-toc__details:not([data-dc-ready]) .dc-toc__title::after{content:'+';content:'+' / ''}
}

/* Contact page (focused template) ------------------------------------------- */
.dc-contact{padding-top:calc(var(--header-h) + clamp(24px,5vh,56px))}
.dc-contact__body{margin-top:clamp(32px,5vh,56px);padding-top:28px;border-top:var(--rule)}
.dc-faq-search__h1{margin-bottom:24px}

/* ======================================================================================================
   Phase D additions (session 3): structures the page copy needs inside the existing patterns.
   ====================================================================================================== */

/* Case rows: the floating card reads these; they are data, not page text. */
.dc-case-row__card,.dc-case-row__did{display:none}
.dc-case-row__media{margin:0 0 var(--space-6)}
.dc-case-rows__link{margin-top:var(--space-6)}
.dc-case-rows__link a+a{margin-left:24px}

/* Explorer: the tab label is read by the module. */
.dc-explorer__tab{display:none}
.dc-explorer__count span{color:var(--dc-silver);font-weight:400}

/* Capability rows: groups, intro, closing lines, links. */
.dc-cap-rows__group{margin:40px 0 0;padding:0 0 14px;border-bottom:1px solid var(--dc-ink)}
.dc-cap-rows .dc-cap-rows__group:first-child{margin-top:12px}
.dc-cap-rows__intro{max-width:62ch;margin:-12px 0 40px}
.dc-cap-rows__close{max-width:68ch;margin-top:var(--space-6)}
.dc-cap-rows__close+.dc-cap-rows__close{margin-top:var(--space-4)}
.dc-cap-row__links{grid-column:3;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px}
@media (max-width:1099px){.dc-cap-row__links{grid-column:2/-1}}
@media (max-width:759px){.dc-cap-row__links{grid-column:2}}

/* Story chapters: steps, figures, lists. */
.dc-chapter+.dc-chapter{margin-top:clamp(56px,8vw,96px)}
.dc-chapter__label.wp-block-heading{font:500 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dc-blue)}
.dc-chapter__statement{margin-bottom:var(--space-6)}
.dc-chapter p:not([class]){max-width:68ch}
.dc-chapter__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px var(--gutter);margin:var(--space-6) 0;padding-top:24px;border-top:1px solid var(--dc-ink)}
.dc-chapter__step-t,.wp-block-heading.dc-chapter__step-t{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.2;letter-spacing:-.01em;margin-bottom:8px}
.dc-chapter__figs-h{margin-top:var(--space-6)}
.dc-chapter__figs{margin:12px 0 0;padding:0;list-style:none;border-top:var(--rule)}
.dc-chapter__figs li{padding:12px 0;border-bottom:var(--rule)}
.dc-chapter__list{margin-top:var(--space-4)}

/* Case heroes: fact source line; hero image. */
.dc-fact__s{font-size:12px;line-height:1.4;color:var(--dc-silver)}
.dc-section.dc-case-hero-media{padding:0}
.dc-media{margin:0;position:relative;overflow:hidden;background:var(--dc-stone)}
.dc-media img{display:block;width:100%;height:auto}
.dc-media--21-9{aspect-ratio:21/9}
.dc-media--16-10{aspect-ratio:16/10}
.dc-media--21-9 img,.dc-media--16-10 img{height:100%;object-fit:cover;object-position:top center}
@media (max-width:759px){.dc-media--21-9{aspect-ratio:4/3}}
.dc-gallery__item{background:var(--dc-ink-2)}
.dc-gallery__item .dc-media{height:100%;background:transparent}
.dc-gallery__item .dc-media img{height:100%;object-fit:cover;object-position:top center}
.dc-gallery>.dc-gallery__item.is-phone{width:min(260px,60vw);aspect-ratio:9/16}

/* Case feature: text-only variant, honest line, figures. */
.dc-case-feature__grid.is-text-only .dc-case-feature__body{grid-column:1/-1;max-width:880px}
.dc-case-feature__h.wp-block-heading{margin-bottom:var(--space-4)}
.dc-case-feature__honest{margin:var(--space-3) 0}
.dc-case-feature__figures{list-style:none;margin:var(--space-5) 0 var(--space-3);padding:0;border-top:1px solid var(--dc-ink-3)}
.dc-case-feature__figures li{padding:12px 0;border-bottom:1px solid var(--dc-ink-3)}

/* Inline panel: heading and line. */
.dc-panel__text{display:flex;flex-direction:column;gap:8px;max-width:56em}
.dc-panel__line.wp-block-heading{margin:0}
.dc-panel__sub{margin:0;max-width:62ch}

/* Work grid: Blue typographic fallback and the card plate (work.md section 2). */
.dc-work-card__media.is-fallback{background:var(--dc-blue);min-height:200px}
.dc-work-card__plate{position:absolute;left:0;bottom:0;padding:10px 14px;background:var(--dc-ink);color:var(--dc-paper);font:500 12px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase}

/* Services hub: columns, mix panel heading. */
.dc-col__foot{margin-top:auto;font-size:14px}
.dc-cols__after{max-width:68ch;margin-top:var(--space-6)}
.dc-cols__links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:var(--space-4)}
.dc-mix__panel-h{margin-top:var(--space-6)}
.dc-mix__panel-title{margin:0 0 8px}

/* Steps, why list, principles, timeline: lines under the sections. */
.dc-steps__after,.dc-why__after,.dc-principles__after{max-width:68ch;margin-top:var(--space-6)}
.dc-steps__link{margin-top:var(--space-6)}
.dc-timeline__h{margin:0 0 32px}
.dc-why__item .dc-h3 a{color:inherit;text-decoration:none}
.dc-why__item .dc-h3 a:hover,.dc-why__item .dc-h3 a:focus-visible{color:var(--dc-blue);text-decoration:underline}

/* Founder card section. */
.dc-founder-section .dc-founder{max-width:560px}
.dc-founder__asklabel{margin-top:var(--space-3)}
.dc-founder__ask{margin:0}

/* Client wall line under. */
.dc-clients__link{margin-top:var(--space-6)}

/* FAQ search: lead, link rows inside categories, aside lines. */
.dc-faq-search__h1.wp-block-heading{font-size:var(--text-section);max-width:24ch}
.dc-faq-search__lead{max-width:60ch;margin-bottom:var(--space-8)}
.dc-faq-links{margin-top:8px}
.dc-faq-links .dc-row{grid-template-columns:minmax(0,1fr) auto 24px}
.dc-faq-search__card-lines{display:flex;flex-wrap:wrap;gap:4px;margin:var(--space-3) 0 0}
.dc-faq__thanks{margin-left:8px;font-size:13px}

/* Contact: the small visible H1 beside the lockup, and the intro. */
.dc-contact__h1.wp-block-heading{margin-top:var(--space-4);font:500 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dc-graphite)}
.dc-contact__intro{max-width:56ch;margin-top:var(--space-3)}

/* Thank you: one variant at a time (generic without JavaScript). */
.dc-success:not(.has-variant) .dc-success__variant--start_project,.dc-success:not(.has-variant) .dc-success__variant--free_audit{display:none}
.dc-success__variant[hidden]{display:none}

/* Final CTA line. */
.dc-final__line{margin-top:var(--space-4)}

/* Legal: the Cookie settings button in the cookie policy. */
.dc-legal-cookie{margin:var(--space-6) 0}

/* Forms: "(if relevant)" is for the no-JavaScript layout only (06-copy/global.md 7). */
.dc-js .dcs-ifrel{display:none}

/* Before and after images. */
.dc-slider__img{display:block;flex:none;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left top;border:1px solid rgba(255,255,255,.12)}


/* Text facts (Sector · Services · Year, brief 2.13 item 6): set smaller than metric figures, one column on phones. */
.dc-facts--text .dc-fact__v,.dc-facts--paper.dc-facts--text .dc-fact__v{font-size:clamp(18px,1.5vw,22px);font-weight:800;line-height:1.25;letter-spacing:-.01em}
.dc-facts>*{min-width:0}
@media (max-width:759px){.dc-facts--text{grid-template-columns:1fr}}

/* Wide tables scroll inside their own box; grid items may shrink below their content (no page overflow at 390). */
.dc-toc-layout__main,.dc-toc-layout__aside,.dc-case-feature__grid>*{min-width:0}
.dc-prose .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dc-prose .wp-block-table table{min-width:520px}

.dc-gallery>.dc-gallery__item:not(.is-phone){aspect-ratio:16/10}
/* Client wall: names that link to their case study read as names (2.13 item 9). */
.dc-client__name a{color:inherit;text-decoration:none}
.dc-client__name a:hover,.dc-client__name a:focus-visible{text-decoration:underline;text-underline-offset:6px}
.dc-clients:has(>.dc-client:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.dc-clients:has(>.dc-client:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:759px){.dc-clients:has(>.dc-client:nth-child(6):last-child),.dc-clients:has(>.dc-client:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Final CTA: the input label is visually hidden (home.md 12). */
.dc-final-cta__label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.dc-founder__link a+a{margin-left:18px}
/* FAQ aside: links on the Ink card (axe colour-contrast). */
.dc-faq-search__card-lines a{color:var(--dc-paper);font-size:14px}
.dc-faq-search__card-lines a:hover{color:var(--dc-signal-blue)}
/* Work card without an image: the Blue typographic fallback carries the figure or the client name (brief 2.13 item 6). */
.dc-work-card__type{position:absolute;inset:0;display:flex;align-items:center;padding:0 8% 12%;font-family:var(--font-display);font-weight:900;font-size:clamp(34px,4.4vw,72px);line-height:.94;letter-spacing:-.045em;color:#fff;overflow-wrap:anywhere}
@media (max-width:759px){.dc-work-card__type{font-size:clamp(34px,11vw,56px)}}
/* Portrait and square work cards crop website screenshots from the top left, so the logo and headline stay whole. */
.dc-work-card--1 .dc-work-card__media img,.dc-work-card--2 .dc-work-card__media img,.dc-work-card--5 .dc-work-card__media img{object-position:0 0}