/*
  Public site theme: bold studio, dark olive.
  The three brand colors come from the admin panel (Site and contact > Colors):
    Background = deep olive, Headings and accents = grey olive, Text = white.
  Type, spacing and layout live here.
*/
.pf {
  --pf-bg: #3e4422;
  --pf-accent: #656951;
  --pf-text: #ffffff;
  --pf-deep: color-mix(in srgb, var(--pf-bg) 58%, #000);
  --pf-soft: color-mix(in srgb, var(--pf-text) 76%, var(--pf-bg));
  --pf-line: color-mix(in srgb, var(--pf-text) 20%, var(--pf-bg));
  --pf-display: 'Bricolage Grotesque', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --pf-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --pf-gutter: clamp(1rem, 3.5vw, 3rem);
  --pf-max: 92rem;
  --pf-ease: cubic-bezier(.2, .8, .2, 1);
  --pf-dw: 800;   /* heading weight, set from the admin Fonts section */
  --pf-bw: 400;   /* text weight */
  --pf-ds: 1;     /* heading size scale */
  --pf-bs: 1;     /* text size scale */

  background: var(--pf-bg);
  color: var(--pf-text);
  font-family: var(--pf-body);
  font-size: calc(1rem * var(--pf-bs));
  font-weight: var(--pf-bw);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf img { max-width: 100%; }
:where(.pf) a { color: inherit; }
.pf :focus-visible { outline: 2px solid var(--pf-text); outline-offset: 3px; }
html.pf-lb-lock { overflow: hidden; }

/* ---------- Hero ---------- */
.pf-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: min(100svh, 62rem);
  padding: 0 var(--pf-gutter) clamp(1.4rem, 3.5vw, 2.8rem);
  background: var(--pf-deep);
}
.pf-herobg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .22; mix-blend-mode: luminosity;
}
.pf-heroshade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, transparent 40%, var(--pf-deep) 100%),
    radial-gradient(60rem 36rem at 85% 0%, color-mix(in srgb, var(--pf-accent) 38%, transparent), transparent 70%);
}
.pf-heroin {
  flex: 1; display: flex; flex-direction: column;
  width: 100%; max-width: var(--pf-max); margin-inline: auto;
  gap: clamp(1.6rem, 4vw, 3.2rem);
}
.pf-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.2rem; margin-bottom: auto;
}
.pf-brand { font-family: var(--pf-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.pf-topnav { display: flex; gap: .4rem; }
.pf-topnav a {
  padding: .45rem 1rem; border: 1px solid var(--pf-accent); border-radius: 99px;
  font-size: .92rem; text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.pf-topnav a:hover { background: var(--pf-text); color: var(--pf-bg); border-color: var(--pf-text); }

.pf-title {
  margin: 0;
  font-family: var(--pf-display); font-weight: var(--pf-dw); font-optical-sizing: auto;
  font-variation-settings: 'wdth' 78;
  font-size: calc(clamp(3.4rem, 15.2vw, 15.5rem) * var(--pf-ds));
  line-height: .86; letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.pf-line { display: flex; flex-wrap: wrap; align-items: center; gap: .12em; overflow: hidden; padding-block: .05em; }
.pf-line > span:first-child { display: inline-block; }
.pf-line:first-child { margin-bottom: -.03em; }

/* Cut-out portrait: full hero height, right side. Needs a transparent PNG. */
.pf-cutout {
  position: absolute; z-index: 0; top: 0; right: clamp(0px, 2vw, 2rem); bottom: 0;
  width: 44%; margin: 0; pointer-events: none;
}
.pf-cutout img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.pf-heroin { position: relative; z-index: 1; }
.pf-hero.has-cutout .pf-title { max-width: 58%; font-size: calc(clamp(3.4rem, 11.5vw, 12.5rem) * var(--pf-ds)); }
.pf-hero.has-cutout .pf-herofoot { max-width: 52%; }

.pf-herofoot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  padding-top: clamp(1.2rem, 3vw, 1.8rem);
  border-top: 1px solid var(--pf-line);
}
.pf-intro { max-width: 42rem; font-size: calc(clamp(1rem, 1.5vw, 1.15rem) * var(--pf-bs)); line-height: 1.55; color: var(--pf-soft); }
.pf-intro p:first-child { color: var(--pf-text); font-size: calc(clamp(1.15rem, 2vw, 1.5rem) * var(--pf-bs)); line-height: 1.35; font-weight: 500; margin-bottom: 1.1em; }
.pf-intro b, .pf-intro strong { color: var(--pf-text); }
.pf-scroll {
  flex: none; display: grid; place-items: center;
  width: clamp(3.6rem, 7vw, 5.2rem); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--pf-text);
  transition: background .25s, color .25s;
}
.pf-scroll svg { width: 40%; fill: currentColor; }
.pf-scroll:hover { background: var(--pf-text); color: var(--pf-bg); }

/* Page load: the headline lines rise, then the portrait opens. This is the only unprompted motion besides the band. */
@media (prefers-reduced-motion: no-preference) {
  .pf-line > span:first-child { animation: pf-rise 1s var(--pf-ease) both; }
  .pf-line:nth-child(2) > span:first-child { animation-delay: .12s; }
  .pf-cutout { animation: pf-fade 1.1s ease .45s both; }
  .pf-herofoot { animation: pf-fade .9s ease .75s both; }
}
@keyframes pf-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }

/* Rich text written in the admin editor */
.pf-rich p, .pf-rich div { margin: 0 0 .9em; }
.pf-rich > :last-child { margin-bottom: 0; }
.pf-rich b, .pf-rich strong { font-weight: 700; }
.pf-rich a { color: var(--pf-text); text-underline-offset: 3px; }
.pf-rich ul, .pf-rich ol { margin: 0 0 .9em; padding-left: 1.3em; }

/* ---------- Category band ---------- */
.pf-marquee { overflow: hidden; background: var(--pf-accent); color: var(--pf-text); padding-block: clamp(.7rem, 1.6vw, 1.1rem); }
.pf-mq-track { display: flex; width: max-content; animation: pf-slide 38s linear infinite; }
.pf-mq-half { display: flex; align-items: center; flex: none; }
.pf-mq-item {
  padding-inline: clamp(1rem, 2.4vw, 2rem);
  font-family: var(--pf-display); font-weight: var(--pf-dw); font-variation-settings: 'wdth' 82;
  font-size: calc(clamp(1.5rem, 3.6vw, 2.8rem) * var(--pf-ds)); line-height: 1.1; letter-spacing: -.02em; white-space: nowrap;
}
.pf-mq-star svg { display: block; width: clamp(.9rem, 1.6vw, 1.3rem); fill: currentColor; }
.pf-marquee:hover .pf-mq-track { animation-play-state: paused; }
@keyframes pf-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pf-mq-track { animation: none; } }

/* ---------- Filter bar ---------- */
.pf-nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--pf-deep) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pf-line);
}
.pf-navin {
  display: flex; gap: .5rem;
  max-width: var(--pf-max); margin-inline: auto;
  padding: .8rem var(--pf-gutter);
  overflow-x: auto; scrollbar-width: none;
}
.pf-navin::-webkit-scrollbar { display: none; }
.pf-navbtn {
  flex: none; display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1.05rem; border-radius: 99px;
  background: transparent; border: 1px solid var(--pf-accent); color: var(--pf-text);
  font: 500 .95rem var(--pf-body); white-space: nowrap; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.pf-navn { font-size: .78rem; font-variant-numeric: tabular-nums; opacity: .7; }
.pf-navbtn:hover { border-color: var(--pf-text); }
.pf-navbtn.is-active { background: var(--pf-text); color: var(--pf-bg); border-color: var(--pf-text); }

/* ---------- Work ---------- */
.pf-main {
  max-width: var(--pf-max); margin-inline: auto;
  padding-inline: var(--pf-gutter);
  scroll-margin-top: 4rem;
}
.pf-sec { padding-block: clamp(3rem, 7vw, 6.5rem); }
.pf-sec + .pf-sec { border-top: 1px solid var(--pf-line); }

.pf-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(1.4rem, 3.5vw, 2.8rem); width: 100%;
}
.pf-head h2 {
  margin: 0; min-width: 0; flex: 1 1 auto;
  font-family: var(--pf-display); font-weight: var(--pf-dw); font-optical-sizing: auto;
  font-variation-settings: 'wdth' 82;
  font-size: calc(clamp(2.5rem, 7.4vw, 6.6rem) * var(--pf-ds)); line-height: .92; letter-spacing: -.03em;
  text-wrap: balance; overflow-wrap: anywhere;
}
.pf-chip {
  flex: none; margin-top: .55rem; padding: .3rem .9rem;
  border: 1px solid var(--pf-accent); border-radius: 99px;
  font-size: .88rem; color: var(--pf-soft); white-space: nowrap;
}

.pf-desc { max-width: 40rem; margin: clamp(1.4rem, 3vw, 2.4rem) 0 0; font-size: calc(clamp(1.05rem, 1.7vw, 1.3rem) * var(--pf-bs)); line-height: 1.55; color: var(--pf-soft); }
.pf-desc b, .pf-desc strong { color: var(--pf-text); }
.pf-hint {
  display: flex; align-items: center; gap: .55rem; margin: 1.2rem 0 0;
  font-size: .92rem; color: var(--pf-soft);
}
.pf-hint svg { flex: none; width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--pf-text); fill: var(--pf-bg); }

/* Tiles: one image, optional caption, optional link */
.pf-tile { display: block; min-width: 0; text-decoration: none; color: inherit; }
button.pf-tile { width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; text-align: left; }
.pf-tile.is-zoom { cursor: zoom-in; }
.pf-thumb { display: block; position: relative; overflow: hidden; border-radius: 6px; background: var(--pf-accent); }
.pf-thumb img { display: block; width: 100%; height: auto; transition: transform .8s var(--pf-ease); }
.pf-thumb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 12, 4, .6), transparent 55%);
  opacity: 0; transition: opacity .35s;
}
.pf-tile.is-link { cursor: pointer; }
.pf-tile.is-link:hover .pf-thumb img, .pf-tile.is-link:hover .pf-phone img, .pf-tile.is-link:focus-visible .pf-thumb img,
.pf-tile.is-zoom:hover .pf-thumb img, .pf-tile.is-zoom:hover .pf-phone img, .pf-tile.is-zoom:focus-visible .pf-thumb img { transform: scale(1.05); }
.pf-tile.is-link:hover .pf-thumb::after, .pf-tile.is-link:focus-visible .pf-thumb::after,
.pf-tile.is-zoom:hover .pf-thumb::after, .pf-tile.is-zoom:focus-visible .pf-thumb::after { opacity: 1; }
.pf-cap { display: block; margin-top: .65rem; font-size: calc(.92rem * var(--pf-bs)); line-height: 1.4; color: var(--pf-soft); }
.pf-play {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 3;
  width: clamp(2.5rem, 20%, 3.2rem); aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--pf-text); border-radius: 50%;
  transition: transform .4s var(--pf-ease);
}
.pf-play svg { width: 62%; fill: var(--pf-bg); margin-left: 4%; }
.pf-tile.is-link:hover .pf-play, .pf-tile.is-link:focus-visible .pf-play { transform: scale(1.18); }

/* Reel row: tall cards, every second one dropped for a staggered rhythm */
.pf-reels { display: flex; gap: clamp(.6rem, 1.6vw, 1.3rem); align-items: flex-start; padding-bottom: 2.6rem; }
.pf-reels .pf-tile { flex: 1 1 0; max-width: 23rem; }
.pf-reels .pf-thumb { aspect-ratio: 3 / 4; }
.pf-reels .pf-thumb img { height: 100%; object-fit: cover; }
@media (min-width: 900px) { .pf-reels .pf-tile:nth-child(even) { margin-top: 2.6rem; } .pf-reels { padding-bottom: 0; } }

/* Showcase: text one side, phone or screenshots on the other */
.pf-showcase {
  display: grid; gap: clamp(1.5rem, 5vw, 5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.pf-showcase.is-solo { grid-template-columns: minmax(0, 1fr); }
.pf-showtext .pf-desc { margin: 0; max-width: 30rem; font-size: calc(clamp(1.15rem, 2.1vw, 1.65rem) * var(--pf-bs)); line-height: 1.4; color: var(--pf-text); }
.pf-showtext .pf-hint { margin-top: 1.6rem; }
.pf-mediarow { display: flex; gap: clamp(.6rem, 1.6vw, 1.2rem); justify-content: flex-end; align-items: flex-start; }
.pf-mediarow .pf-tile { flex: 1 1 0; max-width: 24rem; }
.pf-mediarow.is-phone .pf-tile { max-width: 17rem; }

/* Phone frame */
.pf-phone {
  display: block; position: relative; overflow: hidden;
  border: 8px solid #101208; border-radius: 2.3rem; background: #101208;
  box-shadow: 0 0 0 1px var(--pf-accent), 0 30px 50px -28px rgba(0, 0, 0, .8);
}
.pf-phone::before {
  content: ''; position: absolute; top: 8px; left: 50%; z-index: 2;
  width: 30%; height: 1rem; transform: translateX(-50%);
  background: #101208; border-radius: 1rem;
}
.pf-phone img { display: block; width: 100%; height: auto; transition: transform .8s var(--pf-ease); }

/* Image grid */
.pf-grid {
  display: grid; gap: clamp(.5rem, 1.2vw, .9rem); align-items: start;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.pf-grid .pf-phone { max-width: 18rem; margin-inline: auto; }
/* Natural: every photo keeps its own shape, packed into even columns */
.pf-grid.is-natural { display: block; column-count: var(--cols, 3); column-gap: clamp(.5rem, 1.2vw, .9rem); }
.pf-grid.is-natural .pf-tile { break-inside: avoid; margin-bottom: clamp(.5rem, 1.2vw, .9rem); }
/* Uniform: every photo cropped to the same shape */
.pf-grid.is-uniform .pf-thumb { aspect-ratio: var(--ratio, 4 / 5); }
.pf-grid.is-uniform .pf-thumb img { height: 100%; object-fit: cover; }

/* Carousel: a fanned stack of cards. Arrows always show, swipe works on touch. */
.pf-car { width: min(100%, 60rem); margin-inline: auto; }
.pf-car-stage {
  position: relative; height: clamp(24rem, 64vw, 41rem); touch-action: pan-y; user-select: none; -webkit-user-select: none;
  outline-offset: 6px; overflow: hidden;
}
.pf-car-slide {
  --d: 0; --a: 0;
  position: absolute; left: 50%; top: 1.4rem; bottom: 1.4rem; aspect-ratio: 4 / 5; max-width: 82%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateX(calc(var(--d) * 9.5rem)) rotate(calc(var(--d) * 5deg)) scale(calc(1 - var(--a) * .07));
  z-index: calc(10 - var(--a)); opacity: calc(1 - var(--a) * .22);
  transition: transform .6s var(--pf-ease), opacity .4s ease;
}
.pf-car-slide.is-far { opacity: 0; pointer-events: none; }
.pf-car-slide .pf-tile { height: 100%; }
.pf-car-slide .pf-thumb { height: 100%; border-radius: 14px; box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .75); }
.pf-car-slide .pf-thumb img { height: 100%; object-fit: cover; }
.pf-car-slide .pf-cap { display: none; }
.pf-car-slide:not(.is-active) .pf-tile { cursor: pointer; }
.pf-car-bar { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; }
.pf-car-nav {
  flex: none; display: grid; place-items: center; width: 3.1rem; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--pf-text); background: transparent; color: var(--pf-text); cursor: pointer;
  transition: background .25s, color .25s;
}
.pf-car-nav svg { width: 46%; fill: currentColor; }
.pf-car-nav:hover { background: var(--pf-text); color: var(--pf-bg); }
.pf-car-cap { flex: 1; min-width: 0; margin: 0; font-family: var(--pf-display); font-weight: var(--pf-dw); font-size: calc(clamp(1.15rem, 2.4vw, 1.7rem) * var(--pf-ds)); line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pf-car-count { flex: none; font-size: .95rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--pf-soft); }
.pf-car + .pf-desc { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
@media (max-width: 640px) {
  .pf-car-stage { height: clamp(22rem, 108vw, 34rem); }
  .pf-car-slide { max-width: 78%; transform: translateX(-50%) translateX(calc(var(--d) * 3.4rem)) rotate(calc(var(--d) * 5deg)) scale(calc(1 - var(--a) * .07)); }
  .pf-car-bar { gap: .6rem; }
  .pf-car-count { display: none; }
}

/* Instagram style profile header */
.pf-profile { display: flex; align-items: center; gap: 1.1rem; width: fit-content; margin: 0 0 1.4rem; }
.pf-avatar {
  flex: none; width: 3.4rem; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pf-accent); color: var(--pf-text);
  font-family: var(--pf-display); font-weight: 700; font-size: 1.3rem;
  box-shadow: 0 0 0 3px var(--pf-bg), 0 0 0 5px var(--pf-text);
  margin: 6px; overflow: hidden;
}
.pf-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-handle { display: block; font-weight: 700; font-size: 1.05rem; }
.pf-stats { display: flex; gap: 1.2rem; margin: .3rem 0 0; }
.pf-stats div { display: flex; flex-direction: column-reverse; line-height: 1.25; }
.pf-stats dt { font-size: .78rem; color: var(--pf-soft); }
.pf-stats dd { margin: 0; font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; }

/* ---------- Contact: white band, the close ---------- */
.pf-contact { background: var(--pf-text); color: var(--pf-bg); padding: clamp(3.5rem, 9vw, 8rem) var(--pf-gutter) clamp(2.6rem, 6vw, 5rem); }
.pf-contactin { max-width: var(--pf-max); margin-inline: auto; }
.pf-contact h2 {
  margin: 0; font-family: var(--pf-display); font-weight: var(--pf-dw); font-optical-sizing: auto;
  font-variation-settings: 'wdth' 78;
  font-size: calc(clamp(3.4rem, 15vw, 15rem) * var(--pf-ds)); line-height: .86; letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.pf-contactrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1.2rem, 3vw, 2.4rem);
  margin-top: clamp(1.8rem, 4vw, 3.2rem); padding-top: clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--pf-bg) 25%, transparent);
}
.pf-cta {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: .45rem .45rem .45rem 1.6rem; border-radius: 99px;
  background: var(--pf-bg); color: var(--pf-text); text-decoration: none;
  font: 600 clamp(1.05rem, 2vw, 1.3rem) var(--pf-display);
  transition: background .25s;
}
.pf-cta:hover { background: var(--pf-accent); }
.pf-cta-ic { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; border-radius: 50%; background: var(--pf-text); color: var(--pf-bg); transition: transform .35s var(--pf-ease); }
.pf-cta-ic svg { width: 46%; fill: currentColor; }
.pf-cta:hover .pf-cta-ic { transform: rotate(45deg); }
.pf-mail { font: 600 clamp(1.15rem, 3vw, 2.1rem) var(--pf-display); letter-spacing: -.015em; text-underline-offset: 5px; overflow-wrap: anywhere; }
.pf-tel { font-size: clamp(1rem, 1.8vw, 1.25rem); text-decoration: none; opacity: .8; margin-left: auto; }
.pf-contact a:focus-visible { outline-color: var(--pf-bg); }

.pf-foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.2rem var(--pf-gutter); background: var(--pf-deep);
  font-size: .88rem; color: var(--pf-soft);
}
.pf-totop { text-underline-offset: 4px; }
.pf-empty { padding: 4rem var(--pf-gutter); text-align: center; color: var(--pf-soft); }

/* ---------- Reel lightbox ---------- */
.pf-lb {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 1rem;
  opacity: 0; transition: opacity .25s ease;
}
.pf-lb[hidden] { display: none; }
.pf-lb.is-open { opacity: 1; }
.pf-lb-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--pf-deep) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pf-lb-close {
  position: absolute; top: max(.9rem, env(safe-area-inset-top)); right: max(.9rem, env(safe-area-inset-right)); z-index: 2;
  display: grid; place-items: center; width: 2.9rem; aspect-ratio: 1; border-radius: 50%;
  border: 0; background: var(--pf-text); color: var(--pf-bg); cursor: pointer;
  transition: transform .3s var(--pf-ease);
}
.pf-lb-close svg { width: 46%; fill: currentColor; }
.pf-lb-close:hover { transform: rotate(90deg); }
.pf-lb-panel { position: relative; z-index: 1; width: min(26rem, 100%); transform: translateY(14px) scale(.98); transition: transform .35s var(--pf-ease); }
.pf-lb.is-open .pf-lb-panel { transform: none; }
.pf-lb-stage {
  position: relative; width: 100%;
  height: min(calc(100dvh - 9.5rem), 45rem); min-height: 22rem;
  border-radius: 14px; overflow: hidden; background: #000;
}
.pf-lb-load { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--pf-soft); font-size: .95rem; }
.pf-lb-load[hidden] { display: none; }
.pf-lb-frame, .pf-lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.pf-lb-bar { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.pf-lb-nav {
  display: grid; place-items: center; width: 2.6rem; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--pf-accent); background: transparent; color: var(--pf-text); cursor: pointer;
  transition: background .25s, color .25s;
}
.pf-lb-nav[hidden] { display: none; }
.pf-lb-nav svg { width: 50%; fill: currentColor; }
.pf-lb-nav:hover { background: var(--pf-text); color: var(--pf-bg); }
.pf-lb-count { min-width: 3.4rem; text-align: center; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--pf-soft); }
.pf-lb-open {
  margin-left: auto; padding: .6rem 1.1rem; border-radius: 99px;
  background: var(--pf-text); color: var(--pf-bg); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.pf-lb-open:hover { background: var(--pf-accent); color: var(--pf-text); }
.pf-lb :focus-visible { outline-color: var(--pf-text); }
.pf-lb-open:focus-visible, .pf-lb-close:focus-visible { outline-offset: 3px; }


/* Photo mode in the lightbox */
.pf-lb-panel.is-image { width: min(72rem, 100%); }
.pf-lb-panel.is-image .pf-lb-stage { background: transparent; min-height: 14rem; height: min(calc(100dvh - 9.5rem), 52rem); touch-action: pan-y; }
.pf-lb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.pf-lb-cap { flex: 1; min-width: 0; margin: 0 0 0 .4rem; font-size: .95rem; color: var(--pf-soft); overflow-wrap: anywhere; }
.pf-lb-panel.is-image .pf-lb-open { display: none; }
.pf-lb-panel:not(.is-image) .pf-lb-cap { display: none; }

/* ---------- Phone and small tablet ---------- */
@media (max-width: 820px) {
  .pf-hero { min-height: 88svh; }
  .pf-hero.has-cutout { padding-bottom: 0; }
  .pf-hero.has-cutout .pf-title { max-width: none; font-size: calc(clamp(3.4rem, 17vw, 9rem) * var(--pf-ds)); }
  .pf-hero.has-cutout .pf-herofoot { max-width: none; }
  .pf-heroin { order: 1; flex: 0 0 auto; }
  .pf-cutout { position: relative; order: 2; top: auto; right: auto; bottom: auto; width: min(80%, 24rem); height: auto; align-self: flex-end; margin-top: 1.2rem; }
  .pf-cutout img { height: auto; max-height: 70svh; }
  .pf-herofoot { flex-direction: column; align-items: flex-start; }
  .pf-scroll { display: none; }
  .pf-showcase { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pf-mediarow { justify-content: flex-start; }
  .pf-head { flex-direction: column; gap: .9rem; }
  .pf-chip { margin-top: 0; order: -1; }
  .pf-tel { margin-left: 0; }
}
@media (max-width: 640px) {
  .pf-hero { min-height: 82svh; }
  .pf-title { font-size: calc(20.5vw * var(--pf-ds)); }
  .pf-hero.has-cutout .pf-title { font-size: calc(19vw * var(--pf-ds)); }
  .pf-contact h2 { font-size: calc(18.5vw * var(--pf-ds)); }
  .pf-topnav a { padding: .4rem .85rem; font-size: .88rem; }
  .pf-reels {
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pf-gutter)); padding-inline: var(--pf-gutter);
  }
  .pf-reels::-webkit-scrollbar { display: none; }
  .pf-reels .pf-tile { flex: 0 0 72%; scroll-snap-align: start; }
  .pf-grid { grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr)); }
  .pf-grid.is-natural { column-count: var(--cols-m, 2); }
  .pf-cta { width: 100%; justify-content: space-between; }
  .pf-lb { padding: 4.1rem .6rem .6rem; align-items: start; }
  .pf-lb-panel { width: 100%; }
  .pf-lb-stage, .pf-lb-panel.is-image .pf-lb-stage { height: calc(100dvh - 9.4rem); min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pf *, .pf *::before, .pf *::after { transition: none !important; scroll-behavior: auto !important; }
}