/* Just Design Ine / Studio signature. Shared by the site and block editor. */
@font-face {
    font-family: 'Fjalla One';
    src: url('assets/fonts/FjallaOne-Regular.woff2') format('woff2');
    font-style: normal; font-weight: 400; font-display: swap;
}
:root { --jdi-display: 'Fjalla One', 'Arial Narrow', sans-serif; }
h1, h2, h3, .jdi-section h2, .jdi-section h3 {
    font-family: var(--wp--preset--font-family--display, var(--jdi-display));
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.08;
}
.jdi-section { padding-block: clamp(64px, 7vw, 108px); }
.jdi-section h2 { font-size: clamp(2.8rem, 5.3vw, 5rem); max-width: 1080px; }
.jdi-section h2 em { font-style: normal; }
.jdi-eyebrow, .jdi-micro, .jdi-service-deliverables, .jdi-portfolio-disclosure {
    font-family: Inter, Arial, sans-serif; font-weight: 600; letter-spacing: .035em;
}
.jdi-eyebrow { font-size: .8rem; }
.jdi-header { background: var(--jdi-ink); color: var(--jdi-paper); border-top: 0; border-bottom: 1px solid rgb(168 218 220 / 28%); }
.jdi-header-inner { padding-block: 22px; }
.jdi-header a { color: var(--jdi-paper); }
.jdi-header .jdi-wordmark a { display: flex; align-items: center; gap: 13px; }
.jdi-brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 63px; height: 57px; border: 2px solid var(--jdi-blue);
    font: 600 2rem/1 Inter, sans-serif; letter-spacing: -.095em;
}
.jdi-brand-icon > span { color: var(--jdi-accent); }
.jdi-brand-name { font: 600 .8rem/1.3 Inter, sans-serif; letter-spacing: .04em; }
.jdi-header .wp-block-navigation { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.jdi-header .wp-block-navigation-item:last-child a, .jdi-header .preview-nav > a:last-child {
    background: var(--jdi-blue); color: var(--jdi-ink); padding: 10px 18px; border: 0;
}
.jdi-header .jdi-menu-toggle { border-color: var(--jdi-blue); color: var(--jdi-paper); }
.jdi-header .jdi-menu-toggle:hover { color: var(--jdi-ink); }
.jdi-signature {
    position: relative; background: var(--jdi-ink); color: var(--jdi-paper);
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    column-gap: 30px; row-gap: 60px; padding-top: 66px; padding-bottom: 0;
}
.jdi-signature::before {
    content: ''; position: absolute; right: 0; top: 48px; bottom: 0; width: 47%;
    background-image: linear-gradient(rgb(168 218 220 / 8%) 1px, transparent 1px), linear-gradient(90deg,rgb(168 218 220 / 8%) 1px, transparent 1px);
    background-size: 46px 46px; pointer-events: none;
}
.jdi-signature > * { position: relative; }
.jdi-signature .jdi-eyebrow { color: var(--jdi-blue); max-width: 440px; }
.jdi-signature h1 {
    font-family: var(--jdi-display); font-size: clamp(4rem, 7.8vw, 7.6rem);
    line-height: 1.01; letter-spacing: -.035em; margin: 28px 0;
}
.jdi-signature h1 em { font-style: normal; color: var(--jdi-blue); border-bottom: 7px solid var(--jdi-blue); }
.jdi-signature .jdi-lead { max-width: 470px; font-size: 1.05rem; line-height: 1.7; color: var(--jdi-paper); }
.jdi-signature .wp-block-button__link { background: var(--jdi-paper); color: var(--jdi-ink); border-color: var(--jdi-paper); }
.jdi-signature .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--jdi-paper); border-color: var(--jdi-blue); }
.jdi-signature .wp-block-button__link:hover, .jdi-signature .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--jdi-blue); color: var(--jdi-ink); }
.jdi-studio-board { align-self: center; min-width: 0; }
.jdi-studio-board figure { margin: 0; width: 100%; }
.jdi-studio-board img { width: 100%; height: auto; display: block; }
.jdi-studio-board .jdi-micro { color: var(--jdi-blue); text-align: center; margin: 16px 0 0; font-size: .75rem; }
.jdi-studio-strip {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgb(168 218 220 / 35%); gap: 20px;
}
.jdi-studio-strip > p { margin: 0 !important; padding: 22px 0; font: 600 .75rem/1.5 Inter, Arial, sans-serif; letter-spacing: .025em; }
.jdi-studio-strip > p:nth-child(2) { text-align: center; }
.jdi-studio-strip > p:last-child { text-align: right; }
.jdi-studio-intro { background: var(--jdi-paper); }
.jdi-studio-intro h2 em { box-shadow: inset 0 -.2em var(--jdi-blue); }
.jdi-intro-copy .jdi-lead { font-size: 1.3rem; font-weight: 600; max-width: 730px; }
.jdi-services { gap: 0; border: 1px solid var(--jdi-ink); }
.jdi-services > div { padding: 34px; border-top: 0; background: var(--jdi-blue); }
.jdi-services > div + div { background: var(--jdi-paper); border-left: 1px solid var(--jdi-ink); }
.jdi-services h3 { font-size: 2.5rem; text-transform: uppercase; }
.jdi-services p:not(.jdi-eyebrow) { max-width: 470px; }
.jdi-services .jdi-service-deliverables { padding-top: 20px; border-top: 1px solid var(--jdi-line); font-size: .73rem; }
.jdi-work-section { background: var(--jdi-ink); color: var(--jdi-paper); }
.jdi-work-section h2 em { color: var(--jdi-blue); }
.jdi-work-section .jdi-eyebrow { color: var(--jdi-blue); }
.jdi-work-section .jdi-section-note { color: var(--jdi-paper); max-width: 560px; }
.jdi-project-grid { column-gap: 24px; }
.jdi-project figure { border: 1px solid var(--jdi-blue); }
.jdi-project h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); text-transform: uppercase; }
.jdi-project > p:last-child { color: var(--jdi-blue); font-size: .75rem; padding-bottom: 20px; border-bottom: 1px solid rgb(168 218 220 / 35%); }
.jdi-project .jdi-micro { color: var(--jdi-paper); font-size: .72rem; }
.jdi-portfolio-disclosure { color: var(--jdi-blue); font-size: .7rem; margin: 40px 0 0; }
.jdi-logo-section { border-top: 0; }
.jdi-logo-section h2 em { box-shadow: inset 0 -.18em var(--jdi-blue); }
.jdi-logo-grid { gap: 0; border: 1px solid var(--jdi-ink); }
.jdi-logo { background: var(--jdi-paper); padding: 20px; }
.jdi-logo + .jdi-logo { border-left: 1px solid var(--jdi-ink); }
.jdi-logo figure { aspect-ratio: 1; }
.jdi-logo img { aspect-ratio: 1; object-fit: contain; }
.jdi-logo .jdi-micro { text-align: center; border-top: 1px solid var(--jdi-line); padding-top: 12px; font-size: .72rem; }
.jdi-process-section { background: var(--jdi-blue); }
.jdi-process-section h2 em { color: var(--jdi-ink); }
.jdi-process-grid { gap: 32px; counter-reset: step; }
.jdi-step { border-top: 2px solid var(--jdi-ink); }
.jdi-step .jdi-step-number { font: 400 3.5rem/1 var(--jdi-display); color: var(--jdi-ink); margin: 0 0 28px; }
.jdi-step h3 { font-size: 2rem; max-width: 350px; }
.jdi-step p:last-child { color: var(--jdi-ink); }
.jdi-faq-section h2 { max-width: 850px; }
.jdi-faq { margin-left: 0; max-width: none; }
.jdi-faq details { padding: 26px 0; }
.jdi-faq summary { font-weight: 400; font-size: 1.05rem; }
.jdi-contact { background: var(--jdi-ink); color: var(--jdi-paper); position: relative; border-top: 6px solid var(--jdi-blue); }
.jdi-contact .jdi-eyebrow { color: var(--jdi-blue); }
.jdi-contact h2 { font-size: clamp(3.5rem, 8vw, 8rem); line-height: 1.05; max-width: 1100px; }
.jdi-contact h2 em { color: var(--jdi-blue); }
.jdi-contact .jdi-contact-open { background: var(--jdi-paper); color: var(--jdi-ink); border-color: var(--jdi-paper); padding: 18px 26px; }
.jdi-contact .jdi-contact-open:hover { background: var(--jdi-blue); }
.jdi-footer { background: var(--jdi-ink); color: var(--jdi-paper); border-top: 1px solid rgb(168 218 220 / 35%); }
.jdi-footer a { color: var(--jdi-paper); }
.jdi-footer .jdi-wordmark { font-family: var(--jdi-display); font-size: 2.1rem; letter-spacing: -.02em; text-transform: uppercase; }
.jdi-footer .jdi-micro { color: var(--jdi-blue); }
.jdi-menu-dialog, .jdi-contact-dialog { border-top: 6px solid var(--jdi-blue); }
.jdi-menu-link { font-family: var(--jdi-display); text-transform: uppercase; letter-spacing: -.02em; }
.jdi-dialog-content h2 { font-family: var(--jdi-display); text-transform: uppercase; font-size: clamp(2.1rem, 5vw, 3.2rem); }
.jdi-hero-alt { background: var(--jdi-blue); color: var(--jdi-ink); }
.jdi-hero-alt h1 { font: 400 clamp(3.6rem, 7.5vw, 7.5rem)/1.05 var(--jdi-display); letter-spacing: -.03em; }
.jdi-hero-alt h1 em { font-style: normal; border-bottom: 7px solid var(--cerulean); }

@media (min-width: 1600px) { .jdi-signature { column-gap: 50px; } }
@media (max-width: 1100px) {
    .jdi-signature { column-gap: 20px; }
    .jdi-signature h1 { font-size: clamp(3.8rem, 7.7vw, 6rem); }
    .jdi-logo { padding: 14px; }
}
@media (max-width: 899px) {
    .jdi-signature { grid-template-columns: minmax(0,1fr); row-gap: 32px; }
    .jdi-signature::before { width: 100%; top: 55%; }
    .jdi-signature h1 { font-size: clamp(4rem, 11.2vw, 6.7rem); }
    .jdi-studio-board { width: 100%; max-width: 610px; margin-inline: auto !important; }
    .jdi-signature .jdi-lead { max-width: 560px; }
    .jdi-signature .jdi-studio-board .jdi-micro { margin-top: 0; }
    .jdi-services > div { padding: 26px; }
    .jdi-logo-grid > .jdi-logo:nth-child(3) { border-left: 0; }
    .jdi-logo-grid > .jdi-logo:nth-child(n+3) { border-top: 1px solid var(--jdi-ink); }
    .jdi-process-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
    .jdi-step h3 { font-size: 1.6rem; }
}
@media (max-width: 599px) {
    .jdi-header-inner { padding-block: 16px; }
    .jdi-brand-icon { width: 48px; height: 46px; font-size: 1.6rem; }
    .jdi-brand-name { font-size: .75rem; }
    .jdi-header .jdi-wordmark a { gap: 9px; }
    .jdi-section { padding-block: 56px; }
    .jdi-section h2 { font-size: clamp(2.15rem, 8.4vw, 3.1rem); }
    .jdi-signature { padding-top: 38px; padding-bottom: 0; row-gap: 28px; }
    .jdi-signature .jdi-eyebrow { font-size: .75rem; }
    .jdi-signature h1 { font-size: clamp(3rem, 12vw, 4.6rem); margin-block: 24px; }
    .jdi-signature .jdi-lead { font-size: 1rem; }
    .jdi-signature h1 em { border-bottom-width: 5px; }
    .jdi-studio-strip { gap: 12px; }
    .jdi-studio-strip > p { font-size: .68rem; letter-spacing: 0; padding: 18px 0; }
    .jdi-studio-strip > p:nth-child(2), .jdi-studio-strip > p:last-child { text-align: left; }
    .jdi-studio-board .jdi-micro { font-size: .68rem; }
    .jdi-intro-copy .jdi-lead { font-size: 1.15rem; }
    .jdi-services > div { padding: 26px 22px; }
    .jdi-services > div + div { border-left: 0; border-top: 1px solid var(--jdi-ink); }
    .jdi-services h3 { font-size: 2rem; }
    .jdi-project-grid { row-gap: 28px; }
    .jdi-project h3 { font-size: 2rem; }
    .jdi-logo { padding: 12px; }
    .jdi-logo .jdi-micro { font-size: .68rem; }
    .jdi-process-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
    .jdi-step .jdi-step-number { font-size: 2.8rem; margin-bottom: 18px; }
    .jdi-step h3 { font-size: 2rem; }
    .jdi-contact h2 { font-size: clamp(2.8rem, 10.3vw, 4.2rem); }
    .jdi-hero-alt h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
}
@media (max-width: 380px) {
    .jdi-logo + .jdi-logo { border-left: 0; border-top: 1px solid var(--jdi-ink); }
}

/* The supplied logo is shown intact, with its own proportions and colours. */
.jdi-site-logo { margin: 0; width: 108px; flex: 0 0 auto; }
.jdi-site-logo a { display: block; }
.jdi-site-logo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.jdi-header-inner { padding-block: 16px; }
.jdi-footer .jdi-site-logo { width: 130px; }
.jdi-menu-logo { display: block; width: 74px; height: 74px; object-fit: contain; }
.jdi-menu-branded .jdi-dialog-bar { background: var(--jdi-ink); }
.jdi-menu-branded .jdi-dialog-close { border-color: var(--jdi-blue); }

/* Every website image has the same destination as its visible action button. */
a[href], button, summary, .wp-block-button__link, .jdi-project figure a img { cursor: pointer; }
.jdi-project figure a { display: block; width: 100%; height: 100%; }
.jdi-project .jdi-project-description {
    color: var(--jdi-blue); font-size: .75rem;
    padding-bottom: 8px; border-bottom: 0;
}
.jdi-project > .wp-block-buttons { margin-top: 14px !important; width: 100%; }
.jdi-project-button { width: 100%; }
.jdi-project-button .wp-block-button__link {
    display: block; width: 100%; padding: 15px 18px;
    color: var(--jdi-ink); background: var(--jdi-blue); border-color: var(--jdi-blue);
    font: 600 .85rem/1.5 Inter, sans-serif; text-align: center;
}
.jdi-project-button .wp-block-button__link:hover,
.jdi-project-button .wp-block-button__link:focus-visible { background: var(--jdi-paper); border-color: var(--jdi-paper); }
.jdi-project figure a:focus-visible { outline-offset: -5px; }
.screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@supports (grid-template-rows: subgrid) {
    .jdi-project { grid-row: span 5; }
}

/* Small one-time entrances; content stays readable if JavaScript is unavailable. */
@keyframes jdi-arrive {
    from { opacity: .45; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes jdi-panel-arrive {
    from { opacity: .5; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    .jdi-entered { animation: jdi-arrive .6s cubic-bezier(.2,.7,.25,1) both; }
    .jdi-signature .jdi-hero-copy { animation: jdi-arrive .65s ease-out both; }
    .jdi-studio-board { animation: jdi-arrive .8s ease-out both; }
    .jdi-dialog[open] .jdi-dialog-content, .jdi-dialog[open] .jdi-menu-links { animation: jdi-panel-arrive .22s ease-out both; }
    a, button, summary { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
    .jdi-project img, .jdi-logo img, .jdi-site-logo img { transition: transform .35s cubic-bezier(.2,.7,.25,1); }
}
@media (hover: hover) and (pointer: fine) {
    .jdi-project figure:hover img { transform: scale(1.045); }
    .jdi-logo figure:hover img { transform: scale(1.04); }
    .jdi-site-logo a:hover img { transform: scale(1.025); }
    .wp-block-button__link:hover, .jdi-contact-open:hover { transform: translateY(-3px); box-shadow: 0 5px 0 rgb(168 218 220 / 22%); }
    .jdi-menu-link:hover { transform: translateX(6px); }
    .jdi-header .wp-block-navigation a:hover { box-shadow: inset 0 -2px var(--jdi-blue); }
    .jdi-footer a:hover { color: var(--jdi-blue); text-decoration-thickness: 2px; }
}
.jdi-project figure:focus-within img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
    .jdi-entered, .jdi-hero-copy, .jdi-studio-board, .jdi-dialog-content, .jdi-menu-links { animation: none !important; }
    .jdi-project img, .jdi-logo img, .jdi-site-logo img, .wp-block-button__link, .jdi-contact-open, .jdi-menu-link { transform: none !important; transition: none !important; }
}
@media (max-width: 599px) {
    .jdi-header .jdi-site-logo { width: 80px; }
    .jdi-header-inner { padding-block: 12px; }
    .jdi-footer .jdi-site-logo { width: 108px; }
    .jdi-menu-logo { width: 62px; height: 62px; }
}