/* About controls own their spacing; the Webflow button padding is too large. */
body .battle-screen>.battle-controls{align-items:center;padding:5px;gap:6px;bottom:16px!important}
body .battle-controls button{padding:0;margin:0;box-sizing:border-box;width:48px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;line-height:1}
body .battle-controls svg{display:block;margin:0;position:static}
body #about.about-section{padding-top:10px}
body #about .experience-ten{top:44%}
body #about .experience-caption,body #about .experience-resolution{top:41%}
body .agency-focus .agency-stage.horizontal-stage{padding-top:clamp(174px,23svh,214px);padding-bottom:80px}
body .agency-focus .agency-projects.horizontal-track img{height:clamp(200px,46svh,530px);max-height:calc(100svh - 330px)}

/* Metadata stays in its own panel during forward and interrupted travel. */
body .years-chapter:not(.is-static) .year-info{width:calc(100% - 2 * var(--gutter));max-width:760px;transform:none;visibility:hidden;opacity:0}
body .years-chapter:not(.is-static) .year-panel[data-active] .year-info{visibility:visible;opacity:1}
body .year-names{display:flex;flex-wrap:wrap;column-gap:1.1em;row-gap:.2em}
body .year-names .yn{white-space:normal;overflow-wrap:break-word}
body .years-chapter:not(.is-static) .year-panel[data-project-count="13"] .year-fan{top:56%}
@media(max-width:700px){
 body .years-chapter:not(.is-static) .year-fan{top:54%}
 body .years-chapter:not(.is-static) .year-panel[data-project-count="13"] .year-fan{top:45%}
 body .year-names{font-size:14px;column-gap:.8em;row-gap:.12em}
 body .year-info{gap:8px}
 body .years-chapter:not(.is-static) .year-info{bottom:144px}
 body .years-chapter:not(.is-static) .years-ticks{bottom:80px;gap:4px}
 body .years-chapter:not(.is-static) .years-tick{min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){body .agency-focus .agency-projects.horizontal-track img{max-height:none}}

/* Real covers fill their frame. Source UI pixels keep their original ratio. */
body #main .work-card:nth-child(n) .work-image{height:auto;aspect-ratio:1.4;min-height:0;background:transparent!important}
body #main .work-card:nth-child(n) .work-image>img{position:static!important;inset:auto!important;display:block;width:100%!important;height:auto!important;max-width:100%!important;object-fit:contain!important;border-radius:inherit!important}
/* Source-specific viewports keep complete browser chrome and remove baked padding. */
body .work-image .cover-art{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#ebeef4;pointer-events:none}
body .work-image .cover-art>img{position:static!important;display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:50% 50%;border-radius:0!important;transform:none!important}
body .work-image .cover-art--region{inset:auto;left:50%;top:50%;width:var(--frame-width,92%);aspect-ratio:var(--region-ratio);translate:-50% -50%;border-radius:clamp(6px,1vw,14px);background:transparent}
body .work-image .cover-art--region>img{position:absolute!important;left:var(--source-left,0);top:var(--source-top,0);width:var(--source-width,100%)!important;height:auto!important;object-fit:contain!important}
body #main .work-card:has(.cover-art) .work-image{background:var(--preview-bg,#e8ebf1)!important}
body .work-image .cover-art[data-cover=mobilhub]>img{object-position:50% 62%}
body .work-image .cover-art[data-cover=phish]>img{transform:scale(1.12)!important;object-position:50% 62%}
body .work-image .cover-art[data-cover=terminal]{border-radius:inherit;background:#edf0f6}
body .work-image .cover-art[data-cover=gorman],body .work-image .cover-art[data-cover=vircity]{background:#ebeef4}
body #main .work-card:nth-child(n) .work-caption{position:static!important;inset:auto!important;width:auto!important;flex-direction:row!important;align-items:baseline!important;gap:12px!important;margin:20px 0 8px;color:var(--ink)!important}
body #main .work-card:nth-child(n) .work-caption h3{font-size:clamp(27px,3vw,43px)!important}
body #main .work-card:nth-child(n) .work-caption>span{color:var(--muted)!important}
body #main .work-card:nth-child(n)>p{position:static!important;inset:auto!important;width:auto!important;max-width:100%;font-size:14px!important;line-height:1.5;color:var(--muted)!important}

/* The old export assigned 40% to this shared footer. */
body footer#footer .footer-top{width:100%;max-width:none;min-width:0}
body footer#footer .footer-top h2{max-width:11em}
body.portfolio-case #main .project-info,body.portfolio-case #main .public-case-intro,body.portfolio-case #main .public-case-chapter,body.portfolio-case #main .oisy-intro,body.portfolio-case #main .oisy-note,body.portfolio-case .case-next{border-block:0!important}
body #about .about-profile{background:transparent!important}
body #about .about-art{background:transparent!important;mask-image:none;-webkit-mask-image:none}

/* A portrait identity tile contains the entire original landscape cover. */
body .year-card{background:var(--cover-bg)!important;color:var(--card-ink);container-type:inline-size}
body .year-card-brand{position:absolute;inset:9% 9% auto;height:28%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(16px,12cqw,30px);line-height:1.08;letter-spacing:-.04em;overflow-wrap:break-word}
body .year-card-brand img{display:block;width:100%;height:100%;max-height:44px;object-fit:contain;object-position:center}
body .year-card-preview{position:absolute;inset:43% 7% 17%;display:grid;place-items:center}
body .year-card-preview img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:4px}
body .year-card .year-card-meta{left:9%;right:9%;bottom:7%;padding:0;border-radius:0;display:block;text-align:center;background:none;color:var(--card-ink);backdrop-filter:none;-webkit-backdrop-filter:none;font-size:clamp(10px,6cqw,14px);line-height:1.2;opacity:.8;transform:none;transition:none}

/* Other preview surfaces also preserve source pixels, including hover states. */
body .design-principles .chapter-media img,body .design-principles .chapter-related img{object-fit:contain!important;object-position:center;transform:none!important}
body .design-principles .chapter-media,body .design-principles .chapter-related{background:transparent!important}
body .experience-card,body .experience-project{height:auto!important;overflow:visible;background:transparent}
body .experience-card img,body .experience-project img{display:block;width:100%;height:auto!important;object-fit:contain;border-radius:12px}
body .experience-card figcaption,body .experience-project figcaption{position:static;max-width:none;margin:8px 0 0;padding:0;background:none;color:var(--ink);backdrop-filter:none;border-radius:0;font-size:13px}
body .agency-focus .agency-projects.horizontal-track img{object-fit:contain!important;object-position:center}
body #main .work-image>img{transform:none!important}
body.portfolio-case .case-cover-art{aspect-ratio:auto;background:transparent}
body.portfolio-case .case-cover-art>img{display:block;width:100%;height:auto;object-fit:contain;transform:none}
@media(max-width:700px){
 body .years-chapter:not(.is-static) .year-panel[data-fan-count="5"] .year-fan{--scale:.82}
 body .years-chapter:not(.is-static) .year-panel[data-fan-count="6"] .year-fan{--scale:.72}
}

/* v66: the confirmed recognition is a plain phrase under the collaboration note. The former wreath (a grid with the
   phrase inside) split the line into a column of single words once the text reveal broke it into lines. */
body .case-recognition{position:static;display:block;width:auto;min-height:0;box-sizing:border-box;margin:clamp(14px,1.6vw,22px) 0 0;padding:0;text-align:left;font-size:clamp(14px,1.05vw,17px);line-height:1.45;color:var(--ink);max-width:30em}
body .case-recognition>img{display:none}
body .recognition-item>div{width:62%;min-width:0}

/* Authored type stays upright at rest, and gains weight towards screen centre. */
body .type-band{position:relative;border:0;background:none}
body .type-band-word,body .type-band-word.is-outline{color:color-mix(in srgb,var(--ink) 22%,var(--paper));padding-inline:.22em}
body .type-band-ink{position:absolute;inset:0;padding-block:inherit;box-sizing:border-box;overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent)}
body .type-band-ink .type-band-word{color:var(--ink)}
body .type-band-dot{display:none}

body .explore-practice.is-focus .ep-aside{border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body .explore-practice.is-focus .ep-logo{left:50%;top:50%;max-width:80%;object-position:center;transform:translate(-50%,-50%) translateY(10px)}
body .explore-practice.is-focus .ep-logo.is-on{transform:translate(-50%,-50%)}
body .explore-practice.is-focus .ep-count{display:none}
body #explore-practice-title{font-size:clamp(36px,4vw,70px);min-width:0;overflow-wrap:normal}
body #explore-practice-title .text-mask{max-width:100%;overflow:visible}
body #explore-practice-title .text-mask>span{white-space:normal;overflow-wrap:normal}

.agency-awards{margin-block:clamp(48px,6vw,96px);min-width:0}
.agency-awards-window{overflow:hidden;max-width:100%}
body .agency-awards .agency-recognition{display:flex;gap:24px;margin:0;width:max-content;max-width:none;overflow:visible;padding:0;cursor:default}
.agency-awards-set{display:flex;gap:24px;flex:none}
body .agency-awards .recognition-item{width:clamp(300px,38vw,520px);flex:none;min-height:240px;aspect-ratio:1.65}
.agency-awards-pause{display:block;margin:10px 0 0 auto;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;min-height:44px;padding:8px 0 8px 20px;cursor:pointer}
.agency-awards-pause:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
body .agency-award-intro{margin:28px 0 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
body .agency-award-intro h3{font-size:clamp(28px,3vw,44px)}
body .agency-award-intro p{font-size:18px;line-height:1.5;color:var(--muted);max-width:32em}
.agency-awards[data-keyboard-focus=true] .agency-awards-window{overflow:auto}
.agency-awards[data-keyboard-focus=true] .agency-awards-set[inert]{display:none}

@media(max-width:700px){
 body #main .work-card:nth-child(n) .work-caption h3{font-size:27px!important}
 body .agency-award-intro{grid-template-columns:1fr;gap:18px}
 body .agency-awards .recognition-item{width:300px}
 body .explore-practice.is-focus .ep-grid>article{border-top:0!important}
}
@media(prefers-reduced-motion:reduce){
 .agency-awards-window{overflow:auto}
 .agency-awards-set[inert],.agency-awards-pause{display:none}
 body .type-band-word,body .type-band-word.is-outline{color:var(--ink)}
 body .type-band-ink{display:none}
 body .type-band{background:none}
}

/* Gallery covers keep the authored artwork intact and keep the action mark above it. */
body[data-page="gallery"] .work-image{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:1.4!important;background:var(--surface)!important}
body[data-page="gallery"] .work-image>img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center}
body[data-page="gallery"] .work-indicator{z-index:4;color:var(--ink)!important;background:color-mix(in srgb,var(--paper) 82%,transparent)!important;border:0;backdrop-filter:blur(18px)}
body[data-page="gallery"] .work-indicator svg,body[data-page="gallery"] .work-open svg{stroke:currentColor!important;opacity:1!important}
body[data-page="gallery"] .work-open{z-index:4}

/* Contact dialog: a small Dintsen composition, with the same authored rules as the page. */
.contact-dialog{
  position:relative;
  isolation:isolate;
  width:min(760px,calc(100% - 40px));
  max-width:none;
  max-height:calc(100svh - 28px);
  padding:clamp(30px,4.6vw,56px);
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid var(--line);
  border-radius:30px 10px 30px 10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--paper) 94%,var(--blue) 6%),var(--paper) 56%,color-mix(in srgb,var(--paper) 91%,var(--blue) 9%));
  color:var(--ink);
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.contact-dialog::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 auto 0;
  height:8px;
  background:linear-gradient(90deg,var(--blue) 0 28%,transparent 74%);
  pointer-events:none;
}
.contact-dialog::backdrop{
  background:color-mix(in srgb,#080b11 76%,transparent);
  backdrop-filter:blur(16px) saturate(1.05);
  -webkit-backdrop-filter:blur(16px) saturate(1.05);
}
.contact-dialog .dialog-toolbar{
  position:relative;
  top:auto;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:44px;
  margin:0 0 clamp(24px,4vw,42px);
  pointer-events:auto;
}
.contact-dialog .contact-mark{display:block;width:31px;height:29px;color:var(--ink)}
[data-theme=dark] .contact-dialog .contact-mark{filter:invert(1)}
.contact-dialog .dialog-close{
  position:static;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font-size:28px;
  line-height:1;
  transition:background 180ms ease,color 180ms ease,border-color 180ms ease;
}
.contact-dialog .dialog-close:is(:hover,:focus-visible){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.contact-dialog .contact-heading{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:22em;
  margin:0 0 clamp(28px,4vw,46px);
  padding:0 0 18px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  line-height:1.45;
}
.contact-dialog .contact-heading p{margin:0;letter-spacing:-.01em}
.contact-dialog .contact-heading span{display:inline-block;margin-top:3px;color:var(--muted)}
.contact-dialog .contact-title-accent{color:var(--blue)}
.contact-dialog h2{
  max-width:10em;
  margin:0 0 clamp(24px,3.3vw,34px);
  font-size:clamp(48px,6.8vw,76px);
  letter-spacing:-.065em;
  line-height:.94;
}
.contact-dialog .contact-direct{
  min-height:60px;
  margin:0;
  padding:15px 18px 15px 20px;
  border:1px solid var(--ink);
  border-radius:16px 4px 16px 4px;
  background:var(--ink);
  color:var(--paper);
  font-size:16px;
  transition:background 180ms ease,color 180ms ease,border-color 180ms ease;
}
.contact-dialog .contact-direct svg{width:30px;height:30px;flex:none}
.contact-dialog .contact-direct:is(:hover,:focus-visible){border-color:var(--blue);background:var(--blue);color:var(--ink)}
.contact-dialog .contact-types{
  display:flex;
  gap:28px;
  margin:30px 0 0;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.contact-dialog .contact-types button{
  min-height:48px;
  padding:13px 0 10px;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  transition:color 180ms ease,border-color 180ms ease;
}
.contact-dialog .contact-types button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--blue)}
.contact-dialog form{margin-top:24px}
.contact-dialog label{margin:0 0 7px;color:var(--muted);font-size:13px;letter-spacing:.01em}
.contact-dialog input,.contact-dialog textarea{
  width:100%;
  margin:0 0 22px;
  padding:13px 0 11px;
  border:0;
  border-bottom:1px solid var(--input-rule);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-size:16px;
  line-height:1.45;
  resize:vertical;
}
.contact-dialog textarea{min-height:92px}
.contact-dialog input:focus-visible,.contact-dialog textarea:focus-visible{border-bottom-color:var(--blue);outline:2px solid var(--blue);outline-offset:5px}
.contact-dialog .submit-button{
  min-height:58px;
  margin-top:2px;
  padding:15px 18px 15px 20px;
  border:1px solid var(--blue);
  border-radius:14px 4px 14px 4px;
  background:var(--blue);
  color:var(--ink);
  font-size:16px;
  transition:background 180ms ease,color 180ms ease,border-color 180ms ease;
}
.contact-dialog .submit-button svg{width:28px;height:28px}
.contact-dialog .submit-button:is(:hover,:focus-visible){border-color:var(--ink);background:var(--ink);color:var(--paper)}
.contact-dialog :is(button,a,input,textarea):focus-visible{outline-color:var(--blue)}
@media(max-width:700px){
  .contact-dialog{width:calc(100% - 20px);max-height:calc(100svh - 20px);padding:24px 20px 28px;border-radius:24px 8px 24px 8px}
  .contact-dialog .dialog-toolbar{margin-bottom:24px}
  .contact-dialog h2{font-size:clamp(46px,13vw,64px)}
  .contact-dialog .contact-direct{min-height:56px;padding-inline:16px}
  .contact-dialog .contact-types{gap:20px;margin-top:24px}
}
@media(prefers-reduced-motion:reduce){
  .contact-dialog[open]{animation:none}
  .contact-dialog .dialog-close,.contact-dialog .contact-direct,.contact-dialog .contact-types button,.contact-dialog .submit-button{transition:none}
}

/* v58: separate the genuine screen edge from its presentation surface. */
body .work-image .cover-art--framed{border:1px solid #676a70;border-radius:clamp(8px,1.2vw,14px);box-sizing:border-box}
body .work-image .cover-art--collection{background:#0f1218;container-type:inline-size}
body .work-image .cover-screen-pair{position:absolute;inset:8% 5.5%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.2fr);gap:3%;align-items:center}
body .work-image .cover-screen{width:100%;overflow:hidden;border:1px solid #73767c;border-radius:clamp(5px,1.2cqw,12px);box-sizing:border-box;background:#15181e}
body .work-image .cover-screen>img{position:static!important;display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;transform:none!important;border-radius:0!important}
body .work-image .cover-brand{position:absolute;top:6%;left:5.5%;width:29%;aspect-ratio:144/40}
body .work-image .cover-brand>img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
/* Match the backing surface to Toolkit artwork so rounded antialiasing cannot reveal a pale seam. */
body #main .work-image:has(>.cover-art[data-cover=toolkit]){--preview-bg:#06090f}
body .work-image .cover-art[data-cover=toolkit]{background:#06090f}
body .work-image .cover-art[data-cover=toolkit] .cover-screen-pair{inset:27% 5.5% 7%;grid-template-columns:minmax(0,1fr) minmax(0,.2fr);align-items:center}
body .work-image .cover-art[data-cover=toolkit] .cover-screen--phone{align-self:end}

/* v58: one portrait handoff, aligned orbit and shared current previews. */
body .hero-frame{border-radius:22px}
@media(max-width:700px){body .hero-frame{border-radius:18px}}
body .about-head-art canvas,body .about-head-art .head-poster{transition:none}
body .about-head-art.head-ready .head-fallback{visibility:hidden;opacity:0;transition:none}
body .hero-orbit-center{inset:0;display:grid;place-items:center}
body .hero-explore .hero-orbit-center svg{position:static;display:block;overflow:visible}
body .hero-explore .hero-orbit-ring{position:absolute;inset:0;max-width:none}
body .portfolio-loader .loader-orbit{position:absolute;left:var(--gutter);bottom:6%;width:78px;height:78px;color:var(--hero-ink);opacity:.8;pointer-events:none}
body .loader-orbit svg{display:block;width:100%;height:100%}
body .portfolio-loader .loader-orbit-svg{overflow:visible}
body .portfolio-loader.loader-ready .loader-orbit{opacity:0;transition:opacity 180ms ease-out}
body .work-image .cover-brand>img{filter:brightness(0) invert(1)!important}
body .agency-projects .work-image{position:relative;width:100%;aspect-ratio:1.4;height:auto;overflow:hidden;border-radius:22px;background:var(--preview-bg,#e8ebf1)!important}
body .agency-focus .agency-projects.horizontal-track .work-image{height:clamp(200px,46svh,530px);max-height:calc(100svh - 330px);aspect-ratio:auto}
body .agency-projects .work-image img{aspect-ratio:auto!important;max-height:none!important}
body .agency-projects .work-image>img{position:static!important;display:block;width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important}
body .year-card-preview .work-image{position:relative;display:block;width:100%;aspect-ratio:1.4;height:auto;overflow:hidden;border-radius:6px;background:var(--preview-bg,#e8ebf1)!important}
body .year-card-preview .work-image>img{position:static!important;width:100%!important;height:auto!important;object-fit:contain!important;transform:none!important}
@media(prefers-reduced-motion:reduce){body .agency-focus .agency-projects.horizontal-track .work-image{height:auto;max-height:none;aspect-ratio:1.4}body .portfolio-loader.loader-ready .loader-orbit{transition:none}}

/* Keep the scroll action clear of the fixed sound/theme controls. */
body .hero-explore.hero-orbit{margin-bottom:48px}

body .experience-card .work-image{position:relative;width:100%;height:auto;aspect-ratio:1.4;overflow:hidden;border-radius:12px;background:var(--preview-bg,#e8ebf1)!important}

/* v59: current covers on every industry surface; preserve their actual colour. */
body .design-principles .chapter-media{position:relative}
body .design-principles .chapter-media .work-image,body .design-principles .chapter-related .work-image{position:absolute!important;inset:0;width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:auto!important;border-radius:inherit!important;overflow:hidden;background:var(--preview-bg,#e8ebf1)!important}
body .design-principles .industry-panel:nth-child(n) .chapter-related{aspect-ratio:1.4!important}
body .design-principles .chapter-media .work-image>img,body .design-principles .chapter-related .work-image>img{position:static!important;display:block;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:inherit!important;transform:none!important}
body .selected-gallery.gal-focus .horizontal-track>.work-card{opacity:1!important;will-change:transform}

body .practice-grid article{padding-left:0;border-block:0}
body .practice-grid article+article{border-top:1px solid var(--line)}
body .practice-grid article:last-child{border-bottom:0}
body .practice-grid article::before{content:none;display:none}

body .recognition-grid[data-rail=continuous]{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior-x:contain;padding:6px 0 18px;cursor:grab}
body .recognition-grid[data-rail=continuous] .recognition-set{display:flex;flex:none;gap:24px;width:max-content;align-items:center}
body .recognition-grid[data-rail=continuous] .recognition-item{flex:0 0 clamp(280px,42vw,440px);width:clamp(280px,42vw,440px);margin:0;scroll-snap-align:none}
body .recognition-grid[data-rail=continuous].is-dragging{cursor:grabbing;user-select:none}
body .recognition-grid[data-rail=continuous].is-reduced .recognition-copy{display:none}
@media(prefers-reduced-motion:reduce){body .recognition-grid[data-rail=continuous] .recognition-copy{display:none}}

/* Complete covers and credits fit the pinned chapter, including short desktops. */
body .selected-gallery .chapter-heading{flex:none}
body .selected-gallery .horizontal-track>.work-card{padding:0!important;margin:0!important}
body .selected-gallery .horizontal-track>.work-card .work-image{margin:0!important}
@media(prefers-reduced-motion:no-preference) and (min-height:621px){
 body .selected-gallery .horizontal-track>.work-card,body .agency-projects.horizontal-track>a:nth-child(n){flex-basis:var(--rail-card-width)!important;width:var(--rail-card-width)!important}
 body .agency-focus .agency-projects.horizontal-track>a{height:auto;justify-content:start}
 body .agency-focus .agency-projects.horizontal-track .work-image{height:auto;max-height:none;aspect-ratio:1.4;flex:none}
}
body .agency-projects .work-image .cover-art--bleed>img{object-fit:contain!important;transform:none!important}
body .year-card-preview .work-image,body .year-card-preview .work-image .cover-art,body .year-card-preview .cover-screen{border-radius:3px!important}
body .recognition-brand{height:16px;max-width:116px}
body .footer-wordmark .wordmark-registration{margin:.8em 0 0 -.28em}

body .work-image .cover-art[data-cover=oisy]{background:#e8ebf1}
/* Keep the author credit in the hero's open central area, away from foil highlights. */
.hero-copy .hero-person { display:block; margin-top:18px; font-size:14px; line-height:1.5; }
.hero-bottom .hero-explore { margin-left:auto; }

/* Complete artwork stays contained; only authored colour-field covers use the ambient backdrop. */
body .work-image .cover-art--bleed[data-cover]{background:var(--ambient,#ebeef4) center/cover no-repeat}
body .work-image .cover-art--bleed[data-cover]>img{object-fit:contain!important;object-position:50% 50%!important;transform:none!important}
body .work-image .cover-art[data-cover=josh]{--ambient:url(../images/covers-v59/ambient-josh.webp)}
body .work-image .cover-art[data-cover=phish]{--ambient:url(../images/covers-v59/ambient-phish.webp)}
/* Original artwork meets the frame at its native ratio; no blurred duplicate at the edges. */
body #main .work-card:nth-child(n):has(.cover-art:is([data-cover=gorman],[data-cover=vircity],[data-cover=terminal])) .work-image{aspect-ratio:1512/1120}
body #main .work-card:nth-child(n):has(.cover-art[data-cover=mobilhub]) .work-image{aspect-ratio:1680/1553}
body .work-image .cover-art--bleed:is([data-cover=gorman],[data-cover=vircity],[data-cover=terminal],[data-cover=mobilhub]){background:#ebeef4}


/* Preloader on small and short screens: the hero bubble sits bottom-right, so Skip moves to the bottom centre,
   the orbit mark shrinks, and word/status keep clear of both. */
@media(max-width:700px){
 body .portfolio-loader .loader-orbit{width:56px;height:56px;left:max(var(--gutter),16px);bottom:calc(5% + env(safe-area-inset-bottom,0px))}
 body .portfolio-loader .loader-skip{left:50%;right:auto;transform:translateX(-50%);bottom:calc(4% + env(safe-area-inset-bottom,0px));white-space:nowrap}
 body .portfolio-loader .loader-status{left:max(var(--gutter),16px);right:auto;transform:none;text-align:left;bottom:calc(14% + env(safe-area-inset-bottom,0px))}
 body .portfolio-loader .loader-word{left:max(var(--gutter),16px);transform:none;bottom:calc(19% + env(safe-area-inset-bottom,0px));max-width:calc(100% - 32px)}
 body .portfolio-loader.loader-ready .loader-word{transform:none}
}
@media(max-height:520px) and (orientation:landscape){
 body .portfolio-loader .loader-orbit{width:48px;height:48px;bottom:5%}
 body .portfolio-loader .loader-word{bottom:24%;font-size:clamp(28px,11vh,64px)}
 body .portfolio-loader .loader-status{bottom:13%}
 body .portfolio-loader .loader-skip{bottom:4%}
}

/* Covers are never clipped by their card: an image whose own ratio is taller than the card shrinks to fit (object-fit:contain
   letterboxes it on the card's soft backing). The long REMCodes page capture is the one deliberate top-of-page crop. */
body .work-card:not([href*="rem-codes"]) .work-image>img,body .chapter-card .chapter-media .work-image>img{max-height:100%;max-width:100%;margin-inline:auto}

/* v61: captions sit inside the card as a white glass pill; mobile cards larger */
body .experience-card{position:absolute;overflow:hidden!important;border-radius:14px}
body .experience-card img{border-radius:0;height:100%!important;object-fit:cover}
body .experience-card figcaption{position:absolute;left:10px;right:10px;bottom:10px;margin:0;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.72);color:#1c1f25;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);font-size:13px;line-height:1.2;text-align:center}
@media (max-width:700px){body .experience-card{width:min(66vw,280px)!important;height:auto!important}} /* v71: a cover is never cropped into a portrait card */

/* ===== v61: no hairlines, one radius scale, glass plates, brand blue ===== */
:root{--r-card:20px;--r-inner:12px;--r-pill:999px;--brand:#52555b;--plate:rgba(255,255,255,.66);--plate-hover:rgba(255,255,255,.88);--plate-blur:blur(18px) saturate(1.45)}
:root[data-theme=dark]{--brand:#999ca2;--plate:rgba(81,84,90,.26);--plate-hover:rgba(105,108,114,.38)}
/* dividers -> spacing */
.years-more{border-bottom:0!important;padding:14px 26px!important;border-radius:var(--r-pill);background:var(--plate);backdrop-filter:var(--plate-blur);-webkit-backdrop-filter:var(--plate-blur)}
.years-more:hover{background:var(--plate-hover)}
.years-chapter.is-static .year-panel,.years-fallback a,body .practice-grid article,body .practice-grid article:last-child,body .practice-grid article+article,body .explore-practice-notes article,body .explore-practice.is-focus .ep-grid>article,body[data-page=approach] .svc-stack .svc-cta,.process-tab,.portfolio-case .project-info,.case-next,[data-page=approach] .service-rows>a,.career-row,.cycle-panel li,.events-item,.cs-ledger,.cs-ledger>div,.company-story .cs-ledger>div[data-in],.cs-cases,.cs-notes,.cs-next,.case-role,.project-info .next-project{border-top:0!important;border-bottom:0!important}
.cs-cases a::before,.svc-cta::after{display:none}
/* long list rows -> glass plates */
.cs-cases{gap:10px}
.cs-cases a{border:0!important;padding:10px 22px!important;border-radius:var(--r-card);background:var(--plate);backdrop-filter:var(--plate-blur);-webkit-backdrop-filter:var(--plate-blur);transition:background .35s}
.cs-cases a:hover{background:var(--plate-hover)}
.cs-cases a:hover .ui-arrow{color:var(--brand)}
.cs-ledger>div{gap:0}
.cs-ledger dd,.cs-ledger dt span[data-count]{color:inherit}
.cs-ledger dt span[data-count]{color:var(--brand)}
/* one radius scale */
.cs-frame,body[data-page=about] .agency-projects img,.work-image,.project-image,.case-cover-art,.chapter-media,.chapter-related{border-radius:var(--r-card)!important}
body .experience-card{border-radius:var(--r-card)}
.cs-frame img,.work-image>img{border-radius:var(--r-inner)}
/* brand blue accents */
a:hover,.next-project:hover,.cs-product:hover figcaption{color:var(--brand)}
::selection{background:var(--brand);color:#fff}
/* weaker cursor light on light theme */
html:not([data-theme=dark]) .cursor-light::before,.cursor-light[data-surface=light]::before{background:radial-gradient(closest-side,rgb(128 128 128 / .12),rgb(133 133 133 / .06) 42%,rgb(184 184 184 / 0) 100%)!important}

/* v61b: year ticks removed; CTAs as glass pills; services as cards on small screens */
.years-ticks{display:none!important}
.svc-cta,body[data-page=approach] .svc-stack .svc-cta,body[data-page=approach] .svc-show .svc-cta,a.footer-contact,.footer-top .footer-contact{display:inline-flex!important;align-items:center;gap:14px;border:0!important;background:var(--plate)!important;backdrop-filter:var(--plate-blur);-webkit-backdrop-filter:var(--plate-blur);border-radius:var(--r-pill);padding:0 26px!important;min-height:52px;color:var(--ink);text-decoration:none;transition:background .3s,color .3s}
.svc-cta:hover,a.footer-contact:hover{background:var(--plate-hover)!important;color:var(--brand)}
body[data-page=approach] .svc-show .svc-cta{background-image:none!important}
@media(max-width:820px){
 body[data-page=approach] .svc-show.is-static .service-rows>a{display:block;margin:0 0 16px;padding:26px 22px 22px;border-radius:var(--r-card);background:var(--plate);backdrop-filter:var(--plate-blur);-webkit-backdrop-filter:var(--plate-blur);overflow:hidden}
 body[data-page=approach] .svc-show.is-static .service-rows>a>.service-preview{position:relative!important;display:block;width:calc(100% + 44px)!important;max-width:none!important;height:clamp(300px,84vw,420px)!important;margin:6px -22px 0!important;transform:none!important;background:none!important}
}

/* v61c: practice cards — typographic hierarchy instead of loose paragraphs */
body .practice-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px}
body .practice-grid article{padding:clamp(26px,3vw,44px)!important;border-radius:var(--r-card)!important;background:var(--plate)!important;backdrop-filter:var(--plate-blur);-webkit-backdrop-filter:var(--plate-blur);display:grid;gap:clamp(14px,1.6vw,22px);min-height:0}
body .practice-grid article::before,body .practice-grid article::after{content:none!important;display:none!important}
body .practice-grid article h3{margin:0;font-size:clamp(30px,3.4vw,54px);line-height:1;letter-spacing:-.05em;font-weight:inherit;color:var(--ink);text-wrap:balance}
body .practice-grid article h3::first-line{color:var(--brand)}
body .practice-grid article p{margin:0;max-width:30em;font-size:clamp(17px,1.35vw,21px);line-height:1.5;letter-spacing:-.012em;color:var(--muted);text-wrap:pretty;hyphens:manual}
body .practice-detail>h2{text-wrap:balance}
body .practice-grid{min-width:0}body .practice-grid article{box-sizing:border-box;min-width:0;max-width:100%}

/* v62: project portal — one continuous flight from card to cover */
:root .project-portal.pt-portal,:root[data-theme] .project-portal.pt-portal{position:fixed;z-index:180;overflow:hidden;pointer-events:none;background:transparent!important;contain:layout paint;transform:translateZ(0)}
.pt-portal .pt-plate{position:absolute;inset:0}
.pt-portal .pt-image{position:absolute;display:block;max-width:none;max-height:none;object-fit:fill;border-radius:0;filter:none}
html.pt-leaving body>:is(main,footer){opacity:0;transition:opacity .24s cubic-bezier(.4,0,.2,1)}
html.pt-arriving body>:is(main,footer){opacity:0}
html.pt-revealing body>:is(main,footer){opacity:1;transition:opacity .8s cubic-bezier(.2,.7,.2,1)}
/* The card title flies with the artwork (js/portfolio-prepaint.js): the case h1's letters wait until it lands. */
html.pt-title-flight .case-cover h1 .letter-mask > span{animation-play-state:paused}
.pt-title{font-kerning:normal;-webkit-font-smoothing:antialiased}

/* v62: home services — one sticky glass stage that rebuilds per service on phones; larger stage on desktop */
body[data-page=home] .service-morph{height:min(74svh,700px);top:max(90px,calc(50svh - min(37svh,350px)))}
@media(max-width:700px){
 body[data-page=home] .service-rows.has-service-morph{display:flex!important;flex-direction:column}
 body[data-page=home] .service-rows.has-service-morph>.service-morph{order:-1;position:sticky!important;top:64px;left:auto;width:calc(100% + 2*var(--gutter,22px));margin:0 calc(-1*var(--gutter,22px));height:min(52svh,440px);z-index:1}
 body[data-page=home] .has-service-morph>a{position:relative;z-index:2;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;min-height:50svh!important;padding:3svh 0 14svh!important;opacity:var(--svc-fade,1);transition:none}
 body[data-page=home] .has-service-morph>a>*{position:static!important;grid-area:auto!important;margin:0!important;transform:none!important}
 body[data-page=home] .has-service-morph>a h3{order:0;font-size:clamp(36px,10vw,52px)!important;line-height:.98;letter-spacing:-.05em;text-wrap:balance}
 body[data-page=home] .has-service-morph>a>p:not(.service-description){order:1;font-size:13px;letter-spacing:.01em;color:var(--brand)}
 body[data-page=home] .has-service-morph>a .service-description{order:2;font-size:17px;line-height:1.45;color:var(--muted);max-width:26em}
 body[data-page=home] .has-service-morph>a>svg{display:none}
 body[data-page=home] .has-service-morph>a:last-of-type{min-height:38svh!important}
}

/* v62: About intro on tablets — the orb leads, the statement reads at a sane measure below it */
@media (min-width:701px) and (max-width:1024px){
 body #about .about-intro{display:flex!important;flex-direction:column;align-items:stretch;gap:28px}
 body #about .about-intro>.about-profile{order:-1;width:100%!important;max-width:none}
 body #about .about-intro .about-art{height:min(78vw,600px)!important}
 body #about .about-intro>p[data-scroll-fill]{font-size:clamp(36px,6.2vw,58px)!important;max-width:15em}
 body #about .about-intro .about-support{max-width:30em!important;font-size:16px;margin:0}
}

/* v62: no decorative counters ("01 — 07", "01 / 05") */
.gal-count,.agency-count,.process-count,.career-detail .cr-num{display:none!important}

/* v62: one call-to-action language — every underlined text button becomes the same glass pill */
.text-button,a.text-button,button.text-button{display:inline-flex!important;align-items:center;gap:14px;border:0!important;border-bottom:0!important;background:var(--plate)!important;background-image:none!important;backdrop-filter:var(--plate-blur);-webkit-backdrop-filter:var(--plate-blur);border-radius:var(--r-pill)!important;padding:0 26px!important;min-height:52px;color:var(--ink);text-decoration:none;transition:background .3s,color .3s}
.text-button::after,.text-button::before{display:none!important}
.text-button:hover{background:var(--plate-hover)!important;color:var(--brand)}
/* card arrow badges only answer a hover, they are not decoration */
.work-image .work-indicator{opacity:0!important;transform:scale(.8)!important}
@media(hover:hover) and (pointer:fine){.work-card:hover .work-indicator,.work-card:focus-visible .work-indicator{opacity:1!important;transform:none!important}}
/* the fixed corner controls never sit on top of the footer's last line */
@media(max-width:700px){body .portfolio-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}}
/* case cover copy on phones: one column, the scope reads as a line, not a word ladder */
@media(max-width:700px){body.portfolio-case .case-cover-copy{grid-template-columns:minmax(0,1fr)!important}body.portfolio-case .case-cover .case-role.cs-role{grid-column:1/-1!important;max-width:none!important;width:auto!important;flex-direction:row!important;flex-wrap:wrap;gap:4px 14px!important}}
/* the hero lens + "scroll to work" ring always clears the fixed corner controls */
body .hero-explore.hero-orbit{margin-bottom:clamp(92px,13svh,136px)!important}

/* v62 fix: revealed headings must actually reveal — the pending state (0,2,1) used to outrank the visible state */
:is(h1,h2,h3,.contact-heading).tm-pending.tm-visible .tm-i,.tm-pending.tm-visible .tm-i{transform:none;opacity:1;filter:none}
/* desktop: each service gets enough scroll for its shape to hold while it is read */
@media(min-width:701px){body[data-page=home] .has-service-morph>a{min-height:58svh!important;align-content:center}}

/* v63: non-glass scenes — kinetic type ribbon, cover ring, ceramic tile field */
.kit-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1)}
.kit-canvas.is-ready{opacity:1}
body .type-band.has-ribbon{height:clamp(300px,40vw,600px);padding:0;margin:clamp(30px,5vw,80px) 0;overflow:visible;overflow-x:clip}
.type-band.has-ribbon .type-band-track,.type-band.has-ribbon .type-band-ink{opacity:0;visibility:hidden}
.type-ribbon{position:absolute;inset:0 calc(-1*var(--gutter,0px));pointer-events:none}
body[data-page=work] #projects>.section-heading.has-cover-ring{position:relative;min-height:clamp(440px,64svh,740px);align-items:center}
body[data-page=work] #projects>.section-heading.has-cover-ring>*:not(.cover-ring){position:relative;z-index:1}
.cover-ring{position:absolute;top:-6%;bottom:-6%;right:calc(-1*var(--gutter,24px));width:min(64%,980px);pointer-events:none;z-index:0}
@media(max-width:700px){
 body[data-page=work] #projects>.section-heading.has-cover-ring{display:flex!important;flex-direction:column;align-items:flex-start;min-height:0}
 .cover-ring{position:relative;inset:auto;order:1;width:calc(100% + 2*var(--gutter,22px));margin:-6px calc(-1*var(--gutter,22px)) 0;height:min(33svh,300px)}
 body[data-page=work] #projects>.section-heading.has-cover-ring>p{order:2;margin-top:4px}
}
body[data-page=approach] main>.page-opening.has-tile-field{position:relative;overflow:clip;min-height:min(100svh,980px)}
body[data-page=approach] main>.page-opening.has-tile-field>*:not(.tile-field){position:relative;z-index:1}
.tile-field{position:absolute;inset:0;pointer-events:none;z-index:0;mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 28%,#000 60%,#000 86%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 28%,#000 60%,#000 86%,transparent)}
/* the ring owns the right side; the lede steps under the title so no text sits on the covers */
@media(min-width:701px){
 body[data-page=work] #projects>.section-heading.has-cover-ring{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-content:center;justify-items:start}
 body[data-page=work] #projects>.section-heading.has-cover-ring>p{grid-column:1!important;justify-self:start!important;text-align:left!important;margin:28px 0 0!important;max-width:24em}
}
/* 22 Oct (CLS 0.13 on /work without the world): the ring's layout used to arrive with the ring, a second or more after
   the first paint, and pushed the title 144 px and the sheet 288 px down. A room that does not run its world shows the
   ring (the gate decides in the head: html.room-live or not), so the heading takes the ring's layout from the first paint. */
html[data-room=work]:not(.room-live):not([data-space-why=webgl]) body[data-page=work] #projects>.section-heading{position:relative;min-height:clamp(440px,64svh,740px);align-items:center}
@media(min-width:701px){
 html[data-room=work]:not(.room-live):not([data-space-why=webgl]) body[data-page=work] #projects>.section-heading{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-content:center;justify-items:start}
 html[data-room=work]:not(.room-live):not([data-space-why=webgl]) body[data-page=work] #projects>.section-heading>p{grid-column:1!important;justify-self:start!important;text-align:left!important;margin:28px 0 0!important;max-width:24em}
 /* grid-2026.css (E12) hangs the note on column 10 at the top, which is the ring's side: with the ring the note steps
    under the title (the v54 rule above), so no text sits on the turning covers; three ids outrank E12's two */
 html[data-room=work]:not(.room-live):not([data-space-why=webgl]) body[data-page=work] #projects>.section-heading:not(#_g):not(#_r)>p,html body[data-page=work] #projects>.section-heading.has-cover-ring:not(#_g):not(#_r)>p{grid-column:1/span 5!important;grid-row:2!important;align-self:start!important;justify-self:start!important;text-align:left!important;margin:28px 0 0!important;max-width:24em!important}
}
@media(max-width:700px){
 html[data-room=work]:not(.room-live):not([data-space-why=webgl]) body[data-page=work] #projects>.section-heading{display:flex!important;flex-direction:column;align-items:flex-start;min-height:0}
 html[data-room=work]:not(.room-live):not([data-space-why=webgl]) body[data-page=work] #projects>.section-heading>p{order:2;margin-top:4px}
  /* the ring's place is held until js/3d/cover-ring.js appends its host, which takes the same box */
 html[data-room=work]:not(.room-live):not([data-space-why=webgl]) body[data-page=work] #projects>.section-heading:not(:has(>.cover-ring))::after{content:'';display:block;order:1;width:100%;height:min(33svh,300px);margin-top:-6px}
}
/* the Approach lede sits on the tile field as a glass plate, so it stays legible over the relief */
body[data-page=approach] main>.page-opening.has-tile-field>p{background:var(--plate);backdrop-filter:var(--plate-blur);-webkit-backdrop-filter:var(--plate-blur);padding:18px 22px;border-radius:var(--r-card)}
/* the live project count stays for screen readers only — on screen it was a counter tucked under the corner controls */
body .work-total{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
@media(max-width:700px){body[data-page=approach] main>.page-opening p br{display:none}}

/* v63: career rail — the open panel carries the work made there */
.career-detail.is-rail .cr-work{position:absolute;right:clamp(20px,2.4vw,34px);top:clamp(20px,2.4vw,30px);display:flex;gap:12px;align-items:flex-start;opacity:clamp(0,calc((var(--w) - .55)*3),1);pointer-events:none}
.career-detail.is-rail .cr-panel.is-open .cr-work{pointer-events:auto}
.cr-shot{display:block;width:clamp(110px,10.5vw,200px);color:var(--ink);text-decoration:none;transform:translateY(calc(var(--k)*18px));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cr-shot:hover{transform:translateY(calc(var(--k)*18px - 6px))}
.cr-shot .chapter-media{display:block!important;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;max-width:none!important;aspect-ratio:1.4;border-radius:12px;overflow:hidden;background:transparent!important;transform:none!important;opacity:1!important;clip-path:none!important}
.cr-shot img{display:block!important;position:static!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:12px;transform:none!important}
.cr-shot-name{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.cr-shot:hover .cr-shot-name{color:var(--brand)}
.career-detail.is-rail.is-static .cr-work{position:static;opacity:1;margin-top:18px;pointer-events:auto}
@media(max-width:900px){.career-detail.is-rail:not(.is-static) .cr-work{display:none}}
/* Gallery opening: a corridor of the six covers instead of a fourth glass orb */
.explore-tunnel{position:relative}
.cover-tunnel{position:absolute;inset:-10% -8%;pointer-events:none}
.explore-tunnel .scene-fallback{position:absolute;inset:0;display:none}
.explore-tunnel .scene-fallback img{width:100%;height:100%;object-fit:contain}
html:not([data-theme=dark]) .explore-tunnel:not(.has-tunnel) .scene-fallback[data-page-theme=light],html[data-theme=dark] .explore-tunnel:not(.has-tunnel) .scene-fallback[data-page-theme=dark]{display:block}
.explore-tunnel.has-tunnel .scene-fallback{display:none!important}
.explore-orb.explore-tunnel{height:clamp(380px,48vw,720px)}

/* v63: About intro ≤700px — always a column (641–700px fell into a flex row and squeezed the orb into an 80px strip) */
@media (max-width:700.98px){
 body #about .about-intro{display:flex!important;flex-direction:column!important;align-items:stretch;gap:12px}
 body #about .about-intro>.about-profile{order:-1;width:100%!important;max-width:none}
}
/* the orb now draws the page field itself: soften the canvas edge so it never reads as a rectangle */
body #about .about-art canvas{-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent);mask-image:radial-gradient(closest-side,#000 82%,transparent)}

/* v63: every call to action is the same object as the corner controls — a frosted glass squircle with the
 * hairline light rim and the springy hover. One recipe, both themes. */
:root{--gc-a:#f9f9f9b0;--gc-b:#e6e6e670;--gc-c:#f9f9f99a;--gc-ink:#1c1f25;--gc-hover-a:#ffffffd8;
 --gc-rim:linear-gradient(140deg,#fff,rgb(255 255 255 / .4) 30%,rgb(144 144 144 / .2) 60%,rgb(255 255 255 / .8));
 --gc-shadow:none;--gc-radius:19px;--gc-blur:blur(14px) saturate(1.2)}
:root[data-theme=dark]{--gc-a:#5353535c;--gc-b:#3030303a;--gc-c:#c7c7c738;--gc-ink:#f3f6fc;--gc-hover-a:#69696970;
 --gc-rim:linear-gradient(140deg,rgb(255 255 255 / .6),rgb(255 255 255 / .14) 26%,rgb(255 255 255 / 0) 50%,rgb(255 255 255 / .3));
 --gc-shadow:none}
html body :is(.text-button,a.footer-contact,.footer-top .footer-contact,.svc-cta,.years-more,.oisy-live-link,.osbb-source-link,.back-top,.case-back){
 position:relative;isolation:isolate;display:inline-flex!important;align-items:center;gap:12px;
 border:0!important;border-radius:var(--gc-radius)!important;
 background:linear-gradient(128deg,var(--gc-a),var(--gc-b) 55%,var(--gc-c))!important;
 backdrop-filter:var(--gc-blur)!important;-webkit-backdrop-filter:var(--gc-blur)!important;
 box-shadow:var(--gc-shadow)!important;color:var(--gc-ink)!important;text-decoration:none!important;
 transition:transform .6s cubic-bezier(.16,1,.3,1),background .25s ease-out,color .25s ease-out!important}
html body :is(.text-button,a.footer-contact,.footer-top .footer-contact,.svc-cta,.years-more,.oisy-live-link,.osbb-source-link,.back-top,.case-back)::before{
 content:''!important;display:block!important;position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
 background:var(--gc-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html body :is(.back-top,.case-back){min-height:42px;padding:0 18px!important;gap:6px;--gc-radius:15px;font-size:14px;width:max-content;justify-self:start;align-self:start}
html body :is(.text-button,a.footer-contact,.footer-top .footer-contact,.svc-cta,.years-more,.oisy-live-link,.osbb-source-link,.back-top,.case-back):focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
 html body :is(.text-button,a.footer-contact,.footer-top .footer-contact,.svc-cta,.years-more,.oisy-live-link,.osbb-source-link,.back-top,.case-back):hover{
  transform:scale(1.045);color:var(--gc-ink)!important;background:linear-gradient(128deg,var(--gc-hover-a),var(--gc-b) 55%,var(--gc-c))!important}
 html body a.footer-contact:hover,html body .footer-top .footer-contact:hover{transform:scale(1.025)}
}
html body :is(.text-button,a.footer-contact,.svc-cta,.years-more,.oisy-live-link,.back-top,.case-back):active{transform:scale(.97);transition-duration:.12s!important}
@media (prefers-reduced-motion:reduce){html body :is(.text-button,a.footer-contact,.svc-cta,.years-more,.oisy-live-link,.osbb-source-link,.back-top,.case-back){transition:background .2s,color .2s!important}html body :is(.text-button,a.footer-contact,.svc-cta,.years-more,.oisy-live-link,.back-top,.case-back):is(:hover,:active){transform:none}}
html body[data-page=approach] :is(.svc-stack,.svc-show) .svc-cta{background:linear-gradient(128deg,var(--gc-a),var(--gc-b) 55%,var(--gc-c))!important;background-image:linear-gradient(128deg,var(--gc-a),var(--gc-b) 55%,var(--gc-c))!important;border-radius:var(--gc-radius)!important}
@media (hover:hover) and (pointer:fine){html body[data-page=approach] :is(.svc-stack,.svc-show) .svc-cta:hover{background-image:linear-gradient(128deg,var(--gc-hover-a),var(--gc-b) 55%,var(--gc-c))!important}}

/* v63b: air — a glass control is a squircle around its words, not a tight label */
html body :is(.text-button,.svc-cta,.years-more,.oisy-live-link,.osbb-source-link){min-height:58px!important;padding:0 30px!important;gap:14px}
html body[data-page=approach] :is(.svc-stack,.svc-show) .svc-cta{min-height:54px!important;padding:0 26px!important}
html body :is(a.footer-contact,.footer-top .footer-contact){min-height:0!important;padding:.34em .62em .38em .66em!important;gap:.32em;--gc-radius:.6em;line-height:1}

/* v63: corner controls sit on one baseline with one gap at every width (701–1024px the screen toggle dropped 6px) */
@media (min-width:700.98px) and (max-width:1024px){
 html body .site-header :is(.os-toggle,.sound-toggle,.theme-toggle){top:auto!important;bottom:20px!important;width:48px!important;height:48px!important}
 html body .site-header > .theme-toggle{right:20px!important}
 html body .site-header .sound-toggle{right:80px!important}
 html body .site-header .os-toggle{right:140px!important}
}
html body .oisy-live-link{font-size:16px!important}
/* dialog actions keep their solid weight (they are the one primary action) but share the control squircle */
html body .contact-dialog :is(.contact-direct,.submit-button){border-radius:var(--gc-radius)!important}

/* Keep tunnel overscan within the page without changing its scene bounds. */
main:has(.gallery-opening){overflow-x:clip}

/* Owner asset corrections: native artwork ratios, no duplicate ambient fields. */
body #main .work-card:has(.cover-art[data-cover=josh]) .work-image{aspect-ratio:1920/1080!important}
body #main .work-card:has(.cover-art[data-cover=phish]) .work-image{aspect-ratio:1680/1120!important}
body .work-image .cover-art:is([data-cover=josh],[data-cover=phish]){background:none!important}
body #main .case-source-gallery:has(#sonic-behance-title) .case-source-media>img,body #main .case-source-gallery:has(#sonic-behance-title) .case-source-media>video[data-case-film]{max-height:none!important;height:auto!important}
body #main video[data-case-film]{display:block;max-width:100%;height:auto!important;min-height:0!important;aspect-ratio:auto!important;object-fit:contain}
body #main video[data-case-film]:focus-visible{outline:2px solid var(--ink,#15181e);outline-offset:4px}
body #main .tco-screens{gap:clamp(28px,5vw,64px);margin-top:48px}
body #main .tco-screens img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:12px}
html:not([data-theme=dark]) .tco-screens [data-tco-theme=dark],html[data-theme=dark] .tco-screens [data-tco-theme=light]{display:none!important}

/* Owner 2026-10-08: fill media surfaces without added mats; retain native geometry. */
body.portfolio-case .cs-next .project-menu-link-img-next{aspect-ratio:auto!important;height:auto!important;width:100%!important;max-width:none!important;background:transparent!important;object-fit:contain!important}

body.portfolio-case #main .case-cover-art[data-source-mat]>img{aspect-ratio:auto!important;height:auto!important;max-height:none!important}
body.portfolio-case #main .case-cover-art[data-source-mat]{aspect-ratio:auto!important;height:auto!important;max-height:none!important;min-height:0!important}

body #main .work-card:has(img[src$="internet-identity-full.webp"]) .work-image{aspect-ratio:1124/698!important}

body #main .work-card:has(img[src$="puiton-full.webp"]) .work-image{aspect-ratio:1276/851!important}

body #main .work-card:has(img[src$="galois-full.webp"]) .work-image{aspect-ratio:1256/707!important}

body #main .work-card:has(img[src$="token2049-full.webp"]) .work-image{aspect-ratio:1256/707!important}

body #main .work-card:has(img[src$="ev-sentry-full.webp"]) .work-image{aspect-ratio:1256/687!important}

body #main .work-card:has(img[src$="konecta-deck-full.webp"]) .work-image{aspect-ratio:1256/707!important}

body #main .case-source-gallery:has(#sonic-behance-title) .case-source-media{grid-template-columns:minmax(0,1fr)}
body #main .case-source-gallery:has(#sonic-behance-title) .case-source-media>video{grid-row:auto}
body #main .work-card:has(img[src$="sonic-full.webp"]) .work-image{aspect-ratio:1258/816!important}
body #main .work-card:has(img[src$="fourmeta-full.webp"]) .work-image{aspect-ratio:1280/828!important}
body #main .work-card:has(img[src$="trax-full.webp"]) .work-image{aspect-ratio:1124/698!important}

body #main .chapter-media:has(img[src$="internet-identity-full.webp"]),body #main .chapter-related:has(img[src$="internet-identity-full.webp"]){aspect-ratio:1124/698!important;height:auto!important}
body #main .chapter-media:has(img[src$="puiton-full.webp"]),body #main .chapter-related:has(img[src$="puiton-full.webp"]){aspect-ratio:1276/851!important;height:auto!important}
body #main .chapter-media:has(img[src$="galois-full.webp"]),body #main .chapter-related:has(img[src$="galois-full.webp"]){aspect-ratio:1256/707!important;height:auto!important}
body #main .chapter-media:has(img[src$="token2049-full.webp"]),body #main .chapter-related:has(img[src$="token2049-full.webp"]){aspect-ratio:1256/707!important;height:auto!important}
body #main .chapter-media:has(img[src$="ev-sentry-full.webp"]),body #main .chapter-related:has(img[src$="ev-sentry-full.webp"]){aspect-ratio:1256/687!important;height:auto!important}
body #main .chapter-media:has(img[src$="konecta-deck-full.webp"]),body #main .chapter-related:has(img[src$="konecta-deck-full.webp"]){aspect-ratio:1256/707!important;height:auto!important}
body #main .chapter-media:has(img[src$="sonic-full.webp"]),body #main .chapter-related:has(img[src$="sonic-full.webp"]){aspect-ratio:1258/816!important;height:auto!important}
body #main .chapter-media:has(img[src$="fourmeta-full.webp"]),body #main .chapter-related:has(img[src$="fourmeta-full.webp"]){aspect-ratio:1280/828!important;height:auto!important}
body #main .chapter-media:has(img[src$="trax-full.webp"]),body #main .chapter-related:has(img[src$="trax-full.webp"]){aspect-ratio:1124/698!important;height:auto!important}

/* TCO: use the original artwork alpha instead of a black-flattened padded derivative. */
body.portfolio-case #main .case-cover-art:has(>img[src$="privat-self-03.png"]){padding:0!important;background:transparent!important;aspect-ratio:auto!important;height:auto!important;min-height:0!important;max-height:none!important}
body.portfolio-case #main .case-cover-art>img[src$="privat-self-03.png"]{display:block;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}

/* Film grain on the page field (owner request, 9 Oct 2026): a static, luminance-neutral speckle (mid-grey at a noisy
   alpha) that darkens the light page and lifts the dark one by the same small amount. It sits between the fixed
   WebGL field and the content, so artwork, covers and type stay clean. Tune with --grain / --grain-dark on :root. */
html.has-field body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%'%20height='100%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='2'%20stitchTiles='stitch'%20seed='7'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%201.6%20-.45'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url(%23g)'/%3E%3C/svg%3E");background-size:220px 220px;opacity:var(--grain,.11)}
html.has-field[data-theme=dark] body::after{opacity:var(--grain-dark,.17)}
html.os-open body::after{display:none}
@media print{html.has-field body::after{display:none}}

/* v62 (10 Oct 2026): low windows (≤ 760 px tall). The pinned stages had fixed minimum heights (520–610 px) under a
   104 px sticky top, so on a laptop with a short browser window the Design thinking stage names and copy, the lower
   part of the About "10" stage and the career rail sat below the fold for the whole pin. They now fit the window;
   the static (reduced-motion) layouts keep their own rules. */
@media (max-height:760px){
 body .process-scroll.scroll-enhanced .process-sticky,body .experience-scroll.scroll-enhanced .experience-stage,body .career-detail.is-rail:not(.is-static) .cr-stage{--pin-top:min(104px,max(92px,15svh));top:var(--pin-top);height:calc(100svh - var(--pin-top) - 12px);min-height:0;max-height:none}
 body .process-scroll.scroll-enhanced .process-scenes{bottom:clamp(24px,6svh,65px)}
 body .experience-scroll.scroll-enhanced .experience-ten{font-size:min(68vw,74svh)}
 /* Approach: the design cycle and the services stage pin at the top edge with 660 / 600 px minimums */
 body[data-page=approach] .cycle-scroll:not(.is-static)>.design-cycle,body[data-page=approach] .svc-show:not(.is-static) .svc-stage{min-height:0}
 body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-diagram{width:min(760px,67svh,calc(100svh - 270px));height:min(760px,67svh,calc(100svh - 270px))}
 body[data-page=approach] .svc-show:not(.is-static) .svc-stage{padding-block:88px 12px}
 body[data-page=approach] .svc-show:not(.is-static) .service-rows>a>h3{font-size:clamp(30px,min(5.2vw,8.6svh),86px)!important}
}
@media (max-height:760px) and (max-width:700px){
 body .process-scroll.scroll-enhanced .process-sticky,body .experience-scroll.scroll-enhanced .experience-stage,body .career-detail.is-rail:not(.is-static) .cr-stage{--pin-top:min(95px,max(84px,15svh))}
 body .process-scroll.scroll-enhanced .process-scenes{bottom:clamp(20px,5svh,35px)}
 body .experience-scroll.scroll-enhanced .experience-ten{font-size:min(115vw,60svh)}
 body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-diagram{width:min(96vw,55svh,calc(100svh - 330px));height:min(96vw,55svh,calc(100svh - 330px))}
}
/* About "10": the pin is a little longer so "10 Years of experience." can hold for a beat (js/portfolio-craft.js). */
body .experience-scroll.scroll-enhanced{height:268svh}

/* v63 (10 Oct 2026): horizontal rails (Gallery «Different products. One practice.», About «Made together. With Fourmeta.»).
   The work rides an arc: the card in focus faces you in the middle, its neighbours turn towards it and step back in
   depth at full colour (no translucent grey veil); the rail fades out at the screen edges instead of slicing cards.
   Per-card values come from js/chapters2.js and js/chapters3.js (--s scale, --f focus, --ry turn, --tz depth). */
body .selected-gallery.gal-focus .horizontal-track>.work-card,body .agency-focus .agency-projects.horizontal-track>a{transform:perspective(1500px) translateZ(var(--tz,0px)) rotateY(var(--ry,0deg)) scale(var(--s,1))!important;transform-origin:50% 50%!important;opacity:1!important}
body .gallery-scroll:not(.chapter-static) .horizontal-viewport,body .agency-journey:not(.chapter-static) .horizontal-viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* the arc carries its own perspective per card; the old track perspective (portfolio-v42.css, 1300px) would add a second
   vanishing point at the middle of the long track, which drifts as the rail moves and pushes the outer neighbours
   into the card in focus (v65 fix) */
body .agency-focus .agency-projects.horizontal-track,body .chapter-swipe .agency-projects.horizontal-track{perspective:none!important}
body .agency-focus .agency-projects.horizontal-track>a :is(h3,p){opacity:clamp(0,calc((var(--f,1) - .45)*1.9),1);transform:translateY(calc((1 - var(--f,1))*14px))}
/* Gallery: the name of the work in focus lives beside the chapter title and changes letter by letter; the cards
   carry only their covers while pinned (their headings stay in the accessibility tree). */
body .selected-gallery .gal-now{display:none}
body .selected-gallery.gal-focus .gallery-scroll:not(.chapter-static):not(.chapter-swipe) .gal-now{display:block;min-width:0;max-width:50%;text-align:right}
body .selected-gallery.gal-focus .gallery-scroll:not(.chapter-static):not(.chapter-swipe) .work-card :is(.work-caption,.work-caption *),body .selected-gallery.gal-focus .gallery-scroll:not(.chapter-static):not(.chapter-swipe) .work-card>p{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
body .gal-now-title{position:relative;margin:0;font-size:clamp(34px,4.4vw,64px);line-height:1.04;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
body .gal-now-meta{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
body .gal-now .gl-c{display:inline-block}
body .gal-now .gl-ghost{position:absolute;inset:0;pointer-events:none}
body .gal-now .gl-ghost .gl-c{position:absolute;white-space:pre}
/* Touch screens: the rails are a native sideways swipe that settles on each card (js/portfolio-v43.js chapter-swipe). */
body .chapter-swipe .horizontal-stage,body .chapter-swipe>.agency-stage.horizontal-stage{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;max-height:none!important}
body .chapter-swipe .horizontal-viewport{flex:none;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:18px}
body .chapter-swipe .horizontal-viewport::-webkit-scrollbar{display:none}
body .chapter-swipe .horizontal-track{height:auto!important;transform:none!important}
body .chapter-swipe .horizontal-track>*{scroll-snap-align:center;scroll-snap-stop:always}
body .chapter-swipe .horizontal-viewport{width:calc(100% + 2 * var(--gutter,20px))!important;max-width:none!important;margin-inline:calc(-1 * var(--gutter,20px))!important}
body .chapter-swipe .horizontal-track{gap:18px!important}
body .chapter-swipe>.agency-stage.horizontal-stage{padding-top:28px!important;padding-bottom:36px!important}
body .chapter-swipe.gallery-scroll .horizontal-track>.work-card,body .chapter-swipe .agency-projects.horizontal-track>a{transform:perspective(1200px) translateZ(calc(var(--tz,0px)*.3)) rotateY(calc(var(--ry,0deg)*.4)) scale(var(--s,1))!important}
body .gallery-scroll.chapter-swipe .horizontal-viewport,body .agency-journey.chapter-swipe .horizontal-viewport{-webkit-mask-image:none;mask-image:none}
@media (prefers-reduced-motion:reduce){body .selected-gallery.gal-focus .horizontal-track>.work-card,body .agency-focus .agency-projects.horizontal-track>a{transform:none!important}}

/* v65 · Career: a place without published work opens as a typographic plate. Its description becomes the statement at
   the top of the panel; the name and role stay at its foot, where every panel keeps them. Same text, nothing added. */
@media(min-width:761px){
 .career-detail.is-rail:not(.is-static) .cr-panel.cr-text .cr-body{top:clamp(80px,12svh,104px);display:flex;flex-direction:column;width:calc(var(--cr-open,100%) - 60px);max-width:none}
 .career-detail.is-rail:not(.is-static) .cr-panel.cr-text:not(:has(.career-logo)) .cr-body{top:30px}
 .career-detail.is-rail:not(.is-static) .cr-panel.cr-text .cr-body>div{display:contents}
 .career-detail.is-rail:not(.is-static) .cr-panel.cr-text .cr-body p:not(.career-role){order:-1;margin:0 0 auto;max-width:15em;font-size:clamp(26px,2.75vw,44px);line-height:1.1;letter-spacing:-.038em;color:var(--ink);text-wrap:balance;transform:translateY(calc((1 - var(--w))*26px))}
 .career-detail.is-rail:not(.is-static) .cr-panel.cr-text .cr-body h3{order:1;margin-top:20px}
 .career-detail.is-rail:not(.is-static) .cr-panel.cr-text .cr-body .career-role{order:2;margin:0;color:var(--muted)}
}
@media(min-width:761px) and (max-height:760px){
 .career-detail.is-rail:not(.is-static) .cr-panel.cr-text .cr-body p:not(.career-role){font-size:clamp(20px,min(2.75vw,4.6svh),36px)}
}

/* v66 · Recognition: a calm index instead of the laurel strips (About «Recognition, shared.», the Awards tab on Home
   and About). Where it was recognised — the work — what for, as plain phrases; the name carries the row. On a fine
   pointer the work's cover follows the cursor in a glass frame (js/recognition-index.js); covers stay whole (contain).
   No badges, no counters, no lines between rows, no shadows. */
body .recognition-index{display:block;margin:clamp(18px,2.6vw,36px) 0 clamp(56px,7vw,110px)}
body .recognition-row{display:grid;grid-template-columns:minmax(96px,.8fr) minmax(0,3.2fr) minmax(0,1.3fr);align-items:baseline;column-gap:clamp(16px,2.4vw,40px);padding:clamp(10px,1.3vw,18px) 0;color:var(--ink);text-decoration:none;border-radius:10px;outline-offset:6px}
body .rr-source,body .rr-note{font-size:clamp(15px,1.1vw,17px);line-height:1.4;color:var(--muted)}
body .rr-note{text-align:right}
body .rr-name{display:block;justify-self:start;font-size:clamp(32px,3.8vw,60px);line-height:1.04;letter-spacing:-.045em;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .45s ease}
body .rr-thumb{display:none}
body .recognition-row:focus-visible{outline:2px solid var(--ink)}
@media (hover:hover) and (pointer:fine){
 body .recognition-index.ri-hover .recognition-row:not(.is-active) .rr-name{opacity:.24}
 body .recognition-row.is-active .rr-name{transform:translateX(clamp(8px,1vw,16px))}
}
body .recognition-index.ri-pending .recognition-row{opacity:0;transform:translateY(24px)}
body .recognition-index.ri-in .recognition-row{transition:opacity .8s ease,transform 1s cubic-bezier(.22,1,.36,1)}
body .recognition-index.ri-in .recognition-row:nth-child(2){transition-delay:.08s}
body .recognition-index.ri-in .recognition-row:nth-child(3){transition-delay:.16s}
body .recognition-index.ri-in .recognition-row:nth-child(4){transition-delay:.24s}
.ri-preview{position:fixed;left:0;top:0;z-index:60;width:clamp(280px,25vw,420px);aspect-ratio:1.4;border-radius:18px;overflow:hidden;pointer-events:none;opacity:0;clip-path:inset(42% 42% 42% 42% round 18px);transition:opacity .28s ease,clip-path .62s cubic-bezier(.22,1,.36,1);will-change:transform;contain:layout paint}
.ri-preview.is-on{opacity:1;clip-path:inset(0 0 0 0 round 18px)}
.ri-strip{position:absolute;inset:0;transition:transform .72s cubic-bezier(.22,1,.36,1)}
.ri-frame{position:relative;width:100%;height:100%;background:var(--preview-bg,#e8ebf1)}
.ri-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.ri-preview::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,255,255,.14) 30%,rgba(255,255,255,0) 60%,rgba(214,217,223,.65));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (prefers-reduced-motion:reduce){.ri-strip{transition:none}.ri-preview{clip-path:none;transition:opacity .2s ease}}
/* touch screens and narrow windows: no pointer to follow, so each row carries its cover */
@media (hover:none),(max-width:760px){
 body .recognition-row{grid-template-columns:clamp(88px,26vw,132px) minmax(0,1fr);grid-template-areas:"thumb source" "thumb name" "thumb note";align-items:center;column-gap:16px;row-gap:2px;padding:10px 0}
 body .rr-thumb{display:block;grid-area:thumb;align-self:center;aspect-ratio:1.4;border-radius:10px;overflow:hidden;background:var(--preview-bg,#e8ebf1)}
 body .rr-thumb img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
 body .rr-source{grid-area:source;font-size:14px}
 body .rr-name{grid-area:name;font-size:clamp(24px,6.6vw,40px)}
 body .rr-note{grid-area:note;text-align:left;font-size:14px}
}
/* About: «Recognition, shared.» closes the Fourmeta section, after the work it speaks about */
body .agency-recognition-close{margin-top:clamp(56px,8vw,128px)}
body .agency-recognition-close .agency-award-intro{margin:0 0 clamp(12px,2vw,28px)}

/* v67 (10 Oct 2026): case first screens and endings.
   Long titles no longer squeeze the cover: the title scales so its longest word fits its column (per-page
   --case-title-fit, measured), and the cover keeps its half. Every case ends with the next case's cover. */
body.portfolio-case .case-cover .case-cover-art>img[src*="images/covers-v6"],body.portfolio-case .case-cover .case-cover-art>img[src*="images/covers-v52"]{width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;transform:none!important}
@media (min-width:901px){
 /* 20 Oct (smoothness): the h1 carries data-title-fit beside its inline fit. A [style] test inside :has() made every inline
    style write on any page (gsap, the years fan, the ribbon) re-style the whole document: about 6 s of an 8 s scroll. */
 body.portfolio-case .case-cover:has(h1[data-title-fit]){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
 body.portfolio-case .case-cover:has(h1[data-title-fit]) .case-cover-copy{min-width:0}
 body.portfolio-case .case-cover-copy h1[style*="--case-title-fit"]{font-size:calc(clamp(88px,15vw,270px) * var(--case-title-fit));overflow-wrap:normal}
}
body.portfolio-case a.case-next:has(.case-next-cover){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:12px clamp(24px,5vw,90px);align-items:end;padding:0 0 clamp(48px,7vw,110px);border-bottom:0}
body.portfolio-case a.case-next:has(.case-next-cover)>span:first-child{grid-column:1;grid-row:1;align-self:start;margin:0}
body.portfolio-case a.case-next:has(.case-next-cover)>h2{grid-column:1;grid-row:2;align-self:end;font-size:clamp(46px,8vw,142px);line-height:.92;letter-spacing:-.07em;transition:transform 800ms cubic-bezier(.16,1,.3,1)}
body.portfolio-case a.case-next:has(.case-next-cover)>.ui-arrow{position:static;grid-column:1;grid-row:1;justify-self:end;align-self:start;width:clamp(28px,3vw,44px);height:auto;transition:transform 700ms cubic-bezier(.16,1,.3,1)}
body.portfolio-case a.case-next .case-next-cover{grid-column:2;grid-row:1/span 2;display:block;width:100%;height:auto;aspect-ratio:1.4;object-fit:contain;border-radius:clamp(14px,2vw,28px)}
@media (hover:hover) and (pointer:fine){
 body.portfolio-case a.case-next:has(.case-next-cover):hover>h2{transform:translate3d(14px,0,0)}
 body.portfolio-case a.case-next:has(.case-next-cover):hover>.ui-arrow{transform:translate3d(6px,-6px,0)}
}
@media (max-width:700px){
 body.portfolio-case a.case-next:has(.case-next-cover){grid-template-columns:1fr;grid-template-rows:auto auto auto}
 body.portfolio-case a.case-next .case-next-cover{grid-column:1;grid-row:3;aspect-ratio:1.4;margin-top:18px}
 body.portfolio-case a.case-next:has(.case-next-cover)>h2{grid-row:2}
}
@media (prefers-reduced-motion:reduce){body.portfolio-case a.case-next:has(.case-next-cover)>h2,body.portfolio-case a.case-next:has(.case-next-cover)>.ui-arrow{transition:none}}

/* v68 (11 Oct 2026): hero composition. The name moves to the top-left corner as a quiet byline; the glass lens sits
   on the centre axis under the lede (.hero-lens is its seat, js/3d/glass-scenes.js puts the orb there); the turning
   "scroll to work" ring with the two ovals stays on the right, on its own. */
body .hero-frame>.hero-person{position:absolute;z-index:3;left:clamp(22px,4vw,58px);top:clamp(92px,12.5svh,128px);margin:0;display:block;max-width:calc(50% - 40px);text-align:left;font-size:clamp(13px,1.02vw,15px);line-height:1.45;color:var(--hero-ink)}
body .hero-frame>.hero-person p{margin:0;text-align:left}
body .hero-frame>.hero-person p span{color:var(--hero-muted)}
body .hero-copy .hero-lens{display:block;width:clamp(72px,6.2vw,104px);aspect-ratio:1;margin:clamp(22px,4svh,44px) auto 0;pointer-events:none}
@media (max-height:700px) and (min-width:701px){body .hero-copy .hero-lens{width:clamp(60px,5vw,80px);margin-top:16px}}

/* v69 (11 Oct 2026): long full-page captures sit in a page window — the whole page, scrolled inside a frame no taller
   than the screen (markup: <div class="page-window">, see projects/*). Nested scrolling: Lenis allowNestedScroll on
   desktop, native on touch; the page carries on once the window reaches its end. */
.page-window{position:relative;display:block;max-height:min(86svh,1040px);overflow-x:hidden;overflow-y:auto;border-radius:24px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,currentColor 24%,transparent) transparent;-webkit-overflow-scrolling:touch}
.page-window>img{display:block;width:100%;height:auto!important;max-height:none!important;object-fit:contain!important}
.page-window:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.page-window::-webkit-scrollbar{width:6px}
.page-window::-webkit-scrollbar-thumb{background:color-mix(in srgb,currentColor 24%,transparent);border-radius:6px}
.case-shot-media>.page-window{border-radius:5px}
@media (max-width:700px){.page-window{max-height:min(78svh,720px)}}

/* v70 (11 Oct 2026): headline and lede a little lower. Only the text (title + lede) is centred on the hero's optical
   centre now; the lens hangs under it instead of pushing the block up, so the title no longer crowds the byline. */
body .hero-copy .hero-lens{position:absolute;top:100%;left:0;right:0}
@media (max-width:640px){body .hero-copy{top:40%}}
@media (max-width:640px) and (max-height:760px){body .hero-copy .hero-lens{width:56px;margin-top:14px}}
@media (max-width:640px) and (max-height:700px){body .hero-copy{top:38%}}
@media (max-width:640px) and (max-height:620px){body .hero-copy .hero-lens{width:52px;margin-top:12px}body .hero-explore.hero-orbit{margin-bottom:max(92px,calc(689px - 100svh))!important}}
@media (max-height:700px) and (min-width:641px){body .hero-copy .hero-lens{position:static}}

/* v70 (11 Oct 2026): portrait plates in the project-material blocks sit side by side instead of each filling the column. */
.case-expanded-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(20px,3vw,40px);align-items:start;min-width:0}
.case-expanded-duo>figure{margin:0;min-width:0}

/* v71 (11 Oct 2026) · Career panels. Text in a panel is set at the width the panel opens to (--cr-open, set by
   js/chapters2.js once per resize), so it no longer re-wraps while the panel grows: the panel's edge uncovers it.
   On a phone with room to spare the open panel shows its logo, as on desktop (.cr-logos, same script). */
@media(min-width:761px){
 .career-detail.is-rail:not(.is-static) .cr-body{width:min(clamp(300px,34vw,520px),calc(var(--cr-open,100%) - 60px));max-width:none}
}
@media(max-width:760px){
 .career-detail.is-rail.cr-logos:not(.is-static) .cr-panel .career-logo{display:block}
}
/* The static path (short screens, reduced motion) lists every place in full: a panel there is sized by its text,
   not a size container (which measured it as empty and cut the text). */
.career-detail.is-rail.is-static .cr-panel,.career-detail.is-rail.is-static .cr-panel:nth-child(2n){container-type:normal;flex:none!important;min-height:0!important}
.career-detail.is-rail.is-static .cr-shot{transform:none}
.career-detail.is-rail.is-static .cr-panel .career-logo{margin-bottom:clamp(16px,2.4vw,22px)}

/* v71 · Case overview: the small project name under the facts repeated the page title and slid under the pinned facts
   while scrolling (and read as an overline on phones). The facts column now ends with the facts. */
body.portfolio-case .project-copy>h2{display:none}

/* v71 · Branding cases open like every other case: title and notes on the left, the whole cover on the right, both
   on the first screen (the wide single-column cover ran past the fold). The title fits its column the v67 way
   (--case-title-fit on the h1, measured per page). */
@media (min-width:901px){
 body.portfolio-case[data-case-kind=branding] .case-cover:not(.is-locked){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:6vw;align-items:center;padding-bottom:65px}
 body.portfolio-case[data-case-kind=branding] .case-cover:not(.is-locked) .case-cover-copy{display:block;min-width:0}
 body.portfolio-case[data-case-kind=branding] .case-cover:not(.is-locked) .case-back{margin:0 0 30px}
 body.portfolio-case[data-case-kind=branding] .case-cover:not(.is-locked) h1{font-size:calc(clamp(88px,15vw,270px) * var(--case-title-fit,1));overflow-wrap:normal}
 body.portfolio-case[data-case-kind=branding] .case-cover:not(.is-locked) .case-role{margin:clamp(22px,3vw,40px) 0 0;max-width:none}
}

/* v71 · Footer: the last line keeps clear of the fixed corner buttons (view, sound, theme), which covered the
   tagline at the very end of every page. On phones the two short lines stack on the left. */
body .footer-bottom{padding-right:clamp(190px,15vw,220px)}
@media (max-width:700px){body .footer-bottom{flex-direction:column;align-items:flex-start;gap:4px;padding-right:0}}

/* v71 · Oisy: the intro says its scope in one sentence (no labels or rules between rows), and the extra screens sit
   on the same gutters as every other section of the page. */
body .oisy-intro .oisy-intro-text{margin:0;max-width:24em;color:var(--oisy-ink,var(--ink));font-size:clamp(18px,1.6vw,25px);line-height:1.4}
body .oisy-intro .oisy-intro-text+.oisy-live-note{margin-top:clamp(18px,2vw,28px)}
body .oisy-case>.oisy-source-gallery{width:calc(100% - 2 * var(--gutter));max-width:1480px;margin-inline:auto;padding:clamp(72px,10vw,154px) 0}

/* v71 · Disclosures in cases («More wallet screens», «Earlier product screens», recovery forms) open from the
   site's glass pill instead of the browser's triangle. */
html body.portfolio-case main details>summary{list-style:none;position:relative;isolation:isolate;display:inline-flex!important;align-items:center;width:max-content;max-width:100%;min-height:42px;padding:0 18px!important;border:0;border-radius:15px;font-size:14px;line-height:1.3;color:var(--gc-ink)!important;text-decoration:none!important;background:linear-gradient(128deg,var(--gc-a),var(--gc-b) 55%,var(--gc-c));-webkit-backdrop-filter:var(--gc-blur);backdrop-filter:var(--gc-blur);cursor:pointer;user-select:none;transition:transform .6s cubic-bezier(.16,1,.3,1),background .25s ease-out}
html body.portfolio-case main details>summary::-webkit-details-marker{display:none}
html body.portfolio-case main details>summary::marker{content:''}
html body.portfolio-case main details>summary::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;background:var(--gc-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover) and (pointer:fine){html body.portfolio-case main details>summary:hover{transform:scale(1.045);background:linear-gradient(128deg,var(--gc-hover-a),var(--gc-b) 55%,var(--gc-c))}}
html body.portfolio-case main details>summary:active{transform:scale(.97);transition-duration:.12s}
html body.portfolio-case main details>summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
html body.portfolio-case main details[open]>summary{margin-bottom:clamp(24px,3vw,40px)}
@media (prefers-reduced-motion:reduce){html body.portfolio-case main details>summary{transition:background .2s}html body.portfolio-case main details>summary:is(:hover,:active){transform:none}}

/* v71 · Every case ends with the next case in the Work order and its Work cover, at the cover's own proportions
   (a presentation slide is wider than a device cover; neither is letterboxed or cropped). */
body.portfolio-case a.case-next:has(.case-next-cover) .case-next-cover{aspect-ratio:auto}
body.miquel-case .portfolio-footer>a.case-next{margin:0 0 90px}
@media(max-width:700px){body.miquel-case .portfolio-footer>a.case-next{margin-bottom:55px}}
/* v71 · Konecta: the «Earlier …» disclosures sit on the section's gutter, not a second one inside it. */
body .project-section>.konecta-archive{margin-inline:0}
body .project-section>.konecta-archive .project-slider.cs-stack{padding-inline:0!important;padding-top:0!important}
/* v71 · Link roll: the outgoing copy pivots at its left edge, like the incoming one. Pivoting at the centre lifted a wide label's
   left end back into the clip box, so the bottom of the old word showed above the new one (open phone menu, 29px links). */
.roll-label>span:first-child{transform-origin:left center}
/* v71 · About, company stories: a product cover keeps its edges on hover (the 2.5% zoom cropped it inside the frame); the caption still answers. */
body .cs-product:hover .cs-frame img,body .company-story .cs-work[data-in] .cs-product:hover .cs-frame img{transform:none}
/* v71 · Case titles: the letter masks open upwards too, so marks above capitals (the Ä in OBEGRÄNSAD) aren't cut off;
   the letters still rise from below, and the line keeps its place (the padding is taken back by the margin). */
body.portfolio-case .case-cover h1 .letter-mask{padding-top:.3em;margin-top:-.3em}
/* v71 · Heading system for every case page (owner, 11 Oct: «сделай нормальную систему заголовков»).
   One scale, the same on every case: the title (and the next-project title) at display size, section headings at h2,
   sub-sections at h3. The per-page title fit (--case-title-fit) no longer changes the size: the longest product name,
   OBEGRÄNSAD, sets the display size so that every title fits its column in at most two lines. */
:root{--type-display:clamp(46px,6.6vw,128px);--type-h2:clamp(32px,4.4vw,84px);--type-h3:clamp(24px,2.7vw,48px)}
html body.portfolio-case .case-cover h1,html body.portfolio-case .case-cover-copy h1[style*="--case-title-fit"]{font-size:var(--type-display)!important}
html body.portfolio-case main h2:not(.case-overview-title):not(.sr-only){font-size:var(--type-h2)!important}
html body.portfolio-case main h3.permission-pair-title,html body.portfolio-case main .nns-chapter h3{font-size:var(--type-h3)!important}
html body.portfolio-case a.case-next:has(.case-next-cover)>h2{font-size:var(--type-display)}
/* … and one cover grid: the deck cases no longer give the title a narrower column (1fr / 1.6fr), so their titles keep two lines. */
@media (min-width:701px){
 html body.portfolio-case[data-case-kind] .case-cover:not(.is-locked),html body.portfolio-case .case-cover:not(.is-locked){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
 html body.portfolio-case[data-case-kind=pitchdeck] .case-cover:not(.is-locked) .case-cover-art{aspect-ratio:auto}
}
body.portfolio-case .case-cover .case-cover-art>img[src*="images/covers-v71"]{width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;transform:none!important}
@media (max-width:700px){:root{--type-display:min(46px,12vw)}}
/* … the branding covers keep the same copy block on tablets (title, then the year and scope under it, not beside it). */
@media (min-width:701px) and (max-width:900px){
 body.portfolio-case[data-case-kind=branding] .case-cover:not(.is-locked) .case-cover-copy{display:block;min-width:0}
 body.portfolio-case[data-case-kind=branding] .case-cover:not(.is-locked) .case-back{margin:0 0 30px}
 body.portfolio-case[data-case-kind=branding] .case-cover:not(.is-locked) .case-role{margin:clamp(22px,3vw,40px) 0 0;max-width:none}
}
/* … the title breaks into balanced lines (“Nothing / Phone (3)”, not “Nothing Phone / (3)”), and the line under it
   uses the whole title column on every case. */
html body.portfolio-case .case-cover h1{text-wrap:balance}
html body.portfolio-case .case-cover .case-role{max-width:none}
/* v72 · case screens at reading size (owner, 11 Oct: "the screenshots of the work are huge, go through all of them").
   A screen used to fill up to 1470 px of a 1600 px window. Every media block in a case now keeps to one media column
   of 1080 px (125vh on short windows, so a 16:10 screen fits the window), centred on the page: single figures, rows and
   galleries scale as a whole, so halves stay halves; a desktop shown with its phone keeps the pair's proportion.
   Text keeps its size and measure (chapters inside a gallery keep the page width). Phones keep 280–300 px. */
html body.portfolio-case main{--shot-max:min(1080px,125vh)}
html body.portfolio-case main :is(.cs-media,.kinic-media-grid:not(.kinic-phone),.series-desktop,.oisy-module-grid,.miquel-desktop-grid,.v52-product-grid,.case-expanded-duo,.case-shot-grid,.case-source-media){width:100%;max-width:min(100%,var(--shot-max));margin-inline:auto}
html body.portfolio-case main :is(.case-expanded-grid,.toolkit-ic-screens,.apeon-stack,.lb-stack,.bilet-desktop-stack,.case-shot-gallery,.series-section,.fro-section,.lb-section,.oisy-section,.miquel-section,.nns-case)>figure:not(.case-expanded-mobile):not(.case-expanded-tablet):not(.series-phone){max-width:min(100%,var(--shot-max));margin-inline:auto;justify-self:center}
html body.portfolio-case main :is(.case-expanded-pair,.apeon-pair,.oisy-responsive-grid,.lb-responsive,.fro-responsive){width:100%;max-width:min(100%,calc(var(--shot-max) + 160px));margin-inline:auto}
html body.portfolio-case main .public-case-gallery{container-type:inline-size;grid-template-columns:repeat(2,minmax(0,calc((min(100%,var(--shot-max)) - 30px) / 2)));justify-content:center}
html body.portfolio-case main .public-case-gallery>.public-case-chapter{width:100cqw;justify-self:center}
/* v72 · air around the screens (owner, 11 Oct: "add more air"): more room between a heading and its first screen,
   between screens in a stack, inside rows and pairs, and between chapters. */
html body.portfolio-case main{--air-head:clamp(48px,4.6vw,80px);--air-stack:clamp(56px,7vw,120px);--air-row:clamp(28px,3vw,48px);--air-section:clamp(96px,11vw,184px)}
html body.portfolio-case main .series-heading,html body.portfolio-case main .case-source-heading{margin-bottom:var(--air-head)}
html body.portfolio-case main :is(.series-section,.case-expanded){padding-block:var(--air-section)}
html body.portfolio-case main :is(.case-expanded-grid,.toolkit-ic-screens,.apeon-stack,.lb-stack,.bilet-desktop-stack,.cs-media,.kinic-media-grid){row-gap:var(--air-stack)}
html body.portfolio-case main :is(.series-desktop,.public-case-gallery,.case-expanded-pair,.apeon-pair,.oisy-module-grid,.oisy-responsive-grid,.lb-responsive,.fro-responsive,.miquel-desktop-grid,.v52-product-grid,.case-expanded-duo,.series-phones,.case-expanded-mobile){column-gap:var(--air-row);row-gap:var(--air-stack)}
html body.portfolio-case main figure>figcaption{margin-top:16px}

/* v74 (12 Oct 2026, case audit) · one radius for every screen on a case page. The audit found four to six radii on
   one page (4, 12, 16, 18, 20, 22, 24, 25.92, 28 px). Every screen, phone, film, window and cover now uses the card
   radius (20 px) at every width. A frame that clips (window, shot frame, story frame, cover) draws the curve and the
   picture inside keeps square corners, so no corner can poke out or sit off the curve.
   Permission Manager keeps its drawn devices square. */
html body.portfolio-case{--r-media:var(--r-card,20px)}
html body.portfolio-case:not(.permission-manager-page) main figure :is(img,video),
html body.portfolio-case main :is(.case-source-media,.public-case-motion,.miquel-media) :is(img,video),
html body.portfolio-case main :is(.page-window,.case-shot-media,.fro-stage,.lb-stage,.case-cover-art,.cs-frame,.bilet-mobile-screen,.osbb-overview-frame,.mago-section-grid .case-shot-media),
html body.portfolio-case :is(.case-next .case-next-cover,.cs-next .project-menu-link-img-next){border-radius:var(--r-media)!important}
html body.portfolio-case main :is(.page-window,.case-shot-media,.fro-stage,.lb-stage,.case-cover-art,.cs-frame,.bilet-mobile-screen,.osbb-overview-frame) :is(img,video){border-radius:0!important}
/* frames are clear: a screen never sits on a second tinted plate */
html body.portfolio-case main :is(.fro-stage,.lb-stage){background:transparent!important}
html body.portfolio-case main .pass-device-media figure{background:none!important;padding:0!important;border-radius:0!important}
/* v74 · story frames are clear and still: the legacy plates lost their light mats (images/plates-v74), so the frame
   paints nothing behind a picture, and the 14 px drift that slid a picture inside its frame (and opened a tinted seam
   at the edge) is gone. */
html body.portfolio-case .cs-frame{background:transparent!important}
html body.portfolio-case .cs-zoom{translate:none!important}
/* v74 · no tinted panels behind galleries: Sonic, Bilet and Pass sat some sections on square tinted plates (and the
   rest of the page on none), so their screens had two backgrounds. One treatment for every section: the page itself. */
html body.portfolio-case main :is(.case-source-gallery,.case-device-gallery,.case-shot-gallery){background:transparent!important}
/* v74 · layout fixes from the case audit */
/* one gutter: a story stack or an expanded section inside .project-section does not add a second one */
html body.portfolio-case .project-section :is(.case-expanded,.case-source-gallery,.case-device-gallery,.case-shot-gallery){padding-inline:0!important}
html body.portfolio-case .project-section .project-slider.cs-stack{padding-inline:0!important}
/* chapters: one measure of air between two sections, not two (they stacked into 300–430 px voids) */
html body.portfolio-case main :is(.series-section,.case-expanded)+:is(.series-section,.case-expanded){padding-top:0}
/* a figure takes its column (it used to shrink to its poster or caption before the picture loaded) */
html body.portfolio-case main :is(.case-expanded-grid,.toolkit-ic-screens,.apeon-stack,.lb-stack,.bilet-desktop-stack,.case-shot-gallery,.series-section,.fro-section,.lb-section,.oisy-section,.miquel-section,.nns-case)>figure:not(.case-expanded-mobile):not(.case-expanded-tablet):not(.series-phone){width:100%}
/* the two-up gallery measures its gap with the real gap */
html body.portfolio-case main .public-case-gallery{grid-template-columns:repeat(2,minmax(0,calc((min(100%,var(--shot-max)) - var(--air-row)) / 2)))}
/* a half-width picture with no partner takes the middle instead of leaving an empty column */
html body.portfolio-case main .public-case-gallery>figure.is-half:not(:has(+figure.is-half)):not(figure.is-half+figure.is-half){grid-column:1/-1;width:min(100%,560px);justify-self:center}
/* rows of phones: centred, three or four across, never an orphan at the left or a pair pushed to the edges */
html body.portfolio-case main :is(.series-phones,.case-expanded-grid.case-expanded-mobile){display:flex!important;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--air-stack) var(--air-row)}
html body.portfolio-case main :is(.series-phones,.case-expanded-grid.case-expanded-mobile)>*{flex:1 1 230px;width:auto;max-width:300px;margin-inline:0}
html body.portfolio-case main .series-desktop+.series-phones{margin-top:var(--air-stack)}
/* pictures of different heights in one row end on one line, so their captions line up */
html body.portfolio-case main .case-expanded-duo{align-items:end}
/* FRO and LiveBridge sit on the site's gutter and their pairs on the 1080 column */
html body.portfolio-case :is(.fro-case,.lb-case){width:auto!important;margin-inline:var(--gutter)!important}
html body.portfolio-case main :is(.fro-pair,.lb-pair){width:100%;max-width:min(100%,var(--shot-max));margin-inline:auto}
/* a desktop screen with its phone stacks below 992 px (the phone column fell to 147 px at 820) */
@media (max-width:991px){
 html body.portfolio-case main :is(.case-expanded-pair,.apeon-pair,.lb-responsive,.fro-responsive){grid-template-columns:minmax(0,1fr)!important}
 html body.portfolio-case main :is(.case-expanded-pair,.apeon-pair,.lb-responsive,.fro-responsive)>:is(.case-expanded-phone,.series-phone,.lb-phone,.fro-phone){width:min(100%,300px)!important;justify-self:center}
}
/* v74 · a single screen in a story takes the whole reading column (1080 px): the offset insets left a third of the row
   empty next to it ("half-empty" cases in the audit); pairs and phone rows keep their rhythm */
html body.portfolio-case :is([data-layout=inset-r],[data-layout=inset-l]) .cs-fig{grid-column:1/-1}
html body.portfolio-case main figure picture{border-radius:var(--r-media)!important}
/* v74 · Kinic: the landing page section by section, and four phones in one row */
html body.portfolio-case main .kinic-section-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--air-row);row-gap:var(--air-stack);align-items:start}
html body.portfolio-case main .kinic-section-grid>.is-wide{grid-column:1/-1}
html body.portfolio-case main .kinic-phone-row{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--air-stack) var(--air-row);max-width:min(100%,var(--shot-max));margin-inline:auto}
html body.portfolio-case main .kinic-phone-row>figure{flex:1 1 220px;max-width:300px;margin:0}
@media (max-width:700px){html body.portfolio-case main .kinic-section-grid{grid-template-columns:minmax(0,1fr)}}
/* v74 · Konecta: each case ends with the other one, as a card (the sections used to end on a heading alone) */
html body.portfolio-case main .konecta-sibling{display:grid;gap:16px;width:min(100%,560px);margin:var(--air-head) auto 0;color:var(--ink);text-decoration:none}
html body.portfolio-case main .konecta-sibling img{display:block;width:100%;height:auto;border-radius:var(--r-media)}
html body.portfolio-case main .konecta-sibling span{font-size:clamp(17px,1.4vw,20px);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
html body.portfolio-case main .konecta-sibling:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:var(--r-media)}
/* v74 · the overview keeps its column when its generic heading is read only by screen readers. 22 Oct, late: from the
   first paint, not only once the heading is hidden: js/portfolio-v40.js puts «Project overview» into the first column
   about 0.2 s in and js/case-story.js hides it (or names it, Bilet), so the copy always ends in the second column; it
   started in the first and moved 257 px right at 768 (CLS .018-.05 on the 27 old-template cases at 768x1024) */
@media (min-width:701px){html body.portfolio-case .project-info>.project-copy{grid-column:2}}
/* v74 · and that generic heading is read only by screen readers from the first paint, at every width (as .sr-only): on a
   phone it stands above the copy, and in the 0.2-0.8 s before js/case-story.js hid it, it pushed the copy 48 px down and
   back up (390x844: CLS .017-.03 on 26 of the 27 cases). Bilet's heading is its own line («Tickets, with less
   friction.»): it is in the HTML from the first paint (.cs-static) and js/case-story.js drops the generic one beside it */
html body.portfolio-case .project-info>.case-overview-title:not(.cs-static){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* v74 · Konecta's two section links had no size of their own and inherited the old template's 1vw (4 px on a phone) */
html body.portfolio-case main .konecta-case-links a{font-size:clamp(17px,1.4vw,20px);color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* v74 · FRO Dualle shows the whole site, chapter by chapter (owner: "a huge site, why is the case half-empty") */
html body.portfolio-case main .fro-shot{margin:0;min-width:0}
html body.portfolio-case main .fro-shot>figcaption{margin-top:16px;font-size:15px;line-height:1.5;color:var(--muted)}
html body.portfolio-case main .fro-section>.fro-copy{max-width:38em}
html body.portfolio-case main .fro-section>:is(.fro-shot,.fro-pair,.fro-phones,.fro-responsive)+:is(.fro-shot,.fro-pair,.fro-phones,.fro-responsive){margin-top:var(--air-stack)}
html body.portfolio-case main .fro-pair{column-gap:var(--air-row);row-gap:var(--air-stack);align-items:start}
html body.portfolio-case main .fro-phones{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--air-stack) var(--air-row);max-width:min(100%,var(--shot-max));margin-inline:auto}
html body.portfolio-case main .fro-phones>.fro-shot{flex:1 1 220px;max-width:300px}
html body.portfolio-case main .fro-responsive{column-gap:var(--air-row);row-gap:var(--air-stack)}