:root{
    --ink:#0d0d0f;
    --ink-soft:#171719;
    --ivory:#f5f1e8;
    --paper:#fbfaf6;
    --gold:#c2a15d;
    --gold-soft:#d3bb83;
    --stone:#a9a49b;
    --line:rgba(255,255,255,.16);
    --dark-line:rgba(13,13,15,.14);
    --max:1440px;
    --gutter:clamp(1.25rem,4vw,4.5rem);
    --serif:'Playfair Display', Georgia, serif;
    --sans:'DM Sans', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--ink);
    color:var(--ivory);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
::selection{background:var(--gold);color:var(--ink)}

.skip-link{
    position:fixed;left:1rem;top:-5rem;z-index:1000;
    background:var(--ivory);color:var(--ink);padding:.8rem 1rem
}
.skip-link:focus{top:1rem}

.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

.site-header{
    position:fixed;z-index:100;left:0;right:0;top:0;
    min-height:78px;padding:0 var(--gutter);
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid transparent;
    transition:background .35s,border-color .35s,backdrop-filter .35s;
}
.site-header.scrolled{
    background:rgba(13,13,15,.88);
    border-color:var(--line);
    backdrop-filter:blur(16px)
}
.brand{display:flex;align-items:center;gap:.8rem;font-size:.78rem;letter-spacing:.18em;font-weight:500}
.brand-mark{
    width:42px;height:42px;border:1px solid var(--gold);
    display:flex;align-items:center;justify-content:center;gap:.08em;
    white-space:nowrap;overflow:hidden;
    letter-spacing:0;font-family:var(--serif);font-size:.8rem;line-height:1
}
.brand-mark > span{display:block;flex:0 0 auto}
.brand-amp{color:var(--gold);font-style:italic;font-size:.94em;margin:0 .02em}
.gold{color:var(--gold);padding:0 .05rem}
.site-nav{display:flex;gap:clamp(1.2rem,2vw,2.4rem)}
.site-nav a{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;position:relative;color:#dedbd4}
.site-nav a::after{
    content:"";position:absolute;left:0;bottom:-.45rem;width:100%;height:1px;
    background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .25s
}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.menu-toggle{display:none;background:none;border:0;color:var(--ivory);width:44px;height:44px}
.menu-toggle span:not(.sr-only){display:block;width:22px;height:1px;background:currentColor;margin:6px auto}

.section-dark{background:var(--ink);color:var(--ivory)}
.section-light{background:var(--paper);color:var(--ink)}
.section-ivory{background:var(--ivory);color:var(--ink)}
.section-gold{background:var(--gold);color:var(--ink)}

.hero{
    min-height:100svh;
    padding:clamp(8.5rem,13vh,11rem) var(--gutter) 4rem;
    display:flex;position:relative;align-items:center;
    overflow:hidden;
}
.hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,transparent,black 30%,black 75%,transparent)
}
.hero-grid{
    width:min(var(--max),100%);margin:auto;
    display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
    gap:clamp(2rem,6vw,8rem);align-items:end;position:relative;z-index:1
}
.hero-grid>.eyebrow{grid-column:1/-1}
.eyebrow{
    margin:0 0 1.25rem;
    font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--gold-soft)
}
.eyebrow.dark{color:#706b61}
.hero-title-wrap{position:relative;min-width:0;max-width:100%;overflow:visible}
.hero-title{margin:0;font-weight:500;line-height:.72;letter-spacing:-.065em;max-width:100%}
.hero-title-row{display:flex;align-items:flex-end;gap:clamp(1rem,2vw,2.25rem);width:max-content;max-width:100%}
.hero-line{display:block;font-size:clamp(5.6rem,12.5vw,12.5rem)}
.ink-line{font-family:var(--serif)}
.pixel-line{font-family:var(--sans);font-weight:300;letter-spacing:-.09em}
.ampersand{
    position:static;flex:0 0 auto;margin:0 0 .14em 0;
    font-family:var(--serif);font-style:italic;font-size:clamp(2.7rem,4.2vw,4.5rem);
    line-height:1;color:var(--gold)
}
.hero-copy{max-width:500px;padding-bottom:1rem;border-left:1px solid var(--gold);padding-left:clamp(1.25rem,2.5vw,2.25rem)}
.hero-copy p{color:#c7c4bd}
.hero-kicker{font-family:var(--serif);font-size:clamp(1.8rem,3vw,3.1rem);line-height:1.12!important;color:var(--ivory)!important;margin:.1rem 0 1.5rem}
.gold-text{color:var(--gold-soft)}
.button-row{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:2rem}
.button{
    display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
    min-height:52px;padding:.7rem 1.2rem;border:1px solid transparent;
    font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600
}
.button-gold{background:var(--gold);color:var(--ink)}
.button-gold:hover{background:var(--gold-soft)}
.button-outline{border-color:rgba(255,255,255,.35)}
.button-outline:hover{border-color:var(--gold);color:var(--gold-soft)}
.text-link{font-size:.82rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:.2rem}
.scroll-cue{
    position:absolute;right:var(--gutter);bottom:2rem;display:flex;gap:.75rem;
    color:#8e8b85;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase
}

.worlds,.featured,.learning,.publishing,.about,.contact{
    padding:clamp(6rem,10vw,10rem) var(--gutter)
}
.section-intro{
    width:min(var(--max),100%);margin:0 auto clamp(4rem,7vw,7rem);
    display:grid;grid-template-columns:90px minmax(0,850px);gap:1.5rem
}
.section-intro.light{color:var(--ivory)}
.section-number{font-family:var(--serif);font-size:1.1rem;color:var(--gold)}
.section-intro h2,.about h2,.publishing h2,.contact h2{
    margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.035em;
    font-size:clamp(3rem,6.4vw,6.6rem);line-height:.98
}
.world-grid{
    width:min(var(--max),100%);margin:auto;
    display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--dark-line)
}
.world-card{padding:clamp(2rem,3.5vw,4rem);min-height:440px;display:flex;flex-direction:column;border-right:1px solid var(--dark-line)}
.world-card:last-child{border-right:0}
.world-card.feature{background:var(--ink);color:var(--ivory);transform:translateY(-1.5rem)}
.world-index{font-family:var(--serif);font-size:1.1rem;color:var(--gold);margin-bottom:auto}
.world-card h3{font-family:var(--serif);font-size:clamp(2rem,3vw,3rem);line-height:1.05;margin:.4rem 0 1rem;font-weight:500}
.world-card p:not(.eyebrow){max-width:340px;color:#777268}
.world-card.feature p:not(.eyebrow){color:#bbb7ae}
.world-card a{margin-top:2rem;padding-top:1rem;border-top:1px solid currentColor;font-size:.77rem;text-transform:uppercase;letter-spacing:.08em}

.featured{position:relative}
.hero-project{
    width:min(var(--max),100%);margin:0 auto clamp(5rem,8vw,8rem);
    display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:clamp(2rem,5vw,6rem);align-items:center
}
.project-visual{
    aspect-ratio:16/10;background:
        radial-gradient(circle at 20% 25%,rgba(194,161,93,.28),transparent 34%),
        #1d2020;
    padding:clamp(1.2rem,4vw,4rem);display:grid;place-items:center
}
.browser-frame{width:100%;height:100%;background:#f4f1e9;border:1px solid rgba(255,255,255,.3);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.browser-bar{height:34px;background:#dedad2;display:flex;align-items:center;gap:6px;padding:0 12px}
.browser-bar i{width:7px;height:7px;border-radius:50%;background:#999}
.browser-placeholder{height:calc(100% - 34px);display:grid;place-content:center;text-align:center;color:#182226;background:linear-gradient(135deg,#f4f1e9 50%,#e7dbb9)}
.browser-placeholder span{font-family:var(--serif);font-size:clamp(2.3rem,5vw,5rem)}
.browser-placeholder small{letter-spacing:.12em;text-transform:uppercase}
.project-copy h3{font-size:clamp(3rem,6vw,6.7rem);margin:0;font-weight:300;letter-spacing:-.06em}
.project-lead{font-family:var(--serif);font-size:clamp(1.6rem,2.5vw,2.7rem);line-height:1.2;color:var(--ivory)}
.project-copy>p:last-of-type{color:#aaa69d}
.project-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin:2rem 0}
.project-meta span{border:1px solid var(--line);padding:.4rem .7rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#aaa69d}
.project-list{width:min(var(--max),100%);margin:auto;border-top:1px solid var(--line)}
.project-row{
    display:grid;grid-template-columns:70px 1fr 1.1fr 30px;gap:1rem;align-items:center;
    padding:1.5rem 0;border-bottom:1px solid var(--line);transition:padding .25s,color .25s
}
.project-row:hover{padding-left:1rem;color:var(--gold-soft)}
.project-number{font-family:var(--serif);color:var(--gold)}
.project-row strong{display:block;font-weight:500;font-size:1.1rem}
.project-row small,.project-strapline{color:#8e8a82;font-size:.78rem}
.project-arrow{font-size:1.2rem}

.learning-layout{
    width:min(var(--max),100%);margin:auto;
    display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(3rem,7vw,8rem);align-items:center
}
.large-copy{font-family:var(--serif);font-size:clamp(1.6rem,2.7vw,2.8rem);line-height:1.25;margin-top:0}
.learning-copy>p:not(.large-copy){color:#6e6a61;max-width:540px}
.dark-link{border-color:rgba(13,13,15,.25)}
.device-stage{min-height:560px;position:relative;display:grid;place-items:center}
.device{
    background:#171719;border:1px solid #333;padding:10px;box-shadow:0 30px 70px rgba(0,0,0,.18)
}
.desktop{width:min(680px,90%);aspect-ratio:16/10}
.tablet{position:absolute;width:34%;aspect-ratio:3/4;right:2%;bottom:3%;border-radius:14px}
.device-top{height:15px;background:#29292d;margin:-3px -3px 8px}
.miftah-screen{
    height:calc(100% - 15px);background:#f8f3e9;color:#152020;padding:9%;
    display:flex;flex-direction:column;justify-content:center
}
.miftah-screen strong{font-family:var(--serif);font-size:clamp(2rem,4vw,4.5rem);line-height:1}
.mini-label{font-size:.62rem;letter-spacing:.2em;margin-bottom:1rem;color:#8a6f35}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:2rem}
.mini-grid i,.compact i{display:block;height:42px;background:#d9cfb7}
.compact{height:100%;padding:14%}
.compact strong{font-size:clamp(1.1rem,2vw,2rem);margin-bottom:1.5rem}
.compact i{margin:.35rem 0;height:26px}
.miftah-grid{width:min(var(--max),100%);margin:5rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--dark-line)}
.miftah-card{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;padding:1.5rem 1rem;border-bottom:1px solid var(--dark-line);border-right:1px solid var(--dark-line)}
.miftah-card:last-child{border-right:0}
.miftah-card>span{font-family:var(--serif);color:#9b7d3e}
.miftah-card strong{font-weight:500}
.miftah-card small{grid-column:2;color:#777268}

.publishing{overflow:hidden}
.publishing-heading{width:min(var(--max),100%);margin:0 auto}
.publishing-heading h2{font-size:clamp(4.5rem,11vw,11.5rem);line-height:.8}
.book-stage{
    width:min(var(--max),100%);margin:clamp(5rem,8vw,8rem) auto;
    display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:clamp(1rem,2vw,2rem);perspective:1200px
}
.book{
    aspect-ratio:2/3;padding:12%;display:flex;flex-direction:column;justify-content:center;
    box-shadow:0 25px 60px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);
    transition:transform .35s ease
}
.book:hover{transform:translateY(-14px) rotateY(-3deg)}
.book span,.book small{font-size:.58rem;letter-spacing:.15em;text-transform:uppercase}
.book strong{font-family:var(--serif);font-size:clamp(1.6rem,3vw,3.2rem);line-height:1;margin:.5rem 0}
.book-one{background:#e5d5b0;color:#24211d;transform:rotate(-4deg)}
.book-two{background:#22302d;color:#f5f1e8;transform:translateY(2rem) rotate(3deg)}
.book-three{background:#efe9dd;color:#362f2a;transform:rotate(-2deg)}
.book-four{background:#b89550;color:#151515;transform:translateY(1rem) rotate(4deg)}
.publishing-copy{width:min(650px,100%);margin-left:auto;margin-right:max(0px,calc((100% - var(--max))/2));font-size:1.1rem;color:#bdb9b0}

.about-grid{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:1fr 1fr;gap:clamp(3rem,8vw,10rem);align-items:end
}
.dark-gold{color:#a18142}
.about-copy p:not(.large-copy){color:#6f6a61;max-width:570px}

.testimonial{
    padding:clamp(5rem,9vw,9rem) var(--gutter);display:grid;
    grid-template-columns:.25fr 1fr;gap:2rem;align-items:start
}
.quote-mark{font-family:var(--serif);font-size:clamp(6rem,13vw,13rem);line-height:.5;opacity:.45}
blockquote{margin:0;max-width:1100px}
blockquote>p{font-family:var(--serif);font-size:clamp(2.2rem,5vw,5rem);line-height:1.05;margin:0}
blockquote footer{display:flex;gap:1rem;align-items:center;margin-top:2rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
blockquote footer span{opacity:.65}

.contact{text-align:center;min-height:75vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.contact h2{font-size:clamp(3.5rem,8vw,8rem)}
.contact-link{
    margin-top:3rem;font-size:clamp(1.1rem,2vw,1.7rem);
    border-bottom:1px solid var(--gold);padding-bottom:.35rem
}

.footer{
    padding:3rem var(--gutter);border-top:1px solid var(--line);
    display:grid;grid-template-columns:1fr auto;gap:1.5rem;background:var(--ink);color:#918d85
}
.footer-brand{color:var(--ivory);letter-spacing:.16em;font-size:.8rem}
.footer p{margin:.4rem 0 0;font-size:.75rem}
.footer-links{display:flex;gap:1.2rem;font-size:.75rem}
.copyright{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.5rem}

.reveal{
    opacity:0;transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)
}
.reveal.in-view{opacity:1;transform:none}

@media (max-width:900px){
    .site-header{min-height:68px}
    .brand-name{display:none}
    .menu-toggle{display:block}
    .site-nav{
        position:fixed;inset:68px 0 auto 0;background:rgba(13,13,15,.98);
        padding:2rem var(--gutter) 3rem;display:flex;flex-direction:column;
        transform:translateY(-140%);transition:transform .3s;border-bottom:1px solid var(--line)
    }
    .site-nav.open{transform:none}
    .site-nav a{font-size:1rem;padding:.55rem 0}
    .hero-grid,.hero-project,.learning-layout,.about-grid{grid-template-columns:1fr}
    .hero{align-items:flex-end}
    .hero-copy{max-width:650px;margin-top:1rem}
    .world-grid{grid-template-columns:1fr}
    .world-card{min-height:330px;border-right:0;border-bottom:1px solid var(--dark-line)}
    .world-card.feature{transform:none}
    .project-row{grid-template-columns:48px 1fr auto}
    .project-strapline{display:none}
    .device-stage{min-height:440px}
    .miftah-grid{grid-template-columns:1fr}
    .miftah-card{border-right:0}
    .book-stage{grid-template-columns:repeat(2,1fr)}
    .testimonial{grid-template-columns:1fr}
    .quote-mark{height:50px}
}
@media (max-width:620px){
    .hero{padding-top:7.5rem}
    .hero-line{font-size:clamp(4.2rem,24vw,7.6rem)}
    .hero-title{line-height:.78}
    .hero-title-row{gap:1rem}
    .ampersand{font-size:2.2rem;margin-bottom:.12em}
    .hero-copy{border-left:0;border-top:1px solid var(--gold);padding:1.5rem 0 0}
    .scroll-cue{display:none}
    .section-intro{grid-template-columns:1fr;gap:.25rem}
    .worlds,.featured,.learning,.publishing,.about,.contact{padding-top:5rem;padding-bottom:5rem}
    .device-stage{min-height:350px}
    .desktop{width:100%}
    .tablet{width:38%;right:-2%}
    .book-stage{grid-template-columns:1fr 1fr;gap:.8rem}
    .book strong{font-size:1.4rem}
    blockquote footer{align-items:flex-start;flex-direction:column;gap:.25rem}
    .footer{grid-template-columns:1fr}
    .footer-links{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
}

/* --- V3: real portfolio imagery --------------------------------------- */
.project-visual-real{
    position:relative;
    min-height:650px;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 44%, rgba(194,161,93,.25), transparent 34%),
        linear-gradient(145deg,#111214,#20201f);
    border:1px solid var(--line);
    isolation:isolate;
}
.project-visual-real::before{
    content:"SUNSHINE";
    position:absolute;
    left:-.03em;
    bottom:-.08em;
    z-index:-1;
    color:rgba(255,255,255,.035);
    font-size:clamp(5rem,10vw,11rem);
    font-weight:300;
    letter-spacing:-.07em;
    white-space:nowrap;
}
.project-orbit{
    position:absolute;
    width:min(78%,620px);
    aspect-ratio:1;
    border:1px solid rgba(194,161,93,.28);
    border-radius:50%;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
}
.project-orbit::before,.project-orbit::after{
    content:"";
    position:absolute;
    inset:12%;
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
}
.project-orbit::after{inset:28%;border-color:rgba(194,161,93,.16)}
.sunshine-device{
    position:relative;
    z-index:2;
    width:min(47%,370px);
    max-height:590px;
    object-fit:contain;
    filter:drop-shadow(0 30px 38px rgba(0,0,0,.46));
}
.project-visual-caption{
    position:absolute;
    left:1.4rem;bottom:1.2rem;
    color:#8f8a81;
    font-size:.62rem;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.project-actions{display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap}

.project-gallery{
    width:min(var(--max),100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
}
.project-card{
    min-width:0;
    background:var(--ink);
    transition:background .28s ease, transform .28s ease;
}
.project-card:hover{background:#131316}
.project-card-visual{
    min-height:460px;
    position:relative;
    display:grid;
    place-items:center;
    padding:2.6rem 1.3rem 1.7rem;
    overflow:hidden;
    background:
        linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.035));
}
.project-card:nth-child(1) .project-card-visual{background:linear-gradient(145deg,#102021,#17201f)}
.project-card:nth-child(2) .project-card-visual{background:linear-gradient(145deg,#18131d,#251a2c)}
.project-card:nth-child(3) .project-card-visual{background:linear-gradient(145deg,#201a15,#171411)}
.project-card-visual::after{
    content:"";
    position:absolute;
    width:72%;aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(194,161,93,.15);
}
.project-card-visual img{
    position:relative;
    z-index:2;
    width:min(61%,245px);
    height:390px;
    object-fit:contain;
    filter:drop-shadow(0 22px 28px rgba(0,0,0,.4));
    transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.project-card:hover .project-card-visual img{transform:translateY(-9px) scale(1.015)}
.project-card .project-number{
    position:absolute;
    z-index:3;
    top:1.1rem;left:1.25rem;
    font-size:.92rem;
}
.project-card-copy{
    position:relative;
    min-height:220px;
    padding:1.55rem 1.6rem 1.8rem;
    border-top:1px solid var(--line);
}
.project-card-copy small{
    display:block;
    color:#8f8a82;
    font-size:.67rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:.7rem;
}
.project-card-copy strong{
    display:block;
    font-family:var(--serif);
    font-size:clamp(1.55rem,2.2vw,2.15rem);
    font-weight:500;
    line-height:1.05;
}
.project-card-copy p{color:#969188;font-size:.84rem;max-width:30rem;margin:1rem 2rem 0 0}
.project-card-copy .project-arrow{position:absolute;right:1.5rem;bottom:1.4rem;color:var(--gold)}

.asset-note{
    position:absolute;
    top:1rem;left:50%;
    transform:translateX(-50%);
    z-index:5;
    width:max-content;
    max-width:88%;
    padding:.4rem .7rem;
    background:rgba(245,241,232,.86);
    border:1px solid rgba(13,13,15,.1);
    color:#736d61;
    font-size:.58rem;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.book-stage{
    width:min(var(--max),100%);
    margin:clamp(4.5rem,8vw,8rem) auto;
    display:grid;
    grid-template-columns:1.25fr 1.25fr .75fr .75fr;
    align-items:stretch;
    gap:clamp(.8rem,1.6vw,1.5rem);
    perspective:none;
}
.publication-tile{
    margin:0;
    position:relative;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--line);
    background:#151517;
}
.publication-tile img{
    display:block;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
.publication-wide{aspect-ratio:1.35/1}
.publication-cover{aspect-ratio:.76/1}
.publication-cover img{object-position:center top}
.publication-tile::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.72),transparent 42%);
    pointer-events:none;
}
.publication-tile:hover img{transform:scale(1.025);filter:saturate(.9)}
.publication-tile figcaption{
    position:absolute;z-index:2;left:1rem;right:1rem;bottom:1rem;
    display:flex;gap:.8rem;align-items:flex-end;color:#fff;
}
.publication-tile figcaption span{font-family:var(--serif);color:var(--gold-soft);font-size:.78rem}
.publication-tile figcaption strong{font-weight:500;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}

.journal-feature{
    width:min(var(--max),100%);
    margin:0 auto clamp(4.5rem,7vw,7rem);
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    border:1px solid var(--line);
    background:#121214;
}
.journal-feature img{width:100%;height:100%;min-height:420px;object-fit:cover}
.journal-feature>div{padding:clamp(2rem,4vw,4rem);align-self:center}
.journal-feature h3{
    margin:.25rem 0 1.25rem;
    font-family:var(--serif);
    font-size:clamp(2rem,3.7vw,4.2rem);
    line-height:1.03;
    font-weight:500;
    letter-spacing:-.035em;
}
.journal-feature p:not(.eyebrow){color:#aaa59b;max-width:560px}

@media (max-width:1100px){
    .project-gallery{grid-template-columns:repeat(2,1fr)}
    .project-card:last-child{grid-column:1/-1}
    .project-card:last-child .project-card-visual img{width:min(36%,235px)}
    .book-stage{grid-template-columns:1fr 1fr}
    .publication-wide,.publication-cover{aspect-ratio:1.08/1}
    .publication-cover img{object-position:center 20%}
}
@media (max-width:760px){
    .project-visual-real{min-height:500px}
    .sunshine-device{width:min(60%,280px);max-height:450px}
    .project-gallery{grid-template-columns:1fr}
    .project-card:last-child{grid-column:auto}
    .project-card-visual{min-height:390px}
    .project-card-visual img,.project-card:last-child .project-card-visual img{width:min(56%,210px);height:325px}
    .journal-feature{grid-template-columns:1fr}
    .journal-feature img{min-height:300px;max-height:420px}
}
@media (max-width:520px){
    .book-stage{grid-template-columns:1fr}
    .publication-wide,.publication-cover{aspect-ratio:1.05/1}
    .publication-cover img{object-position:center 28%}
    .project-actions{align-items:flex-start;flex-direction:column}
}


/* --- V4: layout cleanup ------------------------------------------------
   Keeps the V3 visual language while removing content overlap and
   standardising the publishing presentation.
------------------------------------------------------------------------ */

/* Featured SUNSHINE: disciplined two-column layout with no overflow. */
.hero-project{
    width:min(1320px,100%);
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);
    gap:clamp(2.5rem,4.5vw,5rem);
    align-items:center;
}
.hero-project > *{min-width:0}

.project-visual-real{
    min-height:0;
    aspect-ratio:1.28/1;
    width:100%;
    padding:clamp(1.5rem,2.5vw,2.75rem);
}
.sunshine-device{
    width:min(43%,320px);
    max-width:320px;
    max-height:88%;
}
.project-copy{
    min-width:0;
    position:relative;
    z-index:2;
}
.project-copy h3{
    font-size:clamp(3rem,4.8vw,5.2rem);
    line-height:.95;
}
.project-lead{
    font-size:clamp(1.55rem,2.1vw,2.35rem);
}

/* Miftah devices: displayed beside one another rather than on top of text. */
.device-stage{
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(150px,.31fr);
    gap:clamp(.8rem,1.5vw,1.35rem);
    align-items:end;
}
.desktop{
    width:100%;
    max-width:none;
}
.tablet{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    justify-self:end;
}
.miftah-screen strong{
    max-width:72%;
    font-size:clamp(2rem,3.4vw,4rem);
}
.compact strong{
    max-width:100%;
    font-size:clamp(1.2rem,1.8vw,1.9rem);
}

/* Publishing: equal-size frames and equal visual weight for every title. */
.book-stage{
    width:min(var(--max),100%);
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;
    gap:clamp(1rem,1.7vw,1.6rem);
}
.publication-tile,
.publication-wide,
.publication-cover{
    aspect-ratio:4/5;
    min-height:0;
    background:#151517;
}
.publication-tile img,
.publication-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.publication-tile figcaption{
    min-height:3.5rem;
    align-items:flex-end;
}
.publication-tile figcaption strong{
    line-height:1.2;
}

/* Ensure the equal-grid rule wins over V3's mixed-width rules. */
@media (max-width:1100px){
    .hero-project{
        grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);
        gap:2.5rem;
    }
    .book-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
    .publication-wide,.publication-cover{aspect-ratio:4/5}
    .publication-cover img{object-position:center}
}
@media (max-width:900px){
    .hero-project{grid-template-columns:1fr}
    .project-visual-real{
        aspect-ratio:1.42/1;
        max-height:none;
    }
    .sunshine-device{width:min(38%,280px)}
    .project-copy{max-width:680px}
    .device-stage{
        grid-template-columns:minmax(0,1fr) minmax(130px,.3fr);
        gap:.8rem;
    }
}
@media (max-width:620px){
    .project-visual-real{aspect-ratio:1.1/1}
    .sunshine-device{width:min(54%,255px)}
    .device-stage{grid-template-columns:1fr}
    .tablet{
        width:min(52%,220px);
        justify-self:end;
    }
    .miftah-screen strong{max-width:100%}
}
@media (max-width:520px){
    .book-stage{grid-template-columns:1fr 1fr}
    .publication-wide,.publication-cover{aspect-ratio:4/5}
}
@media (max-width:390px){
    .book-stage{grid-template-columns:1fr}
}


/* ======================================================================
   V5 — dedicated Publishing page
   ====================================================================== */

.site-nav a[aria-current="page"]{color:var(--gold-soft)}
.site-nav a[aria-current="page"]::after{transform:scaleX(1)}

.publication-home-caption{
    min-height:3.5rem;display:flex;gap:.75rem;align-items:flex-end;
    justify-content:space-between;padding:.85rem 0 0;color:var(--ivory)
}
.publication-home-caption>span{font-family:var(--serif);color:var(--gold)}
.publication-home-caption strong{line-height:1.2}
.publication-tile{display:block}

.publishing-page{background:var(--ink)}
.publishing-hero{
    min-height:96svh;padding:clamp(9rem,13vw,12rem) var(--gutter) clamp(5rem,8vw,8rem);
    display:flex;align-items:center;overflow:hidden;position:relative
}
.publishing-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to bottom,transparent,black 20%,black 85%,transparent)
}
.publishing-hero-inner{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
    gap:clamp(3rem,6vw,8rem);align-items:center;position:relative;z-index:1
}
.publishing-hero-copy h1{
    font-family:var(--serif);font-weight:500;letter-spacing:-.05em;
    font-size:clamp(4rem,8.2vw,8.8rem);line-height:.9;margin:.25rem 0 2rem
}
.publishing-deck{
    max-width:650px;color:#b8b4ac;font-size:clamp(1.05rem,1.5vw,1.3rem)
}
.publishing-hero-art{min-height:650px;position:relative;perspective:1200px}
.hero-book{
    margin:0;position:absolute;overflow:hidden;background:#18181a;
    border:1px solid rgba(255,255,255,.18);box-shadow:0 38px 90px rgba(0,0,0,.5)
}
.hero-book img{width:100%;height:100%;object-fit:cover}
.hero-book-a{width:44%;aspect-ratio:4/5;left:4%;top:13%;transform:rotate(-6deg) translateZ(30px);z-index:3}
.hero-book-b{width:42%;aspect-ratio:4/5;right:6%;top:1%;transform:rotate(5deg);z-index:2}
.hero-book-c{width:36%;aspect-ratio:4/5;right:18%;bottom:0;transform:rotate(-1deg) translateZ(60px);z-index:4}
.hero-orbit{
    position:absolute;width:86%;aspect-ratio:1;border-radius:50%;
    border:1px solid rgba(194,161,93,.28);left:7%;top:7%
}
.hero-orbit::after{content:"";position:absolute;inset:13%;border:1px solid rgba(255,255,255,.08);border-radius:50%}

.publishing-intro{padding:clamp(6rem,9vw,9rem) var(--gutter)}
.publication-intro-grid{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:.34fr 1.66fr;gap:clamp(2rem,6vw,7rem);align-items:start
}
.publication-intro-grid h2{
    margin:0 0 2rem;font-family:var(--serif);font-weight:500;letter-spacing:-.04em;
    font-size:clamp(3rem,6vw,6rem);line-height:.98
}
.publication-intro-grid .large-copy{max-width:950px}

.series-section{padding:clamp(6rem,9vw,9rem) var(--gutter)}
.series-grid{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--dark-line);
    border:1px solid var(--dark-line)
}
.series-card{
    background:var(--paper);color:var(--ink);display:grid;
    grid-template-columns:minmax(190px,.78fr) minmax(0,1.22fr);
    min-height:430px;transition:background .25s;overflow:hidden
}
.series-card:hover{background:#f0eadf}
.series-image{overflow:hidden;min-height:100%}
.series-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.series-card:hover .series-image img{transform:scale(1.035)}
.series-copy{padding:clamp(2rem,3.5vw,3.6rem);display:flex;flex-direction:column}
.series-topline{
    display:flex;justify-content:space-between;gap:1rem;margin-bottom:auto;
    font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#807a70
}
.series-topline span:first-child{font-family:var(--serif);font-size:1rem;color:#9d7d3d}
.series-copy h3{
    font-family:var(--serif);font-size:clamp(2.2rem,3.4vw,3.8rem);
    font-weight:500;line-height:1;margin:.35rem 0 1rem
}
.series-copy>p:not(.eyebrow){color:#706b62;max-width:520px}
.series-link{
    margin-top:2rem;padding-top:1rem;border-top:1px solid var(--dark-line);
    font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600
}

.catalogue{padding:clamp(6rem,9vw,9rem) var(--gutter)}
.catalogue-heading{
    width:min(var(--max),100%);margin:0 auto 3rem;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.45fr);
    gap:clamp(2rem,6vw,7rem);align-items:end
}
.catalogue-heading h2{
    margin:0;font-family:var(--serif);font-size:clamp(3.2rem,6.5vw,6.5rem);
    line-height:.95;font-weight:500;letter-spacing:-.04em
}
.catalogue-heading>p{color:#aaa69d;max-width:510px;margin:0 0 .5rem}

.filter-bar{
    width:min(var(--max),100%);margin:0 auto clamp(4rem,7vw,7rem);
    display:flex;gap:.55rem;flex-wrap:wrap;padding:1rem 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.filter-button{
    background:transparent;color:#b8b4ac;border:1px solid var(--line);
    padding:.7rem .95rem;cursor:pointer;text-transform:uppercase;
    letter-spacing:.08em;font-size:.68rem
}
.filter-button:hover,.filter-button.active{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.catalogue-groups{width:min(var(--max),100%);margin:auto}
.catalogue-group{padding:0 0 clamp(5rem,8vw,8rem);scroll-margin-top:100px}
.catalogue-group[hidden]{display:none}
.catalogue-group-heading{
    display:grid;grid-template-columns:90px 1fr;gap:1.25rem;
    align-items:start;margin-bottom:2rem
}
.catalogue-index{font-family:var(--serif);color:var(--gold);font-size:1.1rem}
.catalogue-group-heading h3{
    margin:0;font-family:var(--serif);font-size:clamp(2.5rem,4.6vw,4.8rem);
    line-height:1;font-weight:500
}
.publication-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(1rem,1.6vw,1.5rem)
}
.publication-card{
    border:1px solid var(--line);display:flex;flex-direction:column;
    min-height:510px;background:#111113;transition:transform .25s,border-color .25s
}
.publication-card:hover{transform:translateY(-6px);border-color:rgba(194,161,93,.6)}
.publication-card-image,.publication-card-graphic{aspect-ratio:4/5;overflow:hidden}
.publication-card-image img{width:100%;height:100%;object-fit:cover}
.publication-card-graphic{
    padding:clamp(1.4rem,2.3vw,2.2rem);
    background:
        radial-gradient(circle at 88% 12%,rgba(194,161,93,.19),transparent 28%),
        linear-gradient(145deg,#171719,#0d0d0f);
    border-bottom:1px solid var(--line);
    display:flex;flex-direction:column;justify-content:flex-end;position:relative
}
.publication-card-graphic::before{content:"";position:absolute;inset:13%;border:1px solid rgba(194,161,93,.17)}
.publication-card-graphic>span{
    position:absolute;top:1.5rem;left:1.5rem;color:var(--gold);
    font-family:var(--serif);font-size:1rem
}
.publication-card-graphic strong{
    position:relative;z-index:1;font-family:var(--serif);
    font-size:clamp(1.65rem,2.3vw,2.55rem);line-height:1.03;font-weight:500
}
.publication-card-graphic small{
    position:relative;z-index:1;margin-top:.8rem;color:#8f8b83;
    text-transform:uppercase;letter-spacing:.12em;font-size:.6rem
}
.publication-card-body{padding:1.35rem;display:flex;flex-direction:column;flex:1}
.publication-type{
    color:var(--gold-soft)!important;text-transform:uppercase;letter-spacing:.12em;
    font-size:.6rem!important;margin:0 0 .8rem!important
}
.publication-card-body h4{
    margin:0 0 .65rem;font-family:var(--serif);font-size:1.5rem;font-weight:500;line-height:1.1
}
.publication-card-body>p{color:#98948c;font-size:.82rem;margin:0 0 1.5rem}
.amazon-link{
    margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
    font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600
}
.amazon-link:hover{color:var(--gold-soft)}

.publishing-amazon{padding:clamp(5rem,8vw,8rem) var(--gutter)}
.publishing-amazon-inner{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:1.2fr .8fr;gap:clamp(3rem,8vw,9rem);align-items:end
}
.publishing-amazon h2{
    margin:0;font-family:var(--serif);font-size:clamp(3rem,6.3vw,6.4rem);
    font-weight:500;letter-spacing:-.04em;line-height:.95
}
.publishing-amazon-inner>div:last-child p{max-width:500px}
.button-dark{background:var(--ink);color:var(--ivory);margin-top:1rem}
.button-dark:hover{background:var(--ink-soft);color:var(--gold-soft)}

.publishing-back{
    min-height:60vh;padding:clamp(6rem,9vw,9rem) var(--gutter);
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start
}
.publishing-back h2{
    margin:.4rem 0 2.5rem;font-family:var(--serif);font-weight:500;
    font-size:clamp(3.2rem,6.6vw,6.7rem);line-height:.96;letter-spacing:-.04em
}

@media (max-width:1100px){
    .publishing-hero-inner{grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr)}
    .publishing-hero-art{min-height:560px}
    .series-card{grid-template-columns:1fr}
    .series-image{height:280px;min-height:0}
    .publication-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
    .publishing-hero{min-height:auto}
    .publishing-hero-inner{grid-template-columns:1fr}
    .publishing-hero-art{min-height:540px}
    .publication-intro-grid,.catalogue-heading,.publishing-amazon-inner{grid-template-columns:1fr}
    .series-grid{grid-template-columns:1fr}
    .publication-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
    .publishing-hero{padding-top:7.5rem}
    .publishing-hero-art{min-height:410px}
    .hero-book-a{width:47%;left:2%}
    .hero-book-b{width:45%;right:1%}
    .hero-book-c{width:39%;right:18%}
    .series-card{min-height:0}
    .series-image{height:245px}
    .catalogue-group-heading{grid-template-columns:1fr;gap:.35rem}
    .publication-grid{grid-template-columns:1fr 1fr}
    .publication-card{min-height:460px}
}
@media (max-width:480px){
    .publication-grid{grid-template-columns:1fr}
    .publication-card{min-height:0}
    .publication-card-graphic,.publication-card-image{aspect-ratio:4/4.6}
}


/* ======================================================================
   V6 — Internal project case studies
   ====================================================================== */

.project-card-link{
    display:inline-block;margin-top:.6rem;color:var(--gold-soft);
    font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600
}
.case-study-page{background:var(--ink)}
.case-hero{
    min-height:96svh;padding:clamp(9rem,13vw,12rem) var(--gutter) clamp(5rem,8vw,8rem);
    display:flex;align-items:center;overflow:hidden;position:relative
}
.case-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to bottom,transparent,black 18%,black 85%,transparent)
}
.case-hero-inner{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(430px,1.18fr);
    gap:clamp(3rem,6vw,8rem);align-items:center;position:relative;z-index:1
}
.case-back{
    display:inline-block;margin-bottom:3rem;color:#9d9991;
    font-size:.7rem;text-transform:uppercase;letter-spacing:.12em
}
.case-back:hover{color:var(--gold-soft)}
.case-index-row{
    display:flex;gap:1rem;align-items:center;margin-bottom:1.2rem;
    color:var(--gold-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.15em
}
.case-number{font-family:var(--serif);font-size:1rem}
.case-hero-copy h1{
    margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.055em;
    font-size:clamp(4.2rem,8.7vw,9rem);line-height:.86
}
.case-kicker{
    margin:2rem 0 0;max-width:680px;font-family:var(--serif);
    font-size:clamp(1.55rem,2.5vw,2.7rem);line-height:1.18;color:#d3cfc7
}
.case-service-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.2rem 0 0}
.case-service-list span{
    border:1px solid var(--line);padding:.42rem .72rem;color:#97938b;
    text-transform:uppercase;letter-spacing:.09em;font-size:.62rem
}
.case-hero-visual{min-height:650px;position:relative;display:grid;place-items:center}
.case-hero-visual img{
    position:relative;z-index:2;width:min(42%,320px);max-height:86%;
    object-fit:contain;filter:drop-shadow(0 35px 65px rgba(0,0,0,.45))
}
.case-orbit{
    position:absolute;width:84%;aspect-ratio:1;border:1px solid rgba(194,161,93,.3);
    border-radius:50%
}
.case-orbit::after{
    content:"";position:absolute;inset:14%;border:1px solid rgba(255,255,255,.08);border-radius:50%
}
.case-image-label{
    position:absolute;left:0;bottom:0;color:#716e68;
    text-transform:uppercase;letter-spacing:.12em;font-size:.58rem
}
.case-overview{padding:clamp(6rem,9vw,9rem) var(--gutter)}
.case-overview-grid{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:.34fr 1.66fr;gap:clamp(2rem,6vw,7rem)
}
.case-intro{
    margin:0 0 2rem;max-width:1050px;font-family:var(--serif);
    font-size:clamp(2rem,4.1vw,4.1rem);line-height:1.1;color:var(--ink)
}
.case-overview-grid>div:last-child>p:last-child{max-width:780px;color:#6d685f;font-size:1.05rem}
.case-story{padding:clamp(6rem,9vw,9rem) var(--gutter)}
.case-story-grid{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:1fr 1fr;border:1px solid var(--dark-line)
}
.case-story-block{
    padding:clamp(2.5rem,5vw,5rem);min-height:500px;
    display:flex;flex-direction:column;border-right:1px solid var(--dark-line)
}
.case-story-block:last-child{border-right:0}
.case-story-number{font-family:var(--serif);color:#9b7d3e;margin-bottom:auto}
.case-story-block h2{
    margin:.4rem 0 1.4rem;font-family:var(--serif);font-size:clamp(2.2rem,3.7vw,3.9rem);
    line-height:1.02;font-weight:500;letter-spacing:-.035em
}
.case-story-block>p:last-child{max-width:580px;color:#706b62}
.case-feature-section{padding:clamp(6rem,9vw,9rem) var(--gutter)}
.case-feature-heading{
    width:min(var(--max),100%);margin:0 auto clamp(4rem,7vw,7rem);
    display:grid;grid-template-columns:90px minmax(0,900px);gap:1.25rem
}
.case-feature-heading h2{
    margin:0;font-family:var(--serif);font-size:clamp(3rem,6.2vw,6.4rem);
    line-height:.96;font-weight:500;letter-spacing:-.04em
}
.case-feature-layout{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.7fr);
    gap:clamp(3rem,6vw,7rem);align-items:center
}
.case-device-stage{
    min-height:650px;background:
        radial-gradient(circle at 50% 45%,rgba(194,161,93,.17),transparent 38%),
        #141416;
    border:1px solid var(--line);display:grid;place-items:center;position:relative
}
.case-device-frame{width:min(43%,330px);max-height:88%;position:relative;z-index:2}
.case-device-frame img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 55px rgba(0,0,0,.48))}
.case-feature-list{border-top:1px solid var(--line)}
.case-feature-item{
    display:grid;grid-template-columns:55px 1fr;gap:1rem;
    padding:1.55rem 0;border-bottom:1px solid var(--line);align-items:start
}
.case-feature-item span{font-family:var(--serif);color:var(--gold)}
.case-feature-item p{margin:0;color:#c2beb5;font-size:1.02rem}
.case-testimonial{
    padding:clamp(5rem,9vw,9rem) var(--gutter);display:grid;
    grid-template-columns:.25fr 1fr;gap:2rem;align-items:start
}
.case-testimonial blockquote{margin:0;max-width:1150px}
.case-testimonial blockquote>p{
    font-family:var(--serif);font-size:clamp(2rem,4.7vw,4.9rem);line-height:1.06;margin:0
}
.case-pagination{padding:0 var(--gutter)}
.case-pagination-inner{
    width:min(var(--max),100%);margin:auto;display:grid;
    grid-template-columns:1fr 1fr;border-top:1px solid var(--dark-line)
}
.case-pagination-link{
    min-height:220px;padding:2.5rem 0;display:flex;flex-direction:column;
    justify-content:center;border-right:1px solid var(--dark-line)
}
.case-pagination-link.next{text-align:right;align-items:flex-end;border-right:0}
.case-pagination-link small{
    color:#807b72;text-transform:uppercase;letter-spacing:.12em;font-size:.64rem;margin-bottom:.7rem
}
.case-pagination-link strong{
    font-family:var(--serif);font-size:clamp(2rem,3.7vw,3.8rem);font-weight:500;line-height:1
}
.case-pagination-link:hover strong{color:#9f7f40}

@media (max-width:1050px){
    .case-hero-inner{grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr)}
    .case-hero-visual{min-height:560px}
    .case-feature-layout{grid-template-columns:1fr}
    .case-device-stage{min-height:560px}
}
@media (max-width:900px){
    .case-hero{min-height:auto}
    .case-hero-inner,.case-overview-grid{grid-template-columns:1fr}
    .case-hero-visual{min-height:500px}
    .case-story-grid{grid-template-columns:1fr}
    .case-story-block{min-height:420px;border-right:0;border-bottom:1px solid var(--dark-line)}
    .case-story-block:last-child{border-bottom:0}
    .case-testimonial{grid-template-columns:1fr}
}
@media (max-width:620px){
    .case-hero{padding-top:7.5rem}
    .case-hero-visual{min-height:390px}
    .case-hero-visual img{width:min(55%,260px)}
    .case-feature-heading{grid-template-columns:1fr}
    .case-device-stage{min-height:440px}
    .case-device-frame{width:min(58%,280px)}
    .case-pagination-inner{grid-template-columns:1fr}
    .case-pagination-link{min-height:165px;border-right:0;border-bottom:1px solid var(--dark-line)}
    .case-pagination-link.next{align-items:flex-start;text-align:left;border-bottom:0}
}


/* ======================================================================
   V7 — Miftah Arabic Workbook integration
   ====================================================================== */
.learning-links{
    display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;margin-top:1.75rem
}
.learning-links .text-link{margin-top:0}
.miftah-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.miftah-card{
    min-height:118px;align-content:center;transition:background .22s,color .22s
}
.miftah-card:hover{background:rgba(194,161,93,.08)}
.miftah-card.workbook-card{
    background:rgba(194,161,93,.07);box-shadow:inset 0 2px 0 rgba(194,161,93,.52)
}
.miftah-card.workbook-card:hover{background:rgba(194,161,93,.13)}
.miftah-card small{line-height:1.45}

@media (max-width:1180px) and (min-width:901px){
    .miftah-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .miftah-card:nth-child(2){border-right:0}
    .miftah-card:nth-child(3){border-right:1px solid var(--dark-line)}
}
@media (max-width:900px){
    .miftah-grid{grid-template-columns:1fr}
    .miftah-card{border-right:0}
}

/* ======================================================================
   V8 — real publication cover presentation
   ====================================================================== */
.publication-card-image{
    background:#eee9df;
    padding:clamp(.75rem,1.2vw,1rem);
    display:grid;
    place-items:center;
}
.publication-card-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}
@media (max-width:480px){
    .publication-card-image{
        aspect-ratio:4/5;
    }
}


/* ======================================================================
   V10 — Structure & polish
   ====================================================================== */

/* Refined monogram */
.brand-mark{
    width:42px;height:42px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    justify-items:center;
    gap:.05rem;
    padding:0 .34rem;
    border:1px solid rgba(194,161,93,.85);
    letter-spacing:0;
    font-family:var(--serif);
    font-size:.86rem;
}
.brand-letter{color:var(--ivory);line-height:1}
.brand-amp{
    color:var(--gold);
    font-style:italic;
    font-size:.78em;
    line-height:1;
    transform:translateY(-.03em)
}
.site-nav a[aria-current="page"]{color:var(--gold-soft)}
.site-nav a[aria-current="page"]::after{transform:scaleX(1)}

/* Homepage preview refinements */
.section-more{
    width:min(var(--max),100%);
    margin:3rem auto 0;
    display:flex;
    justify-content:flex-end
}
.learning-ecosystem{
    min-height:500px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 45%,rgba(194,161,93,.15),transparent 42%),
        #ebe5d8;
    border:1px solid var(--dark-line);
    overflow:hidden
}
.learning-ecosystem::before{
    content:"";
    position:absolute;
    width:72%;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(13,13,15,.1)
}
.ecosystem-card{
    position:relative;
    z-index:2;
    width:min(55%,390px);
    min-height:290px;
    padding:clamp(2rem,3vw,3rem);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 65px rgba(13,13,15,.16)
}
.ecosystem-card span{
    margin-bottom:auto;
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.18em
}
.ecosystem-card strong{
    font-family:var(--serif);
    font-size:clamp(2rem,3.4vw,3.8rem);
    font-weight:500;
    line-height:.95
}
.ecosystem-card small{
    margin-top:1rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:.58rem
}
.ecosystem-main{
    transform:translate(-12%,-6%);
    background:var(--ink);
    color:var(--ivory)
}
.ecosystem-secondary{
    position:absolute;
    width:min(38%,270px);
    min-height:230px;
    transform:translate(55%,42%);
    background:var(--gold);
    color:var(--ink);
    border-color:rgba(13,13,15,.1)
}
.ecosystem-secondary strong{font-size:clamp(1.5rem,2.4vw,2.6rem)}

.portfolio-close{
    min-height:72vh;
    padding:clamp(6rem,10vw,10rem) var(--gutter);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start
}
.portfolio-close h2{
    max-width:1200px;
    margin:.2rem 0 3rem;
    font-family:var(--serif);
    font-weight:500;
    letter-spacing:-.045em;
    font-size:clamp(3.4rem,7.5vw,7.7rem);
    line-height:.93
}
.portfolio-close-links{
    display:flex;
    gap:clamp(1rem,3vw,3rem);
    flex-wrap:wrap;
    border-top:1px solid var(--line);
    width:min(850px,100%);
    padding-top:1.3rem
}
.portfolio-close-links a{
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.11em;
    color:#c1bdb5
}
.portfolio-close-links a:hover{color:var(--gold-soft)}

/* Footer: discreet professional enquiries */
.footer{
    grid-template-columns:1fr auto auto;
    align-items:start;
    gap:2rem
}
.footer-enquiries{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.3rem
}
.footer-enquiries span{
    color:#77736c;
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.12em
}
.footer-enquiries a{
    color:#c7c3bb;
    font-size:.76rem;
    border-bottom:1px solid rgba(194,161,93,.35)
}

/* Shared portfolio-page hero */
.portfolio-page-hero{
    min-height:84svh;
    padding:clamp(10rem,14vw,13rem) var(--gutter) clamp(6rem,9vw,9rem);
    display:flex;
    align-items:flex-end;
    position:relative;
    overflow:hidden
}
.portfolio-page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.22;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to bottom,transparent,black 20%,black 90%)
}
.portfolio-page-hero-inner{
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(300px,.55fr);
    gap:clamp(3rem,8vw,9rem);
    align-items:end;
    position:relative;
    z-index:1
}
.portfolio-page-hero h1{
    margin:.25rem 0 0;
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(4.4rem,9vw,9.3rem);
    line-height:.86;
    letter-spacing:-.055em
}
.portfolio-page-deck{
    padding-left:clamp(1.3rem,2.5vw,2.2rem);
    border-left:1px solid var(--gold)
}
.portfolio-page-deck p{
    color:#b9b5ad;
    font-size:clamp(1rem,1.35vw,1.2rem)
}

/* Work page */
.work-intro,
.learning-philosophy{
    padding:clamp(6rem,9vw,9rem) var(--gutter)
}
.work-intro-grid{
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:90px minmax(0,1fr);
    gap:clamp(1rem,4vw,4rem)
}
.work-intro-grid h2{
    max-width:1150px;
    margin:0 0 1.8rem;
    font-family:var(--serif);
    font-weight:500;
    letter-spacing:-.04em;
    font-size:clamp(3rem,5.8vw,5.9rem);
    line-height:.98
}
.work-intro-grid>div>p:last-child{
    max-width:750px;
    color:#6f6a61
}
.work-collection{
    padding:clamp(6rem,9vw,9rem) var(--gutter)
}
.work-case-grid{
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:1px solid var(--dark-line);
    border-left:1px solid var(--dark-line)
}
.work-case-card{
    display:grid;
    grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr);
    min-height:420px;
    border-right:1px solid var(--dark-line);
    border-bottom:1px solid var(--dark-line);
    color:var(--ink);
    background:var(--paper);
    overflow:hidden
}
.work-case-visual{
    position:relative;
    display:grid;
    place-items:center;
    padding:2rem;
    background:
        radial-gradient(circle at 50% 45%,rgba(194,161,93,.18),transparent 38%),
        #18181a;
    overflow:hidden
}
.work-case-visual img{
    max-width:62%;
    max-height:82%;
    object-fit:contain;
    filter:drop-shadow(0 24px 35px rgba(0,0,0,.4));
    transition:transform .35s ease
}
.work-case-card:hover .work-case-visual img{transform:translateY(-7px) scale(1.015)}
.work-case-number{
    position:absolute;
    top:1.25rem;
    left:1.25rem;
    color:var(--gold);
    font-family:var(--serif)
}
.work-case-copy{
    padding:clamp(2rem,3.7vw,3.8rem);
    display:flex;
    flex-direction:column;
    justify-content:flex-end
}
.work-case-copy h3{
    margin:.3rem 0 1rem;
    font-family:var(--serif);
    font-size:clamp(2.2rem,3.4vw,3.7rem);
    line-height:.98;
    font-weight:500
}
.work-case-copy>p:not(.eyebrow){color:#706b62}
.work-case-copy>span{
    margin-top:1.2rem;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:600;
    color:#8d7138
}
.work-principles,
.learning-capabilities{
    padding:clamp(6rem,9vw,9rem) var(--gutter)
}
.principle-grid{
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line)
}
.principle{
    min-height:330px;
    padding:clamp(2rem,3.5vw,3.6rem);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column
}
.principle>span{
    margin-bottom:auto;
    font-family:var(--serif);
    color:var(--gold)
}
.principle h3{
    margin:.5rem 0 1rem;
    font-family:var(--serif);
    font-size:clamp(1.9rem,2.8vw,2.9rem);
    font-weight:500;
    line-height:1
}
.principle p{color:#aaa69d}
.cross-link{
    padding:clamp(5rem,8vw,8rem) var(--gutter)
}
.cross-link-inner{
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:1fr auto;
    gap:3rem;
    align-items:end
}
.cross-link h2{
    max-width:950px;
    margin:0;
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(3rem,5.8vw,5.8rem);
    line-height:.96;
    letter-spacing:-.04em
}

/* Learning page */
.miftah-ecosystem-page{
    padding:clamp(6rem,9vw,9rem) var(--gutter)
}
.ecosystem-flow{
    width:min(var(--max),100%);
    margin:0 auto clamp(6rem,8vw,8rem);
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:1rem;
    align-items:center
}
.ecosystem-flow-card{
    min-height:290px;
    padding:clamp(2rem,3vw,3rem);
    border:1px solid var(--dark-line);
    background:var(--paper);
    display:flex;
    flex-direction:column;
    justify-content:center
}
.ecosystem-flow-card.feature{
    background:var(--ink);
    color:var(--ivory);
    border-color:var(--ink)
}
.ecosystem-flow-card>span{
    margin-bottom:auto;
    color:#8f743b;
    font-size:.62rem;
    letter-spacing:.14em
}
.ecosystem-flow-card strong{
    font-family:var(--serif);
    font-size:clamp(2.2rem,3.3vw,3.5rem);
    font-weight:500;
    line-height:1
}
.ecosystem-flow-card p{color:#716c63}
.ecosystem-flow-card.feature p{color:#aaa69d}
.ecosystem-flow-arrow{
    color:#9b7e42;
    font-size:1.5rem
}
.learning-project-grid{
    width:min(var(--max),100%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem
}
.learning-project-card{
    border:1px solid var(--dark-line);
    background:var(--paper);
    color:var(--ink);
    scroll-margin-top:100px
}
.learning-project-top{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.25rem;
    border-bottom:1px solid var(--dark-line);
    color:#777168;
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.1em
}
.learning-project-top span:first-child{
    color:#997a3d;
    font-family:var(--serif);
    font-size:.9rem
}
.learning-project-art{
    min-height:310px;
    padding:clamp(2rem,4vw,4rem);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    position:relative;
    overflow:hidden
}
.learning-project-art::before{
    content:"";
    position:absolute;
    width:60%;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid currentColor;
    opacity:.12;
    right:-10%;
    top:-20%
}
.learning-project-art>span{
    margin-bottom:auto;
    font-size:.6rem;
    letter-spacing:.18em
}
.learning-project-art strong{
    max-width:80%;
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(2.2rem,4vw,4.3rem);
    line-height:.92
}
.learning-art-lessons{background:#13211f;color:#f3eee3}
.learning-art-workbook{background:#b99550;color:#171719}
.learning-art-english{background:#e7e2d7;color:#203031}
.learning-art-islamiyat{background:#202224;color:#f3eee3}
.learning-project-copy{padding:clamp(1.6rem,3vw,2.6rem)}
.learning-project-copy h3{
    margin:0 0 .8rem;
    font-family:var(--serif);
    font-size:clamp(1.9rem,2.8vw,2.9rem);
    font-weight:500
}
.learning-project-copy p{color:#6f6a62;max-width:620px}
.button-dark-outline{
    border-color:rgba(13,13,15,.25);
    color:var(--ink);
    margin-top:1rem
}
.button-dark-outline:hover{border-color:#9c7e40;color:#765e2e}

/* Responsive polish */
@media (max-width:1100px){
    .portfolio-page-hero-inner{grid-template-columns:1fr .55fr}
    .work-case-grid{grid-template-columns:1fr}
    .work-case-card{grid-template-columns:minmax(220px,.65fr) 1.35fr}
    .learning-project-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
    .footer{grid-template-columns:1fr auto}
    .footer-enquiries{
        grid-column:1/-1;
        align-items:flex-start;
        border-top:1px solid var(--line);
        padding-top:1.2rem
    }
    .portfolio-page-hero{min-height:auto}
    .portfolio-page-hero-inner{grid-template-columns:1fr}
    .portfolio-page-deck{
        max-width:680px;
        margin-top:1rem
    }
    .work-intro-grid{grid-template-columns:1fr}
    .principle-grid{grid-template-columns:1fr}
    .principle{min-height:260px}
    .cross-link-inner{grid-template-columns:1fr}
    .ecosystem-flow{
        grid-template-columns:1fr;
        gap:.65rem
    }
    .ecosystem-flow-arrow{
        transform:rotate(90deg);
        justify-self:center
    }
    .learning-project-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
    .work-case-card{grid-template-columns:1fr}
    .work-case-visual{min-height:330px}
    .work-case-visual img{max-width:42%;max-height:260px}
    .learning-ecosystem{min-height:430px}
    .ecosystem-card{width:68%}
    .ecosystem-secondary{width:47%}
}
@media (max-width:620px){
    .brand-mark{width:40px;height:40px}
    .section-more{justify-content:flex-start}
    .portfolio-close{min-height:62vh}
    .footer{
        grid-template-columns:1fr;
    }
    .footer-links{order:2}
    .footer-enquiries{grid-column:auto;order:3}
    .copyright{order:4}
    .work-case-visual img{max-width:55%}
    .learning-ecosystem{min-height:370px}
    .ecosystem-card{
        width:78%;
        min-height:230px;
        transform:translate(-5%,-5%)
    }
    .ecosystem-secondary{
        width:54%;
        min-height:175px;
        transform:translate(36%,46%)
    }
}


/* ======================================================================
   V11 — Live QA & brand polish
   ====================================================================== */

:where(a, button, input, select, textarea):focus-visible{
    outline:2px solid var(--gold);
    outline-offset:4px;
}


/* ======================================================================
   V12 — Nassar Store live-project refresh
   ====================================================================== */

.project-card-visual .project-image-retail{
    width:min(82%,340px);
    height:auto;
    max-height:340px;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:3px;
    box-shadow:0 26px 50px rgba(0,0,0,.32);
}

.work-case-visual-retail img{
    max-width:84%;
    max-height:84%;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:3px;
}

.case-hero-visual .case-main-image{
    position:relative;
    z-index:2;
    width:min(42%,320px);
    max-height:86%;
    object-fit:contain;
    filter:drop-shadow(0 35px 65px rgba(0,0,0,.45));
}

.case-hero-visual.case-visual-retail .case-main-image{
    width:min(70%,570px);
    max-height:72%;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:3px;
    box-shadow:0 34px 70px rgba(0,0,0,.38);
    filter:none;
}

.case-brand-badge{
    position:absolute;
    z-index:4;
    width:clamp(82px,10vw,128px)!important;
    height:clamp(82px,10vw,128px);
    right:7%;
    bottom:8%;
    object-fit:cover!important;
    border:5px solid var(--ink);
    border-radius:20%;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.case-facts{
    width:min(var(--max),100%);
    margin:clamp(3rem,5vw,5rem) auto 0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid var(--dark-line);
    border-left:1px solid var(--dark-line);
}

.case-fact{
    min-height:130px;
    padding:1.5rem;
    border-right:1px solid var(--dark-line);
    border-bottom:1px solid var(--dark-line);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:1rem;
}

.case-fact span{
    color:#817b71;
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.case-fact strong{
    font-family:var(--serif);
    font-size:clamp(1.25rem,2vw,1.8rem);
    line-height:1.05;
    font-weight:500;
}

.case-device-frame .case-detail-image{
    width:100%;
    height:auto;
    display:block;
    filter:drop-shadow(0 30px 55px rgba(0,0,0,.48));
}

.case-device-frame.case-visual-retail{
    width:min(78%,620px);
    max-height:none;
}

.case-device-frame.case-visual-retail .case-detail-image{
    aspect-ratio:1;
    object-fit:cover;
    border-radius:3px;
    filter:drop-shadow(0 28px 55px rgba(0,0,0,.4));
}

.case-detail-badge{
    position:absolute;
    z-index:3;
    width:clamp(76px,9vw,112px)!important;
    height:clamp(76px,9vw,112px);
    right:-5%;
    bottom:-5%;
    object-fit:cover;
    border:5px solid #141416;
    border-radius:20%;
    filter:none!important;
    box-shadow:0 16px 34px rgba(0,0,0,.35);
}

@media (max-width:900px){
    .case-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
    .case-hero-visual.case-visual-retail .case-main-image{width:min(68%,520px)}
}

@media (max-width:620px){
    .project-card-visual .project-image-retail{width:min(76%,300px);height:auto}
    .work-case-visual-retail img{max-width:72%}
    .case-hero-visual.case-visual-retail .case-main-image{width:min(76%,360px)}
    .case-brand-badge{right:5%;bottom:5%}
    .case-facts{grid-template-columns:1fr 1fr}
    .case-device-frame.case-visual-retail{width:min(82%,360px)}
}


/* ======================================================================
   V13 — expanded completed-websites portfolio
   ====================================================================== */

.work-case-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px){
    .work-case-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px){
    .work-case-grid{
        grid-template-columns:1fr;
    }
}


/* ======================================================================
   V14 — website previews in matching framed screenshots
   ====================================================================== */

.site-shot-frame{
    width:100%;
    max-width:100%;
    overflow:hidden;
    border-radius:20px;
    background:#151518;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 26px 54px rgba(0,0,0,.28);
}

.site-shot-top{
    height:46px;
    display:flex;
    align-items:center;
    gap:1rem;
    padding:0 1rem;
    background:linear-gradient(180deg,#19191d,#141417);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.site-shot-dots{
    display:inline-flex;
    gap:.38rem;
    flex:0 0 auto;
}

.site-shot-dots i{
    display:block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#69645b;
}
.site-shot-dots i:nth-child(1){background:#9f665f}
.site-shot-dots i:nth-child(2){background:#a98743}
.site-shot-dots i:nth-child(3){background:#69816a}

.site-shot-url{
    min-width:0;
    flex:1 1 auto;
    text-align:center;
    color:#cbc4b8;
    font-size:.64rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transform:translateX(-12px);
}

.site-shot-screen{
    aspect-ratio:4 / 3;
    background:#0f1012;
    overflow:hidden;
    position:relative;
}

.site-shot-screen img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.project-card:hover .site-shot-screen img,
.work-case-card:hover .site-shot-screen img,
.case-hero-visual:hover .site-shot-screen img,
.case-device-frame:hover .site-shot-screen img{
    transform:scale(1.018);
}

.project-visual-real{
    min-height:0;
    aspect-ratio:auto;
    padding:clamp(1.2rem,2vw,2.1rem);
    display:grid;
    align-content:center;
}

.site-shot-frame-hero{
    width:min(100%,760px);
    margin-inline:auto;
}

.project-visual-real .site-shot-screen{
    aspect-ratio:16 / 10;
}

.project-card-visual,
.work-case-visual{
    min-height:0;
    padding:1rem;
    background:#111214 !important;
}

.project-card-visual::after,
.work-case-visual::after{
    display:none !important;
}

.project-card-visual img,
.work-case-visual img{
    position:static;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    filter:none;
    border-radius:0;
    box-shadow:none;
}

.project-card-visual .site-shot-frame,
.work-case-visual .site-shot-frame{
    width:100%;
}

.project-card-visual .site-shot-screen,
.work-case-visual .site-shot-screen{
    aspect-ratio:4 / 3;
}

.project-card-visual .project-image-retail,
.work-case-visual-retail img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.project-card-copy{
    min-height:235px;
}

.case-hero-visual{
    min-height:0;
    padding:clamp(1rem,2vw,1.5rem);
    display:grid;
    align-items:center;
    position:relative;
}

.case-hero-visual .site-shot-frame-large{
    width:min(100%,760px);
    margin-inline:auto;
    position:relative;
    z-index:2;
}

.case-hero-visual .site-shot-screen{
    aspect-ratio:16 / 10;
}

.case-main-image,
.case-detail-image{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:top center !important;
    filter:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.case-hero-visual.case-visual-retail .case-main-image,
.case-device-frame.case-visual-retail .case-detail-image{
    object-fit:cover !important;
}

.case-device-frame{
    width:min(100%,760px);
    max-height:none;
    position:relative;
    overflow:visible;
    background:none;
}

.case-device-frame .site-shot-frame-large{
    width:100%;
}

.case-device-frame .site-shot-screen{
    aspect-ratio:16 / 10;
}

.case-brand-badge{
    right:3%;
    bottom:7%;
}

.case-detail-badge{
    right:-4%;
    bottom:-4%;
}

.case-image-label{
    z-index:4;
    bottom:1.25rem;
    left:1.25rem;
}

@media (max-width:1100px){
    .project-card-copy{min-height:210px}
}

@media (max-width:760px){
    .project-visual-real .site-shot-screen,
    .case-hero-visual .site-shot-screen,
    .case-device-frame .site-shot-screen{
        aspect-ratio:4 / 3;
    }

    .site-shot-top{
        height:42px;
        padding:0 .85rem;
    }

    .site-shot-url{
        font-size:.6rem;
        letter-spacing:.1em;
        transform:none;
    }
}

@media (max-width:520px){
    .project-card-visual,
    .work-case-visual,
    .case-hero-visual{
        padding:.85rem;
    }

    .site-shot-frame{
        border-radius:16px;
    }

    .site-shot-screen{
        aspect-ratio:1.16 / 1;
    }
}


/* ======================================================================
   V15 — use live website previews instead of static images
   ====================================================================== */

.site-shot-screen{
    aspect-ratio:4 / 3 !important;
    background:#0f1012;
    overflow:hidden;
    position:relative;
}

.site-live-canvas{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#ffffff;
}

.site-live-preview{
    position:absolute;
    inset:0 auto auto 0;
    width:200%;
    height:200%;
    border:0;
    transform:scale(.5);
    transform-origin:0 0;
    background:#ffffff;
    pointer-events:none;
}

.project-visual-real .site-shot-screen{
    aspect-ratio:4 / 3 !important;
}

.project-card-visual .site-shot-screen,
.work-case-visual .site-shot-screen,
.case-hero-visual .site-shot-screen,
.case-device-frame .site-shot-screen{
    aspect-ratio:4 / 3 !important;
}

.project-card-visual img,
.work-case-visual img,
.case-main-image,
.case-detail-image{
    display:none !important;
}

.site-shot-frame{
    border-radius:18px;
}

.site-shot-frame-hero,
.site-shot-frame-large{
    width:min(100%,760px);
    margin-inline:auto;
}

.project-card-visual,
.work-case-visual{
    padding:1rem;
    background:#111214 !important;
}

.case-hero-visual,
.case-device-frame{
    width:min(100%,760px);
}

@media (max-width:760px){
    .site-live-preview{
        width:240%;
        height:240%;
        transform:scale(.4166667);
    }
}

@media (max-width:520px){
    .project-card-visual,
    .work-case-visual,
    .case-hero-visual{
        padding:.8rem;
    }

    .site-shot-screen{
        aspect-ratio:1.08 / 1 !important;
    }

    .site-live-preview{
        width:260%;
        height:260%;
        transform:scale(.3846154);
    }
}


/* ======================================================================
   V16 — static screenshot fallback for websites that block embedding
   ====================================================================== */

.project-card-visual .site-static-preview,
.work-case-visual .site-static-preview,
.case-hero-visual .site-static-preview,
.case-device-frame .site-static-preview{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:top center !important;
    border:0 !important;
}

.site-shot-screen .site-static-preview{
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.project-card:hover .site-static-preview,
.work-case-card:hover .site-static-preview,
.case-hero-visual:hover .site-static-preview,
.case-device-frame:hover .site-static-preview{
    transform:scale(1.018);
}


/* ======================================================================
   V17 — portfolio naming + premium polish pass
   ====================================================================== */

body{
    line-height:1.72;
    text-rendering:optimizeLegibility;
}

.site-header{
    min-height:84px;
}

.site-header.scrolled{
    background:rgba(10,10,12,.84);
    border-color:rgba(255,255,255,.12);
    backdrop-filter:blur(18px) saturate(120%);
    box-shadow:0 16px 42px rgba(0,0,0,.24);
}

.brand,
.site-nav a,
.footer-links a,
.text-link,
.button,
.project-card,
.work-case-card,
.world-card,
.principle,
.case-pagination-link{
    transition:color .28s ease, transform .35s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background .28s ease, box-shadow .35s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

.site-nav a{
    letter-spacing:.13em;
}

.site-nav a:hover,
.footer-links a:hover,
.text-link:hover,
.dark-link:hover{
    color:var(--gold-soft);
}

.hero-copy p,
.project-copy p,
.world-card p,
.project-card-copy p,
.work-case-copy p,
.case-feature-item p,
.case-story-block p,
.case-overview p,
.learning-copy p{
    text-wrap:pretty;
}

.hero-copy .hero-kicker,
.project-lead,
.case-kicker,
.portfolio-page-deck p,
.large-copy{
    line-height:1.38;
}

h1,h2,h3,.hero-wordmark{
    letter-spacing:-.02em;
}

.button{
    border-radius:999px;
    padding:.95rem 1.45rem;
}

.button-gold,
.button-dark,
.button-outline{
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.button-gold:hover,
.button-dark:hover,
.button-outline:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(0,0,0,.14);
}

.world-card,
.project-card,
.work-case-card,
.principle,
.case-feature-item,
.case-fact,
.ecosystem-card{
    position:relative;
    overflow:hidden;
}

.world-card::before,
.project-card::before,
.work-case-card::before,
.principle::before,
.case-feature-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(194,161,93,.08), transparent 42%, transparent 100%);
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
}

.world-card:hover,
.project-card:hover,
.work-case-card:hover,
.principle:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 48px rgba(0,0,0,.14);
}

.world-card:hover::before,
.project-card:hover::before,
.work-case-card:hover::before,
.principle:hover::before,
.case-feature-item:hover::before{
    opacity:1;
}

.world-card:hover a,
.project-card:hover .project-card-link,
.work-case-card:hover span:last-child,
.case-pagination-link:hover small{
    color:var(--gold-soft);
}

.project-card-copy{
    min-height:250px;
}

.project-card-copy strong,
.work-case-copy h3,
.world-card h3{
    line-height:1.1;
}

.project-card-copy p,
.work-case-copy p{
    color:#a8a295;
}

.featured,
.learning,
.about,
.portfolio-page-hero,
.work-collection,
.case-feature-section,
.portfolio-close{
    position:relative;
}

.featured::after,
.portfolio-page-hero::after,
.case-feature-section::after,
.portfolio-close::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(194,161,93,.35), transparent);
    opacity:.75;
}

.site-shot-frame{
    border-radius:22px;
    border:1px solid rgba(255,255,255,.16);
    background:linear-gradient(180deg, rgba(28,28,33,1), rgba(18,18,22,1));
    box-shadow:0 28px 60px rgba(0,0,0,.28);
    transform:translateZ(0);
}

.site-shot-frame:hover{
    transform:translateY(-4px);
    box-shadow:0 34px 72px rgba(0,0,0,.34);
}

.site-shot-top{
    height:48px;
    background:linear-gradient(180deg, rgba(28,28,33,1), rgba(19,19,24,1));
}

.site-shot-screen{
    background:#f3f4f6 !important;
}

.project-card-visual,
.work-case-visual,
.case-hero-visual,
.case-device-frame,
.project-visual-real{
    padding:1rem;
}

.project-visual-real .site-shot-frame,
.case-hero-visual .site-shot-frame-large,
.case-device-frame .site-shot-frame-large{
    width:min(100%, 780px);
}

.project-card .site-shot-frame,
.work-case-card .site-shot-frame{
    border-radius:20px;
}

.project-card:hover .site-shot-frame,
.work-case-card:hover .site-shot-frame{
    border-color:rgba(194,161,93,.36);
}

.case-hero-copy .case-back,
.portfolio-page-deck .text-link,
.section-more .button,
.cross-link .button{
    font-weight:500;
}

.case-pagination-link{
    min-height:174px;
}

.case-pagination-link:hover{
    background:rgba(194,161,93,.06);
}

.quote-mark{
    opacity:.9;
}

@media (max-width: 1100px){
    .project-card-copy{min-height:230px;}
}

@media (max-width: 760px){
    .site-header{min-height:78px;}
    .project-card-copy{min-height:auto;}
    .world-card:hover,
    .project-card:hover,
    .work-case-card:hover,
    .principle:hover,
    .site-shot-frame:hover{
        transform:none;
        box-shadow:none;
    }
}


/* ======================================================================
   V18 — production finish
   ====================================================================== */
.worlds,.featured,.learning,.publishing,.about,.testimonial,.portfolio-close,
.work-intro,.work-collection,.work-principles,.learning-philosophy,.miftah-ecosystem-page,
.series-section,.catalogue,.case-overview,.case-story,.case-feature-section,.case-testimonial,.case-pagination{
    content-visibility:auto;
    contain-intrinsic-size:1px 900px;
}
.site-shot-frame{isolation:isolate}
.site-shot-screen{aspect-ratio:4 / 3 !important}
.site-live-preview{will-change:transform}
.section-intro,.work-intro-grid,.publication-intro-grid,.case-overview-grid{column-gap:clamp(2.5rem,6vw,7rem)}
.section-intro h2,.work-intro-grid h2,.case-story-block h2,.publication-intro-grid h2{text-wrap:balance}
.footer-enquiries{display:flex;flex-direction:column;gap:.3rem}
.footer-enquiries span{color:#817d75;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase}
.footer-enquiries a{width:max-content;border-bottom:1px solid rgba(194,161,93,.34);transition:color .25s ease,border-color .25s ease}
.footer-enquiries a:hover{color:var(--gold-soft);border-color:var(--gold-soft)}
@media(prefers-reduced-motion:reduce){.site-live-preview{will-change:auto}}


/* ======================================================================
   V19 — homepage learning section refinement
   ====================================================================== */

.learning-layout{
    grid-template-columns:minmax(0,.84fr) minmax(460px,1.16fr);
    align-items:center;
}

.learning-copy .large-copy{
    max-width:10.5ch;
}

.learning-ecosystem{
    min-height:560px;
    padding:clamp(2rem,4vw,3rem);
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 42%,rgba(194,161,93,.10),transparent 40%),
        linear-gradient(180deg,#eee8dc 0%, #ebe5d8 100%);
}

.learning-ecosystem::before{
    width:78%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.learning-ecosystem-stack{
    position:relative;
    z-index:2;
    width:min(100%, 820px);
    display:grid;
    grid-template-rows:auto auto;
    gap:clamp(1.1rem,2vw,1.6rem);
    align-items:center;
    justify-items:center;
}

.ecosystem-card{
    position:relative;
    width:min(100%, 540px);
    min-height:238px;
    padding:clamp(1.8rem,3vw,2.6rem);
    display:grid;
    gap:.9rem;
    align-content:start;
    border-radius:0;
    box-shadow:0 26px 60px rgba(13,13,15,.14);
    overflow:hidden;
}

.ecosystem-main{
    transform:none;
    justify-self:start;
    background:linear-gradient(180deg,#050608 0%, #0b0d10 100%);
    color:var(--ivory);
}

.ecosystem-secondary{
    position:relative;
    width:min(100%, 430px);
    min-height:196px;
    transform:none;
    justify-self:end;
    background:linear-gradient(180deg,#c6a65d 0%, #c0a053 100%);
    color:var(--ink);
    border-color:rgba(13,13,15,.12);
}

.ecosystem-card span{
    margin-bottom:0;
    font-size:.72rem;
    letter-spacing:.20em;
}

.ecosystem-card strong{
    max-width:7.4ch;
    font-family:var(--serif);
    font-size:clamp(2.2rem,4vw,4.5rem);
    font-weight:500;
    line-height:.94;
    letter-spacing:-.03em;
}

.ecosystem-card small{
    margin-top:.1rem;
    font-size:.64rem;
    letter-spacing:.15em;
}

.ecosystem-card-ui{
    display:grid;
    gap:.65rem;
    margin-top:.8rem;
    width:min(100%, 300px);
}

.ecosystem-card-ui i{
    display:block;
    height:16px;
    border-radius:2px;
    opacity:.9;
}

.ecosystem-main .ecosystem-card-ui i{
    background:rgba(239,233,222,.12);
}

.ecosystem-secondary .ecosystem-card-ui i{
    background:rgba(13,13,15,.13);
}

.ecosystem-card::after{
    content:"";
    position:absolute;
    inset:auto -18% -30% auto;
    width:240px;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.06);
}

.ecosystem-secondary::after{
    border-color:rgba(13,13,15,.10);
}

@media (max-width: 1220px){
    .learning-layout{
        grid-template-columns:1fr;
        gap:clamp(2.4rem,6vw,4rem);
    }
    .learning-copy .large-copy{
        max-width:16ch;
    }
    .learning-ecosystem{
        min-height:520px;
    }
}

@media (max-width: 760px){
    .learning-ecosystem{
        min-height:auto;
        padding:1.4rem;
    }
    .learning-ecosystem-stack{
        width:100%;
        gap:1rem;
    }
    .ecosystem-card,
    .ecosystem-secondary{
        width:100%;
        min-height:auto;
        justify-self:stretch;
    }
    .ecosystem-card strong{
        max-width:8.5ch;
    }
}


/* ======================================================================
   V20 — Education naming + compact Miftah visual
   Restores the smaller, earlier overlapping composition while preventing
   the Workbook panel from being cropped.
   ====================================================================== */

.learning-layout{
    grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr);
    gap:clamp(3rem,6vw,7rem);
    align-items:center;
}

.learning-copy .large-copy{
    max-width:13ch;
}

.learning-ecosystem{
    min-height:510px;
    padding:clamp(1.8rem,3vw,2.6rem);
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 45%,rgba(194,161,93,.12),transparent 42%),
        #ebe5d8;
}

.learning-ecosystem::before{
    width:68%;
    max-width:560px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.education-visual-composition{
    position:relative;
    z-index:2;
    width:min(100%,700px);
    height:370px;
}

.education-visual-composition .ecosystem-card{
    position:absolute;
    margin:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    border-radius:0;
    box-shadow:0 25px 55px rgba(13,13,15,.16);
}

.education-visual-composition .ecosystem-card span{
    margin-bottom:auto;
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.19em;
}

.education-visual-composition .ecosystem-card strong{
    font-family:var(--serif);
    font-weight:500;
    line-height:.94;
    letter-spacing:-.035em;
}

.education-visual-composition .ecosystem-card small{
    margin-top:1rem;
    text-transform:uppercase;
    letter-spacing:.11em;
    font-size:.57rem;
}

.education-visual-composition .ecosystem-main{
    width:58%;
    min-height:286px;
    left:8%;
    top:4%;
    padding:clamp(1.8rem,2.8vw,2.5rem);
    transform:none;
    background:var(--ink);
    color:var(--ivory);
}

.education-visual-composition .ecosystem-main strong{
    font-size:clamp(2.15rem,3.5vw,3.9rem);
    max-width:7.2ch;
}

.education-visual-composition .ecosystem-secondary{
    width:37%;
    min-height:225px;
    right:7%;
    bottom:3%;
    padding:clamp(1.55rem,2.3vw,2.1rem);
    transform:none;
    background:var(--gold);
    color:var(--ink);
    border-color:rgba(13,13,15,.12);
}

.education-visual-composition .ecosystem-secondary strong{
    font-size:clamp(1.55rem,2.45vw,2.65rem);
    max-width:8ch;
}

/* Remove V19's faux horizontal bars */
.learning-ecosystem .ecosystem-card-ui{
    display:none !important;
}

@media (max-width:1220px){
    .learning-layout{
        grid-template-columns:1fr;
    }

    .learning-copy .large-copy{
        max-width:17ch;
    }

    .learning-ecosystem{
        min-height:480px;
    }

    .education-visual-composition{
        width:min(100%,650px);
        height:355px;
    }
}

@media (max-width:760px){
    .learning-ecosystem{
        min-height:auto;
        padding:1.1rem;
    }

    .education-visual-composition{
        width:100%;
        height:auto;
        display:grid;
        gap:1rem;
    }

    .education-visual-composition .ecosystem-card,
    .education-visual-composition .ecosystem-main,
    .education-visual-composition .ecosystem-secondary{
        position:relative;
        inset:auto;
        width:100%;
        min-height:210px;
        transform:none;
    }

    .education-visual-composition .ecosystem-secondary{
        min-height:180px;
    }
}


/* ======================================================================
   V21 — exact compact overlapping Miftah composition
   Matches the earlier preferred layout: black panel behind, gold Workbook
   panel overlapping it rather than sitting far away.
   ====================================================================== */

.learning-layout{
    grid-template-columns:.75fr 1.25fr !important;
    gap:clamp(3rem,7vw,8rem) !important;
    align-items:center !important;
}

.learning-copy .large-copy{
    max-width:none !important;
}

.learning-ecosystem{
    min-height:500px !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    background:
        radial-gradient(circle at 50% 45%,rgba(194,161,93,.15),transparent 42%),
        #ebe5d8 !important;
    border:1px solid var(--dark-line) !important;
    overflow:hidden !important;
}

.learning-ecosystem::before{
    content:"" !important;
    position:absolute !important;
    width:72% !important;
    aspect-ratio:1 !important;
    border-radius:50% !important;
    border:1px solid rgba(13,13,15,.1) !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    max-width:none !important;
}

.learning-ecosystem > .ecosystem-card{
    position:relative !important;
    z-index:2 !important;
    width:min(55%,390px) !important;
    min-height:290px !important;
    padding:clamp(2rem,3vw,3rem) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:0 !important;
    box-shadow:0 30px 65px rgba(13,13,15,.16) !important;
    overflow:hidden !important;
    margin:0 !important;
    inset:auto !important;
}

.learning-ecosystem > .ecosystem-card span{
    margin-bottom:auto !important;
    font-size:.62rem !important;
    text-transform:uppercase !important;
    letter-spacing:.18em !important;
}

.learning-ecosystem > .ecosystem-card strong{
    font-family:var(--serif) !important;
    font-size:clamp(2rem,3.4vw,3.8rem) !important;
    font-weight:500 !important;
    line-height:.95 !important;
    max-width:none !important;
}

.learning-ecosystem > .ecosystem-card small{
    margin-top:1rem !important;
    text-transform:uppercase !important;
    letter-spacing:.1em !important;
    font-size:.58rem !important;
}

.learning-ecosystem > .ecosystem-main{
    transform:translate(-12%,-6%) !important;
    left:auto !important;
    top:auto !important;
    background:var(--ink) !important;
    color:var(--ivory) !important;
}

.learning-ecosystem > .ecosystem-secondary{
    position:absolute !important;
    width:min(38%,270px) !important;
    min-height:230px !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(55%,42%) !important;
    background:var(--gold) !important;
    color:var(--ink) !important;
    border-color:rgba(13,13,15,.1) !important;
}

.learning-ecosystem > .ecosystem-secondary strong{
    font-size:clamp(1.5rem,2.4vw,2.6rem) !important;
}

.education-visual-composition{
    display:contents !important;
}

/* Ensure the obsolete V19/V20 decorative bars cannot reappear */
.learning-ecosystem .ecosystem-card-ui{
    display:none !important;
}

@media (max-width:1100px){
    .learning-layout{
        grid-template-columns:1fr !important;
    }

    .learning-ecosystem{
        min-height:430px !important;
    }

    .learning-ecosystem > .ecosystem-card{
        width:68% !important;
    }

    .learning-ecosystem > .ecosystem-secondary{
        width:47% !important;
    }
}

@media (max-width:760px){
    .learning-ecosystem{
        min-height:370px !important;
        padding:0 !important;
    }

    .learning-ecosystem > .ecosystem-card{
        width:70% !important;
        min-height:230px !important;
        padding:1.5rem !important;
    }

    .learning-ecosystem > .ecosystem-secondary{
        width:46% !important;
        min-height:180px !important;
    }
}

@media (max-width:520px){
    .learning-ecosystem{
        min-height:340px !important;
    }

    .learning-ecosystem > .ecosystem-card{
        width:72% !important;
        min-height:210px !important;
    }

    .learning-ecosystem > .ecosystem-secondary{
        width:48% !important;
        min-height:165px !important;
    }
}


/* ======================================================================
   V22 — Portfolio page card redesign
   Stack the preview above the details so the portfolio page feels cleaner,
   less cramped, and closer to the user's preferred wireframe.
   ====================================================================== */

.work-case-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:0 !important;
    border-top:1px solid var(--dark-line) !important;
    border-left:1px solid var(--dark-line) !important;
}

.work-case-card{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    background:var(--paper) !important;
    border-right:1px solid var(--dark-line) !important;
    border-bottom:1px solid var(--dark-line) !important;
    color:var(--ink) !important;
    overflow:hidden !important;
}

.work-case-visual{
    min-height:320px !important;
    padding:1.45rem !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:
        radial-gradient(circle at 50% 42%,rgba(194,161,93,.14),transparent 40%),
        #0f1013 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
}

.work-case-number{
    position:absolute !important;
    top:1rem !important;
    left:1rem !important;
    font-family:var(--serif) !important;
    font-size:2rem !important;
    line-height:1 !important;
    color:var(--gold) !important;
    z-index:3 !important;
}

.work-case-visual .site-shot-frame{
    width:100% !important;
    max-width:360px !important;
    margin-inline:auto !important;
    border-radius:22px !important;
}

.work-case-visual .site-shot-top{
    height:42px !important;
}

.work-case-visual .site-shot-screen{
    aspect-ratio:4 / 3 !important;
    background:#f4f4f5 !important;
}

.work-case-visual .site-static-preview,
.work-case-visual .site-shot-screen img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

.work-case-visual-retail .site-shot-screen{
    aspect-ratio:4 / 3 !important;
}

.work-case-copy{
    padding:1.7rem 1.7rem 1.9rem !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:.5rem !important;
    min-height:280px !important;
}

.work-case-copy .eyebrow{
    margin:0 0 .55rem !important;
    color:#7d776d !important;
}

.work-case-copy h3{
    margin:0 0 .35rem !important;
    font-family:var(--serif) !important;
    font-size:clamp(2rem,2.3vw,3rem) !important;
    line-height:.98 !important;
    font-weight:500 !important;
    max-width:12ch !important;
}

.work-case-copy > p:not(.eyebrow){
    margin:0 !important;
    color:#706b62 !important;
    font-size:1rem !important;
    line-height:1.62 !important;
    max-width:26ch !important;
}

.work-case-copy > span{
    margin-top:auto !important;
    padding-top:1rem !important;
    font-size:.68rem !important;
    text-transform:uppercase !important;
    letter-spacing:.12em !important;
    font-weight:600 !important;
    color:#8d7138 !important;
}

.work-case-card:hover{
    transform:translateY(-6px) !important;
    box-shadow:0 22px 48px rgba(0,0,0,.14) !important;
}

.work-case-card:hover .site-shot-frame{
    border-color:rgba(194,161,93,.34) !important;
}

.work-case-card:hover .site-shot-screen img,
.work-case-card:hover .site-static-preview{
    transform:scale(1.015) !important;
}

@media (max-width:1300px){
    .work-case-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width:860px){
    .work-case-grid{
        grid-template-columns:1fr !important;
    }

    .work-case-visual{
        min-height:300px !important;
    }

    .work-case-copy{
        min-height:0 !important;
    }

    .work-case-copy h3{
        max-width:none !important;
    }

    .work-case-copy > p:not(.eyebrow){
        max-width:none !important;
    }
}

@media (max-width:520px){
    .work-case-visual{
        min-height:265px !important;
        padding:1rem !important;
    }

    .work-case-visual .site-shot-frame{
        max-width:100% !important;
    }

    .work-case-copy{
        padding:1.35rem 1.2rem 1.45rem !important;
    }
}


/* ======================================================================
   V23 — Add breathing room between portfolio cards
   ====================================================================== */

.work-case-grid{
    gap:clamp(1rem,1.8vw,1.5rem) !important;
    border-top:none !important;
    border-left:none !important;
}

.work-case-card{
    border:1px solid var(--dark-line) !important;
    border-right:1px solid var(--dark-line) !important;
    border-bottom:1px solid var(--dark-line) !important;
    border-radius:0 !important;
    background:var(--paper) !important;
}

.work-case-visual{
    border-bottom:1px solid rgba(255,255,255,.06) !important;
}

@media (max-width:1300px){
    .work-case-grid{
        gap:1.2rem !important;
    }
}

@media (max-width:860px){
    .work-case-grid{
        gap:1rem !important;
    }
}

@media (max-width:520px){
    .work-case-grid{
        gap:.85rem !important;
    }
}