/* Software & Cloud Engineering — page-specific styles (software-cloud-engineering.html) */
/* v2 rebuild — Software Engineering Services (content sourced from the
   client mockup, restyled onto the sitewide design system). Everything
   here is layout only: colour, type, buttons, cards and section
   backgrounds all come from assets/styles.css. Classes are .ef- prefixed
   and scoped to this page. */

/* Hero: centered, and no min-height (this page's hero has no side visual,
   so the sitewide big-visual hero min-height just left empty space below
   the content). */
.ef-hero-center{min-height:0;padding-bottom:56px}
.ef-hero-center .wrap{max-width:860px;text-align:center;margin-left:auto;margin-right:auto}
.ef-hero-center .display{font-size:clamp(2.1rem,4.3vw,3.5rem)}
.ef-hero-center .lead{margin-left:auto;margin-right:auto;font-size:clamp(.82rem,1.2vw,.9rem)}
.ef-hero-center .hero-ctas{justify-content:center}

/* Footprint / numbers band — ported verbatim (design, placement, fonts)
   from case-studies.html's "Numbers Behind the Work" divider: a full-bleed
   dark band, heading + trusted-by on the left, the 2x2 stat grid on the
   right (see .csg-footprint-* in assets/cs-page.css for the source). */
.ef-footprint-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
}
.ef-footprint-heading{
  margin-bottom:20px;font-size:clamp(1.4rem,2.4vw,1.9rem);white-space:nowrap;
}
.ef-footprint-band .company-stats{
  background:transparent;padding:0;
  grid-template-columns:repeat(2,1fr);gap:28px 32px;
}
.ef-trust-plain{background:transparent;padding:0}
.ef-trust-plain .trust-label{
  font-size:.86rem;font-weight:500;letter-spacing:normal;text-transform:none;
  color:var(--mut-dark);display:block;margin-bottom:10px;
}
.ef-trust-plain .trust-label::before{content:none}
.ef-trust-plain .trust-names{
  flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;gap:0;
}
.ef-trust-plain .trust-names strong{font-size:.92rem;white-space:nowrap}
.ef-trust-plain .trust-names i{margin:0 9px}

@media(max-width:1240px){
  .ef-footprint-heading{white-space:normal}
  .ef-trust-plain .trust-names{flex-wrap:wrap;white-space:normal}
  .ef-trust-plain .trust-names strong{white-space:normal}
}
@media(max-width:820px){
  .ef-footprint-grid{grid-template-columns:1fr;gap:36px}
  .ef-footprint-band .company-stats{grid-template-columns:1fr 1fr}
}

/* Capabilities heading — the sitewide .section-head max-width (720px)
   wraps this onto two lines; widen just the heading, keep the lead
   paragraph narrow. */
#capabilities .section-head{max-width:960px}
#capabilities .section-head .lead{max-width:680px}
@media(min-width:1160px){
  #capabilities .section-head h2{white-space:nowrap}
}

/* Capability grid — 9 tiles, 5 of which carry the anchor ids the header
   mega-menu links to (see the id attributes in the markup). */
.ef-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.ef-cap-num{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--mut);margin-bottom:14px}

/* Dark CTA band */
.ef-cta-band .wrap{text-align:center}
.ef-cta-band h2{max-width:760px;margin:0 auto 30px}

/* Industries — peek-card carousel (1 active + 2 peek cards visible,
   arrows/dots cycle through all 9 industries). */
.ef-ind-carousel{position:relative;margin-top:44px;display:flex;align-items:center;gap:0}
.ef-ind-row{flex:1;display:grid;grid-template-columns:2.1fr 1fr 1fr;gap:22px;align-items:stretch;min-width:0}
.ef-ind-card{border-radius:var(--radius);background:var(--ink);color:var(--paper);padding:36px;display:flex;flex-direction:column;min-height:280px}
.ef-ind-card.is-peek{background:#141412;align-self:center;height:76%;padding:26px;justify-content:flex-start}
.ef-ind-icon{width:44px;height:44px;color:var(--yellow);margin-bottom:20px}
.ef-ind-card.is-peek .ef-ind-icon{width:30px;height:30px;margin-bottom:14px}
.ef-ind-card h3{font-size:1.4rem;font-weight:700;margin:0 0 12px;color:var(--paper)}
.ef-ind-card.is-peek h3{font-size:1.05rem;color:#ececec;margin:0}
.ef-ind-desc{font-size:.95rem;line-height:1.55;color:var(--mut-dark);margin:0 0 20px;max-width:560px}
.ef-ind-card .btn-link{color:var(--yellow);border-bottom-color:var(--yellow);margin-top:auto;align-self:flex-start}
.ef-ind-card.is-peek .ef-ind-desc,.ef-ind-card.is-peek .btn-link{display:none}
.ef-ind-card.is-hidden{display:none}

/* Shared round arrow buttons + dot pagination (industries + case studies) */
.ef-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background .15s var(--ease),transform .15s var(--ease);z-index:2}
.ef-arrow:hover{background:var(--bone);transform:translateY(-2px)}
.ef-arrow.left{margin-right:-26px}
.ef-arrow.right{margin-left:-26px}
.ef-arrow svg{width:16px;height:16px;color:var(--ink)}
.ef-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:36px}
.ef-dots button{width:9px;height:9px;border-radius:50%;background:var(--line);padding:0;border:0;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease)}
.ef-dots button.active{background:var(--yellow);transform:scale(1.25)}

/* Solutions — 4-group accordion (Sell / Operate / Run / Optimise), each
   group opens and closes independently. */
.ef-sol-acc{border-top:1px solid var(--line);margin-top:44px}
.ef-sol-item{border-bottom:1px solid var(--line)}
.ef-sol-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 4px 10px;cursor:pointer;user-select:none}
.ef-sol-head-left{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.ef-sol-num{font-size:.78rem;font-weight:700;letter-spacing:.07em;color:var(--mut);flex:none}
.ef-sol-head h3{font-size:1.35rem;font-weight:700;margin:0}
.ef-sol-sub{font-size:.9rem;color:var(--mut);font-weight:400}
.ef-sol-toggle{width:26px;height:26px;position:relative;flex:none}
.ef-sol-toggle::before,.ef-sol-toggle::after{content:"";position:absolute;background:var(--mut);top:50%;left:50%;transform:translate(-50%,-50%)}
.ef-sol-toggle::before{width:16px;height:2.5px}
.ef-sol-toggle::after{width:2.5px;height:16px;transition:opacity .15s ease}
.ef-sol-item.is-open .ef-sol-toggle::after{opacity:0}
.ef-sol-preview{padding:0 4px 26px 54px;font-size:.9rem;color:var(--mut);cursor:pointer;user-select:none;line-height:1.6}
.ef-sol-preview b{color:var(--ink);font-weight:600}
.ef-sol-item.is-open .ef-sol-preview{display:none}
.ef-sol-body{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.ef-sol-item.is-open .ef-sol-body{max-height:2200px;padding-bottom:36px}
.ef-sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:6px}
.ef-sol-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--bone)}
.ef-sol-card h4{font-size:1.05rem;font-weight:700;margin:0 0 10px}
.ef-sol-main{font-size:.9rem;line-height:1.55;color:var(--ink);margin:0 0 14px}
.ef-sol-capability{font-size:.8rem;line-height:1.6;color:var(--mut);margin:0 0 14px;padding-top:12px;border-top:1px solid var(--line)}
.ef-sol-tags{display:flex;flex-wrap:wrap;gap:6px}
.ef-sol-tag{font-size:.72rem;font-weight:600;color:var(--ink);background:var(--yellow-soft);border:1px solid #E8D296;padding:4px 10px;border-radius:999px}

/* Recent Work sits right after another plain-white section (Solutions We
   Deliver) with no background change to break them up — tighten the top
   padding here so the pair doesn't read as one long blank gap. */
#case-studies{padding-top:48px}

/* only 2 real cases exist for this service line (the other
   real cases are already used on Retail Data & AI / Retail Systems &
   Integration), so this is a static 2-up grid rather than a carousel, with
   the same semi-transparent-photo treatment as those pages. */
.ef-case-link{color:inherit;text-decoration:none}
.ef-case-link .case-metric{
  position:relative;overflow:hidden;isolation:isolate;
  height:110px;display:flex;flex-direction:column;justify-content:center;
}
.ef-case-link .case-metric-visual{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.22;
}
.ef-case-link .case-metric b{
  position:relative;z-index:1;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ef-case-link .case-metric-industry{position:relative;z-index:1;margin-top:8px;display:block}

@media (max-width:1024px){
  .ef-cap-grid,.ef-sol-grid{grid-template-columns:1fr 1fr}
  .ef-ind-row{grid-template-columns:1fr}
  .ef-ind-card.is-peek{display:none}
  .ef-arrow.left{margin-right:0}
  .ef-arrow.right{margin-left:0}
}
@media (max-width:600px){
  .ef-cap-grid,.ef-sol-grid,.ef-case-grid{grid-template-columns:1fr}
  .ef-sol-head{flex-wrap:wrap}
}