/* ============================================================
   PRACTICE PAGES — security, development, consulting, training
   Loaded after css/site.css. The four pages behave as tabs: the
   hero's 2×2 of diamonds is the tab strip, and moving between
   pages is a cross-document view transition. Same three moves:
   ARRIVE — stage nodes, principle bullets, the next-practice tile;
   SETTLE — project cards deal outward from the centre;
   CLICK  — the chosen tab, the hub, a stage or principle you touch.
   ============================================================ */

html:has(.subnav){scroll-padding-top:84px}

/* ---------- Tabs between pages (the view transition lives in site.css) ---------- */

.hero--domain .hero__grid{padding-bottom:clamp(64px,8vw,104px)}
.hero--domain h1{font-size:clamp(36px,4.9vw,60px);line-height:1.02}
.crumb{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--muted-dark)}
.crumb .dia{--dia:6px}
.crumb a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.crumb a:hover{color:var(--ivory);text-decoration-color:var(--gold)}
.crumb [aria-current]{color:var(--gold)}

.nav__links [aria-current="page"]{background:var(--ink-2);color:var(--gold)}

.hero--domain .tile{background:var(--ink-2);color:var(--ivory)}
.hero--domain .tile:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.hero--domain .tile[aria-current="page"]{background:var(--gold);color:var(--ink);cursor:default}
.hero--domain .tile[aria-current="page"]:hover{transform:none;box-shadow:none}
/* The chosen tab settles with the others, then takes its quarter turn. */
.hero--domain .tile[aria-current="page"]{animation:tile-in .7s var(--ease) backwards,tile-turn .7s var(--ease) backwards;animation-delay:calc(.3s + var(--i) * 70ms),calc(.8s + var(--i) * 70ms)}
.hero--domain .tile[aria-current="page"] span{animation:tile-turn-label .7s var(--ease) backwards;animation-delay:calc(.8s + var(--i) * 70ms)}
a.hub:hover{color:inherit}
a.hub:focus-visible{border-radius:calc(var(--hub) * .2)}

/* Arriving from another practice page: no entrance, only the turn. */
.is-tab-switch .brand img,.is-tab-switch .hub,.is-tab-switch .hub img,.is-tab-switch .hero .tile{animation:none}
.is-tab-switch .hero--domain .tile[aria-current="page"]{animation:tile-turn .7s var(--ease) .12s backwards}
.is-tab-switch .hero--domain .tile[aria-current="page"] span{animation:tile-turn-label .7s var(--ease) .12s backwards}
/* Pressing the tab you are already on just turns it again. */
.hero--domain .tile.is-turning,.is-tab-switch .hero--domain .tile.is-turning{animation:tile-turn .7s var(--ease)}
.hero--domain .tile.is-turning span,.is-tab-switch .hero--domain .tile.is-turning span{animation:tile-turn-label .7s var(--ease)}

/* ---------- On-this-page bar: pinned where the hero meets the sheet ---------- */
.subnav{--h:50px;position:sticky;top:calc(12px + var(--h) / 2);z-index:20;display:flex;justify-content:center;height:0;padding-inline:var(--gutter)}
.subnav__in{display:flex;align-items:center;gap:2px;max-width:100%;height:var(--h);padding:5px;translate:0 -50%;overflow-x:auto;scrollbar-width:none;border:1px solid var(--ring);border-radius:999px;background:rgba(17,24,39,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.subnav__in::-webkit-scrollbar{display:none}
.subnav__name{display:flex;align-items:center;gap:9px;padding:0 14px 0 12px;font-size:13px;font-weight:800;color:var(--ivory);white-space:nowrap}
.subnav__name .dia{--dia:7px}
.subnav a{display:flex;align-items:center;gap:8px;height:100%;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted-dark);white-space:nowrap;transition:background-color .25s,color .25s}
.subnav a:hover{color:var(--ivory)}
.subnav a .dia{--dia:6px;transform:rotate(-135deg) scale(0);transition:transform .6s var(--ease)}
.subnav a[aria-current]{background:rgba(242,237,227,.08);color:var(--ivory)}
.subnav a[aria-current] .dia{transform:rotate(45deg) scale(1)}
.subnav :focus-visible{outline-offset:-2px;border-radius:999px}

/* ---------- Stages: a sequence of diamonds joined by a trace ---------- */
.stages{--n:46px;display:grid;grid-template-columns:repeat(var(--count,4),minmax(0,1fr));gap:clamp(20px,2.4vw,32px);margin-top:clamp(36px,5vw,60px)}
.stages>li{position:relative;display:flex;flex-direction:column;gap:12px}
.stages__node{position:relative;width:var(--n);height:var(--n);margin:calc(var(--n) * .21);border-radius:calc(var(--n) * .24);background:var(--ink);rotate:45deg;transition:rotate .7s var(--ease),scale .7s var(--ease),opacity .3s linear;transition-delay:calc(var(--i) * 140ms)}
.stages>li:first-child .stages__node{background:var(--gold)}
.stages__node::after{content:"";position:absolute;inset:32%;border-radius:3px;background:var(--gold)}
.stages>li:first-child .stages__node::after{background:var(--ink)}
.stages>li:hover .stages__node{rotate:135deg;transition-delay:0s}
/* The trace: three small diamonds out to the next node. */
.stages__link{position:absolute;left:calc(var(--n) * 1.6);right:calc(var(--n) * -.2);top:calc(var(--n) * .71 - 3px);display:flex;justify-content:space-evenly}
.stages__link i{width:6px;height:6px;background:var(--gold-text);transform:rotate(45deg);transition:transform .5s var(--ease);transition-delay:calc(var(--i) * 140ms + 260ms + var(--k) * 60ms)}
.stages__link i:nth-child(1){--k:0}.stages__link i:nth-child(2){--k:1}.stages__link i:nth-child(3){--k:2}
.stages h3{margin-top:4px;font-size:clamp(22px,2.2vw,28px);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.stages p{max-width:34ch;font-size:14px;line-height:1.6;color:var(--body);text-wrap:pretty}
.stages__svc{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.stages__svc b{display:block;font-size:14px;font-weight:700}
.stages__svc span{display:block;margin-top:1px;font-size:12.5px;line-height:1.5;color:var(--body)}
.js .stages[data-reveal]:not(.is-in) .stages__node{rotate:0deg;scale:.6;opacity:0}
.js .stages[data-reveal]:not(.is-in) .stages__link i{transform:rotate(-135deg) scale(0)}
.stages__loop{display:flex;align-items:center;gap:10px;margin-top:clamp(28px,4vw,44px);font-size:14px;font-weight:700}
.stages__loop .dia{--dia:7px;background:var(--gold-text)}
.stages+h3,.svc+h3{margin-top:clamp(48px,6vw,72px)}
.sub{font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.05;letter-spacing:-.02em}

/* ---------- Services: consulting's list, training's programmes ---------- */
.svc--cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(32px,5vw,52px)}
.svc--cards li{padding:22px 24px;border-radius:18px;background:var(--card);border:1px solid var(--card-border)}
.svc--cards b{font-size:17px}
.svc--cards span{font-size:13.5px}
.svc--cards .dia{--dia:8px;margin-top:7px;transition:transform .7s var(--ease)}
.svc--cards li:hover .dia{transform:rotate(135deg)}
.js .svc[data-reveal]:not(.is-in) .dia{transform:rotate(-135deg) scale(0)}
.svc[data-reveal].is-in .dia{animation:dia-in .6s var(--ease) backwards;animation-delay:calc(var(--n,0) * 60ms + 120ms)}

.prog{width:100%;margin-top:clamp(32px,5vw,52px);border-collapse:separate;border-spacing:0 8px;font-size:14px}
.prog th{padding:0 24px 4px;font-size:12px;font-weight:700;color:var(--gold-text);text-align:left}
.prog td{padding:20px 24px;background:var(--card);vertical-align:middle;transition:background-color .25s}
.prog td:first-child{border-radius:18px 0 0 18px}
.prog td:last-child{border-radius:0 18px 18px 0;width:34%;font-weight:600;color:var(--body)}
.prog tr:hover td{background:#fff}
.prog__name{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:800;letter-spacing:-.01em}
.prog__name .dia{--dia:8px;transition:transform .7s var(--ease)}
.prog tr:hover .prog__name .dia{transform:rotate(135deg)}
.prog small{display:block;margin:3px 0 0 22px;font-size:13px;font-weight:500;color:var(--body)}
.prog .is-custom td{background:var(--ink);color:var(--ivory)}
.prog .is-custom td:last-child,.prog .is-custom small{color:var(--muted-dark)}
.prog .is-custom:hover td{background:var(--ink-2)}
.prog tbody tr:nth-child(2){--n:1}.prog tbody tr:nth-child(3){--n:2}.prog tbody tr:nth-child(4){--n:3}.prog tbody tr:nth-child(5){--n:4}
.js .prog[data-reveal]:not(.is-in) .prog__name .dia{transform:rotate(-135deg) scale(0)}
.prog[data-reveal].is-in .prog__name .dia{animation:dia-in .6s var(--ease) backwards;animation-delay:calc(var(--n,0) * 70ms + 120ms)}

/* The platform bento, on an ivory sheet instead of the dark band. */
.sheet .plat--mid{background:var(--ink);color:var(--ivory)}
.sheet .plat--outline{border-color:var(--card-border)}
.sheet .plat--outline p{color:var(--body)}
.sheet .plat--ivory{background:var(--card);border:1px solid var(--card-border)}

/* ---------- Principles ---------- */
.tenets{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:clamp(32px,6vw,96px)}
.tenets__head{position:sticky;top:96px}
.tenets__list{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.tenets__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,26px);transition:opacity .5s linear,translate .8s var(--ease);transition-delay:calc(var(--i) * 110ms)}
.tenets__list .dia{--dia:14px;margin-top:clamp(9px,1vw,13px);transition:transform .8s var(--ease);transition-delay:calc(var(--i) * 110ms + 120ms)}
.tenets__list li:hover .dia{transform:rotate(135deg);transition-delay:0s}
.tenets__list h3{font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.tenets__list p{max-width:54ch;margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--muted-dark);text-wrap:pretty}
.js .tenets__list[data-reveal]:not(.is-in) li{opacity:0;translate:0 14px}
.js .tenets__list[data-reveal]:not(.is-in) .dia{transform:rotate(-135deg) scale(0)}

/* ---------- Past projects ----------
   A project is an <a class="proj"> once it has a page; until then
   the slot is an <article class="proj proj--slot">. */
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(32px,5vw,56px)}
.projects>li{display:flex;transition:opacity .35s linear,transform .7s var(--ease);transition-delay:calc(var(--i) * 80ms)}
.js .projects[data-reveal]:not(.is-in)>li{opacity:0;transform:translate(var(--fx,0),0) scale(.88)}
.proj{position:relative;isolation:isolate;overflow:hidden;display:flex;flex:1;flex-direction:column;gap:12px;min-height:250px;padding:26px;border-radius:20px;background:var(--ink);color:var(--ivory)}
.proj .shape{right:-56px;bottom:-56px;width:150px;height:150px;border:1px solid var(--ring);border-radius:28px;transition:transform .7s var(--ease)}
.proj__meta{font-size:12px;font-weight:700;color:var(--gold)}
.proj h3{font-size:clamp(22px,2vw,26px);font-weight:800;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.proj p{font-size:14px;line-height:1.55;color:var(--muted-dark);text-wrap:pretty}
.proj__more{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:13px;font-weight:700}
.proj__more .dia{--dia:8px;transition:transform .7s var(--ease)}
a.proj:hover{color:var(--ivory)}
a.proj:hover .shape{transform:rotate(135deg)}
a.proj:hover .proj__more .dia{transform:rotate(135deg)}
a.proj:focus-visible{outline-color:var(--ink);border-radius:20px}
.proj--slot{background:none;color:var(--ink);border:1.5px dashed var(--card-border)}
.proj--slot .shape{border-style:dashed;border-color:var(--card-border)}
.proj--slot .proj__meta{color:var(--gold-text)}
.proj--slot p,.proj--slot .proj__more{color:var(--body);font-weight:600}
.proj--slot .proj__more .dia{background:none;box-shadow:inset 0 0 0 1.5px var(--gold-text)}
.projects__note{margin-top:20px;font-size:14px;color:var(--body)}
.projects__note a{font-weight:700;color:var(--gold-text);text-decoration:underline;text-underline-offset:4px}
.projects__note a:hover{color:var(--ink)}

/* ---------- Closer: contact, then the next practice ---------- */
.closer{isolation:isolate;overflow:hidden;padding-block:clamp(56px,8vw,104px)}
.closer__block{right:-170px;top:-170px;width:420px;height:420px;border-radius:56px;background:var(--ink-2);transition:transform 1.3s var(--ease)}
.js .closer:has(.label[data-reveal]:not(.is-in)) .closer__block{transform:translate(24%,-24%) rotate(0deg)}
.closer__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,6vw,96px)}
.closer h2{font-size:clamp(34px,4.6vw,56px);line-height:.98}
.closer .lede{color:var(--muted-dark)}
.closer .hero__actions{margin-top:32px}

.next{--s:clamp(170px,19vw,240px);display:grid;place-items:center;width:calc(var(--s) * 1.4143);height:calc(var(--s) * 1.4143)}
.next__tile{display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .14);background:var(--gold);color:var(--ink);transform:rotate(45deg);transition:transform .7s var(--ease),background-color .25s}
.next__in{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transform:rotate(-45deg);transition:transform .7s var(--ease)}
.next small{font-size:12px;font-weight:700}
.next b{font-size:clamp(18px,1.9vw,24px);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.next .dia{--dia:8px;margin-top:4px;background:var(--ink)}
.next:hover{color:var(--ink)}
.next:hover .next__tile{transform:rotate(135deg);background:var(--ivory)}
.next:hover .next__in{transform:rotate(-135deg)}
.next:focus-visible{outline:none}
.next:focus-visible .next__tile{box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--gold)}
.js .next[data-reveal]:not(.is-in) .next__tile{transform:rotate(0deg) scale(.7);opacity:0}
.js .next[data-reveal]:not(.is-in) .next__in{transform:rotate(0deg)}
.next[data-reveal] .next__tile{transition:transform .9s var(--ease),opacity .4s linear,background-color .25s}

/* ---------- Narrow ---------- */
@media (max-width:1000px){
  .stages{--count:2 !important;row-gap:44px}
  .stages>li:nth-child(2n) .stages__link,.stages>li:last-child .stages__link{display:none}
  .projects{grid-template-columns:1fr 1fr}
  .projects>li:last-child{grid-column:span 2}
}
@media (max-width:860px){
  .tenets{grid-template-columns:1fr}
  .tenets__head{position:static}
  .closer__grid{grid-template-columns:1fr;justify-items:center}
  .closer__grid>div{justify-self:stretch}
}
@media (max-width:620px){
  .stages{--count:1 !important;--n:38px;row-gap:28px}
  .stages>li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:8px}
  .stages>li>:not(.stages__node){grid-column:2}
  .stages__node{grid-row:1/span 3;margin-top:calc(var(--n) * .25)}
  .stages__link{display:none}
  .svc--cards{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
  .projects>li:last-child{grid-column:auto}
  .js .projects[data-reveal]:not(.is-in)>li{transform:translateY(14px)}
  .prog thead{display:none}
  .prog,.prog tbody,.prog tr,.prog td{display:block}
  .prog tr{margin-bottom:8px}
  .prog td{padding:16px 20px}
  .prog td:first-child{border-radius:16px 16px 0 0;padding-bottom:4px}
  .prog td:last-child{width:auto;border-radius:0 0 16px 16px;padding-top:4px;padding-left:42px;font-size:13px}
  .subnav__name{display:none}
}