/* Industries (sitemap 04): "Let a buyer find their own industry and see that Octopus already knows it."
   Opening = Home's split screen: the line beside real Octopus people.
   The industries = the ONLY list of the ten, a ruled selector beside one detail sheet per industry:
   the client's own live line, who we serve, what they ask for, what matters most, and what we run.
   On the phone the selector goes and the ten sheets stack, so every detail stays readable without tapping.
   The proof slot per sheet stays hidden until a case study exists: an empty slot would only advertise that there is none.
   Close = the sitemap close with the live Our Solutions "Adaptability" wording and its five methods. */

/* ---------- opening ---------- */
.ih .tx{background:var(--ink);color:var(--paper)}
.ih .hx1{max-width:9em}
.ih .lead{margin-top:clamp(14px,2.4svh,22px);max-width:26em;color:#D1E1EA}
.ih .act{margin-top:clamp(18px,3svh,30px)}
.ih .act .link{color:var(--paper)}
/* the opening reel frames each client photo from its centre (core.css), the old 28% framing fitted the earlier single photo */
.ih .pic3::after{content:"";position:absolute;inset:0;background:rgba(16,42,67,.16);pointer-events:none}
/* the opening (client 26-Oct-26): the industries from the company profile (slide 10) as wide strips that rise slowly, each opens its industry below.
   The track holds the strips twice, so the rise loops without a jump; the pause control and a pointer on a strip hold it (WCAG 2.2.2) */
.ist{position:relative;overflow:hidden;background:var(--ink)}
.ist-track{position:absolute;left:0;right:0;top:0}
.ih .ist::after{display:none}
.ist-track{list-style:none;margin:0;padding:0 0 8px;display:flex;flex-direction:column;gap:8px}
.ist.go .ist-track{animation:istup 56s linear infinite}
.ist.go.hold .ist-track{animation-play-state:paused}
@keyframes istup{to{transform:translateY(-50%)}}
.ist li a{position:relative;display:block;aspect-ratio:1607/477;overflow:hidden;color:var(--paper);text-decoration:none}
.ist li img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.ist li a::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,42,67,.78) 0%,rgba(16,42,67,.25) 45%,rgba(16,42,67,0) 70%);transition:background .4s}
.ist li span{position:absolute;left:clamp(14px,1.6vw,24px);bottom:clamp(10px,1.4vw,18px);z-index:1;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:clamp(17px,1.5vw,24px);letter-spacing:-.02em}
.ist li span svg{width:16px;height:16px;fill:currentColor;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.ist li a:hover img,.ist li a:focus-visible img{transform:scale(1.05)}
.ist li a:hover span svg,.ist li a:focus-visible span svg{opacity:1;transform:none}
.ist li a:focus-visible{outline:3px solid var(--violet-dark);outline-offset:-3px}
.ist .ist-ctl{position:absolute;left:auto;right:16px;bottom:16px;z-index:2}

/* ---------- the ten: selector + sheet ---------- */
.ia.scr{padding:clamp(18px,3svh,44px) 0}
.ia .head{margin-bottom:clamp(12px,2.2svh,24px)}
.ia .body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8.4fr);gap:clamp(24px,4vw,72px);align-items:start}
.ia .rail{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.ia .rail button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:clamp(7px,1.25svh,13px) 14px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-weight:500;font-size:clamp(16px,min(1.2vw,2.5svh),19px);letter-spacing:-.01em;text-align:left;cursor:pointer;isolation:isolate;transition:color .3s}
.ia .rail button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--marine);clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease)}
.ia .rail button svg{width:16px;height:16px;flex:none;fill:currentColor;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .45s var(--ease)}
.ia .rail button:hover{color:var(--marine)}
.ia .rail button:hover svg{opacity:.6;transform:none}
.ia .rail button[aria-selected="true"]{color:var(--paper);font-weight:600}
.ia .rail button[aria-selected="true"]::before{clip-path:inset(0 0 0 0)}
.ia .rail button[aria-selected="true"] svg{opacity:1;transform:none}
.ia .rail button:focus-visible{outline-offset:-3px}
/* one Marine highlight glides to the chosen industry (25-Oct-26), in place of each row filling on its own */
.ia .rail{position:relative;isolation:isolate}
.ia .rail .ind{position:absolute;left:0;right:0;top:0;height:0;z-index:0;background:var(--marine);pointer-events:none;transition:transform .55s var(--ease),height .55s var(--ease)}
.ia .rail.glide button{z-index:1}
.ia .rail.glide button::before,.ia .rail.glide button[aria-selected="true"]::before{display:none}
.ia .rail button{transition:color .35s}


.sheet{display:none;border-top:2px solid var(--ink);padding-top:clamp(14px,2.4svh,26px)}
.sheet.on{display:block}
.sheet .tg-h{display:none;margin:0}
.sheet .tg{width:100%;display:grid;grid-template-columns:1fr 24px;gap:12px;align-items:center;padding:16px 0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;font-size:20px;letter-spacing:-.018em;text-align:left;cursor:pointer}
.sheet .tg[aria-expanded="true"]{color:var(--marine)}
.sheet .pm{position:relative;width:18px;height:18px}
.sheet .pm::before,.sheet .pm::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.sheet .pm::after{transform:rotate(90deg)}
.sheet .tg[aria-expanded="true"] .pm::after{transform:rotate(0)}
.sheet h3{font-weight:700;font-size:clamp(28px,min(2.7vw,5.4svh),46px);line-height:1.04;letter-spacing:-.035em}
.sheet .say{margin-top:8px;max-width:40em;color:var(--ink);font-size:var(--lead);line-height:1.45}
.sheet .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(16px,3svh,32px)}
.sheet .lab{display:block;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--mid)}
.sheet .who{font-size:16.5px;line-height:1.5;color:var(--ink)}
.sheet ul.ask{list-style:none;margin:0;padding:0}
.sheet ul.ask li{padding:clamp(5px,.9svh,9px) 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
.sheet ul.ask li:first-child{padding-top:0}
.sheet .matter{font-weight:600;font-size:clamp(17px,min(1.3vw,2.6svh),21px);line-height:1.35;letter-spacing:-.015em;color:var(--marine)}
.sheet .runs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:clamp(16px,3svh,30px);padding-top:clamp(12px,2svh,18px);border-top:1px solid var(--line)}
.sheet .runs .lab{padding:0;margin:0;border:0}
.sheet .runs a{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--ink);border-bottom:1.5px solid currentColor;padding-bottom:1px}
.sheet .runs a svg{width:14px;height:14px;fill:currentColor;transition:transform .35s var(--ease)}
.sheet .runs a:hover{color:var(--marine)}
.sheet .runs a:hover svg{transform:translateX(3px)}
.sheet .proof{display:none}

/* ---------- close ---------- */
.icl{padding:clamp(44px,8svh,96px) 0}
.icl .wrap{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,120px);align-items:center}
.icl h2{white-space:normal!important;max-width:12em}
.icl h3{font-size:15px;font-weight:600;color:var(--paper)}
.icl .ways{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid rgba(247,245,240,.24)}
.icl .ways li{padding:clamp(8px,1.4svh,13px) 0;border-bottom:1px solid rgba(247,245,240,.24);color:var(--paper);font-size:clamp(16px,min(1.2vw,2.4svh),19px);font-weight:500;letter-spacing:-.01em}
.icl .btn{margin-top:clamp(20px,3.4svh,34px)}

@media (max-width:900px){
  .ia .body{grid-template-columns:1fr}
  .ia .rail{display:none}
  /* phone: the ten are tap-to-open rows, one open at a time, as Home's What we run */
  #sheets{border-top:2px solid var(--ink)}
  .sheet{display:block;border-top:0;border-bottom:1px solid var(--line);padding-top:0}
  .sheet .nm{display:none}
  .sheet .tg-h{display:block}
  .sheet .sb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
  .sheet .sb>div{overflow:hidden;visibility:hidden;transition:visibility 0s .5s}
  .sheet.open .sb{grid-template-rows:1fr}
  .sheet.open .sb>div{visibility:visible;transition:none}
  .sheet .sb .say{margin-top:0}
  .sheet .runs{margin-bottom:22px}
  .sheet .grid{grid-template-columns:1fr;gap:18px}
  .icl .wrap{grid-template-columns:1fr}
}