.reference-grid-single { gap: 32px; }
.kanto-preview { width: 100%; max-width: 450px; margin: auto; overflow: hidden; border: 1px solid #9c8263; border-radius: 14px; background: #f8f3e8; color: #302a23; box-shadow: 0 22px 40px #0002; transform: rotate(-2deg); transition: transform .5s ease; }
.reference-feature:hover .kanto-preview { transform: rotate(0); }
.kanto-preview-body { position: relative; padding: 22px; }
.kanto-preview-body > b { font-size: 14px; }
.kanto-preview-body > strong { display: block; margin: 20px 0; font: 32px/1.1 Georgia,serif; }
.kanto-card-demo { position: absolute; top: 55px; right: 30px; width: 115px; height: 155px; padding: 10px; border: 8px solid #d9be79; border-radius: 10px; background: #a3b7aa; transform: rotate(7deg); overflow: hidden; }
.kanto-card-art { display: grid; height: 100%; place-items: center; font-size: 65px; color: #eef1da; background: linear-gradient(145deg,#547776,#1e444c); }
.kanto-guide { position: absolute; background: #f39524; box-shadow: 0 0 5px #ffb23388; }
.kanto-guide-x { top: 15%; bottom: 15%; left: 23%; width: 2px; }
.kanto-guide-y { left: 12%; right: 12%; top: 30%; height: 2px; }
.reference-feature:hover .kanto-guide-x { animation: align-guide 1.6s ease-in-out infinite alternate; }
.kanto-measure { display: flex; gap: 12px; margin-top: 42px; }
.kanto-measure > span { flex: 1; padding: 12px; border: 1px solid #d6c9b3; border-radius: 8px; font-size: 8px; letter-spacing: 1px; }
.kanto-measure b { display: block; margin-top: 6px; font-size: 18px; letter-spacing: 0; }
@keyframes align-guide { to { transform: translateX(12px); } }
.portrait-float { animation: portrait-float 6s ease-in-out infinite; }
.portrait-card { display: block; position: relative; width: 100%; min-height: 460px; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 22px; background: transparent; color: #fff3e8; perspective: 1400px; text-align: left; }
.portrait-inner { display: block; position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.portrait-card.is-flipped .portrait-inner { transform: rotateY(180deg); }
.portrait-front, .portrait-back { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.meet-photo .portrait-front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; border-radius: 22px; }
.portrait-caption { position: absolute; bottom: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid #ffffff50; border-radius: 12px; background: #21160bdb; color: #fff3e8; font-size: 13px; }
.portrait-back { display: flex; flex-direction: column; justify-content: center; padding: 35px 28px; border: 1px solid #ad7845; background: radial-gradient(ellipse at 100% 0,#76401488,transparent 70%),#24170e; transform: rotateY(180deg); }
.portrait-kicker { margin-bottom: 14px; color: #f3c585; font-size: 8px; font-weight: 700; letter-spacing: 1.7px; }
.portrait-back > strong { margin-bottom: 18px; color: #ffda93; font: 32px/1.08 Georgia,serif; }
.portrait-facts { display: grid; gap: 12px; }
.portrait-facts > span { display: block; color: #ddc9b5; font-size: 11px; line-height: 1.5; }
.portrait-facts b { display: block; margin-bottom: 3px; color: #fff0d7; font-size: 12px; }
.portrait-signature { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid #775436; color: #f3c585; font-size: 10px; }
.portrait-suit { position: absolute; top: 12px; left: 15px; font: 12px Georgia,serif; color: #f9c36c; }
.portrait-suit-bottom { inset: auto 15px 12px auto; transform: rotate(180deg); }
@keyframes portrait-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(.5deg); } }
@media(max-width:800px) { .portrait-card { max-width: 400px; margin-inline: auto; } }
@media(max-width:450px) { .portrait-back { padding: 28px 23px; } .portrait-back > strong { font-size: 28px; margin-bottom: 14px; } .portrait-facts { gap: 9px; } .portrait-facts > span { font-size: 10px; } .portrait-facts b { font-size: 11px; } .portrait-signature { margin-top: 12px; font-size: 9px; } .kanto-card-demo { right: 16px; width: 92px; height: 130px; } .kanto-preview-body > strong { font-size: 27px; } }
@media(prefers-reduced-motion:reduce) { .portrait-float { animation: none; } .portrait-inner { transition: none; transform: none !important; } .portrait-back { transform: none; opacity: 0; } .portrait-card.is-flipped .portrait-back { opacity: 1; } .portrait-card.is-flipped .portrait-front { opacity: 0; } .kanto-preview { transition: none; } }

/* A readable personal story, with country flags that display on every device. */
.portrait-card { min-height: 640px; aspect-ratio: 2 / 3; }
.portrait-back { padding: 38px 28px; justify-content: center; }
.portrait-back > strong { margin-bottom: 20px; font-size: 34px; line-height: 1.08; }
.portrait-kicker { font-size: 8px; margin-bottom: 12px; }
.portrait-journey { display: grid; gap: 8px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #775436; }
.portrait-journey > span { display: flex; align-items: center; gap: 10px; color: #fff0d7; font-size: 12px; line-height: 1.5; }
.meet-photo .portrait-journey img { display: block; flex: 0 0 24px; width: 24px; height: 16px; object-fit: contain; border: 0; border-radius: 2px; box-shadow: none; transform: none; }
.portrait-journey small { margin-top: 3px; color: #d7bfa9; font-size: 11px; line-height: 1.5; }
.portrait-facts { gap: 17px; }
.portrait-facts > span { display: grid; grid-template-columns: 23px minmax(0,1fr); gap: 9px; font-size: 12px; line-height: 1.6; }
.portrait-facts .fact-icon { font-size: 18px; line-height: 1.4; }
.portrait-facts b { margin-bottom: 3px; font-size: 12px; }
.portrait-signature { margin-top: 20px; padding-top: 16px; color: #ddc9b5; font-size: 11px; line-height: 1.6; }
.portrait-signature b { display: block; color: #ffda93; font-size: 14px; margin-bottom: 4px; }
@media(max-width:380px) { .portrait-back { padding-inline: 23px; } .portrait-back > strong { font-size: 31px; } .portrait-card { min-height: 660px; } }

/* A stationary, shorter portrait; the card still flips on interaction. */
.portrait-card { min-height: 0; height: 500px; aspect-ratio: auto; }
.meet-photo::before, .meet-photo .portrait-front img { transform: none; }
.portrait-back { padding: 24px; overflow-y: auto; }
.portrait-back > strong { margin-bottom: 12px; font-size: 28px; }
.portrait-kicker { font-size: 7px; margin-bottom: 9px; }
.portrait-journey { gap: 4px; margin-bottom: 12px; padding-bottom: 11px; }
.portrait-journey > span { font-size: 11px; line-height: 1.35; }
.portrait-journey small { font-size: 10px; }
.portrait-facts { gap: 11px; }
.portrait-facts > span { font-size: 11px; line-height: 1.45; }
.portrait-facts b { font-size: 11px; }
.portrait-signature { margin-top: 12px; padding-top: 10px; font-size: 10px; line-height: 1.4; }
.portrait-signature b { font-size: 12px; }
.kanto-site-shot { display: block; width: 100%; height: auto; }
.kanto-phone-shot { display: block; width: 100%; height: auto; }
.pj-project-note { margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font: italic 17px/1.6 Georgia,serif; }
.kanto-case-browser img { display: block; width: 100%; height: auto; }
.kanto-case-phone { padding: 0; overflow: hidden; animation: none; }
.kanto-case-phone img { display: block; width: 100%; height: auto; }
.kanto-workflow { grid-template-columns: repeat(4,minmax(0,1fr)); }
@media(max-width:900px) { .kanto-workflow { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .kanto-workflow { grid-template-columns: 1fr; } }