/* ==========================================================
   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; }

/* ---------- Still 3D pictures on the service cards (assets/js/stills3d.js) ---------- */
.card--media > .svc-still { margin-inline: 0; }
.svc-still { position: relative; aspect-ratio: 3 / 2; margin-bottom: 10px; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #14506b 0%, #0a2f42 55%, #06202e 100%); }
:root[data-theme="light"] .svc-still { background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #dcecf3 60%, #c8dfe9 100%); }
.svc-still canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.svc-still.is-ready canvas { opacity: 1; }
.svc-still .ph { position: absolute; inset: 0; margin: 0; height: 100%; border-radius: 0; }
.svc-still.is-ready .ph { display: none; }