:root {
    --ink:#000119;
    --paper:#fafafa;
    --red:#e3001a;
    --yellow:#ffd833;
    --muted:#68686b;
    --line:#d9d8d4;
    --white:#fff;
    --header:90px;
    --font:'Montserrat',Arial,sans-serif
}

[hidden] { display:none !important; }

*,*::before,*::after {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header) + 24px)
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased
}

body.menu-open,body.dialog-open {
    overflow:hidden
}

::selection {
    background:var(--red);
    color:white
}

a {
    color:inherit;
    text-decoration:none
}

button {
    font:inherit;
    cursor:pointer
}

img {
    display:block;
    max-width:100%;
    height:auto
}

button,a {
    -webkit-tap-highlight-color:transparent
}

button:focus-visible,a:focus-visible {
    outline:3px solid currentColor;
    outline-offset:6px
}

h1,h2,h3,p {
    margin:0
}

h1,h2,h3 {
    line-height:1.1;
    letter-spacing:-.045em
}

h2 {
    font-size:clamp(36px,4.2vw,62px);
    font-weight:750
}

h3 {
    font-weight:700
}

p {
    font-weight:450
}

.container {
    width:min(100% - 112px,1328px);
    margin-inline:auto
}

.section-pad {
    padding-block:112px
}

.section-dark {
    background:var(--ink);
    color:var(--white)
}

.section-light {
    background:var(--paper)
}

.text-red {
    color:var(--red)
}

.eyebrow {
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    line-height:1.5
}

.red-square {
    display:inline-block;
    width:8px;
    height:8px;
    background:var(--red);
    flex-shrink:0
}

.section-label {
    margin-bottom:25px
}

.skip-link {
    position:fixed;
    left:20px;
    top:12px;
    padding:10px 18px;
    background:var(--white);
    color:var(--ink);
    z-index:200;
    transform:translateY(-180%)
}

.skip-link:focus {
    transform:translateY(0)
}

/* Compact wordmark keeps the original IT symbol and the flyer positioning. */
.site-header {
    height:var(--header);
    background:rgba(0,1,25,.97);
    color:white;
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(16px);
    border-bottom:1px solid #ffffff18
}

.header-inner {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:11px;
    flex-shrink:0;
    line-height:1
}

.brand>img {
    width:43px;
    height:43px
}

.brand-type {
    font-size:29px;
    font-weight:800;
    letter-spacing:-.035em
}

.brand-line {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    margin-top:5px;
    font-size:9px;
    letter-spacing:.12em;
    font-weight:700
}

.brand-line i {
    width:4px;
    height:4px;
    background:var(--red)
}

.main-nav {
    display:flex;
    align-items:center;
    gap:30px;
    font-size:11px;
    font-weight:600
}

.main-nav>a {
    position:relative;
    padding-block:10px;
    transition:color .2s
}

.main-nav>a:hover,.main-nav>a[aria-current] {
    color:#ff4765
}

.main-nav .nav-contact {
    margin-left:12px;
    border-bottom:1px solid #ffffff80
}

.nav-contact span {
    margin-left:16px;
    font-size:19px;
    line-height:0
}

.scroll-progress {
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:2px;
    background:var(--red);
    transform:scaleX(0);
    transform-origin:left;
    pointer-events:none
}

.menu-toggle {
    display:none
}

/* Hero copy; the artwork slider is defined below. */
.hero {
    position:relative;
    overflow:hidden
}

.hero-grid {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    gap:12px;
    padding-top:72px;
    padding-bottom:58px;
    min-height:630px
}

.hero-copy {
    position:relative;
    z-index:2
}

.hero-copy .eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    color:#d0cfd2;
    margin-bottom:29px
}

.hero h1 {
    font-size:clamp(44px,5.1vw,76px);
    font-weight:780;
    line-height:1.09;
    letter-spacing:-.059em;
    white-space:nowrap
}

.hero-outline {
    color:#b7b5bd;
    font-weight:500
}

.hero-description {
    font-size:clamp(14px,1.2vw,17px);
    line-height:1.8;
    color:#aaa9af;
    max-width:545px;
    margin-top:28px
}

.hero-description strong {
    color:#fff;
    font-weight:600
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:34px
}

.button {
    display:inline-flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    min-height:52px;
    padding:15px 22px;
    font-size:11px;
    font-weight:700;
    border:1px solid transparent;
    transition:background .2s,transform .2s
}

.button span {
    font-size:21px;
    line-height:1
}

.button-red {
    background:var(--red);
    color:white
}

.button-red:hover {
    background:#b90021;
    transform:translateY(-2px)
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:20px;
    font-size:12px;
    font-weight:650;
    border-bottom:1px solid currentColor;
    padding-block:6px
}

.text-link span {
    font-size:22px;
    transition:transform .2s
}

.text-link:hover span {
    transform:translate(3px,-3px)
}

.hero-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid #ffffff26;
    padding-block:22px;
    color:#949398;
    font-size:10px
}

.hero-bottom p {
    line-height:1.65
}

.hero-bottom strong {
    font-weight:500;
    color:#d7d5db
}

.scroll-cue {
    display:flex;
    align-items:center;
    gap:18px;
    font-size:10px;
    color:white
}

.scroll-cue span {
    font-size:25px;
    line-height:1
}

/* Editorial service columns. */
.section-heading {
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:80px;
    align-items:end;
    margin-bottom:62px
}

.section-intro {
    max-width:385px;
    font-size:14px;
    color:var(--muted);
    line-height:1.9;
    padding-bottom:4px
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:42px
}

.service {
    border-top:1px solid var(--ink);
    padding-top:24px;
    display:flex;
    flex-direction:column
}

.service-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px
}

.service h3 {
    font-size:45px;
    margin-bottom:25px;
    letter-spacing:-.065em
}

.service .service-lead {
    font-size:17px;
    font-weight:650;
    line-height:1.5;
    color:var(--ink);
    margin-bottom:16px
}

.service>p {
    font-size:12px;
    color:var(--muted);
    line-height:1.9;
    max-width:335px
}

.service-list {
    padding:22px 0 28px;
    margin:0;
    list-style:none;
    font-size:10px;
    line-height:2.1;
    color:#515156
}

.service-list li::before {
    content:'';
    display:inline-block;
    width:9px;
    height:9px;
    background:var(--red);
    margin-right:12px;
    flex-shrink:0
}

.service-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:15px;
    font-size:11px;
    font-weight:650;
    margin-top:auto
}

.service-link span {
    font-size:23px
}

.service-link:hover {
    color:var(--red)
}

/* Selected work, with distinct art direction for each supplied visual. */
.work {
    padding-top:0
}

.work .section-heading {
    padding-top:78px;
    border-top:1px solid var(--line)
}

.work-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:42px 30px
}

.work-card {
    min-width:0;
    display:block
}

.work-meta {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding-top:18px
}

.work-meta h3 {
    font-size:19px;
    letter-spacing:-.04em
}

.work-meta>span {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--muted)
}

.work-open {
    position:absolute;
    bottom:16px;
    right:16px;
    width:42px;
    height:42px;
    background:white;
    color:var(--ink);
    display:grid;
    place-items:center;
    font-size:25px;
    z-index:5;
    transition:background .2s,color .2s
}

.work-card:hover .work-open {
    background:var(--red);
    color:white
}

.work-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:44px;
    margin-top:42px;
    border-top:1px solid var(--line)
}

.work-footer p {
    font-size:16px;
    font-weight:500
}

/* Human-led approach and the four practical steps. */
.approach {
    overflow:hidden
}

.approach>.container>.section-label {
    color:#a8a7ae
}

.approach-grid {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:100px
}

.approach h2 {
    font-size:clamp(35px,4.4vw,65px);
    line-height:1.14
}

.approach-copy>p {
    font-size:14px;
    line-height:1.9;
    color:#aaa9b0;
    max-width:435px;
    margin-top:28px
}

.human-note {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:10px;
    font-weight:600;
    margin-top:25px
}

.approach-principles {
    padding-top:5px
}

.principle {
    display:flex;
    gap:22px;
    border-top:1px solid #ffffff26;
    padding-block:26px
}

.principle>span {
    font-size:10px;
    color:#ff4260;
    padding-top:3px
}

.principle h3 {
    font-size:19px;
    letter-spacing:-.03em;
    line-height:1.4
}

.principle p {
    font-size:12px;
    line-height:1.9;
    color:#a8a7ae;
    margin-top:12px
}

.approach-signoff {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid #ffffff26;
    margin-top:70px;
    padding-top:32px;
    gap:20px
}

.approach-signoff>span:first-child {
    font-size:10px;
    letter-spacing:.16em;
    color:#8d8b93
}

.approach-signoff p {
    font-size:15px;
    line-height:1.7;
    color:#a8a7ae
}

.approach-signoff strong {
    font-weight:550;
    color:white
}

.signoff-arrow {
    font-size:70px;
    line-height:1;
    color:var(--red)
}

.process .section-heading {
    grid-template-columns:1.35fr .65fr
}

.process h2 {
    font-size:clamp(32px,3.65vw,52px)
}

.process-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
    list-style:none;
    padding:0;
    margin:0
}

.process-grid li {
    border-top:1px solid var(--ink);
    padding-top:18px
}

.process-grid h3 {
    font-size:19px;
    letter-spacing:-.04em;
    margin-bottom:15px
}

.process-grid p {
    color:var(--muted);
    font-size:12px;
    line-height:1.9;
    max-width:235px
}

/* Contact uses direct, working phone and email links instead of a mock form. */
.contact {
    background:var(--red);
    color:white;
    overflow:hidden
}

.contact .section-label {
    color:#fff;
    font-weight:600
}

.contact-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:35px
}

.contact h2 {
    font-size:clamp(55px,7vw,100px);
    font-weight:750;
    line-height:1.03;
    letter-spacing:-.065em
}

.contact h2>span {
    color:var(--ink)
}

.contact-arrow {
    width:145px;
    height:145px;
    border:1px solid #ffffff88;
    border-radius:50%;
    display:grid;
    place-items:center;
    flex-shrink:0;
    font-size:90px;
    line-height:1;
    transition:background .25s,transform .25s
}

.contact-arrow:hover {
    background:white;
    color:var(--red);
    transform:rotate(7deg)
}

.contact-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:end;
    padding-top:60px
}

.contact-bottom>p {
    font-size:15px;
    line-height:1.9;
    color:#ffe0e5
}

.contact-bottom>p strong {
    font-weight:650;
    color:white
}

.contact-links {
    display:flex;
    flex-direction:column;
    gap:24px
}

.contact-links a {
    position:relative;
    border-bottom:1px solid #ffffff60;
    padding-bottom:14px;
    font-size:clamp(20px,2.25vw,30px);
    font-weight:600;
    letter-spacing:-.03em;
    line-height:1.4;
    padding-right:30px
}

.contact-links a>span {
    display:block;
    margin-bottom:8px;
    font-size:10px;
    font-weight:500;
    letter-spacing:.02em;
    color:#ffe1e7
}

.contact-links b {
    position:absolute;
    right:0;
    bottom:12px;
    font-size:27px;
    font-weight:500
}

.contact-links a:hover {
    border-color:white
}

.site-footer {
    padding-top:54px
}

.footer-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding-bottom:44px
}

.footer-top>p {
    font-size:10px;
    line-height:1.9;
    color:#a8a7ae
}

.back-to-top {
    display:flex;
    align-items:center;
    gap:20px;
    font-size:10px
}

.back-to-top>span {
    font-size:25px
}

.footer-bottom {
    border-top:1px solid #ffffff22;
    padding-block:22px;
    display:flex;
    justify-content:space-between;
    gap:25px;
    font-size:8px;
    color:#8c8b92
}

/* Project overlay, keyboard accessible through the native dialog element. */
.project-dialog {
    border:0;
    padding:0;
    width:min(860px,calc(100% - 40px));
    max-height:calc(100dvh - 48px);
    background:var(--paper);
    color:var(--ink);
    overflow:auto
}

.project-dialog::backdrop {
    background:#000c;
    backdrop-filter:blur(8px)
}

.project-dialog[open] {
    display:grid;
    grid-template-columns:1fr 1fr
}

.dialog-close {
    position:absolute;
    right:12px;
    top:12px;
    z-index:10;
    width:40px;
    height:40px;
    border:0;
    background:var(--ink);
    color:white;
    font-size:27px;
    line-height:1
}

.dialog-copy {
    padding:70px 34px 38px;
    align-self:center
}

.dialog-copy .eyebrow {
    font-size:9px;
    color:var(--red);
    margin-bottom:16px
}

.dialog-copy h2 {
    font-size:34px;
    margin-bottom:22px
}

.dialog-copy>p:not(.eyebrow) {
    font-size:13px;
    line-height:1.9;
    color:var(--muted)
}

.dialog-copy .button {
    margin-top:25px;
    font-size:10px
}

/* Progressive enhancement: no JavaScript is needed to read any section. */
.reveal-pending {
        opacity:0;
        transform:translateY(22px)
    }
    .reveal {
        transition:opacity .6s ease,transform .6s ease
    }
    .reveal-visible {
        opacity:1;
        transform:none
    }

@media(min-width:1500px) {
    .hero-grid {
        min-height:730px
    }
    .hero h1 {
        font-size:84px
    }
}

@media(max-width:1100px) {
    .container {
        width:calc(100% - 72px)
    }
    .main-nav {
        gap:18px;
        font-size:10px
    }
    .main-nav .nav-contact {
        margin-left:0
    }
    .hero-grid {
        gap:0;
        min-height:570px;
        padding-top:58px
    }
    .hero h1 {
        font-size:5.25vw
    }
    .hero-actions {
        gap:18px
    }
    .hero-actions .button {
        padding:14px 16px;
        font-size:10px;
        gap:15px
    }
    .hero-actions .text-link {
        font-size:10px;
        gap:10px
    }
    .service-grid {
        gap:26px
    }
    .section-heading {
        gap:50px
    }
    .approach-grid {
        gap:60px
    }
    .work-meta {
        align-items:flex-start;
        flex-direction:column;
        gap:7px
    }
    .contact-bottom {
        gap:50px
    }
}

@media(max-width:850px) {
    :root {
        --header:78px
    }
    .container {
        width:calc(100% - 48px)
    }
    .section-pad {
        padding-block:80px
    }
    .brand>img {
        width:39px;
        height:39px
    }
    .brand-type {
        font-size:26px
    }
    .brand-line {
        font-size:8px
    }
    .menu-toggle {
        display:flex;
        position:relative;
        z-index:52;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        width:44px;
        height:44px;
        background:transparent;
        border:1px solid #ffffff40;
        padding:11px
    }
    .menu-toggle span {
        height:1px;
        background:white;
        width:100%;
        transition:transform .2s
    }
    .menu-toggle[aria-expanded=true] span:first-child {
        transform:translateY(3.5px) rotate(45deg)
    }
    .menu-toggle[aria-expanded=true] span:last-child {
        transform:translateY(-3.5px) rotate(-45deg)
    }
    .main-nav {
        display:none
    }
    .js .main-nav {
        display:flex;
        position:fixed;
        inset:var(--header) 0 auto;
        height:calc(100dvh - var(--header));
        background:var(--ink);
        flex-direction:column;
        align-items:stretch;
        justify-content:center;
        gap:0;
        padding:30px 40px;
        visibility:hidden;
        opacity:0;
        transform:translateY(-8px);
        transition:opacity .2s,transform .2s,visibility .2s;
        overflow:auto
    }
    .js .main-nav.is-open {
        visibility:visible;
        opacity:1;
        transform:none
    }
    .main-nav>a {
        padding-block:20px;
        font-size:24px;
        letter-spacing:-.04em;
        border-bottom:1px solid #ffffff25
    }
    .main-nav .nav-contact {
        margin-top:30px;
        align-self:flex-start;
        font-size:15px;
        color:#ff4765
    }
    .hero-grid {
        grid-template-columns:1fr 1fr;
        min-height:auto;
        padding-top:55px;
        padding-bottom:48px
    }
    .hero h1 {
        font-size:5.4vw
    }
    .hero-copy .eyebrow {
        font-size:8px;
        letter-spacing:.09em
    }
    .hero-description {
        font-size:12px;
        line-height:1.8
    }
    .desktop-break {
        display:none
    }
    .hero-actions {
        flex-direction:column;
        align-items:flex-start;
        gap:15px
    }
    .section-heading {
        gap:35px;
        grid-template-columns:1.1fr .9fr;
        margin-bottom:45px
    }
    .section-intro {
        font-size:12px
    }
    .service-grid {
        gap:23px
    }
    .service h3 {
        font-size:35px
    }
    .service .service-lead {
        font-size:14px
    }
    .service>p {
        font-size:11px
    }
    .service-list {
        font-size:9px
    }
    .service-link {
        font-size:10px;
        gap:8px
    }
    .work {
        padding-top:0
    }
    .work .section-heading {
        padding-top:60px
    }
    .work-grid {
        gap:32px 24px
    }
    .approach-grid {
        grid-template-columns:1fr 1fr;
        gap:35px
    }
    .approach h2 {
        font-size:4.5vw
    }
    .approach-copy>p {
        font-size:12px
    }
    .human-note {
        font-size:9px;
        align-items:flex-start
    }
    .human-note .red-square {
        margin-top:4px
    }
    .principle {
        gap:14px;
        padding-block:21px
    }
    .principle h3 {
        font-size:16px
    }
    .principle p {
        font-size:11px
    }
    .process-grid {
        grid-template-columns:repeat(2,1fr);
        gap:32px 40px
    }
    .contact-arrow {
        width:108px;
        height:108px;
        font-size:70px
    }
    .contact-bottom {
        gap:30px
    }
    .contact-bottom>p {
        font-size:12px
    }
    .contact-links a {
        font-size:21px
    }
    .footer-top .brand {
        transform:scale(.9);
        transform-origin:left
    }
    .footer-top {
        gap:15px
    }
    .footer-top>p,.back-to-top {
        font-size:9px
    }
}

@media(max-width:600px) {
    :root {
        --header:74px
    }
    .container {
        width:calc(100% - 40px)
    }
    .section-pad {
        padding-block:64px
    }
    h2 {
        font-size:36px;
        letter-spacing:-.055em
    }
    .eyebrow {
        font-size:9px
    }
    .section-label {
        margin-bottom:20px
    }
    .brand>img {
        width:36px;
        height:36px
    }
    .brand-type {
        font-size:24px
    }
    .brand-line {
        font-size:7px;
        letter-spacing:.14em
    }
    .hero-grid {
        display:flex;
        flex-direction:column;
        padding-top:42px;
        padding-bottom:30px
    }
    .hero-copy {
        width:100%
    }
    .hero-copy .eyebrow {
        font-size:8px;
        letter-spacing:.09em;
        margin-bottom:24px;
        gap:8px
    }
    .hero h1 {
        font-size:clamp(32px,8.9vw,53px);
        letter-spacing:-.055em;
        line-height:1.14
    }
    .hero-description {
        font-size:13px;
        line-height:1.8;
        margin-top:24px;
        max-width:360px
    }
    .hero-actions {
        flex-direction:row;
        align-items:center;
        gap:20px;
        margin-top:25px
    }
    .hero-actions .button {
        font-size:9px;
        padding:12px 13px;
        min-height:48px;
        gap:12px
    }
    .hero-actions .text-link {
        font-size:9px;
        gap:7px
    }
    .hero-bottom {
        padding-block:18px;
        font-size:8px
    }
    .scroll-cue {
        font-size:9px;
        gap:11px
    }
    .section-heading,.process .section-heading {
        grid-template-columns:1fr;
        gap:24px;
        margin-bottom:34px
    }
    .section-intro {
        font-size:13px;
        line-height:1.8;
        max-width:100%
    }
    .service-grid {
        grid-template-columns:1fr;
        gap:40px
    }
    .service {
        padding-top:18px
    }
    .service-top {
        margin-bottom:10px
    }
    .service h3 {
        font-size:42px;
        margin-bottom:20px
    }
    .service .service-lead {
        font-size:18px
    }
    .service .service-lead br {
        display:none
    }
    .service>p {
        font-size:13px;
        max-width:none
    }
    .service-list {
        font-size:11px;
        padding-block:18px 24px
    }
    .service-link {
        font-size:12px
    }
    .work {
        padding-top:0
    }
    .work .section-heading {
        padding-top:48px
    }
    .work-grid {
        grid-template-columns:1fr;
        gap:34px
    }
    .work-meta {
        flex-direction:row;
        align-items:center;
        gap:10px
    }
    .work-meta h3 {
        font-size:18px
    }
    .work-meta>span {
        font-size:8px
    }
    .work-footer {
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
        margin-top:33px;
        padding-top:28px
    }
    .work-footer p {
        font-size:14px
    }
    .work-footer .text-link {
        font-size:11px
    }
    .approach-grid {
        grid-template-columns:1fr;
        gap:42px
    }
    .approach h2 {
        font-size:39px
    }
    .approach-copy>p {
        font-size:13px;
        max-width:none
    }
    .human-note {
        font-size:10px
    }
    .principle {
        padding-block:25px;
        gap:20px
    }
    .principle h3 {
        font-size:19px
    }
    .principle p {
        font-size:12px
    }
    .approach-signoff {
        margin-top:35px;
        padding-top:27px;
        gap:15px;
        flex-wrap:wrap
    }
    .approach-signoff>span:first-child {
        width:100%;
        font-size:9px
    }
    .approach-signoff p {
        font-size:13px
    }
    .signoff-arrow {
        font-size:55px
    }
    .process h2 {
        font-size:33px
    }
    .process-grid {
        gap:35px 24px
    }
    .process-grid h3 {
        font-size:16px;
        line-height:1.3
    }
    .process-grid p {
        font-size:11px;
        line-height:1.8
    }
    .contact h2 {
        font-size:clamp(46px,12vw,65px)
    }
    .contact-top {
        align-items:flex-end;
        gap:10px
    }
    .contact-arrow {
        width:59px;
        height:59px;
        font-size:40px;
        margin-bottom:5px
    }
    .contact-bottom {
        grid-template-columns:1fr;
        gap:35px;
        padding-top:32px
    }
    .contact-bottom>p {
        font-size:14px
    }
    .contact-links a {
        font-size:25px
    }
    .contact-links a>span {
        font-size:10px
    }
    .site-footer {
        padding-top:40px
    }
    .footer-top {
        flex-wrap:wrap;
        align-items:flex-start;
        gap:25px;
        padding-bottom:30px
    }
    .footer-top .brand {
        width:100%;
        transform:none
    }
    .footer-top>p {
        font-size:9px;
        flex:1
    }
    .back-to-top {
        font-size:8px;
        gap:10px
    }
    .footer-bottom {
        flex-direction:column;
        gap:8px;
        font-size:8px;
        padding-block:20px
    }
    .project-dialog[open] {
        grid-template-columns:1fr
    }
    .dialog-copy {
        padding:28px
    }
    .dialog-copy h2 {
        font-size:30px
    }
    .dialog-copy>p:not(.eyebrow) {
        font-size:12px
    }
    .dialog-copy .button {
        width:100%
    }
}

@media(max-width:360px) {
    .container {
        width:calc(100% - 32px)
    }
    .hero h1 {
        font-size:8.7vw
    }
    .hero-actions {
        gap:13px
    }
    .hero-actions .button {
        font-size:8px
    }
    .hero-actions .text-link {
        font-size:8px
    }
    .contact-links a {
        font-size:22px
    }
    .contact h2 {
        font-size:42px
    }
    .contact-arrow {
        width:48px;
        height:48px;
        font-size:33px
    }
}



/* Original brand accents: yellow marker, square bullets and supplied pictograms. */
.highlight {
    color:var(--ink);
    background:var(--yellow);
    padding:.04em .13em;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
    font-weight:inherit;
}
h2 { line-height:1.2; }
.hero-description .highlight { font-weight:650; }
.section-label { display:flex; align-items:center; gap:12px; }
.section-label::before { content:''; width:9px; height:9px; background:var(--red); flex-shrink:0; }
.contact .section-label::before { background:var(--ink); }
.source-icon { display:inline-flex; width:76px; height:76px; align-items:center; justify-content:center; flex-shrink:0; background:none; }
.source-icon::after { content:none; }
.source-icon img { width:100%; height:100%; object-fit:contain; }
.service h3 { font-size:42px; font-style:italic; letter-spacing:-.035em; }
.service h3>span { display:block; margin-top:5px; font-size:24px; font-weight:650; letter-spacing:-.025em; }
.service-design h3 { color:var(--yellow); }
.service-web h3 { color:var(--red); }
.service-top { justify-content:flex-start; }
.service>p { font-size:13px; }
.service-list { font-size:12px; display:grid; gap:9px; line-height:1.5; }
.service-list li { display:flex; align-items:baseline; }
.service-link { font-size:12px; }
.principle { gap:23px; }
.principle>.source-icon { padding:0; }
.principle .source-icon { width:64px; height:64px; }
.principle .source-icon img { width:100%; height:100%; }
.principle h3 .highlight { line-height:1.6; }
.process-grid .source-icon { margin:6px 0 28px; }
.process-grid p { font-size:13px; }
.hero-sign { width:34px; height:34px; }

/* Straight artwork with quick crossfades and manual controls. */
.hero-grid { grid-template-columns:1.15fr .85fr; gap:38px; }
.hero-copy { min-width:0; }
.hero-slider { position:relative; min-width:0; border:0; background:none; }
.hero-slides { display:grid; }
.hero-slide {
    grid-area:1 / 1;
    min-width:0;
    margin:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease;
}
.hero-slide.is-active { opacity:1; visibility:visible; }
.hero-slide figcaption { padding:20px 0 0; min-height:72px; border:0; }
.hero-slide figcaption strong { display:block; font-size:16px; line-height:1.4; }
.hero-slide figcaption span { display:block; margin-top:5px; font-size:10px; color:#c7c9e1; }
.slider-controls { display:flex; align-items:center; padding:0; gap:16px; }
.slider-dots { display:flex; gap:0; }
.slider-dots button { width:34px; height:40px; display:grid; place-items:center; border:0; padding:0; background:none; }
.slider-dots button::after { content:''; display:block; width:18px; height:4px; background:#555667; transition:background .2s; }
.slider-dots button[aria-current]::after { background:var(--red); }

/* The three full service names stay visible at every breakpoint. */
.discipline-band { background:var(--red); color:var(--white); }
.discipline-band .container { display:grid; grid-template-columns:repeat(3,1fr); padding-block:27px; }
.discipline-band a { padding-inline:12%; border-right:1px solid #ffffff50; display:flex; flex-direction:column; gap:4px; }
.discipline-band a:first-child { padding-left:0; }
.discipline-band a:last-child { border:0; }
.discipline-band strong { font-size:clamp(30px,4.4vw,62px); font-weight:800; letter-spacing:-.04em; line-height:1; }
.discipline-band span { font-size:clamp(14px,1.6vw,22px); font-weight:500; line-height:1.5; }
.discipline-band a:hover strong { color:var(--ink); }

/* One source list; JS repeats it only to fill the continuous logo strip. */
.clients { padding-block:34px; border-bottom:1px solid var(--line); }
.clients-inner { display:grid; grid-template-columns:1fr 2.8fr; gap:40px; align-items:center; }
.clients h2 { font-size:17px; font-weight:650; letter-spacing:-.03em; line-height:1.8; }
.client-slider { min-width:0; overflow-x:auto; padding-block:6px; }
.client-slider:focus-visible { outline:2px solid var(--red); outline-offset:6px; }
.client-slider.is-ready { overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent); }
.client-track { display:flex; width:max-content; }
.client-logos { display:flex; align-items:center; gap:36px; padding:0 36px 0 0; margin:0; list-style:none; flex:none; }
.client-logos li { width:120px; flex:none; }
.client-logos img { width:100%; height:38px; object-fit:contain; }
.client-slider.is-ready .client-track { animation:client-scroll var(--client-duration,24s) linear infinite; animation-play-state:paused; }
.client-slider.is-visible .client-track { animation-play-state:running; }
.client-slider:hover .client-track,.client-slider:focus-within .client-track { animation-play-state:paused; }
@keyframes client-scroll { to { transform:translateX(var(--client-distance)); } }


/* Reference descriptions and original-style service tags are readable before opening. */
.work-grid { row-gap:62px; }
.work-description { font-size:13px; line-height:1.85; max-width:500px; color:var(--muted); margin-top:13px; }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:18px 0 0; }
.project-tags li { display:flex; gap:7px; align-items:center; font-size:10px; color:#515267; padding:7px 10px; background:#eff0fa; }
.project-tags li::before { content:''; display:block; width:12px; height:13px; flex-shrink:0; background:url('../images/icons/ticket.svg') center / contain no-repeat; }
.dialog-tags .project-tags { margin-top:20px; }
.dialog-copy .button { margin-top:28px; }

@media(max-width:1100px) {
    .hero-grid { gap:28px; }
    .hero-slider { max-width:100%; }
    .clients-inner { grid-template-columns:1fr 2.5fr; gap:30px; }
    .service h3 { font-size:36px; }
    .service h3>span { font-size:21px; }
    .service-list { font-size:11px; }
}
@media(max-width:850px) {
    .hero-grid { grid-template-columns:1.05fr .95fr; gap:24px; }
    .hero h1 { font-size:5.1vw; }
    .hero-slider figcaption { padding:14px; }
    .hero-slider figcaption strong { font-size:14px; }
    .clients-inner { grid-template-columns:1fr; gap:20px; }
    .clients h2 { text-align:center; }
    .clients h2 br { display:none; }
    .service h3 { font-size:32px; }
    .service h3>span { font-size:18px; }
    .service>p { font-size:12px; }
    .service-list { font-size:10px; }
    .service-link { font-size:11px; }
    .principle { gap:15px; }
    .principle .source-icon { width:52px; height:52px; }
    
    .work-meta { align-items:flex-start; }
    .work-description { font-size:12px; }
}
@media(max-width:600px) {
    .hero-grid { grid-template-columns:1fr; gap:32px; padding-top:40px; padding-bottom:34px; }
    .hero h1 { font-size:8.7vw; line-height:1.12; }
    .hero-description { font-size:13px; max-width:400px; }
    .hero-actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px 20px; }
    .hero-actions .button { font-size:11px; padding:14px 16px; }
    .hero-actions .text-link { font-size:11px; }
    .hero-slider { width:100%; max-width:410px; margin-inline:auto; }
    .hero-slide figcaption { min-height:70px; padding:14px 18px; }
    .hero-sign { width:26px; height:26px; }
    .discipline-band .container { padding-block:22px; }
    .discipline-band a { padding-inline:12px; gap:5px; }
    .discipline-band a:last-child { padding-right:0; }
    .discipline-band strong { font-size:clamp(23px,6.6vw,38px); }
    .discipline-band span { font-size:clamp(10px,2.8vw,15px); white-space:nowrap; }
    .clients { padding-block:26px; }
    .clients h2 { font-size:14px; }
    .client-logos { gap:28px; padding-right:28px; }
    .client-logos li { width:100px; }
    .client-logos img { height:32px; }
    .service h3 { font-size:38px; }
    .service h3>span { font-size:21px; }
    .service-top { position:static; margin-bottom:24px; }
    .service>p { font-size:13px; }
    .service-list { font-size:12px; gap:12px; padding-block:24px; }
    .service-link { font-size:12px; }
    .service h3 { padding-right:0; }
    .section-label { font-size:10px; }
    .source-icon { width:68px; height:68px; }
    
    .work-grid { row-gap:38px; }
    .work-meta>span { font-size:8px; }
    .work-description { font-size:12px; }
    .project-tags { gap:6px; }
    .project-tags li { font-size:9px; padding:6px 8px; }
    .principle .source-icon { width:56px; height:56px; }
    .principle h3 { font-size:16px; }
    .process-grid { gap:30px 20px; }
    .process-grid p { font-size:12px; }
    .contact-top { display:block; position:relative; }
    .contact h2 { font-size:12vw; }
    .contact-arrow { position:absolute; right:0; bottom:0; width:42px; height:42px; margin-bottom:0; font-size:28px; }
}


/* Hero uses three square pictures; the reference gallery keeps all four. */
.project-collage {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:repeat(12,minmax(0,1fr));
    aspect-ratio:1;
    gap:10px;
    width:100%;
}
.collage-tile { min-width:0; min-height:0; overflow:hidden; }
.gallery-image { display:block; width:100%; height:100%; overflow:hidden; }
.gallery-image>img,.gallery-image>svg { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-image.image-contain>img { object-fit:contain; }
.collage-fiala .tile-1 { grid-area:1 / 1 / 9 / 9; }
.collage-fiala .tile-2 { grid-area:2 / 9 / 6 / 13; }
.collage-fiala .tile-3 { grid-area:9 / 5 / 13 / 9; }
.collage-color .tile-1 { grid-area:5 / 5 / 13 / 13; }
.collage-color .tile-2 { grid-area:1 / 6 / 5 / 10; }
.collage-color .tile-3 { grid-area:6 / 1 / 10 / 5; }
.collage-efn .tile-1 { grid-area:1 / 5 / 9 / 13; }
.collage-efn .tile-2 { grid-area:2 / 1 / 6 / 5; }
.collage-efn .tile-3 { grid-area:9 / 6 / 13 / 10; }
.collage-bronzer .tile-1 { grid-area:1 / 1 / 9 / 9; }
.collage-bronzer .tile-2 { grid-area:4 / 9 / 8 / 13; }
.collage-bronzer .tile-3 { grid-area:9 / 2 / 13 / 6; }
.hero-slide figcaption { padding-inline:0; }

/* One square preview and four square thumbnails. */
.work-visual,.work-color .work-visual { display:block; position:relative; height:auto; aspect-ratio:1; background:none; }
.work-visual>.gallery-image { height:100%; }
.project-thumbs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.project-thumb {
    display:block; min-width:0; aspect-ratio:1; padding:0; border:0; border-radius:0;
    position:relative; background:none; opacity:.6; transition:opacity .2s;
}
.project-thumb:hover,.project-thumb[aria-pressed=true] { opacity:1; }
.project-thumb[aria-pressed=true]::after { content:''; position:absolute; height:3px; left:0; right:0; bottom:-6px; background:var(--red); }
.project-thumb .gallery-image>svg { overflow:hidden; }
.work-meta { margin-top:18px; }

/* Large lightbox: the picture gets the available height, details stay in a narrow sidebar. */
.project-dialog { width:min(1680px,calc(100% - 24px)); height:calc(100dvh - 24px); max-width:none; max-height:calc(100dvh - 24px); margin:auto; }
.project-dialog[open] { grid-template-columns:minmax(0,1fr) 290px; }
.dialog-gallery { position:relative; min-width:0; min-height:0; padding:16px; align-self:stretch; display:flex; background:#0c0d20; color:#fff; }
.dialog-art { display:flex; flex:1; min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain; scrollbar-color:#626274 #0c0d20; }
.dialog-art .gallery-image { width:var(--image-size,100%); height:var(--image-size,100%); flex:none; margin:auto; max-width:none; }
.dialog-art .gallery-image>img { object-fit:contain; }
.dialog-art.is-zoomed { display:block; cursor:grab; }
.dialog-art.is-dragging { cursor:grabbing; }
.dialog-art.is-zoomed .gallery-image { width:calc(var(--image-size) * 2); height:calc(var(--image-size) * 2); }
.dialog-art:focus-visible { outline:2px solid var(--yellow); outline-offset:2px; }
.gallery-zoom { position:absolute; top:24px; left:24px; z-index:2; display:flex; gap:14px; align-items:center; padding:9px 13px; border:1px solid #ffffff40; background:#0c0d20e8; color:#fff; font-size:11px; }
.gallery-zoom:hover { border-color:var(--yellow); }
.gallery-zoom span { font-size:19px; line-height:1; }
.gallery-navigation { display:flex; align-items:center; justify-content:center; gap:8px; }
.gallery-navigation>button { width:42px; height:42px; flex-shrink:0; background:transparent; border:1px solid var(--line); color:var(--ink); font-size:24px; }
.gallery-navigation>button:hover { background:var(--red); border-color:var(--red); color:white; }
.gallery-caption { text-align:center; min-width:0; flex:1; font-size:10px; line-height:1.6; }
.gallery-caption [data-gallery-count] { display:block; color:var(--muted); font-size:10px; }
.dialog-thumbs { display:flex; justify-content:center; gap:8px; margin:14px 0 0; padding-bottom:6px; }
.dialog-thumbs .project-thumb { flex:none; height:auto; width:calc((100% - 24px) / 4); max-width:64px; }
.dialog-tools { margin-bottom:32px; }
.dialog-copy { padding:64px 24px 28px; align-self:stretch; overflow:auto; display:flex; flex-direction:column; justify-content:center; }
.dialog-copy h2 { font-size:32px; }
.dialog-copy .button { gap:12px; font-size:10px; padding:14px; }
.dialog-copy .button span { font-size:17px; }
.dialog-close { background:var(--ink); }
@media(max-width:1100px) {
    .project-collage { gap:8px; }
    .project-dialog[open] { grid-template-columns:minmax(0,1fr) 250px; }
    .dialog-copy { padding-inline:20px; }
    .dialog-copy h2 { font-size:28px; }
}
@media(max-width:700px) {
    .project-dialog { width:100%; height:auto; max-height:100dvh; }
    .project-dialog[open] { grid-template-columns:1fr; }
    .dialog-gallery { height:calc(100vw + 48px); min-height:0; padding:60px 12px 12px; }
    .dialog-close { position:fixed; right:12px; top:10px; }
    .gallery-zoom { top:12px; left:12px; }
    .dialog-thumbs .project-thumb { width:54px; height:54px; }
    .dialog-copy { padding:32px 24px; overflow:visible; }
    .dialog-copy .button { align-self:flex-start; width:auto; }
}
@media(max-width:600px) {
    .hero-slider { max-width:100%; }
    .project-collage { gap:8px; }
    .hero-slide figcaption { padding:18px 0 0; min-height:70px; }
    .project-thumbs { gap:8px; margin-top:10px; }
    .work-meta { margin-top:16px; }
}

/* System preference is the default; a visitor can explicitly choose motion for this site. */
html[data-motion="reduce"] { scroll-behavior:auto; }
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after { animation:none!important; transition:none!important; }
html[data-motion="reduce"] .reveal { opacity:1; transform:none; }
html[data-motion="reduce"] .client-slider.is-ready { overflow-x:auto; mask-image:none; }
html[data-motion="reduce"] .client-slider.is-ready .client-track { transform:none; }
html[data-motion="reduce"] .client-logos[aria-hidden] { display:none; }
@media(prefers-reduced-motion:reduce) {
html:not([data-motion="full"]) { scroll-behavior:auto; }
html:not([data-motion="full"]) *,html:not([data-motion="full"]) *::before,html:not([data-motion="full"]) *::after { animation:none!important; transition:none!important; }
html:not([data-motion="full"]) .reveal { opacity:1; transform:none; }
html:not([data-motion="full"]) .client-slider.is-ready { overflow-x:auto; mask-image:none; }
html:not([data-motion="full"]) .client-slider.is-ready .client-track { transform:none; }
html:not([data-motion="full"]) .client-logos[aria-hidden] { display:none; }
}
.motion-toggle { padding:4px 0; min-height:32px; background:none; border:0; border-bottom:1px solid #ffffff60; color:#d1d1da; font:inherit; font-size:10px; white-space:nowrap; align-self:flex-start; }
.motion-toggle:hover { color:var(--yellow); border-color:var(--yellow); }

@media print {
    .motion-toggle { display:none!important; }
    .client-slider.is-ready { overflow:visible; mask-image:none; }
    .client-track { width:auto; animation:none!important; transform:none!important; }
    .client-logos { flex-wrap:wrap; }
    .client-logos[aria-hidden] { display:none; }
    .hero-slider,.slider-controls { display:none; }
.site-header,.work-open,.scroll-progress,.dialog-close,.project-dialog,.back-to-top,.contact-arrow {
        display:none!important
    }
    .reveal {
        opacity:1!important;
        transform:none!important
    }
    .container {
        width:100%
    }
    .section-pad {
        padding-block:25px
    }
    .section-dark,.contact {
        background:white;
        color:black
    }
    .hero-grid {
        display:block;
        padding:20px 0;
        min-height:0
    }
    .hero h1 {
        font-size:38px;
        color:black
    }
    .hero-description,.approach-copy>p,.principle p,.contact-bottom>p,.footer-top>p {
        color:#333
    }
    .work-card,.service,.principle {
        break-inside:avoid
    }
    .hero-actions,.hero-bottom {
        display:none
    }
    .site-footer {
        padding-top:20px
    }
}