/* LEVEL UP · October 2026 The original layout, palette, logo and Georgia signature remain intact. This small layer can be removed independently of the original stylesheet. */ :root { --muted: #565d51; --light-muted: #c3c8b9; --space-section: clamp(68px, 7.8vw, 112px); --ease-editorial: cubic-bezier(.22, .61, .36, 1); --shadow-editorial: 0 20px 48px -30px rgba(26, 31, 20, .38); --glass-dark: rgba(17, 20, 15, .93); --gold-border: rgba(213, 180, 124, .34); } body { text-rendering: optimizeLegibility; } .section { padding-block: var(--space-section); } .site-header { background: var(--glass-dark); border-bottom: 1px solid rgba(213, 180, 124, .09); transition: box-shadow .35s, background .35s; } @supports (backdrop-filter: blur(16px)) { .site-header { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } } .site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .65); } .nav-inner { border-bottom: 0; } .utility-bar { font-size: 10px; } .desktop-nav > a { font-size: 12px; padding-block: 16px; } .language-select { font-size: 11px; } .eyebrow { font-size: 11px; letter-spacing: .18em; } .hero .eyebrow { color: #efdcb7; } .hero h1 { letter-spacing: -.052em; } .hero-content { padding-block: 80px 112px; } .hero-category, .page-category { display: block; max-width: 36ch; margin-top: 24px; font-family: var(--sans); font-size: clamp(14px, 1.3vw, 17px); font-style: normal; font-weight: 500; line-height: 1.65; letter-spacing: .02em; color: var(--gold-light); } .page-category { color: #76613e; font-size: 15px; margin-top: 22px; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 24px; } .breadcrumb a { border-bottom: 1px solid rgba(79, 85, 64, .3); } .breadcrumb a:hover { color: var(--ink); border-color: #92703d; } .hero-description { font-size: 15px; line-height: 1.85; max-width: 46ch; margin-top: 20px; } .hero-text-link { font-size: 12px; } .hero-shade { background: linear-gradient(90deg, rgba(13, 17, 13, .96), rgba(13, 17, 13, .77) 31%, rgba(13, 17, 13, .21) 65%, rgba(13, 17, 13, .04)), linear-gradient(0deg, rgba(13, 17, 13, .78), transparent 34%); } .button { min-height: 52px; font-size: 13px; border-radius: 3px; transition: background .25s, border-color .25s, color .25s, box-shadow .3s, transform .3s var(--ease-editorial); } .button-gold { background: linear-gradient(115deg, #cfac71, #e2c590 58%, #d5b47c); box-shadow: 0 7px 22px -14px rgba(220, 183, 120, .7); } .button-dark { box-shadow: var(--shadow-editorial); } .nav-cta { min-height: 45px; font-size: 11px; padding: 10px 16px; } .text-link { font-size: 13px; } .trust-item b { font-size: 12px; } .trust-item span { font-size: 11px; } .intro-copy, .section-sub, .partner-description, .contact-lead, .pagehead-description, .catalog-heading .section-sub, .window-description > p, .visit-card > p:not(.eyebrow) { font-size: 15px; line-height: 1.85; } .principle p, .quality-row p, .process-step p, .catalog-card-copy p { font-size: 14px; line-height: 1.8; } .quality-row h3, .process-step h3 { font-size: 14px; font-weight: 600; } .quality-copy .section-sub { font-size: 14px; line-height: 1.85; } .collection-text p { font-size: 13px; line-height: 1.65; } .collection-image { background: radial-gradient(ellipse at 50% 31%, #fafbf6, #e7e9e0 78%); border: 1px solid rgba(79, 85, 64, .14); border-radius: 4px; box-shadow: 0 10px 24px -23px rgba(24, 31, 20, .5); transition: border-color .35s, box-shadow .35s; } .collection-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px rgba(255, 255, 255, .65); } .collection-card:focus-visible .collection-image { border-color: #92703d; } .card-arrow { width: 39px; height: 39px; border-color: #989e89; backdrop-filter: blur(5px); } .principle { border-inline-start: 2px solid rgba(180, 145, 87, .3); padding-inline-start: 22px; } .dark-section { background-image: radial-gradient(ellipse at 94% 0, rgba(190, 151, 83, .055), transparent 60%); } .engineering-art, .catalog-image, .visit-card { border-radius: 4px; border: 1px solid rgba(65, 74, 51, .12); } .engineering-art { box-shadow: 0 30px 70px -48px rgba(0, 0, 0, .6); } .pagehead-image img, .gallery-item img, .partner-image img, .craft-card img { border-radius: 4px; } .pagehead-image img { box-shadow: var(--shadow-editorial); } .gallery-item figcaption, .craft-card figcaption { font-size: 12px; } .process-step { padding-block: 6px; } .enquiry-form { background: linear-gradient(130deg, rgba(39, 44, 32, .95), rgba(29, 34, 25, .98)); border-color: var(--gold-border); border-radius: 5px; box-shadow: 0 22px 70px -38px rgba(0, 0, 0, .7), inset 0 1px rgba(255, 255, 255, .035); } .field label, .role-fieldset legend { font-size: 12px; } .field input, .field textarea { border-radius: 3px 3px 0 0; background: rgba(48, 55, 39, .68); } .role-option { font-size: 11px; min-height: 44px; } .role-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; } .form-note, .fineprint, .quality-copy .fineprint { font-size: 12px; line-height: 1.8; } .form-submit { font-size: 13px; } .direct-contact > span, .contact-channels > p { font-size: 12px; } .direct-contact .text-link { font-size: 12px; } .footer-brand > p { font-size: 12px; } .footer-brand > p.company-line { font-size: 10px; color: #aab19e; } .footer-col h2 { font-size: 11px; } .footer-col > a { font-size: 12px; min-height: 30px; } .footer-bottom { font-size: 10px; flex-wrap: wrap; } .footer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .footer-settings { padding: 8px 0; color: #c5c9bb; background: transparent; border: 0; border-bottom: 1px solid #58624b; font-size: 11px; min-height: 40px; } .footer-settings:hover { color: var(--gold-light); } .catalog-nav a { font-size: 13px; } .catalog-heading h2 { font-size: clamp(32px, 3.1vw, 44px); } .catalog-card-copy h3 { font-size: clamp(25px, 2vw, 29px); } .catalog-card-copy .text-link { font-size: 12px; } .chip { font-size: 11px; } .swatch { border-radius: 3px; overflow: hidden; } .swatch-label b { font-size: 11px; } .swatch-label small { font-size: 10px; } .contact-list dt { font-size: 12px; } .contact-list dd { font-size: 14px; } .language-fallback { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; padding: 12px; background: var(--cream); color: var(--ink); font-size: 13px; } .privacy-dialog { width: min(580px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--gold-border); border-radius: 5px; color: var(--paper); background: #1c2118; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); } .privacy-dialog::backdrop { background: rgba(12, 16, 10, .7); backdrop-filter: blur(4px); } .privacy-dialog h2 { font-size: 32px; line-height: 1.3; letter-spacing: -.025em; } .privacy-dialog p { font-size: 14px; color: var(--light-muted); margin-top: 18px; line-height: 1.8; } .privacy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; } .privacy-actions .button { font-size: 12px; padding-inline: 14px; gap: 8px; } .privacy-close { display: block; margin-top: 18px; color: var(--light-muted); background: transparent; border: 0; text-decoration: underline; padding: 10px 0; font-size: 12px; } .privacy-status { min-height: 1.8em; } .image-disclosure { position: absolute; inset-inline-end: 12px; bottom: 12px; padding: 4px 8px; border: 1px solid rgba(213, 180, 124, .4); border-radius: 3px; background: rgba(16, 20, 13, .82); color: #efe9db; font: 10px/1.5 var(--sans); z-index: 2; } @media (hover: hover) and (pointer: fine) { .button:hover { transform: translateY(-2px); } .button-gold:hover { box-shadow: 0 12px 32px -16px rgba(226, 189, 128, .7); } .collection-card:hover .collection-image { border-color: rgba(148, 116, 63, .5); box-shadow: var(--shadow-editorial); } .gallery-item img { transition: filter .4s; } .gallery-item:hover img { filter: brightness(1.035); } } /* Scroll effects never hide text: when JS fails, all content is readable. */ @media (prefers-reduced-motion: no-preference) { .mp-reveal-enter { animation: mp-reveal .65s var(--ease-editorial) both; } @keyframes mp-reveal { from { transform: translateY(14px); } to { transform: translateY(0); } } } @media (min-width: 1081px) and (max-width: 1230px) { .desktop-nav > a { font-size: 11px; } .nav-cta { font-size: 10px; padding-inline: 12px; } .desktop-nav { gap: 16px; } } @media (max-width: 760px) { :root { --space-section: 66px; } .utility-bar { font-size: 9px; } .hero { min-height: 730px; } .hero-content { padding-block: 54px 108px; } .hero h1 { font-size: clamp(43px, 8.25vw, 60px); line-height: 1.13; } .hero-category { font-size: 14px; margin-top: 21px; max-width: 29ch; } .page-category { font-size: 14px; margin-top: 19px; } .hero .eyebrow { font-size: 10px; max-width: 34ch; } .hero-description { font-size: 14px; max-width: 35ch; margin-top: 19px; } .hero-actions .button { font-size: 13px; min-height: 52px; } .hero-text-link { font-size: 12px; } .eyebrow { font-size: 10px; } .principle { border-inline-start: 0; padding-inline-start: 0; } .trust-item b { font-size: 12px; } .trust-item span { font-size: 11px; } .intro-copy, .section-sub, .partner-description, .contact-lead, .pagehead-description, .catalog-heading .section-sub, .window-description > p, .visit-card > p:not(.eyebrow) { font-size: 14px; } .collection-text h3 { font-size: 23px; } .collection-text p { font-size: 12px; } .card-arrow { width: 34px; height: 34px; } .catalog-nav a { font-size: 12px; } .privacy-actions { grid-template-columns: 1fr; } .footer-bottom > span { max-width: 100%; } .footer-tools { gap: 12px; } } html[dir=rtl] .hero-category, html[dir=rtl] .page-category { font-family: Tahoma, Arial, sans-serif; letter-spacing: 0; line-height: 1.85; } html[dir=rtl] .desktop-nav > a { font-size: 12px; } @media (max-width: 760px) { html[dir=rtl] .hero { min-height: 800px; } html[dir=rtl] .hero h1 { font-size: 36px; line-height: 1.7; } html[lang=ru] .hero { min-height: 790px; } } @media (prefers-reduced-motion: reduce) { .mp-reveal-enter { animation: none; } .button:hover { transform: none; } } @media print { .privacy-dialog, .footer-tools { display: none !important; } .hero-category, .page-category { color: inherit; } } /* ATELIER REVISION · visibly stronger architecture, same Majestic Prime identity. */ :root { --deep: #0b0e0a; --ink: #171d14; --panel: #21291d; --cream: #f1eee5; --paper: #faf8f1; --gold: #d6b781; --gold-light: #f0ddba; --atelier-line: rgba(222, 193, 145, .23); } .site-header { background: rgba(11, 15, 10, .97); border-bottom: 1px solid var(--atelier-line); } .utility-bar { background: #080b07; border-color: rgba(223, 197, 149, .12); } .utility-inner { min-height: 29px; } .nav-inner { min-height: 88px; gap: 24px; } .brand { gap: 14px; } .brand-symbol { width: 53px; height: 50px; overflow: visible; } .brand-symbol img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: normal; } .brand-wordmark { width: 190px; height: 23px; overflow: visible; } .brand-wordmark img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: normal; } .brand-type { gap: 7px; } .brand-tag { font-size: 8px; letter-spacing: .28em; color: #c3b79c; } .desktop-nav > a { font-size: 12px; } .desktop-nav > a::after { bottom: 9px; } .nav-cta { border-radius: 4px; border-color: rgba(216, 184, 128, .6); background: rgba(214, 183, 129, .06); } .nav-cta:hover { box-shadow: 0 0 26px -16px #e6c891; } .site-header.is-scrolled { background: rgba(11, 15, 10, .94); box-shadow: 0 12px 44px -24px #000; } .button { border-radius: 4px; min-height: 55px; padding-inline: 26px; letter-spacing: .015em; } .button-gold { background: linear-gradient(115deg, #d3b17a 0, #f0d7a8 50%, #d3b17a 100%); border-color: #e3c898; color: #10140d; box-shadow: 0 9px 34px -21px #daba80; } .button-outline { border-color: rgba(223, 193, 142, .65); } .hero { min-height: 800px; min-height: max(760px, calc(100svh - 117px)); overflow: hidden; justify-content: center; background: #161b11; } .hero-image { object-position: 58% 50%; } .hero-shade { background: linear-gradient(90deg, rgba(10, 16, 10, .92) 0%, rgba(12, 18, 11, .68) 31%, rgba(13, 18, 12, .19) 66%, rgba(10, 14, 8, .06)), linear-gradient(0deg, rgba(6, 10, 5, .88), transparent 34%); } .hero::after { content: ''; position: absolute; top: 30px; inset-inline: var(--gutter); height: 1px; background: linear-gradient(90deg, #c7a978, transparent 56%); opacity: .5; pointer-events: none; } .hero-content { padding-block: 72px 156px; } .hero .eyebrow { font-size: 11px; letter-spacing: .22em; display: flex; align-items: center; gap: 17px; } .hero .eyebrow::before { content: ''; width: 38px; height: 1px; background: #d8b888; } .hero h1 { max-width: 10.1em; font-size: clamp(58px, 6.4vw, 101px); line-height: 1.02; letter-spacing: -.06em; color: #f6f2e7; } .hero h1 em { color: #e4c48d; } .hero-category { margin-top: 30px; padding-inline-start: 18px; border-inline-start: 1px solid #c7a36c; max-width: 46ch; color: #e4d9c2; font-size: 14px; letter-spacing: .045em; } .hero-description { color: #dbddcf; max-width: 47ch; font-size: 15px; line-height: 1.8; margin-top: 24px; } .hero-actions { margin-top: 32px; gap: 23px 30px; } .hero-text-link { font-size: 12px; border-bottom: 1px solid rgba(224, 199, 153, .38); } .hero-bottom { padding-block: 23px 27px; z-index: 2; } .hero-bottom::before { background: rgba(232, 211, 174, .3); } .hero-system-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 0; } .hero-system-rail a { min-height: 52px; display: flex; align-items: center; gap: 16px; color: #eae5d8; padding-inline: 26px; border-inline-start: 1px solid rgba(232, 211, 174, .18); transition: background .25s, color .25s; } .hero-system-rail a:first-child { padding-inline-start: 0; border-inline-start: 0; } .hero-system-rail a:last-child { padding-inline-end: 0; } .hero-system-rail small { font-size: 10px; color: #c4a87a; font-weight: 400; letter-spacing: .06em; } .hero-system-rail span { font-size: 14px; font-weight: 500; line-height: 1.4; } .hero-system-rail svg { margin-inline-start: auto; width: 19px; height: 19px; color: #d7b985; } .hero-system-rail a:hover { color: #f1d3a0; background: rgba(237, 212, 171, .045); } .hero-annotation { position: absolute; inset-inline-end: var(--gutter); bottom: 183px; width: 266px; border: 1px solid rgba(232, 211, 174, .4); border-inline-start: 3px solid #d0b17c; padding: 22px 26px; color: #f4eee0; background: rgba(26, 32, 21, .44); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 14px 38px -26px #000; } .hero-annotation-index { font-size: 9px; letter-spacing: .2em; color: #e1c79d; } .hero-annotation-title { font-family: var(--serif); font-size: 27px; letter-spacing: -.04em; line-height: 1.2; margin-top: 13px; } .hero-annotation-sub { font-size: 11px; color: #e1dece; margin-top: 12px; } .ai-visual-caption { position: absolute; inset-inline-end: var(--gutter); bottom: 120px; color: #fff3dc; background: rgba(9, 13, 7, .7); border: 1px solid rgba(226, 206, 169, .18); font-size: 10px; line-height: 1.5; letter-spacing: .02em; padding: 5px 9px; z-index: 2; max-width: 35ch; } .trust-strip { background: #ece9dd; border-bottom-color: rgba(45, 52, 32, .16); } .trust-item { padding-block: 29px; } .trust-item .line-icon { width: 31px; height: 31px; padding: 6px; box-sizing: content-box; border: 1px solid #cbc8b6; border-radius: 50%; color: #887144; } .editorial-intro h2 { font-size: clamp(40px, 4.6vw, 66px); } .principles { margin-top: 48px; } .principle { background: #ebe9df; border: 1px solid #d5d7c8; border-radius: 5px; padding: 27px 29px; } .principle h3 { font-size: 26px; } .index-number { color: #836b41; letter-spacing: .15em; } .collection-section { background: #151b12; color: #f2f0e5; border-color: rgba(204, 177, 126, .15); position: relative; } .collection-section .eyebrow { color: #d5b885; } .collection-section .section-heading h2 { max-width: 18ch; font-size: clamp(42px, 4.6vw, 65px); } .collection-section .section-heading h2 em { color: #ddbf89; } .collection-section .section-sub { color: #c7ccb9; } .collection-section .section-heading-row > .text-link { color: #dfc699; border-color: #887650; } .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .collection-card { background: #1e2619; border: 1px solid rgba(206, 180, 136, .25); border-radius: 6px; overflow: hidden; transition: transform .35s, border-color .35s, box-shadow .35s; } .collection-image { margin: 12px 12px 0; border-radius: 4px; aspect-ratio: 1.65; background: radial-gradient(ellipse at 52% 39%, #faf8ed 0, #e2e1d1 77%); border: 0; box-shadow: none; } .collection-image::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(66, 76, 47, .16); pointer-events: none; } .collection-image::after { box-shadow: none; } .collection-image img { width: 82%; height: 83%; max-width: 380px; object-fit: contain; padding: 20px 12px; } .product-index { top: 31px; inset-inline-start: 31px; color: #5e6951; font-size: 10px; } .card-arrow { inset-inline-end: 28px; bottom: 28px; border-color: rgba(88, 100, 69, .36); width: 44px; height: 44px; background: rgba(253, 250, 240, .65); color: #424f32; } .collection-text { padding: 24px 28px 27px; } .collection-text h3 { font-size: 32px; color: #f2eedf; } .collection-text p { color: #c2c9b6; font-size: 13px; } .collection-card:focus-visible { outline: 2px solid #e3c899; outline-offset: 5px; } .quality-section { background: radial-gradient(ellipse at 96% 6%, rgba(157, 155, 107, .18), transparent 56%), #212b1c; } .engineering-art { background: #e9e5d7; border-radius: 5px 54px 5px 5px; border: 1px solid #b8a377; box-shadow: 0 24px 65px -32px #050904; } .quality-copy h2 { font-size: clamp(40px, 4.1vw, 62px); } .quality-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; border: 0; } .quality-row { border: 1px solid rgba(204, 190, 156, .2); padding: 19px; display: block; border-radius: 4px; background: rgba(10, 17, 7, .13); } .quality-row .line-icon { margin-bottom: 14px; } .quality-row h3 { color: #ecdec2; } .process-section { background: #eeece1; } .process-step { position: relative; background: #f8f6ed; padding: 28px; border: 1px solid #d3d8c7; border-radius: 5px; } .partner-section { background: #faf8f0; } .partner-image { overflow: hidden; border-radius: 5px; } .partner-image img { width: 100%; border-radius: 5px; } .gallery-section { background: #e9e8dc; } .gallery-section .section-heading h2 { max-width: 15ch; font-size: clamp(42px, 4.5vw, 64px); } .gallery-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 25px; align-items: stretch; } .gallery-item { min-width: 0; margin: 0; } .gallery-item:first-child { grid-row: span 2; } .gallery-item img { width: 100%; height: 236px; object-fit: cover; border-radius: 4px; } .gallery-item:first-child img { height: calc(472px + 72px); } .gallery-item figcaption { border-top: 1px solid #bec4b1; padding-top: 12px; margin-top: 12px; min-height: 34px; color: #515e46; } .gallery-note { max-width: 70ch; font-size: 12px; } .pagehead { position: relative; background: linear-gradient(145deg, #efeee3 20%, #e2e5d5); overflow: hidden; } .pagehead::before { content: ''; position: absolute; width: 550px; height: 550px; border: 1px solid rgba(146, 124, 83, .17); border-radius: 50%; inset-inline-end: -135px; top: -170px; pointer-events: none; } .pagehead h1 { font-size: clamp(50px, 5.3vw, 79px); } .pagehead-image { position: relative; } .pagehead-image::after { content: ''; position: absolute; z-index: -1; inset: 22px; transform: translate(15px, 15px); border: 1px solid #a4ad8a; } .pagehead-image img { border-radius: 5px 48px 5px 5px; box-shadow: 0 24px 50px -30px rgba(41, 50, 27, .55); } .catalog-section:nth-of-type(odd) { background: #e9eade; } .catalog-heading { border-bottom: 1px solid #bec5ab; padding-bottom: 31px; } .catalog-card { border: 1px solid #c6cdb7; border-radius: 5px; background: #f6f5ea; overflow: hidden; } .catalog-card-copy { padding: 25px; } .catalog-image { border: 0; border-radius: 0; background: #eeeee4; } .window-stage { border: 1px solid #b6bf9e; border-radius: 6px; box-shadow: 0 20px 55px -35px #444e30; } .craft-section { background: #1c2517; } .craft-card img { border-radius: 5px 38px 5px 5px; } .team-section { background: #f3f0e6; border-top: 1px solid #d8dccb; border-bottom: 1px solid #d8dccb; } .team-heading-row { align-items: center; margin-bottom: 44px; } .team-heading-row .section-heading { max-width: 680px; } .team-heading-row .section-heading h2 { font-size: clamp(40px, 4vw, 60px); max-width: 16ch; } .team-heading-row > .section-sub { max-width: 34ch; margin-top: 0; } .team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .person-card { min-width: 0; display: flex; flex-direction: column; padding: 24px 22px 0; color: #f3eedf; background: radial-gradient(ellipse at 100% 0, rgba(185, 167, 113, .12), transparent 57%), #1c2517; border: 1px solid #414c32; border-radius: 5px; box-shadow: 0 16px 36px -28px rgba(20, 29, 13, .65); transition: border-color .3s, transform .3s; } .person-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; min-height: 165px; } .person-portrait { width: 112px; height: 148px; flex-shrink: 0; border-radius: 3px 29px 3px 3px; overflow: hidden; background: #d6d9cb; border: 1px solid #99967e; } .person-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .person-monogram { font-family: var(--serif); font-size: 30px; font-style: italic; letter-spacing: -.1em; line-height: 1; color: #b49a68; opacity: .65; } .person-heading { margin-block: 5px 20px; min-height: 92px; } .person-role { font-size: 10px; line-height: 1.6; letter-spacing: .09em; color: #d0b786; text-transform: uppercase; margin-bottom: 11px; min-height: 32px; } .person-heading h3 { font-size: 25px; line-height: 1.15; letter-spacing: -.025em; color: #f3eedf; overflow-wrap: normal; } .person-links { display: flex; flex-direction: column; gap: 4px; padding-top: 17px; border-top: 1px solid #414c32; margin-bottom: 22px; } .person-links a { display: flex; align-items: center; gap: 9px; font-size: 11px; min-height: 34px; line-height: 1.55; color: #dedecd; overflow-wrap: anywhere; } .person-links a span { min-width: 0; } .person-links .contact-icon { width: 15px; height: 15px; color: #c7ad79; } .person-links a:hover { color: #f0d4a2; } .person-actions { margin-top: auto; margin-inline: -22px; padding: 5px 22px; border-top: 1px solid #414c32; background: rgba(9, 17, 5, .26); } .person-actions a { min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #e1c796; font-size: 11px; line-height: 1.4; } .person-actions a + a { border-top: 1px solid rgba(173, 183, 151, .12); color: #bec9ad; } .person-actions a:hover { color: #f5dcaf; } .contact-icon { width: 18px; height: 18px; flex-shrink: 0; } .contact-section { background: radial-gradient(ellipse at 0 0, rgba(200, 171, 108, .1), transparent 58%), #121b0e; } .enquiry-form { border-radius: 5px 30px 5px 5px; border-color: #5f6548; background: rgba(45, 55, 35, .55); box-shadow: 0 18px 45px -28px #000; } .contact-intro h2 { font-size: clamp(43px, 4.5vw, 64px); } .closing-cta { background: radial-gradient(ellipse at 84% 45%, rgba(198, 170, 108, .13), transparent 60%), #152010; } .site-footer { background: #0c1208; } html[dir="rtl"] .hero-image { transform: scaleX(-1); } html[dir="rtl"] .hero-shade { background: linear-gradient(270deg, rgba(10,16,10,.92), rgba(12,18,11,.68) 31%, rgba(13,18,12,.19) 66%, rgba(10,14,8,.06)), linear-gradient(0deg,rgba(6,10,5,.88),transparent 34%); } html[dir="rtl"] .hero h1 { letter-spacing: -.015em; max-width: 12em; } html[dir="rtl"] .person-heading h3 { text-align: start; } @media (hover:hover) and (pointer:fine) { .collection-card:hover { transform: translateY(-5px); border-color: #b49c6c; box-shadow: 0 21px 42px -30px #050a03; } .person-card:hover { transform: translateY(-4px); border-color: #b39d6d; } .gallery-item img { transition: filter .4s; } .gallery-item:hover img { filter: saturate(1.08); } } @media (max-width:1230px) { .brand-wordmark { width: 163px; height: 21px; } .brand-symbol { width: 48px; height: 46px; } .brand { gap: 11px; } .nav-actions { gap: 13px; } .desktop-nav { gap: 18px; } .desktop-nav > a { font-size: 11px; } .hero-annotation { width: 228px; padding: 19px 23px; } .team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .person-top { justify-content: flex-start; gap: 36px; } .person-heading { min-height: 72px; } .person-role { min-height: 0; } .person-heading h3 { font-size: 29px; } .person-links a { font-size: 13px; } } @media (max-width:1080px) { .hero-annotation { display: none; } .hero { min-height: 760px; } .hero h1 { font-size: clamp(58px,7.5vw,82px); max-width: 10em; } .hero-system-rail a { padding-inline: 18px; gap: 10px; } .hero-system-rail span { font-size: 12px; } .quality-rows { grid-template-columns: 1fr; } .quality-row { display: flex; align-items: flex-start; gap: 16px; padding: 17px; } .quality-row .line-icon { margin-bottom: 0; } .quality-row h3 { font-size: 15px; } } @media (max-width:760px) { .utility-inner { min-height: 28px; } .utility-right { display: none; } .nav-inner { min-height: 78px; gap: 12px; } .nav-actions { gap: 10px; } .brand-symbol { width: 44px; height: 42px; } .brand-wordmark { width: 154px; height: 19px; } .brand { gap: 10px; } .brand-tag { font-size: 7px; letter-spacing: .25em; } .hero { min-height: 880px; justify-content: flex-start; } .hero::after { top: 25px; } .hero-image { object-position: 57% 50%; } .hero-shade { background: linear-gradient(90deg,rgba(9,15,8,.93),rgba(12,18,10,.53)),linear-gradient(0deg,rgba(6,10,5,.96),transparent 65%); } .hero-content { padding-block: 65px 226px; } .hero .eyebrow { font-size: 9px; letter-spacing: .14em; gap: 13px; margin-bottom: 27px; } .hero .eyebrow::before { width: 24px; } .hero h1 { font-size: clamp(49px,10.8vw,75px); line-height: 1.08; max-width: 10em; letter-spacing: -.055em; } .hero-category { font-size: 12px; margin-top: 26px; line-height: 1.55; padding-inline-start: 13px; } .hero-description { font-size: 14px; line-height: 1.75; max-width: 39ch; margin-top: 21px; } .hero-actions { flex-direction: column; align-items: flex-start; gap: 13px; margin-top: 28px; } .hero-actions .button { min-height: 52px; padding-inline: 21px; font-size: 12px; } .hero-bottom { padding-block: 20px; } .hero-system-rail { grid-template-columns: 1fr 1fr; gap: 0 20px; } .hero-system-rail a { min-height: 56px; border: 0; border-bottom: 1px solid rgba(232,211,174,.18); padding-inline: 0; gap: 11px; } .hero-system-rail a:last-child { border-bottom: 1px solid rgba(232,211,174,.18); } .hero-system-rail small { font-size: 9px; } .hero-system-rail span { font-size: 12px; } .hero-system-rail svg { width: 16px; height: 16px; } .ai-visual-caption { bottom: 168px; inset-inline-start: var(--gutter); inset-inline-end: auto; font-size: 9px; } .collection-grid { grid-template-columns: 1fr; gap: 22px; } .collection-image { aspect-ratio: 1.48; } .collection-text { padding: 22px 24px 25px; } .collection-text h3 { font-size: 30px; } .collection-image img { height: 90%; } .principle { padding: 22px; } .principle h3 { font-size: 25px; } .process-step { padding: 24px; } .gallery-grid { grid-template-columns: 1fr; gap: 29px; } .gallery-item:first-child { grid-row: auto; } .gallery-item img, .gallery-item:first-child img { height: auto; aspect-ratio: 1.22; } .pagehead h1 { font-size: clamp(45px,9vw,63px); } .pagehead-image::after { inset: 12px; transform: translate(7px,7px); } .pagehead-image img { border-radius: 4px 32px 4px 4px; } .team-heading-row { display: block; } .team-heading-row > .section-sub { margin-top: 24px; max-width: 46ch; } .team-grid { grid-template-columns: 1fr; gap: 22px; } .person-card { padding: 24px 25px 0; } .person-top { gap: 36px; min-height: 160px; } .person-heading { min-height: 0; margin-top: 4px; } .person-heading h3 { font-size: 31px; } .person-links { padding-top: 17px; } .person-links a { min-height: 38px; font-size: 13px; } .person-actions { margin-inline: -25px; padding-inline: 25px; } .person-actions a { font-size: 12px; min-height: 46px; } html[dir="rtl"] .hero-shade { background: linear-gradient(270deg,rgba(9,15,8,.93),rgba(12,18,10,.53)),linear-gradient(0deg,rgba(6,10,5,.96),transparent 65%); } } @media (max-width:374px) { .nav-inner { gap: 9px; } .nav-actions { gap: 8px; } .brand-wordmark { width: 125px; height: 16px; } .brand-symbol { width: 36px; height: 35px; } .brand { gap: 8px; } .brand-tag { font-size: 6px; letter-spacing: .2em; } .language-select { min-width: 44px; padding-inline-start: 4px; } .hero h1 { font-size: 44px; } .hero { min-height: 930px; } .hero .eyebrow { font-size: 8px; letter-spacing: .1em; } } @media (prefers-reduced-motion:reduce) { .collection-card, .person-card, .gallery-item img { transition: none; } .collection-card:hover, .person-card:hover { transform: none; } } .person-monogram img { width: 38px; height: 38px; object-fit: contain; } @media (min-width:1081px) { .quality-row:last-child { grid-column: 1 / -1; } } /* Product imagery · individually inspected original product assets. */ :root { --header: 118px; } .site-header, .site-header.is-scrolled { background: #0b0f0a; backdrop-filter: none; -webkit-backdrop-filter: none; } html { scroll-padding-top: 134px; } .catalog-nav { top: var(--header); } .collection-image img { width: 94%; height: 92%; max-width: none; padding: 16px; } .signature-showcase { background: #f1eee4; border-bottom: 1px solid #cdd0bd; } .signature-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: 6%; } .signature-copy { min-width: 0; } .signature-copy h2 { font-size: clamp(44px,4.7vw,67px); max-width: 12ch; } .signature-copy h2 em { color: #7f683d; } .signature-copy .section-sub { max-width: 43ch; margin-top: 27px; } .signature-copy .button { margin-top: 29px; } .signature-copy .fineprint { margin-top: 23px; max-width: 46ch; font-size: 12px; } .signature-product { min-width: 0; overflow: hidden; border: 1px solid #a8b290; border-radius: 6px; box-shadow: 0 25px 65px -38px rgba(34,44,24,.48); } .signature-edition { display: block; padding: 15px 23px; background: #202b1b; color: #ddc497; font: 9px/1.7 var(--sans); letter-spacing: .19em; } .window-preview { min-width: 0; border: 1px solid #bbc2ab; border-radius: 5px; overflow: hidden; background: #f7f5ed; } .signature-product .window-preview { border: 0; border-radius: 0; } .window-preview-canvas { min-height: 378px; background: radial-gradient(ellipse at 50% 36%, #fffdf5, #e8e7da 88%); border-bottom: 1px solid #c6ccb6; } .window-preview-pane { min-height: inherit; padding: 28px 25px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; } .window-preview-pane img { width: 100%; height: 288px; object-fit: contain; filter: drop-shadow(0 12px 9px rgba(41,46,33,.1)); } .window-preview-pane figcaption { font: 12px/1.65 var(--sans); color: #515c43; text-align: center; } .window-preview-controls { display: flex; flex-wrap: wrap; gap: 9px; padding: 17px 20px; background: #f7f5ed; } .window-preview-choice { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 1 1 auto; min-height: 44px; border: 1px solid #b9c0a8; border-radius: 3px; padding: 9px 12px; color: #455039; background: transparent; font-size: 12px; line-height: 1.5; transition: border-color .2s, background .2s, color .2s; } .window-preview-choice[aria-pressed="true"] { border-color: #35452a; background: #26351e; color: #f3ecd8; } .window-preview-choice:hover { border-color: #75825f; } .window-preview-choice:focus-visible { outline: 2px solid #8c6c35; outline-offset: 3px; } .finish-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(240,235,219,.6); } .finish-dot-oak { background: linear-gradient(105deg,#ba8e59,#dfbc88,#a87a49); } .finish-dot-anthracite { background: #393e40; } .finish-dot-grey { background: #b7b9b6; } .window-preview-compact .window-preview-canvas { min-height: 320px; } .window-preview-compact .window-preview-pane img { height: 232px; } .window-preview-compact .window-preview-controls { padding: 13px; gap: 7px; } .window-preview-compact .window-preview-choice { font-size: 11px; padding-inline: 9px; } .gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 27px; } .gallery-item:first-child { grid-row: auto; } .gallery-item img, .gallery-item:first-child img { height: 360px; object-fit: cover; } .gallery-item.gallery-product img { object-fit: contain; padding: 18px; background: radial-gradient(ellipse at center,#fffdf4,#dddccd); } .gallery-2, .gallery-3 { margin-top: 0; } .door-detail img { object-fit: contain; object-position: center; background: #eeeee4; padding: 15px; } .accessory-grid article { display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 16px; padding-top: 0; border-top: 0; align-items: start; } .accessory-grid h3 { font-size: 22px; line-height: 1.4; } .accessory-image { grid-column: 1 / -1; aspect-ratio: 1.5; background: #eeeee4; border: 1px solid #c5ccb6; border-radius: 5px; overflow: hidden; } .accessory-image img { width: 100%; height: 100%; object-fit: contain; padding: 20px; } .craft-card:first-child img, .craft-card:last-child img { object-fit: contain; padding: 24px; background: #e9e9de; } @media (prefers-reduced-motion:no-preference) { .window-preview-pane:not([hidden]) img { animation: product-view-enter .3s ease-out; } @keyframes product-view-enter { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } } /* Compact navigation follows the page instead of obscuring the mobile viewport. */ @media (max-width:1080px) { .site-header { position: relative; top: auto; } .site-header.is-scrolled { box-shadow: none; } .catalog-nav { position: static; } html { scroll-padding-top: 24px; } .catalog-section { scroll-margin-top: 24px; } .signature-grid { gap: 4%; } .signature-copy h2 { font-size: 45px; } .window-preview-controls { padding: 14px; } .window-preview-choice { font-size: 11px; padding-inline: 9px; } .gallery-item img, .gallery-item:first-child img { height: 290px; } } @media (max-width:760px) { .signature-grid { grid-template-columns: 1fr; gap: 33px; } .signature-copy h2 { font-size: 45px; } .signature-copy .section-sub { margin-top: 23px; } .signature-copy .fineprint { font-size: 11px; } .signature-edition { padding: 13px 18px; font-size: 8px; letter-spacing: .15em; } .window-preview-canvas { min-height: 318px; } .window-preview-pane { padding: 22px 13px 17px; gap: 14px; } .window-preview-pane img { height: 244px; } .window-preview-pane figcaption { font-size: 11px; } .window-preview-controls { gap: 7px; padding: 13px; } .window-preview-choice { font-size: 11px; min-height: 44px; padding: 8px 9px; } .window-preview-compact .window-preview-canvas { min-height: 296px; } .window-preview-compact .window-preview-pane img { height: 220px; } .gallery-grid { grid-template-columns: 1fr; gap: 29px; } .gallery-item img, .gallery-item:first-child img { height: auto; aspect-ratio: 1.1; } .gallery-item.gallery-product img { aspect-ratio: 1.35; } .accessory-grid article { gap: 16px; } .accessory-grid h3 { font-size: 24px; } .accessory-image { aspect-ratio: 1.65; } .collection-image img { padding: 13px; height: 93%; } .door-detail img { padding: 10px; } html[dir="rtl"] .signature-copy h2 { font-size: 35px; line-height: 1.6; } html[lang="ru"] .signature-copy h2 { font-size: 39px; } } /* Company film · actual media stays unloaded until the visitor presses play. */ .film-section { background: #eeece2; border-block: 1px solid #d0d2c1; } .film-heading-row { align-items: end; margin-bottom: 39px; } .film-heading-row .section-sub { max-width: 43ch; margin-bottom: 5px; } .film-heading-row h2 { font-size: clamp(42px,4.2vw,65px); line-height: 1.08; } .film-frame { overflow: hidden; margin: 0; border: 1px solid #777c60; border-radius: 5px; background: #11180e; box-shadow: 0 26px 66px -37px rgba(24,34,17,.6); } .film-stage { position: relative; aspect-ratio: 16 / 9; background: #080c06; } .film-stage video { display: block; width: 100%; height: 100%; object-fit: contain; } .film-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 18px; min-height: 82px; max-width: calc(100% - 32px); padding: 14px 30px 14px 14px; border: 1px solid rgba(239,219,179,.7); border-radius: 80px; background: rgba(13,20,9,.93); color: #f9eed7; box-shadow: 0 12px 44px rgba(0,0,0,.22); cursor: pointer; transition: background .22s, border-color .22s; } .film-play-icon { display: grid; place-items: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; color: #1a2412; background: linear-gradient(120deg,#d0ac72,#efdab2); } .film-play-icon svg { width: 22px; height: 22px; margin-inline-start: 3px; } .film-play-text { display: grid; gap: 3px; text-align: start; font-size: 15px; line-height: 1.4; } .film-play-duration { color: #d8be8d; font-size: 10px; letter-spacing: .16em; } .film-play:hover { background: #24331b; border-color: #f1d69c; } .film-play:focus-visible { outline: 3px solid #fff7e4; outline-offset: 5px; } .film-play:disabled { cursor: wait; } .film-caption { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding: 20px 25px; color: #e5dec9; background: #161f11; font-size: 11px; line-height: 1.7; } .film-caption-brand { color: #dec28f; letter-spacing: .13em; white-space: nowrap; } .film-ai-note { color: #d8deca; border-inline-start: 1px solid #697357; padding-inline-start: 20px; } .film-direct { margin-inline-start: auto; color: #f5e1bb; text-decoration: underline; text-underline-offset: 4px; } .film-direct:hover { color: white; } .film-direct:focus-visible { outline: 2px solid #e2c28c; outline-offset: 5px; } .film-error { padding: 0 25px 20px; color: #f5ddaa; font-size: 12px; } @media (max-width:1080px) { .film-heading-row { gap: 24px; } .film-caption { padding: 17px 20px; } .film-ai-note { border: 0; padding: 0; } } @media (max-width:760px) { .film-heading-row { display: block; margin-bottom: 27px; } .film-heading-row .section-sub { margin-top: 22px; max-width: 44ch; } .film-frame { margin-inline: -6px; } .film-play { min-height: 66px; gap: 11px; padding: 10px 20px 10px 10px; } .film-play-icon { width: 44px; height: 44px; } .film-play-text { font-size: 12px; } .film-caption { display: grid; gap: 10px; padding: 17px 18px; font-size: 10px; } .film-direct { margin-inline-start: 0; justify-self: start; min-height: 30px; display: flex; align-items: center; font-size: 11px; } html[dir="rtl"] .film-heading-row h2 { font-size: 35px; line-height: 1.5; } } @media (prefers-reduced-motion:reduce) { .film-play { transition: none; } } /* Company journal: the existing olive, black and champagne identity. */ .mp-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .journal-section{background:#0d130d}.journal-section .section-heading{margin-bottom:42px} .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} .blog-empty{grid-column:1/-1;text-align:center;border:1px solid #8e9d6940;border-radius:8px;padding:clamp(36px,6vw,78px);background:radial-gradient(ellipse at 50% 10%,#72824f12,transparent 70%),#141d12;display:flex;flex-direction:column;align-items:center} .blog-empty-monogram{font:44px/1 Georgia,serif;letter-spacing:-.08em;color:#b9ad84;margin-bottom:22px} .blog-empty h3{font:clamp(25px,3vw,35px)/1.3 Georgia,serif;color:#e7e1cf;margin:0 0 20px} .blog-empty p{max-width:520px;color:#b4bca7;font-size:14px;line-height:1.9;margin:0 0 28px} .blog-card{border:1px solid #83916535;background:#151e13;border-radius:8px;overflow:hidden;transition:border-color .25s,transform .25s} .blog-card:hover{transform:translateY(-4px);border-color:#c4b38a77}.blog-card-image{display:block;height:235px;background:#29351f;position:relative;overflow:hidden} .blog-card-image img{height:100%;width:100%;object-fit:cover;transition:transform .4s}.blog-card:hover .blog-card-image img{transform:scale(1.025)} .blog-card-copy{padding:27px}.blog-card-copy h2{font:26px/1.35 Georgia,serif;letter-spacing:-.02em;margin:15px 0;color:#e6deca} .blog-card-copy h2 a:hover{color:#d5c199}.blog-card-copy>p:not(.blog-date){font-size:13px;line-height:1.9;color:#b2baa5;margin:0} .blog-date{font-size:10px;line-height:1.8;color:#9da98b;letter-spacing:.04em} .blog-entry{padding-top:70px}.blog-entry .wrap{max-width:1000px}.blog-entry .eyebrow{margin:45px 0 22px}.blog-entry h1{font:clamp(38px,6vw,64px)/1.15 Georgia,serif;margin:0 0 25px;max-width:850px;color:#e9e2cf} .blog-entry .section-sub{max-width:740px;margin:30px 0 45px;color:#b4bda6;line-height:1.9}.blog-entry-image{margin:0 0 45px;position:relative}.blog-entry-image img{width:100%;height:auto;max-height:650px;object-fit:cover;border-radius:7px} .blog-entry-image figcaption{font-size:10px;color:#b8b395;margin-top:10px}.blog-entry-body{max-width:740px;font-size:16px;line-height:1.95;color:#bcc3b0;margin:0 auto} .blog-entry-body p{margin:0 0 25px}.blog-entry-body h2,.blog-entry-body h3{font-family:Georgia,serif;color:#e3dec9;line-height:1.35;margin:42px 0 22px}.blog-entry-body h2{font-size:33px}.blog-entry-body h3{font-size:27px} .blog-entry-body a{color:#cdb88c;text-decoration:underline;text-underline-offset:4px}.blog-entry-body blockquote{border-inline-start:2px solid #b4a27b;margin:30px 0;padding:5px 25px;color:#d1c7ad} .media-ai-caption{font:9px/1.6 system-ui,sans-serif;color:#c4bd9b;display:block;padding:8px 10px;letter-spacing:.04em}.blog-card-image .media-ai-caption{position:absolute;bottom:0;left:0;right:0;background:#152014bb} [hidden]{display:none!important} @media(max-width:1080px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.desktop-nav{gap:clamp(12px,1.2vw,22px)}} @media(max-width:760px){.blog-grid{grid-template-columns:1fr;gap:24px}.blog-card-image{height:220px}.blog-card-copy{padding:24px}.blog-empty p{font-size:13px}.blog-entry{padding-top:40px}.blog-entry .eyebrow{margin-top:35px}.blog-entry h1{font-size:38px}.blog-entry-body{font-size:15px}.blog-entry-body h2{font-size:28px}.blog-entry-body h3{font-size:24px}} /* ===== PREMIUM · October 2026 ===== Display typeface, cinematic hero, gold hairlines, micro motion and photo fitting. Additive layer: site.css and the blocks above stay untouched and are only overridden here. */ /* A · Display typeface. Local woff2 only (CSP font-src 'self'); Latin + Cyrillic subsets, Arabic keeps Noto Kufi (guard at the end). */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-garamond-400-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond-500-normal-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond-500-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond-500-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-compatible fallback while the woff2 files load (no without touching the HTML): Georgia narrowed to Cormorant's width (upright ≈ 88 %, italic ≈ 78 %), ascent/descent = Cormorant 92 / 29 % ÷ size-adjust. Line breaks and heights stay put at swap time; browsers without size-adjust simply fall through to plain Georgia as before. */ @font-face { font-family: 'Cormorant Fallback'; font-style: normal; font-weight: 500; src: local('Georgia'); size-adjust: 88%; ascent-override: 105%; descent-override: 33%; line-gap-override: 0%; } @font-face { font-family: 'Cormorant Fallback'; font-style: italic; font-weight: 400; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 78%; ascent-override: 118%; descent-override: 37%; line-gap-override: 0%; } :root { --serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif; --gold-hairline: rgba(214, 183, 129, .5); /* Film grain: ~330 byte SVG tile (feTurbulence), allowed by img-src data:. */ --mp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* Cormorant has a small x-height and light strokes: weight 500, looser tracking, sizes +6–10 %. Italic stays 400. Every tuning rule is scoped with :where(html:not([dir=rtl])) — specificity 0, so the cascade against site.css is exactly as without the prefix, but Arabic (Noto Kufi Arabic has no x-height deficit) keeps its original sizes. */ :where(html:not([dir=rtl])) :is(h1, h2, h3, h4) { font-weight: 500; letter-spacing: -.02em; } :where(html:not([dir=rtl])) h1 { font-size: clamp(48px, 5.9vw, 88px); } :where(html:not([dir=rtl])) h2 { font-size: clamp(37px, 4.1vw, 61px); } :where(html:not([dir=rtl])) h3 { font-size: 28px; letter-spacing: -.012em; } :where(html:not([dir=rtl])) :is(h1, h2) em { font-weight: 400; font-style: italic; } :where(html:not([dir=rtl])) .hero h1 { font-weight: 500; font-size: clamp(62px, 6.9vw, 108px); line-height: 1.04; letter-spacing: -.02em; } :where(html:not([dir=rtl])) .hero-annotation-title { font-weight: 500; font-size: 29px; letter-spacing: -.015em; } :where(html:not([dir=rtl])) .person-monogram { font-weight: 400; font-size: 32px; letter-spacing: -.04em; } :where(html:not([dir=rtl])) .person-heading h3 { font-weight: 500; letter-spacing: -.015em; } :where(html:not([dir=rtl])) .editorial-intro h2 { font-size: clamp(43px, 4.9vw, 71px); } :where(html:not([dir=rtl])) .collection-section .section-heading h2 { font-size: clamp(45px, 4.9vw, 70px); } :where(html:not([dir=rtl])) .collection-text h3 { font-size: 34px; } :where(html:not([dir=rtl])) .principle h3 { font-size: 28px; } :where(html:not([dir=rtl])) .signature-copy h2 { font-size: clamp(47px, 5vw, 72px); } :where(html:not([dir=rtl])) .quality-copy .section-heading h2 { font-size: clamp(36px, 3.8vw, 55px); } :where(html:not([dir=rtl])) .gallery-section .section-heading h2 { font-size: clamp(45px, 4.8vw, 69px); } :where(html:not([dir=rtl])) .team-heading-row .section-heading h2 { font-size: clamp(43px, 4.3vw, 65px); } :where(html:not([dir=rtl])) .film-heading-row h2 { font-size: clamp(45px, 4.5vw, 70px); } :where(html:not([dir=rtl])) .partner-copy h2 { font-size: 45px; } :where(html:not([dir=rtl])) .contact-copy h2 { font-size: clamp(41px, 4.6vw, 68px); } /* 27px floor: below ~24px Cormorant's x-height (~39 %) gets too small for the most important contact element (site.css: 24px mobile). */ :where(html:not([dir=rtl])) .contact-email { font-weight: 500; font-size: clamp(27px, 2.4vw, 31px); } :where(html:not([dir=rtl])) .form-heading h3 { font-size: 29px; letter-spacing: -.015em; } :where(html:not([dir=rtl])) .closing-cta h2 { font-size: 43px; } :where(html:not([dir=rtl])) .pagehead h1 { font-size: clamp(53px, 5.7vw, 85px); } :where(html:not([dir=rtl])) .catalog-heading h2 { font-size: clamp(34px, 3.3vw, 47px); } :where(html:not([dir=rtl])) .catalog-card-copy h3 { font-size: clamp(27px, 2.15vw, 31px); } :where(html:not([dir=rtl])) .catalog-details > summary { font-weight: 500; font-size: 26px; letter-spacing: -.01em; } :where(html:not([dir=rtl])) .accessory-grid h3 { font-size: 24px; } :where(html:not([dir=rtl])) :is(.location-card, .visit-card) h2 { font-size: 42px; } :where(html:not([dir=rtl])) .privacy-dialog h2 { font-size: 34px; letter-spacing: -.015em; } :where(html:not([dir=rtl])) .step-top span, :where(html:not([dir=rtl])) .section-number { font-weight: 500; letter-spacing: -.02em; } :where(html:not([dir=rtl])) .mobile-links > a { font-weight: 500; font-size: clamp(29px, 5.4vw, 43px); letter-spacing: -.01em; } /* Blog headings: family switch applies to every language (the RTL guard turns it into Noto Kufi Arabic), sizes Latin/Cyrillic only. */ .blog-empty-monogram, .blog-empty h3, .blog-card-copy h2, .blog-entry h1, .blog-entry-body h2, .blog-entry-body h3 { font-family: var(--serif); font-weight: 500; } :where(html:not([dir=rtl])) .blog-card-copy h2 { font-size: 28px; } :where(html:not([dir=rtl])) .blog-entry h1 { font-size: clamp(41px, 6.4vw, 69px); } :where(html:not([dir=rtl])) .blog-entry-body h2 { font-size: 36px; } :where(html:not([dir=rtl])) .blog-entry-body h3 { font-size: 29px; } /* Russian uses the Cyrillic subset instead of the Georgia pin in site.css:569. */ html[lang=ru] h1, html[lang=ru] h2, html[lang=ru] h3 { font-family: var(--serif); } html[lang=ru] .hero h1 { font-size: clamp(45px, 5vw, 77px); } @media (max-width: 1080px) { :where(html:not([dir=rtl])) .hero h1 { font-size: clamp(62px, 8vw, 88px); } :where(html:not([dir=rtl])) .quality-copy .section-heading h2 { font-size: 41px; } :where(html:not([dir=rtl])) .signature-copy h2 { font-size: 48px; } :where(html:not([dir=rtl])) .contact-copy h2 { font-size: 52px; } :where(html:not([dir=rtl])) .pagehead h1 { font-size: 60px; } :where(html:not([dir=rtl])) .partner-copy h2 { font-size: 39px; } } @media (max-width: 760px) { :where(html:not([dir=rtl])) h2 { font-size: 39px; } :where(html:not([dir=rtl])) .hero h1 { font-size: clamp(52px, 11.4vw, 80px); letter-spacing: -.02em; } :where(html:not([dir=rtl])) .collection-text h3 { font-size: 32px; } :where(html:not([dir=rtl])) .principle h3 { font-size: 27px; } :where(html:not([dir=rtl])) .signature-copy h2 { font-size: 48px; } :where(html:not([dir=rtl])) .quality-copy .section-heading h2 { font-size: 39px; } :where(html:not([dir=rtl])) .partner-copy h2 { font-size: 38px; } :where(html:not([dir=rtl])) .contact-copy h2 { font-size: 46px; } :where(html:not([dir=rtl])) .closing-cta h2 { font-size: 37px; } :where(html:not([dir=rtl])) .pagehead h1 { font-size: clamp(48px, 9.6vw, 68px); } :where(html:not([dir=rtl])) .catalog-heading h2 { font-size: 35px; } :where(html:not([dir=rtl])) .catalog-card-copy h3 { font-size: 30px; } :where(html:not([dir=rtl])) .accessory-grid h3 { font-size: 26px; } :where(html:not([dir=rtl])) :is(.location-card, .visit-card) h2 { font-size: 37px; } :where(html:not([dir=rtl])) .person-heading h3 { font-size: 33px; } :where(html:not([dir=rtl])) .form-heading h3 { font-size: 29px; } :where(html:not([dir=rtl])) .blog-entry h1 { font-size: 41px; } :where(html:not([dir=rtl])) .blog-entry-body h2 { font-size: 30px; } :where(html:not([dir=rtl])) .blog-entry-body h3 { font-size: 26px; } html[lang=ru] .hero h1 { font-size: 46px; } html[lang=ru] .pagehead h1 { font-size: 42px; } html[lang=ru] .signature-copy h2 { font-size: 42px; } } @media (max-width: 374px) { :where(html:not([dir=rtl])) .hero h1 { font-size: 47px; } :where(html:not([dir=rtl])) .pagehead h1 { font-size: 43px; } :where(html:not([dir=rtl])) .contact-copy h2 { font-size: 42px; } } /* B · Cinematic hero. Slow push-in on the independent `scale` property, so html[dir=rtl] .hero-image { transform: scaleX(-1) } keeps working; .hero already clips (overflow: hidden). */ @media (prefers-reduced-motion: no-preference) { .hero-image { animation: mp-hero-zoom 17s var(--ease-editorial) forwards; } @keyframes mp-hero-zoom { from { scale: 1.06; } to { scale: 1; } } } /* Warm vignette + depth on the shade layer (z -2: above the image, below every piece of content). .hero::after is already the top hairline. */ .hero-shade::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 58% at 76% 82%, rgba(214, 183, 129, .15), rgba(214, 183, 129, 0) 72%), linear-gradient(180deg, rgba(5, 8, 4, .26), transparent 24%, transparent 72%, rgba(5, 8, 4, .2)); } html[dir=rtl] .hero-shade::after { background: radial-gradient(ellipse 60% 58% at 24% 82%, rgba(214, 183, 129, .15), rgba(214, 183, 129, 0) 72%), linear-gradient(180deg, rgba(5, 8, 4, .26), transparent 24%, transparent 72%, rgba(5, 8, 4, .2)); } /* Film grain, desktop only: z -1 inside the hero's isolated stacking context, so overlay blends with image + shade + vignette. */ @media (min-width: 1081px) { .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mp-grain); background-size: 180px 180px; opacity: .07; mix-blend-mode: overlay; } } .hero-annotation { border: 1px solid rgba(214, 183, 129, .38); border-inline-start: 3px solid #d0b17c; background: rgba(18, 24, 15, .5); box-shadow: inset 0 1px 0 rgba(255, 246, 228, .16), 0 18px 44px -26px #000; } .ai-visual-caption { letter-spacing: .05em; color: #d9d2be; background: rgba(9, 13, 7, .56); border-color: rgba(214, 183, 129, .22); border-radius: 3px; padding: 4px 8px; } /* C · Gold hairline system + grain on dark surfaces. Grain lives on ::after (z -1 inside an isolated section) instead of rewriting each background shorthand: the existing radial-gradient + colour declarations (and any later override of them) stay valid, no surface can lose its colour. */ :is(.collection-section, .quality-section, .craft-section, .contact-section, .closing-cta, .site-footer, .journal-section) { position: relative; isolation: isolate; } /* top: -1px everywhere: the gold line sits exactly on an existing 1px border (own border-top, or the predecessor's border-bottom on .signature-showcase / .team-section) instead of forming a grey + gold double edge; without a border it is visually identical. */ :is(.collection-section, .quality-section, .craft-section, .contact-section, .closing-cta, .site-footer, .journal-section)::before { content: ''; position: absolute; top: -1px; inset-inline: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--gold-hairline), transparent); } :is(.collection-section, .quality-section, .craft-section, .contact-section, .closing-cta, .site-footer, .journal-section)::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mp-grain); background-size: 180px 180px; opacity: .045; } /* D · Micro motion. Movement only under no-preference; nothing is ever hidden. */ @media (prefers-reduced-motion: no-preference) and (min-width: 761px) { /* Staggered reveals (class .mp-reveal-enter is set by enhancements.js; keyframes mp-reveal from the first block). Only where the grids have 2+ columns; at ≤760px every card enters the viewport alone and a delay would just be latency. */ :is(.collection-card, .person-card, .process-step, .gallery-item, .craft-card).mp-reveal-enter:nth-child(2) { animation-delay: 70ms; } :is(.collection-card, .person-card, .process-step, .gallery-item, .craft-card).mp-reveal-enter:nth-child(3) { animation-delay: 140ms; } :is(.collection-card, .person-card, .process-step, .gallery-item, .craft-card).mp-reveal-enter:nth-child(4) { animation-delay: 210ms; } :is(.collection-card, .person-card, .process-step, .gallery-item, .craft-card).mp-reveal-enter:nth-child(5) { animation-delay: 280ms; } :is(.collection-card, .person-card, .process-step, .gallery-item, .craft-card).mp-reveal-enter:nth-child(6) { animation-delay: 350ms; } } @media (prefers-reduced-motion: no-preference) { /* Window switcher: softer dissolve of the incoming view (redefines product-view-enter from the imagery block; CSS only). */ .window-preview-pane:not([hidden]) img { animation: product-view-enter .6s var(--ease-editorial) both; } .window-preview-pane:not([hidden]) figcaption { animation: mp-caption-enter .6s var(--ease-editorial) both; } @keyframes product-view-enter { from { opacity: .3; scale: .975; translate: 0 6px; } to { opacity: 1; scale: 1; translate: 0 0; } } @keyframes mp-caption-enter { from { opacity: .3; translate: 0 4px; } to { opacity: 1; translate: 0 0; } } } @media (hover: hover) and (pointer: fine) { /* System rail: hairline grows from the inline start (RTL mirrored below). */ .hero-system-rail a { position: relative; } .hero-system-rail a::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; height: 1px; pointer-events: none; background: linear-gradient(90deg, #d6b781, rgba(214, 183, 129, 0)); transform: scaleX(0); transform-origin: 0 50%; } .hero-system-rail a:hover::after, .hero-system-rail a:focus-visible::after { transform: scaleX(1); } html[dir=rtl] .hero-system-rail a::after { background: linear-gradient(270deg, #d6b781, rgba(214, 183, 129, 0)); transform-origin: 100% 50%; } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .hero-system-rail a::after { transition: transform .45s var(--ease-editorial); } /* Soft light reflex on .button-gold (templates use .button.button-gold): narrow, low-alpha band, slow — a glint, not a flash. */ .button-gold { position: relative; overflow: hidden; } .button-gold::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255, 252, 240, 0) 44%, rgba(255, 252, 240, .24) 50%, rgba(255, 252, 240, 0) 56%); transform: translateX(-120%); } .button-gold:hover:not(:disabled)::after { animation: mp-shine 1.15s var(--ease-editorial) forwards; } @keyframes mp-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } } } /* E · Photo fitting for the new olive-toned photography. */ .craft-grid .craft-card img { object-fit: cover; padding: 0; background: none; } .gallery-item img { object-position: 50% 45%; } .partner-image img { object-position: center; } .pagehead-expertise .pagehead-image img, .pagehead-dubai .pagehead-image img { object-position: center 55%; } /* The backend appends to the image's parent. Small but legible line (9px, AA contrast via --muted ≥ 5.3:1 on every light surface), no layout jump. */ .media-ai-caption { font-size: 9px; line-height: 1.5; letter-spacing: .05em; padding: 6px 0 0; } .blog-card-image .media-ai-caption { padding: 6px 10px; } :is(.gallery-section, .partner-section, .process-section, .team-section, .pagehead, .signature-showcase, .film-section, .catalog-section, .location-section, .location-delivery) .media-ai-caption { color: var(--muted); } .window-preview-pane .media-ai-caption { margin-top: -9px; text-align: center; } /* Fixed-height or flex image frames: keep the note inside the frame so it cannot break the layout. Same pill grammar as .image-disclosure (3px radius, gold hairline). */ .accessory-image, .door-detail, .person-portrait { position: relative; } :is(.collection-image, .catalog-image, .engineering-art, .accessory-image, .door-detail, .person-portrait, .film-stage) .media-ai-caption { position: absolute; bottom: 8px; inset-inline-start: 8px; z-index: 2; pointer-events: none; max-width: calc(100% - 16px); padding: 3px 7px; border: 1px solid rgba(214, 183, 129, .3); border-radius: 3px; background: rgba(14, 20, 11, .74); color: #e6dfcc; line-height: 1.45; } /* Film: the native controls bar runs along the bottom of the