/* ==========================================================================
   Portfolio Development page - loaded only on /services/portfolio-development
   Template: inc/service-portfolio.php | Behaviour: assets/js/portfolio.js | Content: data/portfolio.json

   How this file is organised (search for the banner text):
     Shared helpers      small classes reused by several sections
     1. Hero             the "Living Portfolio" browser, tiles, case cards and phone
     2. Why it matters   compact heading row + 2 x 2 tiles
     3. Anatomy          portfolio preview with highlighted regions + numbered list
     Contact panel       phone / email / WhatsApp panel above the footer
     Responsive          breakpoints: 1100px (stack), 900px (tablet), 640px (phone)
     Reduced motion      switches animation off

   Every class starts with "pd-" so nothing here can affect another page.
   Brand colours come from the tokens in main.css (--green, --black, --char, --white, --soft).
   ========================================================================== */

/* ---------- Shared helpers ---------- */
.pd-h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 800; color: var(--text-l); text-wrap: balance; margin: 0; }
.pd-h2 span { color: var(--green-ink); } .pd-h2.on-dark { color: #fff; } .pd-h2.on-dark span { color: var(--green); }
.pd-fine { margin: 22px 0 0; font-size: .82rem; color: var(--mute-d); max-width: 80ch; }
.pd-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #15201a; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pd-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); } .pd-bar i:first-child { background: var(--green); }
.pd-bar span { margin-left: 8px; flex: 1; min-width: 0; padding: 3px 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); font-size: .68rem; color: #8fa092; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-bar b { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); border: 1px solid rgba(126, 217, 87, .45); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
/* abstract project artwork used on thumbnails */
.pd-art { display: block; width: 100%; height: 100%; }
.pd-art1 { background: radial-gradient(circle at 70% 35%, var(--green) 0 22%, transparent 23%), linear-gradient(135deg, #0f1a13, #1d3a24); }
.pd-art2 { background: repeating-linear-gradient(45deg, #1d3a24 0 10px, #2f7d17 10px 20px); }
.pd-art3 { background: conic-gradient(from 90deg, var(--green), #1d3a24, #0c120e, var(--green)); }

/* ==========================================================================
   1. Hero: the Living Portfolio
   ========================================================================== */
.pd-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: min(100svh, 980px); padding: calc(var(--header-h) + clamp(34px, 5vw, 70px)) 0 clamp(90px, 9vw, 130px); background: radial-gradient(90% 90% at 80% 20%, #14241a, var(--black) 62%); }
.pd-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pd-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 70px); align-items: center; width: 100%; }
.pd-label { display: inline-flex; align-items: center; gap: 12px; font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin: 0 0 22px; } .pd-label::before { content: ''; width: 34px; height: 1.5px; background: currentColor; }
.pd-title { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; color: #fff; }
.pd-title .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } .pd-title .lni { display: inline-block; will-change: transform; }
.pd-title em { font-style: normal; background: linear-gradient(100deg, #7ED957 10%, #d3f7bd 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pd-rule { display: block; width: 130px; height: 2px; margin: 26px 0 4px; background: linear-gradient(90deg, var(--green), transparent); transform-origin: left; animation: pdRule 1.5s 1s var(--ease) both; } @keyframes pdRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pd-lead { margin-top: 22px; } .pd-ctas { margin-top: 30px; }

.pd-stage { position: relative; aspect-ratio: 1 / .98; perspective: 1400px; }
.pd-browser { position: absolute; left: 2%; top: 8%; width: 69%; border-radius: 14px; background: #0d1410; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .9), 0 0 70px -26px rgba(126, 217, 87, .4); overflow: hidden; animation: pdFloat 9s ease-in-out infinite; container-type: inline-size; transform: rotateY(var(--ry, -3deg)) rotateX(var(--rx, 1deg)); transition: transform .4s ease-out; }
@keyframes pdFloat { 50% { translate: 0 -8px; } }
.pd-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.pd-frame rect { fill: none; stroke: var(--green); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pd-site-mini { padding: 4cqw 5cqw 5cqw; background: #fff; color: #101412; } .pd-site-mini > * + * { margin-top: 3.4cqw; }
.pd-mini-head { display: flex; align-items: center; gap: 3cqw; font-size: 2.2cqw; } .pd-mini-head b { margin-right: auto; font-size: 2.8cqw; font-weight: 800; } .pd-mini-head span { color: #5a665f; }
.pd-site-mini h3 { font-size: 6cqw; line-height: 1.05; letter-spacing: -.04em; font-weight: 800; color: #101412; max-width: 14ch; }
.pd-mini-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.4cqw; } .pd-mini-skills li { padding: .9cqw 2.4cqw; border-radius: 99px; font-size: 2cqw; font-weight: 700; color: #1d5a0a; background: rgba(126, 217, 87, .2); border: 1px solid rgba(47, 125, 23, .3); }
.pd-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; } .pd-mini-grid figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 2cqw; overflow: hidden; }
.pd-tile { position: absolute; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .85); animation: pdFloat 10s ease-in-out infinite; }
.pd-tile--a { left: -2%; top: 50%; width: 24%; aspect-ratio: 4 / 5; background: radial-gradient(circle at 30% 30%, var(--green) 0 24%, transparent 25%), #0f1a13; animation-delay: -2s; }
.pd-tile--b { right: 6%; bottom: 2%; width: 24%; aspect-ratio: 1; background: repeating-linear-gradient(45deg, #1d3a24 0 9px, #2f7d17 9px 18px); animation-delay: -5s; }
.pd-tile--c { left: 18%; top: -2%; width: 20%; aspect-ratio: 5 / 3; background: linear-gradient(135deg, var(--green) 0 50%, #0f1a13 50%); animation-delay: -7s; z-index: 0; }
.pd-case { position: absolute; z-index: 4; padding: 11px 14px; border-radius: 14px; background: rgba(15, 22, 18, .92); border: 1px solid rgba(126, 217, 87, .32); backdrop-filter: blur(12px); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .85); color: #fff; animation: pdFloat 8s ease-in-out infinite; }
.pd-case small { display: block; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--green); } .pd-case b { display: block; margin: 3px 0; font-size: .8rem; line-height: 1.25; } .pd-case span { font-size: .68rem; color: #a9bba9; }
.pd-case--0 { right: 0; top: 2%; width: 27%; animation-delay: -1s; } .pd-case--1 { left: 0; bottom: 4%; width: 32%; animation-delay: -4s; }
.pd-phone { position: absolute; right: 2%; top: 32%; z-index: 5; width: 22%; aspect-ratio: 9 / 18; padding: 3.2%; border-radius: 22px; background: #0b0f0d; border: 1px solid rgba(126, 217, 87, .5); box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .9); animation: pdFloat 8s -3s ease-in-out infinite; container-type: inline-size; }
.pd-phone .notch { position: absolute; left: 50%; top: 2.4%; width: 30%; height: 2.4%; transform: translateX(-50%); border-radius: 99px; background: #1d2822; z-index: 2; }
.pd-phone-screen { height: 100%; border-radius: 16px; background: #fff; color: #101412; padding: 13cqw 8cqw 8cqw; overflow: hidden; } .pd-phone-screen b { font-size: 8cqw; } .pd-phone-screen h4 { font-size: 10cqw; line-height: 1.1; letter-spacing: -.03em; margin: 6cqw 0; color: #101412; } .pd-phone-screen .pd-art { height: 26cqw; border-radius: 4cqw; margin-bottom: 4cqw; }
.pd-demo { position: absolute; right: 0; bottom: -26px; margin: 0; font-size: .72rem; color: var(--mute-d); }

/* ==========================================================================
   2. Why a professional portfolio matters (compact: heading row + 2 x 2 tiles)
   ========================================================================== */
.pd-why { padding-block: clamp(56px, 6vw, 96px); }
.pd-why-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(16px, 4vw, 56px); align-items: end; margin-bottom: clamp(24px, 3.4vw, 40px); }
.pd-giant { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.05em; font-weight: 800; color: var(--text-l); text-wrap: balance; margin: 0; } .pd-giant em { font-style: normal; color: var(--green-ink); }
.pd-why-lede { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--mute-l); max-width: 52ch; }
.pd-why-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pd-why-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line-l); cursor: default; transition: background .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease); outline-offset: 3px; }
.pd-why-row:hover { transform: translateY(-2px); } .pd-why-row.is-on { background: #fff; border-color: rgba(47, 125, 23, .5); box-shadow: 0 22px 38px -26px rgba(8, 8, 8, .4); }
.pd-why-frame { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: radial-gradient(100% 100% at 20% 0%, #172a1c, #0a0e0c 70%); display: grid; place-items: center; padding: 10%; } .pd-why-art { width: 100%; } .pd-why-art svg { display: block; width: 100%; height: auto; }
.pd-why-text { position: relative; min-width: 0; }
.pd-why-n { display: block; margin-bottom: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: var(--green-ink); }
.pd-why-text h3 { font-size: 1.12rem; letter-spacing: -.025em; line-height: 1.2; } .pd-why-text p { margin: 6px 0 0; font-size: .88rem; line-height: 1.55; color: var(--mute-l); }
.pd-why-line { display: block; height: 2px; margin-top: 10px; width: 0; background: var(--green-ink); transition: width .7s var(--ease); } .pd-why-row.is-on .pd-why-line { width: 56px; }
.a-frame { stroke: rgba(255, 255, 255, .28); } .a-line { stroke: rgba(255, 255, 255, .3); } .a-green { stroke: var(--green); } .a-fill { fill: rgba(126, 217, 87, .16); stroke: rgba(126, 217, 87, .55); } .a-solid { fill: var(--green); stroke: none; } .a-dark { stroke: #07120a; }
.a-frame, .a-line, .a-green, .a-fill, .a-dark { stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* ==========================================================================
   3. Portfolio anatomy
   ========================================================================== */
.pd-anat-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(16px, 4vw, 56px); align-items: end; margin-bottom: clamp(30px, 4vw, 52px); } .pd-anat-lede { margin: 0; color: var(--mute-l); font-size: 1.04rem; line-height: 1.7; }
.pd-anat-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.pd-anat-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; } .pd-anat-line path { fill: none; stroke: var(--green-ink); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pdDraw .9s var(--ease) forwards; } @keyframes pdDraw { to { stroke-dashoffset: 0; } }
.pd-anat-view { border-radius: 24px; overflow: hidden; background: radial-gradient(100% 90% at 20% 0%, #172a1c, #0a0e0c 70%); padding: clamp(14px, 2.4vw, 30px); box-shadow: 0 50px 90px -50px rgba(8, 8, 8, .7); }
.pd-anat-site { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-areas: "intro intro" "projects cases" "skills responsive"; gap: 12px; transform-origin: center; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sc, 1)); transition: transform .8s var(--ease); }
.pd-region { position: relative; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .22); color: #dfe9df; transition: opacity .5s, border-color .5s, background .5s, box-shadow .5s; }
.pd-region .pd-tag { display: block; margin-bottom: 8px; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #8fa092; }
.pd-region--intro { grid-area: intro; } .pd-region--projects { grid-area: projects; } .pd-region--cases { grid-area: cases; } .pd-region--skills { grid-area: skills; } .pd-region--responsive { grid-area: responsive; }
.pd-region b { color: #fff; } .pd-region--intro h4 { margin: 6px 0 0; font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -.03em; color: #fff; line-height: 1.15; }
.pd-region .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pd-region .tiles i { aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(135deg, #1d3a24, #2f7d17); } .pd-region .tiles i:nth-child(2) { background: linear-gradient(135deg, #7ED957, #2f7d17); } .pd-region .tiles i:nth-child(3) { background: repeating-linear-gradient(45deg, #1d3a24 0 6px, #2f7d17 6px 12px); }
.pd-region--cases p { margin: 0 0 4px; font-size: .78rem; } .pd-region--cases p b { color: var(--green); margin-right: 6px; }
.pd-region--skills u { text-decoration: none; display: inline-block; margin: 0 6px 6px 0; padding: 3px 11px; border-radius: 99px; font-size: .7rem; font-weight: 700; color: var(--green); border: 1px solid rgba(126, 217, 87, .4); }
.pd-region--responsive { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .pd-region--responsive .pd-tag { width: 100%; } .pd-region--responsive i { display: block; border: 2px solid rgba(255, 255, 255, .45); border-radius: 6px; } .pd-region--responsive .tablet { width: 62px; height: 46px; } .pd-region--responsive .phone { width: 28px; height: 52px; border-radius: 7px; }
.pd-anat-view.has-focus .pd-region { opacity: .35; } .pd-anat-view.has-focus .pd-region.is-focus { opacity: 1; border: 1px solid var(--green); background: rgba(126, 217, 87, .1); box-shadow: 0 0 36px -8px rgba(126, 217, 87, .55); }
.pd-anat-list { list-style: none; margin: 0; padding: 0; }
.pd-anat-item { border-bottom: 1px solid var(--line-l); }
.pd-anat-btn { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) 38px; gap: 12px; align-items: center; padding: 22px 0; text-align: left; color: var(--text-l); }
.pd-anat-btn .n { font-size: .85rem; font-weight: 800; letter-spacing: .1em; color: var(--green-ink); } .pd-anat-btn .t { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.035em; transition: color .3s, transform .4s var(--ease); } .pd-anat-btn:hover .t { transform: translateX(6px); }
.pd-anat-btn i { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-l); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; } .pd-anat-btn i svg { width: 16px; height: 16px; }
.pd-anat-item.is-open .t { color: var(--green-ink); } .pd-anat-item.is-open .pd-anat-btn i { transform: rotate(135deg); background: var(--green); border-color: var(--green); }
.pd-anat-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .pd-anat-panel > div { overflow: hidden; min-height: 0; visibility: hidden; padding-left: 64px; transition: visibility 0s .5s; } .pd-anat-item.is-open .pd-anat-panel { grid-template-rows: 1fr; } .pd-anat-item.is-open .pd-anat-panel > div { visibility: visible; transition: visibility 0s; }
.pd-anat-panel p { margin: 0 0 12px; color: var(--mute-l); max-width: 46ch; } .pd-anat-panel ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; } .pd-anat-panel li { position: relative; padding-left: 22px; font-weight: 600; font-size: .92rem; } .pd-anat-panel li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 2px; background: var(--green-ink); }

/* ==========================================================================
   Contact panel (above the footer)
   ========================================================================== */
.pd-contact-panel { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 60px); border-radius: 28px; background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%); border: 1px solid rgba(47, 125, 23, .22); box-shadow: 0 40px 80px -50px rgba(27, 110, 0, .45); overflow: hidden; }
.pd-contact-panel::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .35), transparent); pointer-events: none; }
.pd-contact-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .pd-contact-copy .display { margin: 0; } .pd-contact-copy > p:not(.eyebrow) { margin: 0; color: var(--mute-l); max-width: 52ch; }
.pd-contact-ways { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pd-contact-ways a { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(8, 8, 8, .08); transition: transform .35s, border-color .35s, box-shadow .35s; min-width: 0; }
.pd-contact-ways a:hover { transform: translateX(6px); border-color: rgba(47, 125, 23, .5); box-shadow: 0 18px 36px -24px rgba(27, 110, 0, .5); }
.pd-cw-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #080808; } .pd-cw-ic svg { width: 20px; height: 20px; }
.pd-contact-ways small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-l); } .pd-contact-ways strong { display: block; overflow-wrap: anywhere; color: #080808; }
@media (max-width: 900px) { .pd-contact-panel { grid-template-columns: 1fr; border-radius: 22px; } .pd-contact-copy .btn { width: 100%; justify-content: center; } }
@media (max-width: 720px) { .pd-contact-ways strong { overflow-wrap: break-word; word-break: normal; font-size: .93rem; } .pd-contact-ways a { padding: 14px 16px; gap: 12px; } .pd-contact { padding-block: 56px; } }
@media (prefers-reduced-motion: reduce) { .pd-contact-ways a { transition: none; } }
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .pd-hero { min-height: 0; } .pd-hero-grid, .pd-anat-grid, .pd-anat-head { grid-template-columns: minmax(0, 1fr); } .pd-anat-line { display: none; }
}
@media (max-width: 900px) {
  .pd-why-head, .pd-why-rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pd-stage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pd-browser, .pd-tile, .pd-case, .pd-phone { position: static; width: 100%; animation: none; } .pd-browser { grid-column: 1 / -1; } .pd-tile { display: none; } .pd-case--1 { grid-column: auto; } .pd-phone { grid-column: 1 / -1; width: 46%; justify-self: center; } .pd-demo { position: static; grid-column: 1 / -1; }
  .pd-why-row { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; } .pd-anat-panel > div { padding-left: 0; } .pd-anat-btn { grid-template-columns: 40px minmax(0, 1fr) 36px; }
}
@media (hover: none) { .pd-anat-btn:hover .t { transform: none; } }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pd-rule, .pd-browser, .pd-tile, .pd-case, .pd-phone { animation: none !important; }
  .pd-anat-line path { animation: none; stroke-dashoffset: 0; }
  .pd-why-row, .pd-why-line { transition: none; }
  .pd-anat-site, .pd-anat-panel { transition: none; }
}