/*
  Home › Featured Work: AI Systems preview
  Ported from the supplied design using the existing site font and category palette.
  Scope everything under .fw so the section can't affect the rest of Home or the AI Systems page.

*/

.fw {
  --fw-font: var(--font);

  --fw-bg: #14233B;
  --fw-grid: rgba(255, 255, 255, 0.028);
  --fw-surface: #1C2D4A;          /* category card */
  --fw-surface-active: #233A5E;   /* highlighted category card */
  --fw-panel: #1A2B47;            /* preview panel */
  --fw-border: #2E4466;
  --fw-line: #3A5272;             /* desktop connector, idle */
  --fw-trunk: #33507A;            /* mobile spine */
  --fw-hub: #1B2F4D;
  --fw-hub-border: #4A8590;

  --fw-text: #F2F5F9;
  --fw-text-2: #DCE4EE;
  --fw-muted: #B4C1D3;
  --fw-label: #9FB0C8;
  --fw-accent: #5FD3C4;
  --fw-accent-hover: #7FE0D3;
  --fw-on-accent: #0E1A2C;

  --fw-ease: 160ms ease;

  font-family: var(--fw-font);
  color: var(--fw-text);
  background-color: var(--fw-bg);
  background-image:
    linear-gradient(var(--fw-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fw-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  box-sizing: border-box;
  width: 100%;
}
.fw *, .fw *::before, .fw *::after { box-sizing: border-box; }
.fw p, .fw h2, .fw h3, .fw h4, .fw ul { margin: 0; }
.fw [hidden] { display: none !important; }

/* ---------- Shared ---------- */
.fw .fw-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-accent); }
.fw .fw-title { font-weight: 500; letter-spacing: -0.01em; }
.fw .fw-title em { font-style: normal; color: var(--fw-accent); }
.fw .fw-lead { color: var(--fw-muted); }
.fw .fw-note { color: var(--fw-label); }
.fw .fw-label { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fw-label); }
.fw .fw-count { font-size: 14px; line-height: 18px; color: var(--fw-accent); }

.fw .fw-chip {flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid transparent}
.fw .fw-chip svg {width:20px;height:20px}

.fw .fw-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 10px;
  background-color: var(--fw-accent); color: var(--fw-on-accent);
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background-color var(--fw-ease);
}
.fw .fw-cta:hover { background-color: var(--fw-accent-hover); color: var(--fw-on-accent); }
.fw .fw-cta svg { width: 18px; height: 18px; }

.fw .fw-card:focus-visible, .fw .fw-mbtn:focus-visible, .fw .fw-cta:focus-visible {
  outline: 2px solid var(--fw-accent); outline-offset: 3px;
}

/* Only one layout is in the DOM tree at a time for assistive tech: the other is display:none. */
.fw .fw-desktop { display: block; }
.fw .fw-mobile { display: none; }

/* ---------- Desktop (≥ 901px) ---------- */
.fw .fw-wrap {
  max-width: 1248px; margin: 0 auto; padding: 96px 32px 88px;
  display: flex; flex-direction: column; gap: 48px;
}
.fw .fw-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.fw .fw-title { font-size: 44px; line-height: 50px; }
.fw .fw-lead { font-size: 18px; line-height: 28px; }

.fw .fw-body { display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:start }
.fw .fw-diagram-col { flex: 0 0 796px; display: flex; flex-direction: column; gap: 20px; }
.fw .fw-diagram-col .fw-note { font-size: 14px; line-height: 20px; }

/* Fixed-size map. Card/line coordinates are absolute px inside this box. */
.fw .fw-map { position: relative; width: 796px; height: 420px; }
.fw .fw-lines { position: absolute; left: 0; top: 0; width: 796px; height: 420px; overflow: visible; fill: none; stroke-linecap: round; }
.fw .fw-lines path { stroke: var(--fw-line); stroke-width: 1.5; transition: stroke var(--fw-ease), stroke-width var(--fw-ease); }
.fw .fw-lines path.is-active { stroke: var(--icon-color); stroke-width: 2.5; }

.fw .fw-hub {
  position: absolute; left: 314px; top: 126px; width: 168px; height: 168px; border-radius: 50%;
  border: 1px solid var(--fw-hub-border); background-color: var(--fw-hub);
  box-shadow: 0 0 0 10px rgba(95,211,196,0.09), 0 0 0 11px rgba(95,211,196,0.28), 0 18px 40px rgba(4,10,22,0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.fw .fw-hub-title { font-size: 26px; line-height: 30px; font-weight: 500; }
.fw .fw-hub-meta { font-size: 14px; line-height: 19px; color: var(--fw-muted); }

.fw .fw-card {
  position: absolute; width: 232px; height: 64px; padding: 0 14px;
  display: flex; align-items: center; gap: 12px; border-radius: 14px;
  text-decoration: none; color: var(--fw-text);
  border: 1px solid var(--fw-border); background-color: var(--fw-surface);
  box-shadow: 0 6px 18px rgba(4,10,22,0.35);
  transition: border-color var(--fw-ease), background-color var(--fw-ease), box-shadow var(--fw-ease), opacity var(--fw-ease);
}
.fw .fw-card:hover { color: var(--fw-text); }
.fw .fw-card-label { font-size: 15px; line-height: 19px; font-weight: 500; }
.fw .fw-card.is-active {
  border-color: var(--icon-color); background-color: var(--fw-surface-active);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--icon-color) 22%,transparent), 0 12px 28px rgba(4,10,22,0.5);
}
.fw .fw-map.has-active .fw-card:not(.is-active) { opacity: 0.7; }

.fw .fw-preview {
  min-width: 0; min-height: 0; padding: 28px; border-radius: 16px;
  border: 1px solid var(--fw-border); background-color: var(--fw-panel);
  display: flex; flex-direction: column; gap: 20px;
}
.fw .fw-preview-body { display: flex; flex-direction: column; gap: 20px; }
.fw .fw-preview-head { display: flex; align-items: center; gap: 14px; }
.fw .fw-preview-head .fw-chip {flex-basis:44px;width:44px;height:44px;border-radius:12px}
.fw .fw-preview-head .fw-chip svg {width:22px;height:22px}
.fw .fw-preview-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fw .fw-preview h3 { font-size: 21px; line-height: 26px; font-weight: 500; }
.fw .fw-rule { height: 1px; background-color: var(--fw-border); }
.fw .fw-block { display: flex; flex-direction: column; gap: 6px; }
.fw .fw-block p, .fw .fw-preview-default p { font-size: 16px; line-height: 24px; color: var(--fw-text-2); }
.fw .fw-preview-default { display: flex; flex-direction: column; gap: 12px; }
.fw .fw-preview-default p.fw-muted { color: var(--fw-muted); }
.fw .fw-preview .fw-cta { margin-top: auto; }

/* ---------- Mobile (≤ 900px) ---------- */
@media (max-width: 900px) {
  .fw .fw-desktop { display: none; }
  .fw .fw-mobile { display: block; }
}

.fw .fw-mhub { display: flex; align-items: center; gap: 16px; }
.fw .fw-mhub-circle {
  flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%;
  border: 1px solid var(--fw-hub-border); background-color: var(--fw-hub);
  box-shadow: 0 0 0 6px rgba(95,211,196,0.09), 0 0 0 7px rgba(95,211,196,0.28);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 14px; line-height: 16px; font-weight: 500;
}
.fw .fw-mhub p { font-size: 14px; line-height: 20px; color: var(--fw-muted); }
.fw .fw-mstem { margin-left: 37px; width: 2px; height: 18px; background-color: var(--fw-trunk); }

.fw .fw-mlist { list-style: none; padding: 0; }
.fw .fw-mitem { position: relative; padding: 0 0 12px 58px; }
.fw .fw-mitem::before { /* spine */
  content: ""; position: absolute; left: 37px; top: 0; width: 2px; height: 100%; background-color: var(--fw-trunk);
}
.fw .fw-mitem:last-child::before { height: 32px; }
.fw .fw-mitem::after { /* elbow into the button */
  content: ""; position: absolute; left: 39px; top: 31px; width: 19px; height: 2px; background-color: var(--fw-trunk);
  transition: background-color var(--fw-ease);
}
.fw .fw-mitem.is-selected::after { background-color: var(--icon-color); }

.fw .fw-mbtn {
  width: 100%; min-height: 64px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; font-size: 15px; line-height: 19px; font-weight: 500; color: var(--fw-text);
  border-radius: 14px; cursor: pointer;
  border: 1px solid var(--fw-border); background-color: var(--fw-surface);
  transition: border-color var(--fw-ease), background-color var(--fw-ease), box-shadow var(--fw-ease);
}
.fw .fw-mbtn .fw-mlabel { flex: 1 1 auto; min-width: 0; }
.fw .fw-mbtn .fw-chev { flex: 0 0 18px; width: 18px; height: 18px; color: var(--fw-label); transition: transform var(--fw-ease); }
.fw .fw-mitem.is-selected .fw-mbtn {
  border-color: var(--icon-color); background-color: var(--fw-surface-active);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--icon-color) 22%,transparent);
}
.fw .fw-mitem.is-selected .fw-chev { transform: rotate(180deg); }

.fw .fw-mpreview {
  margin-top: 8px; padding: 16px; border-radius: 12px;
  border: 1px solid var(--icon-color); background-color: var(--fw-panel);
  display: flex; flex-direction: column; gap: 12px;
}
.fw .fw-mpreview[hidden] { display: none; }
.fw .fw-mpreview .fw-block { gap: 4px; }
.fw .fw-mpreview .fw-block p { font-size: 15px; line-height: 22px; color: var(--fw-text-2); }

.fw .fw-mfoot { display: flex; flex-direction: column; gap: 14px; }
.fw .fw-mfoot .fw-cta { min-height: 52px; }
.fw .fw-mfoot .fw-note { font-size: 13px; line-height: 19px; }

@media (prefers-reduced-motion: reduce) {
  .fw .fw-card, .fw .fw-mbtn, .fw .fw-cta, .fw .fw-lines path, .fw .fw-mitem::after, .fw .fw-chev { transition: none; }
}

/* Existing AI Systems category palette, scoped here without altering the explorer. */






.fw .fw-pos-0{left:0;top:46px}.fw .fw-pos-1{left:0;top:134px}.fw .fw-pos-2{left:0;top:222px}.fw .fw-pos-3{left:0;top:310px}
.fw .fw-pos-4{left:564px;top:90px}.fw .fw-pos-5{left:564px;top:178px}.fw .fw-pos-6{left:564px;top:266px}
.fw .fw-wrap{container-type:inline-size}
@container (min-width:1164px){.fw .fw-body{grid-template-columns:796px minmax(320px,1fr);align-items:stretch}.fw .fw-preview{min-height:420px}}
.fw .fw-mobile-hint{display:none}
.fw .fw-title,.fw .fw-preview h3,.fw .fw-fallback h3{color:var(--fw-text)}
.fw .fw-eyebrow{color:var(--fw-accent)}
.fw .fw-lead{color:var(--fw-muted)}
.fw .fw-note,.fw .fw-label{color:var(--fw-label)}
.fw .fw-card{color:var(--fw-text)}
.fw .fw-fallback ul{padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.fw .fw-fallback li{padding:24px;border:1px solid var(--fw-border);border-radius:14px;background:var(--fw-panel)}
.fw .fw-fallback h3{font-size:21px;line-height:1.3;margin-bottom:12px}
.fw .fw-fallback .fw-block{margin-top:18px}
.fw .fw-fallback>.fw-cta{margin:24px 0;max-width:400px}
.fw:not(.is-enhanced) .fw-desktop,.fw:not(.is-enhanced) .fw-mobile,.fw:not(.is-enhanced) .fw-desktop-hint,.fw:not(.is-enhanced) .fw-mobile-hint{display:none}
.fw.is-enhanced .fw-fallback{display:none}
@media(max-width:900px){
 .fw .fw-wrap{padding:56px 20px 64px;gap:32px}
 .fw .fw-head{gap:12px}.fw .fw-title{font-size:30px;line-height:36px}.fw .fw-lead{font-size:16px;line-height:24px}
 .fw .fw-mobile-hint{display:inline}.fw .fw-desktop-hint{display:none}.fw .fw-mfoot{margin-top:20px}
}
@media(max-width:400px){
 .fw .fw-mitem{padding-left:28px}.fw .fw-mitem::before{left:12px}.fw .fw-mitem::after{left:14px;width:14px}.fw .fw-mstem{margin-left:12px}
 .fw .fw-mbtn{padding:12px 10px;gap:8px}.fw .fw-mbtn .fw-chip{width:32px;height:32px;flex-basis:32px}
}
.fw .fw-card:focus-visible,.fw .fw-mbtn:focus-visible,.fw .fw-cta:focus-visible{outline:3px solid var(--fw-accent);outline-offset:4px}
@media(forced-colors:active){.fw .fw-card,.fw .fw-mbtn,.fw .fw-preview,.fw .fw-mpreview{border:1px solid CanvasText}.fw .fw-map.has-active .fw-card:not(.is-active){opacity:1}}

/* Keep category exploration distinct from the general overview. */
#featured-work .fw-overview-link{display:block;margin-top:14px;color:var(--signal);font-size:14px;text-underline-offset:4px}

/* Audit F-14 (2026-10-30): the category preview panel keeps one height across hover/focus/selection so the page does not jump;
   the tallest category (Pricing & Comparable Analysis / Market Research) measures ~535px at 1440. Phone/tablet are unaffected. */
@media (min-width: 901px) {
 .fw .fw-preview { min-height: 548px; box-sizing: border-box; }
}