/* Internal page layouts. Shared foundations live in design-system.css. */
/* Editorial introductions and original project instruments. */
.artadis-design .breadcrumb-section { position: relative; background: #edf2f5; color: var(--design-ink); padding-block: 11rem 5rem; margin: 0; }
.artadis-design .breadcrumb-section .container { max-inline-size: 92rem; }
.artadis-design .breadcrumb-section h1 { max-inline-size: 20ch; }
.artadis-design .breadcrumb-section p { max-inline-size: 46rem; margin-block-start: 1.5rem; }
.artadis-design .breadcrumb-list { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: 0; margin: 0 0 2rem; list-style: none; font-size: .75rem; color: var(--design-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin-block-start: 2.5rem; }
.hero-actions > a:not(.design-button) { font-size: .8rem; border-block-end: 1px solid var(--design-line); padding-block: .5rem; }
.service-hero { padding-block: 9rem 0; background: #edf2f5; }
.service-hero__index { display: flex; justify-content: space-between; gap: 2rem; font-size: .65rem; letter-spacing: .05em; padding-block: 1rem; border-block-end: 1px solid var(--design-line); color: var(--design-muted); }
.service-hero__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; padding-block: 2.5rem 3rem; }
.artadis-design .service-hero h1 { font-size: clamp(2.2rem,3.6vw,4.6rem); line-height: 1.17; max-inline-size: 15ch; }
.artadis-design .service-hero__stack { color: var(--design-blue); font-size: .8rem; margin-block: 2rem 0; letter-spacing: .02em; }
.service-hero__foot { display: flex; justify-content: space-between; gap: 2rem; align-items: center; border-block-start: 1px solid var(--design-line); padding-block: 1.2rem; font-size: .62rem; color: var(--design-muted); }
.service-hero__foot a { font-size: 1.5rem; }
.screen-instrument { min-inline-size: 0; position: relative; padding-block-start: 1rem; }
.screen-instrument__top { display: flex; justify-content: space-between; gap: 1rem; padding-block: .75rem; font-size: .65rem; color: var(--design-blue); }
.screen-instrument__stage { background: #dae5ed; border: 1px solid #b1c4d3; padding: 1.2rem; position: relative; }
.screen-instrument__stage::before { content: ''; position: absolute; inset: -.6rem .6rem .6rem -.6rem; border: 1px solid #bdcbd4; pointer-events: none; }
.screen-instrument__sheet { display: block; position: relative; aspect-ratio: 16 / 10; background: #fff; overflow: clip; }
.screen-instrument__sheet img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: top; transition: transform .45s; }
.screen-instrument__sheet:hover img { transform: scale(1.025); }
.screen-instrument__zoom { position: absolute; inset: auto .6rem .6rem auto; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; background: #111b23; color: #fff; }
.screen-instrument__controls { display: flex; flex-wrap: wrap; border-block-end: 1px solid var(--design-line); margin-block-start: 1rem; }
.screen-instrument__controls button { flex: 1; padding: .85rem .4rem; border: 0; border-block-end: 2px solid transparent; background: transparent; color: #405666; text-align: start; font-size: .62rem; line-height: 1.6; }
.screen-instrument__controls button span { display: block; font-size: .58rem; margin-block-end: .2rem; }
.screen-instrument__controls button[aria-pressed=true] { color: #173b5e; border-color: #234f7c; font-weight: 600; }
.screen-instrument__credit { display: inline-block; padding-block: 1rem 0; font-size: .65rem; }
.system-instrument { border: 1px solid #b1c4d3; padding: 1rem 1.4rem; background: #e2ebf1; min-inline-size: 0; }
.system-instrument__map { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,5.5rem); gap: 4rem 1.1rem; padding-block: 1.5rem; margin-block: .75rem; }
.system-instrument__map svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; fill: none; stroke: #91aabf; stroke-width: 1.3; }
.system-instrument__map button { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: start; padding: .7rem; border: 1px solid #91aabf; background: #f6f8fa; color: #20394d; text-align: start; transition: background .2s,transform .3s,box-shadow .3s; }
.system-instrument__map button span { font-size: .55rem; }
.system-instrument__map button strong { font-size: .73rem; font-weight: 550; }
.system-instrument__map button i { position: absolute; inset: .7rem .7rem auto auto; inline-size: .25rem; block-size: .25rem; border-radius: 50%; background: currentColor; }
.system-instrument__map button[aria-pressed=true] { background: #234f7c; color: #fff; transform: translateY(-.3rem); box-shadow: .25rem .25rem #b6c7d4; }
.system-instrument.is-running .system-instrument__map svg { stroke: #234f7c; stroke-dasharray: 12 6; animation: system-signal .65s linear infinite; }
@keyframes system-signal { to { stroke-dashoffset: -36; } }
.system-instrument__note { min-block-size: 8rem; border-block-start: 1px solid #b1c4d3; padding-block-start: 1rem; }
.system-instrument__note strong { font-family: 'Unbounded',sans-serif; font-size: .85rem; font-weight: 500; }
.artadis-design .system-instrument__note p { font-size: .75rem; line-height: 1.75; margin-block: .5rem 0; }
.system-instrument__run { display: flex; align-items: center; justify-content: space-between; gap: 1rem; inline-size: 100%; margin-block-start: 1rem; padding: .85rem 0 .25rem; background: transparent; border: 0; border-block-start: 1px solid #b1c4d3; font-size: .7rem; color: #234f7c; }
.service-index { position: sticky; inset-block-start: var(--header-height); z-index: 30; background: #f5f7f8; border-block: 1px solid var(--design-line); }
.service-index .container { display: flex; justify-content: space-between; gap: 1.5rem; overflow-x: auto; scrollbar-width: thin; }
.service-index a { flex-shrink: 0; display: flex; align-items: center; gap: .6rem; padding-block: 1.1rem; font-size: .7rem; border-block-end: 2px solid transparent; }
.service-index a span { font-size: .55rem; color: var(--design-muted); }
.service-index a[aria-current] { border-color: #234f7c; color: #234f7c; }
.service-note { position: relative; margin-inline-start: 3rem; padding: 2rem 0 2rem 2rem; border-inline-start: 1px solid var(--design-line); }
.service-note__number { display: block; font-family: 'Unbounded',sans-serif; font-size: clamp(6rem,12vw,12rem); line-height: 1; letter-spacing: -.08em; color: #6e889e; margin-block-end: 2rem; }
.artadis-design .service-note h3 { font-size: 1.5rem; max-inline-size: 20ch; }
.service-note p { font-size: .875rem; max-inline-size: 30rem; }
.service-note a { font-size: .75rem; border-block-end: 1px solid var(--design-line); padding-block: .5rem; }
/* Content, capabilities and process retain the translated source material. */
.artadis-design .service-details-top-area { margin: 0; }
.artadis-design .service-details-top-content p { font-size: .95rem; }
.artadis-design .key-features { list-style: none; display: grid; gap: 1rem; padding: 0; margin: 1.5rem 0 0; }
.artadis-design .key-features li { display: flex; align-items: start; gap: .875rem; font-size: .8rem; line-height: 1.7; }
.artadis-design .key-features li svg { fill: var(--design-blue); flex: 0 0 1rem; margin-block-start: .3rem; }
.artadis-design .service-details-feature-section { background: #e7eef3; }
.artadis-design .service-details-feature-section .section-title5 { position: sticky; inset-block-start: calc(var(--header-height) + var(--section-index-height) + var(--anchor-gap)); max-inline-size: 31rem; }
.artadis-design .service-feature-list { display: grid; list-style: none; padding: 0; margin: 0; counter-reset: features; }
.artadis-design .single-feature { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: 1.25rem; padding: 2rem 0; border-block-start: 1px solid #b1c4d3; counter-increment: features; transition: padding .25s; }
.artadis-design .single-feature::before { content: counter(features,decimal-leading-zero); color: var(--design-blue); font-size: .65rem; }
.artadis-design .single-feature .icon { display: none; }
.artadis-design .single-feature h3 { font-size: 1.15rem; }
.artadis-design .single-feature p { font-size: .85rem; margin: 0; }
.artadis-design .home2-process-section { background: #f8fafb; }
.artadis-design .home2-process-section > .container-fluid { inline-size: calc(100% - 8.4vw); max-inline-size: 92rem; margin-inline: auto; padding: 0; }
.artadis-design .service-process-grid .service-process-items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; }
.artadis-design .single-process { position: relative; block-size: 100%; padding: 1.8rem 0; border-block-start: 1px solid var(--design-line); }
.artadis-design .single-process .number { display: flex; gap: 1rem; align-items: center; margin-block-end: 2rem; }
.artadis-design .single-process .number h6 { font: .6rem 'Montserrat',sans-serif; text-transform: uppercase; margin: 0; color: var(--design-muted); }
.artadis-design .single-process .number span { font-family: 'Unbounded',sans-serif; font-size: 2.5rem; color: var(--design-blue); line-height: 1; }
.artadis-design .single-process .content h3 { font-size: 1.2rem; }
.artadis-design .single-process .content p { font-size: .85rem; margin: 0; }
.artadis-design .service-details-page:has(.service-details-faq-area) { background: #e7eef3; }
.faq-heading { padding-inline-end: 3rem; }
.artadis-design .accordion-item { border: 0; border-block-end: 1px solid var(--design-line); background: transparent; border-radius: 0; }
.artadis-design .accordion-header { margin: 0; }
.artadis-design .accordion-button { padding: 1.5rem 2rem 1.5rem 0; color: var(--design-ink); background: transparent; font-family: 'Montserrat',sans-serif; font-size: .95rem; line-height: 1.7; font-weight: 550; box-shadow: none; }
.artadis-design .accordion-button::after { position: absolute; inset-inline-end: 0; inline-size: 1rem; block-size: 1rem; background-size: contain; }
.artadis-design .accordion-button:not(.collapsed) { color: var(--design-blue); background: transparent; box-shadow: none; }
.artadis-design .accordion-body { padding: 0 1.5rem 1.5rem 0; color: var(--design-muted); font-family: var(--font-inter); font-size: .85rem; line-height: 1.85; }
.artadis-design .service-details-tools-section { background: #f8fafb; }
.tools-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 2rem; padding: 0; margin: 0; list-style: none; }
.tools-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.tools-card { position: relative; display: flex; align-items: center; gap: 1.25rem; min-block-size: 7.75rem; padding: 1.5rem .5rem; border-block-start: 1px solid var(--design-line); color: #56646f; transition: color .2s; }
.tools-card::after { content: ''; position: absolute; inset: -1px 0 auto; block-size: 1px; background: var(--design-blue); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.technology-marks { display: flex; align-items: center; flex: 0 0 auto; gap: .4rem; }
.technology-mark { display: block; inline-size: 2.75rem; block-size: 2.75rem; background: currentColor; mask: var(--technology-mark) center / contain no-repeat; transition: transform .3s; }
.technology-marks:has(> :nth-child(2)) .technology-mark { inline-size: 2rem; block-size: 2rem; }
.tools-name { display: grid; gap: .35rem; overflow-wrap: anywhere; }
.tools-name > span { font-size: .95rem; font-weight: 600; color: var(--design-ink); }
.tools-name > small { font-size: .65rem; line-height: 1.6; color: var(--design-muted); }
@media (hover: hover) {
  .tools-card:hover { color: var(--design-blue); }
  .tools-card:hover::after { transform: scaleX(1); }
  .tools-card:hover .technology-mark { transform: translateY(-3px); }
}
@media (48rem <= width < 75rem) { .tools-grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.artadis-design .home2-pricing-plan-section { background: #e7eef3; }
.artadis-design .pricing-plan-tab-area .row:has(.pricing-card) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; margin: 0; }
.artadis-design .pricing-plan-tab-area .row:has(.pricing-card) > div { inline-size: auto; padding: 0; margin: 0; }
.artadis-design .pricing-card { position: relative; block-size: 100%; display: flex; flex-direction: column; background: #f8fafb; padding: 2rem; border-block-start: 2px solid #b1c4d3; }
.artadis-design .pricing-card.two { border-color: var(--design-blue); }
.artadis-design .pricing-card .pricing-top { padding-block-end: 1.5rem; margin-block-end: 1.5rem; border-block-end: 1px solid var(--design-line); }
.artadis-design .pricing-top h2 { font-size: clamp(2rem,3.5vw,3.5rem); margin-block: 1.5rem .5rem; }
.artadis-design .pricing-top h2 sub { font-size: 1rem; vertical-align: baseline; }
.artadis-design .pricing-content { display: flex; flex-direction: column; flex: 1; }
.artadis-design .pricing-content ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.artadis-design .pricing-content li { font-size: .8rem; line-height: 1.7; display: flex; gap: .75rem; margin-block-end: 1rem; }
.artadis-design .pricing-content li svg { flex: 0 0 1rem; fill: var(--design-blue); margin-block-start: .3rem; }
.artadis-design .pricing-content li.red { color: #586774; }
.artadis-design .pricing-content li.red svg { fill: #586774; }
.artadis-design .pricing-card .pay-btn-area { margin-block-start: auto; }
.artadis-design .pricing-card .pay-btn { inline-size: 100%; }
.artadis-design .pricing-card .batch { color: #234f7c; font-size: .6rem; }
/* Work archive and case studies. */
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4rem 4vw; align-items: start; }
.project-card:nth-child(even) { margin-block-start: 5rem; }
.project-card { min-inline-size: 0; }
.project-card__image { display: block; overflow: clip; background: #dde7ee; padding: 1.2rem; }
.project-card__image img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; display: block; transition: transform .45s; }
.project-card__image:hover img { transform: translateY(-.35rem); }
.project-card__body { padding-block-start: 1.4rem; border-block-end: 1px solid var(--design-line); padding-block-end: 1.5rem; }
.artadis-design .project-card__body h3 { font-size: clamp(1.05rem,1.7vw,1.8rem); }
.project-card__body h3 a { display: flex; justify-content: space-between; gap: 1rem; }
.project-card__body h3 a span { color: var(--design-blue); }
.project-card__category { font-size: .7rem; margin-block-end: .5rem !important; }
.project-card__tags { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; padding: 0; margin: 0; }
.project-card__tags li { color: var(--design-muted); font-size: .65rem; }
.project-grid__footer { margin-block-start: 3rem; text-align: center; }
.portfolio-search { display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-block: 1px solid var(--design-line); padding-block: 1rem; margin-block-end: 3rem; }
.portfolio-search label { font-size: .7rem; }
.portfolio-search input { inline-size: min(24rem,100%); border: 0; border-block-end: 1px solid #7c96aa; background: transparent; padding: .7rem .2rem; font-size: .85rem; }
.portfolio-search output { font-size: .75rem; color: var(--design-blue); min-inline-size: 2rem; }
.case-cover { display: block; margin-block-start: 3rem; padding: 1.5rem; background: #dce6ed; max-inline-size: 72rem; }
.case-cover img { display: block; inline-size: 100%; max-block-size: 34rem; object-fit: cover; object-position: top; }
.case-cover__caption { display: flex; justify-content: space-between; gap: 1rem; padding-block-start: .75rem; font-size: .65rem; }
.project-introduction { max-inline-size: 56rem; margin-block-end: 3rem; }
.artadis-design .project-management-nav { margin-block-end: 2rem; }
.artadis-design .project-management-nav .nav-tabs { display: flex; flex-wrap: wrap; gap: .75rem; border: 0; }
.artadis-design .project-management-nav .nav-link { flex: 1; padding: 1rem .75rem; border: 0; border-block-end: 1px solid #91aabf; border-radius: 0; color: var(--design-ink); font-size: .8rem; text-align: start; }
.artadis-design .project-management-nav .nav-link.active { color: var(--design-blue); background: #e7eef3; border-block-end: 2px solid var(--design-blue); }
.artadis-design .project-management-tab-content { padding: 1.5rem 2rem 1.5rem 0; }
.artadis-design .project-management-tab-content ul { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.artadis-design .project-management-tab-content li { display: flex; gap: .75rem; margin-block-end: .75rem; font-size: .85rem; }
.project-check { color: var(--design-blue); flex-shrink: 0; }
.artadis-design .project-management-tab-img-wrap { padding: 1rem; background: #e3ebf1; }
.artadis-design .project-management-tab-img-wrap img { display: block; inline-size: 100%; max-block-size: 45rem; object-fit: contain; }
.artadis-design .home3-process-section { background: #e7eef3; }
.case-process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; }
.artadis-design .process-card { padding-block: 1.5rem; border-block-start: 1px solid #b1c4d3; block-size: 100%; }
.process-card-top { margin-block-end: 1.5rem; }
.process-card-top .number { color: var(--design-blue); font-family: 'Unbounded',sans-serif; font-size: 2.25rem; }
.artadis-design .process-card p { font-size: .8rem; margin: 0; }
.case-experience__shell { color: var(--design-ink); padding-block: 2rem; }
.case-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; padding-block-start: 2rem; border-block-start: 1px solid var(--design-line); }
.case-stats strong { font-size: clamp(1.8rem,3.7vw,3.5rem); color: var(--design-blue); font-family: 'Unbounded',sans-serif; }
.case-stats p { font-size: .75rem; }
.artadis-design .case-approach { background: #e7eef3; }
.case-approach__image { padding: 1rem; background: #f5f7f8; }
.case-approach__image img { inline-size: 100%; max-block-size: 45rem; object-fit: contain; }
.image-viewer { position: fixed; inset: 1rem; padding: 0; margin: auto; inline-size: calc(100% - 2rem); max-inline-size: 100rem; block-size: calc(100dvh - 2rem); max-block-size: none; background: #edf2f5; color: #111b23; border: 1px solid #bdcbd4; }
.image-viewer::backdrop { background: rgb(17 27 35 / .8); }
.image-viewer__bar { position: sticky; inset-block-start: 0; display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding: 1rem; border-block-end: 1px solid #bdcbd4; background: #edf2f5; z-index: 1; }
.artadis-design .image-viewer__bar p { font-size: .75rem; margin: 0; }
.image-viewer__bar button { inline-size: 2.75rem; block-size: 2.75rem; flex-shrink: 0; border: 1px solid #bdcbd4; background: transparent; font-size: 1.5rem; }
.image-viewer__body { padding: 1rem; text-align: center; }
.image-viewer__body img { max-inline-size: 100%; block-size: auto; }
.artadis-design .site-footer { background: #e7eef3; color: var(--design-ink); border-block-start: 1px solid var(--design-line); padding-block: 3.5rem 1.5rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1.3fr 1fr; gap: 3rem; }
.site-footer__brand p { font-size: .8rem; margin-block-start: 1.25rem; }
.artadis-design .site-footer h3 { font-family: var(--font-inter); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--design-muted); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-block-end: .55rem; font-size: .8rem; }
.site-footer__bottom { display: flex; align-items: center; gap: 2rem; color: var(--design-muted); font-size: .65rem; border-block-start: 1px solid var(--design-line); padding-block-start: 1.5rem; margin-block-start: 3rem; }
.back-to-top { margin-inline-start: auto; display: grid; place-items: center; border: 1px solid #9bb3c4; inline-size: 2.5rem; block-size: 2.5rem; font-size: 1.25rem; }
.inner-reveal { animation: inner-arrive .55s both; }
@keyframes inner-arrive { from { opacity: .25; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) { .artadis-inner .single-feature:hover { padding-inline-start: .75rem; } }
@media (width < 75rem) {
  .service-hero__layout { gap: 3rem; }
}
@media (width < 62rem) {
  .service-hero__layout { grid-template-columns: 1fr; padding-block: 2.5rem; }
  .artadis-design .service-hero h1 { max-inline-size: 21ch; font-size: clamp(2.2rem,5vw,3.8rem); }
  .screen-instrument,.system-instrument { inline-size: 100%; max-inline-size: 40rem; justify-self: end; }
  .service-note { margin-inline-start: 0; margin-block-start: 1rem; }
  .service-note__number { font-size: 6rem; }
  .artadis-design .service-details-feature-section .section-title5 { position: static; max-inline-size: none; }
  .artadis-design .service-process-grid .service-process-items { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .artadis-design .project-management-nav .nav-link { flex: 1 1 40%; }
  .case-process-grid,.case-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .artadis-design .pricing-plan-tab-area .row:has(.pricing-card) { grid-template-columns: 1fr; max-inline-size: 40rem; margin-inline: auto; }
}
@media (width < 48rem) {
  .artadis-design .home2-process-section > .container-fluid { inline-size: calc(100% - 3rem); }
  .inner-wordmark { font-size: 1.25rem; }
  .service-index a { font-size: .65rem; }
  .service-index a span { display: none; }
  .service-hero { padding-block-start: 7rem; }
  .service-hero__index { font-size: .55rem; }
  .service-hero__foot { gap: 1rem; font-size: .55rem; }
  .service-hero__foot > span:first-child { display: none; }
  .screen-instrument__stage { padding: .6rem; }
  .system-instrument { padding: .75rem; }
  .system-instrument__map { gap: 3rem .6rem; grid-template-rows: repeat(2,5rem); }
  .system-instrument__map button { padding: .5rem; }
  .system-instrument__map button strong { font-size: .6rem; }
  .system-instrument__note { min-block-size: 8.5rem; }
  .service-note { padding: 1.5rem; background: #e7eef3; }
  .artadis-design .breadcrumb-section { padding-block: 8rem 3rem; }
  .artadis-design .breadcrumb-section h1 { font-size: clamp(2rem,7.5vw,3rem); }
  .artadis-design .service-process-grid .service-process-items,.project-grid,.case-process-grid { grid-template-columns: 1fr; }
  .project-card:nth-child(even) { margin-block-start: 0; }
  .project-grid { gap: 2.5rem; }
  .portfolio-search { flex-wrap: wrap; gap: .5rem 1rem; }
  .portfolio-search label { inline-size: 100%; }
  .portfolio-search input { inline-size: calc(100% - 3rem); }
  .artadis-design .single-feature { grid-template-columns: 1.5rem minmax(0,1fr); gap: .6rem; }
  .artadis-design .project-management-tab-content { padding-inline-end: 0; }
  .faq-heading { padding: 0; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer__bottom { flex-wrap: wrap; gap: 1rem; }
  .site-footer__bottom > span:nth-child(2) { display: none; }
  .tools-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1rem; }
  .tools-card { flex-direction: column; align-items: start; gap: .85rem; padding-block: 1.25rem; }
  .tools-name > span { font-size: .8rem; }
  .tools-name > small { font-size: .6rem; }
  .case-cover { padding: .65rem; }
  .image-viewer { inset: .5rem; inline-size: calc(100% - 1rem); block-size: calc(100dvh - 1rem); }
}