/* Home, Industries (client 22-Oct-26: names only, the lines live on the Industries page). Each name is a ruled row that
   opens its sheet there, a numbered index and an arrow that slides in on hover */
.i3 ol li{padding:0;gap:0}
.i3 ol a{display:flex;align-items:baseline;gap:16px;padding:clamp(12px,2.3svh,20px) 4px;color:var(--ink);transition:background .25s,padding .25s}
.i3 ol a .n{flex:none;width:2.2em;font-family:var(--mono);font-size:12.5px;color:var(--mid)}
.i3 ol a b{flex:1;font-weight:600;font-size:clamp(19px,min(1.7vw,3.4svh),28px);letter-spacing:-.02em;line-height:1.15}
.i3 ol a svg{flex:none;width:18px;height:18px;fill:var(--marine);opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s}
.i3 ol a:hover{background:var(--pale);padding-left:14px}
.i3 ol a:hover svg,.i3 ol a:focus-visible svg{opacity:1;transform:none}
.i3 ol li:last-child,.i3 ol li:nth-child(5){border-bottom:1px solid var(--line)}

/* Home, Alexandria: the Palm City head office under an Ink wash, the clocks on top (client photo 22-Oct-26) */
.a3 .tzhalf{position:relative;overflow:hidden;align-items:flex-end;padding-top:clamp(200px,36svh,380px)}
.a3 .tzhalf > img{position:absolute;inset:0 0 auto 0;width:100%;height:calc(clamp(200px,36svh,380px) + 40px);object-fit:cover;object-position:50% 62%}
/* the head office shows clearly (owner 25-Oct-26): the building open at the top, the clocks on an Ink band below it */
.a3 .tzhalf::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,42,67,0) 0%,rgba(16,42,67,0) calc(clamp(200px,36svh,380px) - 90px),rgba(16,42,67,.96) calc(clamp(200px,36svh,380px) + 10px));z-index:1}
.a3 .tzhalf .tzp{position:relative;z-index:2}
/* the opening on Ink (client 25-Oct-26, darker from the palette): the bold line and the three clocks in Paper */
.o3.dark .lead b{color:var(--paper)}
.o3.dark .clk{border-top-color:rgba(247,245,240,.28);color:#A9BFCC}
.o3.dark .clk b{color:var(--paper)}
/* Home opening (client 25-Oct-26, their "Version B" made ours): a loop of the client's own places and people (Palm City,
   reception, courtyard, break room, the team, the floor) under an Ink wash, the approved words on the left, and on the right
   a dotted map where a greeting in each of the 16 languages starts at its city and travels into Alexandria. No agents at desks */
.hi{position:relative;overflow:hidden}
.hi-bg{position:absolute;inset:0;z-index:0;background:var(--ink)}
.hi-bg video{display:block;width:100%;height:100%;object-fit:cover}
.hi-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,42,67,.86) 0%,rgba(16,42,67,.66) 42%,rgba(16,42,67,.42) 100%)}
.hi>.wrap{position:relative;z-index:2}
.hi>.wrap>.tx{max-width:min(46%,640px)}
/* wide screens: the words sit low, so New York and its greeting have the upper left to themselves */
@media (min-width:901px){.hi{align-items:flex-end}.hi>.wrap{padding-bottom:clamp(8px,2svh,24px)}}
/* the dotted world spread across the opening, between the footage and the words */
.hi-map{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none}
.hi-map .land{fill:none;stroke:rgba(217,230,238,.4);stroke-linecap:round}
.hi-map .eg{fill:none;stroke:var(--violet-dark);stroke-linecap:round}
.hi-map .ln{fill:none;stroke:var(--marine-tint);stroke-linecap:round}
.hi-map .src{fill:var(--paper)}
.hi-map .w{font-family:inherit;font-weight:600;fill:var(--paper);paint-order:stroke;stroke:rgba(16,42,67,.75);stroke-linejoin:round}
.hi-map .lg{font-family:var(--mono);fill:#C9D6DF;paint-order:stroke;stroke:rgba(16,42,67,.8)}
.hi-map .dot{fill:#fff}
.hi-map .home,.hi-map .site{fill:var(--violet-dark)}
.hi-map .ring{fill:none;stroke:var(--violet-dark)}
.hi-map .lab{font-family:var(--mono);fill:var(--paper);paint-order:stroke;stroke:rgba(16,42,67,.8);stroke-width:3px}
.hi-map .lab.big{font-family:inherit;font-weight:700}
.hi .hi-ctrl{position:absolute;z-index:3;left:auto;right:clamp(16px,2.4vw,40px);bottom:clamp(16px,2.4svh,32px);background:rgba(16,42,67,.66);border-color:rgba(247,245,240,.2)}
@media (max-width:900px){
  /* phone: the map across the top, the words under it */
  .hi{padding-top:calc(min(58svh,420px) + 16px)}
  .hi-map{bottom:auto;height:min(58svh,420px)}
  .hi>.wrap>.tx{max-width:none}
  .hi-bg::after{background:linear-gradient(180deg,rgba(16,42,67,.35) 0%,rgba(16,42,67,.8) 55%)}
  .hi .hi-ctrl{top:calc(min(58svh,420px) - 52px);bottom:auto}
}
/* What we run (25-Oct-26): one accountable system, five operations. A line from under the heading branches to each service and sends a signal into each
   service as the section arrives, and into a service when it is opened */
.run3{position:relative}
.run3 .wrap{position:relative;z-index:1}
.hub{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.hub .ln{fill:none;stroke:var(--line);stroke-width:1.5}
.hub .lit{fill:none;stroke:var(--marine);stroke-width:2;stroke-linecap:round}
.hub .core{fill:var(--marine)}
.hub .ring{fill:none;stroke:var(--violet);stroke-width:2}
.hub .sig{fill:var(--violet)}
.hub .end{fill:var(--line)}
.acc button .t{transition:color .4s}
.acc li.got button .t{color:var(--marine)}
@media (max-width:900px){.hub{display:none}}