/* ===================== NoDrama — sector landing pages =====================
   Law Firm (Figma 2891:1268) and Cyber Essentials (Figma 2945:3427) Website Maintenance,
   plus any later "v2 Solutions" sector page. Markup: inc/nodrama/sector-sections.php.
   Loads after main.css (header, footer, .nd-faq, .nd-reveal, .nd-tab) and plans.css.
   Per-page differences are modifier classes from the page config (nodrama_sectors()).
   Breakpoints follow the rest of the site: 1280 / 1100 / 767 / 480. */

body.nodrama-sector{--sc-gut:112px;--sc-pad:112px;--sc-ink:#262626;--sc-body:#6b6b6b;--sc-line:#e3e3e3;--sc-green:#00d920;--kick:20px}
body.nodrama-sector.nsc-eb-lg{--kick:8px}
body.nodrama-sector #nodrama-main{overflow-x:clip}

/* --- shared pieces --- */
.nsc-sec{padding:var(--sc-pad) var(--sc-gut)}
.nsc-wrap{max-width:1216px;margin:0 auto}
.nsc-kicker{display:flex;flex-direction:column;gap:var(--kick)}
.nsc-eyebrow{display:flex;align-items:center;gap:10px;margin:0;font-family:'League Spartan','General Sans',sans-serif;font-weight:500;font-size:14px;line-height:16.8px;letter-spacing:.14px;text-transform:uppercase;color:var(--sc-ink)}
.nsc-eyebrow::before{content:'';flex:0 0 8px;width:8px;height:8px;background:var(--sc-green)}
/* Cyber Essentials-style label: 16px square, General Sans 16px. */
.nsc-eyebrow--lg{gap:8px;font-family:'General Sans',sans-serif;font-size:16px;line-height:1.24;letter-spacing:0}
.nsc-eyebrow--lg::before{flex-basis:16px;width:16px;height:16px}
.nsc-eyebrow--light{color:#f1f1f1}
.nsc-eb-lg .nsc-eyebrow--light{color:#fff}
.nsc-h2{margin:0;font-family:'General Sans',sans-serif;font-weight:500;font-size:56px;line-height:1.04;letter-spacing:-.5px;color:var(--sc-ink)}
.nsc-g{color:var(--sc-green)}
.nsc-body{margin:0;font-family:'League Spartan','General Sans',sans-serif;font-weight:400;font-size:20px;line-height:28.44px;color:var(--sc-body)}
.nsc-ctas{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}
.nsc-arrow{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--sc-green);transition:color .2s ease}
.nsc-arrow svg{width:8px;height:12px}
.nsc-btn{display:inline-flex;align-items:center;justify-content:center;gap:2px;height:48px;padding:0 24px;border-radius:4px;background:var(--sc-ink);color:#fff;font-family:'League Spartan','General Sans',sans-serif;font-weight:500;font-size:16px;line-height:1;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
/* Figma "Button / Primary" press state (smart animate 200ms to Variant2): green fill, ink label + arrow. Hover shares it so pointer users see it too. */
.nsc-btn:hover,.nsc-btn:active,.nsc-btn:focus-visible{background:var(--sc-green);color:var(--sc-ink)}
.nsc-btn:hover .nsc-arrow,.nsc-btn:active .nsc-arrow,.nsc-btn:focus-visible .nsc-arrow{color:var(--sc-ink)}
.nsc-link{display:inline-flex;align-items:center;gap:2px;min-height:42px;color:#000;font-family:'League Spartan','General Sans',sans-serif;font-weight:500;font-size:16px;line-height:1.1;transition:gap .2s ease}
.nsc-link:hover{gap:6px}
.nsc-btn:focus-visible,.nsc-link:focus-visible,.nsc-note a:focus-visible{outline:2px solid var(--sc-green);outline-offset:3px}

/* ===================== Hero ===================== */
/* Grey left half / white right half, so the split carries on past 1440px. */
.nsc-hero{background:linear-gradient(90deg,#f1f1f1 50%,#fff 50%)}
.nsc-hero__in{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:800fr 640fr;min-height:637px;background:#fff}
.nsc-hero--evidence .nsc-hero__in{min-height:730px}
.nsc-hero__visual{position:relative;overflow:hidden;background:#f1f1f1}
.nsc-hero__copy{display:flex;flex-direction:column;gap:48px;padding:84px 120px 56px 67px;min-width:0}
.nsc-hero__head{display:flex;flex-direction:column;gap:12px}
.nsc-hero__title{margin:0;font-family:'General Sans',sans-serif;font-weight:500;font-size:56px;line-height:1.14;letter-spacing:-1.5px;color:var(--sc-ink)}
.nsc-hero__bottom{display:flex;flex-direction:column;gap:32px}
.nsc-hero__sub{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.nsc-hero__mascot{width:33px;height:35px;display:block}
.nsc-hero__mascot img{width:33px;height:35px}
.nsc-hero__rule{align-self:stretch;height:1px;background:var(--sc-line)}
.nsc-hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.nsc-fine{margin:0;font-family:'League Spartan','General Sans',sans-serif;font-size:16px;line-height:22.4px;color:var(--sc-body)}
/* Law Firm art: poster (inline background) + Dobermann centred on the floor. */
.nsc-hero__visual--dog{background-position:center top;background-size:cover;background-repeat:no-repeat}
.nsc-loop{position:absolute;inset:0;container-type:size;overflow:hidden;pointer-events:none}
.nsc-loop__stage{position:absolute;left:50%;top:0;width:max(100cqw,125.5887cqh);aspect-ratio:1600/1274;transform:translateX(-50%)}
.nsc-loop__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nsc-hero__dog{position:absolute;left:50%;bottom:0;height:84.8%;width:auto;max-width:none;transform:translateX(-50%);pointer-events:none}
/* Cyber Essentials art: an 800x730 stage that covers the column (container query units),
   pinned left so the Dobermann is never the part that gets cropped. */
.nsc-art{position:absolute;inset:0;container-type:size;overflow:hidden}
.nsc-art__stage{position:absolute;left:0;top:50%;width:max(100cqw,109.589cqh);aspect-ratio:800/730;transform:translateY(-50%)}
.nsc-art__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.nsc-art__band{position:absolute;left:6.125%;top:24.5205%;width:100%;height:80.685%;pointer-events:none}
.nsc-art__band img,.nsc-art__band canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nsc-art__dog{position:absolute;left:0;top:15.2055%;width:51.5%;height:auto;max-width:none;pointer-events:none}

/* ===================== Law Firm: SRA badge ===================== */
.nsc-badge{border-top:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line)}
.nsc-badge__in{display:flex;align-items:center;gap:80px}
.nsc-badge__copy{flex:0 1 650px;min-width:0;display:flex;flex-direction:column;gap:28px}
.nsc-badge__art{position:relative;flex:0 0 486px;width:486px;margin-left:auto;aspect-ratio:486/249;overflow:hidden;background:#fff}
.nsc-badge__art img{width:100%;height:100%;object-fit:cover}

/* ===================== Law Firm: why it recurs ===================== */
.nsc-turn__in{display:flex;align-items:flex-start;gap:80px}
.nsc-turn__head{flex:0 0 560px;display:flex;flex-direction:column;gap:20px}
.nsc-turn__body{flex:1;min-width:0;padding-top:37px;display:flex;flex-direction:column;gap:28px}
.nsc-turn__title2{max-width:560px}
.nsc-note{display:flex;align-items:center;gap:14px;margin:0;padding-top:20px;border-top:1px solid var(--sc-line);font-family:'League Spartan','General Sans',sans-serif;font-size:20px;line-height:28.44px;color:var(--sc-body)}
.nsc-note::before{content:'';flex:0 0 8px;width:8px;height:8px;background:var(--sc-green)}
.nsc-note a{color:var(--sc-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.nsc-note a:hover{color:#000;text-decoration-color:var(--sc-green)}

/* ===================== Law Firm: where we start ===================== */
.nsc-start{background:#f1f1f1;border-top:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line);padding:30px var(--sc-gut)}
.nsc-start__in{display:flex;align-items:flex-start;gap:80px}
.nsc-start__art{flex:0 1 565px;min-width:0}
.nsc-start__art img{width:100%;height:auto}
.nsc-start__copy{flex:0 1 566px;min-width:0;padding-top:82px;display:flex;flex-direction:column;gap:20px}

/* ===================== Cyber: intro + photo ===================== */
/* The photo runs the full height of the band (no vertical padding), text centred beside it. */
.nsc-intro{background:#fff;padding:0 var(--sc-gut)}
.nsc-intro__in{display:flex;align-items:center;justify-content:space-between;gap:56px}
.nsc-intro__copy{flex:0 1 828px;min-width:0;display:flex;flex-direction:column;gap:28px}
.nsc-intro__art{flex:0 0 319px;width:319px}
.nsc-intro__art img{width:100%;height:auto}

/* ===================== What we hold ===================== */
.nsc-hold{background:#262626;padding-top:96px}
.nsc-hold__in{display:flex;flex-direction:column;gap:56px}
.nsc-hold .nsc-h2{color:#f1f1f1}
.nsc-hold__grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #6b6b6b;border-left:1px solid #6b6b6b}
.nsc-hold__card{display:flex;align-items:flex-end;gap:40px;padding:41px 41px 48px;border-right:1px solid #6b6b6b;border-bottom:1px solid #6b6b6b;min-width:0}
.nsc-hold__tg{flex:0 0 220px;display:flex;flex-direction:column;gap:20px}
.nsc-hold__ic{width:48px;height:48px;display:block}
.nsc-hold__ic img{width:48px;height:48px;object-fit:contain}
.nsc-hold__t{margin:0;font-family:'League Spartan','General Sans',sans-serif;font-weight:500;font-size:24px;line-height:28.8px;color:#fff}
.nsc-hold__d{flex:1;min-width:0;margin:0;font-family:'League Spartan','General Sans',sans-serif;font-size:16px;line-height:22.4px;color:rgba(241,241,241,.64)}

/* ===================== Monthly report ===================== */
.nsc-report{--sc-pad:96px}
.nsc-report--grey{background:#f1f1f1}
.nsc-report--white{background:#fff}
.nsc-report__in{display:flex;align-items:center;gap:80px}
.nsc-report__art{flex:0 1 560px;min-width:0}
.nsc-report__art img{width:100%;height:auto}
.nsc-report__copy{flex:0 1 608px;min-width:0;display:flex;flex-direction:column;gap:28px}
.nsc-eb-sm .nsc-report__copy{flex-basis:576px}
.nsc-eb-sm .nsc-report .nsc-kicker{--kick:28px}
.nsc-report__txt{display:flex;flex-direction:column;gap:28px}
.nsc-eb-lg .nsc-report__txt{gap:20px}
.nsc-close{display:flex;gap:20px;padding:4px 0}
.nsc-close::before{content:'';flex:0 0 4px;width:4px;background:var(--sc-green)}
.nsc-close p{margin:0;font-family:'General Sans',sans-serif;font-weight:500;font-size:22px;line-height:1.24;letter-spacing:-.72px;color:var(--sc-ink)}
/* Report visual, layered (see nodrama_sc_report_art): animated grid strips under the cards. */
.nsc-rv{position:relative;container-type:inline-size;width:100%;aspect-ratio:560/604;overflow:hidden;background:radial-gradient(ellipse 45.4545% 45.4545% at 50% 63.6364%,rgba(0,217,32,.14),rgba(0,217,32,0)),#fbfbfb}
.nsc-rv::after{content:'';position:absolute;inset:0;border:1px solid var(--sc-line);pointer-events:none}
.nsc-rv__grid{position:absolute;inset:0;opacity:.24}
.nsc-rv__strip{position:absolute;top:4.7185%;width:30.3646%;height:90.8148%}
.nsc-rv .nsc-rv__strip img{position:absolute;left:0;top:0;width:322.5806%;height:30.9997%;max-width:none;transform-origin:0 0;transform:rotate(-90deg) translateX(-100%)}
.nsc-rv .nsc-rv__card{position:absolute;display:block;max-width:none}
.nsc-rv__card--main{box-shadow:0 2.8571cqw 7.1429cqw rgba(0,0,0,.08)}
.nsc-rv__card--btn{box-shadow:0 1.4286cqw 3.5714cqw rgba(0,0,0,.18)}
.nsc-rv__card--pop{box-shadow:0 2.1429cqw 5.7143cqw rgba(0,0,0,.10)}

/* ===================== Plans ===================== */
.nsc-plans{background:#fff;--sc-pad:96px;scroll-margin-top:69px}
.nsc-plans__in{display:flex;flex-direction:column;gap:40px}
.nsc-plans__head{align-items:center;text-align:center;--kick:20px}
.nsc-plans__notes{display:flex;align-items:center;justify-content:space-between;gap:32px}
.nsc-plans__notes .nsc-body{max-width:681px}
.nsc-plans__notes .nsc-link{flex:none}
.nsc-trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:18px 24px;background:#fbfbfb;border:1px solid var(--sc-line)}
.nsc-trust__item{display:inline-flex;align-items:flex-start;gap:10px;font-family:'League Spartan','General Sans',sans-serif;font-size:16px;line-height:22.4px;color:var(--sc-ink)}
.nsc-trust__item::before{content:'';flex:0 0 6px;width:6px;height:6px;margin-top:8px;background:var(--sc-green)}

/* ===================== Who we work with ===================== */
.nsc-fit{background:#fbfbfb;border-top:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line);--sc-pad:96px}
.nsc-fit__main{display:flex;flex-direction:column;gap:40px;min-width:0}
.nsc-fit__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.nsc-fit--split .nsc-fit__in{display:flex;align-items:flex-start;justify-content:space-between;gap:56px}
.nsc-fit--split .nsc-fit__main{flex:0 1 620px}
.nsc-fit--split .nsc-fit__grid{grid-template-columns:1fr}
.nsc-fit__art{flex:0 1 522px;min-width:0}
.nsc-fit__art img{width:100%;height:auto;aspect-ratio:522/678;object-fit:cover}
.nsc-fit__card{position:relative;display:flex;flex-direction:column;gap:20px;padding:40px;background:#fff;border:1px solid var(--sc-line);min-width:0}
.nsc-fit__card--yes::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:4px;background:var(--sc-green)}
.nsc-fit__tr{display:flex;align-items:center;gap:12px}
.nsc-fit__mark{position:relative;flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--sc-green)}
.nsc-fit__mark svg{width:11px;height:8px}
.nsc-fit__card--no .nsc-fit__mark{background:#6b6b6b}
.nsc-fit__card--no .nsc-fit__mark::after{content:'';width:12px;height:2px;background:#fff}
.nsc-fit__t{margin:0;font-family:'General Sans',sans-serif;font-weight:500;font-size:28px;line-height:33.6px;letter-spacing:-.1px;color:var(--sc-ink)}

/* ===================== CTA + onboarding ===================== */
.nsc-cta{background:#262626;--sc-pad:56px}
.nsc-cta__box{display:flex;align-items:stretch}
.nsc-cta__main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:72px;padding:48px 40px 40px;background:#f1f1f1;border:1px solid var(--sc-line);overflow:hidden}
.nsc-cta__content{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
/* The animated grey pixel grid (same animation as the Solutions mega-menu card), showing its top rows like the Figma crop. */
.nsc-cta__grid{width:100%;max-width:726px;height:86px;background:url(../img/asset/grid.webp) 0 -5px/100% auto no-repeat}
.nsc-ob{flex:0 0 403px;display:flex;flex-direction:column;background:#fbfbfb}
.nsc-ob__head{margin:0;padding:24px;background:#131313;color:#fff;font-family:'League Spartan','General Sans',sans-serif;font-weight:500;font-size:14px;line-height:16.8px;letter-spacing:.14px;text-transform:uppercase}
.nsc-ob__item{flex:1 1 auto;display:flex;align-items:flex-start;gap:20px;padding:28px 24px;border-bottom:1px solid var(--sc-line)}
.nsc-ob__item:first-of-type{flex:0 0 auto;min-height:125px}
.nsc-ob__item img{flex:0 0 48px;width:48px;height:48px}
.nsc-ob__item p{margin:0;font-family:'League Spartan','General Sans',sans-serif;font-size:20px;line-height:28.44px;color:var(--sc-ink)}

/* ===================== FAQ (main.css .nd-faq) ===================== */
.nd-faq.nsc-faq{max-width:1440px;width:100%;margin:0 auto;justify-content:space-between;padding:56px var(--sc-gut)}
.nsc-faq .nd-faq__a-inner{max-width:none}
.nsc-faq .nd-faq__item.is-open .nd-faq__a{max-height:420px}

/* ===================== Responsive ===================== */
@media(max-width:1280px){
 body.nodrama-sector{--sc-gut:64px}
 .nsc-hero__copy{padding:72px 56px 56px 56px}
 .nsc-hero__title{font-size:50px}
 .nsc-badge__in,.nsc-turn__in,.nsc-start__in,.nsc-report__in,.nsc-intro__in,.nsc-fit--split .nsc-fit__in{gap:48px}
 .nsc-badge__art{flex-basis:420px;width:420px}
 .nsc-turn__head{flex-basis:46%}
 .nsc-start__copy{padding-top:40px}
 .nsc-hold__card{flex-direction:column;align-items:flex-start;gap:16px}
 .nsc-hold__tg{flex:none}
 .nsc-ob{flex-basis:340px}
}
@media(max-width:1100px){
 body.nodrama-sector{--sc-gut:40px;--sc-pad:72px}
 .nsc-report,.nsc-plans,.nsc-fit{--sc-pad:72px}
 .nsc-cta{--sc-pad:40px}
 .nsc-h2,.nsc-hero__title{font-size:40px;line-height:1.08;letter-spacing:-.5px}
 .nsc-body,.nsc-note,.nsc-ob__item p{font-size:18px;line-height:1.5}
 /* Hero: copy first, the art underneath. */
 .nsc-hero{background:#fff}
 .nsc-hero__in,.nsc-hero--evidence .nsc-hero__in{grid-template-columns:1fr;min-height:0}
 .nsc-hero__copy{order:-1;padding:48px var(--sc-gut) 40px;gap:36px}
 .nsc-hero__visual{height:clamp(340px,62vw,560px)}
 .nsc-hero--evidence .nsc-hero__visual{height:auto;aspect-ratio:800/730;max-height:620px}
 .nsc-badge__in,.nsc-turn__in,.nsc-start__in,.nsc-report__in{flex-direction:column;align-items:stretch;gap:40px}
 .nsc-badge__copy{flex:none}
 .nsc-badge__art{flex:none;width:100%;max-width:486px;margin:0}
 .nsc-turn__head{flex:none}
 .nsc-turn__body{padding-top:0}
 .nsc-start{padding:56px var(--sc-gut)}
 .nsc-start__art{flex:none;width:100%;max-width:480px;margin:0 auto}
 .nsc-start__copy{flex:none;padding-top:0;order:-1}
 .nsc-report__art{flex:none;width:100%;max-width:520px;margin:0 auto}
 .nsc-report__copy,.nsc-eb-sm .nsc-report__copy{flex:none;order:-1}
 .nsc-intro{padding-top:56px}
 .nsc-intro__in{flex-direction:column;align-items:stretch;gap:32px}
 .nsc-intro__copy{flex:none}
 .nsc-intro__art{flex:none;width:100%;max-width:300px;align-self:flex-end}
 .nsc-fit--split .nsc-fit__in{flex-direction:column;align-items:stretch;gap:40px}
 .nsc-fit--split .nsc-fit__main{flex:none}
 .nsc-fit__art{flex:none;width:100%;max-width:480px;margin:0 auto;order:2}
 .nsc-plans__notes{flex-direction:column;align-items:flex-start;gap:12px}
 .nsc-cta__box{flex-direction:column}
 .nsc-cta__main{gap:48px}
 .nsc-ob{flex:none}
 .nsc-ob__item:first-of-type{min-height:0}
 .nd-faq.nsc-faq{padding:48px var(--sc-gut)}
}
@media(max-width:767px){
 body.nodrama-sector{--sc-gut:24px;--sc-pad:56px}
 .nsc-report,.nsc-plans,.nsc-fit{--sc-pad:56px}
 .nsc-cta.nsc-sec{padding:24px 0}
 .nsc-hold__grid{grid-template-columns:1fr}
 .nsc-hold__card{padding:28px 24px 32px}
 .nsc-fit__grid{grid-template-columns:1fr}
 .nsc-fit__card{padding:32px 24px}
 .nsc-cta__main{padding:40px 24px 32px;border-left:0;border-right:0}
 .nsc-trust{flex-direction:column;align-items:flex-start;padding:16px 20px}
 .nsc-intro__art{max-width:240px}
}
@media(max-width:480px){
 .nsc-h2,.nsc-hero__title{font-size:34px}
 .nsc-fit__t{font-size:24px;line-height:1.2}
 .nsc-close p{font-size:20px}
 .nsc-hero__visual{height:340px}
 .nsc-hero--evidence .nsc-hero__visual{height:auto}
}
@media (prefers-reduced-motion:reduce){
 .nsc-btn,.nsc-link,.nsc-arrow{transition:none}
}

/* ===================== Image variants (Accounting: static hero, portal, bled maze) ===================== */
.nsc-hero--image .nsc-hero__in{min-height:730px}
.nsc-hero__visual--image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.nsc-badge--img{padding-top:64px;padding-bottom:64px}
.nsc-badge--img .nsc-badge__art{flex:0 1 522px;width:auto;aspect-ratio:auto;overflow:visible;background:none}
.nsc-badge--img .nsc-badge__art img{height:auto;object-fit:fill}
/* The maze runs to the page's left edge at 1440; wider screens keep the whole row centred on the 1216 wrap. */
.nsc-start--bleed{background:#fbfbfb;padding:0 var(--sc-gut) 80px 0}
.nsc-start--bleed .nsc-start__in{max-width:calc(1216px + var(--sc-gut))}
.nsc-start--bleed .nsc-start__art{flex:0 1 672px}
.nsc-start--bleed .nsc-start__copy{flex:0 1 576px;padding-top:111px}
@media(max-width:1280px){
 .nsc-start--bleed .nsc-start__copy{padding-top:56px}
}
@media(max-width:1100px){
 .nsc-hero--image .nsc-hero__in{min-height:0}
 .nsc-badge--img{padding-top:var(--sc-pad);padding-bottom:var(--sc-pad)}
 .nsc-badge--img .nsc-badge__art{flex:none;width:100%;max-width:480px;margin:0 auto}
 .nsc-start--bleed{padding:56px var(--sc-gut)}
 .nsc-start--bleed .nsc-start__in{max-width:none}
 .nsc-start--bleed .nsc-start__art{flex:none;width:100%;max-width:520px;margin:0 auto}
 /* The maze file is a 700x600 canvas but only x0-602, y136-402 is ever drawn: show just that strip so no blank patch sits under it. */
 .nsc-start--bleed .nsc-start__art{aspect-ratio:602/266;overflow:hidden}
 .nsc-start--bleed .nsc-start__art img{width:116.279%;max-width:none;margin-top:-22.591%}
 .nsc-start--bleed .nsc-start__copy{flex:none;padding-top:0}
}