/* Unlock Integrations v6.5: the un-link mark and hero photography. Loads after every other sheet. */

/* The mark: the n and the u of "unlock" as two hooked shackles, drawn in the current colour. */
.unlock-site .mark { width:24px; height:25.5px; color:var(--mint); overflow:visible; }
.unlock-site .mark .link-n { transition:transform .45s var(--ease); }
.unlock-site .logo:hover .mark .link-n { transform:translateY(-2px); }
.unlock-site .logo small { font-weight:500; }
.map-hub .hub-lock, .agency-home .map-hub .hub-lock { width:46%; height:auto; }
.planner-lock { width:22px; height:23.5px; }
.cta__lock { width:96px; height:102px; }
.page-head__lock { width:84px; height:89px; }
.nf-lock { width:60px; height:64px; }
.agency-work-mark .work-mark-link path { stroke:#4b7a57; stroke-width:6; }
@media (max-width:760px) {
  .unlock-site .mark { width:21px; height:22.5px; }
  .planner-lock { width:17px; height:18px; }
}

/* Hero photography: a real photo on the right, faded into charcoal from the text side,
   with a slight green tint toward the far corner. Text never sits on the busy part. */
.has-photo { position:relative; isolation:isolate; }
.photo-backdrop { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#131b1d; }
.photo-backdrop::before { content:""; position:absolute; top:0; right:0; bottom:0; left:var(--photo-start,38%);
  background:var(--photo) var(--photo-pos,center)/cover no-repeat; filter:saturate(.85) brightness(var(--photo-bright,1)); }
.photo-backdrop::after { content:""; position:absolute; inset:0; background:
  linear-gradient(90deg,#131b1d 0,#131b1d var(--photo-start,38%),rgba(19,27,29,.84) calc(var(--photo-start,38%) + 7%),rgba(19,27,29,.56) calc(var(--photo-start,38%) + 24%),rgba(19,27,29,.42) 100%),
  linear-gradient(180deg,rgba(19,27,29,.4) 0,rgba(19,27,29,0) 28%,rgba(19,27,29,0) 62%,rgba(19,27,29,.75) 100%),
  linear-gradient(115deg,rgba(24,103,78,0) 45%,rgba(24,103,78,.3) 100%),
  radial-gradient(ellipse 55% 90% at 0 100%,rgba(133,237,197,.07),transparent 70%); }
/* Wide heroes whose right half is a diagram: let more of the photo show beside it. */
.flow-hero .photo-backdrop, .cap-hero .photo-backdrop { --photo-start:30%; }
.cta-wrap .photo-backdrop { --photo-start:45%; }

/* Heroes that were light become dark so every page opens the same way. */
.has-photo.agency-about-hero, .has-photo.agency-work-hero, .has-photo.cap-hero, .has-photo.page-head, .has-photo.not-found, .has-photo.cta-wrap {
  --text:#f2f3ee; --text-2:#c6d0ca; --text-3:#97a59e; --line:#34423f; background:#131b1d; color:var(--text); }
.has-photo.agency-about-hero h1, .has-photo.agency-work-hero h1, .has-photo.cap-hero h1 { color:#f2f3ee; }
.has-photo.agency-about-hero p, .has-photo.agency-work-hero p, .has-photo.cap-hero .cap-deck, .has-photo.cap-hero .cap-experience p { color:#c6d0ca; }
.has-photo .crumbs, .has-photo .crumbs a { color:#a9b6af; }
.has-photo .flow-link { color:#85edc5; }

/* Diagrams sit on a solid surface, never straight on the photo. */
.agency-home .flow-hero.has-photo .map-node { background:#152022; }
.has-photo.cap-hero .service-visual { padding:24px; border:1px solid #2f3d3b; border-radius:var(--radius-panel); background:rgba(19,27,29,.94); }
/* Editions drawn for a light page keep their light palette on a paper card. */
.service-application .has-photo.cap-hero .service-visual, .service-forms .has-photo.cap-hero .service-visual,
.service-reporting .has-photo.cap-hero .service-visual, .service-campus .has-photo.cap-hero .service-visual {
  --text:#162c25; --text-2:#455e50; --text-3:#617668; --line:#c6d4c6; background:#f2f3ee; border-color:#c6d4c6; color:var(--text); }

@media (max-width:860px) {
  .photo-backdrop::before { left:0; background-image:var(--photo-sm,var(--photo)); }
  .photo-backdrop::after { background:
    linear-gradient(180deg,rgba(19,27,29,.8) 0,rgba(19,27,29,.9) 50%,#131b1d 100%),
    linear-gradient(115deg,rgba(24,103,78,0) 40%,rgba(24,103,78,.28) 100%); }
}
@media print { .photo-backdrop { display:none; } }