/* Mobile hero first-paint contract. This stylesheet is render-blocking and linked at the end of so the browser never paints the older fallback composition while HTML is still streaming. The final mobile node order is already present in index.html; no post-load reparenting is required. */ @media (max-width: 919px) { .hero-portfolio__grid { position: relative; display: block; min-height: max(50rem, calc(100svh - 7rem)); overflow: hidden; isolation: isolate; background: #101a14; } .hero-portfolio__grid::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(9, 15, 11, .58), rgba(9, 15, 11, .28) 34%, rgba(9, 15, 11, .7)), radial-gradient(circle at 50% 42%, transparent 0 22%, rgba(7, 12, 9, .34) 74%); } .hero-portfolio__grid > .hero-portfolio__copy { position: relative !important; z-index: 2; width: 100%; min-height: max(50rem, calc(100svh - 7rem)); margin: 0; padding: calc(6.25rem + env(safe-area-inset-top, 0px)) clamp(1.4rem, 6vw, 3rem) 3rem; display: grid; place-items: center; pointer-events: none; } .hero-portfolio__copy-inner { width: 100% !important; max-width: 40rem !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #fffaf0; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-portfolio__copy-inner .eyebrow, .hero-portfolio__copy-inner .hero-eyebrow, .hero-portfolio__copy-inner .hero-kicker, .hero-portfolio__copy-inner .section-kicker { width: 100%; margin: 0 auto clamp(1.8rem, 6vw, 2.8rem); display: grid; grid-template-columns: minmax(1.5rem, 3rem) minmax(0, 1fr) minmax(1.5rem, 3rem); align-items: center; justify-content: center; gap: clamp(.75rem, 3vw, 1.3rem); color: rgba(255, 250, 240, .88); font-size: clamp(.72rem, 2.5vw, .95rem); font-weight: 500; line-height: 1.55; letter-spacing: .24em; text-align: center; text-wrap: balance; } /* The eyebrow already has two real rule elements. Generated rules would become extra grid items and squeeze the label into the right column. */ .hero-portfolio__copy-inner .eyebrow::before, .hero-portfolio__copy-inner .eyebrow::after, .hero-portfolio__copy-inner .hero-eyebrow::before, .hero-portfolio__copy-inner .hero-eyebrow::after, .hero-portfolio__copy-inner .hero-kicker::before, .hero-portfolio__copy-inner .hero-kicker::after, .hero-portfolio__copy-inner .section-kicker::before, .hero-portfolio__copy-inner .section-kicker::after { content: none; } .hero-portfolio__copy-inner .hero-eyebrow-rule--right { display: block; } .hero-portfolio__copy-inner .hero-eyebrow { max-width: 34rem; } .hero-portfolio__copy-inner .hero-kicker-break { display: block; } .hero-portfolio__copy-inner h1, .hero-portfolio__copy-inner h2 { width: 100%; max-width: 29rem; margin: 0 auto clamp(1.9rem, 6vw, 2.8rem); color: #fffaf0; font-size: clamp(2rem, 7.5vw, 2.5rem); line-height: .96; letter-spacing: -.035em; text-align: center; text-wrap: wrap; text-shadow: 0 3px 24px rgba(0, 0, 0, .34); } .hero-portfolio__copy-inner h1 em, .hero-portfolio__copy-inner h2 em { color: #c9e66b; line-height: .86; } .hero-portfolio__copy-inner .hero-headline { width: 100%; max-width: 29rem; margin: 0 auto clamp(1.75rem, 6vw, 2.5rem); font-size: clamp(2rem, 7.5vw, 2.5rem); text-align: center; text-wrap: wrap; } .hero-portfolio__copy-inner .hero-sub { width: min(100%, 34rem); max-width: 34rem; margin: 0 auto clamp(2rem, 7vw, 3rem); padding: 0; border: 0; border-radius: 0; background: transparent; color: rgba(255, 250, 240, .94); font-size: clamp(.95rem, 3.4vw, 1.08rem); font-weight: 400; line-height: 1.58; letter-spacing: -.012em; text-align: center; text-wrap: pretty; text-shadow: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .hero-portfolio__copy-inner .hero-sub--mobile { position: static; inset: auto; order: 3; } .hero-portfolio__copy-inner > .hero-work-columns { position: relative !important; inset: auto !important; order: 4; width: 100vw; height: clamp(17rem, 72vw, 21rem); flex: none; gap: .65rem; margin: 0 calc(50% - 50vw) clamp(2rem, 7vw, 3rem); padding: 0; opacity: 1; filter: none; background: transparent; } .hero-portfolio__copy-inner > .hero-work-columns::after { background: linear-gradient(90deg, #101a14 0%, transparent 10%, transparent 90%, #101a14 100%); } .hero-portfolio__copy-inner > .hero-work-columns .hero-work-column { height: calc((100% - .65rem) / 2); } .hero-portfolio__copy-inner .hero-cta { order: 5; width: min(100%, 27rem); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: .85rem; pointer-events: auto; } .hero-portfolio__copy-inner .hero-cta .btn { display: flex !important; width: 100%; min-height: 4.1rem; justify-content: center; border-radius: 999px; } .hero-portfolio__copy-inner .hero-cta .btn-primary { color: #132116; background: #c9e66b; box-shadow: 0 15px 34px rgba(0, 0, 0, .22); } .hero-portfolio__copy-inner .hero-cta .btn:not(.btn-primary) { color: #fffaf0; border-color: rgba(201, 230, 107, .55); background: rgba(8, 14, 10, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }