/* ==========================================================================
   REPLACE THIS FILE with your ORIGINAL assets/css/style.css (unchanged).
   It was referenced by index.html but was not included in the upload, so the
   design values cannot be reproduced from the HTML alone. All class names in
   the templates are identical to the HTML, so the original file styles the
   WordPress page 1:1.
   ========================================================================== */
/* ==========================================================================
   Homepage styles (hp- prefix). Tokens, header, nav and footer are in /style.css
   ========================================================================== */

/* ---------- Shared pieces ---------- */
.hp-section{box-sizing:border-box}
.hp-inner{max-width:1360px;margin:0 auto;padding:144px 40px}
.hp-eyebrow{margin:0 0 28px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.hp-eyebrow--mint{color:var(--mint)}
.hp-h2{margin:0;font-weight:400;line-height:1.04;letter-spacing:-.045em}

.hp-btn{display:inline-block;text-decoration:none;background:#fff;color:#07071a;font-weight:500;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:19px 32px;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.hp-btn:hover{color:#07071a;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.hp-phone{text-decoration:none;color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.5)}
.hp-phone:hover{color:#fff}
.hp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:44px}

/* Person (avatar + name + role) */
.person__img{border-radius:50%;object-fit:cover;filter:grayscale(1);flex:none;display:block}
.person__text{display:flex;flex-direction:column;gap:5px}
.person__name{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.person__role{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Colour themes for cards */
.theme-blue{background:var(--g-blue)}
.theme-purple{background:var(--g-purple)}
.theme-green{background:var(--g-green)}
.theme-teal{background:var(--g-teal)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:900px;color:#fff;display:flex;flex-direction:column;overflow:hidden;background:#07071a}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,26,.96) 0%,rgba(7,7,26,.9) 40%,rgba(7,7,26,.35) 70%,rgba(7,7,26,.08) 100%)}
.hero__shade--bottom{background:linear-gradient(0deg,rgba(7,7,26,.85) 0%,rgba(7,7,26,.45) 30%,rgba(7,7,26,0) 55%)}
.hero__inner{position:relative;flex:1;width:100%;max-width:1360px;margin:0 auto;padding:72px 40px 88px;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:48px}
.hero__main{flex:0 1 700px;min-width:0}
.hero .hp-eyebrow{margin-bottom:32px}
.hero__title{margin:0;font-weight:400;font-size:clamp(48px,6.4vw,92px);line-height:1;letter-spacing:-.045em}
.hero__text{margin:32px 0 0;font-size:20px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.85);max-width:600px}
.hero__highlight{margin:24px 0 0;padding-left:16px;border-left:2px solid var(--mint);font-size:17px;font-weight:400;line-height:1.55;color:#fff;max-width:600px}
.hero__quote{flex:0 1 360px;margin:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.35)}
.hero__quote blockquote{margin:0;font-size:18px;font-weight:300;line-height:1.55}
.hero__quote figcaption{margin-top:20px;display:flex;align-items:center;gap:14px}
.hero__quote .person__img{width:56px;height:56px}
.hero__quote .person__role{font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.75)}
@media (max-width:600px){.hero__title{font-size:44px}}

/* ---------- Clients ---------- */
.hp-clients{background:#fff;border-bottom:1px solid rgba(10,10,35,.1)}
.hp-clients__inner{max-width:1360px;margin:0 auto;padding:56px 40px}
.hp-clients__label{margin:0 0 36px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hp-clients__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px 48px}
.hp-clients__logos img{width:auto;opacity:.82;height: 50px;}
@media (max-width:767px) {
  .hp-clients__logos img {
    height: 35px;
  }
}
/* ---------- Strapline ---------- */
.hp-strap{background:#fff}
.hp-strap__inner{max-width:1360px;margin:0 auto;padding:128px 40px;text-align:center}
.hp-strap__title{margin:0 auto;max-width:1100px;font-weight:400;font-size:clamp(36px,4.6vw,66px);line-height:1.08;letter-spacing:-.045em}
.hp-strap__sub{margin:28px 0 0;font-size:clamp(20px,2vw,26px);font-weight:300;letter-spacing:-.01em;color:#4a4a5e}
.hp-strap__sub span{color:var(--blue);font-weight:500}

/* ---------- How we operate ---------- */
.hp-value{background:#07071a;color:#fff}
.hp-value .hp-h2{font-size:clamp(42px,5vw,72px);line-height:1.02;max-width:960px}
.hp-value__text{margin:28px 0 0;font-size:20px;font-weight:300;line-height:1.65;color:rgba(255,255,255,.8);max-width:680px}
.hp-cards{display:flex;flex-wrap:wrap;gap:16px}
.hp-value .hp-cards{margin-top:80px}

.hp-card{min-width:0;box-sizing:border-box;border-radius:2px;color:#fff}
.hp-card__num{margin:0;font-size:13px;letter-spacing:.14em;color:var(--mint)}
.hp-card__num span{text-transform:uppercase}
.hp-card__title{margin:20px 0 14px;font-weight:400;color:#fff}
.hp-card__text{margin:0;font-weight:300;color:rgba(255,255,255,.8)}
.hp-card--lg{flex:1 1 520px;padding:48px;display:flex;flex-direction:column}
.hp-card--lg .hp-card__title{font-size:32px;line-height:1.1;letter-spacing:-.035em}
.hp-card--lg .hp-card__text{font-size:17px;line-height:1.65;max-width:520px}
.hp-card--sm{flex:1 1 260px;padding:40px 36px 48px}
.hp-card--sm .hp-card__title{font-size:26px;line-height:1.2;letter-spacing:-.02em}
.hp-card--sm .hp-card__text{font-size:16px;line-height:1.65}
.hp-card__foot{margin-top:auto;padding-top:48px;display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start}
.hp-stat{flex:0 0 auto}
.hp-stat__value{font-size:48px;font-weight:300;letter-spacing:-.05em;line-height:1;color:#fff}
.hp-stat__label{margin:10px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);max-width:160px}
.hp-card__quote{flex:1 1 260px;margin:0;padding-left:24px;border-left:1px solid rgba(255,255,255,.22)}
.hp-card__quote blockquote{margin:0;font-size:16px;font-weight:300;font-style:italic;line-height:1.6;color:rgba(255,255,255,.92)}
.hp-card__quote figcaption{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hp-card__quote .person__img{width:56px;height:56px}
.hp-card__quote .person__name{color:#fff}
.hp-card__quote .person__role{color:rgba(255,255,255,.65)}

.hp-principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 40px;margin-top:64px}
.hp-principles div{padding:28px 0 0;border-top:1px solid rgba(255,255,255,.18)}
.hp-principles__label{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hp-principles__text{margin:14px 0 0;font-size:20px;font-weight:400;line-height:1.3;color:#fff}

/* ---------- What we look after ---------- */
.hp-cover{background:#fff}
.hp-cover__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 64px}
.hp-cover .hp-h2{font-size:clamp(38px,4.4vw,60px);max-width:760px}
.hp-cover__text{margin:0;font-size:18px;font-weight:300;line-height:1.65;color:var(--body);max-width:460px}
.hp-cover .hp-cards{margin-top:72px}

/* ---------- Who we work with ---------- */
.hp-who{background:var(--cream)}
.hp-who__inner{display:flex;flex-wrap:wrap;gap:80px;align-items:flex-start}
.hp-who__media{flex:1 1 380px;min-width:0}
.hp-who__img{position:relative;height:640px;overflow:hidden;border-radius:10px}
.hp-who__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-who__body{flex:1 1 600px;min-width:0}
.hp-who .hp-h2{font-size:clamp(38px,4.4vw,58px)}
.hp-who__text{margin:28px 0 0;font-size:19px;font-weight:300;line-height:1.7;color:var(--body);max-width:640px}
.hp-who__cols{display:flex;flex-wrap:wrap;margin-top:40px;border-top:1px solid rgba(10,10,35,.15);border-bottom:1px solid rgba(10,10,35,.15)}
.hp-who__col{flex:1 1 300px;min-width:0;padding:40px 40px 40px 0;box-sizing:border-box}
.hp-who__col+.hp-who__col{padding:40px 0 40px 40px;border-left:1px solid rgba(10,10,35,.15)}
.hp-who__label{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.hp-who__col h3{margin:14px 0 12px;font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.03em}
.hp-who__col>p:not(.hp-who__label){margin:0;font-size:16px;font-weight:300;line-height:1.65;color:var(--body)}
.hp-who__col ul{list-style:none;padding:0;margin:24px 0 0}
.hp-who__col li{padding:12px 0;border-top:1px solid rgba(10,10,35,.1);font-size:16px}
.hp-who__more{display:inline-block;margin-top:20px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);padding:8px 0}
.hp-who__quote{margin:28px 0 0;padding-top:24px;border-top:1px solid rgba(10,10,35,.15)}
.hp-who__quote blockquote{margin:0;font-size:16px;font-weight:300;font-style:italic;line-height:1.6}
.hp-who__quote figcaption{margin-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hp-who__quote .person__img{width:48px;height:48px}
.hp-who__quote .person__name{font-size:12px}

/* ---------- Testimonials ---------- */
.hp-testi{background:#fff}
.hp-testi__head{text-align:center;max-width:900px;margin:0 auto}
.hp-testi .hp-h2{font-size:clamp(38px,4.4vw,60px)}
.hp-testi__grid{display:flex;flex-wrap:wrap;gap:56px 32px;margin-top:88px}
.hp-testi__item{flex:1 1 320px;min-width:0;margin:0;padding:0 16px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hp-testi__item blockquote{margin:0;flex:1;font-size:21px;font-weight:300;line-height:1.55;letter-spacing:-.01em}
.hp-testi__item figcaption{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:16px}
.hp-testi__item .person__img{width:88px;height:88px}
.hp-testi__item .person__text{gap:6px}
.hp-testi__item .person__name{font-size:14px}

/* ---------- Case studies ---------- */
.hp-work{background:var(--g-indigo);color:#fff}
.hp-work .hp-inner{padding:144px 40px 120px}
.hp-work__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:64px}
.hp-work .hp-h2{font-size:clamp(38px,4.4vw,62px)}
.hp-work__all{font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.6);color:#fff;text-decoration:none}
.hp-work__all:hover{color:#fff}
.hp-cases{display:flex;flex-wrap:wrap;gap:64px 32px}
.hp-case{flex:1 1 380px;min-width:0;text-decoration:none;color:#fff;display:flex;flex-direction:column;padding-bottom:8px}
.hp-case:hover{color:#fff}
.hp-case__img{position:relative;height:300px;overflow:hidden;border-radius:10px;background:#07071a}
.hp-case__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp-case__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,26,.1) 0%,rgba(7,7,26,.5) 45%,rgba(7,7,26,.95) 100%)}
.hp-case__shade--strong{background:linear-gradient(180deg,rgba(7,7,26,0) 0%,rgba(7,7,26,.35) 30%,rgba(7,7,26,.97) 64%)}
.hp-case__stat{position:absolute;left:32px;right:32px;bottom:28px;color:#fff}
.hp-case__stat b{display:block;font-size:56px;font-weight:300;letter-spacing:-.05em;line-height:1}
.hp-case__stat span{display:block;margin:10px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hp-case__tags{margin:24px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hp-case h3{margin:12px 0 0;font-weight:500;font-size:22px;line-height:1.3;letter-spacing:-.02em}
.hp-case__text{margin:12px 0 0;font-size:16px;font-weight:300;line-height:1.65;color:rgba(255,255,255,.75)}
.hp-case__more{margin-top:20px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}

/* ---------- Platforms ---------- */
.hp-tech{background:#fff}
.hp-tech .hp-inner{padding:120px 40px 144px}
.hp-tech__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:24px;border-bottom:1px solid var(--ink)}
.hp-tech__head .hp-eyebrow{margin:0}
.hp-tech__note{margin:0;font-size:15px;font-weight:300;color:#4a4a5e}
.hp-tech__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-left:1px solid rgba(10,10,35,.1)}
.hp-tech__item{display:flex;align-items:center;gap:12px;padding:28px 24px;text-decoration:none;color:var(--ink);border-right:1px solid rgba(10,10,35,.1);border-bottom:1px solid rgba(10,10,35,.1)}
.hp-tech__item:hover{color:var(--ink)}
.hp-tech__item svg{flex:none}
.hp-tech__item span{font-size:16px;font-weight:500}

/* ---------- Team ---------- */
.hp-team{background:var(--cream)}
.hp-team__inner{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.hp-team__body{flex:1 1 380px;min-width:0;max-width:480px}
.hp-team .hp-eyebrow{margin-bottom:24px}
.hp-team .hp-h2{font-size:clamp(36px,4vw,54px)}
.hp-team__body>p{margin:16px 0 0;font-size:18px;font-weight:300;line-height:1.7;color:var(--body)}
.hp-team__body>p.hp-team__intro{margin-top:24px}
.hp-team__list{list-style:none;margin:28px 0 0;padding:0;border-bottom:1px solid rgba(10,10,35,.12)}
.hp-team__list li{padding:14px 0;border-top:1px solid rgba(10,10,35,.12);font-size:16px;display:flex;gap:12px;align-items:baseline}
.hp-team__list li::before{content:"";width:6px;height:6px;background:var(--blue);flex:none;transform:translateY(-2px)}
.hp-team__quote{margin:36px 0 0;padding-top:24px;border-top:1px solid rgba(10,10,35,.15)}
.hp-team__quote blockquote{margin:0;font-size:18px;font-weight:300;font-style:italic;line-height:1.6}
.hp-team__quote figcaption{margin-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hp-team__quote .person__img{width:64px;height:64px}
.hp-team__gallery{flex:1.5 1 560px;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp-team__photo{position:relative;height:300px;overflow:hidden;border-radius:10px}
/* .hp-team__photo:first-child{grid-column:1/-1;height:420px} */
.hp-team__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:600px){.hp-team__gallery{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.hp-contact{background:#07071a;color:#fff}
.hp-contact__inner{display:flex;flex-wrap:wrap;gap:80px;align-items:center}
.hp-contact__body{flex:1 1 580px;min-width:0}
.hp-contact .hp-h2{font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-.05em}
.hp-contact__points{margin-top:40px;border-top:1px solid rgba(255,255,255,.16);max-width:600px}
.hp-contact__points div{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.hp-contact__points p{margin:0;font-size:20px;font-weight:500;color:#fff}
.hp-contact__points p+p{margin-top:8px;font-size:16px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.75)}
.hp-contact__note{margin:32px 0 0;font-size:18px;font-weight:300;line-height:1.65;color:rgba(255,255,255,.8);max-width:560px}
.hp-contact__quote{margin:64px 0 0;max-width:540px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.hp-contact__quote blockquote{margin:0;font-size:16px;font-weight:300;font-style:italic;line-height:1.6;color:rgba(255,255,255,.92)}
.hp-contact__quote figcaption{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hp-contact__quote .person__img{width:56px;height:56px}
.hp-contact__quote .person__name{color:#fff}
.hp-contact__quote .person__role{color:rgba(255,255,255,.65)}
.hp-contact__img{flex:1 1 420px;min-width:0;position:relative;height:620px;overflow:hidden;border-radius:10px}
.hp-contact__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rb-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
}

img.custom-logo {
  width: 34px;
  height: 34px;
}

/* ==========================================================================
   Support & Maintenance page. Loaded only on the "Support & Maintenance" page template.
   Tokens, header, nav and footer are in /style.css. Sections that look like the
   homepage (coloured panels, case studies) reuse the hp- classes in style.css.
   ========================================================================== */

/* Buttons */
.btn{display:inline-block;text-decoration:none;background:#fff;color:var(--navy);font-weight:500;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:19px 32px;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.25);color:var(--navy)}
.btn-line{display:inline-block;text-decoration:none;color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.5)}
.btn-line:hover{color:var(--mint);border-color:var(--mint)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:44px}
.more{display:inline-block;margin-top:20px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--blue);padding:6px 0}

/* Page hero
.ph{position:relative;color:#fff;background:var(--navy);overflow:hidden;display:flex;flex-direction:column}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,26,.97) 0%,rgba(7,7,26,.9) 42%,rgba(7,7,26,.4) 72%,rgba(7,7,26,.15) 100%)}
.ph-shade2{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,7,26,.85) 0%,rgba(7,7,26,.35) 30%,rgba(7,7,26,0) 55%)}
.ph-body{position:relative;z-index:2;width:100%;padding-block:88px 104px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:56px}
.ph-main{flex:1 1 640px;min-width:0;max-width:860px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0;list-style:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.crumbs a{color:rgba(255,255,255,.75);text-decoration:none}.crumbs a:hover{color:var(--mint)}
.crumbs li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.35)}
.ph .eyebrow{color:var(--mint)}
.ph h1{margin:0;font-weight:400;font-size:clamp(44px,5.6vw,84px);line-height:1.02;letter-spacing:-.045em}
.ph-lead{margin:32px 0 0;font-size:20px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.85);max-width:640px}
.ph-quote{flex:0 1 360px;margin:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.35)}
.ph-quote blockquote{margin:0;font-size:18px;font-weight:300;line-height:1.55}
.ph-quote figcaption{margin-top:20px;display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ph-quote img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;filter:grayscale(1)}
.ph-facts{display:flex;flex-wrap:wrap;gap:20px 40px;margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18);max-width:760px}
.ph-facts div{min-width:0}
.ph-facts b{display:block;font-size:40px;font-weight:300;letter-spacing:-.05em;line-height:1}
.ph-facts span{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);max-width:170px}
 */
/* Sections */
.sec{padding-block:128px}
.sec.tight{padding-block:88px}
.white{background:#fff}.cream{background:var(--cream)}
.eyebrow{margin:0 0 24px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.h2{margin:0;font-weight:400;font-size:clamp(36px,4.4vw,60px);line-height:1.04;letter-spacing:-.045em;max-width:920px}
.lead{margin:24px 0 0;font-size:20px;font-weight:300;line-height:1.65;color:var(--body);max-width:680px}
.prose p,.prose li{font-size:17px;font-weight:300;line-height:1.75;color:var(--body);max-width:680px}
.prose p{margin:0 0 18px}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 64px}
.head-row>div{flex:1 1 560px;min-width:0}
.head-row .lead{margin:0;max-width:460px;font-size:18px}
.mt-l{margin-top:72px}

/* Split */
.split{display:flex;flex-wrap:wrap;gap:56px 88px;align-items:flex-start}
.split>*{flex:1 1 440px;min-width:0}

/* Ticks */
.ticks{list-style:none;margin:28px 0 0;padding:0}
.ticks li{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.5}
.ticks li::before{content:"";width:7px;height:7px;background:var(--blue);flex:none;transform:translateY(-2px)}
.ticks li strong{font-weight:500}
.ticks li span{display:block;font-weight:300;color:var(--body);font-size:16px;margin-top:4px}

/* Stats */
.stats{display:flex;flex-wrap:wrap;gap:32px 24px;border-top:1px solid var(--line);padding-top:36px}
.stats>div{flex:1 1 200px;min-width:0}
.stats b{display:block;font-size:clamp(44px,4.6vw,64px);font-weight:300;letter-spacing:-.05em;line-height:1}
.stats span{display:block;margin-top:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);max-width:220px}

/* Tiles */
.tiles{display:flex;flex-wrap:wrap;gap:16px}
.tile{flex:1 1 280px;min-width:0;box-sizing:border-box;padding:36px 32px 40px;background:var(--panel);border-top:3px solid var(--blue)}
.tile h3{margin:0 0 12px;font-weight:500;font-size:21px;line-height:1.25;letter-spacing:-.02em}
.tile p{margin:0;font-size:16px;font-weight:300;line-height:1.65;color:var(--body)}
.tile--ink{border-top-color:var(--ink)}

/* Quote */
.quote{margin:0 auto;max-width:960px;text-align:center}
.quote blockquote{margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:300;line-height:1.4;letter-spacing:-.02em}
.quote figcaption,.tq figcaption{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:16px}
.quote img,.tq img{width:88px;height:88px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.who-n{font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.who-r{display:block;margin-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* FAQ */
.faq-more{margin:32px 0 0}
.faq{border-bottom:1px solid var(--line);max-width:960px}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:26px 0;font-size:21px;font-weight:400;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;font-weight:300;color:var(--blue);line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 28px;max-width:760px}
.faq .a p{margin:0 0 14px;font-size:17px;font-weight:300;line-height:1.7;color:var(--body)}
.faq-h{margin-bottom:48px}

/* Related */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line)}
.rel{display:flex;flex-direction:column;gap:6px;padding:28px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .25s,transform .25s}
.rel strong{font-size:18px;font-weight:500;letter-spacing:-.01em}
.rel span{font-size:14px;font-weight:300;color:var(--muted)}
.rel em{margin-top:10px;font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.rel:hover{background:var(--cream);color:var(--ink)}

/* CTA band */
.cta{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.cta .wrap{position:relative;z-index:1;padding-block:128px;display:flex;flex-wrap:wrap;gap:56px 88px;align-items:flex-end;justify-content:space-between}
.cta-main{flex:1 1 560px;min-width:0}
.cta h2{margin:0;font-weight:400;font-size:clamp(38px,4.8vw,68px);line-height:1.02;letter-spacing:-.045em;max-width:820px}
.cta p{margin:28px 0 0;font-size:19px;font-weight:300;line-height:1.65;color:rgba(255,255,255,.8);max-width:560px}
.cta-side{flex:0 1 340px;min-width:0;display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.cta-side .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.cta-side .v{font-size:26px;font-weight:300;letter-spacing:-.02em;color:#fff;text-decoration:none}
.cta-side p{margin:8px 0 0;font-size:15px;color:rgba(255,255,255,.65)}
.cta .eyebrow{color:var(--mint)}
.cta .ph-img{opacity:.35}

/* "What's included" = the home "What we look after" section (hp-cover) on a dark background */
.hp-cover--dark{background:var(--navy);color:#fff}
.hp-cover--dark .hp-eyebrow{color:var(--mint)}
.hp-cover--dark .hp-cover__text{color:rgba(255,255,255,.8)}
.hp-cover--dark .ticks{max-width:820px;margin-top:48px}
.hp-cover--dark .ticks li{border-color:rgba(255,255,255,.14)}
.hp-cover--dark .ticks li::before{background:var(--mint)}
.hp-cover--dark .ticks li span{color:rgba(255,255,255,.7)}

/* Home sections reused on this page line up with the page's .wrap container */
.hp-cover .hp-inner,.hp-work .hp-inner{box-sizing:border-box}
.hp-cover__head .hp-h2{flex:1 1 520px}

/* Responsive */
@media (max-width:600px){.sec{padding-block:88px}.ph-body{padding-block:56px 72px}.cta .wrap{padding-block:88px}}


/* ==========================================================================
   Continuous Development page. Loaded only on the "Continuous Development" template,
   after support-maintenance.css, which already provides the shared sections
   (hero, intro, dark panels, ticks, case studies, testimonial, FAQ, related, CTA).
   ========================================================================== */

/* How it runs: numbered steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.steps li{min-width:0;padding:32px 0 0;border-top:1px solid var(--line)}
.steps .n{display:block;font-size:56px;font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--blue)}
.steps h3{margin:22px 0 10px;font-weight:500;font-size:21px;letter-spacing:-.02em}
.steps p{margin:0;font-size:16px;font-weight:300;line-height:1.65;color:var(--body);max-width:360px}
.steps{margin-top:72px}

/* Links inside the dark ticks list */
.hp-cover--dark .ticks a{color:var(--mint)}


/* ==========================================================================
   Critical Response page ("Critical Response" page template).
   Hero, intro, dark panels, steps, ticks, FAQ, related and CTA reuse the rules above.
   ========================================================================== */
 
/* Dark and indigo sections */
.dark{background:var(--navy);color:#fff}.indigo{background:var(--g-indigo);color:#fff}
.dark .eyebrow,.indigo .eyebrow{color:var(--mint)}
.dark .lead,.indigo .lead{color:rgba(255,255,255,.8)}
.dark .prose p,.indigo .prose p,.dark .prose li{color:rgba(255,255,255,.8)}
.dark .more,.indigo .more{color:var(--mint)}
.dark .prose{margin-top:32px}
 
/* Split with vertically centred columns */
.split.center{align-items:center}
 
/* Incident timeline */
.tl{list-style:none;margin:0;padding:0;border-left:1px solid rgba(255,255,255,.2)}
.tl li{position:relative;padding:0 0 32px 32px}
.tl li::before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--mint)}
.tl time{display:block;font-size:13px;letter-spacing:.14em;color:var(--mint);font-variant-numeric:tabular-nums}
.tl p{margin:6px 0 0;font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.85)}
 
/* Quote with accent line */
.qline{margin:0;padding-left:24px;border-left:2px solid var(--blue)}
.qline blockquote{margin:0;font-size:19px;font-weight:300;font-style:italic;line-height:1.6}
.qline figcaption{margin-top:18px;display:flex;align-items:center;gap:14px}
.qline img{width:52px;height:52px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
 
/* Steps: wider columns (6 steps) */
.steps--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:40px 16px}
 .steps--wide.step--six{grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));gap: 40px 16px;}
/* Priority levels: tiles on the indigo background */
.indigo .tile{background:rgba(255,255,255,.06)}
.indigo .tile h3{color:#fff}
.indigo .tile p{color:rgba(255,255,255,.78)}
.tile--mint{border-top-color:var(--mint)}
.tile--light{border-top-color:rgba(255,255,255,.5)}
.tile--faint{border-top-color:rgba(255,255,255,.25)}
.indigo .lead--note{margin-top:48px;font-size:17px}
 
/* "What counts as critical" = the home "What we look after" section on a cream background */
.hp-cover--cream{background:var(--cream)}
 
.mb-48 {
  margin-bottom: 48px;
}

/* ==========================================================================
   Magento page: only the styles not already in style.css / common.css.
   Append to assets/css/style.css (or enqueue on the Magento template).
========================================================================== */

/* Platform logo above the hero eyebrow */
.ph-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:0 0 30px}
.ph-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:15px;font-weight:500;letter-spacing:-.01em}
.ph-logo img{flex:none;width:30px;height:30px;object-fit:contain}
.ph-logos.solo .ph-logo{font-size:22px;gap:14px}
.ph-logos.solo .ph-logo img{width:46px;height:46px}

/* "What we cover" tiles: extra top-border colours (blue is the default) */
.tile--purple{border-top-color:#4a2fb0}
.tile--green{border-top-color:#0f6b4c}
.tile--teal{border-top-color:#0f5a7a}

/* Pricing table + note */
.tbl--narrow{max-width:820px}
.pricing-note{margin:24px 0 0;max-width:820px;font-size:16px;font-weight:300;line-height:1.65;color:var(--body)}
@media (max-width: 767px) {
  .hero__inner, 
  .hp-clients__inner, 
  .hp-inner,
  .hp-work .hp-inner,
  .hp-tech .hp-inner {
      padding: 40px 30px;
  }
  .ft-in {
    padding: 50px 30px;
  }
  .hp-strap__inner {
    padding: 50px;
  }
  .hp-value .hp-cards {
    margin-top: 50px;
  }
  .hp-card--lg, .hp-card--sm {
    flex: 1 1 auto;
    padding: 30px;
  }
  .hp-card__foot {
    padding-top: 25px;
  }
  .hp-principles,
  .hp-cover .hp-cards,
  .hp-testi__grid {
    margin-top: 45px;
  }
  .hp-testi__grid {
    gap: 25px;
  }
  .hp-who__img,
  .hp-contact__img {
    height: 300px;
    flex: 1 1 auto;
  }
  .hp-who__col {
    flex: 1 1 auto;
    padding: 30px 0px 30px 0;
  }
  .hp-who__col+.hp-who__col {
    padding: 30px 0 30px 30px;
  }
  .hp-work__head {
    margin-bottom: 45px;
  }
  .hp-who__inner,
  .hp-cases,.ft-top {
    gap: 40px;
  }
  .ft-bot {
    margin-top: 30px;
    padding-top: 20px;
  }
}



.ph h1 {
  position: unset;
  clip: unset;
}