/* The same portfolio palette, typefaces and shared navigation; an editorial
   sequence of comparisons instead of a separate gallery interface. */
html, body { overflow-x: clip; }
.pp-skip { position: fixed; top: -100px; left: 24px; z-index: 10001; background: var(--bg); padding: 12px 20px; }
.pp-skip:focus { top: 16px; }
.pp-main { padding-top: clamp(3.5rem, 7vw, 7rem); }
#nav .nav-links a[aria-current="page"] { color: var(--ink); }
.pp-intro { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); gap: 0 clamp(2rem, 6vw, 7rem); align-items: end; padding-bottom: clamp(3rem, 5vw, 5.5rem); }
.pp-kicker { grid-column: 1 / -1; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.9rem; }
.pp-intro h1 { grid-area: auto; max-width: none; font: 550 clamp(3.2rem, 5.6vw, 6.3rem)/.99 var(--font); letter-spacing: -.065em; }
.pp-intro h1 span, .pp-intro h1 em { display: block; }
.pp-intro h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.035em; margin-top: .12em; }
.pp-intro-copy { max-width: 40ch; padding-bottom: .25rem; }
.pp-intro-copy p { color: var(--muted); font-size: clamp(.94rem, 1.1vw, 1.08rem); line-height: 1.75; }
.pp-signature { display: block; margin-top: 1.4rem; font: italic clamp(1.25rem, 1.8vw, 1.7rem)/1.2 var(--serif); }
.pp-gallery-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-block: 1px solid var(--rule); padding-block: 1.15rem; }
.pp-gallery-heading > span { font-weight: 500; font-size: .95rem; letter-spacing: -.02em; }
.pp-gallery-heading p { color: var(--muted); font-size: .75rem; }
.pp-chapter { padding-block: clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem); }
.pp-chapter + .pp-chapter { border-top: 1px solid var(--rule); }
.pp-chapter-head { display: grid; grid-template-columns: auto 1fr minmax(220px, .66fr); gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: baseline; margin-bottom: 2rem; }
.pp-index { font-size: .62rem; letter-spacing: .1em; color: var(--muted); }
.pp-chapter-head h2 { font: italic clamp(1.9rem, 3vw, 3rem)/1.1 var(--serif); letter-spacing: -.025em; }
.pp-chapter-head p { color: var(--muted); font-size: .85rem; line-height: 1.65; max-width: 48ch; }
.pp-study-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: clamp(2.5rem,5vw,5rem) clamp(1.5rem,4vw,4rem); }
.retouch-study { min-width: 0; margin: 0; }
.retouch-study.study-featured { width: min(100%, var(--study-width)); margin: 0 auto clamp(2.5rem,5vw,5rem); }
.pp-study-grid .retouch-study:last-child:nth-child(odd) { grid-column: 1 / -1; width: min(100%, var(--study-width)); justify-self: center; }
/* Keep the reflection outside the rounded comparison crop. These styles stay
   loaded in both themes so the light can fade out with the rest of the page. */
.comparison-surround { position: relative; isolation: isolate; }
html[data-theme] .comparison-surround > .ambient-light {
  position: absolute; inset: -22% -16%; z-index: -1; display: block;
  pointer-events: none; opacity: 0;
  color: rgb(var(--glow-left,77 51 35));
  background: radial-gradient(ellipse at 23% 48%,currentColor 0%,transparent 65%);
  -webkit-mask-image: linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image: linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: opacity 1300ms cubic-bezier(.4,0,.2,1), color 1600ms ease;
}
.comparison-surround > .ambient-light::before,
.comparison-surround > .ambient-light::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transition: color 1600ms ease;
}
.comparison-surround > .ambient-light::before {
  color: rgb(var(--glow-right,62 45 29));
  background: radial-gradient(ellipse at 79% 46%,currentColor 0%,transparent 63%);
}
.comparison-surround > .ambient-light::after {
  color: rgb(var(--glow-bottom,74 46 29));
  background: radial-gradient(ellipse at 50% 77%,currentColor 0%,transparent 65%);
}
html[data-theme="dark"] .comparison-surround.ambient-ready > .ambient-light { opacity: .34; }
.comparison { --matte: #e6e1d8; --grip-size: 52px; --grip-inset: calc(var(--grip-size) / 2 + 6px); position: relative; isolation: isolate; aspect-ratio: var(--study-ratio); overflow: hidden; border-radius: 8px; background: var(--matte); user-select: none; -webkit-user-select: none; }
html[data-theme="dark"] .comparison { --matte: #202123; }
.comparison-plane { position: absolute; inset: 0; background: var(--matte); transition: background-color 1300ms cubic-bezier(.4,0,.2,1); }
.comparison-plane img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* One shared crop per pair: both source canvases retain identical geometry. */
.study-square .comparison-plane img { object-fit: cover; object-position: center; transform: scale(var(--study-zoom,1)); transform-origin: center; }
/* Each image has its own opaque matte. Transparent gaps never expose the
   other version, and both full canvases always share the same geometry. */
.comparison-after { clip-path: inset(0 0 0 var(--split)); }
.comparison-divider { position: absolute; left: clamp(1.5px,var(--split),calc(100% - 1.5px)); top: 0; bottom: 0; width: 3px; transform: translateX(-50%); border-inline: 1px solid rgba(255,255,255,.68); background: rgba(255,255,255,.25); box-shadow: 0 0 5px #0002; -webkit-backdrop-filter: blur(5px) saturate(1.6); backdrop-filter: blur(5px) saturate(1.6); pointer-events: none; }
.comparison-grip { position: absolute; z-index: 2; left: clamp(var(--grip-inset),var(--split),calc(100% - var(--grip-inset))); top: 50%; width: var(--grip-size); height: var(--grip-size); transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; gap: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(250,248,242,.18); color: #fff; box-shadow: inset 0 1px 2px #ffff, inset 0 -1px 3px #fff6, 0 3px 12px #0003; -webkit-backdrop-filter: blur(7px) saturate(1.8); backdrop-filter: blur(7px) saturate(1.8); pointer-events: none; transition: background-color 1300ms cubic-bezier(.4,0,.2,1), box-shadow .3s; }
.comparison-lens { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); clip-path: circle(calc(50% - 12px)); opacity: .86; filter: url("#comparisonGlass") blur(.65px) saturate(1.3); pointer-events: none; }
.comparison-grip i { position: relative; z-index: 2; display: block; width: 2px; height: 13px; border-radius: 2px; background: currentColor; box-shadow: 0 1px 3px #0008; }
.comparison-grip::before, .comparison-grip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.comparison-grip::before { z-index: 1; background: linear-gradient(135deg,#fff7,transparent 43%,#fff1 60%,#fff4); box-shadow: inset 0 0 8px #fff3; }
.comparison-grip::after { z-index: 3; padding: 2px; background: conic-gradient(from 0deg,transparent 0deg 250deg,#ffffff20 285deg,#fff 322deg,#f0cba1b3 342deg,transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; animation: comparison-shine 7s linear infinite; animation-play-state: paused; }
.comparison.is-in-view .comparison-grip::after { animation-play-state: running; }
@keyframes comparison-shine { to { transform: rotate(360deg); } }
html[data-theme="dark"] .comparison-grip { background: rgba(20,22,25,.2); border-color: #fff7; box-shadow: inset 0 1px 2px #fffb, inset 0 -1px 3px #fff3, 0 3px 14px #0005; }
.comparison:hover .comparison-grip, .comparison.is-dragging .comparison-grip { box-shadow: inset 0 1px 2px #fff, inset 0 -1px 3px #fff8, 0 4px 20px #0004; }
.comparison-input { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y; }
.comparison-input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; }
.comparison-input::-moz-range-thumb { width: 44px; height: 44px; border: 0; }
.comparison:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 5px; }
.comparison:has(input:focus-visible) .comparison-grip { outline: 2px solid var(--ink); outline-offset: 3px; }
.retouch-study figcaption { display: grid; grid-template-columns: 1fr auto 1fr; padding-block: .85rem; color: var(--muted); font-size: .59rem; letter-spacing: .14em; text-transform: uppercase; }
.retouch-study figcaption > span:last-of-type { text-align: right; }
.study-number { font-variant-numeric: tabular-nums; opacity: .6; }
.retouch-study figcaption .study-note { grid-column: 1 / -1; max-width: 68ch; padding-top: .9rem; color: var(--muted); font-size: .82rem; line-height: 1.7; letter-spacing: normal; text-transform: none; text-align: left; }
.pp-balanced-grid { align-items: center; }
.pp-balanced-grid .retouch-study { width: min(100%,var(--study-width)); justify-self: center; }
.pp-burger-study { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,.7fr); align-items: center; gap: clamp(1.5rem,4vw,4rem); margin-bottom: clamp(2.5rem,5vw,5rem); }
.pp-burger-study .retouch-study { width: 100%; }
.pp-endnote { border-top: 1px solid var(--rule); display: flex; align-items: start; justify-content: space-between; gap: 2rem; padding: 1.5rem 0 clamp(4rem,7vw,7rem); }
.pp-endnote p { max-width: 65ch; font-size: .75rem; color: var(--muted); line-height: 1.65; }
.pp-text-link { white-space: nowrap; font-size: .83rem; padding-bottom: .25rem; border-bottom: 1px solid var(--ink); transition: color .2s; }
.pp-text-link:hover { color: var(--accent); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; }
.footer-services { display: flex; flex-wrap: wrap; flex-basis: 100%; }
.cursor { display: none; }
@media (min-width:781px) and (max-width:1100px) {
  #nav .nav-inner { gap: .5rem; padding-inline: .8rem; }
  #nav .nav-links { gap: 1rem; }
  #nav .nav-links a { font-size: .77rem; }
}
@media (max-width:780px) {
  html[data-theme] .comparison-surround > .ambient-light { inset: -12% -9%; }
  html[data-theme="dark"] .comparison-surround.ambient-ready > .ambient-light { opacity: .28; }
  .comparison { --grip-size: 48px; }
  .pp-burger-study { grid-template-columns: 1fr; gap: 1.5rem; }
  .pp-burger-study .study-detail { width: min(62%,320px); justify-self: end; margin: 0; }
  .pp-main { padding-top: 2.75rem; }
  .pp-intro { grid-template-columns: 1fr; gap: 1.6rem; padding-bottom: 2.5rem; }
  .pp-kicker { margin: 0; }
  .pp-intro h1 { font-size: clamp(2.6rem,8.4vw,4.7rem); }
  .pp-intro-copy { max-width: 55ch; }
  .pp-signature { margin-top: .85rem; }
  .pp-gallery-heading { align-items: start; flex-direction: column; gap: .35rem; padding-block: 1rem; }
  .pp-chapter-head { grid-template-columns: auto 1fr; gap: .75rem 1.1rem; }
  .pp-chapter-head p { grid-column: 2; font-size: .8rem; }
  .pp-study-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .retouch-study, .retouch-study.study-featured, .pp-study-grid .retouch-study:last-child:nth-child(odd) { width: min(100%, var(--study-width)); justify-self: center; margin-inline: auto; }
  .pp-endnote { flex-direction: column; gap: 1.5rem; }
}
@media (hover:hover) and (pointer:fine) {
  html.custom-cursor-ready, html.custom-cursor-ready body, html.custom-cursor-ready a, html.custom-cursor-ready button { cursor: none; }
  html.custom-cursor-ready .cursor { display: flex; position: fixed; top: 0; left: 0; width: 8px; height: 8px; pointer-events: none; z-index: 10000; mix-blend-mode: difference; background: white; border: 0 solid white; border-radius: 50%; opacity: 0; transition: width .25s var(--ease), height .25s var(--ease), opacity .15s; }
  .cursor.link { width: 36px !important; height: 36px !important; background: transparent !important; border-width: 1px !important; }
  .cursor.text { width: 2px !important; height: 22px !important; border-radius: 1px !important; }
  .cursor.over-comparison, .cursor.over-native { opacity: 0 !important; }
}
@media (prefers-reduced-motion:reduce) {
  .comparison-surround > .ambient-light, .comparison-surround > .ambient-light::before, .comparison-surround > .ambient-light::after { transition: none !important; }
  .comparison-grip, .comparison-plane, .cursor { transition: none !important; }
  .comparison-grip::after { animation: none; }
}
@media (forced-colors:active) {
  html[data-theme] .comparison-surround > .ambient-light { display: none !important; }
}