* { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; font-family:Arial, Helvetica, sans-serif; background:#050505; color:#111 } .wfh-home { overflow:hidden } .image-placeholder { position:relative; display:grid; place-items:end; width:100%; min-height:280px; padding:20px; color:#fff; font-size:12px; text-align:right; background:linear-gradient(135deg, rgba(28, 80, 42, .72), rgba(0, 0, 0, .56)), repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 28px) } .image-placeholder span { text-transform:uppercase } .wfh-hero { position:relative; min-height:800px; display:grid; align-items:center; overflow:hidden; color:#fff; background:#1d2a1a } .hero-bg { position:absolute; inset:0; min-height:100%; background:linear-gradient(135deg, rgba(30, 88, 40, .72), rgba(0, 0, 0, .44)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 3px, transparent 3px 118px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 3px, transparent 3px 118px), linear-gradient(180deg, #4b6f3f, #172312) } .hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .55)), radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .08), transparent 34%) } .site-nav { position:absolute; inset:0 0 auto; z-index:5; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:26px clamp(24px, 4vw, 54px) } .brand { color:#fff; text-decoration:none; font-weight:900; font-size:24px; line-height:.88; letter-spacing:-.04em } .brand:after { content:""; display:inline-block; width:16px; height:12px; margin-left:4px; background:#e2231a; clip-path:polygon(0 0, 100% 0, 0 100%) } .site-nav nav { display:flex; justify-content:center; align-items:center; gap:clamp(18px, 4vw, 56px); width:min(760px, 70vw) } .site-nav nav a, .site-nav nav .nav-disabled { display:inline-flex; align-items:center; min-height:38px; padding:0 18px; color:#fff; text-decoration:none; font-size:15px; font-weight:700; border-radius:6px } .site-nav nav .nav-disabled { pointer-events: none; cursor: default; color: #fff; } .site-nav nav a.active { background:#050505 } .hero-content { position:relative; z-index:4; width:min(100% - 32px, 900px); margin:0 auto; padding:150px 0 86px; text-align:center } .hero-content h1 { margin:0 0 22px; font-size:clamp(3rem, 6vw, 5.6rem); line-height:.95; letter-spacing:-.055em } .hero-subtitle { margin:0 auto 28px; max-width:760px; font-size:clamp(1.35rem, 2.6vw, 2.2rem); line-height:1.2; font-weight:800 } .hero-copy { max-width:760px; margin:0 auto 32px; color:rgba(255, 255, 255, .92); font-size:clamp(1rem, 1.8vw, 1.24rem) } .pill-btn, .small-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 28px; color:#fff; background:#5542c9; border-radius:999px; text-decoration:none; font-weight:800; box-shadow:0 12px 28px rgba(0, 0, 0, .22) } .play-icon { display:grid; place-items:center; width:25px; height:25px; border:2px solid currentColor; border-radius:50%; font-size:12px } .down-arrow { position:absolute; left:50%; bottom:35px; transform:translateX(-50%); color:#fff; font-size:64px; line-height:.6; text-decoration:none } .stories { padding:26px clamp(18px, 5vw, 74px) 38px; background:#fff } .stories h2 { margin:0 0 22px; text-align:center; font-size:clamp(2rem, 3vw, 3rem); line-height:1; letter-spacing:-.04em } .story-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; max-width:1140px; margin:0 auto } .story-card { position:relative; min-height:390px; overflow:hidden; color:#fff; background:#222 } .story-card video, .story-card .card-bg, .card-shade { position:absolute; inset:0; width:100%; height:100% } .story-card video { z-index:1; object-fit:cover; opacity:0; transition:opacity .25s ease } .story-card:hover video, .story-card:focus-within video { opacity:1 } .card-bg { min-height:100%; place-items:end; background:linear-gradient(135deg, rgba(226, 35, 26, .32), rgba(0, 0, 0, .5)), repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 26px) } .card-shade { z-index:2; background:linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .78)), linear-gradient(90deg, rgba(0, 0, 0, .35), transparent) } .floating-play { position: absolute; z-index: 3; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: #fff; background: rgba(0, 0, 0, .55); border: 0; border-radius: 50%; font-size: 24px; line-height: 1; text-decoration: none; cursor: pointer; transition: background .25s ease, transform .25s ease; } .floating-play:hover { background: rgba(0, 0, 0, .75); transform: translate(-50%, -50%) scale(1.08); } .story-content { position:absolute; z-index:4; inset:auto 26px 30px } .story-content h3 { margin:0 0 6px; font-size:clamp(1.5rem, 2.2vw, 2.2rem); line-height:1.05; letter-spacing:-.04em } .story-content p { margin:0 0 20px; color:rgba(255, 255, 255, .9); font-size:14px } .small-btn { min-height:44px; padding:0 22px } .small-btn.disabled { background:rgba(255, 255, 255, .55); pointer-events:none } .team-section { display:grid; grid-template-columns:1fr 1.2fr; background:#efefef } .team-copy { padding:clamp(44px, 8vw, 94px) clamp(28px, 7vw, 120px) } .team-copy h2 { margin:0 0 32px; font-size:clamp(2.8rem, 5vw, 4.6rem); line-height:.96; letter-spacing:-.055em } .team-copy p { max-width:520px; color:#111; font-size:1rem } .team-image .image-placeholder { min-height:520px; height:100%; background:linear-gradient(135deg, rgba(33, 33, 33, .18), rgba(0, 0, 0, .42)), repeating-linear-gradient(45deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 30px), #4a4438 } .support-section { position:relative; min-height:520px; display:grid; align-items:center; color:#fff; background:#111; overflow:hidden } .support-bg, .support-overlay { position:absolute; inset:0; width:100%; height:100% } .support-bg { min-height:100%; background:linear-gradient(135deg, rgba(33, 57, 58, .7), rgba(0, 0, 0, .58)), repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 32px), #273937 } .support-overlay { background:linear-gradient(90deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .28)) } .support-copy { position:relative; z-index:2; width:min(100% - 32px, 1080px); margin:0 auto; padding:70px 0 } .support-copy h2 { margin:0 0 22px; font-size:clamp(2.4rem, 5vw, 4.2rem); letter-spacing:-.05em } .support-copy p { max-width:620px; margin-bottom:28px; color:rgba(255, 255, 255, .9); font-size:1.13rem } .back-top { display:grid; place-items:center; min-height:92px; background:#050505; color:#fff; text-align:center } .back-top a { color:#fff; text-decoration:none; font-size:38px; line-height:.75 } .back-top span { font-size:14px } @media(max-width:980px) { .site-nav { flex-direction:column; align-items:center } .site-nav nav { width:100%; overflow-x:auto; justify-content:flex-start; padding-bottom:6px } .story-grid, .team-section { grid-template-columns:1fr } .story-card { min-height:420px } } @media(max-width:640px) { .wfh-hero { min-height:720px } .hero-content { padding-top:190px } .site-nav nav a, .site-nav nav .nav-disabled { padding:0 12px; font-size:13px } .pill-btn, .small-btn { width:42% } .team-copy { padding:46px 24px } .support-copy { padding:56px 0 } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *, *:before, *:after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important } } .hero-bg, .support-bg, .card-bg, .team-image picture { display: block; } .hero-bg { position: absolute; inset: 0; min-height: 100%; padding: 0; } .hero-bg img, .support-bg img, .card-bg img, .team-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-bg img { position: absolute; inset: 0; } .story-card .card-bg { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100%; padding: 0; z-index: 0; } .team-image picture, .team-image img { width: 100%; height: 100%; min-height: 520px; } .team-image img { object-position: center center; } .support-bg { position: absolute; inset: 0; min-height: 100%; padding: 0; } .support-bg img { object-position: center center; } @media (max-width: 768px) { .hero-bg img, .story-card .card-bg img, .team-image img, .support-bg img { object-position: center center; } } .wfh-hero { min-height: 800px; height: auto; display: grid; align-items: center; position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; padding: 0; width: 100%; height: 100%; z-index: 0; } .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .22)), linear-gradient(90deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .10)); } .site-nav { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; justify-content: center; align-items: flex-start; min-height: 36px; padding: 0; border-bottom: 2px solid rgba(255, 255, 255, .86); background: transparent; } .site-nav .brand { display: none; } .site-nav nav { width: auto; max-width: none; display: flex; justify-content: center; align-items: center; gap: 34px; padding-top: 12px; } .site-nav nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 0; color: #fff; background: transparent; border-radius: 0; font-size: 15px; line-height: 1; font-weight: 700; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); } .site-nav nav a.active { color: red; background: transparent; } .hero-content { position: relative; z-index: 4; width: min(100% - 40px, 850px); margin: 0 auto; padding: 78px 0 44px; text-align: center; transform: none; } .hero-content h1 { margin: 0 0 22px; color: #fff; font-size: clamp(3rem, 5.8vw, 4.95rem); line-height: 1; letter-spacing: -2px; font-weight: 900; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); } .hero-subtitle { max-width: 820px; margin: 0 auto 30px; color: #fff; font-size: clamp(1.55rem, 2.1vw, 2rem); line-height: 1.25; letter-spacing: -.01em; font-weight: 900; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); } .hero-copy { max-width: 780px; margin: 0 auto 28px; color: rgba(255, 255, 255, .96); font-size: clamp(.98rem, 1.15vw, 1.18rem); line-height: 1.45; font-weight: 400; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); } .hero-content .pill-btn { min-height: 50px; padding: 0 20px; font-size: 15px; font-weight: 800; border-radius: 999px; } .hero-content .play-icon { width: 22px; height: 22px; font-size: 10px; } .down-arrow { display: block; position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); color: #fff; font-size: 70px; line-height: .45; text-decoration: none; text-shadow: 0 2px 8px rgba(0, 0, 0, .45); } @media (max-width: 980px) { .site-nav nav { gap: 24px; } .site-nav nav a, .site-nav nav .nav-disabled { font-size: 10px; } .hero-content { width: min(100% - 32px, 780px); padding-top: 86px; } } @media (max-width: 640px) { .wfh-hero { min-height: 700px; height: 700px; } .site-nav { min-height: 46px; } .site-nav nav { width: 100%; justify-content: center; gap: 18px; overflow-x: auto; white-space: nowrap; padding: 14px 12px 0; } .site-nav nav a, .site-nav nav .nav-disabled { font-size: 12px; } .hero-bg img { object-position: center center; } .hero-content { width: min(100% - 28px, 680px); padding-top: 120px; } .hero-content h1 { font-size: clamp(3rem, 13vw, 4.3rem); margin-bottom: 20px; } .hero-subtitle { font-size: clamp(1.35rem, 6vw, 1.9rem); margin-bottom: 22px; } .hero-subtitle br, .hero-copy br { display: none; } .hero-copy { font-size: 1rem; margin-bottom: 26px; } } .hero-subtitle, .hero-copy { max-width: 980px; } .down-arrow { display: flex  !important; flex-direction: column; align-items: center; gap: 0; bottom: 30px; font-size: 54px; line-height: .32; margin-top: 34px; } .down-arrow span { display: block; height: 28px; } .hero-content .pill-btn { margin-bottom: 58px; } .story-card.italy-card .card-bg img { object-position: right center  !important; } .support-copy .pill-btn { display: none; } @media (max-width: 768px) { .hero-subtitle br, .hero-copy br { display: block; } .down-arrow { bottom: 24px; font-size: 48px; } .story-card.italy-card .card-bg img { object-position: center center  !important; } } .video-modal{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:.3s; z-index:9999; } .video-modal.active{ opacity:1; visibility:visible; } .video-modal-content{ position:relative; width:min(90vw,960px); aspect-ratio:16/9; } .video-modal iframe{ width:100%; height:100%; border:0; border-radius:8px; } .video-close{ position:absolute; top:-45px; right:0; width:38px; height:38px; border:0; border-radius:50%; background:#fff; color:#000; font-size:28px; cursor:pointer; line-height:1; } .video-close:hover{ background:#e2231a; color:#fff; } body.modal-open{ overflow:hidden; }