/* Staff Wise: the same modular brand system across every inner page. */
body:is([data-page="services"],[data-page="detail"],[data-page="about"],[data-page="careers"],[data-page="contact"]) main{padding-top:var(--gap);padding-bottom:var(--gap)}
body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro{position:relative;isolation:isolate;background:var(--violet);color:#fff;border-radius:var(--radius);padding:clamp(30px,5vw,66px);margin-bottom:var(--gap);overflow:hidden}
body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro::after{content:'✳';position:absolute;z-index:-1;right:35px;bottom:-52px;color:var(--lime);font-size:285px;line-height:1;opacity:.16;transform:rotate(12deg)}
body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro .eyebrow{color:var(--lime)}
body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro h1{font-size:clamp(40px,5.4vw,76px);max-width:1040px}
body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro .muted{color:var(--lime)}
body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro>p:not(.eyebrow){color:#eeebff;max-width:600px;font-size:17px}

/* The directory behaves as a set of independent, colour-coded service blocks. */
body[data-page="services"] .service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--gap)}
body[data-page="services"] .service-card{--card-bg:var(--ink);--card-ink:#fff;position:relative;min-height:330px;padding:30px;border:0;border-radius:var(--radius);background:var(--card-bg);color:var(--card-ink);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;overflow:hidden}
body[data-page="services"] .service-card:nth-child(3n+2){--card-bg:var(--lime);--card-ink:var(--ink)}
body[data-page="services"] .service-card:nth-child(3n){--card-bg:var(--violet);--card-ink:#fff}
body[data-page="services"] .service-card:nth-child(4){--card-bg:#fff;--card-ink:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
body[data-page="services"] .service-card:last-child{--card-bg:var(--lime);--card-ink:var(--ink);grid-column:1/-1;min-height:230px;display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
body[data-page="services"] .service-card:last-child .eyebrow{grid-column:1/-1}
body[data-page="services"] .service-card:last-child h2{margin-top:22px}
body[data-page="services"] .service-card:last-child>p{margin-top:20px}
body[data-page="services"] .service-card:last-child .text-link{grid-column:2}
body[data-page="services"] .service-card .eyebrow{color:var(--card-ink);opacity:.78;margin:0;padding-right:30px}
body[data-page="services"] .service-card h2{font-size:clamp(26px,2.65vw,36px);margin-top:48px;max-width:300px;line-height:1.05}
body[data-page="services"] .service-card>p:not(.eyebrow){color:var(--card-ink);opacity:.82;font-size:14px;margin-top:20px;margin-bottom:24px}
body[data-page="services"] .service-card .text-link{color:var(--card-ink);border-color:currentColor;align-self:flex-start;margin-top:auto;width:max-content;max-width:100%;font-size:12px}
body[data-page="services"] .service-card::after{content:'↗';position:absolute;right:25px;top:24px;font-size:27px;line-height:1;color:var(--card-ink)}
body[data-page="services"] .service-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px #15171c16}
body[data-page="services"] .service-card:focus-visible{outline-color:var(--violet);outline-offset:4px}

/* Detail pages and careers share an image + statement pair. */
body:is([data-page="detail"],[data-page="careers"]) .detail-hero{grid-template-columns:1.05fr 1fr;gap:var(--gap);padding:0;margin-bottom:var(--gap);align-items:stretch}
body:is([data-page="detail"],[data-page="careers"]) .detail-hero>div{background:var(--ink);color:#fff;padding:clamp(30px,4vw,54px);border-radius:var(--radius);min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:500px}
body:is([data-page="detail"],[data-page="careers"]) .detail-hero>img{border-radius:var(--radius);height:100%;min-height:500px;object-fit:cover}
body:is([data-page="detail"],[data-page="careers"]) .detail-hero h1{font-size:clamp(42px,4.8vw,68px);line-height:1.02}
body:is([data-page="detail"],[data-page="careers"]) .detail-hero .eyebrow{color:var(--lime);margin-top:26px}
body:is([data-page="detail"],[data-page="careers"]) .detail-hero .hero-desc{color:#d7d8df;font-size:16px;max-width:480px}
body:is([data-page="detail"],[data-page="careers"]) .detail-hero .back-link{color:#d7d8df}
body[data-page="careers"] .detail-hero .eyebrow{margin-top:0}
body[data-page="detail"] .detail-content{grid-template-columns:1.05fr 1fr;gap:var(--gap);padding:0;margin-bottom:var(--gap);align-items:start}
body[data-page="detail"] .detail-content>div:first-child{padding:clamp(28px,3.4vw,46px);background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
body[data-page="detail"] .detail-content h2{font-size:clamp(32px,3.2vw,44px)}
body[data-page="detail"] .detail-content p{font-size:15px;line-height:1.75;color:#575965}
body[data-page="detail"] .detail-content .eyebrow{color:var(--violet);margin-top:0}
body[data-page="detail"] .offer-list{padding:clamp(28px,3.4vw,46px);background:var(--violet);color:#fff;border-radius:var(--radius)}
body[data-page="detail"] .offer-list h2{font-size:31px;margin-bottom:28px}
body[data-page="detail"] .offer-list>div{border-top:1px solid #ffffff3d;padding:16px 0;font-size:14px;line-height:1.6}
body[data-page="detail"] .offer-list>div>span{color:var(--lime);font-size:19px}
body[data-page="detail"] .service-note{border-color:var(--violet);background:var(--paper);padding:15px 18px;border-radius:0 6px 6px 0}

/* Brand story: the photograph, statement and values each stand on their own. */
body[data-page="about"] .about-wide{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap);background:transparent;border-radius:0;overflow:visible;margin-bottom:var(--gap)}
body[data-page="about"] .about-wide>img{width:100%;height:430px;border-radius:var(--radius);object-fit:cover;object-position:center 40%}
body[data-page="about"] .about-wide-label{height:100%;align-self:stretch;display:flex;align-items:center;background:var(--lime);color:var(--ink);border-radius:var(--radius);padding:35px;font-size:clamp(38px,4.4vw,61px);line-height:1.04;letter-spacing:-.05em}
body:is([data-page="about"],[data-page="careers"]) .editorial{grid-template-columns:1fr 2fr;gap:40px;padding:clamp(30px,4vw,54px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--gap)}
body:is([data-page="about"],[data-page="careers"]) .editorial h2{font-size:clamp(32px,3.5vw,46px)}
body:is([data-page="about"],[data-page="careers"]) .editorial p:not(.eyebrow){font-size:16px;line-height:1.75;color:#575965}
body:is([data-page="about"],[data-page="careers"]) .editorial .eyebrow{color:var(--violet)}
body[data-page="about"] .values{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);padding:0;margin-bottom:var(--gap)}
body[data-page="about"] .values article{--value-bg:var(--ink);--value-ink:#fff;display:flex;flex-direction:column;padding:32px;background:var(--value-bg);color:var(--value-ink);border:0;border-radius:var(--radius);min-height:290px}
body[data-page="about"] .values article:nth-child(2){--value-bg:var(--violet);--value-ink:#fff}
body[data-page="about"] .values article:nth-child(3){--value-bg:var(--lime);--value-ink:var(--ink)}
body[data-page="about"] .values article>span{color:var(--value-ink);font-size:11px;opacity:.7}
body[data-page="about"] .values h3{font-size:28px;margin:43px 0 22px}
body[data-page="about"] .values p{color:var(--value-ink);opacity:.82;font-size:14px;line-height:1.7}
body[data-page="about"] .sectors{width:calc(100% - 112px);max-width:1280px;margin:0 auto var(--gap);padding:clamp(30px,4vw,54px);background:var(--ink);color:#fff;border-radius:var(--radius)}
body[data-page="about"] .sectors>.wrap{width:100%;max-width:none}
body[data-page="about"] .sectors .eyebrow{color:var(--lime)}
body[data-page="about"] .sectors h2{font-size:clamp(32px,3.7vw,50px)}
body[data-page="about"] .sectors>.wrap>p:not(.eyebrow){color:#d7d8df;font-size:16px;line-height:1.75}

/* Opportunities stay explicit about role availability, in a compact block grid. */
body[data-page="careers"] .opportunities{padding:0;margin-bottom:var(--gap)}
body[data-page="careers"] .opportunities .section-heading{background:var(--violet);color:#fff;border-radius:var(--radius);padding:38px 42px;margin-bottom:var(--gap);gap:45px}
body[data-page="careers"] .opportunities .section-heading .eyebrow{color:var(--lime)}
body[data-page="careers"] .opportunities .section-heading>p{color:#eee9ff;max-width:400px;font-size:14px}
body[data-page="careers"] .role-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
body[data-page="careers"] .role-list a{--role-bg:#fff;--role-ink:var(--ink);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:170px;gap:30px;padding:30px;background:var(--role-bg);color:var(--role-ink);border:1px solid var(--line);border-radius:var(--radius);font-size:26px;line-height:1.13;letter-spacing:-.035em;transition:transform .2s}
body[data-page="careers"] .role-list a:nth-child(4n+2){--role-bg:var(--ink);--role-ink:#fff;border-color:var(--ink)}
body[data-page="careers"] .role-list a:nth-child(4n+3){--role-bg:var(--lime);--role-ink:var(--ink);border-color:var(--lime)}
body[data-page="careers"] .role-list a:nth-child(4n+4){--role-bg:var(--violet);--role-ink:#fff;border-color:var(--violet)}
body[data-page="careers"] .role-action{font-size:12px;letter-spacing:0;max-width:none;text-align:left;border-bottom:1px solid currentColor;padding-bottom:7px}
body[data-page="careers"] .role-list a:hover{transform:translateY(-3px)}
body[data-page="careers"] .careers-help{margin-top:var(--gap);padding:28px 32px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
body[data-page="careers"] .careers-help p{color:#575965;font-size:14px}
body[data-page="careers"] .careers-help .text-link{color:var(--violet);border-color:var(--violet)}

/* Contact stays practical and readable beside a clear, high-contrast form. */
body[data-page="contact"] .contact-layout{grid-template-columns:.9fr 1.2fr;gap:var(--gap);padding:0;margin-bottom:var(--gap);align-items:start}
body[data-page="contact"] .contact-details{display:block;background:var(--ink);color:#fff;padding:clamp(28px,3.4vw,46px);border-radius:var(--radius)}
body[data-page="contact"] .contact-details h2{font-size:35px}
body[data-page="contact"] .contact-big{font-size:clamp(19px,2vw,26px);overflow-wrap:anywhere;border-bottom:1px solid #ffffff30;padding-bottom:16px;margin-block:20px}
body[data-page="contact"] .address .eyebrow{color:var(--lime)}
body[data-page="contact"] .address p:not(.eyebrow){color:#d7d8df;line-height:1.7}
body[data-page="contact"] .address .text-link{color:#fff;border-color:#ffffff6b}
body[data-page="contact"] .contact-aside{background:var(--lime);color:var(--ink);border-radius:10px;gap:19px;padding:25px;margin-top:40px}
body[data-page="contact"] .contact-aside>span{color:var(--violet);font-size:57px}
body[data-page="contact"] .contact-aside p{color:var(--ink);line-height:1.7;font-size:13px}
body[data-page="contact"] .form-panel{padding:clamp(26px,3.4vw,46px);background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
body[data-page="contact"] .form-panel>h2{font-size:34px}
body[data-page="contact"] .form-panel>p{color:#575965;line-height:1.7}
body[data-page="contact"] .form-panel input,body[data-page="contact"] .form-panel select,body[data-page="contact"] .form-panel textarea{background:var(--paper);border-color:#d6d2df;border-radius:7px}
body[data-page="contact"] .form-panel .button{background:var(--violet);border-color:var(--violet);color:#fff}
body[data-page="contact"] .form-panel .button:hover{background:#572cdb;border-color:#572cdb}
body[data-page="contact"] .form-note{color:#6b6774}
body[data-page="contact"] .enquiry-result{border-color:var(--line)}
body[data-page="contact"] .enquiry-result pre{border:1px solid var(--line);border-radius:7px}

/* The CTA is one more reusable block, with room for copy and a clear action. */
body:is([data-page="services"],[data-page="detail"],[data-page="about"],[data-page="careers"]) .cta-band{margin-block:var(--gap) 0;background:var(--lime);color:var(--ink);border-radius:var(--radius);padding:clamp(30px,4vw,50px);min-height:230px}
body:is([data-page="services"],[data-page="detail"],[data-page="about"],[data-page="careers"]) .cta-band .eyebrow{color:var(--ink)}
body:is([data-page="services"],[data-page="detail"],[data-page="about"],[data-page="careers"]) .cta-band h2{font-size:clamp(30px,3.6vw,48px)}
body:is([data-page="services"],[data-page="detail"],[data-page="about"],[data-page="careers"]) .cta-band .button{background:var(--ink);border-color:var(--ink);color:#fff;flex-shrink:0}
body:is([data-page="services"],[data-page="detail"],[data-page="about"],[data-page="careers"]) .cta-band .button:hover{background:var(--violet);border-color:var(--violet)}

@media(max-width:1100px){
 body[data-page="services"] .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-page="about"] .sectors{width:calc(100% - 70px)}
 body[data-page="about"] .values article{padding:27px}
 body[data-page="about"] .values h3{font-size:25px}
 body[data-page="contact"] .contact-layout{grid-template-columns:1fr 1.15fr}
}
@media(max-width:800px){
 body[data-page="about"] .sectors{width:calc(100% - 44px)}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero>div{padding:30px;min-height:450px}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero>img{min-height:450px}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero h1{font-size:43px}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero .hero-desc{font-size:14px}
 body[data-page="about"] .values{gap:14px}
 body[data-page="about"] .values article{padding:23px}
 body[data-page="about"] .values h3{font-size:23px}
 body[data-page="about"] .about-wide{grid-template-columns:1.6fr 1fr}
 body[data-page="about"] .about-wide>img{height:360px}
 body[data-page="about"] .about-wide-label{font-size:39px;padding:25px}
 body[data-page="contact"] .contact-layout{grid-template-columns:1fr}
 body[data-page="contact"] .contact-details{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
 body[data-page="contact"] .contact-details h2{grid-column:1/-1}
 body[data-page="contact"] .contact-details .address{grid-column:2;grid-row:2/4;margin-top:0}
 body[data-page="contact"] .contact-big{font-size:19px;margin-block:14px}
 body[data-page="contact"] .contact-aside{grid-column:1/-1;margin-top:25px}
}
@media(max-width:768px){
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero{grid-template-columns:1fr}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero>div{min-height:0;padding:36px}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero>img{height:340px;min-height:0}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero h1{font-size:clamp(43px,7.5vw,60px)}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero .hero-desc{font-size:16px}
 body[data-page="detail"] .detail-content{grid-template-columns:1fr}
 body[data-page="about"] .values{grid-template-columns:1fr}
 body[data-page="about"] .values article{display:grid;grid-template-columns:36px 1fr;padding:30px;min-height:0;gap:0 20px}
 body[data-page="about"] .values h3{margin:0;font-size:27px}
 body[data-page="about"] .values p{grid-column:2;margin-top:18px}
 body:is([data-page="about"],[data-page="careers"]) .editorial{grid-template-columns:1fr;gap:0}
 body[data-page="careers"] .opportunities .section-heading{display:block;padding:32px}
 body[data-page="careers"] .opportunities .section-heading>p{max-width:560px}
 body[data-page="careers"] .role-list a{font-size:23px;padding:26px}
}
@media(max-width:560px){
 body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro{padding:30px 25px}
 body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro h1{font-size:clamp(34px,9vw,47px);letter-spacing:-.05em;line-height:1.07;overflow-wrap:normal}
 body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro>p:not(.eyebrow){font-size:15px;margin-top:25px}
 body:is([data-page="services"],[data-page="about"],[data-page="contact"]) .page-intro::after{font-size:210px;right:-25px;bottom:-45px}
 body[data-page="services"] .service-grid{grid-template-columns:1fr}
 body[data-page="services"] .service-card{padding:28px;min-height:300px}
 body[data-page="services"] .service-card h2{font-size:32px;margin-top:44px}
 body[data-page="services"] .service-card:last-child{display:flex;min-height:300px;gap:0;grid-column:auto}
 body[data-page="services"] .service-card:last-child h2{margin-top:44px}
 body[data-page="services"] .service-card:last-child .text-link{margin-top:auto}
 body[data-page="services"] .service-card .text-link{font-size:13px}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero>div{padding:30px 25px}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero h1{font-size:clamp(40px,10.7vw,55px)}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero .hero-desc{font-size:15px;line-height:1.7;margin-top:25px}
 body:is([data-page="detail"],[data-page="careers"]) .detail-hero>img{height:280px;min-height:0;border-radius:var(--radius)}
 body[data-page="detail"] .detail-content>div:first-child,body[data-page="detail"] .offer-list{padding:28px 25px}
 body[data-page="detail"] .detail-content h2{font-size:33px}
 body[data-page="detail"] .detail-content p{font-size:14px}
 body[data-page="detail"] .offer-list h2{font-size:28px}
 body[data-page="detail"] .offer-list>div{font-size:13px}
 body[data-page="about"] .about-wide{grid-template-columns:1fr}
 body[data-page="about"] .about-wide>img{height:280px}
 body[data-page="about"] .about-wide-label{padding:28px;font-size:43px;min-height:180px;display:block}
 body[data-page="about"] .about-wide-label br{display:initial}
 body[data-page="about"] .about-wide-label br::after{content:none}
 body:is([data-page="about"],[data-page="careers"]) .editorial{padding:28px 25px}
 body:is([data-page="about"],[data-page="careers"]) .editorial h2{font-size:33px}
 body:is([data-page="about"],[data-page="careers"]) .editorial p:not(.eyebrow){font-size:14px}
 body[data-page="about"] .values article{padding:28px 25px;grid-template-columns:25px 1fr;gap:0 16px}
 body[data-page="about"] .values h3{font-size:25px}
 body[data-page="about"] .values p{font-size:13px}
 body[data-page="about"] .sectors{width:calc(100% - 40px);padding:30px 25px}
 body[data-page="about"] .sectors h2{font-size:33px}
 body[data-page="about"] .sectors>.wrap>p:not(.eyebrow){font-size:14px}
 body[data-page="careers"] .opportunities .section-heading{padding:30px 25px}
 body[data-page="careers"] .opportunities .section-heading h2{font-size:34px}
 body[data-page="careers"] .opportunities .section-heading>p{font-size:13px}
 body[data-page="careers"] .role-list{grid-template-columns:1fr}
 body[data-page="careers"] .role-list a{padding:26px;min-height:165px;font-size:27px;gap:30px}
 body[data-page="careers"] .role-action{font-size:12px}
 body[data-page="careers"] .careers-help{padding:25px}
 body[data-page="careers"] .careers-help .text-link{font-size:12px}
 body[data-page="contact"] .contact-details{display:block;padding:30px 25px}
 body[data-page="contact"] .contact-details h2{font-size:31px}
 body[data-page="contact"] .contact-details .address{margin-top:35px}
 body[data-page="contact"] .contact-big{font-size:21px}
 body[data-page="contact"] .contact-aside{padding:24px 20px;margin-top:30px;gap:18px}
 body[data-page="contact"] .contact-aside>span{font-size:46px}
 body[data-page="contact"] .form-panel{padding:30px 25px}
 body[data-page="contact"] .form-panel>h2{font-size:31px}
 body[data-page="contact"] .form-panel>p{font-size:13px}
 body[data-page="contact"] .form-panel input,body[data-page="contact"] .form-panel select,body[data-page="contact"] .form-panel textarea{font-size:16px}
 body:is([data-page="services"],[data-page="detail"],[data-page="about"],[data-page="careers"]) .cta-band{padding:30px 25px;min-height:0}
 body:is([data-page="services"],[data-page="detail"],[data-page="about"],[data-page="careers"]) .cta-band h2{font-size:31px}
 body:is([data-page="services"],[data-page="detail"],[data-page="about"],[data-page="careers"]) .cta-band .button{margin-top:25px}
}