/*
 * "Lens" (portfolio): dark and edge to edge for photographers and filmmakers. Near black, bone white type and
 * one warm light; a full-screen opening picture with the name in a wide grotesque across its foot, a slow strip
 * of pictures, the work as a wall with one large picture leading, outlined numbers, services as big uppercase
 * rows whose picture shows when pointed at, and a quiet contact sheet. Works with the portfolio sections
 * (sections/pf, skins/portfolio.css), the personal ones (me-*) and the general ones (sx-*). Layout choices still
 * come from Website settings (site.css).
 */
:root {
    --ln-bg: #0b0b0c;
    --ln-panel: #141416;
    --ln-ink: #ededea;
    --ln-text: #a6a6a1;
    --ln-mute: #6f6f6b;
    --ln-line: rgba(237, 237, 234, .13);
    --ln-light: var(--primary-color, #e6e1d6);
    --ln-display: var(--pf-heading-font, 'Syne', 'Arial Black', sans-serif);
    --sx-heading-weight: 700;
    --sx-heading-tracking: -.02em;
    --fo-bg: var(--ln-bg);
    --fo-ink: var(--ln-ink);
    --fo-text: var(--ln-text);
    --fo-mute: var(--ln-mute);
    --fo-line: var(--ln-line);
    --fo-card: var(--ln-panel);
    --fo-accent: var(--ln-light);
    --fo-on-accent: #0b0b0c;
    --fo-dark: #050506;
    --fo-radius: 0px;
    --fo-head: var(--ln-display);
}

body[data-pf-site] { background: var(--ln-bg) !important; color: var(--ln-text); }
body[data-pf-site] ::selection { background: var(--ln-light); color: #0b0b0c; }

/* ---- header: one thin dark bar, the name in the display face, spaced links */
body[data-pf-site] header.header_wrap,
body[data-pf-site] header.header_wrap .middle-header,
body[data-pf-site] header.header_wrap .bottom_header { background: var(--ln-bg) !important; border: 0 !important; box-shadow: none !important; }
body[data-pf-site] header.header_wrap { border-bottom: 1px solid var(--ln-line) !important; }
body[data-pf-site] header.header_wrap .navbar-brand strong { font-family: var(--ln-display) !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: .02em !important; text-transform: uppercase; color: var(--ln-ink) !important; }
body[data-pf-site] header.header_wrap .navbar-nav .nav-link,
body[data-pf-site] header.header_wrap nav a { color: var(--ln-text) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .24em !important; text-transform: uppercase !important; text-decoration: none; }
body[data-pf-site] header.header_wrap .navbar-nav .nav-link:hover,
body[data-pf-site] header.header_wrap .navbar-nav .active > .nav-link { color: var(--ln-ink) !important; background: transparent !important; }

/* ---- shared: index numbers on a hairline, wide uppercase titles */
body[data-pf-site] { counter-reset: ln-part; }
.pf-section { padding: clamp(64px, 7vw, 112px) 0; background: var(--ln-bg); }
.pf-wrap { width: min(100% - 48px, 1480px); }
.pf-head { counter-increment: ln-part; margin-bottom: clamp(28px, 3vw, 44px); }
.pf-head-rule { grid-template-columns: auto 1fr auto !important; gap: 22px !important; padding-top: 14px !important; border-top: 1px solid var(--ln-line) !important; color: var(--ln-ink) !important; font-size: 11.5px !important; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.pf-head-no::before { content: "[" counter(ln-part, decimal-leading-zero) "]"; color: var(--ln-mute); }
.pf-head-label { color: var(--ln-ink); }
.pf-head-link { color: var(--ln-ink) !important; text-decoration: none !important; }
.pf-head-link::after { content: " ↗"; }
.pf-head-link:hover { color: var(--ln-light) !important; }
html body[data-pf-site] .pf-head h2, html body[data-pf-site] .me-head h2 { margin: 26px 0 0 !important; font-family: var(--ln-display) !important; font-size: clamp(40px, 6vw, 104px) !important; font-weight: 800 !important; line-height: .92 !important; letter-spacing: -.03em !important; text-transform: uppercase; color: var(--ln-ink) !important; }
.pf-lead { color: var(--ln-text); font-size: 17px; }
.pf-btn { min-height: 50px; padding: 0 28px; border: 1px solid var(--ln-ink) !important; border-radius: 0 !important; background: transparent !important; color: var(--ln-ink) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .22em; text-transform: uppercase; transition: background-color .25s ease, color .25s ease; }
.pf-btn:hover { background: var(--ln-ink) !important; color: #0b0b0c !important; }
.pf-btn-light { border-color: var(--ln-ink) !important; background: var(--ln-ink) !important; color: #0b0b0c !important; }
.pf-btn-light:hover { background: transparent !important; color: var(--ln-ink) !important; }
.pf-center { margin: clamp(36px, 4vw, 56px) 0 0; text-align: center; }

/* ---- opening: the picture fills the screen, the name sits huge on its foot */
.pf-hero-reel { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(560px, calc(100vh - 110px), 960px); min-height: clamp(560px, calc(100svh - 110px), 960px); overflow: hidden; padding: 0; background: #050506; color: #fff; isolation: isolate; }
.pf-reel-media { position: absolute; inset: 0; z-index: -2; }
.pf-reel-media img, .pf-reel-media .sx-art { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(.85) contrast(1.05); animation: ln-settle 2.4s cubic-bezier(.2, .7, .2, 1) both; }
.pf-hero-reel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 5, 6, .55) 0%, rgba(5, 5, 6, 0) 22%, rgba(5, 5, 6, 0) 45%, rgba(5, 5, 6, .9) 100%); }
.pf-reel-top { display: flex; justify-content: space-between; gap: 20px; padding-top: 26px; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.pf-reel-top p { margin: 0; color: rgba(255, 255, 255, .82); }
.pf-reel-copy { padding-bottom: clamp(26px, 3vw, 40px); }
.pf-reel-kicker { margin: 0 0 12px; color: var(--ln-light); font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
html body[data-pf-site] .pf-hero.pf-hero-reel h1.pf-reel-title, html body[data-pf-site] .pf-hero.pf-hero-reel .sx-h1.pf-reel-title { margin: 0 0 clamp(20px, 2.4vw, 34px) !important; color: #fff !important; font-family: var(--ln-display) !important; font-size: clamp(36px, 12.2vw, 210px) !important; overflow-wrap: anywhere; font-weight: 800 !important; line-height: .84 !important; letter-spacing: -.045em !important; text-transform: uppercase; }
.pf-reel-title em { color: var(--ln-light); font-style: normal; }
.pf-reel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 60px; align-items: end; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .28); }
.pf-reel-lead { max-width: 560px; margin: 0; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.6; }
.pf-reel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin: 0; }
.pf-reel-link { padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .5); color: #fff !important; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; }
.pf-reel-link:hover { border-bottom-color: #fff; }
.pf-reel-next { display: flex; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.pf-reel-next li { list-style: none; }
.pf-reel-next a { position: relative; display: block; width: 132px; overflow: hidden; color: #fff; text-decoration: none; }
.pf-reel-next img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .7; filter: grayscale(1); transition: opacity .3s ease, filter .3s ease; }
.pf-reel-next a:hover img { opacity: 1; filter: none; }
.pf-reel-next span { display: block; margin-top: 7px; overflow: hidden; color: rgba(255, 255, 255, .75); font-size: 11px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ln-settle { from { transform: scale(1.06); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---- strip: pictures in black and white, colour when pointed at */
.pf-marquee { padding: 14px 0; border-bottom: 1px solid var(--ln-line); background: var(--ln-bg); }
.pf-marquee ul { gap: 14px; }
.pf-marquee a { width: 230px; height: 300px; border-radius: 0; }
.pf-marquee li:nth-child(even) a { height: 300px; margin-top: 0; }
.pf-marquee li:nth-child(3n) a { width: 400px; }
.pf-marquee img { filter: grayscale(1) brightness(.85); transition: filter .4s ease; }
.pf-marquee a:hover img { filter: none; }

/* ---- work: a wall, the first picture large, titles on the picture when pointed at */
.pf-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; }
.pf-highlight { aspect-ratio: 4 / 5; border-radius: 0; background: var(--ln-panel); }
.pf-highlight:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.pf-highlight:nth-child(6n + 5) { grid-column: span 2; aspect-ratio: auto; }
.pf-highlight > img, .pf-highlight > .sx-art { transition: transform 1s cubic-bezier(.2, .7, .2, 1), filter .5s ease; }
.pf-highlight:hover > img { transform: scale(1.04); filter: brightness(.7); }
.pf-highlight-copy { gap: 6px; padding: clamp(18px, 2vw, 28px); background: linear-gradient(0deg, rgba(5, 5, 6, .85), rgba(5, 5, 6, 0)); opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; }
.pf-highlight:hover .pf-highlight-copy, .pf-highlight:focus-visible .pf-highlight-copy { opacity: 1; transform: none; }
.pf-highlight-copy strong { color: #fff; font-family: var(--ln-display); font-size: clamp(20px, 2vw, 30px); font-weight: 700; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.pf-highlight:first-child .pf-highlight-copy strong { font-size: clamp(28px, 3.4vw, 54px); }
.pf-highlight-copy em { font-size: 13.5px; line-height: 1.5; }
.pf-highlight-meta { order: -1; gap: 14px; color: var(--ln-light); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }
.pf-highlight-meta b { font-weight: 600; }
.pf-highlight .pf-btn { display: none; }
.pf-highlight::after { content: "↗"; position: absolute; top: 16px; right: 18px; color: #fff; font-size: 20px; opacity: 0; transition: opacity .3s ease; }
.pf-highlight:hover::after { opacity: 1; }

/* ---- about: two pictures and the story, then outlined numbers across the page */
.pf-about-numbers .pf-about-grid { grid-template-columns: minmax(0, .8fr) minmax(0, .55fr) minmax(0, 1.3fr); gap: clamp(14px, 2vw, 28px); align-items: end; }
.pf-about-pic { border-radius: 0; background: var(--ln-panel); }
.pf-about-pic-1 { aspect-ratio: 3 / 4; }
.pf-about-pic-2 { aspect-ratio: 3 / 4; margin-bottom: 18%; }
.pf-about-pic img { filter: grayscale(.35); }
.pf-about-lead { align-self: start; margin: 0 0 0 clamp(0px, 2vw, 30px); color: var(--ln-ink); font-size: clamp(20px, 1.9vw, 28px); font-weight: 400; line-height: 1.38; letter-spacing: -.01em; }
.pf-numbers { gap: 0; margin: clamp(48px, 6vw, 90px) 0 0 !important; padding: 0; border-top: 1px solid var(--ln-line); list-style: none; }
.pf-numbers li { padding: 26px 22px 0 0; list-style: none; }
.pf-numbers li + li { padding-left: 22px; border-left: 1px solid var(--ln-line); }
.pf-numbers strong { color: var(--ln-ink); font-family: var(--ln-display); font-size: clamp(56px, 7vw, 120px); font-weight: 800; line-height: .9; letter-spacing: -.04em; transition: color .3s ease; }
.pf-numbers li:hover strong { color: var(--ln-light); }
.pf-numbers span { margin-top: 14px; color: var(--ln-text); font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }

/* ---- services: big uppercase rows, the picture shows when pointed at */
.pf-services-dark { background: #050506; color: var(--ln-text); }
.pf-services-dark .pf-head-rule { border-top-color: var(--ln-line) !important; }
.pf-service-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ln-line); }
html body[data-pf-site] .pf-service-list > li { list-style: none; }
.pf-services-dark .pf-service { position: relative; grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr) !important; gap: 28px; padding: clamp(26px, 3vw, 44px) 0; border-bottom: 1px solid var(--ln-line); transition: padding .35s ease; }
.pf-services-dark .pf-service-no { color: var(--ln-mute); font-size: 12px; font-weight: 600; letter-spacing: .2em; }
.pf-services-dark .pf-service-no::before { content: "("; }
.pf-services-dark .pf-service-no::after { content: ")"; }
html body[data-pf-site] .pf-services-dark .pf-service-copy h3 { margin: 0 !important; font-family: var(--ln-display) !important; font-size: clamp(32px, 4.6vw, 76px) !important; font-weight: 800 !important; line-height: .92 !important; letter-spacing: -.03em !important; text-transform: uppercase; color: var(--ln-ink) !important; transition: color .3s ease; }
.pf-services-dark .pf-service-text { max-width: 380px; color: var(--ln-text); font-size: 15px; line-height: 1.6; }
.pf-services-dark .pf-service-pic { position: absolute; top: 50%; right: 34%; z-index: 2; width: 220px; aspect-ratio: 4 / 5; border-radius: 0; opacity: 0; pointer-events: none; transform: translate(0, -50%) rotate(-3deg) scale(.92); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.pf-services-dark .pf-service:hover .pf-service-pic { opacity: 1; transform: translate(0, -50%) rotate(-3deg); }
.pf-services-dark .pf-service:hover { padding-left: 14px; }
html body[data-pf-site] .pf-services-dark .pf-service:hover h3 { color: var(--ln-light) !important; }

/* ---- personal sections: tag on a hairline, wide titles */
.me-section { padding: clamp(64px, 7vw, 112px) 0; background: var(--ln-bg); color: var(--ln-text); }
.me-section .sx-wrap { width: min(100% - 48px, 1480px); max-width: none; }
.me-head { margin-bottom: clamp(32px, 4vw, 56px); padding-top: 14px; border-top: 1px solid var(--ln-line); counter-increment: ln-part; }
.me-tag { display: block; color: var(--ln-ink); font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.me-tag::before { content: "[" counter(ln-part, decimal-leading-zero) "]  "; color: var(--ln-mute); white-space: pre; }
.me-head h2 b { font-weight: 800; }
.me-head h2 span { color: var(--ln-mute); font-weight: 800; }
.me-head p { max-width: 560px; margin: 18px 0 0; color: var(--ln-text); font-size: 16px; }

/* kind words: plain quotes between hairlines */
.me-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-top: 1px solid var(--ln-line); }
.me-quotes .me-card { margin: 0; padding: 30px 28px 30px 0; border: 0; border-radius: 0; background: transparent; }
.me-quotes .me-card + .me-card { padding-left: 28px; border-left: 1px solid var(--ln-line); }
.me-quotes blockquote, .me-quotes .me-card p { color: var(--ln-ink); font-size: 18px; line-height: 1.55; }
.me-quotes figcaption, .me-quotes cite { color: var(--ln-mute); font-size: 11.5px; font-style: normal; letter-spacing: .2em; text-transform: uppercase; }

/* contact: how to reach you as a sheet, the form with lines for fields */
.me-contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.me-contact-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.me-avatar { position: relative; display: block; width: 100%; max-width: 360px; aspect-ratio: 4 / 5; margin-bottom: 28px; overflow: hidden; background: var(--ln-panel); }
.me-avatar img, .me-avatar .sx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.me-way { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--ln-line); }
.me-way:first-of-type { border-top: 1px solid var(--ln-line); }
.me-way .me-icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ln-line); border-radius: 50%; color: var(--ln-light); }
.me-way strong { display: block; margin-bottom: 3px; color: var(--ln-mute); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
html body[data-pf-site] .me-way a, html body[data-pf-site] .me-way em { color: var(--ln-ink) !important; font-size: 17px; font-style: normal; text-decoration: none; overflow-wrap: anywhere; }
html body[data-pf-site] .me-way a:hover { color: var(--ln-light) !important; }
.me-form .pf-contact-info, .me-form .heading_s1, .me-form .contact-field-address_wrapper, .me-form .form-label { display: none !important; }
.me-form .section, .me-form .container, .me-form .field_form { margin: 0 !important; padding: 0 !important; max-width: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.me-form .contact-form-row { row-gap: 0; }
.me-form .contact-form-row > [class*="col-"] { margin-bottom: 20px; }
html body[data-pf-site] .me-form input.form-control,
html body[data-pf-site] .me-form textarea.form-control,
html body[data-pf-site] .me-form select.form-control { height: 56px; padding: 0 2px !important; border: 0 !important; border-bottom: 1px solid var(--ln-line) !important; border-radius: 0 !important; background: transparent !important; color: var(--ln-ink) !important; font-size: 17px; box-shadow: none !important; }
html body[data-pf-site] .me-form textarea.form-control { height: 150px; padding-top: 16px !important; }
html body[data-pf-site] .me-form .form-control::placeholder { color: var(--ln-mute) !important; }
html body[data-pf-site] .me-form .form-control:focus { border-bottom-color: var(--ln-light) !important; }
html body[data-pf-site] .me-form button[type=submit] { min-height: 54px; padding: 0 34px; border: 1px solid var(--ln-ink) !important; border-radius: 0 !important; background: var(--ln-ink) !important; color: #0b0b0c !important; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
html body[data-pf-site] .me-form button[type=submit]:hover { background: transparent !important; color: var(--ln-ink) !important; }
html body[data-pf-site] .me-form p, html body[data-pf-site] .me-form label { color: var(--ln-text) !important; }

/* ---- general sections on the same dark page */
body[data-pf-site] .sx-kicker { color: var(--ln-light); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; }
body[data-pf-site] .sx-head h2 { font-family: var(--ln-display) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: -.02em; }
body[data-pf-site] .sx-link { color: var(--ln-ink) !important; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; }
body[data-pf-site] .sx-btn { border: 1px solid var(--ln-ink) !important; border-radius: 0 !important; background: transparent !important; color: var(--ln-ink) !important; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; }
body[data-pf-site] .sx-btn:hover { background: var(--ln-ink) !important; color: #0b0b0c !important; }

/* ---- footer: dark and hairlines */
body[data-pf-site] footer,
body[data-pf-site] footer .footer_top,
body[data-pf-site] footer .bottom_footer { background: #050506 !important; }
body[data-pf-site] footer { border-top: 1px solid var(--ln-line); }
body[data-pf-site] footer, body[data-pf-site] footer a, body[data-pf-site] footer p, body[data-pf-site] footer li { color: var(--ln-text) !important; }
body[data-pf-site] footer a:hover { color: var(--ln-ink) !important; }
body[data-pf-site] footer .widget_title { color: var(--ln-ink) !important; font-family: inherit !important; font-size: 11px !important; letter-spacing: .24em; text-transform: uppercase !important; }
body[data-pf-site] footer .bottom_footer { border-top: 1px solid var(--ln-line) !important; }

/* ---- smaller screens */
@media (max-width: 991.98px) {
    .pf-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-highlight:nth-child(6n + 5) { grid-column: auto; aspect-ratio: 4 / 5; }
    .pf-about-numbers .pf-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pf-about-lead { grid-column: 1 / -1; margin: 10px 0 0; }
    .pf-services-dark .pf-service-pic { display: none; }
}
@media (max-width: 767.98px) {
    .pf-wrap, .me-section .sx-wrap { width: calc(100% - 32px); }
    .pf-reel-top { flex-direction: column; gap: 6px; }
    .pf-reel-row, .me-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-reel-next { display: none; }
    .pf-highlights { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .pf-highlight:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
    .pf-highlight-copy { opacity: 1; transform: none; }
    .pf-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .pf-numbers li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .pf-services-dark .pf-service { grid-template-columns: 54px minmax(0, 1fr) !important; gap: 12px 16px; }
    .pf-services-dark .pf-service-text { grid-column: 2; }
    .pf-marquee a, .pf-marquee li:nth-child(even) a { width: 170px; height: 220px; }
    .pf-marquee li:nth-child(3n) a { width: 280px; }
    .me-quotes .me-card + .me-card { padding-left: 0; border-left: 0; border-top: 1px solid var(--ln-line); }
}
@media (prefers-reduced-motion: reduce) { .pf-reel-media img { animation: none; } }

/* header and opening fit flush; the menu has no panel of its own */
body[data-pf-site] header.header_wrap .bottom_header { margin-bottom: 0 !important; }
body[data-pf-site] header.header_wrap .navbar, body[data-pf-site] header.header_wrap .navbar-collapse, body[data-pf-site] header.header_wrap .navbar-nav { background: transparent !important; }
html body[data-pf-site] .pf-hero-reel .pf-reel-next { margin-top: 30px !important; }
.me-form .iti { width: 100%; }
html body[data-pf-site] .me-form .iti input.form-control, html body[data-pf-site] .me-form input.js-phone-number-mask { padding-left: 92px !important; }
.me-form .iti__selected-flag, .me-form .iti__country-container { background: transparent !important; }
html body[data-pf-site] .me-contact .me-head h2 span { color: var(--ln-mute) !important; }

/* The phone menu (a drawer) keeps the platform's own readable size; the small spaced capitals are for the bar. */
@media (max-width: 991.98px) {
    html body[data-pf-site] header.header_wrap .mobile_side_menu .navbar-nav > li > .nav-link { font-size: 17px !important; letter-spacing: .02em !important; }
}