/* ===== Fonts ===== */ @font-face{ font-family:'Inter'; src:url('../assets/fonts/inter/InterVariable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:'Inter'; src:url('../assets/fonts/inter/InterVariable-Italic.woff2') format('woff2'); font-weight:100 900; font-style:italic; font-display:swap; } /* DM Sans is loaded from Google Fonts in (see partial in each page) */ /* Romie: files are named "RomieTrial-*" — confirm a commercial web-embedding license with the foundry before this ships to production. See SETUP.md. */ @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-MediumItalic.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-BoldItalic.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-Heavy.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-HeavyItalic.otf') format('opentype'); font-weight:800; font-style:italic; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-Black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; } @font-face{ font-family:'Romie'; src:url('../assets/fonts/romie/RomieTrial-BlackItalic.otf') format('opentype'); font-weight:900; font-style:italic; font-display:swap; } /* ===== Tokens ===== */ :root{ --bg:#EBEBEB; --ink:#101010; --ink-soft:#353535; --muted:#616161; --line:#d1d1d1; --accent:#353535; --font-sans:'Inter',system-ui,sans-serif; --font-alt:'DM Sans',system-ui,sans-serif; --font-serif:'Romie','Fraunces','Georgia','Times New Roman',serif; --pad-x-desktop:64px; --pad-x-mobile:22px; --pad-big:170px; --pad-big-mobile:80px; --nav-h:76px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans); } a{color:var(--ink);text-decoration:none;} a:hover{color:var(--ink-soft);} img{max-width:100%;display:block;} ::selection{background:var(--ink-soft);color:#fff;} button{font-family:inherit;} .italic{font-style:italic;} /* ===== NAV ===== */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:20px var(--pad-x-mobile); background:rgba(20,16,12,0); backdrop-filter:blur(6px); transition:background .3s ease; } .nav.is-dark,.nav.is-scrolled{background:#101010;} .nav-logo{height:22px;flex-shrink:0;} .nav-logo img{height:100%;display:block;} .nav-links{ display:flex;gap:24px;align-items:center;list-style:none;margin:0;padding:0; } .nav-links a{ font-family:var(--font-alt);font-size:12px;letter-spacing:0.08em; text-transform:uppercase;color:#fff;opacity:0.65;white-space:nowrap; transition:opacity .2s; } .nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1;color:#fff;} .nav-toggle{ display:none;background:none;border:none;cursor:pointer;padding:8px; flex-direction:column;gap:5px;z-index:51; } .nav-toggle span{width:22px;height:1.5px;background:#fff;display:block;transition:transform .25s,opacity .25s;} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} @media (max-width:860px){ .nav-links{ position:fixed;inset:0;background:#101010; flex-direction:column;justify-content:center;gap:34px; opacity:0;pointer-events:none;transition:opacity .25s ease; } .nav-links.is-open{opacity:1;pointer-events:auto;} .nav-links a{font-size:18px;opacity:0.85;} .nav-toggle{display:flex;} } /* ===== FLOATING CTA ===== */ .floating-cta{ position:fixed;bottom:20px;right:20px;z-index:40; display:flex;align-items:center;gap:10px; background:#101010;color:#EBEBEB; padding:14px 22px;border-radius:999px; font-family:var(--font-alt);font-size:12px;letter-spacing:0.08em;text-transform:uppercase; box-shadow:0 8px 24px rgba(0,0,0,0.3); } .floating-cta img{height:18px;} @media (max-width:480px){ .floating-cta{padding:12px 18px;font-size:11px;bottom:16px;right:16px;} } /* ===== HERO ===== */ .hero{ position:relative;height:100vh;min-height:600px; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; overflow:hidden;padding:0 24px; background:linear-gradient(180deg, rgba(20,16,12,0.25), rgba(20,16,12,0.55)), repeating-linear-gradient(135deg, oklch(30% 0 0) 0px, oklch(30% 0 0) 22px, oklch(26% 0 0) 22px, oklch(26% 0 0) 44px); } .hero video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; } .hero-content{position:relative;z-index:1;} .hero-wordmark{width:min(80vw,440px);filter:brightness(0) invert(1);opacity:0.95;} .hero-link{ display:inline-block;margin-top:34px;color:rgba(255,255,255,0.85); padding:6px 0;font-family:var(--font-alt);font-size:12px;letter-spacing:0.1em; text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,0.5); } /* ===== SECTION SHELLS ===== */ .section{padding:var(--pad-big) var(--pad-x-desktop);} .section-tight{padding:120px var(--pad-x-desktop) var(--pad-big);} .page-header{padding:130px 40px 60px;text-align:center;} .eyebrow{ font-family:var(--font-alt);font-size:12px;letter-spacing:0.2em;text-transform:uppercase; color:var(--accent);margin-bottom:20px; } .h1{font-family:var(--font-serif);font-style:italic;font-size:clamp(40px,7vw,88px);line-height:1.05;} @media (max-width:860px){ .section{padding:var(--pad-big-mobile) var(--pad-x-mobile);} .section-tight{padding:100px var(--pad-x-mobile) var(--pad-big-mobile);} .page-header{padding:110px 20px 44px;} } .intro-quote{max-width:900px;margin:0 auto;text-align:center;border-top:1px solid oklch(82% 0 0);padding-top:var(--pad-big);} .intro-quote p{font-family:var(--font-serif);font-style:italic;font-size:clamp(28px,5.2vw,58px);line-height:1.3;margin:0;} /* ===== MARQUEE ===== */ .marquee{position:relative;height:5px;background:#101010;} .marquee-track{position:absolute;inset:0;overflow:hidden;} .marquee-inner{display:flex;width:max-content;animation:marquee-scroll 26s linear infinite;} .marquee-inner span{ font-family:var(--font-serif);font-style:italic;font-size:46px;color:#EBEBEB; opacity:0.12;white-space:nowrap;padding:0 30px; } @keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} .marquee-badge-bg{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:112px;height:112px;border-radius:50%;background:#EBEBEB;z-index:1; } .marquee-badge{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); height:90px;z-index:2; } /* ===== VIDEO GRID / CARD ===== */ .section-head{ display:flex;align-items:baseline;justify-content:space-between; margin-bottom:48px;flex-wrap:wrap;gap:16px; } .section-head h2{font-family:var(--font-serif);font-style:italic;font-size:clamp(32px,4vw,52px);margin:0;} .link-underline{ font-size:12px;letter-spacing:0.12em;text-transform:uppercase; border-bottom:1px solid currentColor;padding-bottom:3px; } .video-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:28px; } @media (max-width:1024px){.video-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.video-grid{grid-template-columns:1fr;gap:22px;}} .video-card{ position:relative;display:block;aspect-ratio:3/4;border-radius:2px;overflow:hidden; background:#1a1a1a;color:#fff; } .video-card img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .5s ease; } .video-card:hover img{transform:scale(1.06);} .video-card::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.75) 100%); } .video-card .play-dot{ position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%; border:1px solid rgba(255,255,255,0.6);display:flex;align-items:center;justify-content:center; font-size:11px;z-index:2;backdrop-filter:blur(2px); } .video-card-meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;} .video-card-meta .title{font-family:var(--font-serif);font-style:italic;font-size:19px;line-height:1.25;} .video-card-meta .date{font-family:var(--font-alt);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;opacity:0.7;margin-top:4px;} .video-card:hover .title{color:#fff;} /* ===== TESTIMONIALS ===== */ .testimonial-section{ background:#101010;color:#EBEBEB;text-align:center; min-height:520px;display:flex;align-items:center;justify-content:center; } .testimonial-inner{max-width:760px;margin:0 auto;} .testimonial-badge{ width:64px;height:64px;border-radius:50%;margin:0 auto 30px; background:repeating-linear-gradient(135deg, oklch(35% 0 0) 0px, oklch(35% 0 0) 8px, oklch(30% 0 0) 8px, oklch(74% 0 0) 16px); } .testimonial-quote{font-family:var(--font-serif);font-style:italic;font-size:clamp(24px,3.6vw,40px);line-height:1.45;margin:0;} .testimonial-nav{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:36px;} .testimonial-arrow{ cursor:pointer;width:38px;height:38px;border-radius:50%; border:1px solid oklch(55% 0 0 / 0.5);display:flex;align-items:center;justify-content:center; font-size:16px;background:none;color:#EBEBEB; } .testimonial-arrow:hover{border-color:#EBEBEB;} .testimonial-who .label{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:oklch(75% 0 0);margin-bottom:6px;} .testimonial-who .name{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:oklch(85% 0 0);} /* ===== CLOSING CTA ===== */ .closing-cta{padding:90px 24px 130px;display:flex;justify-content:center;text-align:center;} .closing-cta-inner{max-width:640px;} .closing-cta h2{font-family:var(--font-serif);font-style:italic;font-size:clamp(32px,5vw,56px);margin:0 0 26px;} .closing-cta p{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 34px;} .btn-outline{ display:inline-block;border:1px solid #101010;color:#101010;padding:15px 36px; font-family:var(--font-alt);font-size:12px;letter-spacing:0.06em;background:none;cursor:pointer; } .btn-outline:hover{background:#101010;color:#EBEBEB;} /* ===== FAQ ===== */ .faq-list{max-width:780px;margin:0 auto;} .faq-item{border-bottom:1px solid var(--line);padding:24px 0;} .faq-q{ display:flex;justify-content:space-between;align-items:center;gap:20px; width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:0;color:var(--ink); } .faq-q .q-text{font-family:var(--font-serif);font-size:20px;} .faq-q .sign{font-size:22px;font-family:var(--font-serif);color:var(--accent);flex-shrink:0;} .faq-a{ font-size:15px;line-height:1.8;color:var(--muted);max-width:640px; max-height:0;overflow:hidden;transition:max-height .3s ease, margin-top .3s ease;margin-top:0; } .faq-item.is-open .faq-a{margin-top:14px;max-height:240px;} /* ===== CONTACT ===== */ .contact-header p{max-width:560px;margin:22px auto 0;font-size:16px;line-height:1.75;color:var(--muted);} .form-note{font-size:12px;color:oklch(50% 0 0);margin-bottom:6px;} .contact-form{max-width:640px;margin:36px auto 140px;padding:0 24px;display:flex;flex-direction:column;gap:22px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;} @media (max-width:600px){.form-row{grid-template-columns:1fr;}} .field{display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);} .field input,.field textarea{ border:none;border-bottom:1px solid oklch(75% 0 0);background:transparent; padding:10px 2px;font-size:15px;font-family:var(--font-alt);outline:none;color:var(--ink); } .field textarea{border:1px solid oklch(75% 0 0);padding:12px;resize:vertical;} .field input:focus,.field textarea:focus{border-color:var(--ink);} .form-submit{align-self:flex-start;margin-top:8px;} .form-submit:disabled{opacity:0.5;cursor:default;} .form-error{font-size:13px;color:#a83232;display:none;} .form-error.is-visible{display:block;} .thank-you{ max-width:600px;margin:50px auto 140px;text-align:center;padding:60px 32px; background:#101010;color:#EBEBEB; } .thank-you h2{font-family:var(--font-serif);font-size:28px;font-style:italic;margin:0 0 12px;} .thank-you p{font-size:15px;color:oklch(80% 0 0);margin:0;} /* ===== FOOTER ===== */ .footer{background:#101010;color:oklch(88% 0 0);padding:80px 24px 40px;} .footer-top{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:32px; max-width:1200px;margin:0 auto 70px; } .footer-logo{height:32px;} .footer-links{display:flex;gap:30px;flex-wrap:wrap;font-family:var(--font-alt);font-size:13px;list-style:none;margin:0;padding:0;} .footer-links a{color:inherit;} .footer-contact{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;font-family:var(--font-alt);font-size:13px;letter-spacing:0.04em;margin-top:36px;} .footer-contact a{color:inherit;opacity:0.85;} .footer-contact a:hover{opacity:1;} .footer-wordmark{max-width:1200px;margin:0 auto;text-align:center;} .footer-wordmark img{width:min(70vw,560px);margin:0 auto;filter:brightness(0) invert(1);opacity:0.95;} .footer-bottom{text-align:center;font-size:12px;color:oklch(55% 0 0);margin-top:44px;} @media (max-width:600px){ .footer-top{flex-direction:column;align-items:flex-start;gap:24px;} }