@font-face { font-family: 'KaarleKumppanit'; src: url('/fonts/kk_regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } :root { --bp-mobile-max: 1023px; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xs: 0.125rem; --space-4xs: 0.1rem; --space-5xs: 0.05rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-micro: 0.35rem; --space-tiny: 0.375rem; --space-text-xs: 0.1em; --space-text-sm: 0.3em; --space-text-md: 0.5em; --space-text-lg: 1em; --space-text-xl: 1.2em; --fs-logo: clamp(22.5px, 2.4vw, 27px); --fs-desktop: clamp(15px, 1.2vw, 18px); --fs-mobile: clamp(0.75rem, 2.8vw, 1rem); --fs-small: 0.875rem; --font-sans: 'KaarleKumppanit', ui-sans-serif, system-ui, sans-serif; --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif; --ink: #000; --accent: #1a33ff; --paper: #f5f3f0; --pad-x-mobile: 16px; --pad-y-mobile: 16px; --pad-x-desktop: 32px; --pad-y-desktop: 32px; --safe-top: max(env(safe-area-inset-top,0px), var(--pad-y-mobile)); --safe-right: max(env(safe-area-inset-right,0px), var(--pad-x-mobile)); --safe-bottom: max(env(safe-area-inset-bottom,0px), var(--pad-y-mobile)); --safe-left: max(env(safe-area-inset-left,0px), var(--pad-x-mobile)); } @media (min-width:1024px){ :root{ --safe-top: max(env(safe-area-inset-top,0px), var(--pad-y-desktop)); --safe-right: max(env(safe-area-inset-right,0px), var(--pad-x-desktop)); --safe-bottom:max(env(safe-area-inset-bottom,0px), var(--pad-y-desktop)); --safe-left: max(env(safe-area-inset-left,0px), var(--pad-x-desktop)); --edge-fluid: clamp(28px, 6vh, 72px); --measure: clamp(45ch, 50vw, 115ch); } } *, *::before, *::after { box-sizing: border-box; border: none; outline: none; box-shadow: none; } html, body { margin: 0; padding: 0; background: #f5f3f0; } body { font-family: var(--font-sans); color: var(--ink); line-height: 1.5; } *:not(button):not(a):not([role="button"]):not([role="tab"]):not(.mobile-client):not(.mobile-dot) { transition: color 0.2s ease, background-color 0.2s ease; } .bg-paper { background-color: #f5f3f0; } .text-ink { color: var(--ink); } .text-center { text-align: center; } .text-right { text-align: right; } .uppercase { text-transform: uppercase; } .tracking-wide { letter-spacing: 0.025em; } .leading-tight { line-height: 1.25; } .leading-none { line-height: 1; } .font-normal { font-weight: 400; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .my-1 { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); } .fs-logo { font-size: var(--fs-logo); } .fs-desktop { font-size: var(--fs-desktop); } .fs-mobile { font-size: var(--fs-mobile); } .fs-small { font-size: var(--fs-small); } .sans { font-family: var(--font-sans); } .serif { font-family: var(--font-serif); } .apple-mark { font-family: var(--font-sans); } .site-frame { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); margin: 0; } @media (min-width: 1024px) { .desktop-only { display: contents; } .mobile-only { display: none; } .site-frame { padding-block: var(--edge-fluid); padding-inline: var(--edge-fluid); min-height: 100dvh; } .em { display: grid; grid-template-columns: 1fr var(--measure) var(--space-lg) var(--measure) 1fr; grid-template-rows: minmax(var(--edge-fluid), 1fr) max-content minmax(var(--edge-fluid), 1fr); column-gap: 0; row-gap: 0; min-height: calc(100dvh - 2 * var(--edge-fluid)); align-items: stretch; } .em [data-id="left-top"] { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; } .em [data-id="left-middle"] { grid-column: 2; grid-row: 2; place-self: center center; } .em [data-id="left-bottom"] { grid-column: 2; grid-row: 3; align-self: center; justify-self: center; } .em [data-id="right-top"] { grid-column: 4; grid-row: 1; align-self: center; justify-self: start; padding-right: var(--space-lg, 32px); padding-left: var(--space-xl); } .em [data-id="right-middle"] { grid-column: 4; grid-row: 2; place-self: center start; padding-right: var(--space-lg, 32px); padding-left: var(--space-xl); position: relative; } .em [data-id="right-bottom"] { grid-column: 4; grid-row: 3; align-self: center; justify-self: start; padding-right: var(--space-lg, 32px); padding-left: var(--space-xl); } .logo { margin: 0; padding: 0; line-height: 1; } .logo .text-center { margin: 0; } .contact-line, .contact { font-size: var(--fs-desktop); line-height: 1.1; display: flex; gap: var(--space-micro); flex-wrap: wrap; align-items: baseline; margin: 0; padding: 0; } .contact__name { font-family: var(--font-sans); font-weight: 400; } .contact-line .contact__phone { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; pointer-events: none; text-decoration: none !important; color: inherit !important; font-variant-ligatures: none; -webkit-font-feature-settings: "liga" 0; font-feature-settings: "liga" 0; } .contact-line .contact__phone::before { content: "\200B"; display: inline; } .contact-line .contact__phone::after { content: "\200B"; display: inline; } .contact__phone { font-family: var(--font-serif); font-weight: 500; } .contact__email { font-family: var(--font-serif); font-weight: 500; font-style: italic; text-decoration: none; color: inherit; } .about-prose { font-size: var(--fs-desktop); line-height: 1.4; color: var(--accent, #1a33ff); margin: 0; } .about-prose > * { margin: 0; } .about-prose h1, .about-prose .kicker { font-family: var(--font-sans); font-size: inherit; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; margin-top: 0; margin-bottom: var(--space-text-lg); } .about-prose .kicker:last-child { margin-top: var(--space-text-lg); margin-bottom: 0; } .about-prose p { font-family: var(--font-serif); font-size: inherit; line-height: 1.35; font-style: normal; margin: 0 0 var(--space-text-xl) 0; } .about-prose p:last-child { margin-bottom: 0; } .about-prose em, .about-prose i { font-style: italic; } .nav-right, a[href="works.html"], a[href="about.html"] { font-family: var(--font-sans); font-size: var(--fs-desktop); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; text-decoration: none; color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [data-id="right-top"] > *, [data-id="right-bottom"] > * { margin: 0; } [data-id="right-middle"] .about-prose { margin: 0; } [data-id="right-middle"] .about-prose > :first-child { margin-top: 0; } [data-id="right-middle"] .about-prose > :last-child { margin-bottom: 0; } } @media (max-width: 1023px) { .desktop-only { display: none; } .mobile-only { display: block; } body, html { overflow-x: hidden; max-width: 100vw; } .em { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: var(--space-xl); padding: var(--space-lg) var(--space-tiny); max-width: 100%; width: 100%; box-sizing: border-box; margin: 0; } [data-id="left-middle"] { grid-row: 1; grid-column: 1; text-align: center; margin: 0; padding: var(--space-xl) 0 0 0; box-sizing: border-box; width: 100%; max-width: 100%; } .client-page [data-id="left-middle"] { padding: var(--space-md) 0 0 0; } .client-page .em { gap: var(--space-xs); } [data-id="left-middle"] .logo { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } [data-id="left-middle"] .text-center { text-align: center; width: 100%; } [data-id="right-middle"] { grid-row: 2; grid-column: 1; color: var(--accent); font-family: var(--font-serif), Georgia, serif; line-height: 1.6; font-size: var(--fs-small); padding: 0; margin: 0; text-align: left; box-sizing: border-box; width: 100%; max-width: 100%; } [data-id="right-middle"] h1, [data-id="right-middle"] .kicker { font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif; font-size: var(--fs-mobile); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; margin-bottom: var(--space-text-md); } [data-id="right-middle"] .about-prose { width: min(365px, 100%); max-width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; min-width: 0; } [data-id="right-middle"] p { font-size: var(--fs-mobile); margin-bottom: var(--space-text-lg); line-height: 1.4; } [data-id="right-middle"] p:last-child { margin-bottom: 0; } [data-id="right-middle"] .last-kicker { margin-bottom: 0; } [data-id="mobile-nav"], .mobile-nav { grid-row: 3; grid-column: 1; display: flex; justify-content: center; align-items: center; gap: var(--space-3xl); margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0; text-align: center; } [data-id="mobile-nav"] a, .mobile-nav a { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-mobile); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; padding: var(--space-text-md) var(--space-text-lg); white-space: nowrap; background-color: transparent; border: none; margin: 0; text-align: center; } [data-id="mobile-nav"] a:hover, .mobile-nav a:hover { text-decoration: underline; } [data-id="mobile-contact"], .mobile-contact-section { grid-row: 4; grid-column: 1; text-align: center; padding: var(--space-xs) 0; margin: 0 auto; box-sizing: border-box; width: 100%; max-width: 100%; } [data-id="mobile-contact"] .contact-line { display: block; text-align: center; width: 100%; box-sizing: border-box; padding: var(--space-text-md) 0; } [data-id="mobile-contact"] .contact { font-size: var(--fs-mobile); line-height: 1.4; display: block; text-align: center; width: 100%; box-sizing: border-box; } [data-id="mobile-contact"] span, [data-id="mobile-contact"] a { display: block; line-height: 1.2; margin: var(--space-text-xs) 0; padding: 0; } [data-id="mobile-contact"] span:first-child { margin-top: var(--space-text-sm); margin-bottom: var(--space-text-xs); } [data-id="mobile-contact"] span { color: var(--ink) !important; text-decoration: none !important; } [data-id="mobile-contact"] span:nth-child(2) { color: var(--ink) !important; text-decoration: none !important; } [data-id="mobile-contact"] a { text-decoration: none; } [data-id="mobile-contact"] a:hover { text-decoration: none; color: inherit; } [data-id="mobile-contact"] br { display: none; } [data-id="mobile-nav"] { margin-bottom: var(--space-md) !important; } [data-id="mobile-contact"], .mobile-contact-section { padding-bottom: 0; margin-bottom: 0; } .mobile-content > :last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } .client-page .mobile-only:last-child { margin-bottom: 0; padding-bottom: 0; } .mobile-content [data-id="mobile-nav"]:last-child, .mobile-content .mobile-nav:last-child, .mobile-content [data-id="mobile-contact"]:last-child, .mobile-content .mobile-contact-section:last-child, .mobile-content .about-links:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } .route-about [data-id="right-middle"] { margin-top: var(--space-md) !important; } [data-id="right-middle"] { margin-top: var(--space-xl) !important; } @media (max-width: 360px) { .em { padding: var(--space-lg) 0; gap: var(--space-xl); } [data-id="left-middle"] { padding: 0; margin: 0; } [data-id="right-middle"] { padding: 0; font-size: var(--fs-small); } [data-id="mobile-contact"] { padding: 0; width: 90%; max-width: 90%; margin: 0 auto; } } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a:hover { opacity: 0.8; } @media (min-width: 1024px) { .about-page [data-id="left-middle"] { align-self: center; } .about-page [data-id="left-middle"] .text-right { text-align: right; } .about-page [data-id="left-middle"] .mt-1 { margin-top: var(--space-2xs); } .about-page [data-id="left-middle"] .mt-4 { margin-top: var(--space-md); } .about-page [data-id="left-middle"] .pt-3 { padding-top: var(--space-sm); } .about-page [data-id="left-middle"] .font-medium { font-weight: 500; } .about-page [data-id="left-middle"] a { color: inherit; text-decoration: none; } .about-page [data-id="left-middle"] a.hover\:underline:hover { text-decoration: underline; } .about-page [data-id="left-middle"] img { display: block; max-width: 158px; height: auto; } .about-page [data-id="right-top"] .logo { text-align: center; } .about-page .signoff { font-family: var(--font-serif); font-style: italic; } } @media (max-width: 1023px) { .route-about .about-prose { max-width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; } .route-about .about-prose p { color: var(--accent); font-size: var(--fs-mobile); line-height: 1.4; margin-bottom: var(--space-text-lg); } .route-about .about-prose em { font-style: italic; } .route-about .about-prose p:last-of-type { color: var(--accent); } .route-about .about-contact-section { margin-top: var(--space-xl); } .route-about .about-contact { margin-bottom: var(--space-md); font-size: var(--fs-mobile); line-height: 1.2; } .route-about .about-contact span, .route-about .about-contact a { display: block; line-height: 1.2; margin: var(--space-text-xs) 0; padding: 0; } .route-about .about-contact a { text-decoration: none; color: var(--ink); } .route-about .about-contact a:hover { text-decoration: none; color: var(--ink); } .route-about .about-contact span:first-child { margin-top: var(--space-text-sm); margin-bottom: var(--space-text-xs); } .route-about .about-contact br { display: none; } .route-about .about-photo { margin: var(--space-xs) 0; padding: 0; } .route-about .about-photo img { display: block; width: 100%; max-width: 100px; height: auto; border: 1px solid rgba(0, 0, 0, 0.08); } @media (max-width: 1023px) { .route-about .about-links { margin-top: 0 !important; } .route-about .about-prose p:last-child { margin-bottom: 0 !important; } .route-about .about-links a { font-size: var(--fs-mobile); line-height: 1.2; } .route-about .mobile-nav a { font-size: var(--fs-mobile); line-height: 1.2; } } .route-about .about-links a { display: block; margin-bottom: 0; text-decoration: underline; text-underline-offset: 2px; } .route-about [data-id="mobile-nav"] { margin-top: var(--space-xl); margin-bottom: 0 !important; } } .h-auto { height: auto; } .object-cover { object-fit: cover; } .works-page { position: relative; } @media (min-width: 1024px) { .works-page .em [data-id="left-middle"] .field-button { border: none; box-shadow: none; outline: none; padding: 0; margin: 0; } .works-page .field-button.mb-6 { margin-bottom: var(--space-sm) !important; } .works-page [data-id="left-middle"] { align-self: center; justify-self: center; } .works-page [data-id="left-middle"] .text-right { text-align: right; } .works-page [data-id="left-bottom"] { align-self: center; justify-self: center; margin-top: var(--space-2xl); } .works-page .works-about-text { max-width: var(--measure); margin: 0 auto; text-align: center; } .works-page .works-about-sans { font-family: var(--font-sans); font-size: calc(var(--fs-desktop) * 0.66); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: #0000EE; margin-bottom: 0; } .works-page .works-about-serif { font-family: var(--font-serif); font-size: calc(var(--fs-desktop) * 0.66); line-height: 1.35; margin-top: 0; margin-bottom: 0; } .works-page .client-button { transition: opacity 0.2s ease; } .works-page .client-button:hover { opacity: 0.7; } .works-page svg { pointer-events: none; } } @media (max-width: 1023px) { .works-page #mobile-fields { font-family: var(--font-serif); font-size: var(--fs-mobile); line-height: 1.68; margin: var(--space-md) 0 0 0; padding: 0 var(--space-lg); } .works-page #mobile-fields button { font-size: var(--fs-mobile); line-height: 1.68; } .works-page .mobile-fields-container { font-family: var(--font-serif); font-size: var(--fs-mobile); font-variant: small-caps; font-weight: 400; color: var(--ink); line-height: 1.68; } .works-page .mobile-field-selector { font-family: var(--font-serif); font-size: var(--fs-mobile); line-height: 1.68; text-decoration: none !important; } .works-page .mobile-field-selector.selected { border-bottom: 1px solid black !important; text-decoration: none !important; } .works-page #mobile-fields .mobile-field-selector, .works-page #mobile-fields .mobile-field-selector:hover, .works-page #mobile-fields .mobile-field-selector:focus, .works-page #mobile-fields .mobile-field-selector:active { text-decoration: none !important; } .works-page #mobile-clients { font-size: var(--fs-mobile); line-height: 1.2; margin: var(--space-md) 0 0 0; padding: 0 var(--space-lg) 0 0; text-align: left; } .works-page #mobile-clients button { font-size: var(--fs-mobile); line-height: 1.2; } .works-page .mobile-nav { margin: var(--space-xs) 0 0 0 !important; } .works-page .mobile-only { margin: 0 !important; padding: 0 !important; } .works-page .mobile-works-about { margin: var(--space-md) 0 0 0; padding: 0 var(--space-lg); } .works-page .mobile-works-about .works-about-text { max-width: 100%; } .works-page .mobile-works-about .works-about-sans { font-family: var(--font-sans); font-size: calc(var(--fs-mobile) * 0.66); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: inherit; margin-bottom: 0; } .works-page .mobile-works-about .works-about-serif { font-family: var(--font-serif); font-size: calc(var(--fs-mobile) * 0.66); line-height: 1.35; margin-top: 0; margin-bottom: 0; } } .absolute { position: absolute; } .relative { position: relative; } .w-full { width: 100%; } .h-full { height: 100%; } .client-page .em [data-id="left-bottom"] { align-self: start; } .client-page .client-header { width: 720px; margin: 0 auto; height: 100%; display: flex; align-items: center; } .client-page .client-header img { max-height: 3rem; max-width: 200px; height: auto; width: auto; object-fit: contain; } .logo-img { height: 3rem; width: auto; object-fit: contain; } .logo-img-centered { height: 3rem; width: auto; object-fit: contain; margin: 0 auto; } .social-icon-sm { width: 1rem; height: 1rem; } .social-icon-md { width: 1.25rem; height: 1.25rem; } .gap-1rem { gap: 1rem; } .min-h-150 { min-height: 150px; } .slide-image { object-fit: contain; width: 100%; height: 100%; } .slide-image.active { display: block; } .slide-image:not(.active) { display: none; } .mobile-gallery-top { margin-top: 1.25rem; margin-bottom: 0; } @media (max-width: 1023px) { .mobile-content [data-id="right-middle"] { margin-bottom: var(--space-xl); } } .mobile-caption-top { margin-top: 0.375rem; margin-bottom: 1.25rem; } .mobile-caption-padding { padding-bottom: 1rem; } .contact-name { font-family: var(--font-sans); font-weight: 400; } .contact-phone { font-family: var(--font-serif); font-weight: 400; } .contact-email { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: inherit; } .contact-link { text-decoration: none; color: inherit; display: block; } .nav-link { font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; font-size: var(--text-sm); color: inherit; text-decoration: none; display: block; } .gallery-arrow-left { position: absolute; left: -9px; top: 50%; transform: translateY(-50%); z-index: 10; } .gallery-arrow-right { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); z-index: 10; } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; display: block; } .client-page .work-card { margin: 0 auto; display: flex; flex-direction: column; align-items: center; height: 100%; } @media (min-width: 1024px) { .client-page .slide-image { transition: opacity 0.3s ease; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .client-page .slide-image.active { opacity: 1; } } .client-page figure { width: 720px; height: 450px; display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto; } .client-page .relative.mb-6 { position: relative; margin-bottom: var(--space-xs); } .client-page button[data-action="prev"], .client-page button[data-action="next"] { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer !important; } .client-page button[data-action="prev"] { left: -48px; } .client-page button[data-action="next"] { right: -48px; } .client-page .client-button { background: none !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 !important; transition: opacity 0.2s ease; } .client-page .client-button:hover { opacity: 0.7; } .client-page .mobile-client { cursor: pointer; transition: opacity 0.2s ease; } .client-page .mobile-client:hover { opacity: 0.8 !important; } .client-page [role="tablist"] { display: flex; justify-content: center; gap: var(--space-xs); padding-bottom: var(--space-lg); } @media (max-width: 1023px) { .client-page .mobile-gallery { width: 100%; max-width: 90vw; margin: 0 auto; } .client-page .mobile-image-container { width: 100%; max-width: 90vw; margin: 0 auto; text-align: center; } .client-page .mobile-gallery .mobile-slide-image { } .client-page .mobile-gallery .mobile-dot { } .mobile-client, .mobile-dot, .mobile-nav a, [data-id="mobile-nav"] a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: manipulation; cursor: pointer; } .mobile-nav a, [data-id="mobile-nav"] a { display: inline-block; min-height: 44px; min-width: 44px; line-height: 44px; text-align: center; } } .client-page .em [data-id="right-top"] .nav-right, .client-page .em [data-id="right-bottom"] .nav-right { color: #000; border: none; box-shadow: none; outline: none; padding: 0; transition: opacity 0.2s ease; } @media (max-width: 1023px) { .client-page .nav-right { font-size: var(--fs-mobile); } } .client-page .nav-right:hover { opacity: 0.8; } .client-page .em [data-id="left-middle"] button.nav-right { background: transparent; border: none; box-shadow: none; outline: none; padding: 0; margin: 0; } .client-page .em [data-id="left-bottom"] a img { width: 1.25rem; height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; } .client-page [data-id="left-bottom"] > .flex { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-sm); margin-top: clamp(var(--space-sm), 2vh, var(--space-lg)); } .client-page .mobile-content a img { width: 1rem !important; height: 1rem !important; max-width: 1rem; max-height: 1rem; } .client-page .mobile-content .flex { gap: var(--space-md); margin-top: var(--space-lg); } .client-page .em [data-id="left-bottom"] figcaption, .client-page .em [data-id="left-bottom"] figcaption p { font-family: var(--font-serif); color: var(--ink); } .client-page [data-id="right-middle"] .text-black, .client-page [data-id="right-middle"] p { color: var(--ink) !important; } @media (max-width: 1023px) { .client-page .mobile-content { font-size: var(--fs-mobile); line-height: 1.2; } .client-page .mobile-content p { font-size: var(--fs-mobile); line-height: 1.4; } .client-page #mobile-clients { line-height: 1.2; margin: var(--space-md) 0 var(--space-xl) 0; padding: 0 var(--space-lg) 0 0; text-align: left; } .client-page #mobile-clients button { line-height: 1.2; } .client-page .mobile-nav a, .client-page [data-id="mobile-nav"] a { font-size: var(--fs-mobile); } } .client-page figcaption .mx-auto { max-width: 60ch !important; font-size: var(--fs-small); } .client-page .mobile-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #9ca3af; } .client-page .mobile-dot[aria-selected="true"] { background: #000; } .client-page .mobile-gallery .mobile-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; border: none !important; background: #9ca3af !important; cursor: pointer !important; padding: 0 !important; } .client-page .mobile-gallery .mobile-dot[aria-selected="true"] { background: #000 !important; } .bg-current { background-color: currentColor; } .bg-gray-400 { background-color: #9ca3af; } .h-2 { height: 0.5rem; } .w-2 { width: 0.5rem; } .rounded-full { border-radius: 50%; } .client-page figure { background-color: transparent; } .client-page [role=tablist] { align-items: center; } .client-page .work-card button[role=tab], .client-page button[role=tab] { display: inline-block !important; width: 0.5rem !important; height: 0.5rem !important; border-radius: 50% !important; flex-shrink: 0 !important; flex-grow: 0 !important; line-height: 0 !important; padding: 0 !important; margin: 0 !important; } .client-page .slide-image, .client-page .slide-image figure { background-color: var(--paper, #f5f3f0); } .client-page .relative.mb-6 { position: relative; margin-bottom: var(--space-xs); } .client-page .em [data-id="left-bottom"] figcaption { padding-top: 0; }