/* 4Design — 3D divisions hero. Uses the theme tokens from style.css (--fd-*). */
.fd3{position:relative;min-height:100vh;min-height:100svh;height:clamp(680px,100svh,980px);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;isolation:isolate}
.fd3.is-dragging{cursor:grabbing}
.fd3-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .8s ease}
.fd3.is-3d.is-ready .fd3-gl{opacity:1}
.fd3-fallback{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(420px,70vw);height:auto;z-index:0;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));transition:opacity .6s}
.fd3.is-3d.is-ready .fd3-fallback{opacity:0;pointer-events:none}
.fd3-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(18,52,59,.94) 0%,rgba(18,52,59,.72) 21%,rgba(18,52,59,0) 46%)}

/* top row: the site headline, kept as the page h1 */
.fd3-top{position:absolute;inset:calc(var(--fd-header-h) + 8px) 0 auto;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;pointer-events:none}
.fd3-top .fd-eyebrow{margin:0 0 6px;font-size:.78rem}
.fd3 h1{font-size:clamp(1.7rem,2.7vw,2.5rem);font-weight:400;margin:0;line-height:1.15;color:#fff}
.fd3 h1 em{color:var(--fd-mint);font-style:italic}
.fd3-tags{margin:0;color:var(--fd-mint);opacity:.85;font-size:.95rem;display:flex;gap:10px;white-space:nowrap}

/* title card */
.fd3-card{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:2;width:min(640px,calc(100% - 36px));text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.fd3-num{font-family:var(--fd-sans);font-size:.74rem;letter-spacing:.3em;color:var(--fd-mint);display:flex;gap:12px;align-items:center;direction:ltr;font-variant-numeric:tabular-nums}
.fd3-num::before,.fd3-num::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.fd3-title{margin:0;font-size:clamp(2rem,4.2vw,3.3rem);font-weight:500;color:#fff;text-wrap:balance}
.fd3-desc{margin:0;font-size:1.02rem;line-height:1.8;color:rgba(230,241,239,.85);max-width:46ch}
.fd3-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.fd3-actions .fd-btn{padding:12px 26px;font-size:.96rem}
.fd3-card.is-in .fd3-num{animation:fd3-rise .7s cubic-bezier(.2,.7,.2,1) both}
.fd3-card.is-in .fd3-title{animation:fd3-reveal .9s cubic-bezier(.2,.7,.2,1) .06s both}
.fd3-card.is-in .fd3-desc{animation:fd3-rise .8s cubic-bezier(.2,.7,.2,1) .16s both}
@keyframes fd3-reveal{from{clip-path:inset(0 0 100% 0);transform:translateY(18px);opacity:0}to{clip-path:inset(-20% 0 -20% 0);transform:none;opacity:1}}
@keyframes fd3-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* division tabs */
.fd3-tabs{position:absolute;inset:auto 0 0;z-index:2;padding:0 0 18px}
.fd3-tabs .fd-container{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.fd3-tabs button{background:none;border:0;padding:12px 2px 0;margin:0;cursor:pointer;color:rgba(230,241,239,.6);text-align:start;position:relative;min-height:44px;font:500 .9rem/1.3 var(--fd-sans);display:flex;gap:8px;align-items:baseline;min-width:0;transition:color .3s}
.fd3-tabs button::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:rgba(143,201,196,.22);border-radius:2px}
.fd3-tabs button b{position:absolute;top:0;inset-inline-start:0;height:2px;width:0;background:var(--fd-mint);border-radius:2px;box-shadow:0 0 10px rgba(143,201,196,.8)}
.fd3-tabs button span{font-size:.72rem;letter-spacing:.06em;opacity:.7;font-variant-numeric:tabular-nums}
.fd3-tabs button em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fd3-tabs button.is-on{color:#fff}
.fd3-tabs button.is-on span{color:var(--fd-mint);opacity:1}
.fd3-tabs button.is-past b{width:100%;opacity:.35;box-shadow:none}
.fd3-tabs button:hover{color:#fff}
.fd3-tabs button:focus-visible{outline:2px solid var(--fd-mint);outline-offset:2px}

@media (max-width:960px){
  .fd3-tags{display:none}
}
@media (max-width:760px){
  .fd3{height:auto;min-height:max(720px,100svh)}
  .fd3-top{inset:calc(var(--fd-header-h) - 4px) 0 auto}
  .fd3 h1{font-size:1.55rem}
  .fd3-card{bottom:84px}
  .fd3-desc{font-size:.95rem}
  .fd3-actions{gap:8px;flex-wrap:nowrap}
  .fd3-actions .fd-btn{padding:11px 16px;font-size:.86rem;gap:8px;white-space:nowrap}
  .fd3-tabs .fd-container{gap:6px}
  .fd3-tabs button{justify-content:center}
  .fd3-tabs button em{display:none}
  .fd3-fallback{top:45%}
}
@media (prefers-reduced-motion:reduce){.fd3-card.is-in *{animation:none!important}.fd3-gl{transition:none}}

/* clicking the centre icon scrolls to its division and lights it up */
.fd-detail.fd3-hit{animation:fd3-hit 2s ease}
@keyframes fd3-hit{0%,100%{box-shadow:0 0 0 0 rgba(143,201,196,0)}25%{box-shadow:0 0 0 3px var(--fd-mint),0 18px 40px rgba(18,52,59,.18)}}