/* CegiTech — About me (portfolio) · V8.0
 * The portfolio keeps its own structure (sidebar, panes, case studies, tools,
 * screenshot view) and is restyled into the CegiTech dark/cyan system. */

body[data-page="about"] { background: var(--ink-1); }
.pf-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); max-width: 1480px; margin: 0 auto; padding-top: var(--nav-h); min-height: 100vh; }

/* Sidebar ------------------------------------------------------------ */
.pf-side { position: relative; border-right: 1px solid var(--line); }
.pf-side-in { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.6rem 1.1rem 1.4rem 1.4rem; scrollbar-width: thin; }
.pf-profile-mini { display: flex; align-items: center; gap: .85rem; padding: .7rem; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(30, 159, 232, .12), rgba(255, 255, 255, .015)); transition: border-color .25s; }
.pf-profile-mini:hover { border-color: var(--line-3); }
.pf-mini-avatar { position: relative; width: 46px; height: 54px; flex: none; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(67, 232, 255, .35), #0b1a2c 70%); }
.pf-mini-avatar img { position: absolute; left: 50%; bottom: 0; width: 120%; max-width: none; transform: translateX(-50%); }
.pf-profile-mini strong { display: block; font-size: .92rem; line-height: 1.25; }
.pf-profile-mini > span > span { display: block; font-size: .76rem; color: var(--tx-3); margin-top: .15rem; }
.pf-nav-label { margin: .6rem 0 -.4rem .7rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.pf-navigation { display: grid; gap: .15rem; }
.pf-nav { position: relative; display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: 10px; font-size: .92rem; font-weight: 500; color: var(--tx-2); transition: background .2s, color .2s; }
.pf-nav svg { width: 17px; height: 17px; flex: none; color: var(--tx-3); transition: color .2s; }
.pf-nav:hover { background: rgba(255, 255, 255, .04); color: var(--tx); }
.pf-nav[aria-current="page"] { background: rgba(30, 159, 232, .12); color: var(--tx); }
.pf-nav[aria-current="page"] svg { color: var(--cy); }
.pf-nav[aria-current="page"]::before { content: ""; position: absolute; left: -1.4rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--cy); }
.pf-side-foot { margin-top: auto; }
.pf-side-bottom { padding: 1rem .2rem 0 .7rem; border-top: 1px solid var(--line); font-size: .78rem; line-height: 1.55; color: var(--tx-3); }
.pf-side-bottom strong { display: block; margin-bottom: .45rem; font-family: var(--f-display); font-size: 1.05rem; line-height: 1.15; letter-spacing: -.01em; color: var(--tx); }
.pf-cv { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem .8rem; border-radius: 10px; border: 1px solid rgba(67, 232, 255, .3); color: var(--cy); font-weight: 600; font-size: .86rem; }
.pf-cv svg { width: 17px; height: 17px; }
.pf-cv:hover { background: rgba(67, 232, 255, .08); }

/* Main column -------------------------------------------------------- */
.pf-main { min-width: 0; }
.pf-topbar { position: sticky; top: var(--nav-h); z-index: 20; display: flex; align-items: center; gap: 1rem; min-height: 58px; padding: .55rem clamp(1.1rem, 3vw, 3rem); border-bottom: 1px solid var(--line); background: rgba(7, 13, 23, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pf-back { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .35rem .85rem .35rem .65rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .85rem; font-weight: 600; color: var(--tx); transition: background .2s, border-color .2s; }
.pf-back svg { width: 16px; height: 16px; }
.pf-back:hover { background: rgba(255, 255, 255, .06); border-color: var(--line-3); }
.pf-crumb { display: flex; align-items: center; gap: .55rem; min-width: 0; margin: 0; font-size: .85rem; color: var(--tx-3); }
.pf-crumb strong { color: var(--tx); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-crumb-sep { opacity: .5; }
.pf-concept { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.pf-cv-top { display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .42rem .7rem; border-radius: 999px; border: 1px solid rgba(67, 232, 255, .3); color: var(--cy); font-size: .8rem; font-weight: 600; }
.pf-cv-top svg { width: 15px; height: 15px; }
.pf-cv-top:hover { background: rgba(67, 232, 255, .08); }
.pf-cv-top[hidden] { display: none; }
.pf-concept-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(51, 209, 122, .14); }
.pf-tabs { display: none; }
.pf-page { padding: clamp(1.6rem, 3.5vw, 3.2rem) clamp(1.1rem, 3.5vw, 3.5rem) clamp(3rem, 6vw, 5rem); max-width: 1120px; }
.pf-pane { animation: paneIn .5s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Type --------------------------------------------------------------- */
.pf-eyebrow { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--cy); margin-bottom: 1rem; }
.pf-page-heading, .pf-case-title { font-size: var(--t-3xl); line-height: .98; letter-spacing: -.035em; }
.pf-page-lead { margin-top: 1.4rem; font-size: var(--t-lg); line-height: 1.6; color: var(--tx-2); max-width: 62ch; }
.pf-intro { margin-top: 1.3rem; font-size: var(--t-lg); line-height: 1.6; color: var(--tx-2); max-width: 60ch; }
.pf-description { color: var(--tx-2); font-size: var(--t-sm); line-height: 1.65; }
.pf-section { margin-top: clamp(2.8rem, 5vw, 4.5rem); }
.pf-section > h2, .pf-section-title h2 { font-size: var(--t-2xl); letter-spacing: -.03em; }
.pf-section-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.5rem; margin-bottom: 1rem; }
.pf-section-intro { margin-top: .9rem; color: var(--tx-2); max-width: 64ch; }
.pf-section > .pf-section-intro + * { margin-top: 1.8rem; }
.pf-editorial { max-width: 70ch; }
.pf-editorial h2 { font-size: var(--t-2xl); letter-spacing: -.03em; margin-top: 2.4rem; }
.pf-editorial h2:first-child, .pf-editorial .pf-eyebrow + h2 { margin-top: 0; }
.pf-editorial h3 { font-size: var(--t-xl); letter-spacing: -.02em; margin-top: 2rem; }
.pf-editorial p { margin-top: 1rem; color: var(--tx-2); line-height: 1.75; }
.pf-editorial h2 + p, .pf-editorial h3 + p { margin-top: .9rem; }
.pf-editorial .pf-text-action { margin-top: 1.4rem; }
.pf-accent-text { color: var(--cy); }
.pf-icon { width: 16px; height: 16px; flex: none; }

/* Buttons & links ---------------------------------------------------- */
.pf-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.pf-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 600; font-size: var(--t-sm); background: rgba(255, 255, 255, .02); transition: background .25s, border-color .25s, color .25s; }
.pf-button svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.pf-button:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-3); }
.pf-button:hover svg { transform: translate(2px, -2px); }
.pf-button.pf-primary { background: var(--cy); border-color: var(--cy); color: #03121d; }
.pf-button.pf-primary:hover { background: #8af1ff; border-color: #8af1ff; }
.pf-text-action { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: var(--t-sm); color: var(--cy); }
.pf-text-action svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.pf-text-action:hover svg { transform: translate(2px, -2px); }
.pf-pane > .pf-text-action:first-child { margin-bottom: 1.8rem; padding: .45rem .9rem .45rem .7rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--tx); }
.pf-pane > .pf-text-action:first-child:hover { background: rgba(255, 255, 255, .05); }
.pf-pane > .pf-text-action:first-child:hover svg { transform: translateX(-3px); }

/* Overview hero ------------------------------------------------------ */
.pf-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; }
.pf-hero-copy { padding-top: .4rem; }
.pf-hero h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem); line-height: .95; letter-spacing: -.04em; }
.pf-roleline { margin-top: 1.6rem; padding-left: 1rem; border-left: 2px solid var(--cy); font-size: var(--t-sm); line-height: 1.7; color: var(--tx); }
.pf-portrait { position: relative; min-height: 440px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); isolation: isolate;
  background: radial-gradient(75% 55% at 50% 36%, rgba(30, 159, 232, .34), transparent 70%), linear-gradient(180deg, #0d1c30, #060c15); }
.pf-portrait::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(120, 190, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 190, 255, .1) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(circle at 50% 38%, #000 18%, transparent 72%); -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 18%, transparent 72%); }
.pf-portrait::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(transparent, rgba(4, 8, 14, .92)); z-index: 1; }
.pf-portrait-photo { position: absolute; left: 50%; bottom: 0; width: 92%; max-width: 380px; transform: translateX(-50%); filter: drop-shadow(0 0 1px rgba(67, 232, 255, .55)) drop-shadow(0 26px 40px rgba(0, 0, 0, .55)); }
.pf-portrait-tag { position: absolute; z-index: 2; top: 1rem; right: 1rem; padding: .3rem .6rem; border-radius: 999px; border: 1px solid rgba(67, 232, 255, .3); background: rgba(4, 12, 22, .6); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; color: var(--cy); }
.pf-portrait-label { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1rem; font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.pf-portrait-label span { display: block; margin-top: .2rem; font-family: var(--f-body); font-weight: 500; font-size: .8rem; letter-spacing: 0; color: var(--tx-2); }

/* Scope numbers + milestone ----------------------------------------- */
.pf-scope { margin-top: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(30, 159, 232, .09), rgba(255, 255, 255, .01)); overflow: hidden; }
.pf-scope-label { padding: .9rem 1.3rem; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.pf-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-scope-grid > div { padding: 1.3rem 1.3rem 1.4rem; }
.pf-scope-grid > div + div { border-left: 1px solid var(--line); }
.pf-scope-value { display: flex; align-items: baseline; gap: .4rem; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem); line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.pf-scope-value small { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.pf-scope-name { margin-top: .55rem; font-size: var(--t-sm); color: var(--tx-2); line-height: 1.45; }
.pf-achievement { display: flex; gap: 1rem; margin-top: 1rem; padding: 1.15rem 1.3rem; border-radius: var(--r); border: 1px solid rgba(51, 209, 122, .3); background: rgba(6, 30, 22, .5); }
.pf-achievement > svg { width: 22px; height: 22px; color: var(--ok); margin-top: 2px; }
.pf-achievement strong { display: block; font-size: var(--t-sm); }
.pf-achievement p { margin-top: .25rem; font-size: var(--t-sm); color: var(--tx-2); line-height: 1.55; }

/* Capabilities ------------------------------------------------------- */
.pf-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 1.8rem; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--line); }
.pf-capability { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; padding: 1.5rem; background: var(--ink-2); transition: background .3s; }
.pf-capability:hover { background: #0d192a; }
.pf-icon-box { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(67, 232, 255, .25); background: rgba(67, 232, 255, .06); color: var(--cy); }
.pf-icon-box svg { width: 20px; height: 20px; }
.pf-capability h3 { font-size: 1.18rem; letter-spacing: -.015em; line-height: 1.2; margin-bottom: .55rem; }

/* Project cards ------------------------------------------------------ */
.pf-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.6rem; }
.pf-project { display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-2); overflow: hidden; transition: border-color .3s, transform .4s var(--ease); }
.pf-project:hover { border-color: var(--line-3); transform: translateY(-3px); }
.pf-project-cover { position: relative; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem 1.3rem; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(30, 159, 232, .3), transparent 60%), linear-gradient(160deg, #10233b, #081322); }
.pf-project-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(120, 190, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 190, 255, .09) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(200deg, #000 10%, transparent 70%); -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 70%); }
.pf-project:nth-child(2n) .pf-project-cover { background: radial-gradient(120% 90% at 0% 0%, rgba(23, 101, 183, .38), transparent 60%), linear-gradient(200deg, #0f2036, #071120); }
.pf-football-cover { background: radial-gradient(120% 90% at 100% 0%, rgba(51, 209, 122, .2), transparent 60%), linear-gradient(160deg, #0d2330, #07131d) !important; }
.pf-cover-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform 1s var(--ease); }
.pf-project:hover .pf-cover-img { transform: scale(1.04); }
.pf-cover-img[src]:not([src=""]) ~ * { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.pf-project-cover:has(.pf-cover-img[src]:not([src=""]))::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 10, 18, .9), rgba(5, 10, 18, .2)); }
.pf-cover-tag { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #bfefff; }
.pf-cover-tag svg { width: 18px; height: 18px; color: var(--cy); }
.pf-cover-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); line-height: 1; letter-spacing: -.03em; }
.pf-cover-detail { margin-top: .45rem; font-size: .82rem; color: var(--tx-2); }
.pf-project-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.3rem 1.4rem; flex: 1; }
.pf-project-body h3 { font-size: 1.15rem; letter-spacing: -.015em; line-height: 1.25; }
.pf-project-body .pf-text-action { margin-top: auto; padding-top: .5rem; }
.pf-football-intro { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.pf-bottom-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: clamp(2.6rem, 5vw, 4rem); padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg); border: 1px solid rgba(67, 232, 255, .22); background: radial-gradient(90% 140% at 100% 0%, rgba(30, 159, 232, .2), transparent 60%), var(--ink-2); }
.pf-bottom-invite strong { display: block; font-family: var(--f-display); font-size: clamp(1.3rem, 1.05rem + .9vw, 1.8rem); line-height: 1.12; letter-spacing: -.02em; max-width: 26ch; }
.pf-bottom-invite p { margin-top: .5rem; color: var(--tx-2); font-size: var(--t-sm); }

/* Case studies ------------------------------------------------------- */
.pf-case-cover { position: relative; padding: clamp(1.6rem, 4vw, 3rem); border-radius: var(--r-lg); border: 1px solid var(--line-2); overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 120% at 100% 0%, rgba(30, 159, 232, .28), transparent 60%), linear-gradient(160deg, #0f2139, #070f1c); }
.pf-case-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(120, 190, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 190, 255, .08) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(240deg, #000, transparent 75%); -webkit-mask-image: linear-gradient(240deg, #000, transparent 75%); }
.pf-case-cover .pf-cover-img { opacity: .62; z-index: -2; }
.pf-case-cover:has(.pf-cover-img[src]:not([src=""]))::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 10, 18, .94), rgba(5, 10, 18, .5)); }
.pf-cover-img[src=""], .pf-cover-img:not([src]) { visibility: hidden; }
.pf-case-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.pf-case-meta span { padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .8rem; color: var(--tx-2); }
.pf-case-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pf-case-field { padding: 1.35rem 1.4rem 1.45rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-2); border-top: 2px solid rgba(67, 232, 255, .55); }
.pf-case-field h3 { font-size: 1.12rem; letter-spacing: -.015em; }
.pf-case-field p { margin-top: .6rem; color: var(--tx-2); font-size: var(--t-sm); line-height: 1.65; }

/* Timeline ----------------------------------------------------------- */
.pf-timeline { position: relative; margin-top: 2rem; display: grid; gap: 0; }
.pf-timeline::before { content: ""; position: absolute; left: 10.4rem; top: .6rem; bottom: .6rem; width: 1px; background: linear-gradient(var(--cy), var(--line-2) 30%, var(--line)); }
.pf-timeline-entry { position: relative; display: grid; grid-template-columns: 9.4rem minmax(0, 1fr); gap: 2.2rem; padding: 1.3rem 0 1.6rem; }
.pf-timeline-entry::before { content: ""; position: absolute; left: calc(10.4rem - 5px); top: 1.75rem; width: 11px; height: 11px; border-radius: 50%; background: var(--ink-1); border: 2px solid var(--sky); }
.pf-timeline-entry:first-child::before { background: var(--cy); border-color: var(--cy); box-shadow: 0 0 0 5px rgba(67, 232, 255, .15); }
.pf-timeline-date { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em; color: var(--tx-3); padding-top: .25rem; text-align: right; }
.pf-timeline-entry h3 { font-size: 1.22rem; letter-spacing: -.015em; line-height: 1.25; }
.pf-timeline-org { margin-top: .35rem; font-size: .84rem; font-weight: 600; color: var(--sky); }
.pf-timeline-entry .pf-description { margin-top: .6rem; max-width: 64ch; }
.pf-timeline-entry .pf-text-action { margin-top: .8rem; }
.pf-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pf-details { padding: 1.5rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-2); }
.pf-details h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.pf-task-list { list-style: none; margin-top: 1rem; display: grid; gap: .55rem; }
.pf-task-list li { position: relative; padding-left: 1.3rem; color: var(--tx-2); font-size: var(--t-sm); line-height: 1.55; }
.pf-task-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); border: 1.5px solid var(--cy); }
.pf-details .pf-text-action { margin-top: 1.2rem; }

/* Approach steps ----------------------------------------------------- */
.pf-steps { display: grid; gap: 0; margin-top: 1.6rem; border-top: 1px solid var(--line-2); }
.pf-step { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.pf-step-number { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-3); font-family: var(--f-mono); font-size: .78rem; color: var(--cy); }
.pf-step h3 { font-size: 1.2rem; letter-spacing: -.015em; padding-top: .35rem; }
.pf-step .pf-description { margin-top: .35rem; }

/* Analytics ---------------------------------------------------------- */
.pf-analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pf-analysis-block { padding: 1.5rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-2); }
.pf-analysis-block .pf-eyebrow { display: block; font-size: .66rem; margin-bottom: .8rem; }
.pf-analysis-block h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.pf-analysis-block p { margin-top: .7rem; color: var(--tx-2); font-size: var(--t-sm); line-height: 1.65; }
.pf-skill-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 1.4rem; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.pf-skill-list article { padding: 1.3rem 1.4rem; background: var(--ink-2); }
.pf-skill-list h3 { font-size: 1.08rem; letter-spacing: -.01em; }
.pf-skill-list p { margin-top: .45rem; color: var(--tx-2); font-size: var(--t-sm); line-height: 1.6; }

/* Digital tools ------------------------------------------------------ */
.pf-tool-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-top: 2rem; }
.pf-tool-choice { display: flex; align-items: flex-start; gap: .75rem; padding: .95rem 1rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-2); text-align: left; transition: border-color .25s, background .25s; }
.pf-tool-choice > svg { width: 20px; height: 20px; flex: none; color: var(--tx-3); margin-top: 1px; }
.pf-tool-choice strong { display: block; font-size: .95rem; }
.pf-tool-choice small { display: block; margin-top: .15rem; font-size: .76rem; line-height: 1.4; color: var(--tx-3); }
.pf-tool-choice:hover { border-color: var(--line-3); }
.pf-tool-choice[aria-pressed="true"] { border-color: rgba(67, 232, 255, .5); background: rgba(30, 159, 232, .1); }
.pf-tool-choice[aria-pressed="true"] > svg { color: var(--cy); }
.pf-privacy-note { display: flex; gap: .65rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r); border: 1px solid rgba(245, 165, 36, .28); background: rgba(40, 28, 6, .35); font-size: .82rem; line-height: 1.5; color: #f3d39b; }
.pf-privacy-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--warn); }
.pf-tool { margin-top: 1.6rem; padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-2); }
.pf-tool-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.4rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line); }
.pf-tool-top h2 { font-size: var(--t-2xl); letter-spacing: -.03em; }
.pf-tag { display: inline-flex; padding: .35rem .75rem; border-radius: 999px; border: 1px solid rgba(51, 209, 122, .35); background: rgba(51, 209, 122, .08); font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #9df0c2; white-space: nowrap; }
.pf-tool .pf-editorial { margin-top: 1.2rem; }
.pf-screenshot { margin: 1.8rem 0 0; border-radius: var(--r); border: 1px solid var(--line-2); overflow: hidden; background: #0b1524; }
.pf-screen-image { width: 100%; cursor: zoom-in; }
.pf-screenshot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--tx-3); }
.pf-tool-outcome { margin-top: 1.8rem; padding: 1.3rem 1.4rem; border-radius: var(--r); border-left: 3px solid var(--cy); background: rgba(30, 159, 232, .07); }
.pf-tool-outcome h3 { font-size: 1.12rem; letter-spacing: -.015em; }
.pf-tool-outcome p { margin-top: .5rem; color: var(--tx-2); font-size: var(--t-sm); line-height: 1.65; }
.pf-tool-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.2rem; }
.pf-tool-flow span { padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink-1); font-size: .8rem; font-weight: 600; }
.pf-tool-flow svg { width: 15px; height: 15px; color: var(--sky); }
.pf-report-module { margin-top: 2.2rem; padding-top: 2rem; border-top: 1px dashed var(--line-2); }
.pf-report-module > h3 { font-size: var(--t-xl); letter-spacing: -.02em; }

/* Screenshot view ---------------------------------------------------- */
.pf-large-shot { margin-top: 1.8rem; }
.pf-large-shot img { width: 100%; cursor: default; }
.pf-shot-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.pf-shot-count { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; color: var(--tx-3); }

/* Career direction --------------------------------------------------- */
.pf-direction-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.pf-editorial + .pf-direction-row { margin-top: 2.4rem; border-top: 1px solid var(--line-2); }
.pf-direction-label { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cy); padding-top: .35rem; }
.pf-direction-row h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.pf-direction-row .pf-description { margin-top: .55rem; max-width: 64ch; }

/* Contact ------------------------------------------------------------ */
.pf-contact-panel { margin-top: 2rem; padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--r-lg); border: 1px solid var(--line-2); background: radial-gradient(90% 120% at 100% 0%, rgba(30, 159, 232, .16), transparent 60%), var(--ink-2); max-width: 760px; }
.pf-contact-panel h3 { font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: .8rem; }
.pf-contact-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .95rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.pf-contact-row > span:first-child { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.pf-contact-value { font-weight: 600; overflow-wrap: anywhere; }
a.pf-contact-value:hover { color: var(--cy); }

/* Responsive --------------------------------------------------------- */
@media (min-width: 1101px) and (max-width: 1340px) {
  .pf-tool-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .pf-shell { grid-template-columns: minmax(0, 1fr); }
  .pf-side { display: none; }
  .pf-tabs { position: sticky; top: calc(var(--nav-h) + 58px); z-index: 19; display: flex; gap: .4rem; overflow-x: auto; padding: .6rem clamp(1.1rem, 3vw, 3rem); border-bottom: 1px solid var(--line); background: rgba(7, 13, 23, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: none; }
  .pf-tabs::-webkit-scrollbar { display: none; }
  .pf-tabs a { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--tx-2); white-space: nowrap; }
  .pf-tabs a svg { width: 15px; height: 15px; color: var(--tx-3); }
  .pf-tabs a[aria-current="page"] { color: #03121d; background: var(--cy); border-color: var(--cy); }
  .pf-tabs a[aria-current="page"] svg { color: #03121d; }
  .pf-page { margin-inline: auto; }
}
@media (max-width: 860px) {
  .pf-hero { grid-template-columns: minmax(0, 1fr); }
  .pf-portrait { min-height: 0; aspect-ratio: 4 / 4.6; max-width: 460px; width: 100%; }
  .pf-portrait-photo { width: auto; height: 86%; max-width: none; }
  .pf-portrait-tag { top: .8rem; left: .8rem; right: auto; }
  .pf-capabilities, .pf-project-grid, .pf-case-layout, .pf-detail-grid, .pf-analysis-grid, .pf-skill-list { grid-template-columns: minmax(0, 1fr); }
  .pf-tool-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-tool-picker > .pf-tool-choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pf-direction-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .pf-timeline::before { left: 5px; }
  .pf-timeline-entry { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding-left: 1.8rem; }
  .pf-timeline-entry::before { left: 0; top: 1.55rem; }
  .pf-timeline-date { text-align: left; }
  .pf-concept { display: none; }
}
@media (max-width: 560px) {
  .pf-scope-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-scope-grid > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .pf-scope-grid > div { display: flex; align-items: center; gap: 1rem; }
  .pf-scope-value { min-width: 6.5rem; font-size: 2.6rem; }
  .pf-scope-name { margin: 0; }
  .pf-tool-picker { grid-template-columns: minmax(0, 1fr); }
  .pf-contact-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .pf-crumb-root, .pf-crumb-sep { display: none; }
  .pf-actions .pf-button { flex: 1 1 100%; }
  .pf-shot-nav .pf-button span { display: none; }
}
@media print {
  .nav, .pf-side, .pf-topbar, .pf-tabs, .foot { display: none !important; }
  .pf-shell { display: block; padding: 0; }
  body { background: #fff; color: #000; }
}