/* A fixed frame keeps the controls visible while the About copy scrolls. */
.about-panel.about-page-overlay,
.about-panel.mobile-about,
dialog.rawx-dialog .about-panel.mobile-about {
  --about-edge:24px;
  --about-top:min(124px,max(12px,calc(100dvh - 360px)));
  position:fixed!important;
  inset:auto!important;
  top:var(--about-top)!important;
  right:var(--about-edge)!important;
  width:min(var(--about-width,clamp(340px,35vw,620px)),calc(100vw - var(--about-edge)*2))!important;
  height:min(var(--about-height,calc(100dvh - var(--about-top) - var(--about-edge))),calc(100dvh - var(--about-top) - var(--about-edge)))!important;
  min-width:min(280px,calc(100vw - var(--about-edge)*2));
  min-height:min(260px,calc(100dvh - var(--about-top) - var(--about-edge)));
  max-width:none!important;
  max-height:none!important;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
  border:1px solid #00000020;
  border-radius:12px;
  background:rgba(224,224,224,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 36px #00000012;
  container-type:inline-size;
  line-height:1.35;
}
.about-panel.is-expanded.about-page-overlay,
.about-panel.is-expanded.mobile-about,
dialog.rawx-dialog .about-panel.is-expanded.mobile-about { --about-top:12px; --about-edge:12px; }
.about-panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; margin:0 20px; padding:18px 0 12px; border-bottom:1px solid #00000035; }
.about-panel .about-panel-header h1 { font-size:clamp(40px,12cqw,70px); line-height:1; letter-spacing:0; margin:0; }
.about-panel-header .close-overlay { flex:none; width:44px; height:44px; color:#161616; }
.about-panel-header svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; }
.about-panel-body { flex:1; min-height:0; padding:20px 18px 20px 20px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#00000055 transparent; font-size:calc(14px * var(--about-text-scale,1)); overflow-wrap:anywhere; }
.about-panel-body:hover,.about-panel-body:focus-visible { scrollbar-color:#00000080 transparent; }
.about-panel-body::-webkit-scrollbar { width:7px; height:7px; }
.about-panel-body::-webkit-scrollbar-track { background:transparent; margin:10px 0; }
.about-panel-body::-webkit-scrollbar-thumb { background:#00000055; border:2px solid transparent; border-radius:8px; background-clip:padding-box; }
.about-panel-body::-webkit-scrollbar-thumb:hover { background-color:#00000080; }
.about-panel-body::-webkit-scrollbar-button { display:none; }
.about-panel-body:focus-visible { outline:1px solid #00000055; outline-offset:-4px; }
.about-panel-body .columns { gap:1.25em; }
.about-panel-body .column { min-width:0; }
.about-panel-tools { display:flex; align-items:center; gap:4px; flex:none; min-height:52px; padding:4px 10px; border-top:1px solid #00000020; }
.about-panel-tools button { display:inline-flex; justify-content:center; align-items:center; min-width:36px; min-height:40px; padding:4px 7px; background:none; border:0; border-radius:5px; color:#292929; font-size:12px; line-height:1; }
.about-panel-tools button:hover { background:#00000009; }
.about-panel-tools button:disabled { opacity:.3; cursor:default; }
.about-panel-tools output { font-size:11px; min-width:34px; text-align:center; font-variant-numeric:tabular-nums; }
.about-panel-tools .about-resize { cursor:nesw-resize; touch-action:none; margin-right:auto; color:#000; }
.about-resize svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:square; stroke-linejoin:miter; }
.about-panel-tools .about-expand { font-size:20px; }
.about-panel.is-resizing { user-select:none; }
.about-panel .about-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@container(max-width:380px) {
  .about-panel-body .columns { flex-direction:column; gap:12px; }
  .about-panel-body [style*="text-align"] { text-align:left!important; }
}
@media(max-width:900px) {
  .about-panel.about-page-overlay,.about-panel.mobile-about,dialog.rawx-dialog .about-panel.mobile-about { --about-edge:12px; --about-top:12px; width:min(var(--about-width,calc(100vw - 24px)),calc(100vw - 24px))!important; }
  .about-panel-header { margin:0 16px; padding-top:14px; }
  .about-panel-body { padding:16px; }
  .about-panel-tools button { min-height:44px; }
}

/* Compact lists respond to the resizable panel, including text zoom. */
.about-list-section { border-top:1px solid #00000035;margin-top:14px;padding-top:12px; }
.about-list-section h2 { font:inherit;font-weight:700;margin:0 0 6px; }
.about-panel-body .about-list { display:block;column-count:3;column-gap:12px;list-style:none;margin:0;padding:0;line-height:1.3; }
.about-list li { margin:0;padding:0;min-width:0;break-inside:avoid; }
@container(max-width:540px) { .about-panel-body .about-list { column-count:2; } }
@container(max-width:360px) { .about-panel-body .about-list { column-count:1; } }
.reel-page-overlay .close-overlay { display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;color:#161616; }
.reel-page-overlay .close-overlay svg { width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6; }

/* Keep each production stage together and wrap the groups with panel width. */
.about-services .service-list { list-style:disc outside;margin:0;padding:0 0 0 1.1em;line-height:1.3; }
.about-services .service-list li { margin:0;padding:0; }
.service-groups { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px; }
.service-group { min-width:0; }
.service-group h3 { font:inherit;font-weight:700;margin:0 0 5px; }
@container(max-width:540px) { .service-groups { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container(max-width:360px) { .service-groups { grid-template-columns:1fr; } }

/* Inverse of the project category links: dark by default, red on hover. */
.about-panel a:not(.close-overlay), .about-panel-tools button { transition:color 180ms ease; }
.about-panel a:not(.close-overlay):hover,
.about-panel a:not(.close-overlay):focus-visible,
.about-panel-tools button:not(:disabled):hover,
.about-panel-tools button:not(:disabled):focus-visible { color:#ff0000; }