@font-face { font-family: InterNR; src: url('/assets/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: InterNR; src: url('/assets/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: CormorantNR; src: url('/assets/cormorant-garamond-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
:root { --ink: #0a0a09; --ink-soft: #151411; --paper: #f3efe7; --paper-warm: #e7dfd1; --gold: #cf9840; --gold-light: #edca7a; --line: rgb(255 255 255 / .16); --text-soft: #b8b2a8; --display: CormorantNR, Georgia, serif; --sans: InterNR, Inter, system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #eee9df; background: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; font: inherit; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 16px; color: #111; background: #fff; transform: translateY(-150%); }.skip-link:focus { transform: none; }
.site-header { position: fixed; top: 0; right: 0; left: 0; z-index: 50; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; height: 92px; padding: 0 clamp(24px, 4vw, 72px); border-bottom: 1px solid transparent; transition: height .3s ease, background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.site-header.is-scrolled { height: 76px; background: rgb(8 8 7 / .88); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { display: inline-flex; width: 92px; height: 72px; align-items: center; justify-content: center; overflow: hidden; }.brand img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; filter: drop-shadow(0 8px 22px rgb(0 0 0 / .35)); }
.desktop-nav { display: flex; justify-content: center; gap: clamp(22px, 3vw, 50px); }.desktop-nav a, .portal-link { position: relative; color: #e8e4dc; font-size: 12px; letter-spacing: .04em; }
.desktop-nav a::after { position: absolute; right: 0; bottom: -9px; left: 0; height: 1px; content: ''; background: var(--gold-light); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: 22px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 20px; padding: 0 24px; border: 1px solid transparent; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }.button:hover { transform: translateY(-2px); }.button-gold { color: #17120b; background: linear-gradient(110deg, #b67a22, #efcb79 48%, #c18a34); box-shadow: 0 9px 28px rgb(201 151 66 / .2); }.button-light { color: #111; background: #f7f3eb; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--line); }.menu-toggle span { display: block; width: 18px; height: 1px; margin: 5px auto; background: white; transition: transform .25s ease; }.menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-panel { position: fixed; inset: 0; z-index: 45; display: none; padding: 115px 28px 36px; background: #0b0b0a; opacity: 0; pointer-events: none; transition: opacity .25s ease; }.mobile-panel.is-open { opacity: 1; pointer-events: auto; }.mobile-panel nav { display: grid; }.mobile-panel nav a { padding: 11px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 31px; }.mobile-panel .button { width: 100%; margin-top: 36px; }
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }.hero-media, .hero-shade { position: absolute; inset: 0; }.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: hero-scale 16s ease-out both; }.hero-shade { z-index: 1; background: linear-gradient(90deg, rgb(2 2 2 / .94) 0%, rgb(3 3 3 / .78) 38%, rgb(3 3 3 / .28) 72%, rgb(3 3 3 / .54) 100%), linear-gradient(0deg, rgb(2 2 2 / .84), transparent 46%); }
.hero-content { position: relative; z-index: 2; display: flex; max-width: 830px; min-height: 100svh; justify-content: center; flex-direction: column; padding: 142px clamp(24px, 7vw, 120px) 170px; }.eyebrow, .kicker { margin: 0; color: var(--gold-light); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }.eyebrow span { width: 38px; height: 1px; background: var(--gold); }
.hero h1 { margin: 0; font-family: var(--display); font-size: clamp(54px, 7.3vw, 112px); font-weight: 600; letter-spacing: -.045em; line-height: .87; }.hero h1 em { color: var(--gold-light); font-style: italic; }.hero-copy { max-width: 620px; margin: 34px 0 0; color: #d0cbc1; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; }.hero-actions { display: flex; align-items: center; gap: 38px; margin-top: 38px; }
.text-link, .arrow-link { display: inline-flex; align-items: center; gap: 22px; color: #f4f0e8; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }.text-link span, .arrow-link span { color: var(--gold-light); font-size: 18px; }
.hero-facts { position: absolute; right: clamp(24px, 4vw, 72px); bottom: 50px; left: clamp(24px, 7vw, 120px); z-index: 3; display: grid; max-width: 690px; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }.hero-facts article { padding: 20px 22px 0 0; }.hero-facts strong, .hero-facts span { display: block; }.hero-facts strong { color: var(--gold-light); font-family: var(--display); font-size: 23px; }.hero-facts span { color: #a9a49b; font-size: 10px; letter-spacing: .05em; }
.hero-index { position: absolute; top: 50%; right: clamp(24px, 4vw, 72px); z-index: 2; color: #fff; font-size: 11px; letter-spacing: .15em; transform: rotate(90deg); }.hero-index span { color: var(--gold); }.scroll-cue { position: absolute; right: clamp(24px, 4vw, 72px); bottom: 50px; z-index: 3; display: flex; align-items: center; gap: 13px; color: #b9b4aa; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }.scroll-cue span { position: relative; width: 1px; height: 42px; background: var(--line); }.scroll-cue span::after { position: absolute; bottom: 0; left: -1px; width: 3px; height: 12px; content: ''; background: var(--gold); animation: scroll-dot 2s ease-in-out infinite; }
.service-ticker { overflow: hidden; padding: 19px 0; color: #191611; background: var(--gold-light); }.service-ticker div { display: flex; width: max-content; align-items: center; gap: clamp(22px, 3vw, 48px); padding-left: 4vw; font-family: var(--display); font-size: clamp(20px, 2.1vw, 31px); white-space: nowrap; }.service-ticker i { font-family: serif; font-size: 12px; font-style: normal; }
.section { padding: clamp(88px, 10vw, 160px) clamp(24px, 6vw, 104px); }.section-label { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(54px, 7vw, 96px); color: #9e988e; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }.section-label span { color: var(--gold-light); }.section-label::after { width: 74px; height: 1px; content: ''; background: #4b463e; }.section h2 { margin: 15px 0 0; font-family: var(--display); font-size: clamp(45px, 5.1vw, 78px); font-weight: 600; letter-spacing: -.035em; line-height: .98; }
.about { background: var(--ink-soft); }.about-grid { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(480px, 1.1fr); align-items: center; gap: clamp(50px, 9vw, 150px); }.about-copy { max-width: 690px; }.about-copy > p:not(.kicker) { max-width: 600px; margin: 30px 0 0; color: var(--text-soft); font-size: 14px; line-height: 1.9; }.arrow-link { margin-top: 38px; color: var(--gold-light); }.about-visual { position: relative; padding: 0 0 56px 56px; }.image-card { position: relative; margin: 0; overflow: hidden; }.image-card img { width: 100%; height: clamp(430px, 48vw, 680px); object-fit: cover; transition: transform .8s ease; }.image-card:hover img { transform: scale(1.025); }.image-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 60px 25px 22px; background: linear-gradient(transparent, rgb(0 0 0 / .76)); font-family: var(--display); font-size: 20px; }.image-card figcaption span { display: block; color: var(--gold-light); font-family: var(--sans); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }.about-note { position: absolute; bottom: 0; left: 0; display: grid; width: 190px; min-height: 168px; place-content: center; padding: 24px; color: #16130f; background: var(--gold-light); }.about-note strong { font-family: var(--display); font-size: 54px; line-height: 1; }.about-note span { margin-top: 8px; font-size: 10px; line-height: 1.5; }
.services { color: #1b1915; background: var(--paper); }.services .section-label { color: #6c685f; }.services .section-label::after { background: #c8c0b3; }.section-heading { display: grid; max-width: 1050px; grid-template-columns: 230px 1fr; gap: 40px; margin-bottom: 70px; }.services .kicker { color: #936317; }.services h2 { margin-top: 0; }.service-list { border-top: 1px solid #bdb5a8; }.service-item { display: grid; grid-template-columns: 72px minmax(220px, .7fr) minmax(280px, 1fr) 40px; align-items: center; gap: 24px; min-height: 128px; border-bottom: 1px solid #c9c1b4; transition: padding .3s ease, background .3s ease; }.service-item:hover { padding: 0 22px; background: #ebe3d6; }.service-number { color: #94631b; font-size: 10px; }.service-item h3 { margin: 0; font-family: var(--display); font-size: clamp(28px, 3vw, 43px); font-weight: 600; }.service-item p { margin: 0; color: #6b665e; font-size: 12px; line-height: 1.7; }.service-item > i { color: #a46d1b; font-size: 24px; font-style: normal; text-align: right; }
.portfolio { background: #0c0c0b; }.portfolio-heading { display: grid; grid-template-columns: 1fr 340px; align-items: end; gap: 70px; margin-bottom: 55px; }.portfolio-heading > p { margin: 0 0 5px; color: var(--text-soft); font-size: 13px; line-height: 1.8; }.portfolio-grid { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: repeat(2, minmax(260px, 35vw)); gap: 16px; }.project-card { position: relative; margin: 0; overflow: hidden; }.project-large { grid-row: 1 / 3; }.project-card::after { position: absolute; inset: 0; content: ''; background: linear-gradient(0deg, rgb(0 0 0 / .82), transparent 55%); }.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }.project-card:hover img { filter: brightness(.84); transform: scale(1.035); }.project-card figcaption { position: absolute; right: 26px; bottom: 24px; left: 26px; z-index: 2; }.project-card figcaption span, .project-card figcaption strong, .project-card figcaption small { display: block; }.project-card figcaption span { color: var(--gold-light); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }.project-card figcaption strong { margin-top: 6px; font-family: var(--display); font-size: clamp(23px, 2.4vw, 37px); line-height: 1.1; }.project-card figcaption small { margin-top: 3px; color: #bbb5ab; font-size: 9px; }
.process { color: #1b1915; background: var(--paper-warm); }.process .section-label { color: #6c685f; }.process .section-label::after { background: #b8ac9a; }.process-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(55px, 10vw, 160px); }.process-intro { position: sticky; top: 130px; align-self: start; }.process-intro .kicker { color: #92621b; }.process-intro p:last-child { max-width: 500px; margin-top: 28px; color: #696258; font-size: 13px; }.process-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid #b9af9f; }.process-steps li { display: grid; grid-template-columns: 65px 1fr; gap: 25px; padding: 34px 0; border-bottom: 1px solid #b9af9f; }.process-steps li > span { color: #98681f; font-size: 10px; }.process-steps h3 { margin: 0; font-family: var(--display); font-size: 32px; font-weight: 600; }.process-steps p { max-width: 500px; margin: 8px 0 0; color: #6e675c; font-size: 12px; }
.why { background: #11110f; }.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #3b3832; }.why-image { position: relative; grid-row: span 3; min-height: 680px; margin: 0; overflow: hidden; background: #161512; }.why-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) saturate(.85); }.why-image::after { position: absolute; inset: 0; content: ''; background: linear-gradient(0deg, rgb(0 0 0 / .75), transparent 60%); }.why-image > div { position: absolute; right: 35px; bottom: 34px; left: 35px; z-index: 2; }.why-image strong, .why-image span { display: block; }.why-image strong { color: var(--gold-light); font-family: var(--display); font-size: 38px; }.why-image span { max-width: 330px; color: #d0cbc2; font-size: 12px; }.why-card { min-height: 226px; padding: clamp(30px, 4vw, 58px); background: #171613; }.why-card > span { color: var(--gold); font-size: 9px; }.why-card h3 { margin: 24px 0 10px; font-family: var(--display); font-size: 31px; font-weight: 600; }.why-card p { max-width: 500px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.8; }
.contact { padding-bottom: 0; color: #18150f; background: var(--paper); }.contact-panel { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 520px; background: linear-gradient(135deg, #b67b25, #ecc778 45%, #bd8530); }.contact-copy { padding: clamp(42px, 7vw, 95px); }.contact-copy .kicker { color: #51350e; }.contact-copy h2 { max-width: 650px; }.contact-copy p:not(.kicker) { max-width: 540px; margin: 24px 0 34px; font-size: 13px; }.contact-details { display: grid; align-content: center; padding: clamp(42px, 6vw, 82px); background: rgb(12 11 9 / .92); }.contact-details > * { display: block; padding: 20px 0; border-bottom: 1px solid var(--line); }.contact-details span, .contact-details strong { display: block; }.contact-details span { color: #8f8a81; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }.contact-details strong { margin-top: 7px; color: #eee8dc; font-size: 12px; font-weight: 400; line-height: 1.7; }.contact-details a:hover strong { color: var(--gold-light); }.map-wrap { position: relative; height: 420px; overflow: hidden; }.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.92) sepia(.13); }.map-wrap > a { position: absolute; right: 24px; bottom: 24px; padding: 13px 18px; color: white; background: #111; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 80px clamp(24px, 6vw, 104px) 30px; background: #090909; }.footer-brand img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; }.footer-brand p { color: #8f8a81; font-family: var(--display); font-size: 25px; line-height: 1.2; }.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; }.footer-links div { display: grid; align-content: start; gap: 9px; }.footer-links span { margin-bottom: 12px; color: var(--gold-light); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }.footer-links a { color: #aaa59c; font-size: 12px; }.footer-links a:hover { color: white; }.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 24px; color: #68645d; border-top: 1px solid var(--line); font-size: 9px; letter-spacing: .04em; }
.floating-wa { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: grid; grid-template-columns: 34px auto; align-items: center; gap: 8px; padding: 7px 15px 7px 8px; color: #0b2815; background: #dff3e4; border: 1px solid #a9d8b5; border-radius: 50px; box-shadow: 0 12px 35px rgb(0 0 0 / .24); }.floating-wa > span { display: grid; width: 34px; height: 34px; place-items: center; color: white; background: #25a957; border-radius: 50%; font-size: 9px; font-weight: 600; }.floating-wa small { font-size: 10px; font-weight: 600; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }.reveal.is-visible { opacity: 1; transform: none; }
@keyframes hero-scale { from { transform: scale(1.08); } to { transform: scale(1); } } @keyframes scroll-dot { 0%, 100% { transform: translateY(-24px); opacity: .25; } 50% { transform: translateY(0); opacity: 1; } }
@media (max-width: 980px) { .site-header { grid-template-columns: 1fr auto; height: 78px; padding: 0 22px; }.site-header.is-scrolled { height: 70px; }.brand { width: 66px; height: 60px; }.brand img { width: 58px; height: 58px; }.desktop-nav, .portal-link, .header-cta { display: none; }.menu-toggle, .mobile-panel { display: block; }.hero-content { max-width: 720px; padding-right: 30px; padding-left: 30px; }.hero-facts { right: 30px; left: 30px; }.scroll-cue, .hero-index { display: none; }.about-grid, .process-layout { grid-template-columns: 1fr; }.about-visual { max-width: 760px; }.process-intro { position: static; }.section-heading, .portfolio-heading { grid-template-columns: 1fr; gap: 20px; }.section-heading { max-width: none; }.portfolio-heading > p { max-width: 520px; }.portfolio-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 560px 330px; }.project-large { grid-column: 1 / -1; grid-row: auto; }.contact-panel { grid-template-columns: 1fr; }.contact-details { grid-template-columns: repeat(2, 1fr); gap: 0 35px; } }
@media (max-width: 680px) { .hero h1 { font-size: clamp(48px, 15vw, 70px); }.hero-content { justify-content: flex-end; padding-top: 110px; padding-bottom: 245px; }.hero-copy { margin-top: 24px; font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; margin-top: 28px; }.hero-facts { bottom: 38px; grid-template-columns: 1fr; }.hero-facts article { display: grid; grid-template-columns: 100px 1fr; align-items: center; padding-top: 10px; }.hero-facts strong { font-size: 19px; }.section { padding: 82px 22px; }.section-label { margin-bottom: 50px; }.section h2 { font-size: 45px; }.about-copy > p:not(.kicker) { font-size: 13px; }.about-visual { padding: 0 0 45px 28px; }.image-card img { height: 460px; }.about-note { width: 155px; min-height: 135px; }.about-note strong { font-size: 42px; }.section-heading { margin-bottom: 48px; }.service-item { grid-template-columns: 34px 1fr 24px; gap: 12px; padding: 26px 0; }.service-item:hover { padding: 26px 10px; }.service-item p { grid-column: 2 / 4; }.service-item h3 { font-size: 31px; }.service-item > i { font-size: 19px; }.portfolio-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 460px); }.project-large { grid-column: auto; }.project-card figcaption strong { font-size: 29px; }.process-steps li { grid-template-columns: 42px 1fr; }.why-grid { grid-template-columns: 1fr; }.why-image { grid-row: auto; min-height: 480px; }.why-card { min-height: 210px; }.contact { padding-bottom: 0; }.contact-copy { padding: 55px 28px; }.contact-details { grid-template-columns: 1fr; padding: 34px 28px; }.map-wrap { height: 340px; }.site-footer { grid-template-columns: 1fr; gap: 45px; padding: 65px 22px 25px; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }.floating-wa small { display: none; }.floating-wa { right: 15px; bottom: 15px; grid-template-columns: 34px; padding: 7px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; } }