/* FractalJo: Joyal's supplied pixel identity, carried through the portfolio. */
.brand-fractaljo { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:220px; flex-shrink:0; }
.brand-wordmark { position:relative; display:block; width:212px; line-height:0; }
.brand-wordmark img { display:block; width:100%; height:auto; }




.brand-fractaljo:focus-visible,.footer-fractaljo:focus-visible { outline:2px solid #96baff; outline-offset:8px; }
.footer-fractaljo { display:flex; flex-direction:column; gap:10px; letter-spacing:.17em; }
.footer-fractaljo img { width:176px; height:auto; }
.footer-fractaljo small { font:600 8px/1 var(--body); color:#9bb5e4; }
.hero { column-gap:6vw; overflow:visible; }
.hero-visual.portrait-studio { position:relative; align-self:center; width:100%; max-width:570px; height:auto; margin:35px 0 25px auto; isolation:isolate; }
.portrait-studio:before { content:''; position:absolute; z-index:-1; width:120%; height:80%; right:-10%; top:0; border:0; border-radius:0; opacity:.7; background:radial-gradient(ellipse at 52% 48%,#1b55bd45,transparent 68%); pointer-events:none; }
.portrait-artboard { position:relative; padding:10px; border:1px solid #5278bc66; background:linear-gradient(150deg,#152949,#0c1627 72%); box-shadow:0 28px 85px #01040b75; }
.portrait-artboard-top { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:26px; padding:0 2px 8px; font:600 7px/1.4 var(--body); letter-spacing:.12em; color:#9cbbea; }
.portrait-artboard-top>span:first-child { display:flex; align-items:center; gap:7px; }
.portrait-artboard-top i { width:5px; height:5px; background:#7dabff; box-shadow:0 0 10px #7dabff99; }
.portrait-studio .hero-photo-wrap { position:relative; inset:auto; width:100%; height:auto; aspect-ratio:1; margin:0; overflow:hidden; background:#07162f; }
.portrait-studio .hero-photo { display:block; width:100%; height:100%; object-fit:contain; object-position:center; filter:none; }
.portrait-studio .hero-photo-wrap:after { display:none; }
.portrait-crop-marks { position:absolute; inset:-5px; pointer-events:none; background:linear-gradient(#91b7ff,#91b7ff) left top/15px 2px,linear-gradient(#91b7ff,#91b7ff) left top/2px 15px,linear-gradient(#91b7ff,#91b7ff) right bottom/15px 2px,linear-gradient(#91b7ff,#91b7ff) right bottom/2px 15px; background-repeat:no-repeat; }









.portrait-credit { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:13px; }
.portrait-credit .image-caption { position:static; display:block; margin:0; font:600 8px/1.5 var(--body); color:#9bbcec; letter-spacing:.1em; }
.portrait-credit-mark { display:flex; align-items:center; gap:13px; color:#c3d7fa; font:700 12px var(--heading); }
.portrait-credit-mark>span { color:#6997ff; font-size:23px; line-height:1; }
.portrait-studio .hero-timeline { position:relative; inset:auto; width:84%; margin:22px 0 0 16%; transform:rotate(-2deg); }
.portrait-pixels { position:absolute; z-index:-1; inset:-18px -22px 15%; pointer-events:none; }
.portrait-pixels i { position:absolute; width:13px; height:13px; background:#4681ed; box-shadow:0 0 24px #3672d944; animation:fractal-float 7s ease-in-out infinite; }
.portrait-pixels i:nth-child(1) { right:8%; top:-6px; width:26px; height:26px; }
.portrait-pixels i:nth-child(2) { right:0; top:16%; width:9px; height:9px; animation-delay:-2s; }
.portrait-pixels i:nth-child(3) { left:-5px; top:39%; background:#9dbdff; animation-delay:-5s; }
.portrait-pixels i:nth-child(4) { left:2%; bottom:13%; width:22px; height:22px; background:#3053a0; animation-delay:-3s; }
.portrait-pixels i:nth-child(5) { right:4%; bottom:15%; width:6px; height:6px; background:#abcaff; animation-delay:-1s; }
.portrait-pixels i:nth-child(6) { left:16%; top:0; width:6px; height:6px; animation-delay:-4s; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.statement-bottom { position:relative; gap:20px; }
.statement-wordmark { position:absolute; width:145px; height:auto; left:50%; top:50%; transform:translate(-50%,-50%); opacity:.7; }





.about-detail .stat-grid { clear:both; }
.enquiry-identity { display:flex; gap:15px; align-items:center; margin-bottom:32px; padding-bottom:25px; border-bottom:1px solid #2a4265; }
.enquiry-identity>img { width:80px; height:80px; border:1px solid #6b8fcc; border-radius:4px; object-fit:cover; }
.enquiry-identity>div { min-width:0; }
.enquiry-identity span { font:600 7px/1.6 var(--body); letter-spacing:.1em; color:#8cb5fa; }
.enquiry-identity strong { display:block; font:600 25px/1.2 var(--heading); letter-spacing:-.04em; margin:5px 0 8px; }
.enquiry-identity small { display:block; font-size:10px; line-height:1.5; color:#a2b9df; }
@keyframes fractal-float { 0%,100%{translate:0 0;opacity:.7} 50%{translate:0 -9px;opacity:1} }
@media(min-width:1500px) { .hero-visual.portrait-studio { max-width:620px; } }
@media(min-width:1101px) and (max-width:1450px) { .hero { column-gap:4vw; } .brand-fractaljo { min-width:200px; } .brand-wordmark { width:192px; }  .hero-visual.portrait-studio { max-width:500px; }   }
@media(min-width:761px) and (max-width:1100px) { .brand-fractaljo { min-width:175px; } .brand-wordmark { width:170px; }  .hero { column-gap:4vw; }      }
@media(max-width:800px) { .hero-visual.portrait-studio { max-width:480px; margin:25px auto 30px; } }
@media(max-width:760px) { .brand-fractaljo { min-width:0; gap:7px; } .brand-wordmark { width:164px; }   .hero-visual.portrait-studio { width:calc(100% - 6px); margin-top:12px; } .portrait-artboard { padding:8px; } .portrait-artboard-top { font-size:6px; gap:6px; min-height:24px; }     .portrait-credit .image-caption { font-size:7px; } .portrait-credit-mark { font-size:10px; gap:8px; } .portrait-pixels { inset:-10px -10px 15%; } .portrait-studio .hero-timeline { margin-top:22px; width:88%; margin-left:12%; }  .statement-wordmark { width:104px; } .footer-fractaljo img { width:150px; } .enquiry-identity { margin-top:0; } }
@media(max-width:430px) { .statement-wordmark { position:static; transform:none; width:115px; order:3; margin-top:15px; } .statement-bottom { flex-wrap:wrap; justify-content:space-between; }   .portrait-credit-mark { display:none; } }
@media(max-width:360px) { .brand-wordmark { width:140px; }   .portrait-artboard-top { font-size:5px; }  .enquiry-identity>img { width:62px; height:62px; } .enquiry-identity strong { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { .portrait-pixels i { animation:none; } }

/* Blue identity, with small illuminated pixels on hover and keyboard focus. */
.brand-fractaljo { min-width:0; padding:8px 0; }
.brand-wordmark img { transition:filter .3s ease; }
.brand-pixel-glow { position:absolute; inset:-10px; pointer-events:none; }
.brand-pixel-glow i { position:absolute; width:4px; height:4px; background:#83b4ff; box-shadow:0 0 10px #4b8dff,0 0 20px #2667ff; opacity:0; transform:scale(.4); transition:opacity .25s,transform .35s; }
.brand-pixel-glow i:nth-child(1) { left:8%; top:0; }
.brand-pixel-glow i:nth-child(2) { right:22%; top:-3px; transition-delay:.06s; }
.brand-pixel-glow i:nth-child(3) { right:0; bottom:4px; transition-delay:.12s; }
.brand-pixel-glow i:nth-child(4) { left:26%; bottom:-2px; transition-delay:.18s; }
.brand-fractaljo:is(:hover,:focus-visible) .brand-wordmark img { filter:drop-shadow(0 0 5px #337cffaa) drop-shadow(0 0 16px #2453ff66); }
.brand-fractaljo:is(:hover,:focus-visible) .brand-pixel-glow i { opacity:1; transform:scale(1); }
.about-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6vw; align-items:start; }
.about-lead .about-large { font-size:clamp(22px,1.8vw,29px); }





.about-detail { padding-top:8px; }
.about-detail>p { font-size:15px; line-height:1.75; }
.about-detail .personal-brand-note { margin:26px 0; padding:17px 0 17px 17px; border-left:2px solid #5e8bff; font-size:14px; color:#b8c9e5; }
.personal-brand-note>span { display:block; margin-bottom:8px; font:600 8px/1.5 var(--body); letter-spacing:.13em; color:#86aaff; }
.personal-brand-note>strong { font-family:var(--heading); color:#e6edff; }
.about-detail .stat-grid { gap:16px; }
.about-detail .stat-grid strong { font-size:clamp(31px,3.4vw,52px); }
@media(max-width:1100px) and (min-width:601px) {
  .about-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5vw; }

  .about-lead .about-large { max-width:600px; margin-top:20px; margin-bottom:22px; }
  
}
@media(max-width:600px) {
  .about-grid { grid-template-columns:minmax(0,1fr); gap:35px; }
  
  .about-detail>p { font-size:15px; }
  .about-detail .stat-grid strong { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) {
  .brand-wordmark img,.brand-pixel-glow i { transition:none; }
}