/* Facilities (client 26-Oct-26, Tamer: "I told them we have a page for facilities"). All copy and figures come from the company
   profile (Enhanced Company Profile, slide 7 and the Palm City site tour, slides 20 to 25), photos from the same slides.
   Left out: the Cycling Day photo (old logo), the power diagram and the badges. Anatomy: an opening on Ink beside a framed reel,
   four ruled facts, the tour (chapters beside a large photo, the Where we work pattern), the resilience figures, the two-half close. */

/* ---------- opening ---------- */
.fa-o{background:var(--ink);color:var(--paper)}
.fa-o .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:center}
.fa-o h1{font-weight:700;font-size:clamp(36px,min(4.6vw,9svh),76px);line-height:1;letter-spacing:-.04em;max-width:11em}
.fa-o .lead{margin-top:clamp(16px,3svh,28px);color:#D9E6EE;max-width:30em}
.fa-o .act{margin-top:clamp(18px,3svh,30px)}
.fa-o .act .link{color:var(--paper)}
.fa-o .pic{position:relative;margin:0;height:min(66svh,620px);border-radius:var(--r);overflow:hidden;background:var(--ink)}
.fa-o .pic .reel{position:absolute;inset:0}
.fa-o .pic .film-ctrl{left:16px;bottom:16px;z-index:2;background:rgba(16,42,67,.66);border-color:rgba(247,245,240,.2)}
.fa-o .facts{list-style:none;margin:clamp(26px,5svh,48px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px);border-top:1px solid rgba(247,245,240,.35)}
.fa-o .facts li{padding:clamp(12px,2.2svh,18px) 0;border-bottom:1px solid rgba(247,245,240,.18)}
.fa-o .facts b{display:block;font-weight:600;font-size:clamp(16px,1.2vw,19px)}
.fa-o .facts span{display:block;margin-top:4px;color:#D9E6EE;font-size:15px;line-height:1.45}

/* ---------- the tour: a chapter at a time, its photos take turns, the chapters take turns while on screen ---------- */
.fa-t.scr{padding:clamp(40px,8svh,96px) 0}
.ft{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,3.4vw,64px);margin-top:clamp(26px,5svh,52px);align-items:stretch}
.ft-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.ft-list li{border-bottom:1px solid var(--line)}
.ft-list button{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;width:100%;padding:clamp(14px,2.2svh,20px) 4px clamp(14px,2.2svh,20px) 18px;border:0;background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.ft-list button::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:3px;border-radius:2px;background:var(--marine);transform:scaleY(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.ft-list button[aria-pressed="true"]::before{transform:scaleY(1)}
.ft-list small{grid-row:1/3;font-family:var(--mono);font-size:12.5px;color:var(--mid);padding-top:6px}
.ft-list b{font-weight:700;font-size:clamp(20px,min(1.8vw,3.6svh),28px);letter-spacing:-.025em;line-height:1.15;opacity:.55;transition:opacity .35s}
.ft-list button[aria-pressed="true"] b,.ft-list button:hover b{opacity:1}
.ft-list i{position:absolute;left:18px;right:4px;bottom:-1px;height:2px;background:var(--marine);transform:scaleX(0);transform-origin:0 50%}
.ft.run .ft-list button[aria-pressed="true"] i{animation:ftbar var(--dur,6s) linear forwards}
@keyframes ftbar{to{transform:scaleX(1)}}
.ft-list .pts{display:none;grid-column:2;margin:6px 0 0;padding:0;list-style:none;color:var(--mid);font-size:15.5px;line-height:1.5}
.ft-list button[aria-pressed="true"] .pts{display:block}
.ft-list .pts span{display:block;padding-left:16px;position:relative}
.ft-list .pts span::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--marine)}
.ft-stage{position:relative;min-height:clamp(380px,62svh,600px);border-radius:var(--r);overflow:hidden;background:var(--ink)}
.ft-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.1s ease,transform 6s linear}
.ft-stage img.on{opacity:1;transform:scale(1)}
.ft-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(16,42,67,.85) 0%,rgba(16,42,67,.2) 34%,rgba(16,42,67,0) 55%)}
.ft-cap{position:absolute;left:clamp(18px,2vw,30px);right:clamp(70px,6vw,90px);bottom:clamp(18px,3svh,30px);z-index:2;color:var(--paper);display:grid;gap:6px}
.ft-cap small{font-family:var(--mono);font-size:12.5px;color:#D1E1EA}
.ft-cap b{font-weight:700;font-size:clamp(24px,min(2.6vw,5svh),40px);letter-spacing:-.035em;line-height:1.05}
.ft-dots{position:absolute;right:clamp(18px,2vw,30px);top:clamp(18px,2vw,26px);z-index:2;display:flex;gap:6px}
.ft-dots span{width:8px;height:8px;border-radius:50%;background:rgba(247,245,240,.4);transition:background .3s,width .3s}
.ft-dots span.on{width:22px;border-radius:4px;background:var(--paper)}
.ft-ctl{position:absolute;right:clamp(16px,2vw,26px);bottom:clamp(18px,3svh,30px);left:auto;z-index:3}
.ft-ctl svg{width:12px;height:12px;fill:currentColor}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .ft-stage img{transition:none;transform:none}}

/* ---------- resilience: the profile's figures on Ink ---------- */
.fa-r{background:var(--ink);color:var(--paper)}
.fa-r .hx2 span{color:#D1E1EA}
.fa-r .figs{list-style:none;margin:clamp(28px,5svh,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--paper)}
.fa-r .figs li{padding:clamp(18px,3.4svh,30px) clamp(14px,1.6vw,26px) 0;border-left:1px solid rgba(247,245,240,.25)}
.fa-r .figs li:first-child{border-left:0;padding-left:0}
.fa-r .figs b{display:block;font-weight:700;font-size:clamp(34px,min(4vw,7svh),64px);letter-spacing:-.04em;line-height:1}
.fa-r .figs span{display:block;margin-top:10px;color:#D1E1EA;font-size:15.5px;line-height:1.45}
.fa-r .more{margin-top:clamp(22px,4svh,40px);color:#D1E1EA;max-width:46em;font-size:15.5px;line-height:1.6}

/* ---------- close: the two halves of About and CSR ---------- */
.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(--marine)}
.ab-x .w2{background:var(--ink)}
.ab-x h2{font-weight:700;font-size:clamp(30px,min(3.2vw,6svh),50px);line-height:1.02;letter-spacing:-.04em;max-width:11em}
.ab-x p{margin-top:16px;color:#D9E6EE;font-size:var(--lead);line-height:1.5;max-width:26em}
.ab-x .btn{margin-top:clamp(20px,3.6svh,34px)}
.ab-x .w1 :focus-visible{outline-color:var(--paper)}
.ab-x :focus-visible{outline-color:var(--violet-dark)}

@media (max-width:900px){
  .fa-o .wrap,.ft,.ab-x{grid-template-columns:1fr}
  .fa-o .pic{height:auto;aspect-ratio:4/3}
  .fa-o .facts{grid-template-columns:1fr}
  .ft-stage{min-height:0;aspect-ratio:4/3;order:-1}
  .fa-r .figs{grid-template-columns:1fr 1fr}
  .fa-r .figs li{border-left:0;padding-left:0;padding-bottom:18px}
}