/* A new photographic homepage built on the shared charcoal system. */
.pw-editorial main { overflow: clip; }
.pw-editorial .pw-section { position: relative; scroll-margin-top: 115px; }
.pw-hero { position: relative; isolation: isolate; min-height: clamp(780px,98svh,1040px); margin: 0 18px; padding: 175px max(4rem,calc((100vw - 1320px)/2)) 150px; display: flex; align-items: center; overflow: hidden; border-inline: 1px solid #ffffff14; }
.pw-hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #242527; }
.pw-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; opacity: 0; transition: opacity .85s ease; }
.pw-hero-image.is-current { opacity: 1; }
.pw-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg,#08090bd4 0%,#0d0e1080 42%,#0d0e1010 80%),linear-gradient(0deg,#121315 0%,transparent 45%,#12131530 100%); }
.pw-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(135deg,#ffffff08,transparent 45%); }
.pw-hero-content { width: 100%; max-width: 1050px; }
.pw-hero-content>.pw-label { color: #ececec; font-size: .57rem; margin-bottom: 2rem; }
.pw-hero h1 { margin: 0; font-size: clamp(6.5rem,12.5vw,12.2rem); line-height: .83; letter-spacing: -.014em; text-transform: uppercase; text-align: left; text-wrap: nowrap; font-weight: 800; }
.pw-hero h1 span { display: block; width: fit-content; color: #fff; background: transparent; padding: 0; text-shadow: 0 4px 28px #0002; }
.pw-hero h1 span+span { margin-top: .08em; }
.pw-hero-description { margin-top: 2.2rem; }
.pw-hero-description>p { color: #c9cbcd; font-size: .91rem; line-height: 1.85; }
.pw-hero-actions { display: flex; gap: 1.8rem; flex-wrap: wrap; align-items: center; margin-top: 1.7rem; }
.pw-hero-actions .pw-quiet-link { color: #eee; }
.pw-hero-bottom { position: absolute; inset: auto 4rem 2rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.pw-scroll-link { display: flex; gap: 1.1rem; align-items: center; color: #c3c5c7; text-decoration: none; font-size: .6rem; line-height: 1.7; letter-spacing: .05em; }
.pw-scroll-link>span:first-child { display: grid; place-items: center; width: 38px; height: 50px; border: 1px solid #ffffff35; color: #fff; font-size: 1.2rem; }
.pw-scene-picker { display: flex; gap: .75rem; }
.pw-scene-picker>button { display: flex; align-items: center; gap: 1rem; min-height: 54px; min-width: 134px; border: 1px solid #ffffff30; padding: .8rem 1rem; font: 800 1.1rem/1 var(--font-display); text-transform: uppercase; }
.pw-scene-picker>button>span { color: #999; font: 500 .56rem/1 var(--font-body); }
.pw-scene-picker>button[aria-pressed="true"] { border-color: #eee; box-shadow: inset 0 -2px #eee; }
.pw-intro { padding: 7rem 0; border-bottom: 1px solid #ffffff0c; background: radial-gradient(ellipse at 85% 0,#ffffff08,transparent 55%); }
.pw-intro-grid { display: grid; grid-template-columns: .42fr 1fr .85fr; gap: 3.5rem; align-items: start; }
.pw-intro .pw-label { padding-top: .4rem; font-size: .54rem; }
.pw-intro h2 { font-size: clamp(2.6rem,4vw,4.3rem); line-height: 1.04; text-wrap: balance; }
.pw-intro-grid>div>p { color: #b7b9bd; font-size: .82rem; line-height: 1.95; }
.pw-intro .pw-quiet-link { margin-top: 1.2rem; }
.pw-paths { padding: 6.5rem 0 7rem; background: linear-gradient(160deg,transparent,#ffffff03 65%,transparent); }
.pw-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3.5rem; }
.pw-section-heading .pw-label { margin-bottom: 1.6rem; }
.pw-section-heading h2 { font-size: clamp(4.4rem,7vw,7rem); line-height: .95; }
.pw-section-heading>p { color: #aeb0b4; font-size: .83rem; padding-bottom: .5rem; }
.pw-path-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; align-items: start; }
.pw-path:nth-child(even) { margin-top: 4rem; }
.pw-path { display: block; text-decoration: none; min-width: 0; }
.pw-path-media { position: relative; overflow: hidden; aspect-ratio: 1.44; background: #202123; border: 1px solid #ffffff14; }
.pw-path-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#0005,transparent 40%); pointer-events: none; }
.pw-path-media img { width: 100%; height: 100%; object-fit: cover; transition: filter .35s ease; filter: saturate(.82); }
.pw-path:hover img { filter: saturate(1); }
.pw-path--lapd img { object-position: 60% center; }
.pw-path--lafd img { object-position: 65% center; }
.pw-path--lasd img { object-position: 45% center; }
.pw-path-tag { position: absolute; left: 1.3rem; bottom: 1.2rem; z-index: 1; padding: .55rem .7rem; border: 1px solid #ffffff35; background: #090a0bad; color: #e9e9e9; font-size: .53rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.pw-path-copy { position: relative; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 1.2rem; padding: 1.6rem .2rem 1.6rem; border-bottom: 1px solid #ffffff22; }
.pw-path-number { align-self: start; color: #83868a; font-size: .55rem; padding-top: .5rem; }
.pw-experience .pw-path h3 { font: 800 clamp(1.7rem,2.6vw,2.6rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; }
.pw-path-copy p { margin-top: .7rem; color: #a3a6aa; font-size: .74rem; line-height: 1.8; }
.pw-path-link { display: grid; place-items: center; width: 46px; height: 46px; background: #080808; border: 1px solid #ffffff35; color: #fff; font-size: 1.4rem; transition: border-color .25s ease; }
.pw-path:hover .pw-path-link { border-color: #fff; }
.pw-path-footer { margin-top: 7rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-top: 1.8rem; border-top: 1px solid #ffffff1a; }
.pw-path-footer p { color: #a7a9ad; font-size: .76rem; }
.pw-path-footer p a { color: #ddd; text-underline-offset: 5px; margin-left: .3rem; }
.pw-stories { padding: 5rem 0 7rem; background: linear-gradient(110deg,#ffffff05,transparent 58%); border-top: 1px solid #ffffff0d; }
.pw-story-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(3rem,6vw,7rem); }
.pw-feature-media { position: relative; height: 640px; overflow: hidden; background: #202123; }
.pw-feature-media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.pw-photo-caption { position: absolute; left: 1.5rem; bottom: 1.5rem; padding: .65rem .8rem; color: #ddd; background: #080808bf; border: 1px solid #ffffff25; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.pw-feature-copy { padding: 1rem 0; }
.pw-feature-copy .pw-label { margin-bottom: 2rem; }
.pw-feature-copy h2 { font-size: clamp(3.8rem,6.3vw,6.5rem); line-height: .94; }
.pw-feature-copy>p:not(.pw-label) { margin: 1.8rem 0 2rem; color: #b2b4b8; max-width: 40ch; font-size: .85rem; line-height: 1.9; }
.pw-story-foot { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 3.4rem; padding-top: 1.5rem; border-top: 1px solid #ffffff20; font: 800 1.3rem/1 var(--font-display); text-transform: uppercase; color: #c6c8cb; }
.pw-join { isolation: isolate; padding: 7rem 0 6rem; color: #f4f4f2; background: linear-gradient(120deg,#252629,#18191b); border-top: 1px solid #ffffff20; overflow: hidden; }
.pw-join-image { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,#17181aed,#17181acf),url('/assets/images/gallery/lapd-01.jpg?v=20260818-2') center 48%/cover; opacity: .55; }
.pw-join::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 18% 5%,#ffffff0c,transparent 60%); }
.pw-join-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-bottom: 4rem; }
.pw-join-heading .pw-label { margin-bottom: 1.8rem; }
.pw-join h2 { font-size: clamp(4.2rem,7.5vw,8rem); line-height: .95; }
.pw-join h2+p { color: #b5b7ba; font-size: .84rem; margin-top: 1.6rem; }
.pw-join-heading>.pw-button { flex-shrink: 0; margin-bottom: .3rem; }
.pw-join-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; }
.pw-join-steps>a { position: relative; display: flex; flex-direction: column; min-height: 250px; padding: 1.8rem; text-decoration: none; border: 1px solid #ffffff24; background: linear-gradient(135deg,#ffffff05,#00000016); transition: border-color .25s ease,background .25s ease; }
.pw-join-steps>a:hover { border-color: #ffffff70; background: #ffffff06; }
.pw-step-number { font-size: .55rem; letter-spacing: .09em; text-transform: uppercase; color: #999ca1; }
.pw-experience .pw-join-steps h3 { font: 800 2.05rem/1 var(--font-display); text-transform: uppercase; margin-top: 2.5rem; }
.pw-join-steps p { color: #aaaeb2; font-size: .74rem; max-width: 29ch; margin-top: .8rem; padding-bottom: 1rem; }
.pw-step-arrow { position: absolute; right: 1.3rem; bottom: 1.3rem; font-size: 1.2rem; color: #fff; }
.pw-editorial .pw-cookie-notice { left: auto; right: 1.3rem; }
@media(max-width:1200px) { .pw-hero { padding-inline: 3rem; } .pw-hero-bottom { left: 3rem; right: 3rem; } .pw-intro-grid { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } .pw-intro-grid>.pw-label { grid-column: 1/-1; } .pw-path-grid { gap: 2rem; } .pw-feature-media { height: 550px; } .pw-story-grid { gap: 3rem; } .pw-join-heading { align-items: flex-start; flex-direction: column; gap: 2rem; } }
@media(max-width:980px) { .pw-hero { min-height: 820px; padding-top: 160px; } .pw-hero h1 { font-size: clamp(6rem,15vw,10rem); } .pw-hero-bottom { align-items: center; } .pw-scene-picker { gap: .4rem; } .pw-scene-picker>button { min-width: 115px; gap: .7rem; } .pw-section-heading>p br { display: none; } .pw-section-heading>p { max-width: 31ch; } .pw-path-copy { grid-template-columns: 1fr auto; gap: .7rem; } .pw-path-number { display: none; } .pw-experience .pw-path h3 { font-size: 2rem; } .pw-story-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .pw-feature-media { height: 500px; } .pw-feature-copy h2 { font-size: 4.2rem; } .pw-join-steps>a { padding: 1.3rem; } .pw-experience .pw-join-steps h3 { font-size: 1.75rem; } }
@media(max-width:760px) { .pw-hero { min-height: 790px; margin-inline: 8px; padding: 135px 2rem 180px; align-items: center; } .pw-hero h1 { font-size: clamp(5.2rem,16vw,8rem); } .pw-hero-bottom { bottom: 1.6rem; left: 2rem; right: 2rem; } .pw-scroll-link { display: none; } .pw-scene-picker { width: 100%; } .pw-scene-picker>button { flex: 1; min-width: 0; justify-content: center; } .pw-intro { padding: 4rem 0; } .pw-intro-grid { grid-template-columns: 1fr; gap: 1.7rem; } .pw-intro h2 { font-size: 3.2rem; } .pw-intro-grid>div { max-width: 52ch; } .pw-paths { padding: 4rem 0; } .pw-section-heading { align-items: flex-start; flex-direction: column; gap: 1.6rem; margin-bottom: 2.5rem; } .pw-section-heading h2 { font-size: 4.5rem; } .pw-section-heading>p { max-width: 50ch; } .pw-path-grid { gap: 1.7rem; } .pw-path:nth-child(even) { margin-top: 0; } .pw-path-copy { grid-template-columns: 1fr; } .pw-path-link { position: absolute; right: 0; top: 1.2rem; width: 32px; height: 32px; font-size: 1.1rem; } .pw-path-copy h3 { max-width: calc(100% - 40px); } .pw-path-footer { margin-top: 2rem; align-items: flex-start; flex-direction: column; gap: 1.2rem; } .pw-story-grid { grid-template-columns: 1fr; gap: 2rem; } .pw-feature-media { height: 420px; } .pw-feature-copy h2 { font-size: 4.5rem; } .pw-feature-copy>p:not(.pw-label) { max-width: 54ch; } .pw-story-foot { margin-top: 2rem; } .pw-stories { padding: 3rem 0 4rem; } .pw-join { padding: 4rem 0; } .pw-join h2 { font-size: 5rem; } .pw-join-steps { grid-template-columns: 1fr; } .pw-join-steps>a { min-height: 190px; padding: 1.5rem; } .pw-experience .pw-join-steps h3 { font-size: 2rem; margin-top: 2rem; } .pw-join-steps p { max-width: 40ch; } .pw-join-heading { margin-bottom: 2rem; } }
@media(max-width:480px) { .pw-hero { min-height: 770px; padding-inline: 1.25rem; } .pw-hero h1 { font-size: 17vw; } .pw-hero-content>.pw-label { font-size: .47rem; letter-spacing: .09em; } .pw-hero-content .pw-label-line { width: 19px; margin-right: .35rem; } .pw-hero-description>p { font-size: .8rem; } .pw-hero-actions { gap: 1rem; } .pw-hero-actions .pw-button { gap: 1rem; font-size: .95rem; padding-inline: 1rem; } .pw-hero-actions .pw-quiet-link { gap: .5rem; font-size: .55rem; } .pw-hero-bottom { left: 1.25rem; right: 1.25rem; bottom: 1.8rem; } .pw-scene-picker>button { padding-inline: .55rem; gap: .5rem; min-height: 50px; font-size: .95rem; } .pw-scene-picker>button>span { font-size: .46rem; } .pw-intro h2 { font-size: 2.8rem; } .pw-section-heading h2 { font-size: 3.8rem; } .pw-path-grid { grid-template-columns: 1fr; gap: 2rem; } .pw-path-media { aspect-ratio: 1.3; } .pw-path-copy { grid-template-columns: 1fr auto; padding-block: 1.25rem; } .pw-path-link { position: static; width: 44px; height: 44px; font-size: 1.3rem; } .pw-path-copy h3 { max-width: none; } .pw-experience .pw-path h3 { font-size: 2rem; } .pw-path-copy p { font-size: .7rem; } .pw-feature-media { height: 350px; } .pw-feature-copy h2 { font-size: 3.8rem; } .pw-join h2 { font-size: clamp(3.3rem,13vw,4.5rem); } .pw-editorial .pw-cookie-notice { right: .75rem; } }
@media(prefers-reduced-motion:reduce) { .pw-hero-image { transition: none; } }
@media(max-width:480px) { .pw-intro h2 { font-size: clamp(2.2rem,10.6vw,2.8rem); } }