/* ===========================================================================
   Case study styles. Palette and layout follow the AdventHealth case study
   decks: deep navy grounds, a cyan rule above every eyebrow, tinted stat
   cards, and a left-barred callout for the design principle.
   =========================================================================== */
:root{
  --navy-900:#082a47; --navy-800:#0b3a5e; --navy-700:#0f527e;
  --blue-600:#1b7bb8; --blue-500:#2b8fd0;
  --cyan:#00a3e0; --teal:#00857d; --green:#78be20;
  --ink:#0a2e4d; --body:#3e5060; --muted:#6b7c8c; --faint:#93a3b2;
  --tint:#eaf2fb; --card:#e3eef9; --line:#d3e2f2; --white:#ffffff;
  --r:10px; --r-lg:16px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important} }
body{margin:0; background:var(--white); color:var(--body);
  font-family:var(--font); font-size:16px; line-height:26px; -webkit-font-smoothing:antialiased}
p,h1,h2,h3,h4{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px}
code{font-family:var(--mono); font-size:.86em}

.wrap{max-width:1120px; margin:0 auto; padding:0 32px}
@media (max-width:720px){ .wrap{padding:0 20px} }

/* ---------------- top bar ---------------- */
.bar{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar-in{max-width:1120px; margin:0 auto; height:56px; padding:0 32px; display:flex; align-items:center; gap:12px}
.bar a{text-decoration:none; color:var(--muted); font-size:14px; font-weight:500; transition:color .12s}
.bar a:hover{color:var(--ink)}
.bar b{font-size:14px; font-weight:600; color:var(--ink)}
.bar .sep{color:var(--faint)}
.bar .grow{flex:1}
.bar .next{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r); color:var(--ink); background:var(--white)}
.bar .next:hover{background:var(--tint)}
@media (max-width:640px){ .bar .next span{display:none} }

/* ---------------- hero ---------------- */
.hero{position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#062440 0%,#0b3a5e 55%,#125a80 100%)}
.hero::after{content:""; position:absolute; right:-12%; top:-42%; width:820px; height:820px;
  border-radius:50%; background:radial-gradient(circle at 34% 34%, rgba(120,190,32,.20), rgba(0,163,224,.16) 45%, rgba(255,255,255,0) 70%)}
.hero-in{position:relative; z-index:1; padding-top:104px; padding-bottom:88px}
.hero .kicker{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#7fc8ec}
.hero h1{margin-top:20px; font-size:clamp(34px,5vw,54px); line-height:1.08; font-weight:700;
  letter-spacing:-.028em; color:#fff; max-width:17ch; text-wrap:balance}
.hero .lede{margin-top:22px; font-size:19px; line-height:31px; color:#c5dcec; max-width:62ch}
.hero .meta{display:grid; grid-template-columns:repeat(4,auto); gap:36px; justify-content:start; margin-top:44px}
.hero .meta dt{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#6ea9c9}
.hero .meta dd{margin:7px 0 0; font-size:15px; font-weight:600; color:#fff}
@media (max-width:820px){ .hero-in{padding-top:72px; padding-bottom:60px} .hero .meta{grid-template-columns:1fr 1fr; gap:22px 32px} }

/* ---------------- sections ---------------- */
section{padding:84px 0}
section.tinted{background:var(--tint)}
section.dark{background:linear-gradient(135deg,#062440 0%,#0b3a5e 60%,#0f527e 100%); color:#c5dcec}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--cyan)}
.eyebrow::before{content:""; display:block; width:44px; height:4px; border-radius:2px;
  background:var(--cyan); margin-bottom:16px}
h2{margin-top:14px; font-size:clamp(26px,3.4vw,36px); line-height:1.18; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); max-width:22ch; text-wrap:balance}
section.dark h2{color:#fff}
.lead{margin-top:20px; font-size:18px; line-height:30px; color:var(--body); max-width:74ch}
section.dark .lead{color:#c5dcec}
.body{margin-top:16px; max-width:70ch}
.body p + p{margin-top:16px}

/* two column split */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; margin-top:40px}
.split.wide-right{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
@media (max-width:900px){ .split,.split.wide-right{grid-template-columns:1fr; gap:32px} }

/* stat cards */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
.stat{padding:22px; background:var(--card); border-radius:var(--r-lg)}
.stat b{display:block; font-size:32px; line-height:1.1; font-weight:700; letter-spacing:-.02em; color:var(--blue-600)}
.stat.t b{color:var(--teal)}
.stat span{display:block; margin-top:8px; font-size:13px; line-height:19px; color:var(--body)}
section.dark .stat{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10)}
section.dark .stat b{color:#7fc8ec}
section.dark .stat span{color:#a9c6da}
@media (max-width:860px){ .stats{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .stats{grid-template-columns:1fr} }

/* callout */
.callout{margin-top:32px; padding:20px 24px; background:var(--white); border-left:4px solid var(--cyan);
  border-radius:0 var(--r) var(--r) 0; box-shadow:0 1px 3px rgba(10,46,77,.07)}
.callout.green{border-left-color:var(--green)}
.callout p{font-size:16px; line-height:26px; font-weight:600; color:var(--ink)}

/* flow chain */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px; align-items:stretch}
.flow .step{position:relative; padding:20px 18px; background:var(--card); border-radius:var(--r-lg); text-align:center}
.flow .step b{display:block; font-size:16px; font-weight:700; color:var(--ink)}
.flow .step span{display:block; margin-top:7px; font-size:13px; line-height:19px; color:var(--body)}
.flow .step:not(:last-child)::after{content:"→"; position:absolute; right:-13px; top:50%; transform:translateY(-50%);
  color:var(--cyan); font-size:15px; z-index:1}
@media (max-width:860px){ .flow{grid-template-columns:1fr 1fr} .flow .step:nth-child(2)::after{display:none} }
@media (max-width:460px){ .flow{grid-template-columns:1fr} .flow .step::after{display:none !important} }

/* two-up notes */
.notes{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px}
.note{padding:20px 22px; background:var(--card); border-left:4px solid var(--teal); border-radius:0 var(--r) var(--r) 0}
.note:nth-child(even){border-left-color:var(--cyan)}
.note b{display:block; font-size:15px; font-weight:700; color:var(--ink)}
.note span{display:block; margin-top:6px; font-size:14px; line-height:22px; color:var(--body)}
@media (max-width:820px){ .notes{grid-template-columns:1fr} }

/* feature list */
.feats{display:grid; gap:14px; margin-top:8px}
.feat{padding:18px 20px; background:var(--card); border-radius:var(--r-lg)}
.feat b{display:block; font-size:17px; font-weight:700; color:var(--teal)}
.feat.b b{color:var(--blue-600)}
.feat span{display:block; margin-top:5px; font-size:14px; line-height:21px; color:var(--body)}

/* figures */
figure{margin:0}
figure img{border-radius:var(--r-lg); box-shadow:0 2px 6px rgba(10,46,77,.08), 0 18px 44px -22px rgba(10,46,77,.30)}
figure figcaption{margin-top:14px; font-size:13px; line-height:20px; color:var(--faint)}
.figfull{margin-top:44px}
.figfull img{width:100%}

/* engineering block */
.eng{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px}
.eng .card{padding:24px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg)}
section.tinted .eng .card{background:var(--white)}
.eng .card b{display:block; font-size:16px; font-weight:700; color:var(--ink)}
.eng .card p{margin-top:8px; font-size:14.5px; line-height:23px; color:var(--body)}
@media (max-width:820px){ .eng{grid-template-columns:1fr} }

.code{margin-top:36px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#082a47}
.code .hd{display:flex; align-items:center; gap:10px; padding:11px 18px; background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.09)}
.code .hd .lang{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#7fc8ec}
.code .hd .tag{margin-left:auto; font-size:11px; color:#8fa9bd}
.code pre{margin:0; padding:22px; overflow-x:auto; font-family:var(--mono); font-size:12.5px; line-height:21px; color:#d7e6f2}
.code .c{color:#6f8ba3} .code .k{color:#7fc8ec} .code .s{color:#9fd88a} .code .f{color:#ffd479}
.code + .cap{margin-top:12px; font-size:13px; line-height:20px; color:var(--faint)}

/* takeaway */
.takeaway{margin-top:40px; padding-top:32px; border-top:1px solid rgba(255,255,255,.16)}
.takeaway .eyebrow{color:#7fc8ec}
.takeaway .eyebrow::before{background:#7fc8ec}
.takeaway p{margin-top:16px; font-size:17px; line-height:29px; color:#c5dcec; max-width:76ch}

/* footer nav */
.endnav{padding-top:56px; padding-bottom:88px; border-top:1px solid var(--line)}
.endnav a{display:flex; align-items:center; gap:16px; text-decoration:none; padding:24px;
  border:1px solid var(--line); border-radius:var(--r-lg); transition:background .14s, transform .14s, box-shadow .14s}
.endnav a:hover{background:var(--tint); transform:translateY(-2px); box-shadow:0 12px 28px -18px rgba(10,46,77,.4)}
.endnav .lbl{font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
.endnav .ttl{margin-top:6px; font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.015em}
.endnav .arrow{margin-left:auto; color:var(--cyan)}
.credit{padding-bottom:64px; font-size:13px; line-height:21px; color:var(--faint); max-width:80ch}

/* ===========================================================================
   UX case studies. Same chrome and section rhythm as the AdventHealth pages,
   but a light hero and a per-project accent instead of the client's navy.
   Set --accent / --accent-soft on the page root to retint a whole study.
   =========================================================================== */
.hero.light{background:var(--tint); color:var(--ink)}
.hero.light::after{background:radial-gradient(circle at 34% 34%,
  color-mix(in srgb, var(--accent, #00a3e0) 22%, transparent),
  color-mix(in srgb, var(--accent, #00a3e0) 10%, transparent) 45%, rgba(255,255,255,0) 70%)}
.hero.light .kicker{color:var(--accent, #00a3e0)}
.hero.light h1{color:var(--ink)}
.hero.light .lede{color:var(--body)}
.hero.light .meta dt{color:var(--faint)}
.hero.light .meta dd{color:var(--ink)}
.hero.light .meta{grid-template-columns:repeat(3,auto)}
@media (max-width:820px){ .hero.light .meta{grid-template-columns:1fr 1fr} }

/* per-project accent applied to the shared bits */
.acc .eyebrow{color:var(--accent)}
.acc .eyebrow::before{background:var(--accent)}
.acc .callout{border-left-color:var(--accent)}
.acc .flow .step:not(:last-child)::after{color:var(--accent)}
.acc .stat b{color:var(--accent)}
.acc .endnav .arrow{color:var(--accent)}

/* context block: role, timeline, tools */
.ctx{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px}
.ctx div{padding:20px 22px; background:var(--card); border-radius:var(--r-lg)}
.ctx dt{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.ctx dd{margin:10px 0 0; font-size:15px; line-height:24px; color:var(--ink); font-weight:500}
@media (max-width:760px){ .ctx{grid-template-columns:1fr} }

/* comparison cards with pros and cons */
.cmp{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px}
.cmp article{padding:24px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg)}
.cmp h3{font-size:17px; font-weight:700; color:var(--ink)}
.cmp .d{margin-top:8px; font-size:14px; line-height:22px; color:var(--body)}
.cmp .pc{margin-top:18px}
.cmp .pc b{display:block; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
.cmp .pc ul{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.cmp .pc li{position:relative; padding-left:18px; font-size:14px; line-height:21px; color:var(--body)}
.cmp .pc li::before{content:""; position:absolute; left:2px; top:9px; width:6px; height:2px; border-radius:1px; background:var(--teal)}
.cmp .pc.con li::before{background:#d0736f}
@media (max-width:860px){ .cmp{grid-template-columns:1fr} }

/* how-might-we cards */
.hmw{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px}
.hmw div{padding:22px 24px; background:var(--card); border-radius:var(--r-lg)}
.hmw b{display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent, var(--cyan))}
.hmw p{margin-top:10px; font-size:15px; line-height:24px; color:var(--body)}
@media (max-width:860px){ .hmw{grid-template-columns:1fr} }

/* is / is not */
.dual{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px}
.dual section{padding:24px; border-radius:var(--r-lg); background:var(--card)}
.dual .no{background:var(--white); border:1px solid var(--line)}
.dual h3{font-size:16px; font-weight:700; color:var(--ink)}
.dual ul{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.dual li{position:relative; padding-left:20px; font-size:14.5px; line-height:22px; color:var(--body)}
.dual li::before{content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:99px; background:var(--teal)}
.dual .no li::before{background:var(--faint)}
@media (max-width:760px){ .dual{grid-template-columns:1fr} }

/* insight list */
.insights{display:grid; gap:12px; margin-top:32px}
.insight{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start;
  padding:18px 22px; background:var(--card); border-radius:var(--r-lg)}
.insight .n{font-size:13px; font-weight:700; color:var(--accent, var(--cyan)); font-variant-numeric:tabular-nums; padding-top:2px}
.insight b{font-weight:700; color:var(--ink)}
.insight span{color:var(--body)}

/* image galleries */
.gal{display:grid; gap:18px; margin-top:40px}
.gal.two{grid-template-columns:1fr 1fr}
.gal.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){ .gal.two,.gal.three{grid-template-columns:1fr} }
.gal figcaption{margin-top:12px}

/* external link button */
.ext{display:inline-flex; align-items:center; gap:9px; margin-top:28px; height:42px; padding:0 20px;
  border-radius:var(--r); background:var(--ink); color:#fff; text-decoration:none;
  font-size:14.5px; font-weight:600; transition:opacity .14s}
.ext:hover{opacity:.86}