.pillars{--pillar-height:432px}
.pillars .section-heading{max-width:1080px;margin-bottom:56px}
.pillars .section-heading>p{margin-top:24px}
.pillar-structures{align-items:stretch;min-height:0;grid-auto-rows:1fr;gap:0}
.pillar{--pillar-accent:var(--color-graphite-500);display:grid;height:var(--pillar-height);min-width:0;grid-template-rows:220px auto minmax(58px,auto) 1fr;align-content:start;padding:0 18px 28px;border-top:1px solid var(--line);background:rgba(255,255,255,.22)}
.pillar-1{--pillar-accent:var(--area-accounting);--pillar-muted:var(--area-accounting-muted)}
.pillar-2{--pillar-accent:var(--area-administrative);--pillar-muted:var(--area-administrative-muted)}
.pillar-3{--pillar-accent:var(--area-technology);--pillar-muted:var(--area-technology-muted)}
.pillar-4{--pillar-accent:var(--area-legal);--pillar-muted:var(--area-legal-muted)}
.pillar-5{--pillar-accent:var(--brand-gold);--pillar-muted:rgba(184,154,92,.12)}
.pillar .roman{z-index:2;left:18px;top:15px;min-width:30px;padding:2px 7px;background:var(--color-off-white);border-left:2px solid var(--pillar-accent);color:var(--color-graphite-500);font-size:.92rem;line-height:1.4}
.pillar-outline{height:200px;margin:0 -1px 20px;border:0;border-bottom:1px solid rgba(85,93,104,.24);clip-path:none;background:none}
.pillar-outline svg{display:block;width:100%;height:100%;fill:none;stroke-linecap:square;stroke-linejoin:miter}
.pillar-outline path,.pillar-outline circle{vector-effect:non-scaling-stroke}
.pillar-grid{stroke:rgba(85,93,104,.1);stroke-width:.75}
.pillar-line{stroke:rgba(85,93,104,.4);stroke-width:1}
.pillar-accent{stroke:var(--pillar-accent);stroke-width:1.35}
.pillar-nodes circle{fill:var(--color-off-white);stroke:var(--pillar-accent);stroke-width:1.2;transition:fill .3s var(--ease)}
.pillar-line,.pillar-accent{stroke-dasharray:480;stroke-dashoffset:480;transition:stroke-dashoffset 1.1s var(--ease)}
.pillar.is-visible .pillar-line,.pillar.is-visible .pillar-accent{stroke-dashoffset:0}
.pillar h3{align-self:start;margin:0 0 10px;font-size:1.25rem}
.pillar p{min-height:0;margin:0;color:#415063;font-size:.82rem;line-height:1.55}
.pillar small{align-self:end;margin-top:14px;color:#66727e;font-size:.68rem;line-height:1.5;opacity:1;transform:none}
.pillars .pillar:hover,.pillars .pillar:focus-within{background:linear-gradient(to top,var(--pillar-muted),rgba(255,255,255,.4) 64%,transparent);box-shadow:inset 0 -2px 0 var(--pillar-accent);transform:translateY(-3px)}
.pillar:hover .pillar-nodes circle,.pillar:focus-within .pillar-nodes circle{fill:var(--pillar-accent)}
.pillar-structures:focus-visible{outline:2px solid var(--brand-gold);outline-offset:5px}
.pillar-pagination{display:none}

@media(max-width:1000px){
  .pillars{--pillar-height:438px}
  .pillar-structures{display:grid;grid-auto-flow:column;grid-auto-columns:46%;grid-template-columns:none;grid-auto-rows:1fr;gap:14px;overflow-x:auto;padding:2px 2px 14px;border-bottom:0;overscroll-behavior-inline:contain;scroll-behavior:smooth;scroll-padding-inline:2px;scroll-snap-type:inline mandatory;scrollbar-width:none;touch-action:pan-x pan-y}
  .pillar-structures::-webkit-scrollbar{display:none}
  .pillar{height:var(--pillar-height);padding-inline:18px;border:1px solid var(--line);border-radius:3px;scroll-snap-align:start;scroll-snap-stop:always}
  .pillar:last-child{border-right:1px solid var(--line)}
  .pillar h3{font-size:1.18rem}
  .pillar-pagination{display:flex;align-items:center;justify-content:center;gap:9px;min-height:34px;margin-top:14px}
  .pillar-pagination button{width:7px;height:7px;padding:0;border:1px solid rgba(85,93,104,.5);border-radius:999px;background:transparent;cursor:pointer;transition:width .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
  .pillar-pagination button[aria-current=true]{width:28px;border-color:var(--brand-gold);background:var(--brand-gold)}
  .pillar-pagination button:focus-visible{outline:2px solid var(--color-navy-700);outline-offset:4px}
}

@media(max-width:680px){
  .pillars{--pillar-height:500px}
  .pillars .section-heading{margin-bottom:38px}
  .pillar-structures{grid-auto-columns:86%;gap:12px;padding:3px 2px 16px}
  .pillar{width:auto;height:var(--pillar-height);grid-template-columns:1fr;grid-template-rows:auto 194px auto minmax(58px,auto) 1fr;padding:0 22px 28px;overflow:hidden;background-color:rgba(255,255,255,.68);background-image:linear-gradient(rgba(85,93,104,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(85,93,104,.035) 1px,transparent 1px);background-size:44px 44px;box-shadow:0 12px 32px rgba(31,42,55,.055),inset 0 2px 0 var(--pillar-accent)}
  .pillar .roman{position:static;grid-row:1;justify-self:start;min-width:0;margin:17px 0 1px;padding:0 0 3px;border-left:0;border-bottom:1px solid var(--pillar-accent);background:transparent;color:var(--pillar-accent);font-size:1rem}
  .pillar-outline{display:block;grid-row:2;height:184px;margin:0 0 17px;border-bottom-color:rgba(85,93,104,.2)}
  .pillar h3{grid-row:3;margin-bottom:10px;font-size:1.28rem}
  .pillar p{grid-row:4;font-size:.92rem;line-height:1.55}
  .pillar small{grid-row:5;margin-top:16px;font-size:.77rem;line-height:1.58}
  .pillar-pagination{margin-top:10px}
}

@media(max-width:359px){
  .pillars{--pillar-height:512px}
  .pillar-structures{grid-auto-columns:calc(100% - 10px)}
  .pillar{padding-inline:19px}
  .pillar-outline{height:178px}
}

@media(prefers-reduced-motion:reduce){
  .pillar,.pillar-line,.pillar-accent,.pillar-nodes circle{transition:none}
  .pillar-line,.pillar-accent{stroke-dashoffset:0}
  .pillars .pillar:hover,.pillars .pillar:focus-within{transform:none}
  .pillar-structures{scroll-behavior:auto}
  .pillar-pagination button{transition:none}
}
