/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        :root, :host {
            --shimmer-angle: 20deg
        }

        *, :before, :after {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-font-weight: initial;
            --tw-outline-style: solid;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-animation-delay: 0s;
            --tw-animation-direction: normal;
            --tw-animation-duration: initial;
            --tw-animation-fill-mode: none;
            --tw-animation-iteration-count: 1;
            --tw-enter-blur: 0;
            --tw-enter-opacity: 1;
            --tw-enter-rotate: 0;
            --tw-enter-scale: 1;
            --tw-enter-translate-x: 0;
            --tw-enter-translate-y: 0;
            --tw-exit-blur: 0;
            --tw-exit-opacity: 1;
            --tw-exit-rotate: 0;
            --tw-exit-scale: 1;
            --tw-exit-translate-x: 0;
            --tw-exit-translate-y: 0;
            --scroll-fade-t: 0px;
            --scroll-fade-b: 0px;
            --scroll-fade-s: 0px;
            --scroll-fade-e: 0px;
            --scroll-fade-mask: initial;
            --shimmer-image: initial;
            --shimmer-text-fill: initial
        }

        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-font-weight: initial;
            --tw-outline-style: solid;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-animation-delay: 0s;
            --tw-animation-direction: normal;
            --tw-animation-duration: initial;
            --tw-animation-fill-mode: none;
            --tw-animation-iteration-count: 1;
            --tw-enter-blur: 0;
            --tw-enter-opacity: 1;
            --tw-enter-rotate: 0;
            --tw-enter-scale: 1;
            --tw-enter-translate-x: 0;
            --tw-enter-translate-y: 0;
            --tw-exit-blur: 0;
            --tw-exit-opacity: 1;
            --tw-exit-rotate: 0;
            --tw-exit-scale: 1;
            --tw-exit-translate-x: 0;
            --tw-exit-translate-y: 0;
            --scroll-fade-t: 0px;
            --scroll-fade-b: 0px;
            --scroll-fade-s: 0px;
            --scroll-fade-e: 0px;
            --scroll-fade-mask: initial;
            --shimmer-image: initial;
            --shimmer-text-fill: initial
        }
    }
}

@layer theme {
    :root, :host {
        --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --font-weight-medium: 500;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {
    *, :after, :before {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit
    }

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

    b, strong {
        font-weight: bolder
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol, ul, menu {
        list-style: none
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block
    }

    img, video {
        max-width: 100%;
        height: auto
    }

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button, input:where([type=button], [type=reset], [type=submit]) {
        -webkit-appearance: button;
        appearance: button
    }

    ::file-selector-button {
        -webkit-appearance: button;
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .pointer-events-none {
        pointer-events: none
    }

    .absolute {
        position: absolute
    }

    .relative {
        position: relative
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .end {
        inset-inline-end: var(--spacing)
    }

    .top-1\/2 {
        top: 50%
    }

    .right-2\.5 {
        right: calc(var(--spacing) * 2.5)
    }

    .container {
        width: 100%
    }

    @media (min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .flex {
        display: flex
    }

    .hidden {
        display: none
    }

    .inline-flex {
        display: inline-flex
    }

    .table {
        display: table
    }

    .field-sizing-content {
        field-sizing: content
    }

    .size-4 {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .size-6 {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6)
    }

    .size-7 {
        width: calc(var(--spacing) * 7);
        height: calc(var(--spacing) * 7)
    }

    .size-8 {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8)
    }

    .size-9 {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9)
    }

    .h-6 {
        height: calc(var(--spacing) * 6)
    }

    .h-7 {
        height: calc(var(--spacing) * 7)
    }

    .h-8 {
        height: calc(var(--spacing) * 8)
    }

    .h-9 {
        height: calc(var(--spacing) * 9)
    }

    .min-h-16 {
        min-height: calc(var(--spacing) * 16)
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

    .min-w-0 {
        min-width: calc(var(--spacing) * 0)
    }

    .shrink-0 {
        flex-shrink: 0
    }

    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .appearance-none {
        -webkit-appearance: none;
        appearance: none
    }

    .items-center {
        align-items: center
    }

    .justify-center {
        justify-content: center
    }

    .gap-1 {
        gap: calc(var(--spacing) * 1)
    }

    .gap-1\.5 {
        gap: calc(var(--spacing) * 1.5)
    }

    .rounded-\[min\(var\(--radius-md\)\,10px\)\] {
        border-radius: min(var(--radius-md), 10px)
    }

    .rounded-\[min\(var\(--radius-md\)\,12px\)\] {
        border-radius: min(var(--radius-md), 12px)
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-border {
        border-color: var(--border)
    }

    .border-transparent {
        border-color: #0000
    }

    .bg-\[Canvas\] {
        background-color: canvas
    }

    .bg-background {
        background-color: var(--background)
    }

    .bg-primary {
        background-color: var(--primary)
    }

    .bg-transparent {
        background-color: #0000
    }

    .bg-clip-padding {
        background-clip: padding-box
    }

    .px-2 {
        padding-inline: calc(var(--spacing) * 2)
    }

    .px-2\.5 {
        padding-inline: calc(var(--spacing) * 2.5)
    }

    .py-1 {
        padding-block: calc(var(--spacing) * 1)
    }

    .py-2 {
        padding-block: calc(var(--spacing) * 2)
    }

    .pr-8 {
        padding-right: calc(var(--spacing) * 8)
    }

    .pl-2\.5 {
        padding-left: calc(var(--spacing) * 2.5)
    }

    .text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .text-\[0\.8rem\] {
        font-size: .8rem
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .text-\[CanvasText\] {
        color: canvastext
    }

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

    .text-primary-foreground {
        color: var(--primary-foreground)
    }

    .underline-offset-4 {
        text-underline-offset: 4px
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-colors {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .outline-none {
        --tw-outline-style: none;
        outline-style: none
    }

    .select-none {
        -webkit-user-select: none;
        user-select: none
    }

    .running {
        animation-play-state: running
    }

    .selection\:bg-primary ::selection, .selection\:bg-primary::selection {
        background-color: var(--primary)
    }

    .selection\:text-primary-foreground ::selection, .selection\:text-primary-foreground::selection {
        color: var(--primary-foreground)
    }

    .file\:inline-flex::file-selector-button {
        display: inline-flex
    }

    .file\:h-6::file-selector-button {
        height: calc(var(--spacing) * 6)
    }

    .file\:border-0::file-selector-button {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .file\:bg-transparent::file-selector-button {
        background-color: #0000
    }

    .file\:text-sm::file-selector-button {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .file\:font-medium::file-selector-button {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .file\:text-foreground::file-selector-button {
        color: var(--foreground)
    }

    @media (hover:hover) {
        .hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover {
            background-color: var(--secondary)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover {
                background-color: color-mix(in oklch, var(--secondary), var(--foreground) 5%)
            }
        }

        .hover\:bg-primary\/80:hover {
            background-color: var(--primary)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-primary\/80:hover {
                background-color: color-mix(in oklab, var(--primary) 80%, transparent)
            }
        }

        .hover\:text-foreground:hover {
            color: var(--foreground)
        }

        .hover\:underline:hover {
            text-decoration-line: underline
        }
    }

    .focus-visible\:border-ring:focus-visible {
        border-color: var(--ring)
    }

    .focus-visible\:ring-3:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:ring-ring\/50:focus-visible {
        --tw-ring-color: var(--ring)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .focus-visible\:ring-ring\/50:focus-visible {
            --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent)
        }
    }

    .active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
        --tw-translate-y: 1px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .disabled\:pointer-events-none:disabled {
        pointer-events: none
    }

    .disabled\:cursor-not-allowed:disabled {
        cursor: not-allowed
    }

    .disabled\:opacity-50:disabled {
        opacity: .5
    }

    :where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg {
        border-radius: var(--radius-lg)
    }

    .has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]) {
        padding-right: calc(var(--spacing) * 1.5)
    }

    .has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]) {
        padding-right: calc(var(--spacing) * 2)
    }

    .has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]) {
        padding-left: calc(var(--spacing) * 1.5)
    }

    .has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]) {
        padding-left: calc(var(--spacing) * 2)
    }

    .has-\[select\:disabled\]\:opacity-50:has(:is(select:disabled)) {
        opacity: .5
    }

    .aria-expanded\:text-foreground[aria-expanded=true] {
        color: var(--foreground)
    }

    .aria-invalid\:ring-3[aria-invalid=true] {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .data-\[size\=sm\]\:h-7[data-size=sm] {
        height: calc(var(--spacing) * 7)
    }

    .data-\[size\=sm\]\:rounded-\[min\(var\(--radius-md\)\,10px\)\][data-size=sm] {
        border-radius: min(var(--radius-md), 10px)
    }

    .data-\[size\=sm\]\:py-0\.5[data-size=sm] {
        padding-block: calc(var(--spacing) * .5)
    }

    @media (min-width:48rem) {
        .md\:text-sm {
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height))
        }
    }

    .\[\&_svg\]\:pointer-events-none svg {
        pointer-events: none
    }

    .\[\&_svg\]\:shrink-0 svg {
        flex-shrink: 0
    }

    .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3)
    }

    .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
        width: calc(var(--spacing) * 3.5);
        height: calc(var(--spacing) * 3.5)
    }

    .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }
}

@property --tw-animation-delay {
    syntax: "*";
    inherits: false;
    initial-value: 0s
}

@property --tw-animation-direction {
    syntax: "*";
    inherits: false;
    initial-value: normal
}

@property --tw-animation-duration {
    syntax: "*";
    inherits: false
}

@property --tw-animation-fill-mode {
    syntax: "*";
    inherits: false;
    initial-value: none
}

@property --tw-animation-iteration-count {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --scroll-fade-t {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0
}

@property --scroll-fade-b {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0
}

@property --scroll-fade-s {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0
}

@property --scroll-fade-e {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0
}

@property --scroll-fade-mask {
    syntax: "*";
    inherits: false
}

@property --shimmer-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 20deg
}

@property --shimmer-image {
    syntax: "*";
    inherits: false
}

@property --shimmer-text-fill {
    syntax: "*";
    inherits: false
}

@media (prefers-reduced-motion:reduce) {
    .shimmer {
        -webkit-text-fill-color: currentColor;
        background-image: none;
        animation: none
    }
}

:root {
    --background: #fff;
    --foreground: #20211f;
    --primary: #20211f;
    --primary-foreground: #fff;
    --border: #d4d5ce;
    --muted: #f1f2ed;
    --muted-foreground: #656760;
    --ring: #39624b;
    --radius: 0;
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 28px
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    font-size: 16px;
    line-height: 1.9
}

a {
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none
}

a:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 6px
}

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

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

h1, h2, h3 {
    overflow-wrap: anywhere
}

::selection {
    background: #cfd9c5
}

.wrap {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(24px, 5vw, 80px)
}

.eyebrow {
    letter-spacing: .14em;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6
}

.arrow {
    flex-shrink: 0;
    font-family: Arial, sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1;
    display: inline-block
}

.preview-note {
    letter-spacing: .06em;
    color: #5b5e55;
    background: #f0f1eb;
    justify-content: space-between;
    padding: 7px clamp(24px, 5vw, 80px);
    font-size: 11px;
    display: flex
}

.site-header {
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 32px;
    height: 112px;
    display: flex
}

.brand {
    flex-shrink: 0;
    align-items: center;
    gap: 22px;
    margin-right: auto;
    display: flex
}

.brand img {
    object-fit: contain;
    width: 66px;
    height: 50px
}

.brand span {
    letter-spacing: .04em;
    font-size: 12px
}

.site-header nav {
    gap: 28px;
    font-size: 14px;
    display: flex
}

.site-header nav a {
    padding-block: 12px
}

.site-header nav a:hover {
    text-underline-offset: 6px;
    text-decoration: underline
}

.contact-link {
    color: #fff;
    background: #242622;
    align-items: center;
    gap: 32px;
    min-height: 48px;
    padding: 13px 21px;
    font-size: 14px;
    display: flex
}

.contact-link:hover {
    background: #465140
}

.hero {
    grid-template-columns: 1.38fr 1fr;
    column-gap: 34px;
    padding-top: 46px;
    padding-bottom: 22px;
    display: grid;
    position: relative
}

.hero-label {
    grid-column: 1/-1;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
    display: flex
}

.tiny-plus {
    font-size: 25px;
    font-weight: 300;
    line-height: 1
}

.hero h1 {
    letter-spacing: -.04em;
    white-space: nowrap;
    font-family: Yu Mincho, Hiragino Mincho ProN, Noto Serif CJK JP, serif;
    font-size: clamp(48px, 5.45vw, 82px);
    font-weight: 500;
    line-height: 1.38
}

.hero h1 span {
    letter-spacing: -.06em;
    font-size: .8em
}

.hero-intro {
    align-self: end;
    max-width: 460px;
    margin-bottom: 16px;
    padding-left: clamp(0px, 2vw, 30px)
}

.hero-intro p {
    letter-spacing: .01em;
    font-size: 16px;
    line-height: 2.1
}

.text-link {
    border-bottom: 1px solid;
    align-items: center;
    gap: 28px;
    min-height: 44px;
    margin-top: 26px;
    padding-block: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    display: inline-flex
}

.text-link:hover .arrow {
    transform: translate(2px, -2px)
}

.hero-bottom {
    border-top: 1px solid var(--border);
    letter-spacing: .03em;
    color: #63665e;
    grid-column: 1/-1;
    justify-content: space-between;
    margin-top: 62px;
    padding-top: 18px;
    font-size: 12px;
    display: flex
}

.hero-bottom a {
    letter-spacing: .1em;
    align-items: center;
    gap: 24px;
    min-height: 30px;
    font-size: 10px;
    display: flex
}

.section {
    padding-block: 100px
}

.section-heading {
    margin-bottom: 42px
}

.section-heading h2 {
    letter-spacing: .01em;
    margin-top: 24px;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    font-size: clamp(29px, 3vw, 42px);
    font-weight: 500;
    line-height: 1.6
}

.service-list {
    border-top: 1px solid var(--border)
}

.service {
    border-bottom: 1px solid var(--border);
    grid-template-columns: 54px 1.2fr 1fr 26px;
    align-items: center;
    gap: 22px;
    padding: 34px 0 36px;
    display: grid
}

.service-number {
    color: #6b6f63;
    align-self: start;
    padding-top: 5px;
    font-size: 12px
}

.service-name {
    letter-spacing: .03em;
    margin-bottom: 13px;
    font-size: 13px;
    font-weight: 600
}

.service h3 {
    font-size: clamp(23px, 2.1vw, 30px);
    font-weight: 500;
    line-height: 1.6
}

.service-detail {
    color: #4f5349;
    font-size: 15px
}

.service-audience {
    color: #656b5d;
    margin-top: 20px;
    font-size: 12px;
    display: inline-block
}

.service:hover h3 {
    text-underline-offset: 7px;
    text-decoration: underline;
    text-decoration-thickness: 1px
}

.horizontal {
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    display: flex
}

.projects {
    background: #f2f3ee;
    padding-bottom: 74px
}

.project-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 46px 40px;
    display: grid
}

.project-0 {
    grid-row: span 2
}

.project-image {
    aspect-ratio: 16/9;
    background: #e2e4dc;
    overflow: hidden
}

.project-image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    transition: transform .35s
}

.project-0 .project-image {
    aspect-ratio: 4/5;
    align-items: center;
    display: flex
}

.project-0 .project-image img {
    object-fit: contain;
    height: auto
}

.project-meta {
    justify-content: space-between;
    gap: 24px;
    margin-top: 19px;
    font-size: 14px;
    font-weight: 600;
    display: flex
}

.project-meta>span:last-child {
    color: #5f6556;
    align-items: center;
    gap: 24px;
    font-size: 12px;
    font-weight: 400;
    display: flex
}

.project h3 {
    white-space: pre-line;
    margin-top: 15px;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.6
}

.project-0 h3 {
    font-size: 35px
}

.project-description {
    color: #565c4e;
    max-width: 38em;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.9
}

.project-tags {
    letter-spacing: .02em;
    color: #616859;
    margin-top: 16px;
    font-size: 11px
}

.work-note {
    text-align: right;
    color: #676e5c;
    margin-top: 30px;
    font-size: 11px
}

.narrative {
    color: #f9faf4;
    background: #242821;
    padding-block: 90px
}

.narrative h2 {
    letter-spacing: .02em;
    margin-top: 34px;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    font-size: clamp(30px, 3.5vw, 50px);
    font-weight: 400;
    line-height: 1.7
}

.narrative-bottom {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 60px;
    margin-top: 50px;
    display: grid
}

.narrative-plus {
    color: #8f9b80;
    font-family: Arial, sans-serif;
    font-size: 160px;
    font-weight: 200;
    line-height: .8
}

.narrative-bottom p {
    font-size: 15px;
    line-height: 2.15
}

.news {
    grid-template-columns: 1fr 1.6fr;
    gap: 65px;
    display: grid
}

.news .section-heading h2 {
    font-size: 29px
}

.news-list {
    border-top: 1px solid var(--border)
}

.news-item {
    border-bottom: 1px solid var(--border);
    grid-template-columns: 100px 1fr 20px;
    align-items: start;
    gap: 24px;
    padding-block: 28px;
    display: grid
}

.news-item time {
    letter-spacing: .02em;
    color: #6d7164;
    padding-top: 4px;
    font-size: 12px
}

.news-item h3 {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.9
}

.news-item>.arrow {
    margin-top: 6px
}

.news-item:hover h3 {
    text-underline-offset: 4px;
    text-decoration: underline
}

.company {
    border-top: 1px solid var(--border);
    grid-template-columns: 1fr 1.6fr;
    gap: 65px;
    padding-block: 52px 64px;
    display: grid
}

.company h2 {
    margin-top: 17px;
    font-size: 23px;
    font-weight: 500
}

.company p:not(.eyebrow) {
    font-size: 14px
}

.company .text-link {
    margin-top: 12px
}

.contact-section {
    background: #e8eddf
}

.contact-inner {
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-block: 70px;
    display: flex
}

.contact-inner h2 {
    margin-top: 22px;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 500;
    line-height: 1.6
}

.contact-cta {
    color: #fff;
    background: #252a20;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    min-width: 270px;
    padding: 25px 28px;
    font-size: 16px;
    display: flex
}

.contact-cta:hover {
    background: #445537
}

.site-footer {
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding-top: 50px;
    padding-bottom: 28px;
    display: flex
}

.footer-logo {
    margin-right: 10px
}

.footer-logo img {
    object-fit: contain;
    width: 53px;
    height: 40px
}

.site-footer>p {
    color: #666b5d;
    font-size: 11px
}

.site-footer>div {
    gap: 30px;
    margin-left: auto;
    font-size: 12px;
    display: flex
}

.site-footer a:not(.footer-logo) {
    align-items: center;
    gap: 15px;
    min-height: 44px;
    display: inline-flex
}

.footer-note {
    border-top: 1px solid var(--border);
    letter-spacing: .05em;
    color: #6b705f;
    flex-basis: 100%;
    margin-top: 10px;
    padding-top: 20px;
    font-size: 10px
}

.skip-link {
    z-index: 100;
    background: #fff;
    padding: 12px 20px;
    position: fixed;
    top: -100px;
    left: 20px
}

.skip-link:focus {
    top: 10px
}

.project-0 {
    grid-area: auto/1/auto/-1
}

.project-image, .project-0 .project-image {
    aspect-ratio: 1920/700
}

.project-0 .project-image img {
    height: 100%
}

.project a:hover img {
    transform: none
}

@media (min-width:1441px) {
    .preview-note {
        padding-inline: max(80px, 50vw - 640px)
    }
}

@media (max-width:1100px) {
    .brand span {
        display: none
    }

    .site-header {
        gap: 24px
    }

    .site-header nav {
        gap: 22px
    }

    .hero h1 {
        font-size: clamp(48px, 6vw, 72px)
    }

    .hero-intro {
        padding-left: 0
    }

    .hero-intro p {
        font-size: 14px
    }

    .desktop-break {
        display: none
    }

    .service {
        grid-template-columns: 34px 1.1fr 1fr 20px;
        gap: 20px
    }

    .service-detail {
        font-size: 14px
    }

    .news {
        grid-template-columns: 1fr 1.5fr;
        gap: 38px
    }

    .news-item {
        grid-template-columns: 1fr 20px;
        gap: 9px 20px
    }

    .news-item time {
        grid-column: 1/-1
    }

    .news-item h3 {
        grid-column: 1
    }

    .company {
        grid-template-columns: 1fr 1.5fr;
        gap: 38px
    }
}

@media (max-width:760px) {
    .preview-note {
        font-size: 10px
    }

    .preview-note span {
        display: none
    }

    .site-header {
        flex-wrap: wrap;
        gap: 6px 20px;
        height: auto;
        min-height: 91px;
        padding-top: 15px;
        padding-bottom: 10px
    }

    .brand img {
        width: 51px;
        height: 39px
    }

    .site-header nav {
        order: 3;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        font-size: 12px
    }

    .contact-link {
        gap: 24px;
        min-height: 44px;
        padding: 10px 17px;
        font-size: 12px
    }

    .hero {
        padding-top: 29px;
        display: block
    }

    .hero-label {
        margin-bottom: 28px;
        font-size: 10px
    }

    .hero h1 {
        font-size: clamp(35px, 9.1vw, 68px);
        line-height: 1.4
    }

    .hero-intro {
        max-width: none;
        margin-top: 32px
    }

    .hero-intro p {
        font-size: 15px;
        line-height: 2
    }

    .hero .text-link {
        margin-top: 16px
    }

    .hero-bottom {
        margin-top: 32px;
        padding-top: 16px;
        font-size: 11px;
        display: block
    }

    .hero-bottom a {
        display: none
    }

    .section {
        padding-block: 65px
    }

    .section-heading {
        margin-bottom: 30px
    }

    .section-heading h2 {
        margin-top: 17px;
        font-size: 28px;
        line-height: 1.55
    }

    .eyebrow {
        font-size: 10px
    }

    .service {
        grid-template-columns: 24px 1fr 20px;
        gap: 10px 12px;
        padding-block: 27px
    }

    .service-number {
        font-size: 10px
    }

    .service-name {
        margin-bottom: 9px;
        font-size: 12px
    }

    .service h3 {
        font-size: 23px
    }

    .service>.arrow {
        grid-area: 1/3
    }

    .service-detail {
        grid-area: 2/2;
        margin-top: 8px;
        font-size: 14px
    }

    .service-detail br {
        display: none
    }

    .service-audience {
        margin-top: 12px;
        font-size: 11px
    }

    .horizontal {
        display: block
    }

    .horizontal .text-link {
        margin-top: 16px
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .project-0 {
        grid-row: auto
    }

    .project-0 .project-image, .project-image {
        aspect-ratio: 16/9
    }

    .project-0 .project-image img {
        height: 100%
    }

    .project h3, .project-0 h3 {
        margin-top: 12px;
        font-size: 27px
    }

    .project-meta {
        margin-top: 15px;
        font-size: 13px
    }

    .project-description {
        font-size: 14px
    }

    .project-tags {
        font-size: 10px
    }

    .work-note {
        text-align: left
    }

    .narrative {
        padding-block: 61px
    }

    .narrative h2 {
        letter-spacing: -.03em;
        margin-top: 25px;
        font-size: 27px
    }

    .narrative-bottom {
        margin-top: 30px;
        display: block
    }

    .narrative-plus {
        display: none
    }

    .narrative-bottom p {
        font-size: 14px;
        line-height: 2.1
    }

    .news {
        display: block
    }

    .news .section-heading h2 {
        font-size: 28px
    }

    .news .text-link {
        margin-top: 14px
    }

    .news-item {
        padding-block: 22px
    }

    .company {
        padding-block: 40px;
        display: block
    }

    .company>div+div {
        margin-top: 22px
    }

    .company h2 {
        margin-top: 14px;
        font-size: 22px
    }

    .contact-inner {
        padding-block: 50px;
        display: block
    }

    .contact-inner h2 {
        font-size: 26px
    }

    .contact-cta {
        min-width: 0;
        max-width: 350px;
        margin-top: 30px;
        padding: 21px 23px;
        font-size: 14px
    }

    .site-footer {
        gap: 20px;
        padding-top: 34px
    }

    .site-footer>div {
        flex-basis: 100%;
        justify-content: space-between;
        gap: 12px;
        margin-left: 0;
        font-size: 11px
    }

    .footer-note {
        margin-top: 0;
        font-size: 9px
    }

    .project-image, .project-0 .project-image {
        aspect-ratio: 1920/700
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *, :before, :after {
        transition: none !important;
        animation: none !important
    }
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

:root {
    --input: #999e95;
    --secondary: #eef0eb;
    --secondary-foreground: #20211f;
    --destructive: #a32525;
    --font-heading: var(--font-sans)
}

.preview-note {
    gap: 20px;
    font-size: 12px
}

.preview-note a {
    text-underline-offset: 3px;
    white-space: nowrap;
    text-decoration: underline
}

.eyebrow, .project-tags, .work-note, .footer-note {
    font-size: 12px
}

.brand span, .service-name, .service-audience, .project-meta, .site-footer>div {
    font-size: 14px
}

.hero-intro p, .service-detail, .project-description, .narrative-bottom p, .news-item h3, .company p:not(.eyebrow) {
    font-size: 16px
}

.site-header nav, .site-footer>div {
    flex-wrap: wrap
}

.detail-page {
    padding-bottom: 70px
}

.breadcrumbs {
    color: #696d63;
    overflow-wrap: anywhere;
    max-width: 100%;
    padding-top: 27px;
    font-size: 12px;
    line-height: 1.7
}

.breadcrumbs a {
    color: #33382f;
    text-underline-offset: 3px;
    text-decoration: underline
}

.detail-hero {
    max-width: 1100px;
    padding: 58px 0 50px
}

.detail-hero h1 {
    letter-spacing: -.015em;
    white-space: normal;
    overflow-wrap: anywhere;
    margin-top: 22px;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    font-size: clamp(30px, 3.8vw, 54px);
    font-weight: 500;
    line-height: 1.55
}

.detail-date {
    letter-spacing: .06em;
    margin-top: 24px;
    font-size: 14px
}

.detail-lead {
    max-width: 780px;
    margin-top: 25px;
    font-size: 17px;
    line-height: 2
}

.detail-cover {
    background: #f1f2ee;
    max-width: 100%;
    margin: 0 0 55px;
    overflow: hidden
}

.detail-cover img {
    object-fit: contain;
    width: 100%;
    height: auto;
    max-height: 700px
}

.reading-layout {
    grid-template-columns: minmax(0, 880px);
    justify-content: center;
    gap: 60px;
    display: grid
}

.reading-layout.with-toc {
    grid-template-columns: 230px minmax(0, 850px);
    justify-content: space-between;
    align-items: start
}

.reading-column {
    min-width: 0
}

.contents-nav {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-height: 80vh;
    padding: 22px 0;
    position: sticky;
    top: 28px;
    overflow: auto
}

.contents-nav>p {
    letter-spacing: .1em;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600
}

.contents-nav nav {
    gap: 10px;
    display: grid
}

.contents-nav a {
    color: #4a5141;
    padding: 5px 0;
    font-size: 14px;
    line-height: 1.65
}

.contents-nav a:hover {
    text-underline-offset: 4px;
    text-decoration: underline
}

.prose {
    color: #33372f;
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 2.05
}

.prose p {
    margin: 0 0 1.4em
}

.prose h2 {
    border-top: 1px solid var(--border);
    letter-spacing: .01em;
    margin: 2.2em 0 .9em;
    padding-top: 20px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.6
}

.prose h3 {
    margin: 1.8em 0 .8em;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.7
}

.prose h4, .prose h5, .prose h6 {
    margin: 1.4em 0 .7em;
    font-size: 18px;
    font-weight: 600
}

.prose a {
    color: #2b5438;
    text-underline-offset: 4px;
    text-decoration: underline
}

.prose a[href^=http]:after {
    content: " ↗";
    font-size: .8em
}

.prose img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 22px auto
}

.prose figure {
    margin: 32px 0
}

.prose figure img {
    object-fit: contain;
    max-height: 850px;
    margin: 0 auto
}

.prose figcaption {
    color: #626959;
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.8
}

.prose ul, .prose ol {
    margin: 18px 0 28px;
    padding-left: 1.5em
}

.prose ul {
    list-style: outside
}

.prose ol {
    list-style: decimal
}

.prose li {
    margin-bottom: 10px
}

.prose dl {
    margin-block: 24px
}

.prose dt {
    margin-top: 22px;
    font-weight: 600
}

.prose dd {
    margin-top: 9px
}

.prose section {
    margin-block: 30px
}

.prose section:first-child {
    margin-top: 0
}

.prose blockquote {
    background: #f1f3ec;
    border-left: 3px solid #849277;
    margin: 30px 0;
    padding: 15px 24px
}

.prose table {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
    font-size: 15px;
    line-height: 1.85
}

.prose td, .prose th {
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #cbd0c3;
    padding: 17px 18px
}

.prose th {
    background: #eef1e8;
    font-weight: 600
}

.table-scroll {
    border: 1px solid #d2d7ca;
    max-width: 100%;
    margin: 28px 0;
    overflow-x: auto
}

.prose details {
    border-block: 1px solid #d2d7ca;
    margin-block: -1px;
    padding: 20px 0
}

.prose summary {
    cursor: pointer;
    font-weight: 600;
    list-style: disclosure-closed
}

.prose details[open] summary {
    margin-bottom: 16px;
    list-style: disclosure-open
}

.prose [id] {
    scroll-margin-top: 30px
}

.prose-service>div>div>section {
    padding-bottom: 28px
}

.source-note {
    border-top: 1px solid var(--border);
    color: #696e62;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    margin-top: 52px;
    padding-top: 25px;
    font-size: 13px;
    display: flex
}

.source-note a {
    text-decoration: underline
}

.source-note span {
    width: 100%
}

.archive-message, .editorial-alert {
    background: #f0f3eb;
    border-left: 3px solid #667756;
    margin-bottom: 35px;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.9
}

.editorial-alert {
    color: #754710;
    background: #fcf3e5;
    border-color: #a26319
}

.archive-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 45px 32px;
    display: grid
}

.archive-cards article {
    border-bottom: 1px solid var(--border);
    min-width: 0;
    padding-bottom: 24px
}

.archive-card-image {
    aspect-ratio: 16/10;
    background: #eef0e9;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden
}

.archive-card-image img {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.archive-card-text {
    padding-top: 19px
}

.archive-card-text h2 {
    overflow-wrap: anywhere;
    margin-top: 12px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.7
}

.archive-card-text>p:not(.eyebrow) {
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.9
}

.archive-card-text .read-more {
    color: #56624b;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 14px;
    display: flex
}

.archive-cards a:hover h2 {
    text-underline-offset: 5px;
    text-decoration: underline
}

.archive-news {
    border-top: 1px solid var(--border)
}

.archive-news article {
    border-bottom: 1px solid var(--border)
}

.archive-news .archive-card-text {
    grid-template-columns: 140px minmax(0, 1fr) 120px;
    align-items: start;
    gap: 25px;
    padding: 27px 0;
    display: grid
}

.archive-news h2 {
    margin: 0;
    font-size: 18px
}

.archive-news .eyebrow {
    padding-top: 5px
}

.archive-news .read-more {
    margin-top: 5px
}

.archive-pagination {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 44px;
    display: flex
}

.archive-pagination a {
    border: 1px solid var(--border);
    text-align: center;
    min-width: 45px;
    padding: 10px 16px;
    font-size: 14px
}

.archive-pagination a:hover {
    background: #e8eddf
}

.related-section {
    border-top: 1px solid var(--border);
    margin-top: 72px;
    padding-top: 40px
}

.related-section>h2 {
    margin-bottom: 30px;
    font-size: 27px;
    font-weight: 500
}

.panasonic-preserve {
    border-top: 1px solid var(--border);
    margin-top: 40px;
    padding-top: 35px
}

.panasonic-preserve h2 {
    font-size: 25px
}

.panasonic-preserve p {
    max-width: 760px;
    margin-top: 15px;
    font-size: 16px
}

.magazine-nav {
    background: #f2f3ee;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-block: 32px;
    display: flex
}

.magazine-wordmark {
    letter-spacing: .08em;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3
}

.magazine-wordmark span {
    letter-spacing: .06em;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 400;
    display: block
}

.magazine-nav nav {
    flex-wrap: wrap;
    gap: 23px;
    font-size: 14px;
    display: flex
}

.magazine-nav nav a {
    padding-block: 10px
}

.magazine-page .detail-hero h1 {
    max-width: 980px
}

.magazine-page .prose {
    font-size: 18px;
    line-height: 2.05
}

.directory-groups {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
    display: flex
}

.directory-groups a {
    border: 1px solid #bfc6b6;
    padding: 11px 22px;
    font-size: 14px
}

.directory-label {
    margin-bottom: 12px;
    font-size: 15px;
    display: block
}

.directory-input {
    max-width: 650px;
    background: #fff !important;
    border-radius: 0 !important;
    height: 52px !important;
    padding: 12px !important;
    font-size: 16px !important
}

.directory-count {
    margin-block: 18px;
    font-size: 14px
}

.directory-list {
    border-top: 1px solid var(--border)
}

.directory-list>a {
    border-bottom: 1px solid var(--border);
    grid-template-columns: 140px minmax(0, 1fr) 20px;
    align-items: start;
    gap: 25px;
    padding: 19px 0;
    display: grid
}

.directory-list>a>span {
    color: #637057;
    padding-top: 4px;
    font-size: 12px
}

.directory-list strong {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    display: block
}

.directory-list small {
    color: #73796a;
    overflow-wrap: anywhere;
    font-size: 12px;
    display: block
}

.directory-list a:hover strong {
    text-underline-offset: 4px;
    text-decoration: underline
}

.form-section {
    border-top: 1px solid var(--border);
    margin-top: 40px;
    padding-top: 35px
}

.form-section>h2 {
    margin-bottom: 25px;
    font-size: 26px;
    line-height: 1.6
}

.form-notice {
    background: #eef2e6;
    border-left: 3px solid #71805e;
    margin-bottom: 30px;
    padding: 18px 22px;
    font-size: 14px;
    line-height: 1.9
}

.form-field {
    margin-bottom: 25px
}

.form-field label {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
    display: block
}

.form-field label>span {
    color: #606953;
    margin-left: 10px;
    font-size: 12px
}

.form-field [data-slot=input], .form-field [data-slot=textarea], .form-field [data-slot=native-select] {
    border: 1px solid #929d85;
    border-radius: 0;
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 11px 14px;
    font-size: 16px;
    line-height: 1.8
}

.form-field [data-slot=native-select-wrapper] {
    width: 100%
}

.form-field [data-slot=textarea] {
    min-height: 180px
}

.form-consent {
    align-items: start;
    gap: 17px;
    margin: 28px 0;
    font-size: 15px;
    display: flex
}

.form-consent [data-slot=checkbox] {
    flex-shrink: 0;
    margin-top: 5px
}

.form-consent a {
    text-decoration: underline
}

.form-button {
    border-radius: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 16px !important
}

.form-confirm h2 {
    margin-bottom: 24px;
    font-size: 26px
}

.form-confirm dl {
    margin-block: 25px
}

.form-confirm dl>div {
    border-bottom: 1px solid var(--border);
    padding: 16px 0
}

.form-confirm dt {
    font-size: 14px;
    font-weight: 600
}

.form-confirm dd {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-top: 8px;
    font-size: 16px
}

.form-confirm>p {
    margin-block: 24px
}

.missing-page {
    padding-block: 100px
}

.missing-page h1 {
    margin-block: 30px;
    font-size: 36px
}

.missing-page .text-link {
    margin-right: 30px
}

.author-profile {
    background: #f1f3eb;
    grid-template-columns: 72px 1fr;
    gap: 22px;
    margin-block: 25px;
    padding: 25px;
    display: grid
}

.author-profile img {
    object-fit: contain;
    width: 72px;
    height: 72px
}

.author-profile h2 {
    margin: 0 0 10px;
    font-size: 20px
}

.author-profile p {
    font-size: 15px;
    line-height: 1.9
}

.author-profile a {
    font-size: 14px;
    text-decoration: underline
}

.article-tags {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    display: flex
}

.article-tags a {
    border-bottom: 1px solid #9ca890;
    padding: 6px 3px;
    font-size: 13px
}

.magazine-search {
    gap: 12px;
    max-width: 540px;
    margin-block: 0 30px;
    display: flex
}

.magazine-search input {
    border: 1px solid #929d85;
    flex: 1;
    min-width: 0;
    padding: 9px 13px;
    font-size: 16px
}

.magazine-search button {
    color: #fff;
    background: #242821;
    padding: 10px 24px;
    font-size: 14px
}

.topics-options {
    gap: 13px;
    display: grid
}

.topics-options label {
    align-items: center;
    gap: 15px;
    margin: 0;
    font-size: 15px;
    display: flex
}

@media (max-width:1050px) {
    .reading-layout.with-toc {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 35px
    }

    .archive-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .archive-news .archive-card-text {
        grid-template-columns: 110px minmax(0, 1fr)
    }

    .archive-news .read-more {
        grid-column: 2
    }

    .magazine-nav {
        display: block
    }

    .magazine-nav nav {
        margin-top: 20px
    }

    .detail-hero {
        padding-top: 42px
    }
}

@media (max-width:760px) {
    .preview-note {
        flex-wrap: wrap;
        gap: 5px;
        font-size: 12px
    }

    .preview-note>span {
        display: block
    }

    .site-header nav {
        gap: 8px;
        font-size: 14px
    }

    .reading-layout, .reading-layout.with-toc {
        display: block
    }

    .contents-nav {
        max-height: none;
        margin-bottom: 35px;
        padding: 18px;
        position: static
    }

    .contents-nav nav {
        gap: 4px
    }

    .detail-hero {
        padding: 35px 0
    }

    .detail-hero h1 {
        font-size: 30px;
        line-height: 1.6
    }

    .detail-lead {
        font-size: 16px
    }

    .breadcrumbs {
        padding-top: 18px;
        font-size: 12px
    }

    .detail-cover {
        margin-bottom: 32px
    }

    .prose, .magazine-page .prose {
        font-size: 16px;
        line-height: 2
    }

    .prose h2 {
        font-size: 23px
    }

    .prose h3 {
        font-size: 20px
    }

    .prose figure {
        margin-block: 25px
    }

    .archive-cards {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .archive-card-text h2 {
        font-size: 22px
    }

    .archive-news .archive-card-text {
        padding: 23px 0;
        display: block
    }

    .archive-news h2 {
        margin-top: 10px;
        font-size: 18px
    }

    .archive-news .read-more {
        max-width: 140px;
        margin-top: 15px
    }

    .directory-list>a {
        grid-template-columns: minmax(0, 1fr) 20px;
        gap: 4px 15px
    }

    .directory-list>a>span:first-child {
        grid-column: 1/-1
    }

    .directory-list>a>div {
        grid-column: 1
    }

    .directory-list strong {
        font-size: 15px
    }

    .directory-groups {
        gap: 8px
    }

    .directory-groups a {
        padding: 8px 13px
    }

    .magazine-nav nav {
        gap: 18px
    }

    .magazine-wordmark {
        font-size: 29px
    }

    .site-footer>div {
        gap: 16px;
        font-size: 14px
    }

    .form-section>h2 {
        font-size: 23px
    }

    .author-profile {
        grid-template-columns: 50px 1fr;
        gap: 15px;
        padding: 20px
    }

    .author-profile img {
        width: 50px;
        height: 50px
    }

    .form-button {
        white-space: normal
    }

    .contact-inner h2 {
        font-size: 27px
    }

    .hero h1 {
        white-space: normal
    }

    .hero h1 span {
        white-space: nowrap;
        font-size: .75em
    }

    .project-tags, .footer-note, .hero-label, .hero-bottom {
        font-size: 12px
    }

    .magazine-search button {
        padding-inline: 15px
    }
}

.prose .source-np-svc-item {
    border-bottom: 1px solid var(--border);
    color: inherit;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 18px 30px;
    padding: 34px 0;
    text-decoration: none;
    display: grid
}

.source-np-svc-name {
    letter-spacing: .06em;
    font-size: 14px;
    font-weight: 600
}

.source-np-svc-body, .source-np-svc-headline, .source-np-svc-desc, .source-np-svc-go {
    display: block
}

.source-np-svc-headline {
    margin-bottom: 18px;
    font-size: 25px;
    line-height: 1.65
}

.source-np-svc-go {
    grid-column: 2;
    font-size: 14px;
    text-decoration: underline
}

.source-np-lp-trust, .source-grid3, .source-twoCol, .source-deliverGrid, .source-plans, .source-pricing-grid, .source-problem-grid, .source-steps-grid, .source-kpi-grid, .source-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-block: 24px;
    display: grid
}

.source-card, .source-priceCard, .source-plan, .source-price-card, .source-step-card, .source-kpi-card, .source-callout-box, .source-deliverBlock {
    background: #f5f6f1;
    border: 1px solid #d1d7c7;
    min-width: 0;
    padding: 24px
}

.prose .source-card p:last-child {
    margin-bottom: 0
}

.source-pill, .source-step-title, .source-diagramTitle, .source-np-lp-trust-num {
    margin-bottom: 14px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.65;
    display: block
}

.source-step-num, .source-np-lp-trust-lbl {
    font-size: 14px;
    display: block
}

.source-dialogue {
    color: #4f5a42;
    margin-block: 15px
}

.source-np-lp-trust-item {
    border-bottom: 1px solid #cdd3c4;
    padding: 20px
}

.prose .source-np-lp-btn, .prose .source-cta, .prose .source-btn {
    color: #fff;
    white-space: normal;
    background: #293323;
    border: 1px solid #293323;
    justify-content: center;
    align-items: center;
    margin: 5px 10px 5px 0;
    padding: 12px 24px;
    font-size: 15px;
    line-height: 1.8;
    text-decoration: none;
    display: inline-flex
}

.source-np-lp-cta-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    display: flex
}

.source-np-lp-btn-text {
    font-size: 15px
}

.prose svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
    display: block
}

.source-key {
    background: #f0f2eb
}

.source-key img {
    object-fit: contain;
    max-height: 650px
}

.source-projectview>div>ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding: 0;
    list-style: none;
    display: grid
}

.source-projectview li {
    border-bottom: 1px solid #cdd3c4;
    padding-bottom: 20px
}

.source-projectview h3 {
    font-size: 22px
}

.source-projectview img {
    aspect-ratio: 16/10;
    object-fit: contain
}

.source-newslist {
    padding: 0 !important;
    list-style: none !important
}

.source-newslist>li {
    border-bottom: 1px solid #cdd3c4;
    padding-block: 15px
}

.source-newslist dl {
    margin: 0
}

.source-newslist dt {
    margin: 0;
    font-size: 14px
}

.archive-card-text h3 {
    overflow-wrap: anywhere;
    margin-top: 12px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.7
}

.archive-news .archive-card-text h3 {
    margin: 0;
    font-size: 18px
}

.panasonic-preserve img {
    object-fit: contain;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-bottom: 24px
}

.listing-count {
    margin-bottom: 24px;
    font-size: 14px
}

.profile-date {
    color: #647158;
    margin-top: 10px;
    font-size: 12px !important
}

.form-consent label {
    line-height: 1.8
}

.preview-form form[hidden] {
    display: none !important
}

.topics-options {
    border: 1px solid #cbd3c2;
    margin-block: 28px;
    padding: 20px
}

.topics-options legend {
    padding: 0 8px;
    font-weight: 500
}

.topics-options .form-consent {
    margin: 0
}

.article-tags {
    margin-top: 25px
}

.magazine-search [data-slot=input], .magazine-search button {
    border-radius: 0;
    height: 48px
}

@media (max-width:900px) {
    .source-grid3, .source-steps-grid {
        grid-template-columns: 1fr
    }

    .source-np-svc-name {
        font-size: 13px
    }

    .prose .source-np-svc-item {
        grid-template-columns: 1fr
    }

    .source-np-svc-go {
        grid-column: 1
    }
}

@media (max-width:760px) {
    .source-np-lp-trust, .source-twoCol, .source-deliverGrid, .source-plans, .source-pricing-grid, .source-problem-grid, .source-kpi-grid, .source-two-col, .source-projectview>div>ul {
        grid-template-columns: 1fr
    }

    .source-card, .source-priceCard, .source-plan, .source-price-card, .source-step-card, .source-kpi-card, .source-callout-box, .source-deliverBlock {
        padding: 20px
    }

    .source-np-svc-headline {
        font-size: 23px
    }

    .archive-news .archive-card-text h3 {
        margin-top: 10px
    }

    .magazine-search input {
        font-size: 16px
    }

    .prose .source-np-lp-btn, .prose .source-cta, .prose .source-btn {
        max-width: 100%
    }
}

.offering-heading {
    max-width: 1000px
}

.offering-heading .offering-lead {
    color: #454a40;
    max-width: 850px;
    margin-top: 25px;
    font-size: 1.0625rem;
    line-height: 2
}

.capability-grid {
    border-top: 1px solid var(--border);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 36px;
    display: grid
}

.capability-card {
    border-bottom: 1px solid var(--border);
    min-width: 0;
    padding: 28px 0 32px;
    scroll-margin-top: 30px
}

.capability-number {
    color: #676e5e;
    margin-bottom: 15px;
    font-size: .875rem
}

.capability-card h3 {
    margin-bottom: 15px;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.6
}

.capability-card h3 a {
    display: block
}

.capability-card h3 a:hover {
    text-underline-offset: 6px;
    text-decoration: underline
}

.capability-card h3 span {
    font-size: 1rem
}

.capability-card>p:last-child {
    color: #50564a;
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.95
}

.offering-consult {
    padding: 36px 0 12px;
    scroll-margin-top: 30px
}

.offering-consult h3 {
    margin-bottom: 16px;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 500;
    line-height: 1.7
}

.offering-consult p {
    max-width: 740px;
    font-size: 1rem;
    line-height: 1.95
}

.offering-consult .text-link {
    margin-top: 24px;
    font-size: 1rem;
    display: inline-flex
}

.offering-consult .consultation-label {
    color: #50564a;
    margin-top: 24px;
    font-size: .875rem
}

.consultation-topics {
    max-width: 850px;
    margin-top: 12px;
    padding-left: 1.4em;
    list-style: outside
}

.consultation-topics li {
    overflow-wrap: anywhere;
    margin: 8px 0;
    padding-left: .2em;
    font-size: 1rem;
    line-height: 1.9
}

.offering-products {
    border-top: 3px solid #282e22;
    margin-top: 64px;
    padding-top: 40px;
    scroll-margin-top: 30px
}

.offering-products .section-heading {
    margin-bottom: 32px
}

.offering-products .section-heading h2 {
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 500;
    line-height: 1.65
}

.service-hub {
    margin-bottom: 60px
}

.service-hub #capabilities {
    scroll-margin-top: 30px
}

.offering-language {
    color: #646a5d;
    margin-top: 18px;
    font-size: .875rem
}

.product-context {
    background: #f1f3ed;
    border-left: 3px solid #4b5c3d;
    margin-bottom: 38px;
    padding: 20px 24px;
    font-size: 1rem;
    line-height: 1.9
}

.product-context a {
    text-underline-offset: 4px;
    text-decoration: underline
}

@media (max-width:1050px) {
    .capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 30px
    }

    .offering-products {
        margin-top: 42px
    }
}

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

    .capability-card {
        padding: 24px 0
    }

    .capability-card h3 {
        font-size: 1.3rem
    }

    .offering-heading .offering-lead {
        font-size: 1rem
    }

    .offering-products {
        padding-top: 28px
    }

    .product-context {
        padding: 17px 20px
    }

    .offering-products .service-detail {
        font-size: 1rem
    }
}

.site-header {
    gap: 22px
}

.site-header nav {
    gap: 20px
}

.site-header nav a, .contact-link {
    align-items: center;
    min-height: 44px;
    display: inline-flex
}

.compact-projects {
    padding-block: 54px
}

.compact-projects .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px
}

.compact-projects .project-0 {
    grid-area: auto
}

.compact-projects .project-image, .compact-projects .project-0 .project-image {
    aspect-ratio: 16/9
}

.compact-projects .project-image img, .compact-projects .project-0 .project-image img {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.compact-projects .project h3 {
    font-size: 24px
}

.compact-projects .section-heading {
    margin-bottom: 30px
}

.compact-projects .project-meta {
    gap: 12px
}

.compact-projects .project-meta>span:last-child {
    gap: 10px
}

.compact-projects .project a:hover img {
    transform: none
}

.compact-projects .work-note {
    margin-top: 20px
}

.capability-detail {
    font-size: 16px;
    line-height: 1.85
}

.capability-detail dt, .capability-related-label {
    margin-top: 22px;
    font-size: 14px;
    font-weight: 600
}

.capability-detail dd {
    margin-top: 7px
}

.capability-related {
    margin: 6px 0 22px
}

.capability-related a {
    text-underline-offset: 4px;
    padding-block: 5px;
    text-decoration: underline;
    display: inline-block
}

.service-hub .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px
}

.service-hub .capability-card {
    padding-bottom: 38px
}

.product-audience {
    color: #50564a;
    margin-top: 20px;
    font-size: 15px
}

.product-title span {
    display: block
}

.product-entry-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    margin: -24px 0 34px;
    display: flex
}

.product-entry-actions>p {
    color: #50564a;
    flex-basis: 100%;
    font-size: 14px
}

.primary-action {
    color: #fff;
    background: #242821;
    justify-content: center;
    align-items: center;
    padding: 16px 22px;
    font-size: 16px;
    line-height: 1.7;
    text-decoration: none;
    display: inline-flex
}

.primary-action:hover {
    background: #3c4535
}

.product-entry-actions+.product-context {
    margin-top: 0
}

.step-lead {
    font-size: 17px;
    line-height: 1.9
}

.form-section {
    scroll-margin-top: 24px
}

.native-check {
    accent-color: #303b29;
    flex: none;
    width: 22px;
    height: 22px
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline-offset: 4px;
    outline: 3px solid #976015
}

@media (max-width:1050px) {
    .site-header {
        flex-wrap: wrap
    }

    .site-header nav {
        order: 3;
        justify-content: space-between;
        gap: 4px 18px;
        width: 100%
    }

    .site-header .contact-link {
        margin-left: auto
    }

    .compact-projects .project-grid {
        gap: 22px
    }

    .compact-projects .project h3 {
        font-size: 21px
    }
}

@media (max-width:680px) {
    .compact-projects .project-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .compact-projects .project a {
        grid-template-columns: 94px minmax(0, 1fr);
        align-items: start;
        gap: 9px 16px;
        display: grid
    }

    .compact-projects .project-image {
        grid-area: 1/1/span 4;
        margin-top: 4px
    }

    .compact-projects .project-meta, .compact-projects .project h3, .compact-projects .project-description, .compact-projects .project-tags {
        grid-column: 2;
        margin-top: 0
    }

    .compact-projects .project h3 {
        white-space: normal;
        font-size: 20px;
        line-height: 1.65
    }

    .compact-projects .project-meta {
        flex-wrap: wrap
    }

    .compact-projects .project-description {
        font-size: 16px
    }

    .service-hub .capability-grid {
        grid-template-columns: 1fr
    }

    .site-header nav a {
        font-size: 14px
    }

    .site-header nav {
        justify-content: flex-start
    }

    .product-entry-actions {
        margin-top: -16px
    }

    .primary-action {
        width: 100%
    }

    .detail-hero h1 {
        font-size: 32px;
        line-height: 1.6
    }

    .detail-hero .product-title {
        font-size: clamp(24px, 7.2vw, 30px)
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *, :before, :after {
        transition: none !important;
        animation: none !important
    }
}