/* Shared editorial presentation for native Projects and local previews. */
.portfolio-grid{display:flex;flex-direction:column;gap:clamp(80px,10vw,150px);padding-block:28px 40px}
.editorial-project{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(32px,5vw,90px);align-items:center;min-width:0}
.editorial-project .project-meta{padding:0;min-width:0}
.editorial-project .project-index{letter-spacing:1px;line-height:1.7;margin:0 0 24px;font-size:16px}
.editorial-project .project-meta h3{font-size:clamp(34px,4vw,52px);line-height:1.12;margin:0 0 24px}
.editorial-project .project-meta>p:not(.eyebrow){max-width:34em;margin:0;line-height:1.8}
.editorial-project .project-links{margin-top:28px;gap:16px 24px}
.editorial-project:nth-child(even){grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.editorial-project:nth-child(even) .project-meta{grid-column:2;grid-row:1}
.editorial-project:nth-child(even) .om-project-preview{grid-column:1;grid-row:1}
.om-project-preview{margin:0;min-width:0;--preview-tilt:-2deg}
.editorial-project:nth-child(even) .om-project-preview{--preview-tilt:2deg}
.om-project-preview .project-image{display:block;overflow:visible;border:0;background:none!important;text-decoration:none}
.om-browser{overflow:hidden;border:1px solid var(--browser-border);border-radius:12px;background:var(--browser-bg);box-shadow:0 12px 32px #00000016;transform:rotate(var(--preview-tilt));transition:transform .3s ease;transform-origin:center}
.om-browser .browser-chrome{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;background:var(--browser-bg);color:var(--browser-ink);border-bottom:1px solid var(--browser-border);font:16px/1.35 Arial,sans-serif}
.browser-dots{display:flex;gap:5px;flex:0 0 32px}
.om-browser .browser-chrome i{display:block;width:6px;height:6px;border:1px solid currentColor;border-radius:50%;opacity:.6}
.om-browser .browser-chrome .browser-label{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;text-align:center}
.browser-mark{flex:0 0 32px;text-align:right}
.om-browser .browser-chrome>span{margin:0}
.om-browser img{display:block;width:100%;height:auto;border:0;border-radius:0}
.editorial-project .project-image img{aspect-ratio:auto;object-fit:contain;object-position:center;transition:filter .3s ease}
.editorial-project .project-image:hover img{transform:none}
@media(hover:hover) and (pointer:fine){.om-project-preview .project-image:hover .om-browser{transform:translateY(-3px) rotate(calc(var(--preview-tilt) * .7))}}
.om-project-preview .project-image:focus-visible{outline:2px solid var(--om-secondary,#a5a8ab);outline-offset:12px;border-radius:12px}
.om-project-preview figcaption{margin:22px 0 0;font-size:16px;line-height:1.7}
.om-project-preview--hero{margin:8px var(--om-gutter,7%) 90px;--preview-tilt:-1.5deg}
.om-project-preview--hero .om-browser img{height:auto;aspect-ratio:auto}
.om-project-preview--hero .om-browser{box-shadow:0 12px 32px #00000012}
.case-services{font-size:16px;line-height:1.8;margin:22px 0}
.device-section .mobile-preview img{border:1px solid var(--om-line,#ffffff14)!important;border-radius:4px;box-shadow:none}
.om-browser{--browser-bg:#f2f2ef;--browser-ink:#292b29;--browser-border:#d5d7d8}
html[data-theme=day] .om-browser{--browser-bg:#141618;--browser-ink:#f2f2f2;--browser-border:#292c30}
.om-browser-viewport{aspect-ratio:16/9;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}
.om-browser-viewport::-webkit-scrollbar{display:none;width:0;height:0}
.om-browser .om-browser-viewport img{width:calc(100% + 1.2%);max-width:none;height:auto;object-fit:contain;object-position:top left}
/* Trim only the scrollbar captured at the right edge, without stretching the image. */
.portfolio>.section-head,.portfolio>.portfolio-grid{max-width:1450px;margin-inline:auto}
.portfolio>.section-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:clamp(28px,4vw,64px);align-items:start;margin-bottom:24px}
.portfolio>.section-head>div{display:contents}
.portfolio>.section-head .eyebrow{grid-column:1/-1;max-width:none;margin:0 0 24px!important}
.portfolio>.section-head h2{grid-column:1;margin:0!important}
.portfolio>.section-head>p{grid-column:2;max-width:46ch;margin:0!important}
.portfolio>.portfolio-grid{padding-top:24px}
@media(max-width:800px){.portfolio>.section-head{grid-template-columns:minmax(0,1fr);row-gap:24px;margin-bottom:16px}.portfolio>.section-head>p,.portfolio>.section-head h2{grid-column:1}.portfolio>.section-head .eyebrow{margin-bottom:0!important}.portfolio>.portfolio-grid{padding-top:16px}}
@media(max-width:800px){
 .portfolio-grid{gap:72px;padding-block:10px 12px}
 .editorial-project,.editorial-project:nth-child(even){grid-template-columns:minmax(0,1fr);gap:32px}
 .editorial-project:nth-child(even) .project-meta,.editorial-project:nth-child(even) .om-project-preview{grid-column:auto;grid-row:auto}
 .om-project-preview,.editorial-project:nth-child(even) .om-project-preview{--preview-tilt:0deg}
 .editorial-project .project-meta h3{font-size:36px;margin-bottom:20px}
 .editorial-project .project-index{margin-bottom:16px}
 .editorial-project .project-links{margin-top:22px}
 .om-browser{border-radius:8px}
 .om-browser .browser-chrome{padding:10px 12px;gap:8px}
 .om-project-preview--hero{margin-top:0;margin-bottom:56px}
 .om-browser .browser-chrome i{display:block}
}
@media(prefers-reduced-motion:reduce){.om-browser,.editorial-project .project-image img{transition:none}.om-project-preview .project-image:hover .om-browser{transform:rotate(var(--preview-tilt))}}
@media(max-width:700px){.om-project-preview img{filter:grayscale(1)!important}}

/* Keep desktop screenshots quieter and show their full original dimensions. */
@media(min-width:1100px){
 .editorial-project .om-project-preview{width:67%;justify-self:center}
 .om-project-preview--hero{width:57.62%;margin-inline:auto}
}

/* Touch devices: softly reveal the screenshot nearest the middle of the screen. */
@media(hover:none),(pointer:coarse){
 .om-project-preview img,.mobile-preview img,.case-gallery img,.about-portrait img{filter:grayscale(1)!important;transition:filter .35s ease}
 .om-project-preview img.is-centre-colour,.mobile-preview img.is-centre-colour,.case-gallery img.is-centre-colour,.about-portrait img.is-centre-colour{filter:grayscale(0)!important}
}
@media(prefers-reduced-motion:reduce){.om-project-preview img,.mobile-preview img,.case-gallery img,.about-portrait img{transition:none!important}}

/* A compact mobile browser viewport, retaining the complete scrollable capture. */
/* Static mobile device frame: show the complete capture without an inner scroll area. */
.om-mobile-browser{position:relative;width:min(100%,210px);margin-inline:auto;padding:25px 6px 19px;overflow:hidden;border:1px solid var(--om-secondary,#a5a8ab);border-radius:24px;background:var(--om-panel,#141618)}
.om-mobile-browser::before{content:"";position:absolute;top:10px;left:50%;width:36px;height:4px;border-radius:4px;background:var(--om-muted,#85898d);transform:translateX(-50%)}
.om-mobile-browser::after{content:"";position:absolute;bottom:7px;left:50%;width:54px;height:3px;border-radius:4px;background:var(--om-muted,#85898d);transform:translateX(-50%)}
.om-mobile-chrome{display:none}
.om-mobile-viewport{height:auto;overflow:hidden;scrollbar-width:none;border-radius:4px}
.om-mobile-viewport::-webkit-scrollbar{display:none}
.device-section .om-mobile-browser img{display:block;width:104%;max-width:none;height:auto;aspect-ratio:var(--mobile-capture-ratio,auto);border:0!important;border-radius:0;box-shadow:none}
html[data-theme=day] .om-mobile-browser{background:#eeece6;color:#60685c}

/* Genuine About portrait: restrained size, matching the portfolio colour reveal. */
.about-portrait{width:min(100%,360px);margin:32px 0}.about-portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:grayscale(1);transition:filter .35s ease}.about-portrait:hover img,.about-portrait:focus-within img{filter:grayscale(0) saturate(.72)}

/* An understated photographic print beside the opening About copy. */
.about-portrait{padding:8px;background:var(--om-panel,#141618);border:1px solid var(--om-line,#ffffff14);box-shadow:0 10px 24px #00000020}
html[data-theme=day] .about-portrait{background:#fff}
@media(min-width:901px){.editorial-page:has(>.about-portrait){display:flow-root;max-width:none;width:100%;padding-inline:var(--om-gutter,7%)}.editorial-page:has(>.about-portrait)>p{max-width:680px}.editorial-page>.about-portrait{float:right;width:clamp(320px,32vw,480px);margin:12px 12px 36px clamp(40px,6vw,100px);transform:rotate(3deg)}}
@media(hover:none),(pointer:coarse){.about-portrait img.is-centre-colour{filter:grayscale(0) saturate(.72)!important}}