:root{--bg:#0a0b0b;--panel:#111313;--text:#f1f4ef;--muted:#9ba29d;--cyan:#16c7df;--green:#43ee72;--line:#252a27;--grad:linear-gradient(105deg,var(--cyan),var(--green));}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.topbar{height:78px;padding:0 clamp(22px,5vw,72px);display:flex;align-items:center;gap:34px;border-bottom:1px solid rgba(255,255,255,.08);position:fixed;top:0;width:100%;z-index:10;background:rgba(10,11,11,.72);backdrop-filter:blur(18px)}.brand img{width:112px;display:block}.nav{display:flex;gap:28px;margin-left:auto}.nav a,.mini-cta,footer a{color:#d8ddd9;text-decoration:none;text-transform:uppercase;font-size:11px;letter-spacing:.14em}.nav a:hover{color:#43ee72}.mini-cta{border:1px solid #3d4640;padding:12px 14px}.hero{min-height:100svh;position:relative;display:grid;place-items:center;overflow:hidden;padding:130px 6vw 80px}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,8,.92),rgba(7,8,8,.48) 48%,rgba(7,8,8,.83)),url('assets/hero-art.jpg') center/cover no-repeat;transform:scale(1.04)}.hero-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 42%,rgba(54,238,121,.12),transparent 30%),linear-gradient(180deg,transparent 70%,#0a0b0b)}.scanline{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(255,255,255,.025) 6px);mix-blend-mode:overlay}.hero-inner{position:relative;z-index:2;width:min(1160px,100%)}.hero-logo{width:min(360px,62vw);margin-bottom:32px;filter:drop-shadow(0 0 30px rgba(32,220,169,.12))}.eyebrow{font-family:"Courier New",monospace;font-size:11px;letter-spacing:.16em;color:#5fe6e4;text-transform:uppercase;display:flex;align-items:center;gap:10px}.eyebrow span{width:28px;height:1px;background:currentColor}.hero h1,.section h2,.contact h2{font-family:Impact,"Arial Narrow",sans-serif;font-weight:900;letter-spacing:-.035em;line-height:.83;margin:18px 0 22px;text-transform:uppercase}.hero h1{font-size:clamp(62px,10.5vw,158px);max-width:1000px}.hero h1 em,.section h2 em,.contact h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.lede{font-size:clamp(16px,2vw,22px);line-height:1.45;max-width:650px;color:#d1d6d2}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.button{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:0 20px;text-decoration:none;text-transform:uppercase;font:700 11px/1 Arial;letter-spacing:.14em}.primary{background:var(--grad);color:#07100b}.ghost{color:#fff;border:1px solid rgba(255,255,255,.28)}.status{position:absolute;z-index:2;right:5vw;bottom:30px;font:10px/1 "Courier New",monospace;letter-spacing:.16em}.status span{color:#42ed78}.marquee{border-block:1px solid var(--line);overflow:hidden;padding:15px 0;background:#0e100f}.track{width:max-content;display:flex;gap:22px;align-items:center;animation:scroll 28s linear infinite}.track span{font:900 13px/1 Arial;text-transform:uppercase;letter-spacing:.18em}.track b{color:#35e990}@keyframes scroll{to{transform:translateX(-50%)}}.section{padding:clamp(80px,10vw,150px) clamp(22px,6vw,90px)}.section-head{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:end;margin-bottom:56px}.section-head .eyebrow{grid-column:1/-1}.section h2{font-size:clamp(54px,8vw,118px);margin:0}.section-head>p:last-child{color:var(--muted);line-height:1.6;font-size:17px;max-width:520px}.work-grid{display:grid;grid-template-columns:1.3fr .8fr;grid-template-rows:340px 340px;gap:16px}.project{position:relative;border:1px solid #29302c;overflow:hidden;background-color:#111}.project:before{content:"";position:absolute;inset:-5%;transition:.5s transform ease}.p1{grid-row:1/3}.p1:before{background:linear-gradient(145deg,rgba(0,0,0,.15),rgba(0,0,0,.65)),url('assets/hero-art.jpg') center/cover}.p2:before {
    background-image: url("assets/reflections cover art.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}.p3:before {
    background-image: url("assets/poster portfolio image.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}.project:hover:before{transform:scale(1.04)}.project-overlay{position:absolute;inset:auto 0 0;padding:25px;background:linear-gradient(transparent,rgba(0,0,0,.9));z-index:2}.project-overlay small{font:10px "Courier New",monospace;letter-spacing:.14em;color:#68eadd}.project-overlay h3{font-size:30px;text-transform:uppercase;margin:8px 0 4px}.project-overlay p{margin:0;color:#b3bab5;font-size:13px}.services{border-top:1px solid var(--line)}.compact{grid-template-columns:1fr}.service-list{border-top:1px solid #2b302d}.service-list>div{display:grid;grid-template-columns:60px minmax(180px,1fr) minmax(260px,1.3fr);gap:20px;align-items:center;padding:32px 0;border-bottom:1px solid #2b302d}.service-list b{font:12px "Courier New",monospace;color:#53ead6}.service-list h3{font:900 clamp(24px,3vw,42px) Arial;text-transform:uppercase;margin:0}.service-list p{color:var(--muted);line-height:1.5;margin:0}.about{padding-top:20px}.about-card{border:1px solid #303632;padding:clamp(28px,6vw,70px);background:linear-gradient(145deg,#111514,#0c0e0d);position:relative;overflow:hidden}.about-card:after{content:"SUDO";position:absolute;right:-2vw;bottom:-5vw;font:900 clamp(100px,24vw,360px)/.7 Impact;color:rgba(255,255,255,.02)}.about-card h2{font-size:clamp(48px,7vw,96px)}.about-card>p:not(.eyebrow){max-width:780px;color:#b9c0bb;font-size:18px;line-height:1.7}.stats{display:flex;gap:50px;margin-top:55px;flex-wrap:wrap}.stats div{min-width:120px}.stats strong{display:block;font:900 42px Impact;background:var(--grad);-webkit-background-clip:text;color:transparent}.stats span{text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:#858c87}.contact{min-height:620px;padding:clamp(70px,9vw,130px) clamp(22px,6vw,90px);position:relative;overflow:hidden;background:var(--grad);color:#06100b;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.contact-noise{position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.16),transparent 40%),repeating-linear-gradient(0deg,transparent 0 6px,rgba(0,0,0,.035) 7px)}.contact>*:not(.contact-noise){position:relative;z-index:1}.eyebrow.dark{color:#072319}.contact h2{font-size:clamp(64px,10vw,144px);margin:18px 0 28px}.contact h2 em{color:#07100b;background:none}.email{font:900 clamp(22px,5vw,64px)/1 Impact;color:#07100b;text-decoration:none;letter-spacing:.01em;border-bottom:3px solid #07100b;padding-bottom:5px}.dark-btn{margin-top:36px;border:1px solid rgba(0,0,0,.45);color:#07100b;min-width:240px;justify-content:space-between}.dark-btn:hover{background:#07100b;color:#41e67c}footer{min-height:130px;padding:30px clamp(22px,6vw,90px);display:flex;align-items:center;gap:30px;border-top:1px solid #222}footer img{width:90px}footer p{font-size:11px;color:#767d78;margin-right:auto}@media(max-width:800px){.topbar{height:66px;padding:0 18px}.brand img{width:88px}.nav{display:none}.mini-cta{margin-left:auto;font-size:9px;padding:10px}.hero{padding:105px 22px 60px;align-items:end}.hero-logo{width:240px}.hero h1{font-size:clamp(58px,17vw,96px)}.lede{font-size:15px;max-width:440px}.status{display:none}.section{padding:80px 20px}.section-head{grid-template-columns:1fr;gap:18px;margin-bottom:36px}.section-head .eyebrow{grid-column:auto}.section h2{font-size:clamp(50px,15vw,84px)}.section-head>p:last-child{font-size:15px}.work-grid{display:block}.project{height:410px;margin-bottom:14px}.p2,.p3{height:300px}.service-list>div{grid-template-columns:42px 1fr;padding:24px 0}.service-list p{grid-column:2}.about{padding-top:0}.about-card{padding:32px 22px}.about-card>p:not(.eyebrow){font-size:15px}.stats{gap:24px}.contact{min-height:540px;padding:70px 20px}.contact h2{font-size:clamp(60px,18vw,100px)}.email{font-size:clamp(25px,8vw,46px)}footer{align-items:flex-start;flex-wrap:wrap}footer p{width:100%;order:3;margin:0}.hero-actions .button{flex:1;min-width:170px}}



.project[data-link] {
    cursor: pointer;
}



/* =========================
   PORTFOLIO PAGE
========================= */

.portfolio-page {
    width: 100%;
    overflow: hidden;
}


/* INTRO */

.portfolio-intro {
    padding: 150px 4vw 70px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

.portfolio-number {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    opacity: 0.65;
    margin-bottom: 24px;
}

.portfolio-intro h1 {
    font-size: clamp(4.5rem, 11vw, 10rem);
    line-height: 0.78;
    letter-spacing: -0.06em;
    margin: 0;
    max-width: 1200px;
}

.portfolio-intro-bottom {
    margin-top: 60px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;
}

.portfolio-description {
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.7;
}

.portfolio-count {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    opacity: 0.55;
}


/* IMAGE GRID */

.portfolio-grid {
    padding: 4vw;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 4vw 2vw;
}

.portfolio-item {
    margin: 0;
    overflow: hidden;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;

    object-fit: cover;

    display: block;

    transition:
        transform 0.6s cubic-bezier(.2,.7,.2,1),
        filter 0.4s ease;
}

.portfolio-item:hover img {
    transform: scale(1.015);
}

.portfolio-wide {
    grid-column: span 2;
}

.portfolio-wide img {
    aspect-ratio: 16 / 8;
}

.portfolio-tall img {
    aspect-ratio: 3 / 4;
}


/* CAPTIONS */

.portfolio-item figcaption {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding-top: 12px;

    font-size: 0.65rem;
    letter-spacing: 0.13em;

    opacity: 0.65;
}

.portfolio-item figcaption span:last-child {
    text-align: right;
}


/* NEXT CATEGORY */

.portfolio-next {
    margin-top: 60px;
    padding: 70px 4vw;

    border-top: 1px solid rgba(255,255,255,0.18);

    display: flex;
    flex-direction: column;

    gap: 18px;
}

.portfolio-next > span {
    font-size: 0.7rem;
    letter-spacing: 0.15em;

    opacity: 0.5;
}

.portfolio-next a {
    color: inherit;
    text-decoration: none;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: clamp(2.5rem, 7vw, 7rem);
    line-height: 1;

    letter-spacing: -0.04em;

    transition: opacity 0.25s ease;
}

.portfolio-next a:hover {
    opacity: 0.65;
}


/* MOBILE */

@media (max-width: 700px) {

    .portfolio-intro {
        padding:
            120px
            20px
            45px;
    }

    .portfolio-intro h1 {
        font-size: clamp(4rem, 20vw, 7rem);
        line-height: 0.8;
    }

    .portfolio-intro-bottom {
        flex-direction: column;
        align-items: flex-start;

        margin-top: 40px;
    }


    .portfolio-grid {
        padding: 20px;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .portfolio-item,
    .portfolio-wide {
        grid-column: span 1;
    }

    .portfolio-item img,
    .portfolio-wide img,
    .portfolio-tall img {
        aspect-ratio: auto;
        height: auto;
    }


    .portfolio-next {
        padding:
            50px
            20px;
    }

}
/* SUDO 2026: flat vector identity; 3D is editorial imagery only. */
.brand img{width:112px;height:auto;max-height:30px;object-fit:contain}
footer img,.site-footer img{width:64px;height:auto;max-height:none}
.hero-bg{background:linear-gradient(90deg,#070808 8%,rgba(7,8,8,.88) 35%,rgba(7,8,8,.25) 76%,rgba(7,8,8,.55)),url('assets/branding/sudo-render-angled.webp') right center / auto 95% no-repeat,#020a06}
@media(max-width:800px){.brand img{width:96px}.hero-bg{background:linear-gradient(180deg,rgba(7,8,8,.25),rgba(7,8,8,.92) 70%),url('assets/branding/sudo-render-angled.webp') center top / auto 70% no-repeat,#020a06}}

/* Inline header identity with explicit dimensions on every viewport. */
.topbar .brand{display:flex;align-items:center;flex:0 0 auto;color:#fff;line-height:0}
.topbar .header-wordmark{display:block;width:138px;height:30px;flex:none;fill:#fff;overflow:visible}
@media(max-width:800px){.topbar .header-wordmark{width:112px;height:25px}}

/* Searchable service copy and native portfolio navigation. */
a.project{display:block;color:inherit;text-decoration:none}
.portfolio-item{position:relative}
.portfolio-card-link{display:flex;justify-content:space-between;gap:16px;width:100%;color:inherit;text-decoration:none}
.portfolio-card-link::after{content:"";position:absolute;inset:0}
.portfolio-item:focus-within{outline:2px solid var(--green);outline-offset:4px}
a:focus-visible{outline:2px solid var(--green);outline-offset:5px}
.seo-service-content{padding:70px clamp(22px,6vw,90px);border-top:1px solid var(--line);max-width:1400px;margin:auto}
.seo-service-content h2{font-size:clamp(28px,4vw,48px);line-height:1.15;max-width:900px}
.seo-service-content h3{font-size:21px;line-height:1.35;margin-top:32px}
.seo-service-content p{font-size:17px;line-height:1.75;color:var(--muted);max-width:850px}
.seo-service-content p a,.breadcrumbs a{color:#6decd0;text-underline-offset:4px}
.seo-service-content .button{margin-top:24px}
.seo-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.service-navigation{display:flex;gap:20px;flex-wrap:wrap;flex-basis:100%;line-height:1.6}
footer{flex-wrap:wrap}
.breadcrumbs{font:13px/1.6 Arial,sans-serif;color:var(--muted);margin-bottom:30px}
img[width][height]{max-width:100%}
@media(max-width:800px){.seo-columns{grid-template-columns:1fr;gap:0}.seo-service-content{padding:48px 20px}.portfolio-card-link{flex-wrap:wrap}.service-navigation{gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.track{animation:none}.hero-bg{transform:none}}

/* Quiet framing lets the artwork and SUDO gradient lead. */
.service-strip{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px 28px;padding:25px clamp(22px,6vw,90px);border-block:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#bcc6c1}
.eyebrow,.project-kicker{font-family:Arial,Helvetica,sans-serif;letter-spacing:.1em}
.about-card:after{content:none}
.contact h2{font-size:clamp(48px,7.8vw,112px);line-height:.95;max-width:1100px}
@media(max-width:800px){.service-strip{display:grid;grid-template-columns:1fr 1fr;font-size:10px}.contact h2{font-size:clamp(42px,12vw,76px)}}

/* Two clear portfolio routes, with visible mobile navigation. */
.topbar .nav a{padding:12px 0;font-size:12px;letter-spacing:.04em;text-transform:none}
.topbar .nav a[aria-current]{color:#6decd0;border-bottom:2px solid #6decd0}
.portfolio-choices,.graphics-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.graphics-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
.browse-card{display:flex;flex-direction:column;color:var(--text);text-decoration:none;background:#111514;border:1px solid #303b35;overflow:hidden}
.browse-card:hover{border-color:#6decd0}.browse-image{aspect-ratio:4/3;overflow:hidden;background:#111}
.browse-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.browse-card:hover img{transform:scale(1.025)}
.browse-copy{padding:26px;display:flex;flex-direction:column;flex:1}.browse-copy h3{font:700 clamp(26px,3vw,38px)/1.15 Arial,sans-serif;margin:0 0 12px;text-transform:none;letter-spacing:-.03em}
.browse-copy p{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 24px;max-width:450px}.browse-action{display:flex;justify-content:space-between;gap:12px;color:#7be8c7;font-weight:700;margin-top:auto;padding-top:18px;border-top:1px solid #303b35}
.browse-page{max-width:1440px;margin:auto;padding:135px clamp(22px,6vw,90px) 80px}
.browse-intro{max-width:850px;margin-bottom:50px}.browse-intro h1{font:900 clamp(50px,7vw,100px)/.98 Impact,'Arial Narrow',sans-serif;letter-spacing:-.025em;text-transform:uppercase;margin:22px 0}
.browse-intro h1 em{font-style:normal;background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent}.browse-intro>p:last-child{color:var(--muted);font-size:19px;line-height:1.65;max-width:700px}
.browse-categories>h2{font-size:24px;margin:0 0 24px}.graphics-choices .browse-copy h3{font-size:26px}
.browse-help{display:flex;align-items:center;justify-content:space-between;gap:32px;border-top:1px solid var(--line);padding:44px 0;margin-top:55px}.browse-help h2{font-size:27px;margin:0 0 12px}.browse-help p{color:var(--muted);max-width:650px;line-height:1.65}.browse-help .button{flex-shrink:0}
.switch-portfolio{color:var(--muted);line-height:1.7}.switch-portfolio a,.text-link,.portfolio-back{color:#7be8c7;text-underline-offset:5px}.text-link{display:block;margin-top:24px;line-height:1.6}
.portfolio-back{display:inline-block;margin-bottom:30px;font-size:14px;padding:8px 0}.portfolio-intro h1{font-size:clamp(48px,7.5vw,108px);line-height:1}
.photography-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}.photography-feature>img{width:100%;height:auto;display:block}.photography-feature h2{font-size:28px;line-height:1.2}.photography-feature p{color:var(--muted);line-height:1.7;margin-bottom:26px}
html{scroll-padding-top:110px}
@media(max-width:800px){.topbar{height:auto;min-height:110px;display:flex;flex-wrap:wrap;padding:14px 20px 8px;gap:8px 18px}.topbar .brand{order:0}.topbar .mini-cta{order:1;margin-left:auto}.topbar .nav{display:flex;order:2;width:100%;justify-content:flex-start;margin:0;gap:26px}.topbar .nav a{min-height:44px;padding:12px 0}.topbar .nav-about{margin-left:auto}.hero{padding-top:160px}.portfolio-page{padding-top:125px}.project-detail-page .project-detail{padding-top:115px}.browse-page{padding-top:145px}.portfolio-choices,.graphics-choices{grid-template-columns:1fr}.browse-help{align-items:flex-start;flex-direction:column}.photography-feature{grid-template-columns:1fr;gap:24px}.browse-image{aspect-ratio:3/2}.browse-copy{padding:22px}.browse-intro{margin-bottom:32px}.section-head{gap:20px}.hero-actions .button{flex:auto;min-width:0}.browse-intro>p:last-child{font-size:17px}html{scroll-padding-top:135px}}
@media(prefers-reduced-motion:reduce){.browse-image img{transition:none}.browse-card:hover img{transform:none}}

/* Show complete artwork: no fixed aspect ratio or zoom cropping. */
.portfolio-grid{align-items:start}
.portfolio-item img,.portfolio-wide img,.portfolio-tall img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block;transform:none}
.portfolio-item:hover img{transform:none}
.graphics-choices .browse-image{aspect-ratio:auto;overflow:visible}
.graphics-choices .browse-image img{height:auto;object-fit:contain;transform:none}
.enquiry-page{max-width:1120px}.enquiry-form{background:#111514;border:1px solid #303b35;padding:clamp(22px,4vw,44px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.form-wide{grid-column:1/-1}
.enquiry-form label{display:block;margin-bottom:10px;font-weight:700;font-size:15px}.enquiry-form label span{font-weight:400;color:#a7b2ab;font-size:13px}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{display:block;width:100%;border:1px solid #546259;border-radius:0;padding:14px;background:#0a0e0c;color:#f1f4ef;font:16px/1.5 Arial,sans-serif;min-height:50px}
.enquiry-form textarea{resize:vertical}.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus{outline:2px solid #5ee7bd;outline-offset:2px}
.form-note{color:#a7b2ab;font-size:13px;line-height:1.7;margin:26px 0}.enquiry-form button{border:0;cursor:pointer}.enquiry-form button:disabled{opacity:.65;cursor:wait}
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#form-status{line-height:1.6;white-space:pre-wrap}#form-status[data-state="error"]{color:#ffb4a9}#form-status[data-state="success"]{color:#77e6bd}
@media(max-width:650px){.form-grid{grid-template-columns:1fr}.form-wide{grid-column:auto}.enquiry-form button{width:100%}}

/* Keep the full NEVER artwork and label frame visible on the Graphics gateway. */
.portfolio-choices .browse-card[href="graphics.html"] .browse-image{aspect-ratio:1;overflow:visible}
.portfolio-choices .browse-card[href="graphics.html"] .browse-image img{width:100%;height:100%;object-fit:contain;transform:none}