/* ==========================================================
   MoreConcepts homepage sections (loaded on index.php only)
   Uses the tokens from pill.css.
   ========================================================== */

/* ---------- Image placeholders ---------- */
.ph {
  position: relative; margin: 0; width: 100%; aspect-ratio: var(--ar, 16 / 10);
  border-radius: 20px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(18, 194, 240, .2), transparent 60%),
    linear-gradient(135deg, var(--raised), var(--surface));
  border: 1px dashed var(--line-strong);
}
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--hover-weak) 14px 15px);
}
.ph img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.ph:has(img) { border-style: solid; border-color: var(--line); }
.ph__cap {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 16px; text-align: center; color: var(--muted);
}
.ph__cap svg { color: var(--accent); }
.ph__cap strong { font: 600 14px/1.3 var(--display); color: var(--text); }
.ph__cap span { font-size: 12px; line-height: 1.4; color: var(--faint); overflow-wrap: anywhere; }
.ph--bg { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; height: 100%; border-radius: inherit; border: 0; }
.ph--logo { border-radius: 12px; }
.ph--logo .ph__cap { gap: 0; padding: 4px 8px; }
.ph--logo .ph__cap svg, .ph--logo .ph__cap span { display: none; }
.ph--logo .ph__cap strong { font-size: 12px; }
.ph--logo img { object-fit: contain; padding: 6px; }

/* ---------- Trust strip ---------- */
.trust { border-block: 1px solid var(--line); background: var(--marquee-bg); }
.trust__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); align-items: center; padding-block: 22px; }
.trust__item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.trust__item > svg { flex: none; color: var(--accent); }
.trust__item p { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.trust__item strong { font: 600 15px/1.3 var(--display); color: var(--text); }
.trust__item--logo { flex-direction: column; align-items: flex-start; gap: 8px; }
.trust__item--logo .ph { max-width: 150px; }

/* ---------- Service cards with images ---------- */
.cards--media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card--media { padding: 14px 14px 30px; }
.card--media .ph { margin-bottom: 10px; border-radius: 22px; }
.card--media > :not(.ph) { margin-inline: 16px; }
.card--media .card__icon { margin-top: -4px; }

/* ---------- Showcase (tabs + browser/phone frames) ---------- */
.showcase { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tab {
  position: relative; text-align: left; display: flex; flex-direction: column; padding: 20px 22px 20px 26px; border-radius: 24px;
  background: transparent; border: 1px solid transparent; color: var(--muted); transition: background-color .3s, border-color .3s, color .3s;
}
.tab::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--line); transition: background .3s; }
.tab[aria-selected="true"] { background: var(--glass); border-color: var(--glass-border); color: var(--text); }
.tab[aria-selected="true"]::before { background: var(--grad); }
.tab__title { font: 600 20px/1.25 var(--display); letter-spacing: -.015em; color: var(--text); }
.tab__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); font-size: 15px; line-height: 1.6; }
.tab__body > span { overflow: hidden; }
.tab[aria-selected="true"] .tab__body { grid-template-rows: 1fr; }
.tab[aria-selected="true"] .tab__body > span { padding-top: 8px; }
.tab:hover:not([aria-selected="true"]) { background: var(--hover-weak); }

.stage { position: relative; perspective: 1400px; padding-bottom: 6%; }
.stage__panel { position: relative; transform-style: preserve-3d; }
.stage__panel[hidden] { display: none; }
.frame { border-radius: 22px; border: 1px solid var(--glass-border); background: var(--surface); box-shadow: var(--glass-shadow); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--raised); }
.frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); opacity: .7; }
.frame__bar span { margin-left: 10px; flex: 1; max-width: 280px; padding: 4px 14px; border-radius: 999px; background: var(--bg); font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame .ph { border: 0; border-radius: 0; }
.phone {
  position: absolute; right: -1.5%; bottom: -8%; width: min(26%, 200px); padding: 8px; border-radius: 34px;
  background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transform: translateZ(60px);
}
.phone .ph { border-radius: 26px; }

/* ---------- Who we serve ---------- */
.serve { position: relative; overflow: hidden; isolation: isolate; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: -1; }
.fx--flow { opacity: .55; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%); }
.sectors { display: flex; gap: 12px; height: clamp(400px, 46vw, 520px); }
.sector {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  border-radius: 28px; border: 1px solid var(--glass-border); color: #EAF6FA; transition: flex .6s var(--ease), border-color .3s;
}
.sector.is-active { flex: 3.4; border-color: var(--card-hover-border); }
.sector .ph { background: linear-gradient(135deg, #0A3A50, #022A3C); border: 0; }
.sector .ph__cap strong { color: #EAF6FA; }
.sector .ph__cap span { color: #8DB4C6; }
.sector::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(1, 27, 40, .94), rgba(1, 27, 40, .2) 62%, rgba(1, 27, 40, .05)); }
.sector__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; width: 100%; min-width: 0; }
.sector__title { font: 600 clamp(17px, 1.6vw, 20px)/1.25 var(--display); letter-spacing: -.01em; }
.sector__more { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; color: #c3dbe6; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; }
.sector__more em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 600; color: var(--aqua); }
.sector.is-active .sector__more { max-height: 140px; opacity: 1; }

/* ---------- Featured work ---------- */
.work { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; align-items: stretch; }
.case { display: flex; flex-direction: column; padding: 12px 12px 28px; border-radius: 32px; transition: border-color .3s; position: relative; min-width: 0; }
.case:hover { border-color: var(--card-hover-border); }
.case__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 0; flex: 1; }
.case h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.015em; }
.case p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.case .link-arrow { margin-top: auto; padding-top: 6px; }
.tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--icon-bg); color: var(--icon-ink); font: 600 12.5px/1.2 var(--display); }
.more { margin-top: 28px; }

/* ---------- Why MoreConcepts ---------- */
.why { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 5vw, 64px); border-radius: 48px; align-items: center; }
.why .fx { opacity: .8; z-index: -1; }
.why__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.why__intro h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -.03em; }
.why__list { display: flex; flex-direction: column; }
.why__row { display: grid; grid-template-columns: minmax(150px, .8fr) 1.2fr; gap: 8px 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); transition: padding-left .35s var(--ease); }
.why__row:last-child { border-bottom: 1px solid var(--line); }
.why__row:hover { padding-left: 12px; }
.why__row h3 { font-size: 22px; letter-spacing: -.02em; }
.why__row p { color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---------- Upcoming classes ---------- */
.classes { margin-top: 16px; padding: clamp(22px, 3vw, 36px); border-radius: 32px; }
.classes h3 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 8px; }
.classes ul { display: flex; flex-direction: column; }
.classes li { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.classes li:first-child { border-top: 0; }
.date { display: flex; flex-direction: column; align-items: center; padding: 10px 8px; border-radius: 18px; background: var(--icon-bg); color: var(--muted); font-size: 12.5px; line-height: 1.2; text-align: center; }
.date b { font: 700 22px/1.1 var(--display); color: var(--icon-ink); }
.classes li > div { display: flex; flex-direction: column; min-width: 0; }
.classes li strong { font: 600 17px/1.3 var(--display); }
.classes li span { color: var(--muted); font-size: 14.5px; }
.classes .date { color: var(--muted); }

/* ---------- Pricing teaser ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 32px 28px; border-radius: 32px; }
.plan--main { background: var(--feature-bg); border-color: var(--feature-border); }
.plan h3 { font-size: 24px; letter-spacing: -.02em; }
.plan__for { color: var(--muted); font-size: 15px; line-height: 1.6; min-height: 3.2em; }
.plan ul { display: flex; flex-direction: column; gap: 12px; padding-block: 6px 12px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.plan .tick { flex: none; margin-top: 2px; color: var(--accent); }
.plan .btn { margin-top: auto; justify-content: center; }

/* ---------- Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.post .ph { transition: transform .5s var(--ease); }
.post:hover .ph { transform: translateY(-4px); }
.post h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.015em; }
.post .link-arrow { margin-top: auto; }

/* ---------- Leadership ---------- */
.team { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.team .section__head { margin-bottom: 0; align-items: flex-start; }
.team__people { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.person { display: flex; flex-direction: column; gap: 6px; }
.person .ph { margin-bottom: 10px; border-radius: 28px; }
.person h3 { font-size: 20px; letter-spacing: -.015em; }
.person p { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- CTA with 3D scene ---------- */
.fx--cta { z-index: -1; }
.section__head h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.section__head h2 .wi { display: inline-block; will-change: transform; }

/* ---------- Bento image ---------- */
.ph--bg .ph__cap { place-content: start end; justify-items: end; text-align: right; padding: 20px; }
.ph--bg .ph__cap svg { display: none; }
.bento__main { isolation: isolate; overflow: hidden; }
.bento__main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--glass-strong) 18%, transparent 78%); pointer-events: none; }
.bento__main .ph--bg { z-index: -2; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .work { grid-template-columns: 1fr 1fr; }
  .work .case:first-child { grid-column: 1 / -1; }
  .plans { grid-template-columns: 1fr; max-width: 560px; }
  .plan__for { min-height: 0; }
}
@media (max-width: 900px) {
  .trust__row { grid-template-columns: 1fr 1fr; }
  .showcase { grid-template-columns: 1fr; }
  .stage { padding-bottom: 10%; }
  .sectors { flex-direction: column; height: auto; }
  .sector, .sector.is-active { flex: none; min-height: 240px; width: 100%; min-width: 0; max-width: 100%; }
  .sector__more { max-height: none; opacity: 1; }
  .why, .team { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .cards--media { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .phone .ph__cap span { display: none; }
  .trust__row { grid-template-columns: 1fr; padding-block: 18px; gap: 18px; }
  .trust__item p { font-size: 16px; }
  .trust__item strong { font-size: 16px; }
  .work { grid-template-columns: 1fr; }
  .tab__title { font-size: 20px; }
  .tab__body, .case p, .why__row p, .plan li, .plan__for, .person p, .sector__more, .classes li span { font-size: 16px; }
  .why__row { grid-template-columns: 1fr; padding: 16px 0; }
  .why__row h3 { font-size: 20px; }
  .why { border-radius: 36px; }
  .classes li { grid-template-columns: 76px 1fr; }
  .classes li .btn { grid-column: 1 / -1; }
  .classes li strong { font-size: 17px; }
  .team__people { grid-template-columns: 1fr 1fr; gap: 12px; }
  .person h3 { font-size: 18px; }
  .phone { width: 30%; right: -2%; }
  .post h3, .case h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sector, .sector__more, .tab__body, .why__row, .post .ph { transition: none; }
}
.plan__price { font: 700 24px/1.2 var(--display); letter-spacing: -.02em; }

/* Illustrations blend into the page: no frame, soft glow, gentle motion */
.ph:has(img):not(.ph--bg):not(.ph--logo):not(.ph--shot) { background: none; border-color: transparent; overflow: visible; }
.ph:has(img):not(.ph--bg):not(.ph--logo)::before { display: none; }
.ph:has(img[src$="academy-certificate.webp"]), .ph:has(img[src*="/ncs-"]), .ph:has(img[src*="/app-"]), .frame .ph, .phone .ph { overflow: hidden; }
.ph:has(img[src$="academy-certificate.webp"]) { border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.sector .ph { background: none; }
@keyframes ph-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(.25deg); } }
@keyframes ph-glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
@media (prefers-reduced-motion: no-preference) {
  .ph:has(img):not(.ph--bg):not(.ph--logo):not(.frame .ph):not(.phone .ph):not(:has(img[src$="academy-certificate.webp"])):not(:has(img[src*="/ncs-"])):not(:has(img[src*="/app-"])) img { animation: ph-float 8s ease-in-out infinite; }
  .ph--bg img { animation: ph-float 10s ease-in-out infinite; transform-origin: center; }
  .ph:has(img):not(.ph--bg):not(.ph--logo):not(.frame .ph):not(.phone .ph)::after { content: ""; position: absolute; z-index: 1; left: 15%; right: 15%; top: 20%; bottom: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(44,229,238,.22), transparent); filter: blur(24px); animation: ph-glow 6s ease-in-out infinite; pointer-events: none; }
}

.ph:has(img) .ph__cap { display: none; }

/* ---------- Who we serve: floating discs, not cards ---------- */
.sectors { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px 26px; height: auto; padding: 14px 0 0; }
.sector, .sector.is-active {
  flex: 0 1 196px; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; overflow: visible; isolation: auto; border: 0; border-radius: 0; background: none; color: var(--text);
  min-height: 0; max-width: 100%; transition: transform .5s var(--ease);
}
.sector::after { display: none; }
.sector:nth-child(even) { margin-top: 38px; }
.sector .ph--bg, .sector .ph:has(img) {
  position: relative; inset: auto; z-index: auto; width: 150px; height: 150px; aspect-ratio: 1; flex: none; border-radius: 50%; overflow: hidden; border: 0;
  background: radial-gradient(circle at 30% 25%, rgba(44,229,238,.3), rgba(139,124,255,.16) 62%, transparent 74%);
  box-shadow: 0 0 0 1px var(--line), 0 16px 34px rgba(0,0,0,.16); transition: transform .5s var(--ease), box-shadow .4s;
}
.sector .ph--bg img { object-fit: cover; object-position: 50% 50%; transform: none; animation: none !important; }
.sector:hover .ph--bg, .sector.is-active .ph--bg, .sector:focus-visible .ph--bg { transform: translateY(-8px) scale(1.06); box-shadow: 0 0 0 2px var(--accent), 0 22px 44px rgba(0,0,0,.22); }
.sector__body { align-items: center; padding: 16px 0 0; gap: 6px; }
.sector__title { font: 600 16px/1.3 var(--display); }
.sector__more, .sector.is-active .sector__more { max-height: none; opacity: 1; font-size: 14px; line-height: 1.5; color: var(--muted); gap: 6px; align-items: center; }
.sector__more em { color: var(--accent); }
@media (max-width: 900px) {
  .sectors { flex-direction: row; gap: 26px 14px; }
  .sector, .sector.is-active { flex: 0 1 150px; width: auto; min-height: 0; }
  .sector:nth-child(even) { margin-top: 0; }
  .sector .ph--bg { width: 120px; height: 120px; }
}

/* ---------- Projects you can try: three equal cards ---------- */
.work { grid-template-columns: repeat(3, 1fr); }
.work .case:first-child { grid-column: auto; }
.case .ph { aspect-ratio: 16 / 10; }
.case h3 { min-height: 2.5em; }
@media (max-width: 900px) { .work { grid-template-columns: 1fr; } }

/* ---------- Pictures inside the phone and browser mock-ups: no frame, crisp ---------- */
.frame .ph:has(img), .phone .ph:has(img) { border: 0; background: none; }
.frame .ph img, .phone .ph img { object-fit: cover; object-position: top center; image-rendering: auto; animation: none !important; }
.phone .ph { aspect-ratio: 9 / 19; }

/* Who we serve on small screens: real cards, one per row */
@media (max-width: 700px) {
  .sectors { display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 6px; }
  .sector, .sector.is-active {
    flex: none; flex-direction: row; align-items: center; text-align: left; gap: 16px; width: 100%; padding: 14px 16px;
    border: 1px solid var(--glass-border); border-radius: 24px; background: var(--surface); box-shadow: var(--glass-shadow);
  }
  .sector:nth-child(even) { margin-top: 0; }
  .sector .ph--bg, .sector .ph:has(img) { width: 92px; height: 92px; flex: none; box-shadow: 0 0 0 1px var(--line); }
  .sector:hover .ph--bg, .sector.is-active .ph--bg { transform: none; box-shadow: 0 0 0 1px var(--line); }
  .sector__body { align-items: flex-start; padding: 0; min-width: 0; flex: 1; }
  .sector__title { font-size: 16px; }
  .sector__more, .sector.is-active .sector__more { align-items: flex-start; font-size: 14px; }
}

/* ---------- Sector pictures: calm at rest, lively when you land on one ---------- */
.sx-disc { display: block; }
.sx-disc .sx-art { display: block; width: 100%; height: 100%; }
.sector { --s: 1; --fy: -7px; --ps: 1.08; --sk: 5deg; --uy: -60px; --sw: 3px; }
.sector:hover, .sector:focus-visible, .sector:focus-within, .sector.is-active { --s: 2.4; --fy: -20px; --ps: 1.32; --sk: 16deg; --uy: -120px; }
@media (prefers-reduced-motion: no-preference) {
  .sx-art .fl    { animation: sx-fl calc(4.2s / var(--s)) ease-in-out infinite; }
  .sx-art .pu    { transform-box: fill-box; transform-origin: center; animation: sx-pu calc(2.4s / var(--s)) ease-in-out infinite; }
  .sx-art .sw    { transform-box: fill-box; transform-origin: 0% 50%; animation: sx-sw calc(2.2s / var(--s)) ease-in-out infinite; }
  .sx-art .tw    { animation: sx-tw calc(3s / var(--s)) ease-in-out infinite; }
  .sx-art .rise  { transform-box: fill-box; transform-origin: 50% 100%; animation: sx-rise calc(3.4s / var(--s)) ease-in-out infinite alternate; }
  .sx-art .dr    { stroke-dasharray: 420; animation: sx-dr calc(4.5s / var(--s)) ease-in-out infinite; }
  .sx-art .up    { animation: sx-up calc(3.6s / var(--s)) ease-out infinite; }
  .sx-art .flip  { transform-box: fill-box; transform-origin: center; animation: sx-flip calc(3.2s / var(--s)) ease-in-out infinite; }
  .sx-art .sway  { transform-box: fill-box; transform-origin: 50% 0%; animation: sx-sway calc(3.4s / var(--s)) ease-in-out infinite; }
  .sx-art .rot   { transform-origin: 200px 215px; animation: sx-rot calc(50s / var(--s)) linear infinite; }
  .sx-art .drift { animation: sx-drift calc(14s / var(--s)) ease-in-out infinite alternate; }
  .sx-art .stamp { transform-box: fill-box; transform-origin: center; animation: sx-stamp calc(3s / var(--s)) ease-in-out infinite; }
  .sector:hover .sx-disc, .sector:focus-visible .sx-disc, .sector.is-active .sx-disc { box-shadow: 0 0 0 2px var(--accent), 0 0 34px rgba(44,229,238,.45), 0 22px 44px rgba(0,0,0,.22); }
}
@keyframes sx-fl { 50% { transform: translateY(var(--fy)); } }
@keyframes sx-pu { 50% { transform: scale(var(--ps)); } }
@keyframes sx-sw { 50% { transform: skewY(var(--sk)) scaleX(.9); } }
@keyframes sx-tw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes sx-rise { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes sx-dr { 0% { stroke-dashoffset: 420; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes sx-up { 0% { transform: translateY(20px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(var(--uy)); opacity: 0; } }
@keyframes sx-flip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
@keyframes sx-sway { 50% { transform: rotate(calc(var(--sk) * 1.4)); } }
@keyframes sx-rot { to { transform: rotate(360deg); } }
@keyframes sx-drift { to { transform: translateX(calc(var(--fy) * -3)); } }
@keyframes sx-stamp { 0%, 55% { transform: scale(1.6); opacity: 0; } 70% { transform: scale(1); opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

/* Photos always get the same rounded corners as the placeholders */
.ph img { border-radius: inherit; }
.person .ph, .person .ph img { border-radius: 28px; }
.person .ph:has(img) { overflow: hidden !important; border-color: var(--line); }
.person .ph:has(img)::after { display: none !important; }
.person .ph img { animation: none !important; }
.ph--logo img { border-radius: 12px; }

/* Home: compact service cards */
.cards--media { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card--media { padding: 10px 10px 22px; }
.card--media .ph { margin-bottom: 6px; border-radius: 18px; aspect-ratio: 16 / 9 !important; }
.card--media > :not(.ph) { margin-inline: 12px; }
.card--media .card__icon { width: 40px; height: 40px; margin-top: 0; }
.card--media .card__icon svg { width: 20px; height: 20px; }
.card--media h3 { font-size: 17px; line-height: 1.3; margin-top: 8px; }
.card--media p { font-size: 14px; line-height: 1.55; margin-top: 6px; }
@media (max-width: 1100px) { .cards--media { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards--media { grid-template-columns: 1fr; } }
.card--media { gap: 0; align-content: start; }
.card--media .card__icon { margin-top: 10px; width: 36px; height: 36px; }
.card--media h3 { margin-top: 12px; }

/* Showcase: flat (no 3D perspective) so the screens stay pin-sharp; phone sits beside the browser, not over it */
.stage { perspective: none; padding-right: min(11%, 120px); }
.stage__panel { transform-style: flat; }
.phone { right: 0; bottom: -6%; width: min(25%, 220px); transform: none; padding: 7px; border-radius: 32px; }
.phone .ph { border-radius: 25px; }
.frame .ph img, .phone .ph img { image-rendering: auto; backface-visibility: hidden; }
@media (max-width: 700px) { .stage { padding-right: 0; } .phone { width: 30%; right: -2%; bottom: -8%; } }

/* Mockups: dark screens on the light page so they stand out; the light ones show in dark mode */
.mk { display: contents; }
.mk--dk { display: none; }
:root[data-theme="light"] .stage .mk--lt { display: none; }
:root[data-theme="light"] .stage .mk--dk { display: contents; }
:root[data-theme="light"] .stage .frame { background: #031c29; border-color: #0f3448; box-shadow: 0 30px 70px rgba(3, 28, 41, .35); }
:root[data-theme="light"] .stage .frame__bar { background: #062636; border-color: #0f3448; }
:root[data-theme="light"] .stage .frame__bar i { background: #3a6f89; }
:root[data-theme="light"] .stage .frame__bar span { background: #031c29; color: #8fb6c9; }
:root[data-theme="light"] .stage .phone { background: #031c29; border-color: #0f3448; box-shadow: 0 24px 60px rgba(3, 28, 41, .45); }