/* About (sitemap 06): "Show who Octopus is and what it stands for, for buyers and for candidates."
   Opening = the category line (BB p.2) beside the Alexandria head office.
   Our story = four ruled chapters from the live About page, with the approved figures only (3,000+ seats, 15 countries).
   Vision, mission, values = BB p.3 wording, values with the live About descriptors, on Ink.
   Culture = real Octopus photographs beside the live Company Culture pillars and the Academy.
   Responsibility = a summary of the live CSR page, linking to it. No CSR figures.
   Close = two paths: work with us, or work at Octopus. */

/* ---------- opening ---------- */
.ab-o .tx{background:var(--ink)}
.ab-o .hx1{max-width:10em}
.ab-o .lead{margin-top:clamp(14px,2.4svh,22px);max-width:27em}
.ab-o .act{margin-top:clamp(18px,3svh,30px)}
.ab-o .pic3 img{object-position:60% 40%}
/* the opening reel (client photos 22-Oct-26): the founder on stage first, framed on him, with his name while he shows */
.ab-o .pic3 .reel img:first-child{object-position:30% 35%}
.ab-o .pic3 .film-ctrl{left:16px;bottom:16px}
.split3.ab-o .pic3 .cap{left:auto;right:16px;bottom:16px;z-index:2;transition:opacity .6s}
.ab-o .cap.off{opacity:0}
.ab-c .mos .reel img{object-position:50% 78%}
.ab-c .mos .film-ctrl{left:16px;bottom:16px;z-index:2;background:rgba(16,42,67,.66);border-color:rgba(247,245,240,.2)}

/* ---------- our story ---------- */
.ab-s.scr{padding:clamp(24px,5svh,64px) 0}
.ab-s .head{margin-bottom:clamp(22px,5svh,56px)}
.ab-s ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,3vw,48px);position:relative}
.ab-s ol::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink)}
.ab-s li{position:relative;padding-top:clamp(26px,4svh,40px)}
.ab-s li::before{content:"";position:absolute;left:0;top:0;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--marine)}
.ab-s li:nth-child(4)::before{background:var(--marine)}
.ab-s li:last-child::before{border-style:dashed}
/* the story draws itself (25-Oct-26): the line runs from 2020 to Next and each chapter lights as it is reached. Only with motion on
   (class tl), so the still page is the finished picture */
.ab-s ol::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.tl .ab-s ol::before{background:var(--line)}
.tl .ab-s li::before{border-color:var(--line);transition:border-color .4s,background .4s}
.tl .ab-s li:nth-child(4)::before{background:var(--paper)}
.tl .ab-s li.lit::before{border-color:var(--marine)}
.tl .ab-s li.lit:nth-child(4)::before{background:var(--marine)}
.ab-s li::after{content:"";position:absolute;left:-2px;top:-2px;box-sizing:border-box;width:20px;height:20px;border-radius:50%;border:2px solid var(--violet-dark);opacity:0;pointer-events:none}
.tl .ab-s li.lit::after{animation:tlring 1.1s ease-out}
@keyframes tlring{from{transform:scale(.6);opacity:1}to{transform:scale(2.4);opacity:0}}
.ab-s .when{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--mid)}
.ab-s h3{margin-top:10px;font-weight:700;font-size:clamp(20px,min(1.5vw,3.2svh),27px);line-height:1.15;letter-spacing:-.02em}
.ab-s li p{margin-top:12px;color:var(--ink);font-size:clamp(15.5px,min(1.2vw,2.5svh),19px);line-height:1.55;max-width:22em}

/* ---------- vision, mission, values ---------- */
.ab-v.scr{padding:clamp(28px,6svh,72px) 0}
.ab-v .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,120px);align-items:start}
.ab-v .lab{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:#A9BFCC}
.ab-v blockquote{margin:10px 0 0;font-weight:600;font-size:clamp(24px,min(2.3vw,4.6svh),38px);line-height:1.18;letter-spacing:-.025em;color:var(--paper);max-width:17em}
.ab-v .mis{margin-top:clamp(22px,4.5svh,44px);padding-top:clamp(16px,3svh,26px);border-top:1px solid rgba(247,245,240,.22)}
.ab-v .mis p{margin-top:8px;font-size:var(--lead);line-height:1.5;color:#D1E1EA;max-width:30em}
.ab-v ul{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid rgba(247,245,240,.22)}
.ab-v ul li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:18px;align-items:baseline;padding:clamp(10px,2svh,18px) 0;border-bottom:1px solid rgba(247,245,240,.22)}
.ab-v ul b{font-weight:700;font-size:clamp(22px,min(1.9vw,3.8svh),32px);letter-spacing:-.03em;color:var(--paper)}
.ab-v ul span{color:#D1E1EA;font-size:15.5px;line-height:1.5}
.ab-v ul i{display:block;font-style:normal;font-weight:600;color:var(--paper)}

/* ---------- culture ---------- */
.ab-c{background:var(--pale)}
.ab-c.scr{padding:clamp(24px,5svh,64px) 0}
.ab-c .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,96px);align-items:center}
.ab-c .mos{display:grid;height:min(68svh,600px)}
.ab-c .mos figure{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.ab-c .mos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-c .lead{margin-top:10px;color:var(--mid-on-pale)}
.ab-c ul{list-style:none;margin:clamp(14px,2.6svh,24px) 0 0;padding:0;border-top:2px solid var(--ink)}
.ab-c ul li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px;align-items:baseline;padding:clamp(7px,1.3svh,12px) 0;border-bottom:1px solid #D6D1C4}
.ab-c ul b{font-weight:600;font-size:17px;letter-spacing:-.01em}
.ab-c ul span{color:var(--mid-on-pale);font-size:15px;line-height:1.45}
.ab-c .acad{margin-top:clamp(14px,2.6svh,24px);font-size:15.5px;line-height:1.5;color:var(--ink);max-width:30em}
.ab-c .acad .link{margin-left:4px}

/* ---------- responsibility ---------- */
.ab-r.scr{padding:clamp(28px,6svh,72px) 0}
.ab-r .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,120px);align-items:start}
.ab-r h2{font-weight:600;font-size:clamp(28px,min(2.8vw,5.4svh),46px);line-height:1.08;letter-spacing:-.03em;color:var(--paper)}
.ab-r .lead{margin-top:14px;color:#D9E6EE;max-width:26em}
.ab-r .act{margin-top:clamp(18px,3svh,28px)}
.ab-r .act .link{color:var(--paper)}
.ab-r dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,48px)}
.ab-r dl div{padding:clamp(12px,2.4svh,22px) 0;border-top:1px solid rgba(247,245,240,.3)}
.ab-r dt{font-weight:600;font-size:clamp(19px,min(1.6vw,3.2svh),26px);letter-spacing:-.015em;color:var(--paper)}
.ab-r dd{margin:8px 0 0;color:#D9E6EE;font-size:clamp(15px,min(1.1vw,2.3svh),17.5px);line-height:1.5}

/* ---------- close: two paths ---------- */
.ab-x{display:grid;grid-template-columns:1fr 1fr}
.ab-x > div{padding:clamp(48px,10svh,120px) clamp(28px,5vw,96px);color:var(--paper)}
.ab-x .w1{background:var(--ink)}
.ab-x .w2{background:var(--marine)}
.ab-x h2{font-weight:700;font-size:clamp(32px,min(3.4vw,6.4svh),54px);line-height:1;letter-spacing:-.04em;max-width:9em}
.ab-x p{margin-top:16px;color:#D9E6EE;font-size:var(--lead);line-height:1.5;max-width:24em}
.ab-x .btn{margin-top:clamp(20px,3.6svh,34px)}
.ab-x .mail{font-family:var(--mono);font-size:13px;color:#A9BFCC;margin-top:14px}
.ab-x :focus-visible{outline-color:var(--violet-dark)}

@media (max-width:900px){
  .ab-s ol{grid-template-columns:1fr;gap:0}
  .ab-s ol::before{top:0;bottom:0;left:7px;right:auto;width:2px;height:auto}
  .ab-s ol::after{top:0;bottom:0;left:7px;right:auto;width:2px;height:auto;transform-origin:50% 0;transform:scaleY(var(--p,1))}
  .ab-s li::after{top:2px}
  .ab-s li{padding:0 0 22px 30px}
  .ab-s li::before{top:4px}
  .ab-v .wrap,.ab-c .wrap,.ab-r .wrap,.ab-x{grid-template-columns:1fr}
  .ab-c .mos{height:56svh}
  .ab-r dl{grid-template-columns:1fr}
  .ab-v ul li,.ab-c ul li{grid-template-columns:1fr;gap:4px}
}