/* Benalpha Portfolio v1.8: faithful recreation of the two approved portfolio mockups.
   Core booking/admin/messaging/Paystack flows remain in their existing components. */
:root,html[data-theme="light"]{--mock-bg:#fff9f0;--mock-card:#fff9f1;--mock-ink:#201814;--mock-muted:#65594d;--mock-border:#eddcca;--mock-orange:#ff9300;--mock-contrast:#211811;--mock-cardtext:#211711;--mock-shadow:0 15px 34px #8e58251b;--mock-surface:#fffdfa;--mock-blue:#0e0906}
html[data-theme="dark"]{--mock-bg:#100d0b;--mock-card:#1c1713;--mock-ink:#fff7ef;--mock-muted:#c6b3a2;--mock-border:#45352b;--mock-orange:#ff9100;--mock-contrast:#140f0d;--mock-cardtext:#fff8ef;--mock-shadow:0 15px 34px #0005;--mock-surface:#15100d;--mock-blue:#130e0c}
.studio-home.mockup-home{background:var(--mock-bg);color:var(--mock-ink);transition:background .25s,color .25s}
.mockup-home .container{max-width:1330px}
.mock-hero-section{overflow:hidden;background:radial-gradient(ellipse 50% 65% at 75% 65%,#ff990020 0,transparent 78%),var(--mock-bg)}
.mock-hero{display:grid;grid-template-columns:47% 53%;min-height:585px;position:relative}
.mock-hero-copy{z-index:4;position:relative;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:48px 6px 55px 18px}
.mock-hero-kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--mock-border);padding:9px 15px;border-radius:99px;font-size:12px;color:var(--mock-ink);font-weight:650;background:var(--mock-card);margin-bottom:20px}
.mock-hero-kicker span{font-size:17px}
.mock-hero h1{font-size:clamp(3.55rem,5.2vw,6rem);letter-spacing:-.075em;line-height:1.02;font-weight:900;margin:0 0 20px;color:var(--mock-ink)}
.mock-hero h1>span:not(.mock-period){color:var(--mock-orange)}.mock-period{color:var(--mock-orange)}
.mock-hero h2{font-size:clamp(18px,1.7vw,25px);font-weight:680;letter-spacing:-.035em;color:var(--mock-ink);line-height:1.25;margin:0 0 18px}
.mock-hero-copy>p{font-size:14px;line-height:1.7;max-width:490px;color:var(--mock-muted);margin:0 0 22px}
.mock-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mock-actions .btn{min-height:48px;padding:10px 22px;border-radius:999px;font-size:13px}
.mock-button-main{gap:17px}.mock-button-main span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#241610;color:#ffc078;font-size:17px}
.mock-social-links{display:flex;gap:11px;align-items:center;margin-top:24px}
.mock-social-links a,.mock-social-links span,.mock-social-links button{display:grid;place-items:center;width:37px;height:37px;border:1px solid var(--mock-border);border-radius:12px;background:var(--mock-card);color:var(--mock-ink);font-size:15px;font-weight:900;text-decoration:none;padding:0}
.mock-social-links button:hover{background:var(--mock-orange);color:#1b1009}
.mock-hero-photo{position:relative;min-height:585px;overflow:hidden;isolation:isolate}
.mock-orange-blob{position:absolute;z-index:0;width:90%;height:91%;bottom:-18%;right:-9%;border-radius:48% 40% 22% 38%;background:linear-gradient(128deg,#ffb32a,#ff9000 60%,#ef6900);transform:rotate(-8deg);box-shadow:0 3px 90px #fe8d0028}
.mock-brand-watermark{position:absolute;font-weight:950;font-size:440px;line-height:1;left:11%;top:7%;z-index:0;opacity:.08;color:var(--mock-ink);transform:skew(-11deg);pointer-events:none}
.mock-pointing-photo{position:absolute;z-index:2;right:-8%;bottom:-4px;height:98%;width:auto;max-width:none;object-fit:contain;object-position:bottom right;filter:drop-shadow(-13px 9px 24px #0000002e);animation:mockPortraitReveal 1s cubic-bezier(.2,.7,.2,1) both}
.mock-brand-stamp{position:absolute;z-index:3;right:8%;top:10%;width:104px;height:104px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;border-radius:100%;background:#19120d;color:#ff9300;border:4px solid #e4ab50;box-shadow:0 8px 26px #0005;transform:rotate(8deg)}
.mock-brand-stamp span{font-weight:1000;font-style:italic;font-size:55px;line-height:.8}.mock-brand-stamp small{color:#fff4dc;font-weight:750;text-align:center;letter-spacing:.13em;font-size:8px;margin-top:10px}
.mock-qualities{position:absolute;z-index:3;right:3%;bottom:14%;display:flex;flex-direction:column;gap:7px;padding:16px 20px;border-radius:16px;background:#18120dde;color:#fff7ed;border:1px solid #ffffff48;box-shadow:0 12px 38px #0006;backdrop-filter:blur(10px);animation:mockFloat 6s ease-in-out infinite}
.mock-qualities span{font-size:12px;font-weight:800}.mock-qualities span:first-letter{color:#ffa41a}
.mock-credentials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;z-index:5;background:linear-gradient(105deg,#24180e,#17110d);border-radius:18px;margin-top:-1px;padding:19px 12px;box-shadow:0 8px 26px #170d0550;color:#fff5e9}
.mock-credentials>div{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;padding:8px 15px;border-right:1px solid #a995804e}
.mock-credentials>div:last-child{border-right:0}.mock-credentials b{grid-row:1/3;color:#ff9d09;font-size:26px}.mock-credentials strong{font-size:12px;letter-spacing:-.02em}.mock-credentials small{color:#bbafa4;font-size:10px}
.mock-services-section{padding:66px 0 80px}.mock-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:25px}
.mock-label{font-weight:700;font-size:13px;color:var(--mock-ink);margin-bottom:13px}.mock-label span{font-weight:900;letter-spacing:-.18em;color:var(--mock-orange);margin-right:8px}
.mock-section-head h2,.mock-about-content h2{font-size:clamp(2.3rem,3.5vw,3.9rem);line-height:1.1;letter-spacing:-.06em;margin:0;color:var(--mock-ink);font-weight:850}.mock-section-head h2 em,.mock-about-content h2 em{color:var(--mock-orange);font-style:normal}
.mock-spark{color:var(--mock-orange);font-size:28px;margin-left:5px;vertical-align:top}.mock-small-link{display:inline-flex;align-items:center;gap:14px;padding:8px 9px 8px 16px;white-space:nowrap;border:1px solid var(--mock-orange);border-radius:99px;background:transparent;color:var(--mock-ink);font-size:11px;font-weight:770}.mock-small-link span{display:grid;place-items:center;border-radius:50%;background:var(--mock-orange);color:#18100b;width:26px;height:26px;font-size:16px}
.mock-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.mock-service-card{background:var(--mock-card);border:1px solid var(--mock-border);border-radius:18px;min-height:156px;display:grid;align-items:center;grid-template-columns:75px 1fr 40px;gap:15px;padding:22px 22px 22px 25px;color:var(--mock-ink);box-shadow:var(--mock-shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.mock-service-card:hover{transform:translateY(-5px);border-color:var(--mock-orange);box-shadow:0 18px 30px #eb81001c}
.mock-service-icon{width:65px;height:65px;border-radius:18px;display:grid;place-items:center;font-size:32px;color:var(--mock-orange);background:#ff940011}
.mock-service-content h3{font-weight:800;font-size:20px;letter-spacing:-.04em;margin:0 0 6px}.mock-service-content p{font-size:12px;line-height:1.55;color:var(--mock-muted);margin:0;max-width:340px}
.mock-service-arrow{width:32px;height:32px;display:grid;place-items:center;background:var(--mock-orange);border:0;border-radius:50%;font-size:19px;color:#17100b;transition:transform .2s}.mock-service-arrow:hover{transform:rotate(45deg)}
html[data-theme="light"] .mock-service-brand,html[data-theme="light"] .mock-service-visa{background:#1e1712;color:#fff9ed;border-color:#2e241d;box-shadow:0 10px 24px #160d0630}
html[data-theme="light"] .mock-service-brand p,html[data-theme="light"] .mock-service-visa p{color:#d9cabc}
html[data-theme="light"] .mock-service-brand .mock-service-icon,html[data-theme="light"] .mock-service-visa .mock-service-icon{background:#43311e}
html[data-theme="light"] .mock-service-brand .mock-service-arrow,html[data-theme="light"] .mock-service-visa .mock-service-arrow{background:#fff8eb;color:#21130c}
html[data-theme="dark"] .mock-service-card{background:#1c1714;color:#fff6ec;border-color:#4c3f34;box-shadow:none}
html[data-theme="dark"] .mock-service-content p{color:#c9b8aa}
html[data-theme="dark"] .mock-service-web{background:linear-gradient(135deg,#ffb023,#ff8800);color:#1e1105;border-color:#ffac2d;box-shadow:0 4px 30px #ff910038}
html[data-theme="dark"] .mock-service-web .mock-service-icon{background:#ffa928;color:#1b1107}
html[data-theme="dark"] .mock-service-web p{color:#382511}
html[data-theme="dark"] .mock-service-web .mock-service-arrow{background:#24160b;color:#ff9b14}
.mock-about-section{padding:65px 0 100px;background:var(--mock-bg)}
.mock-about-grid{display:grid;grid-template-columns:42% 1fr;gap:60px;align-items:center}
.mock-about-image{height:398px;position:relative;overflow:hidden;border-radius:44px;background:transparent;isolation:isolate}
.mock-about-orange{position:absolute;bottom:-7%;left:3%;height:95%;width:88%;border-radius:28% 28% 20% 23%;background:linear-gradient(115deg,#ffb125,#fe9000);transform:rotate(-5deg)}
.mock-about-image picture img{position:absolute;left:-5%;bottom:-1px;height:107%;width:auto;max-width:none;filter:drop-shadow(0 10px 25px #0003)}
.mock-about-content h2{margin:7px 0 17px}.mock-about-content>p{font-size:14px;line-height:1.7;max-width:750px;color:var(--mock-muted)}
.mock-about-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 25px}.mock-about-skills span{font-size:11px;font-weight:800;border-bottom:1px solid var(--mock-border);padding:8px 0;color:var(--mock-ink)}
html[data-theme="dark"] .mock-about-section{background:linear-gradient(180deg,#100d0b,#17120e)}
.mockup-home .studio-catalog-section,.mockup-home .studio-visa-section,.mockup-home .studio-process-section{background:var(--mock-bg)}
.mockup-home .studio-catalog-section,.mockup-home .studio-visa-section,.mockup-home .studio-work-section,.mockup-home .studio-process-section{padding-top:55px;padding-bottom:60px}
.mockup-home .studio-section-head h2{font-size:clamp(2rem,3vw,3.2rem)}
@keyframes mockPortraitReveal{from{opacity:0;transform:translateY(45px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mockFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(min-width:1051px){html[data-theme="dark"] .mock-service-grid{grid-template-columns:repeat(6,minmax(0,1fr))}html[data-theme="dark"] .mock-service-grid>article:nth-child(-n+3){grid-column:span 2}html[data-theme="dark"] .mock-service-grid>article:nth-child(n+4){grid-column:span 3}}
@media(max-width:1150px){.mock-hero{min-height:500px}.mock-hero-photo{min-height:500px}.mock-pointing-photo{height:96%;right:-6%}.mock-hero h1{font-size:clamp(3rem,5.25vw,4.6rem)}.mock-hero-copy{padding-left:5px}.mock-service-card{grid-template-columns:53px 1fr 32px;gap:10px;padding:20px}.mock-service-icon{width:50px;height:50px;font-size:25px}.mock-service-content h3{font-size:18px}.mock-about-grid{gap:35px}}
@media(max-width:860px){.mock-hero{grid-template-columns:1fr;min-height:auto}.mock-hero-copy{padding:45px 10px 30px}.mock-hero-photo{height:505px;min-height:505px}.mock-pointing-photo{height:105%;right:4%}.mock-orange-blob{width:80%;right:0;height:98%}.mock-brand-stamp{right:9%;top:8%}.mock-service-grid{grid-template-columns:1fr 1fr}.mock-service-card{min-height:170px;grid-template-columns:1fr 34px}.mock-service-icon{grid-column:1;grid-row:1}.mock-service-content{grid-column:1/3;grid-row:2}.mock-service-arrow{grid-column:2;grid-row:1}.mock-about-grid{grid-template-columns:1fr}.mock-about-image{width:min(100%,550px);margin:auto}.mock-credentials>div{grid-template-columns:24px 1fr;gap:6px;padding:6px 12px}.mock-credentials strong{font-size:11px}.mock-credentials small{font-size:9px}.mock-credentials b{font-size:20px}}
@media(max-width:590px){.mock-hero-copy{padding:42px 3px 22px}.mock-hero-kicker{font-size:10px;padding:7px 10px;margin-bottom:16px}.mock-hero h1{font-size:clamp(3.35rem,12.8vw,4.2rem);line-height:1.05}.mock-hero h2{font-size:17px}.mock-hero-copy>p{font-size:12px;line-height:1.65}.mock-hero-photo{height:375px;min-height:375px;margin-inline:-17px}.mock-pointing-photo{height:103%;right:-2%}.mock-orange-blob{width:85%;right:0;bottom:-21%}.mock-brand-watermark{font-size:280px;top:5%}.mock-brand-stamp{width:73px;height:73px;right:6%;top:5%;border-width:2px}.mock-brand-stamp span{font-size:36px}.mock-brand-stamp small{font-size:6px;margin-top:5px}.mock-qualities{font-size:9px;bottom:9%;right:2%;padding:10px}.mock-qualities span{font-size:10px}.mock-credentials{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:6px;border-radius:15px}.mock-credentials>div:nth-child(2){border-right:0}.mock-credentials>div{border-bottom:1px solid #ffffff1b;min-height:65px}.mock-credentials>div:nth-last-child(-n+2){border-bottom:0}.mock-services-section{padding:50px 0 44px}.mock-section-head h2,.mock-about-content h2{font-size:clamp(2.08rem,8vw,3rem)}.mock-section-head{align-items:flex-start}.mock-small-link{font-size:10px;gap:5px;padding:6px 8px}.mock-small-link span{width:22px;height:22px}.mock-service-grid{grid-template-columns:1fr}.mock-service-card{display:grid;grid-template-columns:64px 1fr 32px;min-height:112px;padding:17px;gap:10px}.mock-service-icon{grid-column:1;grid-row:1;width:54px;height:54px;font-size:25px}.mock-service-content{grid-column:2;grid-row:1}.mock-service-content h3{font-size:17px}.mock-service-content p{font-size:11px}.mock-service-arrow{grid-column:3;grid-row:1}.mock-about-section{padding:30px 0 60px}.mock-about-image{height:350px}.mock-about-image picture img{height:103%}.mock-about-grid{gap:25px}.mock-about-skills{grid-template-columns:1fr 1fr}.mock-about-content>p{font-size:12px}.mock-social-links{margin-top:15px}}
@media(prefers-reduced-motion:reduce){.mock-pointing-photo,.mock-qualities,.mock-service-card{animation:none!important;transition:none!important}}
/* Match the approved light mockup's four-card service grid, while the dark mockup retains five cards. */
html[data-theme="light"] .mock-service-dashboard{display:none}