/* HELPRITE | V11 — Mobile rhythm and balanced desktop navigation
   These rules are intentionally last: they resolve earlier layered overrides,
   without changing the client's text, routes, forms, or brand details. */

/* Place navigation at the actual centre of the header, not just between logo
   and portal. Preserve independent left and right anchor areas. */
@media (min-width:981px){
  header.top .bar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
    align-items:center;
    column-gap:18px;
  }
  header.top .bar>.logo{grid-column:1;justify-self:start;margin:0!important;min-width:0}
  header.top .bar>nav{grid-column:2;justify-self:center;position:static;min-width:0}
  header.top .bar>.portal-desktop{grid-column:3;justify-self:end;margin:0}
  header.top nav ul{justify-content:center;gap:clamp(9px,1.05vw,16px)}
  header.top nav li a{font-size:clamp(.78rem,.91vw,.94rem);white-space:nowrap}
  header.top .bar>.menu{display:none!important}
}
@media (min-width:981px) and (max-width:1110px){
 header.top .bar{column-gap:9px}
 header.top .logo img{width:146px!important}
 header.top nav ul{gap:8px!important}
 header.top nav li a{font-size:.775rem!important}
 header.top .portal-desktop{padding:9px 10px;font-size:.72rem}
 header.top .portal-desktop .material-icon{width:16px;height:16px}
}

/* Mobile cards need their own rhythm; older site.css overrides were removing
   the padding on the first card and compressing headings into its accent. */
@media(max-width:750px){
  [data-p] .three{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:16px!important;
    margin-top:25px;
    align-items:stretch;
  }
  [data-p] .three>div,
  [data-p] .three>div:first-child,
  [data-p] .three>div:last-child{
    position:relative;
    min-width:0;
    min-height:0;
    height:auto;
    padding:30px 23px 24px!important;
    margin:0;
    border:1px solid #dce5f0!important;
    border-radius:9px!important;
    background:#fff;
    box-shadow:0 8px 22px -23px rgba(17,41,76,.42);
    overflow:visible;
  }
  [data-p] .three>div::before,
  [data-p] .three>div:first-child::before,
  [data-p] .three>div:last-child::before{
    content:"";
    position:absolute;
    top:-1px;
    left:23px;
    width:40px;
    height:3px;
    border-radius:0 0 2px 2px;
    background:#2868aa;
  }
  [data-p] .three>div h3{
    margin:0 0 10px!important;
    font-size:clamp(1.13rem,4.8vw,1.31rem)!important;
    letter-spacing:-.025em;
    line-height:1.35;
    text-wrap:pretty;
    overflow-wrap:break-word;
  }
  [data-p] .three>div p{
    margin:0;
    font-size:.935rem;
    line-height:1.7;
    letter-spacing:normal;
    overflow-wrap:break-word;
  }
  [data-p] .three + p{margin-top:22px!important;line-height:1.78}

  /* Shared spacing for other cards on About, Careers, Standards, Partner,
     Contact, Vacancies, and the individual role pages. */
  [data-p] .steps{grid-template-columns:minmax(0,1fr);gap:14px}
  [data-p] .steps li{border-radius:9px;padding:23px 22px 24px;min-width:0}
  [data-p] .steps li::before{margin-bottom:14px}
  [data-p] .steps li h3{line-height:1.35;letter-spacing:-.025em}
  [data-p] .panel{border-radius:9px;padding:25px 22px}
  [data-p] .pp{border-radius:9px;min-width:0}
  [data-p] .vc{border-radius:9px;padding:20px 18px;min-width:0}
  [data-p] .vc .btn{justify-content:center}
  [data-p] .brand-card{border-radius:9px}
  [data-p] .care .card{border-radius:9px;min-width:0}
  [data-p] .route a{border-radius:9px}
  [data-p] .two, [data-p] .intro{min-width:0}
  [data-p] .two>*,[data-p] .intro>*{min-width:0}
  [data-p] .s h2{line-height:1.25;overflow-wrap:break-word}

  /* Explicitly centre the phone/email CTA line only. The original text
     and functioning tel:/mailto: links are retained. */
  [data-p] .cta .cta-contact-line,
  [data-p] .cta .w>p.cta-contact-line{
    display:block;
    width:100%;max-width:100%;
    margin:23px auto 0!important;
    padding:0 3px;
    text-align:center!important;
    line-height:1.8;
    font-size:clamp(.82rem,3.55vw,.96rem);
    overflow-wrap:break-word;
  }
  [data-p] .cta .cta-contact-line a{white-space:normal}

  /* Compact footer: company introduction spans the top; useful link lists
     form the requested two-column grid, even on small phones. */
  footer .g{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:26px 18px!important;
    align-items:start;
  }
  footer .g>div:first-child{
    grid-column:1/-1!important;
    min-width:0;
  }
  footer .g>div:nth-child(2){grid-column:1;min-width:0}
  footer .g>div:nth-child(3){grid-column:2;min-width:0}
  footer .g>div:nth-child(2),footer .g>div:nth-child(3){
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.14);
  }
  footer{padding-top:43px}
  footer h2{font-size:.75rem;letter-spacing:.12em;margin-bottom:15px}
  footer li{margin:0 0 13px!important;line-height:1.55}
  footer li a{display:inline-block;overflow-wrap:break-word;font-size:.86rem}
  footer .g>div:first-child p{font-size:.86rem;line-height:1.75}
  footer .g>div:last-child .footer-social-wrap{margin-top:19px;padding-top:17px}
  footer .g>div:last-child .footer-social-wrap .social-links{gap:7px}
  footer .g>div:last-child .footer-social-wrap .social-link{
    width:32px;height:32px;flex:none
  }
  footer .fine{margin-top:29px;padding-top:20px}
}
@media(max-width:375px){
 footer .g{gap:22px 14px!important}
 footer li a{font-size:.79rem}
 footer h2{font-size:.7rem}
 footer .g>div:last-child .footer-social-wrap .social-link{width:30px;height:30px}
 [data-p] .three>div,[data-p] .three>div:first-child,[data-p] .three>div:last-child{padding:29px 20px 22px!important}
 [data-p] .three>div::before{left:20px}
}
@media(prefers-reduced-motion:reduce){
 [data-p] .three>div:hover{transform:none!important}
}

/* The Partner healthcare text-only card has no logo. Earlier desktop grid
   reserved a 220px logo column anyway, squeezing text at tablet widths. */
[data-p="partner"] .sector.care .card{
 display:flex!important;
 flex-direction:column;
 align-items:stretch;
 gap:12px;
 min-width:0;
 padding:clamp(21px,2.1vw,29px);
 border-radius:9px;
}
[data-p="partner"] .sector.care .card > *{
 grid-column:auto!important;
 grid-row:auto!important;
 min-width:0;
}
[data-p="partner"] .sector.care .card h4{line-height:1.35;margin:0}
[data-p="partner"] .sector.care .card p{margin:0}
[data-p="partner"] .sector.care .card a{margin-top:6px}