/* Destination pages.

   These are full-viewport pages, not panels on the monitor: the room is the
   front door, and stepping through it should feel like arriving somewhere with
   room to breathe. They keep the room's palette and typefaces so the trip reads
   as one place, but the scale is a website's, not an app's. */

.dest {
  --gut: clamp(22px, 4.6vw, 74px);
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #2A2436;
  font-family: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  background:
    radial-gradient(1200px 680px at 18% -8%, rgba(214, 199, 232, .55), transparent 62%),
    radial-gradient(980px 620px at 88% 4%, rgba(246, 219, 226, .5), transparent 60%),
    linear-gradient(178deg, #F6F2F7 0%, #F3EEF5 42%, #EFE9F2 100%);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .42s ease, transform .52s cubic-bezier(.22, .61, .36, 1);
}
.dest.is-open { display: block; }
.dest.is-in { opacity: 1; transform: none; }

/* a very quiet grain so the big flat fields do not read as plastic */
.dest::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(120, 96, 140, .05) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.dest-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 20px;
  padding: 20px clamp(22px, 5vw, 68px);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(247, 243, 248, .88), rgba(247, 243, 248, .5));
  border-bottom: 1px solid rgba(120, 96, 140, .1);
}
.dest-mark {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: 19px; letter-spacing: -.014em; color: #241F30;
  background: none; border: 0; padding: 4px 6px; margin-left: -6px;
  border-radius: 10px; cursor: pointer; transition: opacity .2s ease;
}
.dest-mark:hover { opacity: .62; }
.dest-mark span { color: #A85A6E; }
.back {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px 11px 15px; border-radius: 999px; cursor: pointer;
  font: 600 15px inherit; color: #443E55;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 6px 16px rgba(120, 96, 140, .1);
  transition: transform .2s cubic-bezier(.22, .61, .36, 1), box-shadow .2s, background .2s;
}
.back:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 12px 24px rgba(120, 96, 140, .16); }
.back svg { width: 17px; height: 17px; stroke: #443E55; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 68px); }
.dest-hero { padding: clamp(48px, 8vh, 96px) 0 clamp(30px, 5vh, 54px); }
.eyebrow {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .34em;
  text-transform: uppercase; color: #8A7F9C; margin-bottom: 20px;
}
.dest-title {
  margin: 0; font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(42px, 6.4vw, 82px); line-height: 1.02; letter-spacing: -.028em; color: #1C1726;
}
.lede {
  margin: 22px 0 0; max-width: 30em;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; color: #5A5268;
}
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 30px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #7A7089;
}
.hero-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: #6FA97A; box-shadow: 0 0 0 3px rgba(111, 169, 122, .2); }

/* ── sections ────────────────────────────────────────────────────────────── */
.sec { padding-bottom: clamp(46px, 7vh, 88px); }
.sec-hd { display: flex; align-items: baseline; gap: 18px; margin-bottom: 26px; }
.sec-hd h2 {
  margin: 0; font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(22px, 2.5vw, 31px); letter-spacing: -.018em; color: #1C1726;
}
.sec-hd .n { font: 600 13px ui-monospace, Menlo, monospace; letter-spacing: .1em; color: #9A8FAC; }
.hr { height: 1px; background: rgba(120, 96, 140, .13); margin: 0 0 clamp(34px, 5vh, 56px); }

/* tabs read as editorial, not as app pills */
.tabs { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 34px; border-bottom: 1px solid rgba(120, 96, 140, .13); }
.tab {
  position: relative; padding: 0 0 14px; background: none; border: 0; cursor: pointer;
  font: 600 16px inherit; color: #857A97; transition: color .2s;
}
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: #A85A6E; transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.tab:hover { color: #4B4360; }
.tab[aria-pressed="true"] { color: #1C1726; }
.tab[aria-pressed="true"]::after { transform: scaleX(1); }

/* ── content cards ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.card {
  display: flex; flex-direction: column; gap: 10px; padding: 28px 30px;
  border-radius: 24px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 2px 6px rgba(120, 96, 140, .04), 0 18px 40px rgba(120, 96, 140, .07);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .26s, background .26s;
}
a.card:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 8px 18px rgba(120, 96, 140, .1), 0 28px 60px rgba(120, 96, 140, .13); }
/* The head is a mark, then the name with its label under it. Side by side the
   label had nowhere to go — a long one ("School information system") ran past
   the card and was cut off. */
.card-top { display: flex; align-items: flex-start; gap: 13px; }
.card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.card-t { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -.014em; color: #1C1726; }

/* Every tool gets the same square, whether or not anyone has added its icon.
   Without one it carries the initial, so a card with no logo still reads as a
   card and the grid does not go ragged. */
.card-ic {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255, 255, 255, .66) center / cover no-repeat;
  border: 1px solid rgba(120, 96, 140, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 19px;
  color: #9A8FAC; line-height: 1;
}
.card-ic.has { background-color: #fff; border-color: rgba(120, 96, 140, .1); }
.card-ic.has > span { display: none; }
.card-d { font-size: 16px; line-height: 1.62; color: #5D5570; }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; font-weight: 600; color: #A85A6E; }
.card-foot svg { flex: none; width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .24s; }
a.card:hover .card-foot svg, a.door:hover .card-foot svg { transform: translate(3px, -3px); }

.tag {
  padding: 5px 12px; border-radius: 999px; flex: 0 1 auto; max-width: 100%;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.35; white-space: normal; overflow-wrap: anywhere;
  background: rgba(120, 96, 140, .09); color: #6C6280;
}
.tag.approved { background: rgba(111, 169, 122, .16); color: #3F6B48; }
.tag.limited,
/* rows written before the wording settled on approved/limited/restricted */
.tag.conditional { background: rgba(226, 176, 92, .2); color: #7A5518; }
.tag.restricted { background: rgba(206, 110, 110, .16); color: #8A3A3A; }

/* quick actions — the three big doors at the top of Get Help */
.doors { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 18px; }
.door {
  display: flex; flex-direction: column; gap: 8px; padding: 30px 32px; border-radius: 26px;
  text-decoration: none; color: inherit; cursor: pointer;
  background: linear-gradient(158deg, #fff 0%, rgba(255, 255, 255, .9) 50%, var(--c, rgba(219, 203, 243, .5)) 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 3px 8px rgba(120, 96, 140, .05), 0 22px 46px rgba(120, 96, 140, .1);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .26s;
}
.door:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(120, 96, 140, .12), 0 34px 66px rgba(120, 96, 140, .16); }
.door-t { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 23px; letter-spacing: -.014em; color: #1C1726; }
.door-d { font-size: 15px; line-height: 1.55; color: #5D5570; }

/* status strip */
.status { display: flex; flex-wrap: wrap; gap: 10px; }
.status-item {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px;
  font-size: 14px; color: #5A5268; background: rgba(255, 255, 255, .66); border: 1px solid rgba(255, 255, 255, .9);
}
.status-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #6FA97A; box-shadow: 0 0 0 3px rgba(111, 169, 122, .2); flex: none; }

/* FAQ — a reading list, so it gets a rule between rows rather than boxes */
.qa-list { border-top: 1px solid rgba(120, 96, 140, .13); }
.qa { border-bottom: 1px solid rgba(120, 96, 140, .13); }
.qa-q {
  width: 100%; display: flex; align-items: flex-start; gap: 22px; text-align: left; cursor: pointer;
  padding: 26px 4px; background: none; border: 0;
  font: 600 clamp(17px, 1.6vw, 20px)/1.45 inherit; color: #241F30;
  transition: color .2s;
}
.qa-q:hover { color: #A85A6E; }
.qa-q::-webkit-details-marker { display: none; }
.qa-q .sign { margin-left: auto; flex: none; width: 22px; height: 22px; position: relative; margin-top: 3px; }
.qa-q .sign::before, .qa-q .sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #A85A6E; border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .2s;
}
.qa-q .sign::before { width: 15px; height: 2px; }
.qa-q .sign::after { width: 2px; height: 15px; }
.qa[open] .qa-q .sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.qa-a { padding: 0 60px 30px 4px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.75; color: #5D5570; max-width: 62em; }

/* events — a dated editorial list */
.ev { display: flex; gap: clamp(18px, 3vw, 40px); padding: 26px 0; border-bottom: 1px solid rgba(120, 96, 140, .13); }
.ev-date {
  flex: none; width: 78px; text-align: center; padding: 12px 0; border-radius: 18px;
  background: rgba(168, 90, 110, .1);
}
.ev-m { display: block; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #A85A6E; }
.ev-d { display: block; font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 27px; line-height: 1.1; color: #1C1726; }
.ev-t { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.014em; color: #1C1726; }
.ev-meta { margin-top: 7px; font-size: 15px; color: #7A7089; }
.ev-d2 { margin-top: 10px; font-size: 16px; line-height: 1.6; color: #5D5570; max-width: 46em; }

/* people */
.people { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.person { display: flex; gap: 20px; align-items: flex-start; padding: 28px 30px; border-radius: 24px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 2px 6px rgba(120, 96, 140, .04), 0 18px 40px rgba(120, 96, 140, .07); }
.avatar {
  flex: none; width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 23px; color: #fff;
  background: linear-gradient(150deg, #C08096, #8E7BB0);
}
.person-n { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -.014em; color: #1C1726; }
.person-r { margin-top: 4px; font-size: 15px; color: #7A7089; }
.person-mail { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 600; color: #A85A6E; text-decoration: none; }
.person-mail:hover { text-decoration: underline; }

/* footer */
.dest-foot {
  margin-top: clamp(30px, 6vh, 70px); padding: 34px 0 60px;
  border-top: 1px solid rgba(120, 96, 140, .13);
  display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center;
  font-size: 14px; color: #857A97;
}
.dest-foot a { color: #A85A6E; text-decoration: none; font-weight: 600; }
.dest-foot a:hover { text-decoration: underline; }

.empty { padding: 60px 0; text-align: center; font-size: 17px; color: #857A97; }

.dest :focus-visible { outline: 3px solid #A85A6E; outline-offset: 3px; border-radius: 6px; }

@media (max-width: 640px) {
  .dest-hero { padding-top: 40px; }
  .card, .door, .person { padding: 22px 22px; }
  .qa-a { padding-right: 10px; }
  .ev { gap: 16px; }
  .ev-date { width: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .dest, .card, .door, .back, .tab::after, .qa-q .sign::before, .qa-q .sign::after { transition: none; }
}

/* ── Tech Team: the department chart, drawn ──────────────────────────────── */

.sec-org { padding-bottom: clamp(64px, 10vh, 120px); }

.org {
  --line: rgba(120, 96, 140, .3);
  position: relative;
  padding: clamp(10px, 1.6vw, 22px) 0 clamp(24px, 4vw, 48px);
  /* deliberately no surface of its own — a panel here read as pasted-in */
}


.org-top { display: flex; justify-content: center; position: relative; z-index: 1; }

/* the drop from the director to the bus */
.org-trunk {
  position: relative; z-index: 1;
  width: 2px; height: 42px; margin: 0 auto;
  background: linear-gradient(180deg, var(--line), rgba(120, 96, 140, .14));
  transform-origin: top; transform: scaleY(0);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1) .2s;
}
/* a pulse travels down it once the line is drawn */
.org-trunk::after {
  content: ""; position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%;
  background: #A85A6E; box-shadow: 0 0 12px rgba(168, 90, 110, .8); opacity: 0; top: 0;
}
.org.in .org-trunk { transform: scaleY(1); }
.org.in .org-trunk::after { animation: trunkPulse 1.5s ease-in .8s 2; }
@keyframes trunkPulse {
  0% { opacity: 0; top: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; top: 100%; }
}

.org-row {
  position: relative; z-index: 1; padding-top: 40px;
  display: grid; gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
}
.org-row::before {
  content: ""; position: absolute; top: 0; height: 2px;
  left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5));
  background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
  transform-origin: center; transform: scaleX(0);
  transition: transform .66s cubic-bezier(.22, .61, .36, 1) .55s;
}
.org.in .org-row::before { transform: scaleX(1); }

.card3d { position: relative; perspective: 1100px; }
.org-row > .card3d::before {
  content: ""; position: absolute; left: 50%; top: -40px; width: 2px; height: 40px;
  background: linear-gradient(180deg, var(--line), hsl(var(--h, 280) var(--s, 50%) 62% / .55));
  transform-origin: top; transform: scaleY(0);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1) calc(1s + var(--i, 0) * .07s);
}
.org.in .org-row > .card3d::before { transform: scaleY(1); }
/* the node where the drop meets the card */
.org-row > .card3d::after {
  content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px;
  margin-left: -4.5px; border-radius: 50%;
  background: hsl(var(--h, 280) var(--s, 50%) 58%);
  box-shadow: 0 0 0 4px hsl(var(--h, 280) var(--s, 50%) 58% / .16);
  transform: scale(0);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1) calc(1.28s + var(--i, 0) * .07s);
}
.org.in .org-row > .card3d::after { transform: scale(1); }

/* ── the card ── */
.card3d > summary { list-style: none; }
.card3d > summary::-webkit-details-marker { display: none; }

.c3-face {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: 18px 18px 16px; min-height: 0; cursor: pointer; overflow: hidden;
  border-radius: 24px;
  border: 1px solid hsl(var(--h, 280) var(--s, 50%) 88% / .9);
  background:
    radial-gradient(120% 80% at 50% 0%, hsl(var(--h, 280) var(--s, 50%) 97%) 0%, transparent 60%),
    linear-gradient(168deg, #fff 0%, hsl(var(--h, 280) var(--s, 50%) 98%) 44%, hsl(var(--h, 280) var(--s, 50%) 92%) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 6px hsl(var(--h, 280) 30% 40% / .06),
    0 18px 40px hsl(var(--h, 280) 30% 40% / .12);
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
  opacity: 0;
}
/* a coloured band down the left edge, so a glance sorts them */
.c3-face::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, hsl(var(--h, 280) var(--s, 50%) 62%), hsl(var(--h, 280) var(--s, 50%) 78%));
}
.org.in .c3-face {
  opacity: 1;
  animation: c3In .7s cubic-bezier(.19, 1, .3, 1) calc(1.34s + var(--i, 0) * .09s) both;
}
@keyframes c3In {
  from { opacity: 0; transform: perspective(1100px) translateY(30px) rotateX(-9deg) scale(.95); }
  to   { opacity: 1; transform: perspective(1100px) translateY(0) rotateX(0) scale(1); }
}

.c3-face:hover {
  border-color: hsl(var(--h, 280) var(--s, 50%) 72%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 22px hsl(var(--h, 280) 40% 40% / .16),
    0 40px 80px hsl(var(--h, 280) 45% 42% / .26);
}
.c3-sheen {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(320px 190px at var(--mx, 50%) -12%, rgba(255, 255, 255, .98), transparent 68%),
    radial-gradient(220px 160px at var(--mx, 50%) 118%, hsl(var(--h, 280) var(--s, 50%) 78% / .5), transparent 70%);
  opacity: 0; transition: opacity .32s ease;
}
.c3-face:hover .c3-sheen { opacity: 1; }

.c3-dept {
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: hsl(var(--h, 280) calc(var(--s, 50%) * .9) 38%);
  padding: 4px 9px; border-radius: 999px; margin-bottom: 10px;
  background: hsl(var(--h, 280) var(--s, 50%) 94%);
}
.c3-av {
  width: 44px; height: 44px; font-size: 16px; margin-bottom: 10px;
  background: linear-gradient(150deg, hsl(var(--h, 280) var(--s, 50%) 62%), hsl(calc(var(--h, 280) + 26) var(--s, 50%) 52%));
  box-shadow: 0 8px 18px hsl(var(--h, 280) 45% 45% / .3);
}
.c3-n {
  font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 19px;
  letter-spacing: -.016em; color: #1C1726; line-height: 1.2;
}
.c3-r { font-size: 13px; line-height: 1.45; color: #7A7089; margin-top: 2px; }
.c3-blurb { font-size: 12.5px; line-height: 1.5; color: #8A8098; margin-top: 10px; }
.c3-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.c3-tags i {
  font-style: normal; font-size: 11px; padding: 5px 9px; border-radius: 999px;
  background: hsl(var(--h, 280) var(--s, 50%) 95%);
  color: hsl(var(--h, 280) calc(var(--s, 50%) * .8) 36%);
}
.c3-more {
  margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--h, 280) calc(var(--s, 50%) * .9) 44%);
  display: inline-flex; align-items: center; gap: 6px;
}
.c3-more::after {
  content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.card3d[open] .c3-more::after { transform: rotate(225deg) translate(-2px, -2px); }

.card3d-lead { perspective: 1300px; max-width: 520px; }
.card3d-lead .c3-face {
  min-height: 0; padding: 22px 26px 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, #fff 0%, transparent 62%),
    linear-gradient(160deg, #fff 0%, hsl(var(--h) var(--s) 97%) 40%, hsl(var(--h) var(--s) 90%) 100%);
}
.card3d-lead .c3-av { width: 54px; height: 54px; font-size: 20px; }
.card3d-lead .c3-n { font-size: clamp(21px, 2.1vw, 26px); }
.card3d-lead .c3-r { font-size: 15px; }

/* ── the back ── */
.c3-back {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .46s cubic-bezier(.22, .61, .36, 1);
  overflow: hidden;
}
.card3d[open] .c3-back { grid-template-rows: 1fr; }
.c3-back > * { min-height: 0; }
.c3-back .who-contact { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 4px 0; }
.c3-back .duties { padding: 14px 4px 4px; display: flex; flex-direction: column; gap: 14px; }

.chip-link {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: hsl(var(--h, 280) calc(var(--s, 50%) * .9) 38%); text-decoration: none;
  background: hsl(var(--h, 280) var(--s, 50%) 94%);
  transition: background .2s ease, transform .2s ease;
}
.chip-link:hover { background: hsl(var(--h, 280) var(--s, 50%) 88%); transform: translateY(-1px); }

.duty { opacity: 0; transform: translateY(10px); }
.card3d[open] .duty {
  opacity: 1; transform: none;
  transition: opacity .4s ease calc(150ms + var(--i, 0) * 85ms),
              transform .5s cubic-bezier(.19, 1, .3, 1) calc(150ms + var(--i, 0) * 85ms);
}
.duty-t {
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: hsl(var(--h, 280) calc(var(--s, 50%) * .9) 42%);
  padding-bottom: 6px; border-bottom: 1px solid hsl(var(--h, 280) var(--s, 50%) 88%);
}
.duty ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.duty li { position: relative; padding-left: 15px; font-size: 14px; line-height: 1.55; color: #5D5570; }
.duty li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: hsl(var(--h, 280) var(--s, 50%) 62%);
}

@media (max-width: 1180px) { .org-row { grid-template-columns: repeat(3, minmax(0, 1fr)); --n: 3; } }
@media (max-width: 820px)  { .org-row { grid-template-columns: repeat(2, minmax(0, 1fr)); --n: 2; } }
@media (max-width: 560px) {
  .org { padding: 22px 14px 26px; }
  .org-row { grid-template-columns: 1fr; padding-top: 18px; --n: 1; }
  .org-row::before, .org-row > .card3d::before, .org-row > .card3d::after { display: none; }
  .org-trunk { height: 24px; }
  .c3-face { min-height: 0; }
  .card3d-lead { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .org-trunk, .org-row::before, .org-row > .card3d::before { transform: none; transition: none; }
  .org-row > .card3d::after { transform: scale(1); }
  .org-trunk::after { animation: none; }
  .c3-face { opacity: 1; animation: none; transition: none; }
  .duty { opacity: 1; transform: none; }
}

/* ── a page whose content is the point: small heading, full width ────────── */
.wrap-wide { max-width: 1560px; }
.hero-tight { padding: clamp(18px, 2.4vh, 30px) 0 clamp(10px, 1.4vh, 16px); }
.hero-tight .hero-meta { font-size: 13px; }
.hero-tight .dest-title { font-size: clamp(30px, 3.4vw, 46px); }
.hero-tight .lede { font-size: clamp(14.5px, 1.1vw, 16px); max-width: 58em; margin-top: 10px; }
.hero-tight .eyebrow { margin-bottom: 12px; }
.hero-tight .hero-meta { margin-top: 14px; }
.wrap-wide .hr { margin-bottom: clamp(10px, 1.6vh, 18px); }
.wrap-wide .sec-org { padding-bottom: clamp(40px, 6vh, 72px); }

/* The director's card reads across rather than down — it is one person, not a
   column, and standing it upright pushed the whole chart below the fold. */
.card3d-lead .c3-face {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "av dept" "av name" "av role" "av more";
  align-items: center;
  column-gap: 18px; row-gap: 0;
  padding: 20px 26px;
}
.card3d-lead .c3-av { grid-area: av; margin: 0; align-self: center; }
.card3d-lead .c3-dept { grid-area: dept; margin-bottom: 4px; justify-self: start; }
.card3d-lead .c3-n { grid-area: name; }
.card3d-lead .c3-r { grid-area: role; }
.card3d-lead .c3-more { grid-area: more; margin-top: 8px; padding-top: 0; }
.card3d-lead .c3-tags { display: none; }

/* Only the Studio switches these on; visitors never see them. */
.ci-add { display: none; }
body.ci-edit .ci-add {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  font: 600 14px 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  color: #A85A6E; background: rgba(168, 90, 110, .08);
  border: 1px dashed rgba(168, 90, 110, .45);
  transition: background .2s ease, transform .2s ease;
}
body.ci-edit .ci-add:hover { background: rgba(168, 90, 110, .16); transform: translateY(-1px); }

/* ── Ask CI: the Help Center's assistant ─────────────────────────────────── */

/* No card. The assistant is the page, not a widget sitting on it. */
.ask-host { margin: 0; }
.ask { position: relative; display: flex; flex-direction: column; }

.ask-intro {
  text-align: center; max-width: 40em; margin: 0 auto clamp(24px, 3.4vh, 40px);
  transition: opacity .35s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.ask-badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #A85A6E; background: rgba(168, 90, 110, .1);
}
.ask-h {
  margin: 16px 0 0; font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(34px, 4.4vw, 62px); letter-spacing: -.026em; color: #1C1726;
}
.ask-sub { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: #6C6280; }

/* ── the conversation ── */
.ask-log {
  display: flex; flex-direction: column; gap: 16px;
  max-height: 0; overflow-y: auto; overscroll-behavior: contain;
  transition: max-height .6s cubic-bezier(.22, .61, .36, 1), margin .4s ease;
  scrollbar-width: thin; scrollbar-color: rgba(120, 96, 140, .3) transparent;
}
.ask-log::-webkit-scrollbar { width: 8px; }
.ask-log::-webkit-scrollbar-thumb { background: rgba(120, 96, 140, .26); border-radius: 8px; }

.ask-msg {
  max-width: 74%; padding: 15px 20px; border-radius: 20px; font-size: 15.5px; line-height: 1.65;
  opacity: 0; transform: translateY(10px);
  transition: opacity .32s ease, transform .42s cubic-bezier(.19, 1, .3, 1);
}
.ask-msg.in { opacity: 1; transform: none; }
.ask-msg.me {
  align-self: flex-end; color: #fff; border-bottom-right-radius: 7px;
  background: linear-gradient(140deg, #A85A6E, #8E6E9E);
  box-shadow: 0 8px 20px rgba(150, 80, 110, .24);
}
.ask-msg.bot {
  align-self: flex-start; color: #3A3348; border-bottom-left-radius: 7px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 6px 18px rgba(120, 96, 140, .08);
}
.ask-msg.bot a { color: #A85A6E; font-weight: 600; }
/* An answer is a thing to scan. The assistant writes short structure and the
   chat renders it properly: a lead line, then dotted points or numbered steps,
   with the words that matter picked out. */
.ask-a > *:first-child { margin-top: 0; }
.ask-a > *:last-child { margin-bottom: 0; }
.ask-a p { margin: 0 0 11px; }
.ask-a h4 {
  margin: 16px 0 8px; font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #8A7F9C;
}
.ask-a strong { font-weight: 650; color: #241F30; }
.ask-a em { font-style: normal; font-weight: 550; color: #6B5F7C; }
.ask-a code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  padding: 1.5px 6px; border-radius: 6px; background: rgba(120, 96, 140, .1);
}
.ask-a ul, .ask-a ol { margin: 0 0 11px; padding: 0; list-style: none; }
.ask-a li { position: relative; padding-left: 21px; margin: 0 0 7px; }
.ask-a li:last-child { margin-bottom: 0; }
.ask-a ul > li::before {
  content: ""; position: absolute; left: 5px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: #C49BAC;
}
.ask-a ol { counter-reset: askstep; }
.ask-a ol > li { counter-increment: askstep; padding-left: 27px; }
.ask-a ol > li::before {
  content: counter(askstep); position: absolute; left: 0; top: .1em;
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, #B4707F, #9A7BA8);
}
/* the me-bubble is one line of the visitor's own words, not a document */
.ask-msg.me { white-space: pre-line; }
.ask-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(120, 96, 140, .12); }
.ask-rel > span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9A8FAC; }

.ask-msg.thinking { display: flex; gap: 5px; padding: 18px 20px; }
.ask-msg.thinking .dot { width: 7px; height: 7px; border-radius: 50%; background: #C0B4CE; animation: askDot 1.1s ease-in-out infinite; }
.ask-msg.thinking .dot:nth-child(2) { animation-delay: .16s; }
.ask-msg.thinking .dot:nth-child(3) { animation-delay: .32s; }
@keyframes askDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* ── the bar ── */
.ask-bar {
  position: relative;
  display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 26px;
  border-radius: 999px; background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(120, 96, 140, .16);
  box-shadow: 0 12px 34px rgba(120, 96, 140, .12);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.ask-bar:focus-within { border-color: rgba(168, 90, 110, .45); box-shadow: 0 16px 44px rgba(150, 80, 110, .18); }
/* Until someone types, the bar asks to be typed into: a caret blinking where
   their first letter will land, and a slow ring around the whole thing. */
.ask-bar.idle { animation: askBeckon 2.6s ease-in-out 1.2s infinite; }
@keyframes askBeckon {
  0%, 100% { box-shadow: 0 12px 34px rgba(120, 96, 140, .12), 0 0 0 0 rgba(168, 90, 110, .16); }
  50%      { box-shadow: 0 14px 38px rgba(120, 96, 140, .14), 0 0 0 8px rgba(168, 90, 110, 0); }
}
.ask-cue {
  position: absolute; left: 26px; top: 50%; width: 2px; height: 24px;
  margin-top: -12px; border-radius: 2px; background: #A85A6E;
  pointer-events: none; opacity: 0;
}
.ask-bar.idle .ask-cue { animation: askCaret 1.1s steps(1) infinite; }
@keyframes askCaret { 0%, 49% { opacity: .9; } 50%, 100% { opacity: 0; } }
.ask-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: 400 18px 'Pretendard Variable', Pretendard, system-ui, sans-serif; color: #2A2436;
  padding: 16px 0;
}
.ask-input::placeholder { color: #A79EB4; }
.ask-send {
  flex: none; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(140deg, #A85A6E, #8E6E9E);
  box-shadow: 0 8px 18px rgba(150, 80, 110, .28);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.ask-send:hover { transform: scale(1.07); }
.ask-send svg { width: 20px; height: 20px; }

.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; justify-content: center; }
.ask-chip {
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font: 500 13.5px 'Pretendard Variable', Pretendard, system-ui, sans-serif; color: #5D5570;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(120, 96, 140, .16);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.ask-chip:hover { background: #fff; border-color: rgba(168, 90, 110, .4); transform: translateY(-1px); }
.ask-chip.sm { font-size: 12.5px; padding: 7px 13px; }

/* ── asking turns the page into the conversation ─────────────────────────── */
/* The lockup leaves, the assistant takes the viewport. Frequently asked stays
   where it is, one scroll below. */
body.ask-open .dest-hero {
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
body.ask-open .doors,
body.ask-open .ask-intro,
body.ask-open .ask-chips,
body.ask-open .wrap > .hr { display: none; }

body.ask-open .ask {
  min-height: calc(100vh - 176px);       /* the bar sits at the bottom of the view */
  justify-content: flex-end;
  padding-top: 18px;
}
body.ask-open .ask-log {
  max-height: none; flex: 1; margin-bottom: 20px;
  padding-right: 6px;
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .ask-msg { max-width: 92%; }
  .ask-bar { padding-left: 18px; }
  body.ask-open .ask { min-height: calc(100vh - 150px); }
}
@media (prefers-reduced-motion: reduce) {
  .ask-log, .ask-intro, .ask-msg, body.ask-open .dest-hero { transition: none; }
  .ask-msg.thinking .dot, .ask-bar.idle, .ask-bar.idle .ask-cue { animation: none; }
  .ask-bar.idle .ask-cue { opacity: .9; }
}

/* ── Get Help opens as a cover, then steps aside ─────────────────────────── */
/* Stage one is the whole viewport: the lockup and nothing else. Stage two
   carries it to the far left and brings the assistant up in the middle.
   The move itself is run from armChat() as a FLIP — the two stages are
   different layouts, and a layout change does not animate on its own. */
.split {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 88px);
  padding: clamp(14px, 3vh, 40px) var(--gut);
}

/* stage one — the cover */
.split .dest-hero {
  width: min(880px, 100%);
  padding: 0; margin: 0;
}
.split .dest-title { font-size: clamp(48px, 8.2vw, 108px); }
.split .lede { max-width: 26em; font-size: clamp(17px, 1.55vw, 22px); margin-top: 26px; }
.split .hero-meta { margin-top: 26px; }
.split .eyebrow { margin-bottom: 22px; }
.split-r { display: none; }

/* stage two — the lockup pinned left, the assistant in the middle */
.split.open .dest-hero {
  position: absolute; left: var(--gut); top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 20vw, 292px);
  z-index: 2;
}
.split.open .dest-title {
  font-size: clamp(30px, 3.1vw, 44px);
  transition: font-size .95s cubic-bezier(.22, .61, .36, 1);
}
.split.open .lede {
  font-size: 15px; margin-top: 14px; max-width: none;
  transition: font-size .95s cubic-bezier(.22, .61, .36, 1);
}
.split.open .eyebrow { margin-bottom: 14px; font-size: 11.5px; }
.split.open .hero-meta { margin-top: 18px; font-size: 13px; }

/* Centred on the page itself, not on what is left of it — but never so wide
   that it runs into the lockup, which is why the width backs off the gutters. */
.split.open .split-r {
  display: block;
  width: min(760px, calc(100% - 2 * (clamp(200px, 20vw, 292px) + 34px)));
  min-width: 0;
  animation: askRise .9s cubic-bezier(.22, .61, .36, 1) .26s both;
}
@keyframes askRise {
  from { opacity: 0; transform: translateY(34px) scale(.965); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* a way out of the conversation */
.ask-back {
  display: none; align-self: flex-start; align-items: center; gap: 8px;
  margin-bottom: 16px; padding: 9px 16px 9px 12px; border-radius: 999px; cursor: pointer;
  font: 600 14px 'Pretendard Variable', Pretendard, system-ui, sans-serif; color: #5D5570;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(120, 96, 140, .16);
  transition: background .2s ease, transform .2s ease;
}
.ask-back:hover { background: #fff; transform: translateX(-2px); }
.ask-back svg { width: 16px; height: 16px; }
body.ask-open .ask-back { display: inline-flex; }

/* the conversation still takes the whole view */
body.ask-open .split { display: block; min-height: 0; padding-top: 10px; }
body.ask-open .split.open .split-r {
  width: min(920px, 100%); margin: 0 auto; animation: none;
}

@media (max-width: 940px) {
  .split { display: block; min-height: 0; padding-top: clamp(26px, 5vh, 54px); }
  .split .dest-hero { width: auto; }
  .split .dest-title { font-size: clamp(40px, 8vw, 62px); }
  .split.open .dest-hero { position: static; transform: none; width: auto; }
  .split.open .split-r { width: 100%; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .split.open .split-r { animation: none; }
  .split.open .dest-title, .split.open .lede { transition: none; }
}