:root { --ink: #101112; --paper: #f4f1ea; --gold: #b89658; --warm-gray: #a9a49b; --rule: rgba(244, 241, 234, .2); --body: "Inter", sans-serif; --display: "Cormorant Garamond", serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 16px/1.7 var(--body); }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.container { width: min(100% - 12vw, 1280px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .7rem 1rem; background: var(--paper); color: var(--ink); transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 1.7rem 6vw; transition: background .25s, padding .25s; }
.site-header.is-scrolled { padding-block: 1rem; background: rgba(16, 17, 18, .92); backdrop-filter: blur(12px); }
.wordmark { font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-decoration: none; }
.site-navigation { display: flex; gap: 1.75rem; }
.site-navigation a { color: rgba(244, 241, 234, .8); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; transition: color .2s; }
.site-navigation a:hover, .site-navigation a:focus-visible { color: var(--gold); }
.menu-toggle { display: none; }
.hero { position: relative; display: grid; min-height: max(720px, 100svh); overflow: hidden; }
.hero__media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 10, 10, .78) 0%, rgba(9, 10, 10, .47) 52%, rgba(9, 10, 10, .3)), url("https://images.unsplash.com/photo-1449824913935-59a10b8d2000?auto=format&fit=crop&w=2200&q=85") center/cover; transform: scale(1.02); }
.hero__content { position: relative; align-self: center; padding-top: 4rem; }
.eyebrow { margin: 0 0 1.4rem; color: var(--gold); font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; }
h1 { max-width: 920px; margin-bottom: 1.7rem; font-size: clamp(4rem, 7.6vw, 7.4rem); line-height: .83; letter-spacing: -.045em; }
h1 em, h2 em { color: var(--gold); font-style: normal; }
.hero__intro { max-width: 570px; color: rgba(244, 241, 234, .8); font-size: 1rem; }
.button { display: inline-flex; gap: 1.8rem; align-items: center; margin-top: 1.7rem; padding: .95rem 1.2rem; border: 1px solid rgba(184, 150, 88, .85); color: var(--paper); font-size: .65rem; font-weight: 600; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; transition: background .2s, color .2s; }
.button:hover, .button:focus-visible { background: var(--gold); color: var(--ink); }
.button span { font-size: 1rem; line-height: .5; }
.scroll-cue { position: absolute; right: 6vw; bottom: 2.5rem; display: flex; gap: .7rem; align-items: center; color: rgba(244, 241, 234, .65); font-size: .61rem; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.scroll-cue span { display: inline-block; width: 2.8rem; height: 1px; background: var(--gold); }
.section { padding: clamp(5.5rem, 10vw, 9rem) 0; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .8fr); gap: clamp(3rem, 9vw, 10rem); align-items: center; }
.split-grid--reverse { grid-template-columns: minmax(350px, .8fr) minmax(0, 1fr); }
.split-grid--reverse .section-copy { order: 2; }
.split-grid--reverse .image-frame { order: 1; }
.section-copy h2, .section-heading h2, .site-footer h2 { margin-bottom: 2rem; font-size: clamp(3.25rem, 5vw, 5.2rem); line-height: .88; letter-spacing: -.04em; }
.section-copy p { max-width: 38rem; color: var(--warm-gray); }
.section-copy .closing-line { color: var(--paper); font-family: var(--display); font-size: 1.38rem; line-height: 1.25; }
.image-frame { margin: 0; overflow: hidden; background: #212325; }
.image-frame--portrait { height: clamp(470px, 53vw, 680px); }
.image-frame--landscape { height: clamp(330px, 35vw, 500px); }
.image-frame img { filter: grayscale(100%); opacity: .84; transition: filter .5s, transform .6s; }
.image-frame:hover img { filter: grayscale(20%); transform: scale(1.03); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper .section-copy p { color: #5e5c57; }
.section--paper .section-copy .closing-line { color: var(--ink); }
.section-heading { max-width: 780px; margin-bottom: 4.5rem; }
.section-heading > p:last-child { max-width: 680px; color: var(--warm-gray); }
.section--paper .section-heading > p:last-child { color: #5e5c57; }
.section-heading--compact { margin-bottom: 3rem; }
.operating-system { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--rule); }
.operating-system li { min-height: 210px; padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--rule); }
.operating-system li:not(:nth-child(3n+1)) { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.operating-system span, .industries-grid span { color: var(--gold); font-size: .62rem; letter-spacing: .1em; }
.operating-system h3, .industries-grid h3 { margin: 2.5rem 0 .4rem; font-size: 2rem; line-height: 1; }
.operating-system p, .industries-grid p { margin-bottom: 0; color: var(--warm-gray); font-size: .83rem; }
.section--partner { padding-top: 0; }
.industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.industries-grid article { padding-top: 1.2rem; border-top: 2px solid var(--gold); }
.industries-grid h3 { margin-top: 2.2rem; }
.industries-grid p { color: #5e5c57; }
.beliefs { text-align: center; }
.beliefs .eyebrow { margin-bottom: 2rem; }
.beliefs__statement { margin: 0; font-size: clamp(4rem, 7vw, 7rem); font-weight: 400; line-height: .8; letter-spacing: -.05em; }
.beliefs__list { max-width: 670px; margin: clamp(4rem, 8vw, 7rem) auto 0; text-align: left; }
.beliefs__list p { padding: 1rem 0; margin: 0; border-top: 1px solid var(--rule); color: var(--warm-gray); }
.beliefs__list p:last-child { border-bottom: 1px solid var(--rule); }
.site-footer { padding: clamp(5.5rem, 9vw, 9rem) 0 2.5rem; background: #191a1a; }
.site-footer h2 { margin-bottom: 1.6rem; }
.site-footer__intro { max-width: 470px; color: var(--warm-gray); }
.footer-meta { display: flex; justify-content: space-between; margin-top: 8rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--warm-gray); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-meta a { text-decoration: none; }
.error-page { min-height: 100svh; }
.error-page__main { display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; width: min(100% - 12vw, 1280px); padding: 2rem 0 9vh; margin-inline: auto; }
.error-page__main h1 { margin-bottom: 1.8rem; }
.error-page__main > div > p:not(.eyebrow) { max-width: 28rem; color: var(--warm-gray); }
@media (max-width: 800px) { .container { width: min(100% - 3rem, 1280px); } .site-header { padding: 1.2rem 1.5rem; } .menu-toggle { position: relative; z-index: 2; display: grid; gap: 5px; width: 32px; padding: .5rem 0 .5rem .7rem; border: 0; background: transparent; color: var(--paper); cursor: pointer; } .menu-toggle span:not(.visually-hidden) { display: block; width: 100%; height: 1px; background: currentColor; transition: transform .2s; } .menu-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(3px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-3px) rotate(-45deg); } .site-navigation { position: absolute; inset: 0; display: grid; place-content: center; gap: 2rem; min-height: 100svh; padding: 6rem 1.5rem; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s; } .site-navigation.is-open { opacity: 1; pointer-events: auto; } .site-navigation a { font-family: var(--display); font-size: 2.8rem; letter-spacing: -.03em; text-align: center; text-transform: none; } .hero { min-height: 700px; } .scroll-cue { right: 1.5rem; } .split-grid, .split-grid--reverse { grid-template-columns: 1fr; gap: 3rem; } .split-grid--reverse .section-copy, .split-grid--reverse .image-frame { order: initial; } .image-frame--portrait, .image-frame--landscape { height: min(120vw, 560px); } .operating-system { grid-template-columns: repeat(2, 1fr); } .operating-system li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; } .operating-system li:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--rule); } .industries-grid { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; } .section--partner { padding-top: 5.5rem; } }
@media (max-width: 480px) { h1 { font-size: clamp(3.35rem, 16vw, 4.4rem); } .section-copy h2, .section-heading h2, .site-footer h2 { font-size: 3.3rem; } .operating-system { grid-template-columns: 1fr; } .operating-system li, .operating-system li:not(:nth-child(3n+1)), .operating-system li:nth-child(even) { min-height: 0; padding: 1.5rem 0; border-left: 0; } .operating-system h3 { margin-top: 1.6rem; } .industries-grid { grid-template-columns: 1fr; } .footer-meta { gap: 1rem; margin-top: 5rem; } }
@media (max-width: 800px) { html.no-js .menu-toggle { display: none; } html.no-js .site-navigation { position: static; display: flex; flex-direction: column; align-items: flex-end; gap: .12rem; min-height: 0; padding: 0; background: transparent; opacity: 1; pointer-events: auto; } html.no-js .site-navigation a { font-family: var(--body); font-size: .55rem; letter-spacing: .08em; text-align: right; text-transform: uppercase; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }