/* Now Assist brand layer. Load after site.css and site-extra.css (the Cloud Assist Group stylesheets: the same components, spacing,
   type scale, header, footer, consent banner and form states as www.thecloudassist.com and wdassist.com). This file only (1) sets the
   Now Assist accent and (2) adds the few components the group site does not have. Generated by build/lib/theme.js; edit the brand file
   or theme-components.css in the generator, or edit this file directly on Replit. */

:root{
  --b-fill:#f7dd23;       /* Now Assist brand colour: logo, icons, large type and fills */
  --b-ink:#7a5c00;         /* small text, icons on tints, accents that must meet 4.5:1 on white */
  --b-soft:#fff8c7;       /* tint behind icons and notes */
  /* The group stylesheet reads its accent from --ca-purple. */
  --ca-purple:#050a38; --ca-purple-deep:#1a2160; --ca-purple-soft:#fff8c7;
  --ca-start:#087bfa; --ca-build:#6b1fff;
}

/* Now Assist: yellow is a highlight, never a text colour. Buttons are navy; hover turns them yellow with navy text (the group's on-navy hover). */
.btn.primary:hover,.btn.primary:focus-visible{background:var(--b-fill);color:var(--ca-navy)}
.hero h1 em{color:var(--ca-navy);box-shadow:inset 0 -.3em 0 var(--b-fill)}
.eyebrow,.sec-head .num,.plan-cat,.promise .n{color:var(--b-ink)}
.plan-icon.purple{background:#f0eaff;color:#5a17d6}.plan-cat.purple{color:#5a17d6}
.chip.build{background:#f0eaff;color:#6b1fff}
nav.primary a[aria-current="page"]{color:var(--ca-navy);box-shadow:inset 0 -3px 0 var(--b-fill)}
.credline .dot{background:var(--b-fill)}


/* ---- Shared brand-layer components (the WD Assist brand layer, generalised) ----
   site.css and site-extra.css are the Cloud Assist Group stylesheets. The :root block above re-points the group accent and sets
   --b-fill (the brand colour for fills, icons and large type), --b-ink (the brand colour for buttons and small text) and --b-soft.
   Breakpoints follow site.css: 520, 640, 760, 900 and 1040 px. */

/* the consent banner link reads as body text at 15px, so it takes the link colour, not the brand fill */
.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}
#group .photo{margin-top:88px}
.maxw{max-width:760px}
.lede{color:var(--ca-ink)}

/* managed-support actions use the same gap as the hero button groups (as on wdassist.com) */
#managed-support .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* header and footer: the strapline logo ("A Cloud Assist company"), sized as on wdassist.com */
.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 */
.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 frame from wdassist.com, in Now Assist colours. The photo sits inside a thick navy rounded frame, with the two
   parts of the Now Assist mark drawn as outlines behind it: the purple of the N offset to the upper-left, the yellow of the
   square 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. 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;   /* yellow: 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(--ca-build);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(--b-fill);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(--b-soft);color:var(--b-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(--b-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}

/* partner or independence 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(--b-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(--b-ink);color:var(--b-ink)}

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

/* the Cloud Assist family row (About page): group and sibling brands on a navy card */
.family{background:var(--ca-navy);border-radius:14px;padding:26px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:22px 36px}
.family img{height:30px;width:auto}
.family .label{flex-basis:100%;margin:0 0 -6px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c9cde3}
@media (max-width:520px){.family{padding:20px 18px;gap:16px 24px}.family img{height:24px}}

/* pre-footer band: the group navy band with the group texture behind it. The modifier is .now, not .brand: .brand is the
   header logo link in site.css (display:flex), which shrank and centred the band's content. */
.ctaband.now{background:var(--ca-navy) url(/assets/img/brand-texture-1600.webp) center/cover no-repeat;position:relative;isolation:isolate}
.ctaband.now::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 contact page */
form.book label .opt{font-weight:400}
.formnote{background:var(--b-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}
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(--b-ink)}

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

/* QA pass carried from the WD Assist build */
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(--b-ink);outline-offset:2px}
.cta-short{display:none}
@media (max-width:520px){.cta-long{display:none}.cta-short{display:inline}}

/* legal review carried from the WD Assist build: the hidden attribute always wins, the consent banner's second layer */
[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(--b-ink);flex:none}
.consent .consent-choices .btn{justify-self:start}

/* 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}