/* WD Assist brand layer. Load after site.css and site-extra.css.
   site.css and site-extra.css are the Cloud Assist Group stylesheets (the same components, spacing, type scale, header, footer,
   consent banner and form states as www.thecloudassist.com). This file only (1) sets WD Assist's accent, and (2) adds the few
   components WD Assist uses that the group site does not: the service-plan panel, photographs, breadcrumbs, the health check
   and the booking widget wrapper. Breakpoints follow site.css: 520, 640, 760, 900 and 1040 px. */

:root{
  --wd-blue:#087bfa;        /* WD Assist brand blue: logo, icons, large type and fills (4.0:1 on white, so never small text on white) */
  --wd-blue-ink:#0664d4;    /* buttons, eyebrows and small accents: 5.6:1 on white, white text on it 5.6:1 */
  --wd-blue-deep:#054eaa;   /* hover and pressed */
  --wd-blue-soft:#e8f1fe;
  --wd-purple:#6b1fff;      /* the second colour of the WD mark */
  /* The group stylesheet reads its accent from --ca-purple; WD Assist's accent is blue. */
  --ca-purple:var(--wd-blue-ink); --ca-purple-deep:var(--wd-blue-deep); --ca-purple-soft:var(--wd-blue-soft);
  --ca-start:var(--wd-blue); --ca-build:var(--wd-purple);
}

/* the consent banner link reads as body text at 15px, so it takes the link colour, not the 4.0:1 brand blue */
.consent a{color:var(--ca-link)}

/* small spacing utilities used instead of inline style attributes */
.mt-s{margin-top:12px}.mt-m{margin-top:20px}.mt-l{margin-top:28px}.mt-xl{margin-top:40px}.mb-0{margin-bottom:0}
.maxw{max-width:760px}
.lede{color:var(--ca-ink)}

/* header: the WD Assist logo is wider than the group mark */
.brand img{height:36px;width:140px;object-fit:contain;object-position:left center}
footer.site img{height:120px;width:468px;max-width:100%;object-fit:contain;object-position:left center}
footer.site .cols{grid-template-columns:minmax(468px,1.5fr) repeat(3,minmax(0,1fr))}
@media (max-width:1000px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer.site .cols{grid-template-columns:1fr}}
@media (max-width:420px){.brand img{height:30px;width:116.67px}.header-cta .btn{padding:10px 12px}}

/* breadcrumbs */
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:14.5px;color:var(--ca-muted);max-width:none}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--ca-line-2)}
.crumbs a{text-decoration:underline;text-underline-offset:2px}

/* hero on inner pages: copy plus a photograph */
.hero.inner{padding-block:48px 56px}
@media (max-width:900px){.hero.inner{padding-block:28px 28px}}

/* photographs from wdassist.com */
.photo{position:relative;margin:0;align-self:center}
.photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:14px;position:relative;z-index:1;background:var(--ca-paper-2)}
.photo.wide img{aspect-ratio:4/3}
@media (max-width:900px){.hero .photo{max-width:420px}}

/* .ring: the WD frame. The photo sits inside a thick navy rounded frame, with the two squares of the WD mark drawn as
   outlines behind it: purple offset to the upper-left, blue to the lower-right. Every measurement is in --u, one hundredth
   of the frame's width, so the whole group scales with the column. The outlines stay inside the figure's own box, so they
   never overlap the neighbouring copy or push past the page edge. Proportions follow the reference artwork.
   Browsers without container units keep the plain rounded photo above. */
@supports (width:1cqw){
  .photo.ring{
    display:flow-root;container-type:inline-size;
    --pl:16.4; --pt:17.8; --ps:110.4; --pw:4.5; --pr:24.4;   /* purple: overhang left and top, size, stroke, corner radius */
    --bs:70.4; --bx:15;   --by:18.1;  --bw:4.6; --br:16.7;   /* blue: size, overhang right and bottom, stroke, corner radius */
    --fw:5.6;  --fr:20.6;                                     /* navy frame: thickness and outer corner radius */
    --u:calc(100cqw / (100 + var(--pl) + var(--bx)));
  }
  .photo.ring img{
    width:calc(100 * var(--u));
    margin:calc(var(--pt) * var(--u)) 0 calc(var(--by) * var(--u)) calc(var(--pl) * var(--u));
    padding:calc(var(--fw) * var(--u));
    border-radius:calc(var(--fr) * var(--u));
    background:linear-gradient(var(--ca-paper-2),var(--ca-paper-2)) content-box,var(--ca-navy);
  }
  .photo.ring::before,.photo.ring::after{content:"";position:absolute;z-index:0;box-sizing:border-box;border-style:solid;pointer-events:none}
  .photo.ring::before{
    left:0;top:0;width:calc(var(--ps) * var(--u));height:calc(var(--ps) * var(--u));
    border-width:calc(var(--pw) * var(--u));border-color:var(--wd-purple);border-radius:calc(var(--pr) * var(--u));
  }
  .photo.ring::after{
    right:0;bottom:0;width:calc(var(--bs) * var(--u));height:calc(var(--bs) * var(--u));
    border-width:calc(var(--bw) * var(--u));border-color:var(--wd-blue);border-radius:calc(var(--br) * var(--u));
  }
  /* a 4:3 photo is 25 units shorter, so the purple outline is too */
  .photo.ring.wide::before{height:calc((var(--ps) - 25) * var(--u))}
  /* narrow phones: the same frame with the outlines pulled in closer, so the photo keeps more of the width */
  @media (max-width:520px){
    .photo.ring{--pl:10; --pt:11; --ps:104; --bs:62; --bx:10; --by:12}
  }
}

/* the illustrative service plan in the home hero (flat, like the group hero panel) */
.plan{background:#fff;border:1px solid var(--ca-line);border-radius:14px;padding:20px 22px 18px;box-shadow:var(--ca-shadow)}
.plan .plan-label{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ca-muted);margin:0}
.plan .plan-title{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.15;color:var(--ca-navy);margin:6px 0 10px}
.plan-item{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--ca-line);align-items:start}
.plan-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--wd-blue-soft);color:var(--wd-blue-ink)}
.plan-icon svg{width:22px;height:22px}
.plan-icon.purple{background:#f0eaff;color:#5a17d6}
.plan-icon.green{background:var(--ca-green-soft);color:#0a7a3a}
.plan-cat{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wd-blue-ink);margin:0}
.plan-cat.purple{color:#5a17d6}.plan-cat.green{color:#0a7a3a}
.plan-item-title{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.015em;color:var(--ca-navy);margin:2px 0 0;line-height:1.25}
.plan-item p.meta{font-size:14.5px;color:var(--ca-muted);margin:2px 0 0;line-height:1.45}
.plan-foot{border-top:1px solid var(--ca-line);padding-top:12px;font-size:14.5px;font-weight:600;color:var(--ca-navy);margin:0}
.plan-caption{font-size:13.5px;color:var(--ca-muted);margin:10px 2px 0}

/* partner badge line under the hero actions */
.credline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px;font-size:15px;color:var(--ca-muted)}
.credline img{height:44px;width:auto}
.credline span{display:inline-flex;align-items:center;gap:8px}
.credline .dot{width:8px;height:8px;border-radius:50%;background:var(--ca-green);flex:none}

/* numbered labels on cards */
.card .chip{margin-bottom:12px}
.card .aim{margin-top:14px;padding-top:12px;border-top:1px solid var(--ca-line);font-weight:600;color:var(--ca-navy);font-size:15.5px}

/* four promises beside a photograph */
.why{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
@media (max-width:900px){.why{grid-template-columns:1fr;gap:28px}}
.promises{display:grid;gap:22px}
.promise{display:grid;grid-template-columns:52px 1fr;gap:12px;border-top:1px solid var(--ca-line);padding-top:18px}
.promise .n{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--wd-blue-ink);line-height:1}
.promise h3{font-size:22px;margin-bottom:6px}
.promise p{margin:0;color:var(--ca-muted)}
.people-note{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.3;color:var(--ca-navy);margin:18px 0}

/* scope accordions reuse .faq; these add the lists and outcome line */
.faq .scope-body ul{margin:10px 0 0;color:var(--ca-ink);font-size:16px}
.faq .scope-body .so{margin-top:12px;font-size:15.5px;color:var(--ca-ink)}
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:24px}}

/* PeopleSafeguard card */
.psg{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
@media (max-width:900px){.psg{grid-template-columns:1fr;gap:24px}}
.psg-card{background:#fff;border:1px solid var(--ca-line);border-radius:14px;padding:22px 24px;box-shadow:var(--ca-shadow)}
.psg-card img{height:56px;width:auto;margin-bottom:8px}
.psg-card .row{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--ca-line);font-size:15.5px}
.psg-card .row b{font-family:var(--font-display);font-size:18px;color:var(--ca-navy)}

/* three-step handover (journey component with three columns) */
.journey.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.journey.three{grid-template-columns:1fr}}
.jstep p{margin:0;font-size:15px;color:var(--ca-muted)}

/* example review card */
.kv.review{grid-template-columns:190px 1fr}
@media (max-width:520px){.kv.review{grid-template-columns:1fr}}

/* service deliverables */
.deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:640px){.deliver{grid-template-columns:1fr}}
.deliver .card h3{font-size:20px}
.ticks{list-style:none;padding:0;margin:14px 0 0}
.ticks li{position:relative;padding-left:28px;margin:10px 0;font-weight:600;color:var(--ca-navy)}
.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:9px;border-left:3px solid var(--ca-green);border-bottom:3px solid var(--ca-green);transform:rotate(-45deg)}
.related-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.related-links a{border:1px solid var(--ca-line-2);border-radius:999px;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--ca-navy);text-decoration:none;background:#fff}
.related-links a:hover,.related-links a:focus-visible{border-color:var(--wd-blue-ink);color:var(--wd-blue-ink)}

/* service index cards on the implementation hub */
.svc{display:grid;gap:8px;align-content:start}
.svc .more{font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* experts */
.team .card{display:grid;gap:12px;align-content:start}
.team .who{display:flex;align-items:center;gap:16px}
.team .who img{width:80px;height:80px;border-radius:50%;background:var(--ca-paper-2);border:1px solid var(--ca-line);object-fit:cover;flex:none}
.team h3{font-size:21px;margin:0}
.team .role{font-size:14.5px;color:var(--ca-muted);margin:2px 0 0}
.team p{margin:0;color:var(--ca-muted);font-size:15.5px}

/* static client-logo grid on the About page (same greyscale treatment as the group logo strip) */
.clientgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:none}
.clientgrid li{margin:0;display:flex;align-items:center;justify-content:center;height:88px;border:1px solid var(--ca-line);border-radius:12px;background:#fff;padding:12px}
.clientgrid img{height:28px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.8}
@media (max-width:760px){.clientgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* pre-footer band: the group navy band with the WD Assist texture behind it */
.ctaband.wd{background:var(--ca-navy) url(/assets/img/wd-texture-1600.webp) center/cover no-repeat;position:relative;isolation:isolate}
.ctaband.wd::before{content:"";position:absolute;inset:0;background:rgba(5,10,56,.84);z-index:-1}
.ctaband .small{color:#c9cde3}
.ctaband .alt-link{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.ctaband .alt-link:hover{color:#f7dd23}

/* forms: the booking and contact pages */
form.book label .opt{font-weight:400}
.formnote{background:var(--wd-blue-soft);border-radius:8px;padding:12px 14px;font-size:15px;color:var(--ca-ink);margin:16px 0 0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* the AMS health check (inherits the group .quiz pills) */
.hc{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}
@media (max-width:900px){.hc{grid-template-columns:1fr;gap:20px}}
.hc-guide{position:sticky;top:90px}
/* one progress cue at a time: the stepper beside the form on wide screens; on narrower screens the intro and stepper
   step aside, the label and bar above the questions take over, and the privacy line follows the form */
@media (max-width:900px){.hc-guide{position:static;order:2}.hc-guide .hc-intro,.hc-steps{display:none}.hc-privacy{margin:0}}
@media (min-width:901px){.hc-progress{display:none}}
.hc-steps{list-style:none;padding:0;margin:16px 0;counter-reset:s}
.hc-steps li{counter-increment:s;display:flex;gap:10px;align-items:center;margin:8px 0;font-weight:600;color:var(--ca-muted);font-size:15.5px}
.hc-steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;border:1px solid var(--ca-line-2);display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;flex:none;background:#fff}
.hc-steps li[aria-current="step"]{color:var(--ca-navy)}
.hc-steps li[aria-current="step"]::before{background:var(--wd-blue-ink);border-color:var(--wd-blue-ink);color:#fff}
.hc-steps li.done::before{background:var(--ca-green-soft);border-color:#0a7a3a;color:#0a7a3a}
.hc-work{background:#fff;border:1px solid var(--ca-line);border-radius:14px;padding:26px 28px;box-shadow:var(--ca-shadow)}
@media (max-width:520px){.hc-work{padding:18px 16px}}
.hc-progress{margin:0 0 20px}
.hc-progress p{margin:0 0 8px;font-size:14.5px;font-weight:600;color:var(--ca-muted)}
.hc-bar{height:8px;border-radius:999px;background:var(--ca-paper-2);overflow:hidden}
.hc-bar i{display:block;height:100%;background:var(--wd-blue-ink);border-radius:999px;transition:width .2s ease-out}
.hc-step h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 22px}
.hc-step h2:focus{outline:none}
/* questions are separated by space, not rules (a fieldset border breaks around its legend) */
.quiz.hc-form fieldset{border:0;padding:0;margin:0 0 28px;min-width:0}
.quiz.hc-form legend{display:block;width:100%;font-size:17px;line-height:1.35;padding:0;margin:0 0 4px}
.quiz.hc-form .hint{font-size:14.5px;color:var(--ca-muted);margin:0 0 12px;max-width:none}
.quiz.hc-form legend + .opts{margin-top:12px}
.quiz.hc-form .hc-missing .opts label{border-color:var(--ca-red)}
.hc-field-error{margin:8px 0 0;font-size:14.5px;font-weight:600;color:var(--ca-red)}
.quiz.hc-form .opts label{min-height:44px;padding:10px 16px;font-size:15px;transition:border-color .12s,background .12s}
.quiz.hc-form .opts label:has(input:checked){border-color:var(--wd-blue-ink);background:var(--wd-blue-soft);box-shadow:inset 0 0 0 1px var(--wd-blue-ink)}
.quiz.hc-form .opts label:has(input:focus-visible){outline:3px solid var(--wd-blue-ink);outline-offset:2px}
.quiz.hc-form .opts input{width:18px;height:18px;margin:0;flex:none}
@media (max-width:520px){.quiz.hc-form .opts{display:grid;grid-template-columns:1fr;gap:8px}.quiz.hc-form .opts label{display:flex;width:100%;border-radius:10px;gap:10px}}
.hc-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-top:8px;border-top:1px solid var(--ca-line);padding-top:18px}
@media (max-width:520px){.hc-controls .btn{flex:1 1 0}.hc-controls [data-hc-next]{flex-grow:2}}
.hc-error{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ca-red)}
.hc-count{font-size:14.5px;color:var(--ca-muted);margin:8px 0 0}
.hc-score{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin:8px 0 18px}
@media (max-width:520px){.hc-score{grid-template-columns:1fr}}
.hc-ring{--v:0;width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--wd-blue-ink) calc(var(--v)*1%),var(--ca-paper-2) 0);display:flex;align-items:center;justify-content:center}
.hc-ring b{width:104px;height:104px;border-radius:50%;background:#fff;display:flex;align-items:baseline;justify-content:center;padding-top:30px;font-family:var(--font-display);font-size:40px;letter-spacing:-.03em;color:var(--ca-navy);font-variant-numeric:tabular-nums}
.hc-ring b small{font-size:15px;color:var(--ca-muted);font-family:var(--font-body);margin-left:2px}
.hc-subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:10px 0}
.hc-sub{border:1px solid var(--ca-line);border-radius:12px;padding:14px;display:flex;flex-direction:column}
.hc-sub h3{flex:1 0 auto}
.hc-sub h3{font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ca-muted);margin:0 0 4px}
.hc-sub .v{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--ca-navy);font-variant-numeric:tabular-nums}
.hc-sub .v small{font-size:14px;color:var(--ca-muted);font-family:var(--font-body)}
.hc-sub .hc-bar{margin-top:8px}
.hc-block{border-top:1px solid var(--ca-line);margin-top:22px;padding-top:18px}
.hc-block h3{font-size:22px;margin-bottom:10px}
.hc-list{display:grid;gap:10px}
.hc-list .item{border:1px solid var(--ca-line);border-radius:10px;padding:12px 14px}
.hc-list .item h4{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ca-navy);margin:0 0 4px;letter-spacing:-.01em}
.hc-list .item p{margin:0;font-size:15px;color:var(--ca-muted)}
.hc-list .item .lvl{float:right;margin-left:10px}
.hc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.linkbtn{background:none;border:0;padding:10px 0;min-height:44px;font:600 15.5px var(--font-body);color:var(--ca-link);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.hc-method{margin-top:22px}
.noscript-note{border:1px dashed var(--ca-line-2);border-radius:10px;padding:12px 14px;font-size:15px}

/* booking widget: sits in its column and uses the site fonts (the widget's own rules are in booking.css) */
.wda-book-embed{margin:0;font-family:var(--font-body)}
.wda-book-embed .wda-book{max-width:none}

/* 404 */
.notfound{padding-block:96px}

/* QA pass 1 (27 September 2026) */
html{scroll-padding-top:84px}
.pillar h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.015em;line-height:1.2;color:var(--ca-navy)}
.faq summary{min-height:44px;align-items:center}
.door a.more,.svc .more{display:inline-block;padding:10px 0}
.tablewrap:focus-visible{outline:3px solid var(--wd-blue-ink);outline-offset:2px}
.cta-short{display:none}
@media (max-width:520px){.cta-long{display:none}.cta-short{display:inline}}
/* legal review (27 September 2026): the hidden attribute always wins, the consent banner's second layer, the marketing opt-out box */
[hidden]{display:none!important}
.consent .consent-choices{flex-basis:100%;border:0;margin:0;padding:6px 0 0;display:grid;gap:10px}
.consent .consent-choices label{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;cursor:pointer}
.consent .consent-choices input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--wd-blue-ink);flex:none}
.consent .consent-choices .btn{justify-self:start}
form.book label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px;color:var(--ca-ink);cursor:pointer}
form.book label.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--wd-blue-ink)}

/* trademark mark in display headings: a superscript, not a full-size glyph */
sup.tm{font-size:.36em;vertical-align:super;line-height:0;letter-spacing:0;font-weight:600;margin-left:.04em}

/* accelerators page (5 October 2026): product marks in the hero panel, the three tool blocks and their outcome figures */
.plan-icon.mark{background:transparent}
.plan-icon.mark img{width:40px;height:40px;display:block}
.plan-cat.orange{color:#9a3a05}
.tool-head{display:flex;gap:18px;align-items:center}
.tool-head img{width:72px;height:72px;flex:none}
.tool-strap{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ca-muted);margin:8px 0 0}
.tool-fit{font-size:15.5px;color:var(--ca-muted);margin-top:18px}
.tool-fit strong{color:var(--ca-navy)}
.tool .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.tool-cards{display:grid;gap:14px;align-content:start}
.tool-cards .card h3{font-size:20px}
.tool-sub{font-size:22px;margin:40px 0 16px}
.stats.acc .n{font-size:44px}
.stats.acc .t{max-width:none;margin:0}
.stats.acc .src{display:block;margin-top:6px;font-size:13.5px;line-height:1.45}
@media (max-width:520px){.stats.acc{grid-template-columns:1fr}.tool-head{align-items:flex-start}.tool-head img{width:56px;height:56px}}
/* six primary links: the group stylesheet caps every list at 66ch, which the nav now exceeds, and the header needs tighter
   spacing between the 900px menu breakpoint and 1180px so it still fits on one line */
nav.primary ul{max-width:none}
nav.primary a{white-space:nowrap}
@media (min-width:901px) and (max-width:1180px){
  .site-header .wrap{gap:12px}
  nav.primary{margin-left:0}
  nav.primary ul{gap:2px}
  nav.primary a{font-size:13.5px;padding:8px 6px}
}
@media (min-width:901px) and (max-width:1040px){
  .brand img{height:30px;width:116.67px}
  .header-cta .btn{font-size:14px;padding:10px 12px}
  .cta-long{display:none}.cta-short{display:inline}
}