.eni-job-search{display:grid;grid-template-columns:2fr repeat(3,1fr) auto;gap:12px;align-items:end;margin:24px 0}.eni-job-search label,.eni-application label,.component-enquiry label{display:block;font-size:15px;font-weight:700}.eni-job-search input,.eni-job-search select,.eni-application input:not([type=radio]):not([type=checkbox]),.eni-application textarea,.component-enquiry input:not([type=submit]),.component-enquiry textarea{display:block;width:100%;font:inherit;margin-top:8px;border:1px solid #527780;border-radius:4px;padding:12px;color:var(--ink);background:white}.eni-job-search select{min-height:54px}.eni-job-search button{min-height:54px}.eni-job-card .sector{font-size:13px;margin-bottom:8px}.eni-job-card .vacancy-summary{margin-top:14px;max-width:70ch}.eni-pagination{display:flex;gap:16px;padding-block:24px}.eni-application{border-top:1px solid #bacdd0;padding-block:24px 48px;margin-top:24px;max-width:760px}.eni-application .field-grid,.component-enquiry .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.eni-application .field,.component-enquiry .field{margin-bottom:20px}.eni-application h2{margin:20px 0 12px}.eni-application .wpcf7-submit{width:auto!important;background:var(--deep)!important;color:white!important;font-weight:700!important;cursor:pointer}.wpcf7-not-valid-tip{font-size:15px;margin-top:6px}.wpcf7-response-output{padding:20px!important;margin:24px 0!important}.wpcf7-spinner{vertical-align:middle}.eni-empty{padding:32px;background:#f1f6f6}.role-reading .role-copy{max-width:720px}.role-facts .button{margin-block:20px}.eni-closed{padding-block:72px}.eni-closed p{font-size:20px}.eni-application .wpcf7-list-item{margin:0 24px 0 0}.role-copy img{height:auto;max-width:100%}@media(max-width:900px){.eni-job-search{grid-template-columns:1fr 1fr}.eni-job-search label:first-child{grid-column:1/-1}}@media(max-width:600px){.eni-job-search,.eni-application .field-grid,.component-enquiry .field-grid{grid-template-columns:1fr}.eni-job-card{align-items:start}.eni-job-card>a{white-space:normal}.eni-application{padding-block:16px 32px}}

.eni-reading{padding-block:64px;max-width:1000px}.eni-reading h1{font-size:clamp(36px,5vw,64px);line-height:1.08;margin-block:28px}.eni-reading-body{max-width:760px;font-size:18px;line-height:1.7}.eni-reading-body img{max-width:100%;height:auto}.eni-reading-body h2{font-size:32px;margin-top:40px}.eni-reading-body h3{font-size:24px;margin-top:28px}.eni-reading-body iframe{max-width:100%}.eni-reading-body table{display:block;overflow:auto}.component-enquiry .wpcf7-submit{background:var(--deep);color:white;padding:14px 24px;border:0;border-radius:4px;font:inherit;font-weight:700;cursor:pointer}
.eni-reading{padding-top:104px}.eni-reading > .eni-reading-header{position:static;width:auto;height:auto;min-height:0;padding:0;background:none;box-shadow:none;display:block}.eni-reading-body,.eni-reading-body *{word-break:normal;overflow-wrap:break-word}.eni-reading-meta{color:#5d6b70}.eni-reading-body p{margin-bottom:1.1em}
.role-reading .role-copy,.role-reading .role-copy *{word-break:normal;overflow-wrap:break-word}
.eni-content-related{padding-block:36px}.eni-content-related h2{font-size:clamp(27px,3vw,40px);margin-bottom:12px}.eni-content-related p{max-width:760px;line-height:1.6}.eni-content-related a{text-underline-offset:3px}
.eni-reading-cover{max-width:760px;margin:20px 0 32px}.eni-reading-cover img{max-width:100%;height:auto}.eni-readable-transcript{border-top:1px solid #d7e0e2;margin-top:40px;padding-top:24px}.eni-readable-transcript h3,.eni-readable-transcript h4{margin-top:28px}

.eni-access{max-width:820px;min-height:65vh}.eni-access .um{margin-inline:0!important;max-width:100%!important}.eni-access input:not([type=checkbox]):not([type=radio]):not([type=submit]),.eni-access textarea{font-size:16px!important}.eni-access .forminator-ui.forminator-custom-form{margin-block:30px!important}

.eni-account-page .topBlock,.eni-account-page .account-page>.image{display:none}.eni-account-page .account-page{background:#fff;padding:48px 0;color:var(--ink)}.eni-account-page .account-page .textarea h1{color:var(--ink);font-size:48px}.eni-account-page .account-page .textarea{padding:0 0 24px}.eni-account-page .account-page .container{max-width:1160px}.eni-account-page .account-page p{line-height:1.6!important}.eni-account-page .site-header a,.eni-account-page .simple-footer a{color:inherit}.eni-account-page .um-account-meta{display:none}.eni-account-page .um-account-side{background:#edf5f5}.eni-account-page .um-account-main{padding:24px}.eni-account-page .um-account-side .um-account-title{display:inline!important}.eni-account-page .um-account-side ul{padding:0}.eni-account-page .um-account-side a{padding:14px!important}.eni-account-page .um-account-nav{display:none!important}@media(max-width:700px){.eni-account-page .um-account-side,.eni-account-page .um-account-main{width:100%;float:none;display:block!important}.eni-account-page .um-account-side ul{display:flex;flex-wrap:wrap}.eni-account-page .um-account-side li{flex:1 0 45%}.eni-account-page .um-account-icontip{display:none}.eni-account-page .um-account-main{padding:16px 0}}

.content-filters a[aria-current="true"]{background:var(--deep);color:white;border-color:var(--deep)}.resource-row:not(:has(img)){grid-template-columns:1fr}.resource-row:not(:has(img))>div{grid-column:1/-1}

.eni-account-page .site-header{position:relative;top:auto}.eni-account-page .account-page{min-height:0}.eni-account-page .um-account-tab>div{padding:24px!important}.eni-account-page .lightGreenTextBtn,.eni-account-page .lightGreenTextBtn i{color:var(--deep)!important}.eni-account-page .um-account-tab p{margin-bottom:10px!important}.eni-account-page .um-account-side a.current{background:var(--deep)!important;color:white!important}
.eni-account-page .um-account-tab .row{clear:both}.eni-account-page .um-account-side a.current .um-account-title{color:white!important}.eni-account-page .um-account-title{text-transform:none!important;word-break:normal!important;white-space:normal}.eni-account-page .account-page .textarea{margin-bottom:24px}.eni-account-page .um-account-main{word-break:normal;overflow-wrap:anywhere}.eni-account-page .um-account-tab p span{margin-right:6px}

/* Selected vacancy layout from the Vercel review site. */
:is(.vacancy-board,.page-hero) .eni-job-search{display:block;margin:24px 0 18px}
:is(.vacancy-board,.page-hero) .eni-job-search label{display:block;font-size:16px;font-weight:700;margin-bottom:8px}
:is(.vacancy-board,.page-hero) .eni-job-search .search-line{display:flex;align-items:stretch}
:is(.vacancy-board,.page-hero) .eni-job-search .search-input-wrap{flex:1;min-width:0}
:is(.vacancy-board,.page-hero) .eni-job-search input{display:block;width:100%;height:100%;margin:0;padding:10px 48px;font-weight:400;border:0;background:transparent}
:is(.vacancy-board,.page-hero) .eni-job-search .search-line>button{min-height:48px}
.vacancy-board .category-links{display:flex;flex-wrap:wrap}
.vacancy-board .role[hidden],.vacancy-board #empty[hidden],.vacancy-board #show-roles[hidden],#search-clear[hidden]{display:none!important}
.vacancy-board .role-list{border-top:1px solid #bacdd0}
.vacancy-board .role h3 a{text-decoration:none}
.vacancy-board .role h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.vacancy-board .role h3 a::after{content:"";position:absolute;inset:0}
.vacancy-board .role:focus-within{outline:3px solid var(--teal);outline-offset:3px}
.vacancy-board .role h3 a:focus-visible{outline:0}
.vacancy-board .role-salary{font-weight:400}
.home-page .vacancy-board .role{border-bottom:1px solid #bacdd0}
.home-page .vacancy-board .role>div{display:grid;grid-template-columns:minmax(0,1fr) 230px 32px;gap:6px 28px;align-items:center}
.home-page .vacancy-board .role h3{grid-column:1;grid-row:1}
.home-page .vacancy-board .role-location{grid-column:1;grid-row:2}
.home-page .vacancy-board .role-salary{grid-column:2;grid-row:1/3}
.home-page .vacancy-board .role-arrow{grid-column:3;grid-row:1/3}
.home-page .vacancy-board .role-field{display:none}
.home-page .vacancy-board .registration-note{margin-top:24px}
/* Padded sections own the space above their headings. The older shared heading rule added a second gap. */
body.refresh-page :is(.roles,.page-section,.reading,.content-featured,.content-paths,.home-employer-preview) > .section-heading{padding-top:0}
body.refresh-page .candidate-resources{padding-top:clamp(40px,4vw,56px)}
body.refresh-page :is(.service-section,.hiring-process,.employer-team,.dei-checklist){padding-top:clamp(44px,5vw,64px)}
body.refresh-page :is(.content-featured,.content-index,.content-paths){padding-top:clamp(40px,4vw,56px)}
.vacancy-cards .vacancy-board .role-list{border:0}
.vacancy-cards .vacancy-board .role-arrow{display:none}
.vacancy-board .role,.vacancy-board .role *{word-break:normal;overflow-wrap:normal}
.content-index .resource-row img{height:127px;max-height:127px;object-fit:cover}
@media(max-width:650px){.content-index .resource-row img{height:64px;max-height:64px}}
/* Archive rows and related roles each have one destination, so their title link fills the item. */
body.refresh-page .resource-row,body.refresh-page .role-related-card{position:relative}
body.refresh-page .resource-row h2 a::after,body.refresh-page .role-related-card h3 a::after{content:"";position:absolute;inset:0}
body.refresh-page .resource-row:focus-within,body.refresh-page .role-related-card:focus-within{outline:3px solid var(--teal);outline-offset:3px}
body.refresh-page .resource-row h2 a:focus-visible,body.refresh-page .role-related-card h3 a:focus-visible{outline:0}
@media(max-width:700px){.home-page .vacancy-board .role>div{display:block;padding-right:30px}.home-page .vacancy-board .role-salary{text-align:left}.home-page .vacancy-board .role-arrow{position:absolute;right:0;top:22px}:is(.vacancy-board,.page-hero) .eni-job-search input{padding-inline:12px}.vacancy-board .band-legend{float:none;margin:0 0 16px}}

/* The legacy theme's generic header rule must not pin either role header. */
body.role-page header.site-header,body.role-page header.role-title{position:static;inset:auto;width:auto;height:auto;min-height:0;z-index:auto}
body.role-page .role-copy h2,body.role-page .role-copy h3{color:var(--ink);line-height:1.18}

/* The inherited theme fixes every semantic header and breaks words inside divs.
   Refreshed pages use headers in normal document flow and natural word wrapping. */
body.refresh-page header{position:static;inset:auto;width:auto;z-index:auto}
body.refresh-page :is(div,p,span){word-break:normal}
body.refresh-page :is(.editorial-title,.editorial-person-name,.editorial-compact-name){overflow-wrap:break-word}
@media(max-width:900px){
  body.refresh-page .mobile-menu{display:grid;grid-template-columns:minmax(0,1fr)}
  body.refresh-page .mobile-menu a{display:flex;width:100%}
}

/* Keep the inherited account form's controls in the refreshed site's palette. */
body.refresh-page .eni-access .um .um-form-field{border:1px solid #527780!important;border-radius:4px!important;color:var(--ink)!important;background:white!important}
body.refresh-page .eni-access .um .um-field-label label{color:var(--ink)!important}
body.refresh-page .eni-access .um .um-button{background:var(--deep)!important;border:1px solid var(--deep)!important;border-radius:4px!important;color:white!important;box-shadow:none!important}
body.refresh-page .eni-access .um .um-button:hover{background:var(--teal)!important;border-color:var(--teal)!important}
body.refresh-page .eni-access .um .um-button.um-alt{background:white!important;color:var(--deep)!important}
body.refresh-page .eni-access .um .um-button.um-alt:hover{background:#e4eeee!important}
body.refresh-page .eni-access .um .um-link-alt{color:var(--teal)!important}
body.refresh-page .eni-access .um :is(.um-form-field,.um-button,.um-link-alt):focus-visible{outline:3px solid var(--teal)!important;outline-offset:3px!important}

/* Keep the employer cards and the space beside each illustration white. */
body.employers-page .service-card{background:#fff}
body.employers-page .service-card-media{background:#fff}

/* Preserve the employer service cards while giving their mobile artwork less height. */
@media(max-width:600px){
  body.employers-page .service-list-six{gap:16px}
  body.employers-page .service-card-media{height:120px;aspect-ratio:auto}
  body.employers-page .service-card-body{padding:22px 22px 24px}
}
/* wpautop leaves empty <p></p> around article-format markup; keep them from adding margins. Live regions are exempt. */
:where(.eni-reading-body,.eni-article-contents,.eni-article-callout,.prose,.story-aside,.case-dual-pill) p:empty:not([aria-live],[role]){display:none}
/* Header Contact: primary action to the current page's enquiry form, visible at every width. */
body.refresh-page .site-header .header-contact{display:inline-flex;flex:0 0 auto;min-height:44px;margin-left:28px;padding:0 18px;border-radius:4px;background:var(--lime);color:var(--ink);font-size:15px;font-weight:700;transition:background-color var(--dur-quick) ease,border-radius var(--dur-shape) var(--ease-out)}
/* Like the other buttons, it grows leaf corners on hover and keyboard focus. */
body.refresh-page .site-header .header-contact:hover{background:white;color:var(--ink);text-decoration:none;border-radius:var(--leaf-small)}
body.refresh-page .site-header .header-contact:focus-visible{outline:2px solid white;outline-offset:3px;border-radius:var(--leaf-small)}
@media(max-width:1000px){body.refresh-page .site-header .header-contact{margin-left:20px;padding:0 14px}}
@media(max-width:880px){body.refresh-page .site-header .header-contact{margin:0 -16px 0 0}}
/* Six nav items plus Contact need ~820px; use the menu below 880px so the row never crowds or wraps. */
@media(max-width:880px){body.refresh-page .primary-nav{display:none}body.refresh-page .menu-button{display:block}}
body.refresh-page .mobile-menu[hidden]{display:none}
/* Consultant card on role pages and articles, built on the prototype's sign-off card. */
body.refresh-page .eni-consultant-card{max-width:780px}
body.refresh-page .eni-consultant-card h2{margin:0 0 8px;font-size:24px;line-height:1.2;color:var(--ink)}
body.refresh-page .eni-consultant-card>p{margin:0 0 16px;font-size:16px;color:#405d63}
body.refresh-page .eni-consultant-card .role-signoff-meta{padding-top:16px}
body.refresh-page .eni-consultant-card .role-signoff-name{font-size:17px}
body.refresh-page .eni-consultant-card .role-signoff-role{font-size:14px}
body.refresh-page .eni-consultant-mark{display:inline-grid;place-items:center;background:var(--deep);color:white;font-size:13px;font-weight:800;letter-spacing:.04em}
body.refresh-page .eni-consultant-card .role-signoff-cta{display:flex;flex-wrap:wrap;gap:8px}
body.refresh-page .eni-consultant-card .role-signoff-cta .inline-action{min-height:44px;overflow-wrap:anywhere}
@media(max-width:650px){body.refresh-page .eni-consultant-card{padding:20px}body.refresh-page .eni-consultant-card .role-signoff-cta{flex:1 1 100%}}
/* File uploads: a field box matching the text inputs, with an outline "Choose file" button. */
body.refresh-page input[type=file]{box-sizing:border-box;width:100%;max-width:100%;min-height:52px;padding:6px 10px 6px 6px;border:1px solid #527780;border-radius:4px;background:white;color:#405d63;font:inherit;font-size:14px;cursor:pointer}
body.refresh-page input[type=file]::file-selector-button{margin-right:10px;min-height:38px;padding:0 12px;border:1px solid var(--deep);border-radius:4px;background:white;color:var(--deep);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .15s ease,color .15s ease}
body.refresh-page input[type=file]:hover::file-selector-button{background:var(--deep);color:white}
body.refresh-page input[type=file]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* Home testimonials: further quotes open as a full-width row of cards rather than a long narrow column.
   Blank lines in a quote become paragraphs; the featured quote keeps home.css paragraph spacing. */
body.refresh-page .home-trust .home-more-quotes{grid-column:1/-1;margin-top:-8px}
body.refresh-page .home-quote-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:8px 0 12px}
body.refresh-page .home-quote-card{display:flex;flex-direction:column;margin:0;padding:24px;border:1px solid #bacdd0;border-top:4px solid var(--teal);border-radius:0 0 6px 6px;background:white}
body.refresh-page .home-quote-card blockquote{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--ink)}
body.refresh-page .home-quote-card blockquote p{margin:0}
body.refresh-page .home-quote-card blockquote p+p{margin-top:12px}
body.refresh-page .home-quote-card figcaption{margin-top:auto;padding-top:14px;border-top:1px solid #e1ebec;font-size:14px;font-weight:700;line-height:1.4;color:#405d63}
@media(max-width:650px){body.refresh-page .home-quote-cards{grid-template-columns:1fr;gap:14px}body.refresh-page .home-quote-card{padding:20px}}
/* Find Talent search models grouped into Home's three families: permanent spans the row, project (2) and growth (1) share the next. */
body.refresh-page .service-families{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px}
body.refresh-page .service-family--permanent{grid-column:1/-1}
body.refresh-page .service-family--project{grid-column:span 2}
body.refresh-page .service-family--growth{display:flex;flex-direction:column}
body.refresh-page .service-family-heading{margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid #bacdd0;font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
body.refresh-page .service-family-list{display:grid;gap:24px;border-top:0}
body.refresh-page .service-family--permanent .service-family-list{grid-template-columns:repeat(3,minmax(0,1fr))}
body.refresh-page .service-family--project .service-family-list{grid-template-columns:repeat(2,minmax(0,1fr))}
body.refresh-page .service-family--growth .service-family-list{grid-template-columns:1fr;flex:1}
body.refresh-page .service-card-body h4{margin:0 0 8px;font-size:22px;line-height:1.2;color:var(--ink)}
body.refresh-page .service-card-best{margin:0 0 10px;font-weight:700;color:var(--deep)}
@media(max-width:1000px){body.refresh-page .service-families{grid-template-columns:1fr}body.refresh-page .service-family--project{grid-column:auto}body.refresh-page .service-family--permanent .service-family-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){body.refresh-page .service-family-list{grid-template-columns:1fr!important}}
/* Find Talent consultants reuse the About team cards. */
body.refresh-page .employer-team .about-team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px){body.refresh-page .employer-team .about-team-grid{grid-template-columns:1fr}}
body.refresh-page .about-team-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:auto;padding-top:14px}
body.refresh-page .employer-outcomes{padding-top:16px;padding-bottom:64px}
body.refresh-page .employer-outcomes-grid{padding:26px 28px;background:#eaf4f4;border-top:3px solid var(--teal)}
body.refresh-page .employer-outcomes-source{margin:18px 0 0}
body.refresh-page .eni-consultant-card .role-signoff-cta{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:6px}

/* Home: three featured resources, a named portrait and a single-row category filter on phones. */
body.refresh-page .home-resource-list.home-resource-list-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
body.refresh-page .home-resource-list .editorial-resource{align-content:start}
@media(max-width:800px){body.refresh-page .home-resource-list.home-resource-list-three{grid-template-columns:1fr;gap:4px}}
body.refresh-page .conversation .portrait{position:relative}
body.refresh-page .portrait-caption{position:absolute;left:0;bottom:0;margin:0;padding:8px 12px;background:rgba(255,255,255,.92);color:var(--ink);font-size:14px;font-weight:700;line-height:1.3}
@media(max-width:650px){
 body.refresh-page .vacancy-board .category-links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
 body.refresh-page .vacancy-board .category-links::-webkit-scrollbar{display:none}
 body.refresh-page .vacancy-board .category-links button{flex:none;white-space:nowrap}
}
/* Vacancy rows: one 1px rule between rows, matching the section rule, instead of stacked top and bottom borders. */
body.refresh-page .vacancy-board .role-list .eni-job-card{border-top:0}
/* "Show all roles" and the Home enquiry link share one row under the list on wider screens. */
body.refresh-page .vacancy-board .roles-footer{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-bottom:24px}
body.refresh-page .vacancy-board .roles-footer .show-roles{margin:0}
body.refresh-page .vacancy-board .roles-footer .registration-note{margin:0 0 0 auto}
@media(max-width:650px){body.refresh-page .vacancy-board .roles-footer{flex-direction:column;align-items:flex-start}body.refresh-page .vacancy-board .roles-footer .registration-note{margin:8px 0 0}}
/* "Contact us" is wider than "Contact"; keep the header buttons on one line down to 320px. */
body.refresh-page .site-header .header-contact,body.refresh-page .site-header .menu-button{white-space:nowrap}
/* Vacancies: search in the hero; cards share tab names, show the posted date and line up their footers. */
body.refresh-page .page-hero .eni-job-search{margin:0 0 20px;max-width:560px}
body.refresh-page .vacancy-board .role-field{display:flex!important;justify-content:space-between;gap:12px;align-self:stretch;max-width:none}
body.refresh-page.home-page .vacancy-board .role-field{display:none!important}
body.refresh-page .vacancy-board .role-posted{color:#5b7479;font-weight:400;white-space:nowrap}
/* Each card is a five-row subgrid (label, title, summary, details, salary), so every row of cards shares one baseline per line. */
body.refresh-page.vacancy-cards .vacancy-board .role{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:14px;align-content:start;align-items:start}
body.refresh-page.vacancy-cards .vacancy-board .role>div{display:contents!important}
body.refresh-page.vacancy-cards .vacancy-board .role>div>*{margin-block:0}
body.refresh-page.vacancy-cards .vacancy-board .role-salary .salary-motif{display:block;margin:6px 0 0!important}
body.refresh-page .vacancy-board .role-new{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:3px;background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;line-height:1.5;vertical-align:1px}
body.refresh-page .vacancy-cards .vacancy-board .role-salary,body.refresh-page.vacancy-cards .vacancy-board .role-salary{min-height:58px}
/* Role page: advert section headings and a shorter breadcrumb on phones. */
body.refresh-page .role-copy .role-section-heading{margin:32px 0 12px;font-size:22px;font-weight:700;letter-spacing:-.01em}
body.refresh-page .role-copy .role-section-heading+ul,body.refresh-page .role-copy .role-section-heading+p{margin-top:0}
@media(max-width:650px){body.refresh-page .breadcrumbs .breadcrumb-current,body.refresh-page .breadcrumbs .breadcrumb-current+*,body.refresh-page .breadcrumbs span[aria-hidden="true"]:has(+.breadcrumb-current){display:none}}
/* Role page: "Questions about this role?" sits in the facts panel on wide screens and after the advert on narrow ones. */
body.refresh-page .role-contact-after{display:none}
body.refresh-page .role-facts .role-contact-aside{margin:24px 0 0;padding:20px 0 0;border:0;border-top:1px solid #dce5e5;border-radius:0;background:transparent;box-shadow:none}
body.refresh-page .role-facts .role-contact-aside h2{font-size:18px;margin:0 0 6px}
body.refresh-page .role-facts .role-contact-aside>p{font-size:14px;margin:0 0 16px}
body.refresh-page .role-facts .role-contact-aside .role-signoff-meta{flex-wrap:wrap}
body.refresh-page .role-facts .role-contact-aside .role-signoff-cta{flex-direction:column;align-items:stretch}
body.refresh-page .role-facts .role-contact-aside .role-signoff-cta .inline-action{justify-content:flex-start}
@media(max-width:950px){body.refresh-page .role-contact-aside{display:none}body.refresh-page .role-contact-after{display:block}}
/* Contact: direct lines and office panel beside the introduction. */
body.refresh-page .contact-hero{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
@media(max-width:800px){body.refresh-page .contact-hero{grid-template-columns:1fr;gap:32px}}
body.refresh-page .contact-lines{list-style:none;margin:0;padding:0;display:grid;gap:10px}
body.refresh-page .contact-lines li{display:flex;gap:16px;align-items:baseline;font-size:19px}
body.refresh-page .contact-lines span{min-width:64px;font-size:14px;font-weight:700;color:#5b7479;text-transform:uppercase;letter-spacing:.05em}
body.refresh-page .contact-office{border:1px solid #dce5e5;border-top:4px solid var(--teal);border-radius:0 0 6px 6px;padding:28px;background:#fff}
body.refresh-page .contact-office h2{font-size:22px;margin:0 0 10px}
body.refresh-page .contact-office address{font-style:normal;font-size:19px;margin:0 0 8px}
body.refresh-page .contact-stations{font-size:16px;color:#405d63;margin:0 0 14px}
body.refresh-page .contact-team{margin-top:24px;padding-top:20px;border-top:1px solid #dce5e5}
body.refresh-page .contact-team-faces{display:flex;margin-bottom:12px}
body.refresh-page .contact-team-faces img{width:48px;height:48px;border-radius:50%;border:2px solid #fff;object-fit:cover;background:#e4eeee}
body.refresh-page .contact-team-faces img+img{margin-left:-10px}
body.refresh-page .contact-team p{font-size:16px;margin:0}
body.refresh-page .contact-office{padding-top:0;overflow:hidden}
body.refresh-page .contact-map{margin:0 -28px 24px}
body.refresh-page .contact-map img{display:block;width:100%;height:auto}
body.refresh-page .contact-map figcaption{padding:6px 28px 0;text-align:right;font-size:12px}
body.refresh-page .contact-map figcaption a{color:#5b7479}
/* The role facts panel takes the fixed leaf shape, like the job and team cards. */
body.refresh-page .role-facts{border-radius:var(--leaf-card)}
/* Apply sits straight after the role facts, with a little room each side (was about 42 px above and 44 px below). */
body.refresh-page .role-facts>.job-facts{margin-bottom:0}
body.refresh-page .role-facts>.button{margin:20px 0 0}
body.refresh-page .role-facts>.button+.eni-consultant-card{margin-top:22px}
/* Role reference, once, in "Questions about this role?" under the intro, with the role's Matrix fingerprint
   (eni_fingerprint_svg), the same mark as its share image. */
body.refresh-page .eni-consultant-card .role-reference{display:flex;align-items:center;gap:10px;margin:-4px 0 18px;font-size:16px;font-weight:700;color:var(--deep);letter-spacing:.01em}
body.refresh-page .eni-consultant-card .role-reference .eni-fingerprint{flex:none;width:24px;height:24px}
/* Leaf quote marks (eni_quote_leaves): two logo leaves in place of the “. Pale teal and lime on the deep story band;
   teal and pale teal in the light box on story pages, where the timeline's outcome already holds the lime. */
body.refresh-page .highlighted-quote .quote-leaves{display:block;font-size:0;line-height:0;opacity:1;margin:0 0 18px;--quote-leaf-1:#86d0da;--quote-leaf-2:var(--lime)}
body.refresh-page .highlighted-quote .quote-leaves svg{display:block;width:clamp(44px,5vw,56px);height:auto}
body.refresh-page .highlighted-quote .quote-leaves path:first-child{fill:var(--quote-leaf-1)}
body.refresh-page .highlighted-quote .quote-leaves path:last-child{fill:var(--quote-leaf-2)}
body.refresh-page .case-quote-wrapper .quote-leaves{margin:0 0 14px;--quote-leaf-1:var(--teal);--quote-leaf-2:#86d0da}
body.refresh-page .case-quote-wrapper .quote-leaves svg{width:40px}
/* About: the office card, set wide below the team, map on the left and the address beside it; stacked on phones. */
body.refresh-page .contact-office h3{font-size:22px;font-weight:400;line-height:1.15;margin:0 0 10px}
body.refresh-page .about-office{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:1fr repeat(4,auto) 1fr;column-gap:clamp(28px,4vw,48px);padding:0 28px 0 0;margin-top:clamp(32px,4vw,48px)}
body.refresh-page .about-office>*{grid-column:2}
body.refresh-page .about-office>h3{grid-row:2}
body.refresh-page .about-office>address{grid-row:3}
body.refresh-page .about-office>.contact-stations{grid-row:4}
body.refresh-page .about-office>.text-action{grid-row:5;justify-self:start}
body.refresh-page .about-office .contact-map{grid-column:1;grid-row:1/-1;margin:0;display:flex;flex-direction:column}
body.refresh-page .about-office .contact-map img{flex:1;min-height:0;object-fit:cover}
body.refresh-page .about-office .contact-map figcaption{padding:6px 12px 10px}
@media(max-width:800px){body.refresh-page .about-office{display:block;padding:0 24px 24px}body.refresh-page .about-office .contact-map{margin:0 -24px 20px}body.refresh-page .about-office .contact-map figcaption{padding:6px 24px 0}}
/* Resources: two "Start here" routes above the archive, each with its own image, tint and next step. */
body.refresh-page .content-paths{padding-block:clamp(40px,5vw,64px) 0}
body.refresh-page .content-paths-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body.refresh-page .content-path{display:flex;flex-direction:column;border-top:4px solid var(--teal);border-radius:0 0 8px 8px;overflow:hidden;background:#eef5f4}
body.refresh-page .content-path-employers{background:#fff;box-shadow:inset 0 0 0 1px #dce5e5}
body.refresh-page .content-path-media{margin:0;aspect-ratio:16/7;overflow:hidden}
body.refresh-page .content-path-media img{display:block;width:100%;height:100%;object-fit:cover}
body.refresh-page .content-path-candidates .content-path-media img{object-position:50% 0}
body.refresh-page .content-path-body{display:flex;flex-direction:column;flex:1;padding:24px 28px 28px}
body.refresh-page .content-path h3{font-size:26px;letter-spacing:-.02em;margin:0 0 8px}
body.refresh-page .content-path-body>p{font-size:17px;line-height:1.5;color:#405d63;margin:0 0 12px}
body.refresh-page .content-path ul{list-style:none;margin:0 0 24px;padding:0}
body.refresh-page .content-path li{border-top:1px solid rgba(12,45,55,.12)}
body.refresh-page .content-path a:not(.button){display:flex;justify-content:space-between;gap:16px;padding:12px 0;font-size:17px;font-weight:600;text-decoration:none;color:var(--ink)}
body.refresh-page .content-path a:not(.button):hover{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
body.refresh-page .content-path .button{margin-top:auto;align-self:flex-start}
@media(max-width:800px){body.refresh-page .content-paths-grid{grid-template-columns:1fr;gap:16px}body.refresh-page .content-path-body{padding:20px}body.refresh-page .content-path .button{align-self:stretch;justify-content:center}}
/* Resources archive: filters as tabs (like the vacancy board), and the posted date beside each row's topic. */
body.refresh-page .content-filters{display:flex;flex-wrap:wrap;gap:0 28px;margin:0 0 18px;padding:0;border-bottom:1px solid #dce5e5}
body.refresh-page .content-filters a{display:inline-flex;align-items:center;min-height:48px;padding:12px 0;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--ink);font-size:17px;font-weight:400;text-decoration:none}
body.refresh-page .content-filters a:hover{border-bottom-color:var(--teal);background:none;color:var(--deep)}
body.refresh-page .content-filters a[aria-current="true"]{border-bottom-color:var(--teal);background:none;color:var(--deep);font-weight:700}
@media(max-width:650px){
 body.refresh-page .content-filters{flex-wrap:nowrap;gap:0 22px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
 body.refresh-page .content-filters::-webkit-scrollbar{display:none}
 body.refresh-page .content-filters a{flex:none;white-space:nowrap;font-size:16px}
}
body.refresh-page .resource-row .resource-category{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
body.refresh-page .resource-row .resource-date{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:#5b7479}

/* Arriving at a page anchor (#archive, #roles, #enquiry) jumps straight there; smooth scrolling is only for in-page links after load. */
html:not(.eni-scroll-ready){scroll-behavior:auto!important}
/* Inclusive hiring: four-step checklist, using the hiring-steps numbering. */
body.refresh-page .dei-checklist{border-top:1px solid #bacdd0;padding-top:48px}
body.refresh-page .dei-steps li{display:flex;flex-direction:column}
body.refresh-page .dei-steps p{margin-bottom:16px}
body.refresh-page .dei-steps .text-action,body.refresh-page .dei-commitments .dei-section-heading>.text-action{display:inline-flex;gap:6px;width:auto;min-height:0;padding:0;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none;font-weight:700;color:var(--deep)}
body.refresh-page .dei-steps .text-action{margin-top:auto;align-self:flex-start}
body.refresh-page .dei-steps .text-action:hover,body.refresh-page .dei-commitments .dei-section-heading>.text-action:hover{background:none;color:var(--teal)}
body.refresh-page .dei-commitments .dei-section-heading>.text-action{grid-column:2;justify-self:start;margin-top:-16px}
@media(max-width:800px){body.refresh-page .dei-commitments .dei-section-heading>.text-action{grid-column:auto}}

/* Card rows share lines: in a multi-column row, each editorial card's image, label, title and summary,
   and each commitment's badge, heading, text and link, sit on the same line as their neighbours'. */
@media(min-width:801px){
 body.refresh-page .home-resource-list{grid-auto-rows:auto}
 body.refresh-page .home-resource-list>.editorial-resource{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
 body.refresh-page .home-resource-list>.editorial-resource>.editorial-compact-body{display:contents}
 body.refresh-page .dei-commitment-grid>article{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
 body.refresh-page .dei-commitment-grid>article>.text-action{align-self:start;justify-self:start}
}
/* Hire talent: brief-writing advice as a footnote under the hiring steps. */
body.refresh-page .hiring-footnote{margin-top:28px;padding-top:16px;border-top:1px solid #dce5e5;max-width:860px}
body.refresh-page .hiring-footnote p{margin:0;font-size:15px;line-height:1.6;color:#405d63}
body.refresh-page .hiring-footnote strong{color:var(--ink)}
body.refresh-page .hiring-footnote a{color:var(--deep);font-weight:600;white-space:nowrap}
/* Hire talent: about 75px from the brief footnote to "Who you'll work with". */
body.refresh-page .hiring-process{padding-bottom:20px}
body.refresh-page .employer-team{padding-top:0}


/* Home hero: the talent spotter (assets/js/home-hero-spotter.js). A light ground; the crowd sits beside the
   text, or in the clear space above it on narrower screens, and never behind it. */
.home-spotter{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(100deg,#f6f9f9 0%,#eef5f6 45%,#e4f0f1 100%)}
.home-spotter>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.maximum.home-page .home-spotter .maximum-hero.motif-hero{min-height:560px;align-items:center}
.home-spotter .maximum-opening .text-action{background:transparent}
@media(max-width:900px){.maximum.home-page .home-spotter .maximum-hero.motif-hero{min-height:0;padding-block:56px 64px}}
/* 800px and below (matches the script): the crowd gets its own clear space above the kicker. */
@media(max-width:800px){.maximum.home-page .home-spotter .maximum-hero.motif-hero{padding-top:200px}.maximum.home-page .home-halftone .maximum-hero.motif-hero{padding-top:250px}}
@media(max-width:700px){.maximum.home-page .home-spotter .maximum-hero.motif-hero{padding-top:180px}}
@media(max-width:700px){.maximum.home-page .home-halftone .maximum-hero.motif-hero{padding-top:250px}}
/* Without its photographs the halftone hero keeps the plain ground and the copy's usual spacing. */
@media(max-width:800px){.maximum.home-page .home-halftone.is-without-art .maximum-hero.motif-hero{padding-top:56px}}

/* Spot art: a drawn piece in the hero's image slot (inc/spot-art.php), in a leaf-shaped 3:2 frame. */
.page-hero-art.spot-art-frame{align-self:center}
.spot-art{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:6px 64px 6px 64px;background:var(--spot-ground,#e4f0f1)}
.spot-art>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.spot-career-flow{--spot-ground:linear-gradient(120deg,#0a3f48 0%,#084d57 60%,#0b5a65 100%)}
.spot-leaf-swarm{--spot-ground:#fff}
.spot-bean-machine{--spot-ground:#f3f7f7}
.spot-signal{--spot-ground:#f3f7f7}
.census-feature .spot-art-frame{background:none;align-self:center}
.spot-missing-person{--spot-ground:linear-gradient(100deg,#f6f9f9 0%,#eef5f6 45%,#e4f0f1 100%)}
@media(max-width:700px){.spot-art{border-radius:4px 40px 4px 40px}}

/* Hero lab: image-free Home hero backgrounds, only with ?hero=<variant>[&tone=light]. Readability first:
   every background goes quiet behind the text. The switcher and contrast readout are for comparison only. */
.hero-lab{position:relative;isolation:isolate;overflow:hidden;background:var(--hl-bg)}
.hero-lab-dark{--hl-bg:linear-gradient(100deg,#0c2d37 0%,#0a3a44 45%,#084d57 100%)}
.hero-lab-light{--hl-bg:linear-gradient(100deg,#f6f9f9 0%,#eef5f6 45%,#e4f0f1 100%)}
.hero-lab>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.hero-lab .maximum-hero .hero-motif{display:none}
.maximum.home-page .hero-lab .maximum-hero.motif-hero{min-height:560px;align-items:center}
@media(max-width:900px){.maximum.home-page .hero-lab .maximum-hero.motif-hero{min-height:0;padding-block:56px 64px}}
/* Phones: the text fills the width, so the background gets its own clear space above the kicker. */
@media(max-width:700px){.maximum.home-page .hero-lab .maximum-hero.motif-hero{padding-top:160px}}
.hero-lab-dark .maximum-opening,.hero-lab-dark .maximum-opening h1{color:white}
.hero-lab-dark .maximum-opening h1 span,.hero-lab-dark .maximum-opening .sector{color:var(--lime)}
.hero-lab-dark .maximum-opening .opening-copy{color:#d7eaed}
.hero-lab-dark .maximum-opening .button{background:white;border-color:white;color:var(--deep)}
.hero-lab-dark .maximum-opening .text-action{background:transparent;border-color:rgba(255,255,255,.6);color:white}
.hero-lab-light .maximum-opening .text-action{background:transparent}
.hero-lab-dark :focus-visible{outline-color:white}
.hero-lab-bar{position:fixed;z-index:1000;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;max-width:calc(100% - 24px);padding:6px;border-radius:14px;background:rgba(12,45,55,.94);box-shadow:0 10px 30px -10px rgba(0,0,0,.5);font:500 13px/1 system-ui,sans-serif}
.hero-lab-bar a{color:#cfe6ea;text-decoration:none;padding:8px 10px;border-radius:9px}
.hero-lab-bar a[aria-current="true"]{background:white;color:#0c2d37}
.hero-lab-bar a:hover{color:white}
.hero-lab-bar output{color:#cfe6ea;padding:8px 10px;font-variant-numeric:tabular-nums;border-left:1px solid rgba(255,255,255,.15);margin-left:4px}
.hero-lab-bar output b{color:var(--lime);font-weight:600}
.hero-lab-bar output b.fail{color:#ff9d8a}
/* Motion, batch 1 of docs/planning/glyphs-and-motion-plan.md. One easing and three durations for every control.
   Only transform, opacity and border-radius move; with reduced motion the same states apply instantly. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--dur-quick:.15s;--dur-move:.3s;--dur-shape:.45s;--ease-spring:cubic-bezier(.3,1.4,.4,1);--leaf-card:4px 32px 4px 32px;--leaf-small:4px 22px 4px 22px}
/* Actions: square corners grow into the logo's leaf (sharp top-left and bottom-right) on hover and keyboard focus. */
body.refresh-page :is(.button,.text-action,.show-roles,#clear){transition:background-color var(--dur-quick) ease,border-color var(--dur-quick) ease,color var(--dur-quick) ease,transform .1s ease,border-radius var(--dur-shape) var(--ease-out)}
body.refresh-page :is(.button,.text-action,.show-roles,#clear):focus-visible{border-radius:var(--leaf-small)}
@media(hover:hover){body.refresh-page :is(.button,.text-action,.show-roles,#clear):hover{border-radius:var(--leaf-small)}}
/* Links set flush in text (Home's hiring options, team emails) have no padding, so a fill on the link itself hugs the
   letters. The fill is drawn as a larger leaf behind the link instead, without moving the layout. */
body.refresh-page .about-team-card .text-action{position:relative;isolation:isolate}
body.refresh-page .about-team-card .text-action:hover{background:transparent}
body.refresh-page .about-team-card .text-action::before{content:"";position:absolute;inset:-10px -16px;z-index:-1;background:#e4eeee;border-radius:4px;opacity:0;transition:opacity var(--dur-quick) ease,border-radius var(--dur-shape) var(--ease-out)}
body.refresh-page .about-team-card .text-action:focus-visible::before{opacity:1;border-radius:4px 28px 4px 28px}
@media(hover:hover){body.refresh-page .about-team-card .text-action:hover::before{opacity:1;border-radius:4px 28px 4px 28px}}

/* A short orientation to the field, followed by a substantial employer invitation. */
/* What is insight: the question the hero raises, answered beside it. The question sits under the hero copy in the
   eyebrow's teal, marked with the lens leaf; the answer reads at body size with its two ways on beneath. */
body.refresh-page .home-insight{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px clamp(32px,5vw,72px);align-items:baseline;padding-block:clamp(36px,4.5vw,60px)}
body.refresh-page .home-insight h2{display:flex;align-items:center;gap:14px;margin:0;color:var(--teal);font-size:clamp(24px,2.6vw,34px);line-height:1.15}
body.refresh-page .home-insight h2::before{content:"";flex:none;width:.62em;height:.62em;background:var(--teal);border-radius:0 55% 0 55%}
body.refresh-page .home-insight p{margin:0;max-width:34em;color:var(--ink);font-size:clamp(18px,1.6vw,21px);line-height:1.5}
body.refresh-page .home-insight-links{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;margin-top:6px}
body.refresh-page .home-insight a{color:var(--deep);font-size:16px;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;white-space:nowrap}
body.refresh-page .home-insight .home-insight-archive{color:#527780;font-size:15px;font-weight:400;text-decoration-color:#bacdd0}
body.refresh-page .home-insight a:hover{color:var(--teal);text-decoration-color:currentColor}
body.refresh-page .home-insight a:focus-visible{outline:2px solid var(--teal);outline-offset:5px}
body.refresh-page .home-employer-preview{padding-block:clamp(48px,6vw,80px);padding-top:clamp(40px,4vw,56px);padding-bottom:clamp(24px,3vw,40px)}
body.refresh-page .home-employer-preview .section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
body.refresh-page .home-employer-preview .section-heading .home-hiring-link{flex:none;color:var(--ink);font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
body.refresh-page .home-employer-preview .section-heading .home-hiring-link:hover{color:var(--teal);text-decoration:underline}
body.refresh-page .home-employer-preview .section-heading .home-hiring-link:focus-visible{outline:2px solid var(--teal);outline-offset:5px}
body.refresh-page .home-hiring-options{gap:16px;margin:32px 0 12px}
body.refresh-page .home-hiring-options article{display:flex;flex-direction:column;min-height:245px;padding:25px 27px 28px;border:1px solid #c7dadc;border-top:4px solid var(--teal);border-radius:4px 58px 4px 58px;overflow:hidden;background:#f4f8f8;transition:border-color var(--dur-quick) ease,background-color var(--dur-quick) ease,transform var(--dur-move) var(--ease-out)}
body.refresh-page .home-hiring-options article:focus-within{outline:2px solid var(--teal);outline-offset:3px}
@media(hover:hover){body.refresh-page .home-hiring-options article:hover{background:#eaf3f3;border-top-color:var(--lime);transform:translateY(-3px)}}
body.refresh-page .home-hiring-options .home-hiring-number{color:var(--teal);font-size:13px;font-weight:800;letter-spacing:.12em}
body.refresh-page .home-hiring-options h3{margin:27px 0 12px;font-size:clamp(23px,2.3vw,29px);line-height:1.15}
body.refresh-page .home-hiring-options h3 a{display:block;position:relative;padding-right:24px;color:var(--deep);text-decoration:none}
body.refresh-page .home-hiring-options h3 a span[aria-hidden]{position:absolute;right:0;top:0;color:var(--teal);font-size:22px;line-height:1}
body.refresh-page .home-hiring-options h3 a:hover{text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:5px}
body.refresh-page .home-hiring-options p{margin-top:auto;color:#405d63;font-size:16px;line-height:1.5}
@media(max-width:900px){body.refresh-page .home-insight{grid-template-columns:1fr}body.refresh-page .home-insight-links{grid-column:1}body.refresh-page .home-insight a{white-space:normal}body.refresh-page .home-employer-preview .section-heading{display:block}body.refresh-page .home-employer-preview .section-heading .home-hiring-link{margin-top:14px;white-space:normal}}
@media(min-width:651px) and (max-width:900px){body.refresh-page .home-hiring-options article{min-height:300px;padding-inline:20px}body.refresh-page .home-hiring-options h3{font-size:22px}}
@media(max-width:650px){body.refresh-page .home-insight-links{gap:9px 22px}body.refresh-page .home-hiring-options{grid-template-columns:1fr;gap:12px}body.refresh-page .home-hiring-options article{display:flex;min-height:0;padding:21px 23px;border-radius:4px 42px 4px 42px}body.refresh-page .home-hiring-options h3{margin:16px 0 10px}body.refresh-page .home-hiring-options p{margin:0}}

/* Centre the large About figures within their rules at every label length. */
body.refresh-page .about-metric-item{display:flex;flex-direction:column;justify-content:center;padding-block:10px}
body.refresh-page .about-metric-item .metric-prefixed{display:flex;align-items:baseline;gap:.16em;white-space:nowrap}
body.refresh-page .about-metric-item .metric-prefixed :is(.metric-prefix,.metric-value){display:inline;color:var(--teal);font-weight:700;line-height:inherit}
body.refresh-page .about-metric-item .metric-prefixed .metric-prefix{font-size:1em}
body.refresh-page .about-metric-item .metric-prefixed .metric-value{font-size:.9em}
/* Vacancy rows and cards: a lime rule grows beside the row in focus and the arrow leans toward the role. */
body.refresh-page .vacancy-board .role::before{content:"";position:absolute;width:4px;border-radius:2px;background:var(--lime);transform:scaleY(0);transition:transform var(--dur-move) var(--ease-out);pointer-events:none}
body.refresh-page .vacancy-board .role .role-arrow{transition:transform var(--dur-move) var(--ease-out)}
body.refresh-page .vacancy-board .role:focus-within::before{transform:scaleY(1)}
body.refresh-page .vacancy-board .role:focus-within .role-arrow{transform:translate(3px,-3px)}
@media(hover:hover){
 body.refresh-page .vacancy-board .role:hover::before{transform:scaleY(1)}
 body.refresh-page .vacancy-board .role:hover .role-arrow{transform:translate(3px,-3px)}
}
/* Home rows have no side padding, so the rule sits in the gutter and replaces the grey hover fill. */
body.refresh-page[data-vacancies="compact"] .vacancy-board .role::before{left:-14px;top:22px;bottom:22px}
body.refresh-page[data-vacancies="compact"] .vacancy-board .role:hover{background:transparent}
@media(max-width:650px){body.refresh-page[data-vacancies="compact"] .vacancy-board .role::before{left:-11px}}
/* Cards: the rule runs down the left edge inside the border, clipped to the leaf; the card stays white. */
body.refresh-page[data-vacancies="cards"] .vacancy-board .role::before{left:0;top:0;bottom:0;border-radius:0;transform-origin:top}
body.refresh-page[data-vacancies="cards"] .vacancy-board .role:hover{background:white}
/* The row in focus is marked by the lime rule, so its title no longer underlines on hover. */
body.refresh-page .vacancy-board .role h3 a:hover{text-decoration:none}
/* Repeating cards take the logo's leaf. Focus outlines follow border-radius, so they are leaf-shaped too.
   Cards clip to the curve (the lime rule and photos follow it); full-width bands and one-off panels stay square. */
body.refresh-page[data-vacancies="cards"] .vacancy-board .role,body.refresh-page .about-team-card,body.refresh-page .service-card,body.refresh-page .case-feature-quote{border-radius:var(--leaf-card);overflow:hidden}
body.refresh-page .about-badge{border-radius:var(--leaf-small)}
/* Home rows share straight dividing rules, so the row stays square and its keyboard focus ring is drawn as a
   separate leaf (a radius on the row itself would curl the rules at each end). */
body.refresh-page[data-vacancies="compact"] .vacancy-board .role:focus-within{outline:0}
body.refresh-page[data-vacancies="compact"] .vacancy-board .role:focus-within::after{content:"";position:absolute;inset:-6px;border:3px solid var(--teal);border-radius:var(--leaf-small);pointer-events:none}
/* Category filters, batch 2: a pale leaf track and one deep leaf that slides and resizes to the chosen option
   (vacancy categories and Resources topics). Without JavaScript the chosen option fills itself. Weight stays the
   same when selected so neighbouring options do not shift while the leaf moves. */
body.refresh-page :is(.vacancy-board .category-links,.content-filters){position:relative;display:flex;flex-wrap:nowrap;gap:0;width:fit-content;max-width:100%;margin-inline:0;padding:4px;border:0;border-radius:5px 24px 5px 24px;background:#e9f3f4;overflow-x:auto;scrollbar-width:none}
body.refresh-page :is(.vacancy-board .category-links,.content-filters)::-webkit-scrollbar{display:none}
body.refresh-page :is(.vacancy-board .category-links button,.content-filters a){position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:10px 18px;border:0;border-radius:3px 20px 3px 20px;background:transparent;color:#35535a;font-size:16px;font-weight:400;line-height:1.2;white-space:nowrap;text-decoration:none;transition:color var(--dur-move) ease,background-color var(--dur-quick) ease}
body.refresh-page :is(.vacancy-board .category-links button,.content-filters a):is([aria-pressed="true"],[aria-current="true"]){background:var(--deep);color:white;font-weight:400}
@media(hover:hover){body.refresh-page :is(.vacancy-board .category-links button,.content-filters a):not([aria-pressed="true"],[aria-current="true"]):hover{background:rgba(255,255,255,.7);color:var(--deep)}}
body.refresh-page :is(.vacancy-board .category-links button,.content-filters a):focus-visible{outline:2px solid var(--teal);outline-offset:-4px}
body.refresh-page :is(.vacancy-board .category-links button,.content-filters a):is([aria-pressed="true"],[aria-current="true"]):focus-visible{outline-color:white}
body.refresh-page .has-filter-leaf :is(button,a):is([aria-pressed="true"],[aria-current="true"]){background:transparent}
body.refresh-page .filter-leaf{position:absolute;z-index:0;left:0;top:4px;bottom:4px;width:0;border-radius:3px 20px 3px 20px;background:var(--deep);pointer-events:none;transition:transform var(--dur-shape) var(--ease-spring),width var(--dur-shape) var(--ease-spring)}
/* Phones: the filters scroll edge to edge, so the track drops away and only the leaf remains. */
@media(max-width:650px){body.refresh-page :is(.vacancy-board .category-links,.content-filters){width:auto;max-width:none;margin-inline:-20px;padding:4px 20px;border-radius:0;background:none}
 body.refresh-page :is(.vacancy-board .category-links button,.content-filters a){padding:10px 14px}}
/* Form fields, batch 3. Contact Form 7 still checks each field; this only adds feedback to what it decides.
   Focus: the border turns teal and a teal bar grows along the bottom, in place of the site's burnt-orange ring.
   Valid: a lime dot once an email address looks complete. Invalid, on every form: a red border and full red bar, and the field shakes once.
   Both marks are background layers, so they follow the field's corners and need no extra markup. */
body.refresh-page .wpcf7-form :is(input[type=text],input[type=email],input[type=tel],input[type=url],textarea){--bar:0%;--dot:0px;background-image:linear-gradient(var(--teal),var(--teal)),radial-gradient(circle closest-side,var(--lime) 0 85%,transparent 100%);background-repeat:no-repeat;background-position:left bottom,right 14px center;background-size:var(--bar) 3px,var(--dot) var(--dot);transition:background-size var(--dur-shape) var(--ease-out),background-color var(--dur-quick) ease,border-color var(--dur-quick) ease}
body.refresh-page .wpcf7-form :is(input[type=text],input[type=email],input[type=tel],input[type=url],textarea):focus{--bar:100%;border-color:var(--teal);outline:0}
body.refresh-page .wpcf7-form :is(input,textarea)[aria-invalid="true"]{--bar:100%;border-color:#a3301a;background-image:linear-gradient(#a3301a,#a3301a),none}
body.refresh-page .wpcf7-form input[type=email]{padding-right:36px}
body.refresh-page .wpcf7-form input[type=email].is-valid{--dot:12px}
body.refresh-page .wpcf7-form .is-shaking{animation:eni-shake .4s ease-in-out}
@keyframes eni-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* Sending and received, batch 4. While Contact Form 7 sends, the button keeps its size and three dots replace its
   label. When it succeeds, a received panel takes the place of the fields; a failure keeps Contact Form 7's message. */
body.refresh-page .wpcf7-form .wpcf7-spinner{display:none}
body.refresh-page .wpcf7-form p:has(>input[type=submit]){position:relative;width:fit-content}
body.refresh-page .send-dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;opacity:0;pointer-events:none;transition:opacity var(--dur-quick) ease}
body.refresh-page .send-dots i{width:8px;height:8px;border-radius:50%;background:white;animation:eni-bob 1.1s cubic-bezier(.5,0,.5,1) infinite}
body.refresh-page .send-dots i:nth-child(2){animation-delay:.12s}
body.refresh-page .send-dots i:nth-child(3){animation-delay:.24s;background:var(--lime)}
@keyframes eni-bob{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(0) scale(1.15,.85)}}
body.refresh-page .wpcf7-form.submitting input[type=submit]{color:transparent;pointer-events:none}
body.refresh-page .wpcf7-form.submitting .send-dots{opacity:1}
body.refresh-page .wpcf7-form.is-received>:not(.eni-received){display:none!important}
body.refresh-page .eni-received{display:grid;gap:20px;margin-bottom:24px;padding:28px;background:white;border:1px solid #d3e3e5;border-radius:var(--leaf-card)}
body.refresh-page .eni-received[hidden]{display:none}
body.refresh-page .eni-received:focus{outline:0}
body.refresh-page .eni-received:focus-visible{outline:3px solid #9c3400;outline-offset:4px}
body.refresh-page .eni-received-head{display:flex;gap:16px;align-items:center}
body.refresh-page .eni-received-mark{position:relative;flex:none;width:52px;height:52px}
body.refresh-page .eni-received-mark svg{display:block;width:100%;height:100%}
body.refresh-page .eni-received-mark .tick{stroke-dasharray:24;stroke-dashoffset:24;animation:eni-draw .4s .15s var(--ease-out) forwards}
body.refresh-page .eni-received-mark::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);opacity:0;animation:eni-pulse .9s .5s var(--ease-out)}
@keyframes eni-draw{to{stroke-dashoffset:0}}
@keyframes eni-pulse{from{transform:scale(.8);opacity:.9}to{transform:scale(1.7);opacity:0}}
body.refresh-page .eni-received-title{margin:0;font-size:22px;font-weight:700;line-height:1.25}
body.refresh-page .eni-received-note{margin:4px 0 0;color:#4c6870}
body.refresh-page .eni-received-next{margin:0;padding-top:18px;border-top:1px solid #d3e3e5;color:var(--teal);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* What happens next: three points on one interval, each label under its point; lime marks where things are now. */
body.refresh-page .eni-received-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:-6px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.3;text-align:center}
body.refresh-page .eni-received-steps::before{content:"";position:absolute;top:9px;left:16.67%;right:16.67%;height:2px;background:#c3dce0}
body.refresh-page .eni-received-steps li{position:relative;display:grid;justify-items:center;gap:10px;padding:0 6px}
body.refresh-page .eni-received-steps li::before{content:"";width:8px;height:8px;margin-top:5px;border-radius:50%;background:#a8ccd2}
body.refresh-page .eni-received-steps li:first-child{font-weight:700}
body.refresh-page .eni-received-steps li:first-child::before{width:12px;height:12px;margin-top:3px;background:var(--lime);box-shadow:0 0 0 4px rgba(193,216,50,.3)}
body.refresh-page .eni-received .text-action{justify-self:start}
@media(max-width:650px){body.refresh-page .eni-received{padding:22px 20px}body.refresh-page .eni-received-steps{font-size:14px}}
/* Glyphs, batch 5. Mono glyphs take the text colour and never animate; the label beside each carries the meaning. */
.eni-glyph{flex:none;width:1.25em;height:1.25em;overflow:visible}
/* Role facts on Home rows, Vacancies cards and the role page: a glyph for job type and working pattern, then location
   as plain text. Gaps replace the old " · " separators; a glyph never wraps away from its label. */
body.refresh-page .job-facts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
body.refresh-page .job-fact{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
body.refresh-page .term-line.job-facts{gap:8px 20px}
/* Numbered leaves, batch 6. Hire talent's process: each step number sits in the logo's leaf, a dotted connector
   leads to the next step, and lime marks Review the shortlist, where ENI's judgement shows most. */
body.refresh-page .hiring-process .hiring-steps li{position:relative;border-top:0;padding-top:0}
body.refresh-page .hiring-process .hiring-steps li::before{content:counter(hiring-step);display:grid;place-items:center;width:40px;height:40px;margin-bottom:22px;border-radius:3px 17px 3px 17px;background:var(--teal);color:white;font-size:17px;font-weight:700;line-height:1}
body.refresh-page .hiring-process .hiring-steps li:nth-child(3)::before{background:var(--lime);color:var(--ink)}
body.refresh-page .hiring-process .hiring-steps li:not(:last-child)::after{content:"";position:absolute;top:19px;left:56px;right:0;border-top:2px dotted #a8ccd2}
@media(max-width:1000px){body.refresh-page .hiring-process .hiring-steps li:nth-child(2)::after{display:none}}
@media(max-width:600px){body.refresh-page .hiring-process .hiring-steps li::after{display:none}body.refresh-page .hiring-process .hiring-steps li::before{margin-bottom:14px}}
/* Inclusive hiring: keeps its rule and 01–04, with a teal stage glyph above each heading. */
body.refresh-page .dei-steps .dei-stage-glyph{display:block;width:48px;height:48px;margin:0 0 16px}
/* List markers, batch 7: a halo dot (the observation dot in its pale ring) for plain lists in role adverts. Articles
   use the same marker (article-formats.css); leaf markers stay for checklists, so leaf = to do and dot = a point.
   Nested items take the dot without its ring. */
body.refresh-page .role-copy ul:not([class]){list-style:none;padding-left:0}
body.refresh-page .role-copy ul:not([class])>li{position:relative;padding-left:28px}
body.refresh-page .role-copy ul:not([class])>li::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;background:radial-gradient(circle,var(--teal) 0 3.4px,rgba(0,119,139,.18) 3.9px 7.4px,transparent 7.9px)}
body.refresh-page .role-copy ul:not([class]) ul:not([class])>li::before{background:radial-gradient(circle,var(--teal) 0 2.6px,transparent 3.1px)}
/* Empty and missing states, batch 8: a field of observations with one missing, its place ringed. No lime. */
.eni-missing-field .dots{fill:#a8ccd2}
.eni-missing-field .gap{fill:none;stroke:var(--teal);stroke-width:1.8;stroke-dasharray:3 3.4}
/* No matching roles: the field beside the message; the ring settles in each time the state appears. */
body.refresh-page .vacancy-board #empty:not([hidden]){display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:28px;align-items:center;padding:32px 0;border-block:1px solid #d3e3e5}
body.refresh-page #empty .empty-field{grid-row:1 / span 3;width:96px;height:96px}
body.refresh-page #empty .empty-field .gap{stroke-width:2.2}
body.refresh-page #empty>:not(svg){grid-column:2}
body.refresh-page #empty .empty-field .gap{transform-box:fill-box;transform-origin:center;animation:eni-ring-in var(--dur-shape) var(--ease-out) both}
@keyframes eni-ring-in{from{transform:scale(.4);opacity:0}}
@media(max-width:650px){body.refresh-page .vacancy-board #empty:not([hidden]){grid-template-columns:64px minmax(0,1fr);column-gap:18px}body.refresh-page #empty .empty-field{width:64px;height:64px;align-self:start}}
/* 404: the missing page, drawn. The field sits beside the copy, and above it on narrow screens. */
body.refresh-page .eni-not-found{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,360px);gap:32px 64px;align-items:center}
body.refresh-page .eni-not-found .not-found-field{grid-column:2;grid-row:1;width:100%;height:auto}
body.refresh-page .eni-not-found .not-found-copy{grid-column:1;grid-row:1;min-width:0}
@media(max-width:800px){body.refresh-page .eni-not-found{grid-template-columns:1fr}body.refresh-page .eni-not-found .not-found-field{grid-column:1;max-width:240px}body.refresh-page .eni-not-found .not-found-copy{grid-row:2}}
/* Topic glyphs, batch 9: Careers = Career path, Hiring & inclusion = Belonging, Market insight = Histogram, in the
   text colour on the Resources filters, archive row labels and article kickers. */
body.refresh-page .content-filters a{gap:8px}
body.refresh-page .resource-category span:has(.eni-glyph){display:inline-flex;align-items:center;gap:6px}
body.refresh-page .eni-reading-kicker:has(.eni-glyph){display:flex;align-items:center;gap:8px}
body.refresh-page :is(.eni-reading-kicker,.resource-category) .eni-glyph{width:1.6em;height:1.6em}
/* Career map, batch 10 (inc/career-map.php). Each role family's heading carries its teal glyph. */
body.refresh-page .eni-pathway-card h3.has-family-glyph{display:flex;align-items:center;gap:12px}
body.refresh-page .eni-family-glyph{flex:none;width:40px;height:40px}
/* The example path as rising intervals: each grade an interval with its midpoint, each move a dashed step up and to the
   right (gap and rise are equal, so the step is 45°), lime on the last grade. Labels stay on one line so every step
   rises by the same amount. */
body.refresh-page .eni-career-ladder{--gap:26px;--rise:26px;display:grid;grid-template-columns:repeat(var(--steps),minmax(0,1fr));column-gap:var(--gap);align-items:end;list-style:none;margin:28px 0 40px;padding:8px 14px 0 0}
body.refresh-page .eni-career-ladder li{position:relative;margin:0 0 calc(var(--i) * var(--rise));padding:24px 0 0;text-align:center;font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;color:var(--ink)}
body.refresh-page .eni-career-ladder li::before{content:"";position:absolute;top:0;left:0;right:0;height:14px;border-inline:2.5px solid var(--teal);background:linear-gradient(var(--teal),var(--teal)) center/100% 2.5px no-repeat}
body.refresh-page .eni-career-ladder li>span::before{content:"";position:absolute;top:3px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--deep)}
body.refresh-page .eni-career-ladder li:not(:last-child)::after{content:"";position:absolute;top:7px;left:100%;width:calc(var(--gap) * 1.4142);border-top:2px dashed var(--teal);transform-origin:0 0;transform:rotate(-45deg)}
body.refresh-page .eni-career-ladder li:last-child::before{border-right:0;border-left-color:var(--deep);background-image:linear-gradient(var(--deep),var(--deep))}
body.refresh-page .eni-career-ladder li:last-child>span::before{top:1px;left:auto;right:-6px;width:12px;height:12px;background:var(--lime);box-shadow:0 0 0 5px rgba(193,216,50,.3)}
@media(max-width:650px){body.refresh-page .eni-career-ladder{--gap:12px;--rise:12px}body.refresh-page .eni-career-ladder li{font-size:13px}}
/* Groups, "rows that open" (article editor Groups block; inc/career-map.php). One row per group: glyph, title and
   summary line; it opens to its list (the site's halo-dot list), which wraps along one line on wide screens. The open row takes a pale leaf. */
body.refresh-page .eni-groups{margin:28px 0 40px;border-top:1px solid #d3e3e5}
body.refresh-page .eni-group{border-bottom:1px solid #d3e3e5}
body.refresh-page .eni-group>summary{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;gap:4px 18px;align-items:center;padding:16px 0;list-style:none;cursor:pointer}
body.refresh-page .eni-group>summary:not(:has(.eni-group-glyph)){grid-template-columns:minmax(0,1fr) 20px}
body.refresh-page .eni-group>summary::-webkit-details-marker{display:none}
body.refresh-page .eni-group>summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:var(--leaf-small)}
body.refresh-page .eni-group-glyph{width:44px;height:44px}
body.refresh-page .eni-reading-body .eni-group-head h3{margin:0!important;font-size:20px;line-height:1.25;color:var(--deep)}
body.refresh-page .eni-group-summary{display:block;margin-top:2px;font-weight:400;color:#4c6870;font-size:15px;line-height:1.45}
body.refresh-page .eni-group-toggle{position:relative;width:16px;height:16px}
body.refresh-page .eni-group-toggle::before,body.refresh-page .eni-group-toggle::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;border-radius:1px;background:var(--teal);transition:transform var(--dur-move) var(--ease-out)}
body.refresh-page .eni-group-toggle::after{transform:rotate(90deg)}
body.refresh-page .eni-group[open] .eni-group-toggle::after{transform:rotate(0)}
body.refresh-page .eni-group[open]{margin-inline:-18px;padding-inline:18px;background:#eef6f6;border-radius:4px 24px 4px 24px;border-bottom-color:transparent}
/* Two open rows in a row keep their own leaves: a gap between them. */
body.refresh-page .eni-group[open]+.eni-group[open]{margin-top:10px}
body.refresh-page .eni-reading-body .eni-group>ul{display:flex;flex-wrap:wrap;gap:4px 26px;margin:-4px 0 0 62px!important;padding:0 0 18px;list-style:none;font-size:16px}
body.refresh-page .eni-group[open]>ul{animation:eni-reveal var(--dur-move) var(--ease-out)}
@keyframes eni-reveal{from{opacity:0;transform:translateY(-4px)}}
@media(max-width:650px){body.refresh-page .eni-group>summary{grid-template-columns:36px minmax(0,1fr) 16px;gap:2px 12px}body.refresh-page .eni-group-glyph{width:36px;height:36px}body.refresh-page .eni-reading-body .eni-group>ul{flex-direction:column;margin-left:0!important}}
/* About figures: the hidden final digit holds each column on the text baseline while its overlaid reel rolls. */
body.refresh-page .eni-odo-said{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.refresh-page .about-metric-item strong .eni-odo{font:inherit;white-space:pre}
body.refresh-page .eni-odo-col{display:inline-block;position:relative;vertical-align:baseline;text-align:center}
body.refresh-page .eni-odo-place{visibility:hidden}
body.refresh-page .eni-odo-col.is-settled .eni-odo-place{visibility:visible}
body.refresh-page .eni-odo-window{position:absolute;inset:0;overflow:hidden}
body.refresh-page .eni-odo-col.is-settled .eni-odo-window{display:none}
body.refresh-page .eni-odo-reel{display:block;position:relative;top:0;line-height:inherit;transition:top .9s cubic-bezier(.34,1.3,.5,1)}
body.refresh-page .eni-odo-reel>span{display:block;height:var(--eni-digit-step);line-height:var(--eni-digit-step)}
/* Client stories as a timeline (batch 12): the four sections sit on one line, a point at each heading. The line is
   teal through the work, pale into the outcome, and the outcome is the one lime point. Each section draws its own
   piece of line, so the section's top padding is set here (--pt) to keep the pieces meeting at the points. */
body.refresh-page .case-story-body.case-timeline>section{--pt:36px;position:relative;padding-top:var(--pt);padding-left:34px}
body.refresh-page .case-story-body.case-timeline>section:first-child{--pt:0px}
body.refresh-page .case-story-body.case-timeline>section::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:var(--teal)}
body.refresh-page .case-story-body.case-timeline>section:first-child::before{top:calc(var(--pt) + 14px)}
body.refresh-page .case-story-body.case-timeline>section:last-of-type::before{bottom:auto;height:calc(var(--pt) + 14px)}
body.refresh-page .case-story-body.case-timeline>section:has(+ .case-step--outcome)::before{background:linear-gradient(var(--teal) calc(var(--pt) + 14px),#c3dce0 0)}
body.refresh-page .case-story-body.case-timeline>.case-step--outcome::before{background:#c3dce0}
/* Points are logo leaves (sharp top-left and bottom-right), like the quote marks, centred on the line. */
body.refresh-page .case-story-body.case-timeline>section>h2::before{content:"";position:absolute;left:-1px;width:12px;height:12px;margin-top:8px;border-radius:0 50%;background:var(--teal)}
body.refresh-page .case-story-body.case-timeline>section:first-child>h2::before{background:var(--deep)}
body.refresh-page .case-story-body.case-timeline>.case-step--outcome>h2::before{left:-2px;width:14px;height:14px;margin-top:7px;background:var(--lime);box-shadow:0 0 0 5px rgba(193,216,50,.3)}
/* The rules between sections start after the line's gutter, so the line runs clear of them. */
body.refresh-page .case-story-body.case-timeline>section{border-bottom:0;background:linear-gradient(#bacdd0,#bacdd0) left 34px bottom/calc(100% - 34px) 1px no-repeat}
@media(max-width:700px){body.refresh-page .case-story-body.case-timeline>section{--pt:28px;padding-left:28px;background-position:left 28px bottom;background-size:calc(100% - 28px) 1px}}
/* Client stories had no side gutter below 900px (the layout is a centred 860px column), so text met the screen edge. */
@media(max-width:900px){body.refresh-page .case-story-layout{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){
 body.refresh-page :is(.button,.text-action,.show-roles,#clear),body.refresh-page .site-header .header-contact,body.refresh-page .vacancy-board .role::before,body.refresh-page .vacancy-board .role .role-arrow,body.refresh-page .text-action::before,body.refresh-page .filter-leaf,body.refresh-page .wpcf7-form :is(input,textarea){transition-duration:0s}
 body.refresh-page .send-dots i,body.refresh-page .eni-received-mark::after,body.refresh-page #empty .empty-field .gap,body.refresh-page .eni-group[open]>ul{animation:none}
 body.refresh-page .eni-group-toggle::before,body.refresh-page .eni-group-toggle::after{transition:none}
 body.refresh-page .eni-received-mark .tick{animation:none;stroke-dashoffset:0}
}

/* The cookie inventory stays readable at phone width. */
body.refresh-page .eni-reading-body .eni-cookie-list{margin:18px 0 30px;padding:0;border-top:1px solid #d3e3e5}
body.refresh-page .eni-reading-body .eni-cookie-list>div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:8px 22px;padding:16px 0;border-bottom:1px solid #d3e3e5}
body.refresh-page .eni-reading-body .eni-cookie-list dt{font-weight:700;overflow-wrap:anywhere}
body.refresh-page .eni-reading-body .eni-cookie-list dd{margin:0}
body.refresh-page .eni-reading-body .eni-cookie-list code{font-size:.9em;white-space:normal;overflow-wrap:anywhere}
@media(max-width:650px){body.refresh-page .eni-reading-body .eni-cookie-list>div{grid-template-columns:minmax(0,1fr);gap:5px}}

/* Count people as people (essence lab, 27 September): a figure about people draws one dot per person. */
body.refresh-page .people-figure{margin:0}
body.refresh-page .people-figure svg{display:block;width:100%;height:auto}
body.refresh-page .people-figure .is-on{fill:var(--teal)}
body.refresh-page .people-figure .is-off{fill:#d4e8eb}
body.refresh-page .people-figure .is-change{fill:#9fb81c}
body.refresh-page .people-figure .is-kept{fill:var(--deep)}
body.refresh-page .people-figure .is-missing{fill:transparent;stroke:var(--teal);stroke-width:1.3;stroke-dasharray:2 2.1}
body.refresh-page .people-figure.is-waiting .is-missing{fill:var(--deep);stroke-opacity:0}
body.refresh-page .people-figure.is-seen .is-missing{transition:fill .55s var(--ease-out) var(--d),stroke-opacity .55s var(--ease-out) var(--d)}
body.refresh-page .people-key{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.4}
body.refresh-page .people-key::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%;transform:translateY(1px)}
body.refresh-page .people-key-kept::before{background:var(--deep)}
body.refresh-page .people-key-missing::before{border:1.5px dashed var(--teal);width:9px;height:9px}
body.refresh-page .people-key-change::before{background:#9fb81c}
/* Hire talent: placement shares, each a hundred people, with last year's gain marked. */
body.refresh-page .people-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
body.refresh-page .people-pair .people-figure{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center}
body.refresh-page .people-pair figcaption{display:flex;flex-direction:column;gap:6px}
body.refresh-page .people-pair figcaption>strong{font-size:40px;line-height:1;color:var(--teal)}
body.refresh-page .people-pair .people-key{margin-top:8px;font-size:14px;color:#3f5c64}
body.refresh-page .people-pair .people-key strong{color:var(--ink)}
@media(max-width:800px){body.refresh-page .people-pair{grid-template-columns:1fr}body.refresh-page .people-pair .people-figure{grid-template-columns:120px minmax(0,1fr);gap:18px}body.refresh-page .people-pair figcaption>strong{font-size:32px}}
/* Inclusive hiring: who is missing. */
body.refresh-page .dei-missing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,6vw,88px);align-items:center;padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(40px,5vw,64px)}
body.refresh-page .dei-missing h2{margin:0 0 18px}
body.refresh-page :is(.dei-missing,.dei-second-look) h2 span{color:var(--teal)}
body.refresh-page .dei-missing-copy p{max-width:32em}
body.refresh-page .dei-missing .dei-missing-source{display:inline-flex;gap:6px;width:auto;min-height:0;padding:0;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none;font-size:14px;font-weight:700;color:var(--deep)}
body.refresh-page .dei-missing .dei-missing-source:hover{background:none;color:var(--teal)}
body.refresh-page .dei-missing .people-figure svg{max-width:320px}
body.refresh-page .dei-missing figcaption{display:flex;flex-direction:column;gap:8px;margin-top:20px}
@media(max-width:800px){body.refresh-page .dei-missing{grid-template-columns:1fr}}
/* Inclusive hiring: more than a job title. The list is the content; second-look.js adds the lens stage. */
body.refresh-page .dei-second-look{border-top:1px solid #bacdd0;padding-top:clamp(44px,5vw,64px)}
body.refresh-page .second-look-list{list-style:none;margin:0;padding:0;border-top:1px solid #d3e3e5}
body.refresh-page .second-look-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px 32px;padding:18px 0;border-bottom:1px solid #d3e3e5}
body.refresh-page .second-look-first{color:#5d767d;font-weight:700}
body.refresh-page .second-look-second{color:var(--deep);font-weight:700}
body.refresh-page .second-look-tag{display:block;margin-bottom:4px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
body.refresh-page .second-look.is-enhanced .second-look-list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.refresh-page .second-look-stage{--x:-12%;position:relative;min-height:clamp(250px,26vw,320px);overflow:hidden;border-radius:4px 58px 4px 58px;background:#f3f7f7;cursor:ew-resize}
body.refresh-page .second-look-layer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,48px);transition:opacity .5s var(--ease-out)}
body.refresh-page .second-look-layer p{margin:0;font-weight:700;letter-spacing:-.03em}
body.refresh-page .second-look-layer.is-first{clip-path:inset(0 0 0 var(--x))}
body.refresh-page .second-look-layer.is-first p{font-size:clamp(32px,4.6vw,60px);line-height:1.02;color:#6d858c}
body.refresh-page .second-look-layer.is-second{clip-path:inset(0 calc(100% - var(--x)) 0 0);background:#fff;box-shadow:inset 0 0 0 1px #d3e3e5}
body.refresh-page .second-look-layer.is-second p{max-width:18em;font-size:clamp(23px,2.8vw,34px);line-height:1.14;color:var(--deep)}
body.refresh-page .second-look-stage.is-swapping .second-look-layer{opacity:0}
body.refresh-page .second-look-lens{position:absolute;top:50%;left:var(--x);width:clamp(110px,14vw,160px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;overflow:visible}
body.refresh-page .second-look-lens :is(path,line){fill:none;stroke:var(--lime);stroke-width:3}
body.refresh-page .second-look-lens line{stroke-width:2}
body.refresh-page .second-look-note{margin:12px 0 0;font-size:14px;color:#4c6870}
@media(max-width:700px){body.refresh-page .second-look-list li{grid-template-columns:1fr}body.refresh-page .second-look-stage{min-height:300px;border-radius:4px 40px 4px 40px}}

/* Come into focus (essence lab): below the first screen, headings and cards sharpen into place once instead of
 * sliding (wordpress-refresh.js adds .eni-focus, then .is-focused, then removes both). On hover, a card's siblings
 * soften so the one being looked at is the one in focus. */
body.refresh-page .eni-focus{filter:blur(8px);opacity:0;transform:scale(1.012);transition:filter .8s var(--ease-out),opacity .8s var(--ease-out),transform .8s var(--ease-out)}
body.refresh-page .eni-focus.is-focused{filter:blur(0);opacity:1;transform:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 body.refresh-page :is(.service-list,.about-team-grid,.dei-commitment-grid,.home-resource-list,.content-paths-grid)>*{transition:filter .35s var(--ease-out),opacity .35s var(--ease-out)}
 body.refresh-page .home-hiring-options article{transition:border-color var(--dur-quick) ease,background-color var(--dur-quick) ease,transform var(--dur-move) var(--ease-out),filter .35s var(--ease-out),opacity .35s var(--ease-out)}
 body.refresh-page :is(.home-hiring-options,.service-list,.about-team-grid,.dei-commitment-grid,.home-resource-list,.content-paths-grid):has(>:hover)>:not(:hover):not(.eni-focus){filter:blur(1.2px);opacity:.6}
}
@media(prefers-reduced-motion:reduce){body.refresh-page .eni-focus{filter:none;opacity:1;transform:none;transition:none}body.refresh-page .people-figure.is-waiting .is-missing{fill:transparent;stroke-opacity:1}}