/* Home, upper sections: hero, introduction, clients, featured work, production. */

/* Hero */
.od-hero { position: relative; height: 1024px; height: clamp(640px, 100svh, 1100px); max-height: 1100px; overflow: hidden; background: var(--od-grey-500); color: var(--od-white); }
.od-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.od-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 150px; z-index: 1; background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)); pointer-events: none; }
.od-hero__inner { position: absolute; inset: 80px 0 0; z-index: 2; display: flex; flex-direction: column; gap: 32px; padding: 20px var(--od-gutter); }
.od-hero__word { margin: 0; font-weight: 700; font-size: clamp(72px, 19.75vw, 160px); line-height: .8; letter-spacing: var(--od-track-display); white-space: nowrap; }
.od-hero__word--second { text-align: right; font-size: clamp(40px, 11.2vw, 90px); }
.od-hero__reg { letter-spacing: 0; }
.od-hero__mid { flex: 1; min-height: 0; display: flex; align-items: flex-end; }
.od-hero__main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 16px; }
.od-hero__row { flex: 1; min-height: 0; display: flex; gap: 16px; align-items: flex-start; }
.od-hero__side { flex: none; height: 100%; margin: 0; display: flex; align-items: flex-end; gap: 12px; font-size: var(--od-fs-b3); line-height: 1.6; text-transform: uppercase; }
.od-hero__side span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.od-hero__side--left::before, .od-hero__side--right::after { content: ""; align-self: stretch; width: 1px; background: rgba(255, 255, 255, .7); }
.od-hero__tagline { flex: 1; margin: 0; text-align: right; font-size: var(--od-fs-h5); line-height: 1.4; font-weight: 500; }
.od-hero__heading { max-width: 560px; display: flex; flex-direction: column; gap: 4px; }
.od-hero__title { margin: 0; font-size: var(--od-fs-h3); line-height: 1.3; font-weight: 500; letter-spacing: var(--od-track); text-wrap: balance; }
.od-hero__title .od-accent { letter-spacing: 0; white-space: nowrap; }
.od-hero__text { margin: 0; max-width: 400px; font-size: var(--od-fs-b2); line-height: 1.6; font-weight: 500; }
.od-hero__corner { position: absolute; font-size: var(--od-fs-b1); line-height: 1.6; user-select: none; }
.od-hero__corner--tr { top: 0; right: var(--od-gutter); }
.od-hero__corner--bl { bottom: 12px; left: var(--od-gutter); }
@media (min-width: 1025px) {
	.od-hero__word { font-size: clamp(160px, 14vw, 240px); }
	.od-hero__word--second { font-size: clamp(90px, 7.9vw, 136px); }
}
@media (max-width: 600px) {
	.od-hero { height: clamp(600px, 100svh, 844px); }
	.od-hero__inner { inset: 64px 0 0; gap: 24px; }
	.od-hero__corner--bl { display: none; }
}

/* Introduction */
.od-intro { padding: clamp(96px, 14vw, 200px) 0; background: var(--od-black); }
.od-intro__inner { display: grid; grid-template-columns: minmax(0, 301fr) minmax(0, 899fr); align-items: start; }
.od-intro__text { margin: 0; font-size: var(--od-fs-h2); line-height: 1.2; font-weight: 500; color: var(--od-white); }
.od-intro__text { --od-scrub-dim: .3; }
@media (max-width: 1024px) {
	.od-intro__inner { grid-template-columns: minmax(0, 246fr) minmax(0, 500fr); }
	.od-intro__text { font-size: var(--od-fs-h3); line-height: 1.3; }
}
@media (max-width: 600px) {
	.od-intro__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Clients */
.od-brands { padding-top: clamp(96px, 14vw, 200px); }

/* Featured work */
.od-featured__list { width: 100%; display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.od-featured__more { margin: 0; display: flex; justify-content: center; }
.od-work--featured { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0; list-style: none; }
.od-work--featured .od-work-card__link { position: relative; display: block; color: var(--od-white); }
.od-work--featured .od-work-card__media { display: block; aspect-ratio: 5 / 3; background: var(--od-grey-800); }
.od-work--featured .od-work-card__media .od-media__placeholder { visibility: hidden; }
.od-work--featured .od-work-card:nth-child(3n + 1) .od-work-card__media:has(.od-media__placeholder) { background: var(--od-grey-800) url(../../img/home-top-work-focuso.webp) center / cover no-repeat; }
.od-work--featured .od-work-card:nth-child(3n + 2) .od-work-card__media:has(.od-media__placeholder) { background: var(--od-grey-800) url(../../img/home-top-work-aeroone.webp) center / cover no-repeat; }
.od-work--featured .od-work-card:nth-child(3n) .od-work-card__media:has(.od-media__placeholder) { background: var(--od-grey-800) url(../../img/home-top-work-urban-pulse.webp) center 30% / cover no-repeat; }
.od-work--featured .od-work-card__media img { width: 100%; height: 100%; object-fit: cover; }
.od-work--featured .od-work-card__body { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; row-gap: 8px; align-items: center; padding: 110px 40px 40px; background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .6) 27%, rgba(0, 0, 0, .4) 56%, rgba(0, 0, 0, 0) 100%); }
.od-work--featured .od-work-card__body::after { content: ""; grid-row: 2; grid-column: 2; height: 1px; background: rgba(210, 210, 210, .6); }
.od-work--featured .od-work-card__meta { grid-row: 1; grid-column: 1 / -1; font-size: var(--od-fs-b2); line-height: 1.6; font-weight: 500; color: var(--od-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-work--featured .od-work-card__title { grid-row: 2; grid-column: 1; max-width: 900px; text-wrap: balance; font-size: var(--od-fs-h3); line-height: 1.3; font-weight: 600; }
.od-work--featured .od-work-card__year { grid-row: 3; grid-column: 1 / -1; font-size: var(--od-fs-b2); line-height: 1.6; font-weight: 500; }
@media (max-width: 1024px) {
	.od-work--featured .od-work-card__media { aspect-ratio: 746 / 540; }
	.od-work--featured .od-work-card__body { padding: 90px 32px 32px; }
}
@media (max-width: 600px) {
	.od-work--featured .od-work-card__media { aspect-ratio: 350 / 440; }
	.od-work--featured .od-work-card__body { padding: 80px 20px 20px; column-gap: 16px; }
}

/* Production (AI) */
.od-shift__inner { display: flex; flex-direction: column; gap: clamp(48px, 5.6vw, 80px); }
.od-shift__top { display: grid; grid-template-columns: minmax(0, 400fr) minmax(0, 720fr); gap: clamp(32px, 5.6vw, 80px); align-items: start; }
.od-shift__head { gap: 24px; }
.od-shift__head .od-section-head__text { color: var(--od-grey-600); }
.od-shift__media { aspect-ratio: 720 / 405; }
.od-shift__media img, .od-shift__photo img { width: 100%; height: 100%; object-fit: cover; }
.od-shift__points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.od-point { display: flex; flex-direction: column; }
.od-point__num { font-size: var(--od-fs-h2); line-height: 1.2; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--od-grey-200); margin-bottom: 12px; }
.od-point__title { margin: 0 0 8px; font-size: var(--od-fs-b1); line-height: 1.6; font-weight: 500; }
.od-point__text { margin: 0; font-size: var(--od-fs-b4); line-height: 1.6; color: var(--od-grey-500); }
.od-shift__detail { display: flex; flex-direction: column; gap: 40px; }
.od-shift__lead { margin: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--od-grey-200); font-size: var(--od-fs-b1); line-height: 1.6; font-weight: 500; color: var(--od-grey-600); }
.od-shift__lead > span:first-child { max-width: 900px; }
.od-shift__cols { display: grid; grid-template-columns: minmax(0, 580fr) minmax(0, 580fr); gap: 40px; align-items: stretch; }
.od-shift__photo { min-height: 100%; aspect-ratio: 580 / 445; }
.od-shift__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: space-between; }
.od-shift__list li { display: flex; align-items: center; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--od-grey-200); font-size: var(--od-fs-b1); line-height: 1.6; font-weight: 500; }
.od-shift__list li:first-child { padding-top: 0; }
.od-shift__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.od-shift__list li > span:first-child { flex: 1; min-width: 0; }
.od-shift__dash { color: var(--od-grey-500); }
.od-shift__list li > span:last-child { min-width: 96px; text-align: right; }
@media (max-width: 1024px) {
	.od-shift__top { grid-template-columns: minmax(0, 300fr) minmax(0, 414fr); gap: 32px; align-items: stretch; }
	.od-shift__media { aspect-ratio: auto; min-height: 310px; height: 100%; }
	.od-shift__points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
	.od-shift__cols { grid-template-columns: minmax(0, 330fr) minmax(0, 384fr); gap: 32px; }
	.od-shift__photo { aspect-ratio: auto; }
}
@media (max-width: 600px) {
	.od-shift__top, .od-shift__cols { grid-template-columns: minmax(0, 1fr); }
	.od-shift__media { aspect-ratio: 350 / 260; min-height: 0; height: auto; }
	.od-shift__points { gap: 16px; row-gap: 40px; }
	.od-shift__photo { aspect-ratio: 350 / 300; }
	.od-shift__list li { padding: 20px 0; }
	.od-shift__list li > span:last-child { min-width: 0; }
}