/* JAKHON / PROJECT DOSSIERS + PERSONA HERO — no image generation, original portrait */
.hero-media-stack{position:relative;isolation:isolate;min-width:0;min-height:540px;display:grid;place-items:center;padding:10px 8px 46px}
.hero-media-stack::before{content:"";position:absolute;z-index:-1;inset:9% 0 10% 8%;border-radius:48%;background:radial-gradient(circle at 48% 40%,rgba(51,220,184,.21),transparent 67%);filter:blur(28px);pointer-events:none}
.hero-persona{position:relative;z-index:3;overflow:hidden;margin:0 auto 0 1%;width:min(76%,395px);padding:9px;border:1px solid rgba(121,247,212,.46);border-radius:21px;background:linear-gradient(155deg,#d4e8dd,#f6f9f6 55%,#b8d5d0);box-shadow:0 38px 100px #0009,0 0 0 7px rgba(104,231,207,.065);transform:rotate(-2deg);transition:transform .45s ease,box-shadow .45s ease}
.hero-persona:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 42px 110px #000a,0 0 0 9px rgba(104,231,207,.10)}
.hero-persona-photo{position:relative;border-radius:13px;overflow:hidden;background:#fff;min-height:100px}
.hero-persona-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;object-position:center;background:#fff;filter:contrast(1.06) saturate(1.025)}
.hero-persona-sticker{position:absolute;right:9px;top:9px;display:grid;place-items:center;border-radius:9px;background:#0b2733e9;border:1px solid #7fffd0a8;color:#95ffe0;width:40px;height:40px;font-size:26px;line-height:1;font-weight:900;letter-spacing:-.08em}
.hero-persona figcaption{display:grid;gap:2px;padding:15px 17px 12px;background:#f8faf8;border-radius:0 0 11px 11px;color:#18323c}
.hero-persona figcaption .persona-eyebrow{font:750 10px/1.6 Consolas,monospace;color:#2c7768;letter-spacing:.12em}
.hero-persona figcaption strong{font-size:clamp(21px,2.5vw,30px);letter-spacing:-.055em;font-weight:880;line-height:1.14}
.hero-persona figcaption .persona-caption{font-size:12px;font-weight:650;color:#56717a}
.hero-media-stack .hero-visual{position:absolute;z-index:1;width:68%;right:-5%;bottom:4px;margin:0;transform:rotate(5deg) scale(.83);transform-origin:right bottom;filter:drop-shadow(0 20px 40px rgba(0,0,0,.22));opacity:.96;pointer-events:none}
.hero-media-stack .hero-visual .floating-note{display:none}
.hero-media-stack .blueprint{min-height:235px}
.hero-media-stack .visual-bottom{font-size:8px}
.hero-media-stack .diagram{gap:4px}
.projects-section .project-card[data-project],.upcoming-card[data-project]{cursor:pointer;outline-offset:4px}
.projects-section .project-card[data-project]:focus-visible,.upcoming-card[data-project]:focus-visible{outline:3px solid #22bba4}
.pd-open{appearance:none;display:flex;justify-content:center;align-items:center;min-height:43px;margin:10px 20px 21px;padding:10px 16px;border-radius:10px;border:1px solid #bfdad7;color:#087667;background:#f0f9f6;font-size:12px;font-weight:800;letter-spacing:.01em;cursor:pointer;transition:background .2s,transform .2s,color .2s}
.pd-open::after{content:" ↗";margin-left:7px}
.pd-open:hover,.pd-open:focus-visible{background:#d4f6e9;color:#04564f;transform:translateY(-1px)}
.upcoming-card .pd-open{margin:22px 0 0;align-self:flex-start;background:rgba(35,111,104,.06)}
.project-detail-dialog{position:fixed;inset:0;box-sizing:border-box;width:min(1000px,calc(100% - 36px));height:min(820px,calc(100dvh - 38px));max-width:1000px;max-height:calc(100dvh - 38px);padding:0;border:1px solid rgba(122,231,203,.34);border-radius:24px;color:#dbecea;background:#091a28;box-shadow:0 45px 130px #000b;overflow:hidden}
.project-detail-dialog::backdrop{background:rgba(2,11,19,.82);backdrop-filter:blur(12px)}
.project-detail-dialog[open]{animation:pd-rise .26s ease-out}
@keyframes pd-rise{from{opacity:0;transform:translateY(18px) scale(.987)}to{opacity:1;transform:none}}
.pd-shell{display:flex;flex-direction:column;height:100%;min-height:0}
.pd-topbar{position:relative;z-index:2;flex:none;display:flex;justify-content:space-between;align-items:center;padding:17px clamp(18px,3vw,34px);border-bottom:1px solid #2b4852;background:linear-gradient(100deg,#102f3c,#0c1d2d)}
.pd-brand{color:#7fdfcd;font:800 10px/1.3 Consolas,monospace;letter-spacing:.17em}
.pd-close{width:45px;height:43px;border-radius:12px;border:1px solid #376269;background:#173843;color:#dbfff7;font-size:30px;line-height:1;cursor:pointer}
.pd-close:hover{background:#235963}
.pd-content{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;padding:clamp(23px,4vw,51px);scrollbar-width:thin;scrollbar-color:#4d8384 #132734}
.pd-heading{padding-bottom:22px;border-bottom:1px solid #28424d}
.pd-overline{font:700 10px/1.7 Consolas,monospace;letter-spacing:.19em;color:#83bdc3}
.pd-name{margin:12px 0 19px;color:#f4fffa;font-size:clamp(2.1rem,5.5vw,4.25rem);line-height:1.05;letter-spacing:-.065em;overflow-wrap:anywhere}
.pd-badges{display:flex;flex-wrap:wrap;gap:9px}
.pd-status,.pd-release{display:inline-flex;align-items:center;border:1px solid #3e7e7c;border-radius:999px;padding:9px 14px;background:#173c3f;color:#b3ffe0;font:750 11px/1.3 "Segoe UI",system-ui,sans-serif}
.pd-release{background:transparent;color:#becfd6;border-color:#365266}
.pd-status::before{content:"";display:inline-block;background:#67dfb8;width:7px;height:7px;border-radius:50%;margin-right:8px;box-shadow:0 0 12px #4bd99a}
.project-detail-dialog[data-status="planned"] .pd-status,.project-detail-dialog[data-status="design"] .pd-status{border-color:#79694e;background:#403423;color:#ffdfae}
.project-detail-dialog[data-status="planned"] .pd-status::before,.project-detail-dialog[data-status="design"] .pd-status::before{background:#e2b56d;box-shadow:none}
.pd-intro{margin:25px 0 27px;font-size:clamp(16px,2vw,19px);line-height:1.9;color:#e3f1f3;max-width:840px}
.pd-columns{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:38px;padding-bottom:26px}
.pd-section{margin:0 0 23px}
.pd-section-title{font-size:13px;line-height:1.4;font-weight:870;letter-spacing:.035em;color:#96edda;text-transform:uppercase;margin:0 0 18px}
.pd-body-text{margin:0;font-size:15px;line-height:1.84;color:#b8d0d6}
.pd-features{padding:0;margin:0;list-style:none;display:grid;gap:11px}
.pd-features li{position:relative;color:#d0e3e4;font-size:14px;line-height:1.65;padding:0 0 0 19px}
.pd-features li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;background:#6de3bc;border-radius:2px;transform:rotate(45deg)}
.pd-roadmap{padding:31px 29px;border:1px solid #284c53;border-radius:17px;background:linear-gradient(140deg,#112b35,#0d202c)}
.pd-steps{list-style:none;margin:0;padding:0 0 0 3px}
.pd-step{display:grid;grid-template-columns:37px 1fr;position:relative;gap:18px;min-height:80px}
.pd-step:not(:last-child)::after{content:"";position:absolute;left:18px;top:38px;bottom:0;width:1px;background:linear-gradient(#316964,#244452)}
.pd-step-index{position:relative;z-index:1;display:grid;place-items:center;width:37px;height:37px;border-radius:50%;border:1px solid #4f8581;color:#b6f3dd;background:#193d40;font:800 11px Consolas,monospace}
.pd-step.next .pd-step-index,.pd-step.target .pd-step-index{background:#142b39;color:#9abac6;border-color:#37576a}
.pd-step-copy{padding:1px 0 26px}
.pd-step-kind{display:block;color:#75bfbb;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:850;margin-bottom:7px}
.pd-step-title{display:block;color:#e8f8f7;font-size:15px;line-height:1.55;font-weight:625}
.pd-tags{display:flex;flex-wrap:wrap;gap:9px}
.pd-tags span{display:inline-flex;padding:8px 13px;border:1px solid #426065;border-radius:8px;background:#1b343f;color:#c3e3e3;font:750 11px Consolas,monospace}
.pd-notice{margin:12px 0 25px;border-top:1px solid #28434d;padding:20px 0 0;font-size:12px;line-height:1.8;color:#97aeb8}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:8px}
.pd-contact,.pd-service{display:inline-flex;justify-content:center;align-items:center;border-radius:11px;min-height:47px;padding:12px 21px;text-decoration:none;font-size:12px;font-weight:870;transition:transform .2s}
.pd-contact{background:#65e1bc;color:#083139}
.pd-service{background:#183a47;border:1px solid #538c8b;color:#c3eeef}
.pd-contact:hover,.pd-service:hover{transform:translateY(-2px)}
@media(max-width:1050px){.hero-media-stack{min-height:485px}.hero-persona{width:79%}.hero-media-stack .hero-visual{right:-4%;width:68%;bottom:0}}
@media(max-width:820px){.hero-media-stack{min-height:480px;max-width:600px;width:100%;margin-inline:auto}.hero-persona{width:min(69%,390px)}.hero-media-stack .hero-visual{width:60%;right:0;bottom:0}.pd-columns{gap:20px}}
@media(max-width:570px){.hero-media-stack{min-height:405px;padding:10px 0 18px}.hero-persona{width:75%;margin-left:0;transform:rotate(-1deg);padding:7px}.hero-persona figcaption{padding:11px}.hero-persona figcaption strong{font-size:19px}.hero-persona figcaption .persona-eyebrow{font-size:8px}.hero-persona figcaption .persona-caption{font-size:10px}.hero-persona-sticker{width:31px;height:31px;font-size:22px}.hero-media-stack .hero-visual{width:63%;right:-4%;bottom:0;transform:rotate(5deg) scale(.78)}.project-detail-dialog{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0}.pd-content{padding:25px 19px 30px}.pd-topbar{padding:13px 18px}.pd-name{font-size:clamp(2.1rem,10vw,3rem)}.pd-columns{grid-template-columns:1fr;gap:2px}.pd-roadmap{padding:23px 17px}.pd-step{grid-template-columns:33px 1fr;gap:13px;min-height:79px}.pd-step-index{width:33px;height:33px}.pd-step:not(:last-child)::after{left:16px;top:34px}.pd-step-title{font-size:14px}.pd-contact,.pd-service{width:100%}.pd-open{margin:10px 16px 17px}}
@media(prefers-reduced-motion:reduce){.hero-persona,.pd-open,.pd-contact,.pd-service{transition:none}.project-detail-dialog[open]{animation:none}}

/* Localized two-line headline stays readable next to the portrait. */
.masterpiece-hero h1{font-size:clamp(2.65rem,5.3vw,6.65rem);line-height:1.035;letter-spacing:-.07em;overflow-wrap:anywhere;max-width:850px;text-wrap:balance}
.masterpiece-hero h1 .hero-first-line{color:#f5fcf8}
.masterpiece-hero h1 em{display:inline-block;font-size:.76em;line-height:1.13;color:#b2f0d4;font-style:normal;letter-spacing:-.057em;margin-top:7px}
@media(max-width:1080px){.masterpiece-hero h1{font-size:clamp(2.5rem,4.8vw,4.7rem)}}
@media(max-width:820px){.masterpiece-hero h1{font-size:clamp(2.85rem,8.25vw,5.6rem)}}
@media(max-width:570px){.masterpiece-hero h1{font-size:clamp(2.1rem,9.6vw,4.15rem)}.masterpiece-hero h1 em{font-size:.74em}}