) in its place, at roughly the
dimensions noted inside it.
========================================================================= */
/* Small circular version, used for client/testimonial headshots */
/* =========================================================================
CAPABILITY DETAIL PANES (Services page "What We Deliver" cards)
Clicking a capability card opens one of these as a large overlay pane
with more detail and a photo. See script.js, "CAPABILITY DETAIL PANES".
========================================================================= */
.capability-card{cursor:pointer;}
.capability-card:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.modal-overlay{position:fixed; inset:0;
background:rgba(2,5,9,0.6);
backdrop-filter:blur(3px);
opacity:0; visibility:hidden;
transition:opacity .25s ease, visibility 0s linear .25s;
z-index:300;}
.modal-overlay.open{opacity:1; visibility:visible;
transition:opacity .25s ease, visibility 0s linear 0s;}
.modal-pane{position:fixed; top:50%; left:50%; transform:translate(-50%, -48%); width:min(78vw, 980px); max-height:85vh; background:var(--white); border-radius:22px; box-shadow:0 30px 70px rgba(2,5,9,0.35); opacity:0; visibility:hidden; transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s; z-index:301; display:grid; grid-template-columns:0.85fr 1.15fr;}
.modal-pane.open{opacity:1; visibility:visible; transform:translate(-50%, -50%); transition:opacity .28s ease, transform .28s ease, visibility 0s linear 0s;}
.modal-media{background:var(--paper-2);}
.modal-media img{width:100%; height:100%; object-fit:cover; display:block; min-height:280px;}
.modal-body{padding:2.6rem 2.8rem;}
.modal-body h2{margin-bottom:0.9rem;}
.modal-body .feature-list{margin-top:0.4rem;}
.modal-close{position:absolute; top:1.1rem; right:1.1rem;
width:38px; height:38px;
border-radius:50%;
border:none;
background:rgba(2,5,9,0.06);
color:var(--ink);
font-size:1.5rem; line-height:1;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
z-index:2;
transition:background .15s ease;}
.modal-close:hover{background:rgba(2,5,9,0.12);}
@media(max-width:820px){
.modal-pane{grid-template-columns:1fr;
width:min(92vw, 560px);}
.modal-media img{min-height:200px;}
.modal-body{padding:2rem 1.6rem;}
}
@media(prefers-reduced-motion:reduce){
.modal-overlay, .modal-pane{transition:none;}
}
/* Stylish "corner bracket" photo frame - like a viewfinder - used on
the TM1 and Power BI screenshots in "Platforms in Depth". */
.corner-frame img{display:block; width:100%; border-radius:20px;}
/* =========================================================================
CONTACT SECTION - frosted form card
========================================================================= */
.contact-section{position:relative; overflow:hidden;}
/* Left column drops down a touch so its heading lines up with the one inside the card */
.contact-section .contact-grid > div:first-child{padding-top:2.2rem;}
.contact-card{background:rgba(255,255,255,0.10);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.55);
border-radius:22px;
padding:2.2rem 2.4rem 2.4rem;
box-shadow:0 18px 44px rgba(2,5,9,0.08);}
/* See-through form: the card and the text boxes are almost fully transparent so the
photo shows through. The soft white glow behind the labels keeps them readable.
If any text ever feels hard to read, raise the 0.10 / 0.22 numbers a little. */
.contact-card label,
.contact-card .eyebrow{text-shadow:0 0 10px rgba(255,255,255,0.9), 0 0 3px rgba(255,255,255,0.8);}
.contact-card .eyebrow{color:var(--ink);}
.contact-card .contact-form input,
.contact-card .contact-form textarea{background:rgba(255,255,255,0.22);
border:1.5px solid rgba(255,255,255,0.8);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);}
.contact-card .contact-form input:hover,
.contact-card .contact-form textarea:hover{background:rgba(255,255,255,0.34);}
.contact-card .contact-form input:focus,
.contact-card .contact-form textarea:focus{background:rgba(255,255,255,0.55);
border-color:var(--teal);}
/* Stop the browser's autofill from painting the boxes solid blue/yellow */
.contact-card .contact-form input:-webkit-autofill,
.contact-card .contact-form textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px rgba(255,255,255,0.35) inset;
-webkit-text-fill-color:var(--ink);
transition:background-color 9999s ease-out 0s;}
@media(max-width:860px){
.contact-section .contact-grid > div:first-child{padding-top:0;}
.contact-card{padding:1.6rem 1.4rem 1.8rem;}
}
/* =========================================================================
OUR VALUES - PICTURE CARDS + CLICK-TO-OPEN PANES
Each of the five values is a card with a picture; clicking it opens a
detail pane (same pop-up system as the Services page). The ODS logo sits
behind both the cards and the panes as a soft watermark - to make it
stronger/fainter, change the "opacity" numbers marked below.
========================================================================= */
.values-row.values-row-media{grid-template-columns:repeat(5,1fr); gap:1.2rem;}
.value-card{position:relative;
isolation:isolate; /* keeps the watermark behind the text but above the card's white */
overflow:hidden;
cursor:pointer;
display:flex; flex-direction:column;
}
.value-card:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
/* THE ODS LOGO AS THE PANE BACKGROUND (only shows once a pane pops up - the cards stay clean) */
.modal-values .modal-body::before{
content:"";
position:absolute; z-index:-1; pointer-events:none;
background:url('Assets/logo-whitebg-nav.png') center / contain no-repeat;
}
.value-thumb{
width:100%; max-width:168px;
aspect-ratio:3 / 2;
border-radius:14px;
overflow:hidden;
margin-bottom:1.15rem;
box-shadow:0 6px 16px rgba(2,5,9,0.14);
}
.value-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.value-card:hover .value-thumb img{transform:scale(1.07);}
.value-card h3{font-size:1.2rem;}
.value-more{
margin-top:auto; padding-top:1.1rem;
display:inline-flex; align-items:center; gap:0.4rem;
font-size:0.95rem; font-weight:700; color:var(--teal-dark);
}
.value-more svg{width:14px; height:14px; transition:transform .2s ease;}
.value-card:hover .value-more svg{transform:translateX(4px);}
/* Medium screens: 3 cards on top, 2 wider cards underneath */
@media(max-width:1180px){
.values-row.values-row-media{grid-template-columns:repeat(6,1fr);}
.values-row-media .value:nth-child(-n+3){grid-column:span 2;}
.values-row-media .value:nth-child(n+4){grid-column:span 3;}
}
/* Phones: one per row */
@media(max-width:640px){
.values-row.values-row-media{grid-template-columns:1fr;}
.values-row-media .value:nth-child(n){grid-column:auto;}
}
/* --- the detail panes --- */
.modal-pane.modal-values{display:block; width:min(92vw, 780px); max-height:92vh;}
.modal-values .modal-body{
position:relative; isolation:isolate; overflow:hidden;
padding:2.6rem 2.8rem 2.8rem;
}
.modal-values .modal-body::before{top:0; right:0; bottom:0; left:0; margin:auto; width:68%; height:54%; opacity:0.10;} /* centred in the pane; opacity = watermark strength */
.modal-values-head{display:flex; align-items:center; gap:1.5rem; margin-bottom:1.5rem; padding-right:2.2rem;}
.modal-values-head img{
width:158px; height:105px; object-fit:cover; flex-shrink:0;
border-radius:14px; box-shadow:0 8px 20px rgba(2,5,9,0.16);
}
.modal-values-head h2{margin:0 0 0.3rem; font-size:clamp(1.8rem, 3vw, 2.3rem);}
.modal-values-head .modal-values-tag{margin:0; color:var(--slate); font-size:0.98rem;}
.modal-values .modal-sub{font-size:1rem; margin:1.1rem 0 0.5rem;}
.modal-values .btn{margin-top:0.4rem;}
/* a little more compact, so the pane fits on laptop-height windows without scrolling */
.modal-values .modal-body{padding-top:2.1rem; padding-bottom:2.2rem;}
.modal-values-head{margin-bottom:1.1rem;}
.modal-values .modal-body > p{line-height:1.6; margin-bottom:0.85em;}
.modal-values .feature-list{margin-bottom:0.9rem;}
.modal-values .feature-list li{margin-bottom:0.4rem;}
@media(max-width:560px){
.modal-values .modal-body{padding:2rem 1.5rem 2.2rem;}
.modal-values-head{flex-direction:column; align-items:flex-start; gap:1rem;}
.modal-values-head img{width:132px; height:88px;}
}
/* Hover-to-open panes (Our Values): the dim layer is see-through to the mouse, so you can
keep hovering the other cards, and it's lighter so it doesn't feel heavy for a hover. */
.modal-overlay.is-hover{
pointer-events:none;
background:rgba(2,5,9,0.30);
backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* A pane that is closing (still fading out) no longer catches the mouse, so it can't get in
the way of the next card you move onto. Only a fully open pane is clickable/hoverable. */
.modal-pane{pointer-events:none;}
.modal-pane.open{pointer-events:auto;}
/* Our Values > Our Mission photo: rounded corners (from .corner-frame) + a wide banner crop */
.mission-photo img{aspect-ratio:21 / 9; object-fit:cover; object-position:center 70%;}
@media(max-width:640px){
.mission-photo img{aspect-ratio:4 / 3; object-position:center;}
}
/* =========================================================================
SITE BACKGROUND PHOTO
A photo fixed behind the whole website. The plain-colour sections (off-white,
teal, black) are slightly see-through, so the picture shows softly through them.
- To REMOVE it: delete this whole block.
- To try a DIFFERENT picture: change the file name inside url(...) below.
- "center bottom" keeps the bottom of the photo (the buildings) in view; use
"center center" if you'd rather crop equally from the top and bottom.
- It is a fixed layer (not "background-attachment: fixed") so it also behaves
properly on phones and iPads, where that older trick zooms the photo way in.
========================================================================= */
body::before{content:"";
position:fixed;
top:0; right:0; bottom:0; left:0;
z-index:-1;
background:url('Assets/Skyscrapers.jpg') center bottom / cover no-repeat;
pointer-events:none;}
/* ---- HOW VISIBLE IS THE PICTURE? (the two numbers to play with) ------------------
--bg-veil : how solid the light sections are. 1 = fully solid (picture hidden),
0.85 = faint ghost of the picture, 0.72 = clearly visible, 0.6 = strong.
--bg-blur : how frosted the picture looks through the sections. 0px = sharp.
Lower numbers show more of the picture but make the small grey text a little harder
to read where the dark towers sit behind it - so change them in small steps.
Deleting this block puts the sections back to how they were. */
:root{--bg-veil:0.72; --bg-blur:4px;}
.section-light,
.section-alt{background:rgba(var(--paper-rgb), var(--bg-veil));
backdrop-filter:blur(var(--bg-blur));
-webkit-backdrop-filter:blur(var(--bg-blur));}
/* "At a glance" cards: interactive + their equal-size detail panes */
.glance-card{cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;}
.glance-card:hover, .glance-card:focus-visible{transform:translateY(-4px); box-shadow:0 10px 26px rgba(2,5,9,0.12);}
.glance-card:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.modal-pane.modal-glance{overflow:hidden;}
.modal-glance .modal-media{height:100%; overflow:hidden;}
.modal-glance .modal-media img{height:100%; min-height:0;}
.modal-glance .modal-body{display:flex; flex-direction:column; justify-content:center; padding:2rem 2.4rem; overflow-y:auto;}
.modal-glance .modal-body p{margin-bottom:0.8em;}
.modal-glance .feature-list{margin-bottom:1rem;}
.modal-glance .btn{align-self:flex-start;}
/* the teal "What we deliver" card shown as the End-to-end pane's picture */
.deliver-card{height:100%; min-height:280px; box-sizing:border-box;
background:var(--teal); color:var(--white);
padding:2.2rem 2rem; display:flex; flex-direction:column; justify-content:center;}
.deliver-card .deliver-eyebrow{font-weight:700; margin-bottom:1.2rem;}
.deliver-card h3{color:var(--white); font-size:clamp(1.4rem,2.2vw,1.8rem); line-height:1.25; margin:0 0 1.4rem;}
.deliver-card .deliver-rule{display:block; width:110px; height:3px; background:orange; margin-bottom:1.4rem;}
.deliver-card p{color:var(--white); margin:0;}
@media(max-width:820px){
.modal-pane.modal-glance{height:min(88vh, 640px); overflow-y:auto;}
.modal-glance .modal-media{height:200px;}
.deliver-card{min-height:200px; padding:1.4rem;}
.modal-glance .modal-body{display:block; overflow:visible; padding:1.6rem;}
}
/* Easy-reading text blocks: bigger type, a bold lead line, short tick lists and a callout */
.readable p{font-size:1.2rem; line-height:1.65; max-width:60ch;}
.readable .lead{font-size:1.5rem; line-height:1.4; font-weight:500; color:var(--ink); margin-bottom:1rem;}
.readable strong{color:var(--ink); font-weight:700;}
.tick-list{list-style:none; margin:0.4rem 0 1.4rem; padding:0; max-width:60ch;}
.tick-list li{position:relative; padding:0.35rem 0 0.35rem 2rem; font-size:1.2rem; line-height:1.5;}
.tick-list li::before{content:""; position:absolute; left:0; top:0.62rem; width:1.15rem; height:1.15rem; border-radius:50%;
background:var(--teal) url("data:image/svg+xml;utf8,
") center/70% no-repeat;}
.readable .callout{border-left:4px solid var(--teal); padding:0.3rem 0 0.3rem 1.2rem; margin:1.4rem 0;
font-size:1.25rem; color:var(--ink); font-weight:500;}
/* Home "What We Do" rows: bold headline sentence, supporting line underneath, bigger */
.service-item p{font-size:1.15rem; line-height:1.55;}
.service-item p strong{display:block; color:var(--ink); font-weight:700; margin-bottom:0.2rem;}
.service-item p span{display:block;}
/* Our Values panes: short lead line + four numbered "in practice" tiles (easy to scan) */
.modal-values .values-lead{font-size:1.2rem; line-height:1.5; font-weight:500; color:var(--ink); margin:0.2rem 0 1rem; max-width:none;}
.modal-values .modal-sub{font-size:0.8rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--teal-dark); margin:0 0 0.7rem;}
.practice-grid{display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:1.3rem;}
.practice-tile{display:flex; gap:0.8rem; align-items:flex-start;
background:rgba(var(--teal-rgb),0.09); border-radius:14px; padding:0.9rem 1rem;}
.practice-tile:nth-child(2), .practice-tile:nth-child(3){background:rgba(2,5,9,0.045);}
.practice-num{flex:0 0 1.9rem; height:1.9rem; border-radius:50%; background:var(--teal); color:var(--white);
font-weight:700; font-size:0.95rem; display:flex; align-items:center; justify-content:center;}
.practice-tile strong{display:block; color:var(--ink); font-size:1.05rem; line-height:1.3;}
.practice-tile span:not(.practice-num){display:block; font-size:0.95rem; line-height:1.45; color:var(--slate); margin-top:0.15rem;}
@media(max-width:560px){
.practice-grid{grid-template-columns:1fr;}
}
/* Services panes: each one has its own easy-scan layout */
/* 1. numbered steps with a connecting line */
/* 2. four feature cards */
/* 3. before / after */
/* pills (3 and 4) */
/* 5. badges + ticks */
.modal-pane:not(.modal-values):not(.modal-glance) .modal-body{padding:2.2rem 2.4rem;}
.modal-pane:not(.modal-values):not(.modal-glance) .modal-body h2{font-size:clamp(1.6rem,2.3vw,2rem); margin-bottom:0.7rem;}
/* Orange accent on every pop-up card: a thin orange top edge + a short orange rule under the heading */
.modal-pane{border-top:5px solid var(--olanji);}
.modal-body h2::after, .modal-values-head h2::after{content:""; display:block; width:56px; height:3px; border-radius:2px;
background:var(--olanji); margin-top:0.55rem;}
.modal-values-head h2::after{margin-bottom:0.3rem;}
/* ---- HOW WE WORK: four white cards on the teal photo ---- */
.process{gap:1.6rem; margin-top:4rem;}
.process-track{top:0; left:12.5%; right:12.5%; background:rgba(255,255,255,0.35);}
.process-step{position:relative; background:rgba(255,255,255,0.95); border-radius:20px; padding:2.6rem 1.6rem 1.8rem; box-shadow:0 14px 34px rgba(2,5,9,0.18); border-bottom:4px solid var(--olanji); text-align:left; opacity:0.82; transition:opacity .4s ease, transform .4s ease, box-shadow .4s ease;}
.process-step.active{opacity:1; transform:translateY(-6px); box-shadow:0 20px 42px rgba(2,5,9,0.24);}
.process-step .step-num{position:absolute; top:-1.4rem; left:50%; margin:0; transform:translateX(-50%); width:2.8rem; height:2.8rem; font-size:1rem; background:var(--white); color:var(--teal-dark); border:3px solid var(--teal);}
.process-step.active .step-num{background:var(--teal); color:var(--white); border-color:var(--white); transform:translateX(-50%) scale(1.12);}
.step-icon{width:3rem; height:3rem; border-radius:14px; background:rgba(var(--teal-rgb),0.12); color:var(--teal-dark);
display:flex; align-items:center; justify-content:center; margin-bottom:1rem;}
.step-icon svg{width:1.5rem; height:1.5rem;}
.process-step h3{color:var(--ink); font-size:1.6rem; margin-bottom:0.5rem;}
.process-step p, .process-step.active p{opacity:1; color:var(--text);}
.process-step .step-lead{font-size:1.1rem; color:var(--teal-dark); line-height:1.35; margin-bottom:0.6rem;}
.process-step .step-detail{font-size:1rem; line-height:1.55; margin:0; max-width:none;}
@media(max-width:860px){
.process{grid-template-columns:1fr 1fr; gap:2.8rem 1.4rem;}
.process-track{display:none;}
}
@media(max-width:560px){
.process{grid-template-columns:1fr; padding-left:0;}
}
/* Hero background video: anchor the crop to the TOP so people's heads are not cut off.
(0% = top of the video, 50% = centre, 100% = bottom. Try 10%-20% if you want a little less top.) */
.slide-visual video.slide-photo{object-position:center 0%;}
/* Home intro: wording first, then the team photo underneath it as a wide rounded banner */
.intro-stack > div:first-child p{max-width:80ch;}
.intro-photo{margin-top:2.2rem;}
.intro-photo img{display:block; width:100%; aspect-ratio:21 / 9; object-fit:cover; object-position:center 35%;
border-radius:20px; box-shadow:0 18px 44px rgba(2,5,9,0.16); border-bottom:4px solid var(--olanji);}
@media(max-width:720px){
.intro-photo img{aspect-ratio:4 / 3;}
}
/* Video showcase (About page): rounded frame with the orange accent line */
.video-frame{margin-top:1.8rem; border-radius:20px; overflow:hidden; box-shadow:0 18px 44px rgba(2,5,9,0.18); border-bottom:4px solid var(--olanji); line-height:0;}
.video-frame .hero-video{display:block; width:100%; height:auto;}
/* Home intro video: spans the full width of the page, edge to edge (like the original strip) */
.video-full{width:100%; margin:2.5rem 0 0; line-height:0;}
.video-full .hero-video{display:block; width:100%; height:auto;}
/* Slide 1: wording on the left, a rounded photo on the right */
/* ---- HOW WE WORK: hover (or focus / tap) a card to play its animated graphic ----
Pure CSS/SVG animation - no video files, loads instantly, always on-brand. */
.process-step{cursor:pointer;}
.process-step:focus-visible{outline:3px solid var(--white); outline-offset:3px;}
.step-anim{position:absolute; inset:0; z-index:3; border-radius:inherit; background:var(--white);
padding:1rem 1rem 1.1rem; display:flex; flex-direction:column;
opacity:0; visibility:hidden; transform:scale(0.98);
transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;}
.process-step:hover .step-anim, .process-step:focus-visible .step-anim, .process-step:focus-within .step-anim{opacity:1; visibility:visible; transform:none; transition:opacity .3s ease, transform .3s ease, visibility 0s;}
.step-anim svg{display:block; width:100%; height:auto; flex:0 0 auto;}
.step-anim strong{display:block; margin-top:0.7rem; color:var(--ink); font-size:1.05rem; line-height:1.3;}
.step-anim span{display:block; margin-top:0.2rem; color:var(--text); font-size:0.92rem; line-height:1.45;}
/* animation helpers (they only run while the card is hovered / focused) */
.step-anim svg *{transform-box:fill-box;}
.a-d2{animation-delay:.25s !important;}
.a-d3{animation-delay:.5s !important;}
.a-d4{animation-delay:.75s !important;}
.a-d5{animation-delay:1s !important;}
.process-step:hover .a-lens, .process-step:focus-within .a-lens{animation:a-scan 3.6s ease-in-out infinite;}
.process-step:hover .a-pain, .process-step:focus-within .a-pain{animation:a-pulse 1.2s ease-in-out infinite;}
.process-step:hover .a-pop, .process-step:focus-within .a-pop{animation:a-pop 3s ease-out infinite; transform-origin:center bottom;}
.process-step:hover .a-bot, .process-step:focus-within .a-bot{animation:a-bot 3.6s ease-in-out infinite;}
.process-step:hover .a-check polyline, .process-step:focus-within .a-check polyline{animation:a-check 3.6s ease-in-out infinite; stroke-dasharray:40;}
.process-step:hover .a-knob, .process-step:focus-within .a-knob{animation:a-knob 3.2s ease-in-out infinite alternate;}
.process-step:hover .a-bar, .process-step:focus-within .a-bar{animation:a-grow 3.4s ease-out infinite; transform-origin:center bottom;}
.process-step:hover .a-trend, .process-step:focus-within .a-trend{animation:a-draw 3.4s ease-out infinite; stroke-dasharray:320;}
.process-step:hover .a-end, .process-step:focus-within .a-end{animation:a-pulse 1.2s ease-in-out infinite; animation-delay:1.2s;}
.process-step:hover .a-play, .process-step:focus-within .a-play{animation:a-pulse 1.4s ease-in-out infinite; transform-origin:center;}
.process-step:hover .a-progress, .process-step:focus-within .a-progress{animation:a-fill 3.4s ease-in-out infinite; transform-origin:left center;}
@keyframes a-scan{
0%{transform:translate(0,0);}
30%{transform:translate(120px,24px);}
60%{transform:translate(40px,48px);}
100%{transform:translate(0,0);}
}
@keyframes a-pulse{
0%,100%{transform:scale(1); opacity:1;}
50%{transform:scale(1.5); opacity:.6;}
}
@keyframes a-pop{
0%{transform:scale(0); opacity:0;}
25%,85%{transform:scale(1); opacity:1;}
100%{transform:scale(1); opacity:0;}
}
@keyframes a-bot{
0%{transform:translateX(0);}
40%{transform:translateX(96px);}
80%,100%{transform:translateX(192px);}
}
@keyframes a-check{
0%,10%{stroke-dashoffset:40; opacity:0;}
40%,90%{stroke-dashoffset:0; opacity:1;}
100%{opacity:0;}
}
@keyframes a-knob{
from{transform:translateX(-50px);}
to{transform:translateX(120px);}
}
@keyframes a-grow{
0%{transform:scaleY(0);}
45%,100%{transform:scaleY(1);}
}
@keyframes a-draw{
0%{stroke-dashoffset:320;}
55%,100%{stroke-dashoffset:0;}
}
@keyframes a-fill{
0%{transform:scaleX(0);}
70%,100%{transform:scaleX(1);}
}
@media(prefers-reduced-motion:reduce){
.step-anim svg *{animation:none !important;}
}
.process-step .step-num{z-index:5;}
/* keeps the number badge on top of the graphic */
/* Space between page sections (top + bottom padding of every section).
Change --section-pad to taste: smaller = tighter page, larger = more breathing room. (was 5.5rem) */
:root{--section-pad:3.25rem;}
section{padding:var(--section-pad) 0;}
@media(max-width:720px){
:root{--section-pad:2.5rem;}
}
/* Slide 1 photo: fills the whole right-hand side of the hero (top to bottom), like a feature panel */
/* Photo is taken out of the height calculation so the hero stays exactly 640px */
.hero-slider{padding-top:0; padding-bottom:0;}
@media(max-width:860px){
.hero-slider{padding-top:2rem; padding-bottom:2rem;}
}
/* Slide 2: big title, clear gap, comfortable paragraph */
.slide .eyebrow.slide-title{display:block; line-height:1.1; font-weight:700; letter-spacing:-0.01em; margin:0 0 1.8rem; text-shadow:0 2px 14px rgba(2,5,9,0.25);}
.slide p.slide-lead-p{font-size:clamp(1.1rem,1.5vw,1.3rem); line-height:1.65; color:rgba(255,255,255,0.95); max-width:62ch; margin:0 0 2.2rem; text-shadow:0 1px 10px rgba(2,5,9,0.25);}
/* Keep every slide's content vertically centred in the 640px hero */
.slide.active{min-height:640px; box-sizing:border-box;}
.slide-content:has(.slide-title){max-width:1000px;}
.slide .eyebrow.slide-title{font-size:clamp(2.2rem,4.2vw,3.6rem);}
@media(max-width:860px){
.slide.active{min-height:560px;}
}
/* Larger, easier-to-read paragraph text across the site (matches the hero slide size) */
:root{--p-size:clamp(1.1rem,1.5vw,1.3rem);}
:where(main,section,.page-header,.slide) :is(p,.tick-list li,.callout,.step-lead,.step-detail):not(.modal-pane *):not(.glance-card *):not(.capability-card *):not(.process-step *){font-size:var(--p-size); line-height:1.65;}
.glance-card p,.capability-card p,.values-row p,.process-step p,.step-lead,.step-detail{font-size:1.05rem; line-height:1.6;}
.service-item p strong{font-size:calc(var(--p-size) + 0.08rem);}
/* Card text brought up to match the rest of the site */
.glance-card p,.capability-card p,.values-row p,.process-step p,.step-detail{font-size:var(--p-size); line-height:1.6;}
.step-lead{font-size:calc(var(--p-size) + 0.05rem); line-height:1.4;}
/* Final overrides: intro paragraph and How We Work card text */
.intro-stack p,.intro-stack > div p{font-size:var(--p-size) !important; line-height:1.65 !important; max-width:80ch;}
.process-step p,.process-step .step-detail,.process-step .step-lead{font-size:var(--p-size) !important; line-height:1.55 !important;}
.process-step .step-lead{font-weight:600;}
/* ===== Pop-up cards: larger, easier-to-read text (panes scroll rather than cut off) ===== */
.modal-pane{overflow-y:auto;}
.modal-pane .modal-body p,.modal-pane .modal-body li{font-size:1.15rem; line-height:1.55;}
.modal-pane .values-lead{font-size:1.35rem; line-height:1.45;}
.modal-pane .practice-tile span:not(.practice-num){font-size:1.05rem; line-height:1.45;}
.modal-pane .practice-tile strong{font-size:1.15rem;}
.modal-pane.modal-glance{width:min(94vw, 1000px); height:min(90vh, 520px); overflow-y:auto;}
.modal-glance .modal-body{overflow:visible;}
.modal-glance .modal-body h2{font-size:clamp(1.6rem,2.6vw,2rem);}
.deliver-card p{font-size:1.15rem;}
.deliver-card .deliver-eyebrow{font-size:1rem;}
/* Why ODS photo slider: second photo slides up from the bottom over the first */
.photo-slider{position:relative; overflow:hidden; border-radius:20px; aspect-ratio:3 / 2; background:var(--paper-2);}
.photo-slider .ps-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; display:block;}
.photo-slider .ps-img{transition:transform 1s ease; will-change:transform;}
.photo-slider .ps-next{transform:translateY(100%);}
@media(prefers-reduced-motion:reduce){
.photo-slider .ps-img{transition:none;}
}
/* Our X-Factor: four colour panels over an optional photo */
.xfactor{position:relative;}
.xfactor .container{position:relative; z-index:1;}
.xf-eyebrow{color:var(--olanji);}
.xf-title{color:var(--white); margin:0 0 2rem;}
.xf-teal{background:rgba(1,164,163,0.80);}
.xf-dark{background:rgba(43,38,38,0.82);}
.xf-orange{background:rgba(255,176,59,0.88); color:#2c3550;}
/* X-Factor: contained to the page width, rounded, photo sits behind the panels only */
.xfactor{background:rgba(var(--paper-rgb), var(--bg-veil)); padding:var(--section-pad) 0; overflow:visible;}
.xfactor .xf-title{color:var(--ink);}
.xfactor .xf-eyebrow{color:var(--teal-dark);}
.xf-wrap{margin:0 auto;}
/* X-Factor block spans the full page content width (matches the other sections) */
.xf-wrap{width:100%;}
/* Taller panels so each reads closer to a square */
/* X-Factor: a little smaller */
.xf-wrap{max-width:1250px; margin-left:auto; margin-right:auto;}
/* ===== "Click here to learn more" panes (Services: TM1 and Power BI) ===== */
.modal-pane.modal-learn{display:block; width:min(94vw,900px); max-height:90vh; overflow-y:auto; padding:0;}
.learn-head{background:var(--teal); color:var(--white); padding:2.2rem 2.6rem 1.8rem; position:relative;}
.learn-head .learn-tag{display:inline-block; font-size:0.9rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--white); opacity:0.9; margin-bottom:0.5rem;}
.learn-head h2{color:var(--white); font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 0.9rem; padding-right:2.5rem;}
.learn-head h2::after{content:""; display:block; width:90px; height:3px; background:var(--olanji); margin-top:0.8rem;}
.learn-head p{color:rgba(255,255,255,0.96); font-size:1.15rem; line-height:1.55; margin:0; max-width:none;}
.learn-body{padding:1.8rem 2.6rem 2.4rem;}
.learn-body p{font-size:1.1rem; line-height:1.65; color:var(--slate); max-width:none;}
.learn-h{font-size:1.25rem; color:var(--ink); margin:1.6rem 0 0.7rem; padding-left:0.8rem; border-left:4px solid var(--olanji); line-height:1.3;}
.learn-body > .learn-h:first-child{margin-top:0;}
.learn-cards{display:grid; grid-template-columns:1fr 1fr; gap:0.8rem;}
.learn-cards div{display:flex; gap:0.8rem; align-items:flex-start; background:rgba(var(--teal-rgb),0.09); border-top:3px solid var(--teal); border-radius:12px; padding:0.95rem 1rem;}
.learn-cards b{flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--teal); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:0.95rem;}
.learn-cards span{font-size:1.05rem; line-height:1.45; color:var(--ink);}
.learn-ticks{list-style:none; margin:0; padding:0;}
.learn-ticks li{position:relative; padding:0.4rem 0 0.4rem 2rem; font-size:1.1rem; line-height:1.55; color:var(--slate);}
.learn-ticks li::before{content:""; position:absolute; left:0; top:0.78rem; width:1rem; height:0.55rem; border-left:3px solid var(--teal); border-bottom:3px solid var(--teal); transform:rotate(-45deg) scale(0.9);}
.learn-why{margin:1.8rem 0 1.6rem; padding:1.3rem 1.5rem 1.4rem; background:rgba(var(--teal-rgb),0.1); border-radius:16px;}
.learn-why .learn-h{margin-top:0;}
.learn-why p{margin:0 0 0.7rem;}
.learn-why .learn-closing{font-weight:700; color:var(--teal-dark); margin:0;}
@media(max-width:640px){
.learn-head{padding:1.6rem 1.3rem 1.4rem;}
.learn-body{padding:1.4rem 1.3rem 1.8rem;}
.learn-cards{grid-template-columns:1fr;}
}
/* X-Factor: panels far left, comment box far right, same height */
.xfactor .container{text-align:left;}
.xf-layout{display:grid; gap:1.4rem; align-items:stretch; max-width:none;}
.xf-layout .xf-wrap{max-width:none; width:100%; margin:0;}
.xf-note{background:var(--white); border-radius:22px; border-top:5px solid var(--olanji); box-shadow:0 18px 44px rgba(2,5,9,0.18); padding:1.8rem 1.7rem; display:flex; flex-direction:column; justify-content:center; text-align:left; position:relative;}
.xf-note::before{content:"\201C"; position:absolute; top:0.2rem; right:1.2rem; font-size:5rem; line-height:1; color:rgba(var(--teal-rgb),0.2); font-family:Georgia,serif;}
.xf-note-tag{font-size:0.85rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:0.7rem;}
.xf-note .xf-note-lead{font-size:1.2rem; line-height:1.45; font-weight:700; color:var(--ink); margin:0 0 1.1rem; max-width:none;}
.xf-note h3{font-size:1.1rem; color:var(--teal-dark); margin:0 0 0.6rem; padding-left:0.7rem; border-left:4px solid var(--olanji);}
.xf-note ul{list-style:none; margin:0; padding:0;}
.xf-note li{position:relative; padding:0.3rem 0 0.3rem 1.5rem; line-height:1.5; color:var(--slate);}
.xf-note li::before{content:""; position:absolute; left:0; top:0.75rem; width:0.7rem; height:0.7rem; border-radius:50%; background:var(--teal);}
@media(max-width:1000px){
.xf-layout{grid-template-columns:1fr;}
.xf-note{padding:1.6rem;}
}
.xf-note li{font-size:1.08rem;}
/* ===== Knowledge Hub page ("coming soon") ===== */
.kh-main{min-height:62vh; display:flex; align-items:center; justify-content:center; padding:7rem 0 5rem;}
.kh-main .container{display:flex; justify-content:center;}
.kh-pane{background:rgba(255,255,255,0.94); border-top:5px solid var(--olanji); border-radius:22px; box-shadow:0 24px 60px rgba(2,5,9,0.25); padding:3rem clamp(1.6rem,5vw,4rem) 3rem; text-align:center; max-width:640px; width:100%;}
.kh-tag{display:block; font-size:1rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:0.6rem;}
.kh-pane h1{font-size:clamp(2.4rem,5vw,3.6rem); color:var(--ink); margin:0;}
.kh-rule{display:block; width:90px; height:3px; background:var(--olanji); margin:1rem auto 1.4rem;}
.kh-pane p{font-size:var(--p-size); line-height:1.65; color:var(--slate); margin:0 auto 1.8rem; max-width:48ch;}
/* ===== Contact form: consent tick-box + "I'm not a robot" pop-up ===== */
.consent-row{display:flex; align-items:center; flex-wrap:wrap; gap:0.7rem;}
.contact-card .contact-form .consent-row input[type="checkbox"], .contact-form .consent-row input[type="checkbox"]{-webkit-appearance:none; appearance:none; flex:0 0 auto;
width:24px; height:24px; min-height:0; padding:0; margin:0;
border:1.5px solid rgba(2,5,9,0.35); border-radius:7px;
background:rgba(255,255,255,0.9); backdrop-filter:none; -webkit-backdrop-filter:none;
cursor:pointer; position:relative; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;}
.contact-form .consent-row input[type="checkbox"]:hover{border-color:var(--teal);}
.contact-form .consent-row input[type="checkbox"]:focus-visible{outline:none; box-shadow:0 0 0 4px rgba(var(--teal-rgb),0.2); border-color:var(--teal);}
.contact-card .contact-form .consent-row input[type="checkbox"]:checked, .contact-form .consent-row input[type="checkbox"]:checked{background:var(--teal); border-color:var(--teal);}
.contact-form .consent-row input[type="checkbox"]:checked::after{content:""; position:absolute; left:7px; top:2px; width:6px; height:12px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);}
.contact-form .consent-row label{margin:0; display:inline; font-size:1rem; font-weight:400; line-height:1.4; color:var(--slate); cursor:pointer; flex:1 1 220px;}
.contact-form .consent-row label a{color:var(--teal-dark); font-weight:700; text-decoration:none; border-bottom:2px solid var(--olanji);}
.contact-form .consent-row label a:hover{color:var(--ink);}
.consent-row .req{color:#B3261E; font-weight:700;}
.consent-verified{font-size:0.9rem; font-weight:700; color:var(--teal-dark); background:rgba(var(--teal-rgb),0.12); padding:0.2rem 0.7rem; border-radius:999px;}
.consent-verified[hidden]{display:none;}
.captcha-overlay{position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; background:rgba(2,5,9,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:1rem;}
.captcha-overlay.open{display:flex;}
.captcha-card{position:relative; background:var(--white); border-top:5px solid var(--olanji); border-radius:20px; box-shadow:0 30px 70px rgba(2,5,9,0.4); padding:1.8rem 1.8rem 1.6rem; max-width:94vw; text-align:center;}
.captcha-card h3{font-size:1.3rem; color:var(--ink); margin:0 0 0.3rem;}
.captcha-card p{font-size:1rem; color:var(--slate); margin:0 0 1.1rem; max-width:none;}
.captcha-close{position:absolute; top:0.6rem; right:0.8rem; width:34px; height:34px; border:none; border-radius:50%; background:rgba(2,5,9,0.06); font-size:1.4rem; line-height:1; cursor:pointer; color:var(--ink);}
#captchaBox{display:flex; justify-content:center; min-height:78px;}
@media(max-width:380px){
#captchaBox{transform:scale(0.88); transform-origin:center;}
}
/* Footer privacy link */
.footer-policy{color:inherit; text-decoration:underline; text-underline-offset:3px;}
.footer-policy:hover{color:var(--olanji);}
/* ===== Privacy policy page ===== */
.policy-main{padding:4.5rem 0 4rem;}
.policy-wrap{max-width:980px; margin:0 auto; background:rgba(255,255,255,0.95); border-top:5px solid var(--olanji); border-radius:22px; box-shadow:0 24px 60px rgba(2,5,9,0.22); padding:clamp(1.6rem,4vw,3.2rem);}
.policy-wrap h1{font-size:clamp(2rem,4vw,2.8rem); color:var(--ink); margin:0 0 0.3rem;}
.policy-updated{font-size:1rem; color:var(--teal-dark); font-weight:700; margin:0 0 1.2rem;}
.policy-wrap h2{font-size:1.45rem; color:var(--ink); margin:2.2rem 0 0.7rem; padding-left:0.8rem; border-left:4px solid var(--olanji); line-height:1.3;}
.policy-wrap p, .policy-wrap li{font-size:var(--p-size); line-height:1.65; color:var(--slate); max-width:none;}
.policy-wrap ul{margin:0 0 1rem; padding-left:1.3rem;}
.policy-wrap li{margin-bottom:0.35rem;}
.policy-wrap a{color:var(--teal-dark); font-weight:700;}
.policy-lead{font-size:1.25rem; line-height:1.55; color:var(--ink); font-weight:500;}
.policy-toc{display:flex; flex-wrap:wrap; gap:0.5rem; margin:1.2rem 0 0.4rem; padding:0; list-style:none;}
.policy-toc a{display:inline-block; background:rgba(var(--teal-rgb),0.1); color:var(--teal-dark); border-radius:999px; padding:0.4rem 0.95rem; font-size:0.95rem; text-decoration:none;}
.policy-toc a:hover{background:rgba(var(--teal-rgb),0.2);}
.policy-grid{display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin:0.5rem 0 1rem;}
.policy-grid div{background:rgba(var(--teal-rgb),0.08); border-top:3px solid var(--teal); border-radius:12px; padding:0.9rem 1.1rem;}
.policy-grid strong{display:block; color:var(--ink); font-size:1.1rem; margin-bottom:0.2rem;}
.policy-grid span{font-size:1.02rem; line-height:1.5; color:var(--slate);}
.policy-contact{background:rgba(var(--teal-rgb),0.1); border-radius:16px; padding:1.2rem 1.4rem; margin-top:1rem;}
.policy-contact p{margin:0 0 0.4rem;}
.policy-contact p:last-child{margin:0;}
@media(max-width:700px){
.policy-grid{grid-template-columns:1fr;}
.policy-main{padding:3rem 0 3rem;}
}
/* Footer blurb under the logo */
.footer-blurb{margin:0.8rem 0 0; max-width:75ch; font-size:0.95rem; line-height:1.65; color:rgba(246,245,241,0.72);}
/* Footer: align link columns with first line of the blurb; hide Instagram/Facebook for now
(delete the two rules below to bring them back) */
@media(min-width:721px){
.footer-grid > div:nth-child(n+2){padding-top:2.8rem;}
}
.footer-social a[aria-label="Instagram"],.footer-social a[aria-label="Facebook"],
.menu-social a[aria-label="Instagram"],.menu-social a[aria-label="Facebook"]{display:none;}
/* ---- Services "What We Deliver": photo-top cards (IBM-style) ---- */
/* ---- Services "What We Deliver": tabbed layout ---- */
.svc-tabs{display:flex; flex-wrap:wrap; margin-top:2rem; border:1px solid #d0d0d0; border-radius:4px; background:#f4f4f4; width:fit-content; max-width:100%; overflow:hidden;}
.svc-tab{appearance:none; border:0; border-right:1px solid #d0d0d0; background:#f4f4f4; color:var(--ink); font:inherit; font-size:1.05rem; padding:1.05rem 1.5rem; cursor:pointer; position:relative; transition:background .2s ease;}
.svc-tab:last-child{border-right:0;}
.svc-tab:hover{background:#e8e8e8;}
.svc-tab:focus-visible{outline:2px solid var(--teal); outline-offset:-2px;}
.svc-tab[aria-selected="true"]{background:#fff;}
.svc-tab[aria-selected="true"]::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--olanji);}
.svc-panel{margin-top:1.5rem; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1.8rem; align-items:stretch;}
.svc-panel[hidden]{display:none;}
.svc-panel.active{animation:svcIn .35s ease;}
@keyframes svcIn{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:none;}
}
.svc-media{border-radius:10px; overflow:hidden; background:rgba(var(--teal-rgb),0.12); min-height:320px; border:1px solid #e0e0e0;}
.svc-media img{width:100%; height:100%; object-fit:cover; display:block;}
.svc-info{background:#f4f4f4; border:1px solid #e0e0e0; border-radius:10px; padding:2rem 2rem 1.8rem; display:flex; flex-direction:column;}
.svc-tag{font-weight:700; color:var(--teal-dark); font-size:0.95rem; letter-spacing:.02em; margin-bottom:0.4rem;}
.svc-info h3{font-size:1.7rem; margin:0 0 0.8rem; color:var(--ink);}
.svc-info p.svc-lead{margin:0 0 1.4rem; color:#393939; font-size:1.08rem !important; line-height:1.6;}
.svc-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.9rem; margin-bottom:0.9rem;}
.svc-cards-three{grid-template-columns:repeat(3,minmax(0,1fr));}
.svc-card{background:#fff; border:1px solid #e0e0e0; border-left:4px solid var(--teal); border-radius:8px; padding:0.95rem 1.1rem; display:flex; flex-direction:column; gap:0.2rem; position:relative;}
.svc-card strong{font-size:1.02rem; color:var(--ink);}
.svc-card span{font-size:0.95rem; color:#555658; line-height:1.45;}
.svc-cards-steps .svc-card{padding-left:3.4rem;}
.svc-cards-steps .svc-card:last-child{grid-column:span 2;}
.svc-card > b{font-weight:700;}
.svc-cards-steps .svc-card > b{position:absolute; left:0.9rem; top:0.85rem; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.9rem;}
.svc-badge{align-items:flex-start;}
.svc-badge > b{font-size:1.35rem; color:var(--teal-dark);}
.svc-card em{font-style:normal; font-weight:700; font-size:0.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate);}
.svc-note{margin:0.3rem 0 1.2rem; padding:0.9rem 1.1rem; background:rgba(var(--teal-rgb),0.10); border-radius:8px; color:#2b2b2b; font-size:0.98rem !important; line-height:1.55;}
.svc-actions{margin-top:auto; padding-top:1rem; display:flex; flex-wrap:wrap; gap:0.8rem;}
@media(max-width:980px){
.svc-panel{grid-template-columns:1fr;}
.svc-media{min-height:220px; max-height:300px;}
.svc-tabs{width:100%;}
.svc-tab{flex:1 1 auto; padding:0.9rem 1rem; font-size:0.95rem;}
}
@media(max-width:620px){
.svc-cards,.svc-cards-three{grid-template-columns:1fr;}
.svc-cards-steps .svc-card:last-child{grid-column:auto;}
.svc-info{padding:1.4rem 1.2rem;}
.svc-tab{flex:1 1 100%; border-right:0; border-bottom:1px solid #d0d0d0;}
}
.svc-info p.svc-note{max-width:none; width:100%;}
/* Services "Platforms in Depth": content beside the photo */
.depth-info h2{margin-bottom:1rem;}
.depth-info > p{margin:0;}
.depth-info .learn-h{margin-top:1.4rem;}
.depth-info > h2 + .learn-h{margin-top:0;}
.depth-info .learn-why{margin:1.6rem 0 0;}
.depth-info .learn-why p{margin:0 0 0.6rem; font-size:1.1rem; line-height:1.55;}
.depth-info .learn-why p:last-child{margin-bottom:0;}
.depth-info p.depth-lead{margin:0 0 1.4rem;}
.depth-info .learn-cards strong{display:block; font-size:1.08rem; margin-bottom:0.2rem; color:var(--ink);}
.depth-info .learn-cards span{font-size:0.98rem;}
.depth-info .depth-cta{margin-top:1.6rem;}
/* LinkedIn icon in the top nav, after "Get in touch" */
.nav-social{width:40px; height:40px; margin-left:0.7rem; border-radius:50%; background:var(--white); color:var(--navy-2); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .2s ease, color .2s ease, transform .2s ease;}
.nav-social:hover{background:var(--teal-dark); color:#fff; transform:translateY(-1px);}
.nav-social:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
@media(max-width:560px){
.nav-social{display:none;}
}
/* Cookie notice */
.cookie-notice{position:fixed; left:1.2rem; bottom:1.2rem; z-index:400; max-width:560px; display:flex; align-items:center; gap:1.1rem; background:#0f1a24; color:rgba(246,245,241,0.9); padding:1.05rem 1.3rem; border-radius:14px; box-shadow:0 12px 34px rgba(2,5,9,0.35); border-top:3px solid var(--teal); opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease;}
.cookie-notice.show{opacity:1; transform:none;}
.cookie-notice p{margin:0; font-size:0.92rem !important; line-height:1.5; color:rgba(246,245,241,0.9);}
.cookie-notice a{color:#fff; text-decoration:underline;}
.cookie-notice a:hover{color:var(--teal);}
.cookie-accept{flex:0 0 auto; appearance:none; border:0; cursor:pointer; background:var(--teal); color:#fff; font:inherit; font-weight:700; font-size:0.92rem; padding:0.65rem 1.4rem; border-radius:999px; transition:background .2s ease;}
.cookie-accept:hover{background:var(--teal-dark);}
.cookie-accept:focus-visible{outline:2px solid #fff; outline-offset:2px;}
@media(max-width:560px){
.cookie-notice{left:0.7rem; right:0.7rem; bottom:0.7rem; flex-direction:column; align-items:stretch; text-align:left;}
.cookie-accept{width:100%;}
}
/* ---- Card hover motion (consistent across the site) ---- */
.svc-card, .learn-cards > div, .practice-tile, .testimonial, .service-item{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;}
.svc-card:hover, .learn-cards > div:hover, .practice-tile:hover, .testimonial:hover{transform:translateY(-5px); box-shadow:0 14px 30px rgba(2,5,9,0.16);}
.svc-card:hover{border-color:var(--teal); border-left-color:var(--olanji);}
.learn-cards > div:hover{border-top-color:var(--olanji);}
.service-item:hover{transform:translateX(8px);}
/* small badges / numbers inside cards react too */
.svc-cards-steps .svc-card > b,.learn-cards b,.practice-num,.svc-badge > b{transition:transform .3s cubic-bezier(.3,1.6,.5,1), background-color .25s ease;}
.svc-card:hover > b,.learn-cards > div:hover b,.practice-tile:hover .practice-num{transform:scale(1.18) rotate(-6deg);}
.svc-cards-steps .svc-card:hover > b,.learn-cards > div:hover b{background:var(--olanji);}
.svc-card:hover > b{display:inline-block;}
@media(hover:none){
.svc-card:hover, .learn-cards > div:hover, .practice-tile:hover, .testimonial:hover{transform:none;}
.service-item:hover{transform:none;}
}
@media(prefers-reduced-motion:reduce){
.svc-card, .learn-cards > div, .practice-tile, .testimonial, .service-item, .svc-card > b, .learn-cards b, .practice-num{transition:none !important;}
.svc-card:hover, .learn-cards > div:hover, .practice-tile:hover, .testimonial:hover, .service-item:hover{transform:none !important;}
}
/* Contact banner: let the paragraph run as wide as the heading so the slide stays short */
.mini-slide p, .page-header .mini-slide p{max-width:none !important;}
/* Home intro: text on the left, video on the right (side by side) */
.intro-split{display:grid;}
.intro-split .intro-video{margin-top:0;}
@media(max-width:900px){
.intro-split{grid-template-columns:1fr;}
}
/* Sub-headings (eyebrows): first letter of every word capitalised */
.eyebrow,.slide .eyebrow.slide-title{text-transform:capitalize;}
/* Left side menu list: all caps */
.menu-links li a{text-transform:uppercase; letter-spacing:0.06em;}
/* Section headings site-wide (h1/h2): first letter of every word capitalised */
h1,h2{text-transform:capitalize;}
/* Home intro paragraph (next to the video): a little larger */
.intro-split .intro-stack p, .intro-stack.intro-split p, .intro-split > div:first-child p{font-size:clamp(1.25rem,1.75vw,1.5rem) !important; line-height:1.6 !important;}
/* Home hero slides: paragraph text 24px */
.slide p, .slide p.slide-lead-p{font-size:24px !important; line-height:1.55 !important;}
@media(max-width:720px){
.slide p, .slide p.slide-lead-p{font-size:18px !important;}
}
/* Banner slides on every page: paragraph text 24px */
.mini-slide p, .page-header .mini-slide p{font-size:24px !important; line-height:1.55 !important;}
/* About, Why ODS and Our Values: all page paragraphs 24px (footer, pop-ups and the cookie notice keep their own size) */
body.big-text p:not(footer *):not(.modal-pane *):not(.cookie-notice *):not(.captcha-card *):not(.menu-panel *){font-size:24px !important; line-height:1.55 !important;}
@media(max-width:720px){
.mini-slide p, .page-header .mini-slide p, body.big-text p:not(footer *):not(.modal-pane *):not(.cookie-notice *):not(.captcha-card *):not(.menu-panel *){font-size:18px !important;}
}
/* Home hero slides: a slightly darker teal background (lower the hex values for darker still) */
.hero-slider{background:var(--teal);}
/* Same darker teal over any photo/video behind the hero text */
.slide-photo-overlay{background:linear-gradient(135deg, rgba(var(--teal-rgb),0.82), rgba(var(--teal-rgb),0.58));}
/* Hero slide 1: logo top-left, tagline bottom-right */
.slide.active[data-index="0"]{padding:0;}
.slide-brand{position:absolute; inset:0; padding:2.2rem clamp(1.5rem,4vw,4rem) 4.2rem;}
.slide-brand-logo{position:absolute; top:2.2rem; width:clamp(190px,24vw,340px); height:auto;}
.slide .slide-brand-tag{position:absolute; right:clamp(1.5rem,4vw,4rem); bottom:4.2rem; margin:0; max-width:90%; text-align:right; color:#fff; text-transform:uppercase; letter-spacing:.14em; font-weight:500; font-size:clamp(1.1rem,2.2vw,2rem) !important; line-height:1.3;}
@media(max-width:860px){
.slide-brand-logo{top:1.6rem;}
.slide-brand{padding-bottom:3.6rem;}
.slide .slide-brand-tag{bottom:3.6rem;}
}
/* Intro: video stacked under the Humanising Performance Management text, larger */
.intro-split{grid-template-columns:1fr !important; gap:2.2rem; align-items:start;}
.intro-split .intro-video{width:100%; max-width:960px;}
.intro-split .intro-video video{width:100%; height:auto; display:block;}
.intro-split .intro-video{margin:0 auto !important; justify-self:center;}
.intro-split > div:first-child p, .intro-split > div:first-child h2{max-width:min(100%,1280px) !important;}
/* Slide 1 only: clear photo (no teal wash); other slides keep the colour overlay */
.slide-photo-overlay{transition:opacity .8s ease;}
.slide-brand-tag{text-shadow:0 1px 10px rgba(0,0,0,.55);}
@media(min-width:861px){
.slide .slide-brand-tag{bottom:1.4rem;}
}
/* Hero slides 2-4: content nudged to the right */
@media(min-width:861px){
.slide:not([data-index="0"]) .slide-content{padding-left:clamp(3rem,7vw,7rem);}
}
/* Hero slides 2-4: content block pushed right, its right edge at ~94% of the slide */
@media(min-width:1100px){
.slide:not([data-index="0"]) .slide-content{max-width:none; width:100%; box-sizing:border-box; padding-left:max(7rem, calc(94% - 820px)); padding-right:6%;}
.slide:not([data-index="0"]) .slide-content > *{max-width:820px;}
}
/* Logo on hero slides 2-4, sized to sit on the chair (wide screens only) */
.slide-side-logo{display:none;}
@media(min-width:1100px){
.slide-side-logo{display:block; position:absolute; left:20.8%; top:60%; width:17.5%; max-width:360px; height:auto; z-index:3; pointer-events:none;}
}
/* ===== Services: "What We Deliver" as alternating feature rows (no tabs) ===== */
.cap-rows{display:flex; flex-direction:column; margin-top:2.4rem;}
.cap-row{position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0; align-items:stretch; border-radius:14px; overflow:visible;}
.cap-row-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.cap-row-flip .svc-media{order:2;}
.cap-row .svc-media{min-height:340px; border-radius:14px; box-shadow:0 18px 40px rgba(1,60,60,.18);}
.cap-row .svc-info{margin:2.2rem 0 2.2rem -3.2rem; position:relative; z-index:2; box-shadow:0 20px 45px rgba(1,60,60,.14); border-radius:14px;}
.cap-row-flip .svc-info{margin:2.2rem -3.2rem 2.2rem 0;}
.cap-row::before{content:attr(data-num); position:absolute; left:1rem; z-index:3; font-size:clamp(3.2rem,6vw,5rem); font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:2px var(--teal); opacity:.85; pointer-events:none;}
.cap-row-flip::before{left:auto; right:1rem;}
.cap-row .svc-tag{display:inline-block; background:var(--teal); color:#fff; padding:.2rem .7rem; border-radius:999px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;}
@media(max-width:980px){
.cap-row,.cap-row-flip{grid-template-columns:1fr;}
.cap-row-flip .svc-media{order:0;}
.cap-row .svc-media{min-height:220px; max-height:300px;}
.cap-row .svc-info,.cap-row-flip .svc-info{margin:-2rem 0.8rem 0;}
.cap-row::before,.cap-row-flip::before{top:-1.4rem; left:1rem; right:auto;}
}
.cap-row .svc-tag{width:fit-content; align-self:flex-start;}
.cap-row::before{top:-3rem;}
.cap-rows{gap:clamp(3.6rem,7vw,5.2rem);}
@media(max-width:980px){
.cap-row::before,.cap-row-flip::before{top:-3rem;}
}
.process-step[data-href]{cursor:pointer;}
.process-step[data-href]:focus-visible{outline:3px solid var(--olanji); outline-offset:3px;}
/* Services: collapsible "How We Work" */
.hw-toggle-wrap{display:flex; justify-content:center; padding:.5rem 0;}
.hw-toggle{display:inline-flex; align-items:center; gap:.6rem; background:#fff; color:var(--teal-dark); border:2px solid var(--teal); border-radius:999px; padding:.85rem 1.7rem; font:inherit; font-weight:600; font-size:1rem; cursor:pointer; transition:background-color .25s ease, color .25s ease, transform .25s ease;}
.hw-toggle:hover{background:var(--teal); color:#fff; transform:translateY(-2px);}
.hw-toggle:focus-visible{outline:3px solid var(--olanji); outline-offset:3px;}
.hw-body{margin-top:2rem;}
.hw-body[hidden]{display:none;}
/* Three cascading chevrons inside the toggle button */
.hw-chevs{display:inline-flex; flex-direction:column; align-items:center; gap:0; line-height:0; margin-left:.1rem; transition:transform .35s ease;}
.hw-chevs svg{display:block; margin-top:-5px; opacity:.25; animation:hwCascade 1.5s ease-in-out infinite;}
.hw-chevs svg:first-child{margin-top:0;}
.hw-chevs svg:nth-child(2){animation-delay:.18s;}
.hw-chevs svg:nth-child(3){animation-delay:.36s;}
@keyframes hwCascade{
0%,100%{opacity:.25; transform:translateY(-2px);}
45%{opacity:1; transform:translateY(2px);}
}
.hw-toggle:hover .hw-chevs svg{animation-duration:.9s;}
.hw-toggle.open .hw-chevs{transform:rotate(180deg);}
.hw-toggle.open .hw-chevs svg{animation-name:hwCascadeUp;}
@keyframes hwCascadeUp{
0%,100%{opacity:.25; transform:translateY(2px);}
45%{opacity:1; transform:translateY(-2px);}
}
.hw-toggle svg{transition:none;}
.hw-toggle.open svg{transform:none;}
.hw-body:not([hidden]){animation:hwReveal .5s ease both;}
@keyframes hwReveal{
from{opacity:0; transform:translateY(-14px);}
to{opacity:1; transform:none;}
}
@media(prefers-reduced-motion:reduce){
.hw-chevs svg,.hw-body:not([hidden]){animation:none; opacity:1;}
}
/* Solutions: benefits card under the photo */
.depth-benefits{margin-top:1.6rem; background:#e6f5f5; border-radius:16px; padding:1.6rem 1.8rem 1.2rem; box-shadow:0 10px 26px rgba(1,60,60,.08);}
.depth-benefits .learn-h{margin-top:0; margin-bottom:.8rem;}
.depth-benefits .learn-ticks li{font-size:1.05rem;}
/* Solutions: centred "What We Offer" title at the top of the solutions */
/* Solutions tabs: no pictures, transparent tab buttons, heading nudged up */
.sol-tabs-section{padding-top:1.2rem;}
.sol-tabs-section .svc-tabs{margin-top:0; background:transparent; border-color:rgba(1,130,131,.35);}
.sol-tabs-section .svc-tab{background:transparent; border-right-color:rgba(1,130,131,.35);}
.sol-tabs-section .svc-tab:hover{background:rgba(1,164,163,.12);}
.sol-tabs-section .svc-tab[aria-selected="true"]{background:transparent; color:var(--teal-dark); font-weight:600;}
.sol-tabs-section .svc-panel{grid-template-columns:1fr;}
/* Top nav: all caps */
.nav-links a,.nav-dropdown-trigger,.nav-dropdown-menu a,.nav-cta{text-transform:uppercase; letter-spacing:.05em;}
@media(min-width:861px){
.slide .slide-brand-tag{bottom:3.4rem;}
}
.slide-brand-logo{left:auto; right:clamp(1.5rem,4vw,4rem);}
/* Our Values hero: long mission heading, smaller so the banner stays compact */
.mini-slide h1.mission-h1{font-size:clamp(1.5rem,2.8vw,2.3rem) !important; line-height:1.25; max-width:1100px;}
h2.mission-h2{font-size:clamp(1.4rem,2.4vw,2rem) !important; line-height:1.3; max-width:1000px;}
/* Top nav: 2px smaller */
.nav-links a,.nav-dropdown-trigger,.nav-dropdown-menu a{font-size:13.2px;}
.nav-cta{font-size:12.7px;}
/* Stop the "bounce" overscroll at the very top/bottom of a page, which was
revealing the fixed background photo outside the header and footer. */
html,body{overscroll-behavior:none;}
/* About: "Who we are" restructure */
.who-top{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:clamp(1.8rem,4vw,3.5rem); align-items:center; margin-top:.6rem;}
.who-lead{font-size:clamp(1.35rem,2vw,1.8rem) !important; line-height:1.55 !important; color:var(--ink); font-weight:500; margin:0; border-left:5px solid var(--olanji); padding-left:1.4rem; max-width:none !important;}
.who-photo{margin:0 !important;}
.who-photo img{display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 18px 40px rgba(1,60,60,.18);}
.who-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; margin-top:2.4rem;}
.who-card{background:#fff; border-radius:16px; padding:1.6rem 1.6rem 1.4rem; border-top:4px solid var(--teal); box-shadow:0 10px 26px rgba(1,60,60,.09); transition:transform .3s ease, box-shadow .3s ease;}
.who-card:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(1,60,60,.16);}
.who-num{display:block; font-size:clamp(2.6rem,4vw,3.6rem); font-weight:800; line-height:1; color:var(--teal); margin-bottom:.4rem;}
.who-card h3{margin:0 0 .5rem; font-size:1.25rem;}
.who-card p{margin:0; font-size:1.05rem !important; line-height:1.6 !important; color:var(--slate); max-width:none !important;}
@media(max-width:900px){
.who-top{grid-template-columns:1fr;}
.who-cards{grid-template-columns:1fr;}
}
body.big-text p.who-p:not(footer *):not(.modal-pane *):not(.cookie-notice *):not(.captcha-card *):not(.menu-panel *){font-size:1.1rem !important; line-height:1.6 !important;}
/* About: Managing Director quote band under the intro */
.who-quote{margin:2.4rem 0 0; border-radius:16px; padding:2rem clamp(1.4rem,4vw,3.5rem); text-align:right; position:relative;}
.who-quote::before{content:"\201C"; position:absolute; left:1.4rem; top:-.2rem; font-size:6rem; line-height:1; font-family:Georgia,serif;}
.who-quote blockquote{margin:0; font-size:clamp(1.25rem,2.2vw,1.9rem); font-weight:600; line-height:1.4;}
.who-quote figcaption{margin-top:.8rem; font-size:.95rem; letter-spacing:.02em;}
@media(max-width:700px){
.who-quote{text-align:left;}
}
.who-quote{margin-top:2.2rem;}
.who-quote{background:transparent !important; box-shadow:none !important; color:var(--ink);}
.who-quote::before{color:rgba(1,164,163,.35);}
.who-quote blockquote{color:var(--teal-dark) !important;}
.who-quote figcaption{color:var(--slate) !important;}
/* About: follow-on statement under lead */
body.big-text p.who-follow{font-size:clamp(1.05rem,1.5vw,1.35rem) !important; line-height:1.6 !important; color:var(--slate); font-weight:400; margin:1.4rem 0 0 !important; max-width:none !important;}
body.big-text p.who-follow{border-left:0 !important; padding-left:0 !important; border-right:5px solid var(--teal); padding-right:1.4rem; text-align:right;}
/* Why ODS: X-Factor as tabs */
.xf-wrap .xf-tabs{display:flex; width:100%; margin:0; border:0; border-radius:0; background:rgba(20,22,26,.78); overflow:hidden;}
.xf-wrap .xf-tabs .svc-tab{flex:1 1 0; background:transparent; border-right:1px solid rgba(255,255,255,.18); text-align:center; padding:1.15rem .8rem;}
.xf-wrap .xf-tabs .svc-tab[aria-selected="true"]{background:rgba(1,164,163,.85);}
.xf-wrap .xf-tabs .svc-tab[aria-selected="true"]::after{background:var(--olanji);}
.xf-panels{position:relative;}
.xf-wrap .xf-panel{display:block; margin:0; padding:2.4rem clamp(1.6rem,5vw,4rem) 2.6rem; text-align:left; color:#fff;}
.xf-wrap .xf-panel[hidden]{display:none;}
.xf-wrap .xf-panel.xf-teal{background:rgba(1,164,163,.80);}
.xf-wrap .xf-panel.xf-dark{background:rgba(43,38,38,.82);}
.xf-wrap .xf-panel.xf-orange{background:rgba(255,176,59,.88);}
.xf-panel .xf-num{display:block; font-weight:700; opacity:.35; line-height:1; margin-bottom:.6rem;}
.xf-panel h3{color:inherit; margin:0 0 .6rem; font-size:clamp(1.5rem,2.2vw,1.9rem);}
.xf-panel p{color:inherit; max-width:46rem; font-size:1.2rem; line-height:1.6;}
@media(max-width:760px){
.xf-wrap .xf-tabs{flex-direction:column;}
.xf-wrap .xf-tabs .svc-tab{border-right:0; border-bottom:1px solid rgba(255,255,255,.18);}
}
/* Why ODS: X-Factor now full width (note card moved to About) */
.xf-layout{grid-template-columns:1fr !important;}
/* About: story + note side by side */
.story-split{display:grid; gap:clamp(1.6rem,4vw,3.5rem); align-items:start;}
.story-split .readable{max-width:none;}
@media(max-width:1000px){
.story-split{grid-template-columns:1fr;}
}
/* About story: card aligned with heading, transparent */
.story-split{grid-template-columns:minmax(0,1.1fr) minmax(280px,420px); grid-template-areas:"eyebrow note" "title note" "body note"; grid-template-rows:auto auto 1fr; column-gap:clamp(1.6rem,4vw,3.5rem); row-gap:0;}
.story-split .story-eyebrow{grid-area:eyebrow;}
.story-split .story-h2{grid-area:title;}
.story-split .readable{grid-area:body;}
.story-split .xf-note{grid-area:note; align-self:start; background:transparent !important; box-shadow:none !important;}
@media(max-width:1000px){
.story-split{grid-template-columns:1fr; grid-template-areas:"eyebrow" "title" "body" "note";}
.story-split .xf-note{margin-top:1.5rem;}
}
.story-split .xf-note{margin-top:3.1rem;}
@media(max-width:1000px){
.story-split .xf-note{margin-top:1.5rem;}
}
/* X-Factor tabs: transparent backgrounds */
.xf-wrap .xf-tabs, .xf-wrap .xf-tabs .svc-tab, .xf-wrap .xf-tabs .svc-tab[aria-selected="true"],
.xf-wrap .xf-panel, .xf-wrap .xf-panel.xf-teal, .xf-wrap .xf-panel.xf-dark, .xf-wrap .xf-panel.xf-orange{background:transparent !important;}
.xf-wrap .xf-tabs .svc-tab[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--olanji);}
.xf-wrap .xf-panel.xf-orange{color:#fff;}
.xf-wrap .xf-tabs .svc-tab{font-weight:600;}
/* X-Factor tabs: no background photo, dark text on page background */
.xf-wrap{background:transparent !important; box-shadow:none !important; border-radius:0; overflow:visible;}
.xf-wrap .xf-tabs, .xf-wrap .xf-panel{text-shadow:none !important; color:var(--ink) !important;}
.xf-wrap .xf-tabs{border-bottom:1px solid rgba(1,130,131,.35);}
.xf-wrap .xf-tabs .svc-tab{color:var(--ink) !important; border-right-color:rgba(1,130,131,.3);}
.xf-wrap .xf-tabs .svc-tab:hover{background:rgba(1,164,163,.12) !important;}
.xf-wrap .xf-tabs .svc-tab[aria-selected="true"]{color:var(--teal-dark) !important; font-weight:700;}
.xf-wrap .xf-panel.xf-teal, .xf-wrap .xf-panel.xf-dark, .xf-wrap .xf-panel.xf-orange{color:var(--ink) !important;}
.xf-wrap .xf-panel{min-height:0; padding-left:.4rem; padding-right:.4rem;}
.xf-wrap .xf-panel h3{color:var(--teal-dark) !important;}
.xf-wrap .xf-panel .xf-sub{color:var(--slate) !important;}
.xf-wrap .xf-panel .xf-num{color:var(--teal); opacity:.5;}
/* X-Factor tabs: text one size up */
.xf-wrap .xf-tabs .svc-tab{font-size:calc(1.05rem + 2px);}
.xf-wrap .xf-panel h3{font-size:calc(clamp(1.5rem,2.2vw,1.9rem) + 2px);}
.xf-wrap .xf-panel .xf-sub{font-size:calc(1.2rem + 2px);}
.xf-wrap .xf-panel p{font-size:calc(1.2rem + 2px);}
.xf-panel .xf-num{font-size:calc(2.6rem + 2px);}
/* About: Why we exist, broken into three beats */
body.big-text .story-split .readable p.st-lead{font-size:clamp(1.35rem,2vw,1.75rem) !important; line-height:1.45 !important; color:var(--ink) !important; font-weight:500; margin:0 0 1.4rem !important;}
body.big-text .story-split .readable p.st-lead strong{color:var(--teal-dark);}
body.big-text .story-split .readable p.st-observe{font-size:clamp(1.1rem,1.5vw,1.3rem) !important; line-height:1.6 !important; color:var(--slate) !important; margin:0 0 1.4rem !important; padding-left:1.2rem; border-left:4px solid var(--olanji);}
body.big-text .story-split .readable p.st-gap{font-size:clamp(1.1rem,1.5vw,1.3rem) !important; line-height:1.6 !important; color:var(--ink) !important; margin:0 0 1.4rem !important; padding-left:1.2rem; border-left:4px solid var(--teal);}
body.big-text .story-split .readable p.st-gap strong{color:var(--teal-dark);}
/* About ODS: opening line */
body.big-text p.who-first{font-size:clamp(1.05rem,1.5vw,1.3rem) !important; line-height:1.5 !important; color:var(--slate) !important; margin:0 0 1.2rem !important; max-width:none !important;}
body.big-text p.who-first strong{color:var(--teal-dark);}
/* About story: bars on the right for the last two blocks */
body.big-text .story-split .readable p.st-gap,
.story-split .readable .callout{border-left:0 !important; padding-left:0 !important; border-right:4px solid var(--teal); padding-right:1.2rem; text-align:right;}
/* Our principle: no bar, back on the left */
.story-split .readable .callout{border:0 !important; padding:.3rem 0 !important; text-align:left !important;}
/* Why ODS: wider testimonial text */
.testimonial p{max-width:85%;}
@media(max-width:900px){
.testimonial p{max-width:none;}
}
/* Clickable client logos + testimonial panes */
button.logo-btn{font:inherit; cursor:pointer; appearance:none; -webkit-appearance:none;}
button.logo-btn:focus-visible{outline:3px solid var(--teal); outline-offset:3px;}
button.logo-btn:hover{border-color:var(--teal); box-shadow:0 10px 26px rgba(1,130,131,.18);}
.modal-client .modal-body{max-width:760px;}
.client-pane-logo{display:block; max-height:54px; width:auto; max-width:220px; margin:0 0 1.2rem;}
.client-quote{margin:1rem 0 1.2rem; padding:0 0 0 1.3rem; border-left:4px solid var(--teal); font-size:1.25rem; line-height:1.6; font-style:italic; color:var(--ink);}
.client-cite{margin:0; font-size:.95rem; color:var(--slate);}
/* Services: 3D Consulting as tabs (same look as the X-Factor tabs) */
.d3-tabs{display:flex; width:100%; margin:1rem 0 0; border:0; border-bottom:1px solid rgba(1,130,131,.35); border-radius:0; background:transparent; overflow:hidden;}
.d3-tabs .svc-tab{flex:1 1 0; background:transparent; text-align:center; font-weight:600; font-size:1.1rem; color:var(--ink); padding:1.05rem .6rem; border-right:1px solid rgba(1,130,131,.3);}
.d3-tabs .svc-tab:hover{background:rgba(1,164,163,.12);}
.d3-tabs .svc-tab[aria-selected="true"]{background:rgba(1,164,163,.14); color:var(--teal-dark); font-weight:700;}
.d3-tabs .svc-tab[aria-selected="true"]::after{background:var(--olanji);}
.d3-n{opacity:.5; margin-right:.25rem; font-weight:700;}
.d3-panel{display:block; margin:0; padding:1.4rem .4rem .4rem;}
.d3-panel[hidden]{display:none;}
.d3-panel h4{margin:0 0 .6rem; font-size:1.4rem; color:var(--teal-dark);}
.d3-panel p{margin:0; font-size:1.12rem; line-height:1.65; color:var(--ink); max-width:none;}
.svc-info .d3-tabs + .d3-panel, .d3-panel + .svc-actions{margin-top:0;}
.cap-row .svc-info .svc-actions{margin-top:1.4rem;}
@media(max-width:600px){
.d3-tabs{flex-direction:column;}
.d3-tabs .svc-tab{border-right:0; border-bottom:1px solid rgba(1,130,131,.3);}
}
/* anchored solution sections sit below the fixed header */
#planning-analytics,#power-bi,#data-automation{scroll-margin-top:100px;}
.nav-dropdown-menu{width:max-content; min-width:0;} .nav-dropdown-menu a{white-space:nowrap;}
.mini-slide h1.sol-h1,.mini-slide h1.why-h1{font-size:clamp(2.1rem,4.4vw,3.9rem);}
/* ---------- Mail pop-in (home page): mail icon first, then the message opens ---------- */
.mail-pop{position:fixed; right:1.2rem; bottom:1.4rem; z-index:350; display:flex; align-items:flex-start; gap:.7rem; --mp-w:min(330px, calc(100vw - 6.4rem)); transform:translateX(140%); opacity:0; transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease; pointer-events:none;}
.mail-pop.show{transform:none; opacity:1; pointer-events:auto;}
.mail-pop-icon{order:2; position:relative; flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--teal-dark); background:rgba(255,255,255,0.45); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.7); box-shadow:0 8px 26px rgba(15,26,36,0.16);}
.mail-pop-dot{position:absolute; top:11px; right:11px; width:9px; height:9px; border-radius:50%; background:var(--olanji); box-shadow:0 0 0 2px rgba(255,255,255,0.8);}
.mail-pop:not(.open) .mail-pop-icon{animation:mailPing 1.1s ease .5s 1;}
.mail-pop.open .mail-pop-dot{display:none;}
@keyframes mailPing{0%,100%{transform:scale(1);}40%{transform:scale(1.14);}}
.mail-pop-body{order:1; width:0; opacity:0; overflow:hidden; border-radius:16px; background:rgba(255,255,255,0.55); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.7); box-shadow:0 10px 30px rgba(15,26,36,0.16); transition:width .6s cubic-bezier(.2,.8,.2,1), opacity .45s ease .1s;}
.mail-pop.open .mail-pop-body{width:var(--mp-w); opacity:1;}
.mail-pop-inner{position:relative; width:var(--mp-w); padding:1rem 2.4rem 1rem 1.15rem; box-sizing:border-box; transition:opacity .35s ease;}
.mail-pop-inner.swap{opacity:0;}
.mail-pop-label{display:block; margin-bottom:.45rem; color:var(--teal-dark); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
.mail-pop-text{margin:0; color:var(--ink); font-size:.95rem !important; line-height:1.5; font-weight:500;}
.mail-pop-who{display:block; margin-top:.6rem; color:var(--slate); font-size:.82rem; font-style:normal; font-weight:600;}
.mail-pop-close{position:absolute; top:.45rem; right:.5rem; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer;}
.mail-pop-close:hover{background:rgba(15,26,36,0.08);}
@media (prefers-reduced-motion:reduce){.mail-pop,.mail-pop-body{transition:opacity .2s ease;} .mail-pop{transform:none;} .mail-pop:not(.open) .mail-pop-icon{animation:none;}}
.mail-pop.left{right:auto; left:1.2rem; flex-direction:row-reverse; transform:translateX(-140%);}
.mail-pop.left.show{transform:none;}
@media (prefers-reduced-motion:reduce){.mail-pop.left{transform:none;}}
.cap-row[data-num="02"]::before{-webkit-text-stroke-color:var(--olanji);}