/* OUR STORY — page-specific only. Header, nav, footer, buttons, .psd-title and the base rules all come from site.css + exact-home.css, which this page loads alongside . Do not duplicate chrome here. */ .story-hero { position:relative; height:min(31vw,595px); min-height:380px; overflow:hidden; background:#222; } .story-hero img { width:100%; height:100%; object-fit:cover; object-position:center 60%; } .story-hero__veil { position:absolute; inset:0; background: radial-gradient(ellipse 62% 55% at 50% 58%,rgba(10,16,25,.52) 0%,rgba(10,16,25,.26) 60%,rgba(10,16,25,.06) 100%), linear-gradient(180deg,rgba(9,13,19,.72) 0%,rgba(9,13,19,0) 34%); } .story-hero__content { position:absolute; z-index:1; top:58%; left:50%; width:min(1170px,calc(100% - 48px)); transform:translate(-50%,-50%); text-align:center; color:#fff; } .story-hero h1 { margin:0; font-family:var(--psd-serif); font-size:clamp(38px,3.6vw,69px); font-style:italic; line-height:1.02; } .story-hero p { margin:14px 0 0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; } .story-section { width:var(--psd-shell); margin-inline:auto; } .story-intro { padding:92px 0 78px; } .story-intro__grid { display:grid; grid-template-columns:1.18fr 1fr; gap:56px; align-items:start; } .story-intro__media { display:grid; gap:18px; } .story-intro__media img { width:100%; aspect-ratio:1.85; object-fit:cover; } .story-lede { margin-bottom:22px; color:var(--psd-ink); font-family:var(--psd-serif); font-size:23px; font-style:italic; line-height:1.45; } .story-body p { max-width:58ch; margin-bottom:20px; color:var(--psd-muted); font-size:16px; line-height:1.62; } .story-team { --psd-muted:#6b6b6b; padding:86px 0 90px; background:#faf9f6; } .story-team .psd-title { margin-bottom:54px; } .story-team__grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; } .story-team__photo { margin:0; } .story-team__photo img { width:100%; aspect-ratio:1.2; object-fit:cover; } .story-team__photo figcaption { margin-top:11px; color:var(--psd-muted); font-size:13px; line-height:1.5; } .story-roster { margin:0; padding:0; list-style:none; } .story-roster li { padding:17px 0; border-bottom:1px solid rgba(36,36,36,.13); } .story-roster li:first-child { padding-top:0; } .story-roster b { display:block; color:var(--psd-ink); font-family:var(--psd-serif); font-size:21px; font-style:italic; font-weight:400; } .story-roster span { display:block; margin-top:5px; color:var(--psd-muted); font-size:15px; line-height:1.5; } .story-recognition { padding:88px 0 96px; } .story-recognition__grid { display:grid; grid-template-columns:1fr 1.25fr; gap:70px; align-items:start; } .story-certs { margin:0 0 30px; padding:22px 26px; border-left:4px solid var(--psd-gold); background:#faf9f6; } .story-certs p { margin:0; color:var(--psd-ink); font-size:16px; line-height:1.55; } .story-certs em { display:block; margin-bottom:6px; color:var(--psd-gold-text); font-family:var(--psd-sans); font-size:12px; font-style:normal; letter-spacing:.11em; text-transform:uppercase; } .story-awards { margin:0; padding:0; list-style:none; columns:2; column-gap:44px; } .story-awards li { break-inside:avoid; padding:11px 0 11px 22px; position:relative; color:var(--psd-muted); font-size:15px; line-height:1.5; } .story-awards li::before { content:''; position:absolute; top:19px; left:0; width:9px; height:9px; background:var(--psd-gold); } .story-awards b { color:var(--psd-ink); font-weight:400; } .story-explore { padding:0 0 100px; display:grid; grid-template-columns:1fr; gap:26px; } .story-explore a { display:block; padding:34px 30px 30px; border:1px solid rgba(36,36,36,.16); color:var(--psd-ink); } .story-explore a:hover { border-color:var(--psd-gold); } .story-explore em { display:block; margin-bottom:10px; color:var(--psd-gold-text); font-family:var(--psd-sans); font-size:12px; font-style:normal; letter-spacing:.11em; text-transform:uppercase; } .story-explore strong { display:block; margin-bottom:9px; font-family:var(--psd-serif); font-size:25px; font-style:italic; font-weight:400; } .story-explore span { color:var(--psd-muted); font-size:15px; line-height:1.55; } @media (max-width:1100px) { .story-hero h1 { font-size:clamp(34px,5vw,52px); } } @media (max-width:860px) { .story-intro__grid,.story-team__grid,.story-recognition__grid { grid-template-columns:1fr; gap:38px; } .story-awards { columns:1; } .story-explore { grid-template-columns:1fr; padding-bottom:70px; } .story-intro { padding:60px 0 54px; } .story-team,.story-recognition { padding:62px 0 66px; } }