/* Reference-led opening. Scoped so all sections below keep their own design. */
.pv-reference-header,.pv-reference-hero { --pv-ref-ink:#27272b; font-family:Inter,Arial,sans-serif; box-sizing:border-box; }
.pv-reference-header *,.pv-reference-hero * { box-sizing:border-box; }
.pv-reference-header { position:relative; z-index:30; display:flex; align-items:center; gap:32px; min-height:86px; padding:16px 4.8%; background:#27272b; color:#fff; }
.pv-reference-header a { color:inherit; text-decoration:none; }
.pv-reference-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.pv-reference-brand img { width:44px; height:36px; object-fit:contain; filter:brightness(0) invert(1); }
.pv-reference-brand-copy { display:flex; flex-direction:column; gap:5px; }
.pv-reference-brand-copy strong { font-size:22px; line-height:1; letter-spacing:3px; font-weight:400; }
.pv-reference-brand-copy small { font-size:8px; line-height:1.5; letter-spacing:1.45px; color:#c9c9c9; }
.pv-reference-desktop-nav { display:flex; justify-content:center; align-items:center; gap:clamp(18px,2.1vw,36px); margin-left:auto; }
.pv-reference-desktop-nav a { display:flex; align-items:center; min-height:44px; font-size:13px; color:#d7d7d7; transition:color .2s; }
.pv-reference-desktop-nav a:hover,.pv-reference-desktop-nav a[aria-current] { color:#fff; }
.pv-reference-header-actions { display:flex; align-items:center; gap:24px; }
.pv-reference-contact { font-size:13px; padding:12px 16px; border:1px solid #646565; border-radius:2px; white-space:nowrap; }
.pv-reference-menu { position:relative; }
.pv-reference-menu summary { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; list-style:none; font-size:13px; }
.pv-reference-menu summary::-webkit-details-marker { display:none; }
.pv-reference-menu-icon { width:19px; height:12px; display:block; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }
.pv-reference-menu[open] .pv-reference-menu-icon { transform:rotate(-90deg); }
/* Restore the former tablet menu: two groups, numbered steps and a light glass surface. */
.pv-reference-dropdown { position:absolute; top:calc(100% + 18px); right:0; z-index:30; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto minmax(min-content,1fr) auto; gap:20px 24px; width:440px; max-height:calc(100svh - 120px); padding:24px 26px; border:1px solid rgba(255,255,255,.72); border-radius:4px; color:#27272b; background:rgba(255,255,255,.92); font-family:Inter,Arial,sans-serif; box-shadow:0 22px 60px rgba(4,15,23,.18),inset 0 1px 0 rgba(255,255,255,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#72747566 transparent; text-align:left; }
.pv-reference-dropdown[hidden] { display:none; }
.pv-reference-dropdown > * { min-width:0; }
.pv-reference-dropdown a { color:inherit; text-decoration:none; line-height:1.3; letter-spacing:normal; border-radius:2px; }
.pv-reference-dropdown a:focus-visible { outline:2px solid #507b99; outline-offset:2px; }
.pv-reference-menu-home { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; padding:0 0 10px; border-bottom:1px solid rgba(39,39,43,0.14); font-size:14px; font-weight:500; }
.pv-reference-menu-status { display:flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid rgba(255,255,255,.42); border-radius:20px; color:#727475; background:rgba(255,255,255,.45); font-size:8px; font-weight:400; }
.pv-reference-menu-status::before { content:""; width:4px; height:4px; border-radius:50%; background:#507b99; }
.pv-reference-menu-group { margin:0; align-self:start; }
.pv-reference-menu-group + .pv-reference-menu-group { padding-left:20px; border-left:1px solid rgba(39,39,43,0.12); }
.pv-reference-dropdown .pv-reference-menu-eyebrow { margin:0 0 12px; color:#727475; font:500 8px/1.5 Inter,Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.pv-reference-menu-primary,.pv-reference-menu-secondary { display:grid; grid-template-columns:minmax(0,1fr); }
.pv-reference-menu-primary a,.pv-reference-menu-secondary a { display:flex; align-items:center; min-width:0; gap:10px; padding:8px 0; }
.pv-reference-menu-primary a { min-height:46px; font-size:18px; font-weight:400; letter-spacing:-.025em; }
.pv-reference-menu-primary a:not(:last-child) { border-bottom:1px solid rgba(80,123,153,.09); }
.pv-reference-menu-number { flex:0 0 14px; color:#777; font-size:8px; letter-spacing:.06em; }
.pv-reference-menu-secondary a { min-height:36px; font-size:13px; font-weight:400; }
.pv-reference-menu-secondary a::after,.pv-reference-menu-dot { content:""; display:block; flex:0 0 6px; width:6px; height:6px; margin-left:auto; border:1px solid #989b9c; border-radius:50%; background:#b9bdbf; }
.pv-reference-dropdown .pv-reference-menu-contact { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; justify-self:start; gap:20px; min-height:40px; max-width:100%; padding:10px 14px; border:1px solid rgba(255,255,255,.3); border-radius:2px; color:#fff; background:#27272b; box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 3px 10px rgba(22,43,57,.08); font-size:11px; font-weight:500; }
.pv-reference-menu-primary a:hover,.pv-reference-menu-secondary a:hover { background:rgba(39,39,43,0.055); color:#27272b; }
.pv-reference-header :focus-visible { outline:2px solid #fff; outline-offset:5px; }
.pv-reference-hero { position:relative; isolation:isolate; color:var(--pv-ref-ink); background:#fff; min-height:680px; height:clamp(680px,45vw,800px); overflow:hidden; }
.pv-reference-images { position:absolute; top:0; right:0; width:64%; height:calc(100% - 68px); overflow:hidden; border-bottom-left-radius:4px; background:#e8e9e7; }
.pv-reference-scene { position:absolute; inset:0; overflow:hidden; opacity:0; transition:opacity .75s ease; pointer-events:none; }
.pv-reference-scene.is-active { opacity:1; }
.pv-reference-frame { position:absolute; inset:0; transform:scale(1.005); transform-origin:68% 52%; }
.pv-reference-scene.is-active .pv-reference-frame { animation:pv-reference-photo-zoom 8s linear both; }
.pv-reference-hero[data-motion-paused="true"] .pv-reference-frame { animation-play-state:paused; }
.pv-reference-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.pv-reference-hero .original-effect { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.pv-reference-hero .original-effect[hidden] { display:none; }
@keyframes pv-reference-photo-zoom { from { transform:scale(1.005); } to { transform:scale(1.035); } }
.pv-reference-copy { position:absolute; left:8%; top:11%; width:46%; padding:clamp(38px,4.3vw,72px); background:rgba(255,255,255,.88); z-index:2; }
.pv-reference-slide[hidden] { display:none; }
.pv-reference-slide { padding:0; animation:pv-reference-copy-in .5s ease both; }
.pv-reference-hero .pv-reference-eyebrow { margin:0 0 24px; font-size:11px; line-height:1.6; font-weight:400; letter-spacing:1.5px; text-transform:uppercase; color:#777; }
.pv-reference-hero .pv-reference-title { margin:0; font-family:Inter,Arial,sans-serif; font-size:clamp(34px,3.25vw,56px); line-height:1.22; letter-spacing:-1.5px; font-weight:400; color:var(--pv-ref-ink); text-transform:none; text-shadow:none; }
.pv-reference-title span { display:block; }
.pv-reference-hero .pv-reference-description { margin:30px 0 27px; max-width:410px; font-size:15px; line-height:1.9; font-weight:400; color:#727475; text-shadow:none; }
.pv-reference-hero .pv-reference-cta { display:inline-flex; align-items:center; justify-content:center; min-height:46px; max-width:100%; padding:13px 21px; margin:0; border:1px solid #27272b; border-radius:2px; background:#27272b; box-shadow:none; color:#fff; font:400 12px/1.6 Inter,Arial,sans-serif; text-align:center; text-decoration:none; cursor:pointer; transition:background .2s; }
.pv-reference-hero .pv-reference-cta:hover { background:#27272b; }
.pv-reference-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:37px; }
.pv-reference-dots { display:flex; align-items:center; gap:0; }
.pv-reference-dot { display:grid; place-items:center; width:30px; height:44px; padding:0; border:0; border-radius:0; background:none; cursor:pointer; }
.pv-reference-dot::before { content:""; width:5px; height:5px; border-radius:50%; background:#d7d8d8; transition:background .2s,transform .2s; }
.pv-reference-dot[aria-pressed="true"]::before { background:#27272b; transform:scale(1.35); }
.pv-reference-playback { display:flex; align-items:center; gap:4px; }
.pv-reference-playback button { display:grid; place-items:center; width:36px; height:44px; padding:0; border:0; border-radius:0; background:none; color:#777; font:400 19px/1 Arial,sans-serif; cursor:pointer; }
.pv-reference-playback button[data-ref-play] { font-size:13px; }
.pv-reference-playback button:hover { color:#27272b; }
.pv-reference-hero :focus-visible { outline:2px solid #507b99; outline-offset:3px; }
.pv-reference-caption { position:absolute; right:4.8%; bottom:24px; display:flex; gap:20px; align-items:center; margin:0; color:#909292; font-size:11px; letter-spacing:1px; }
.pv-reference-caption span:first-child { color:#27272b; }
.pv-reference-caption::before { content:""; width:46px; height:1px; background:#d7d8d8; }
.pv-reference-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes pv-reference-copy-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:1200px) {
 .pv-reference-header { gap:24px; padding-inline:4%; }
 .pv-reference-desktop-nav { gap:18px; }
 .pv-reference-desktop-nav a { font-size:12px; }
 .pv-reference-brand-copy strong { font-size:19px; }
 .pv-reference-brand-copy small { font-size:7px; }
 .pv-reference-contact { display:none; }
 .pv-reference-header-actions { margin-left:auto; }
 .pv-reference-copy { left:6%; width:49%; padding:44px; }
 .pv-reference-hero { height:660px; min-height:660px; }
}
@media (max-width:900px) {
 .pv-reference-desktop-nav { display:none; }
 .pv-reference-header { min-height:76px; }
 .pv-reference-contact { display:block; }
 .pv-reference-copy { left:5%; width:57%; padding:37px; }
 .pv-reference-hero .pv-reference-title { font-size:36px; }
 .pv-reference-hero .pv-reference-description { margin-top:26px; }
 .pv-reference-images { width:72%; }
}
@media (max-width:600px) {
 .pv-reference-header { min-height:72px; gap:10px; padding:15px 6%; }
 .pv-reference-brand { gap:8px; }
 .pv-reference-brand img { width:30px; height:27px; }
 .pv-reference-brand-copy { gap:5px; }
 .pv-reference-brand-copy strong { font-size:16px; letter-spacing:2px; }
 .pv-reference-brand-copy small { font-size:6px; letter-spacing:.85px; }
 .pv-reference-header-actions { gap:0; }
 .pv-reference-contact,.pv-reference-menu-label { display:none; }
 /* The mobile navigation occupies the exact copy-panel rectangle. */
 .pv-reference-copy > .pv-reference-dropdown { position:absolute; inset:0; width:100%; height:100%; max-height:none; padding:14px 12px; gap:14px 10px; grid-template-rows:40px minmax(0,1fr) 40px; border-radius:inherit; box-shadow:0 8px 30px rgba(25,35,42,.08),inset 0 1px 0 rgba(255,255,255,.82); }
 .pv-reference-dropdown .pv-reference-menu-home { min-height:40px; padding-bottom:6px; }
 .pv-reference-dropdown .pv-reference-menu-group + .pv-reference-menu-group { padding-left:6px; }
 .pv-reference-dropdown .pv-reference-menu-eyebrow { margin-bottom:6px; font-size:8px; letter-spacing:.08em; }
 .pv-reference-dropdown .pv-reference-menu-primary a { min-height:44px; padding:7px 0; gap:5px; font-size:clamp(12px,3.6vw,15px); }
 .pv-reference-dropdown .pv-reference-menu-number { flex-basis:9px; font-size:8px; }
 .pv-reference-dropdown .pv-reference-menu-secondary a { min-height:44px; padding:7px 0; gap:3px; font-size:clamp(11px,3vw,13px); }
 .pv-reference-dropdown .pv-reference-menu-secondary a::after { display:none; }
 .pv-reference-dropdown .pv-reference-menu-contact { justify-self:stretch; width:100%; min-height:40px; padding:9px 10px; gap:10px; font-size:12px; }
 .pv-reference-copy[data-menu-open="true"] { background:transparent; box-shadow:none; }
 .pv-reference-copy[data-menu-open="true"] > .pv-reference-slide,
 .pv-reference-copy[data-menu-open="true"] > .pv-reference-controls { visibility:hidden; pointer-events:none; }
 .pv-reference-hero { height:auto; min-height:600px; padding:70px 6% 138px; }
 .pv-reference-images { top:0; width:79%; height:calc(100% - 68px); }
 /* Move the photo content left inside the unchanged phone image frame. */
 .pv-reference-image { object-position:70% center; }
 .pv-reference-copy { position:relative; top:auto; left:auto; width:80%; min-height:400px; padding:32px clamp(12px,3vw,18px) 23px; background:rgba(255,255,255,.88); display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(4,auto) auto; align-content:start; }
 /* Every slide contributes to the same rows, so text wrapping never shifts the photo or controls. */
 .pv-reference-copy .pv-reference-slide { display:grid; grid-column:1; grid-row:1 / span 4; grid-template-rows:subgrid; min-width:0; }
 .pv-reference-copy .pv-reference-slide[hidden] { display:grid; visibility:hidden; pointer-events:none; animation:none; }
 .pv-reference-copy .pv-reference-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-column:1; grid-row:5; }
 .pv-reference-hero .pv-reference-eyebrow { font-size:9px; letter-spacing:1px; margin-bottom:22px; }
 .pv-reference-hero .pv-reference-title { font-size:clamp(24px,7.7vw,30px); line-height:1.25; letter-spacing:-1px; }
 .pv-reference-hero .pv-reference-description { font-size:14px; line-height:1.8; margin:25px 0; }
 .pv-reference-hero .pv-reference-cta { width:100%; font-size:11px; padding:12px 14px; }
 .pv-reference-controls { margin-top:24px; gap:5px; }
 .pv-reference-dot { width:25px; }
 .pv-reference-playback { gap:0; }
 .pv-reference-playback button { width:32px; }
 .pv-reference-caption { right:6%; bottom:23px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
 .pv-reference-image,.pv-reference-scene,.pv-reference-slide { animation:none; transition:none; }
 .pv-reference-scene.is-active .pv-reference-frame { animation:none; transform:none; }
 .pv-reference-hero .original-effect { display:none; }
}
/* Use more of the white panel for the desktop text. */
@media (min-width:901px) and (hover:hover) and (pointer:fine) {
 .pv-reference-copy {
  bottom:calc(11% + 68px);
  padding-block:clamp(18px,1.5vw,32px);
  display:flex;
  flex-direction:column;
  justify-content:center;
 }
 .pv-reference-hero .pv-reference-title {
  font-size:clamp(44px,4.6vw,80px);
  line-height:1.15;
  letter-spacing:-.035em;
 }
 .pv-reference-hero .pv-reference-description {
  max-width:none;
  font-size:clamp(17px,1.15vw,20px);
  line-height:1.75;
  margin-block:24px 22px;
 }
 .pv-reference-hero .pv-reference-eyebrow { font-size:12px; margin-bottom:18px; }
 .pv-reference-hero .pv-reference-cta { font-size:14px; }
 .pv-reference-controls { margin-top:20px; flex-shrink:0; }
}

/* A quiet edge and a soft shadow separate the white panel from the page. */
.pv-reference-copy { border-radius:4px; box-shadow:0 8px 30px rgba(25,35,42,.055),0 0 0 1px rgba(25,35,42,.035); }

/* A single unlabelled progress line is slightly inset from both image edges. */
.pv-reference-timeline { position:absolute; left:36%; right:0; bottom:0; height:68px; padding:14px clamp(24px,3vw,48px) 0; pointer-events:none; }
.pv-reference-timeline-track { display:block; width:100%; height:2px; overflow:hidden; background:#e3e5e6; }
.pv-reference-timeline-fill { display:block; width:100%; height:100%; background:#507b99; transform:scaleX(0); transform-origin:left; }
@media (max-width:900px) { .pv-reference-timeline { left:28%; } }
@media (max-width:600px) { .pv-reference-timeline { left:21%; } }

/* Soften only a narrow strip along the left and bottom image edges. */
.pv-reference-images::after {
 content:"";
 position:absolute;
 inset:0;
 z-index:1;
 pointer-events:none;
 background:
  linear-gradient(90deg,#fff 0,rgba(255,255,255,0) 4px),
  linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 4px);
}
@media (max-width:600px) {
 .pv-reference-images::after {
  background:
   linear-gradient(90deg,#fff 0,rgba(255,255,255,0) 3px),
   linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 3px);
 }
}

/* Keep the original compact charcoal dropdown on computers and tablets. */
@media (min-width:601px) {
 .pv-reference-menu .pv-reference-dropdown { display:block; top:calc(100% + 18px); right:0; width:260px; max-height:none; padding:15px 24px; border:1px solid #27272b; border-radius:0; background:#27272b; color:#e7e7e7; box-shadow:0 16px 30px #0002; -webkit-backdrop-filter:none; backdrop-filter:none; }
 .pv-reference-dropdown .pv-reference-menu-group,
 .pv-reference-dropdown .pv-reference-menu-primary,
 .pv-reference-dropdown .pv-reference-menu-secondary { display:contents; padding:0; margin:0; border:0; }
 .pv-reference-dropdown .pv-reference-menu-eyebrow,
 .pv-reference-dropdown .pv-reference-menu-status,
 .pv-reference-dropdown .pv-reference-menu-number,
 .pv-reference-dropdown .pv-reference-menu-dot,
 .pv-reference-dropdown .pv-reference-menu-secondary a::after { display:none; }
 .pv-reference-menu .pv-reference-dropdown a { display:block; min-height:0; max-width:none; width:auto; margin:0; padding:12px 0; border:0; border-bottom:1px solid #ffffff15; border-radius:0; background:none; box-shadow:none; color:#e7e7e7; font:400 14px/1.6 Inter,Arial,sans-serif; letter-spacing:normal; }
 .pv-reference-menu .pv-reference-dropdown .pv-reference-menu-contact { border-bottom:0; }
 .pv-reference-menu .pv-reference-dropdown a:hover { background:none; color:#bcd7e5; }
 .pv-reference-menu .pv-reference-dropdown a:focus-visible { outline:2px solid #fff; outline-offset:5px; }
}

/* Give the tablet copy more readable type, including touch tablets in landscape. */
@media (min-width:601px) and (max-width:900px),
       (min-width:901px) and (max-width:1366px) and (hover:none) {
 .pv-reference-hero { min-height:720px; }
 .pv-reference-copy { padding-block:32px; bottom:calc(11% + 68px); }
 .pv-reference-hero .pv-reference-title { font-size:clamp(44px,5.8vw,54px); line-height:1.18; }
 .pv-reference-hero .pv-reference-description { max-width:none; font-size:clamp(18px,2.4vw,20px); line-height:1.7; margin:22px 0 20px; }
 .pv-reference-hero .pv-reference-eyebrow { font-size:12px; margin-bottom:18px; }
 .pv-reference-hero .pv-reference-cta { font-size:14px; }
 .pv-reference-controls { margin-top:24px; }
}

/* Anchor the desktop/tablet dropdown to the charcoal header itself. */
@media (min-width:601px) {
 .pv-reference-menu { position:static; }
 .pv-reference-menu .pv-reference-dropdown { top:100%; right:0; }
}

/* Align the open menu with the Project contact frame wherever it is shown. */
@media (min-width:1201px), (min-width:601px) and (max-width:900px) {
 .pv-reference-header-actions { position:relative; align-self:stretch; }
 .pv-reference-menu .pv-reference-dropdown { top:calc(100% + 16px); left:0; right:auto; }
}

/* Keep the enlarged tablet type inside the balanced panel when lines wrap. */
@media (min-width:601px) and (max-width:767px),
       (min-width:901px) and (max-width:1100px) and (hover:none) {
 .pv-reference-copy { padding-block:20px; }
 .pv-reference-hero .pv-reference-eyebrow { margin-bottom:12px; }
 .pv-reference-hero .pv-reference-description { margin-block:16px 12px; }
 .pv-reference-controls { margin-top:8px; }
}

/* Center the space needed by the longest slide, keeping every text start fixed. */
@media (min-width:601px) {
 .pv-reference-copy {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  justify-content:normal;
 }
 .pv-reference-copy > .pv-reference-slide {
  grid-column:1;
  grid-row:1;
  align-self:start;
  min-width:0;
 }
 .pv-reference-copy > .pv-reference-slide[hidden] {
  display:block;
  visibility:hidden;
  pointer-events:none;
  animation:none;
 }
 .pv-reference-copy > .pv-reference-controls { grid-column:1; grid-row:2; }
}
@media (max-width:600px) {
 /* Preserve the total phone padding and shared slide rows, with equal ends. */
 .pv-reference-copy { align-content:center; padding-top:27.5px; padding-bottom:27.5px; }
}

/* Stable vector icons avoid platform-specific text and emoji rendering. */
.pv-reference-playback button[data-ref-play] {
  -webkit-appearance:none;
  appearance:none;
}
.pv-reference-playback button[data-ref-play] .pv-reference-play-icon {
  display:block;
  width:14px;
  height:14px;
  flex-shrink:0;
  overflow:visible;
  pointer-events:none;
}