/* Host styles stop here. Original component rules follow in their accepted order. */ #loft-content, #loft-content :where(*:not(svg, svg *)), #loft-content :where(*:not(svg, svg *))::before, #loft-content :where(*:not(svg, svg *))::after { all: revert; box-sizing: border-box; } #loft-content { display: block; width: 100%; min-width: 0; font-size: 16px; font-weight: 400; line-height: normal; text-align: start; isolation: isolate; } #loft-content { --ink: #111820; --muted: #66717f; --paper: #f7f7f4; --mist: #eef2f5; --night: #0d1112; --night-soft: #151b1d; --gold: #b6a071; --line: rgba(17, 24, 32, .14); --line-light: rgba(255, 255, 255, .16); --shell: 1320px; --gutter: clamp(20px, 5.5vw, 80px); --section: clamp(80px, 8vw, 124px); } #loft-content * { box-sizing: border-box; } #loft-content { background: var(--paper); scroll-behavior: smooth; } #loft-content { margin: 0px; min-width: 320px; color: var(--ink); background: var(--paper); font-family: Inter, Arial, Helvetica, sans-serif; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; } #loft-content :where(h1, h2, h3, p, figure, figcaption, dl, dd, ol) { margin: 0px; } #loft-content :where(img, video) { display: block; width: 100%; } #loft-content a { color: inherit; text-decoration: none; } #loft-content button { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit !important; line-height: inherit !important; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; } #loft-content .loft-skip { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 10px 14px; color: white; background: var(--night); transform: translateY(-160%); opacity: 0; pointer-events: none; } #loft-content .loft-skip:focus-visible { transform: translateY(0px); opacity: 1; pointer-events: auto; } #loft-content .loft-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; } #loft-content.loft-page { overflow: hidden; } #loft-content .loft-shell { width: min(var(--shell), calc(100% - (var(--gutter) * 2))); margin-inline: auto; } #loft-content .loft-section { padding-block: var(--section); } #loft-content .loft-eyebrow, #loft-content .loft-meta { color: var(--gold); font-size: 11px !important; font-weight: 650; letter-spacing: 0.15em; line-height: 1.25 !important; text-transform: uppercase; } #loft-content .loft-section-head { display: grid; grid-template-columns: minmax(0px, 7.5fr) minmax(300px, 4.5fr); align-items: end; gap: clamp(36px, 6vw, 90px); margin-bottom: clamp(44px, 5.5vw, 76px); } #loft-content .loft-section-head h2, #loft-content .loft-family h2, #loft-content .loft-contact h2 { max-width: 13ch; margin-top: 16px; font-size: clamp(42px, 5.2vw, 76px) !important; font-weight: 500; letter-spacing: -0.055em; line-height: 0.96 !important; } #loft-content .loft-section-head > p, #loft-content .loft-family__copy, #loft-content .loft-contact > .loft-shell > p { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px) !important; line-height: 1.6 !important; } #loft-content .loft-hero { background: var(--paper); } #loft-content .loft-hero__stage { position: relative; height: clamp(620px, 76svh, 820px); min-height: 620px; overflow: hidden; background: var(--night); isolation: isolate; } #loft-content .loft-hero__rewind, #loft-content .loft-hero__frame { position: absolute; inset: 0px; } #loft-content .loft-hero__rewind { z-index: 1; } #loft-content .loft-hero__frame { overflow: hidden; margin: 0px; background: rgb(17, 21, 21); opacity: 0; } #loft-content .loft-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: saturate(0.72) contrast(1.04); } #loft-content .loft-hero__stage.is-running .loft-hero__frame { animation: loft-rewind-frame var(--span) linear var(--start) both; } #loft-content .loft-hero__stage.is-running .loft-hero__frame[data-act="scale"] { animation-name: loft-rewind-scale; } #loft-content .loft-hero__stage.is-running .loft-hero__frame[data-act="material"] { animation-name: loft-rewind-cut; } #loft-content .loft-hero__stage.is-running .loft-hero__frame[data-act="glass"] { animation-name: loft-rewind-dissolve; } #loft-content .loft-hero__stage.is-running .loft-hero__frame[data-act="form"] { animation-name: loft-rewind-form; } #loft-content .loft-hero__stage.is-running .loft-hero__frame[data-shot="resolution"] { animation-name: loft-rewind-resolve; } #loft-content .loft-hero__stage.is-running .loft-hero__frame img { animation: loft-rewind-image var(--span) linear var(--start) both; } @keyframes loft-rewind-frame { 0% { opacity: 0; } 14%, 86% { opacity: 1; } 100% { opacity: 0; } } @keyframes loft-rewind-scale { 0% { opacity: 0; clip-path: inset(0px 2%); } 12%, 88% { opacity: 1; clip-path: inset(0px); } 100% { opacity: 0; clip-path: inset(0px); } } @keyframes loft-rewind-cut { 0% { opacity: 0; } 4%, 92% { opacity: 1; } 100% { opacity: 0; } } @keyframes loft-rewind-dissolve { 0% { opacity: 0; } 22%, 78% { opacity: 1; } 100% { opacity: 0; } } @keyframes loft-rewind-form { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } } @keyframes loft-rewind-resolve { 0% { opacity: 0; } 8%, 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes loft-rewind-image { 0% { transform: scale(var(--scale-start, 1.018)); } 100% { transform: scale(1); } } #loft-content .loft-hero__title { position: absolute; z-index: 3; inset: 0px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(30px, 3vw, 44px); opacity: 0; pointer-events: none; } #loft-content .loft-hero__title h1 { max-width: none; color: white; font-size: clamp(52px, 5.8vw, 86px) !important; font-weight: 500; letter-spacing: -0.058em; line-height: 0.92 !important; } #loft-content .loft-hero__title h1 span { display: block; } #loft-content .loft-hero__stage.is-running .loft-hero__title { animation: 620ms cubic-bezier(0.22, 1, 0.36, 1) 3730ms 1 normal both running loft-rewind-title; } #loft-content .loft-hero__stage.is-complete .loft-hero__title { opacity: 1; transform: none; clip-path: inset(0px); } @keyframes loft-rewind-title { 0% { opacity: 0; transform: translateY(24px); clip-path: inset(0px 0px 100%); } 100% { opacity: 1; transform: none; clip-path: inset(0px); } } #loft-content .loft-hero__pagination { display: none; } #loft-content .loft-hero__lead { max-width: 780px; color: rgba(255, 255, 255, 0.68); font-size: clamp(15px, 1.1vw, 17px) !important; line-height: 1.6 !important; } #loft-content .loft-roles { padding-top: clamp(36px, 4vw, 60px); background: var(--paper); } #loft-content .loft-roles > .loft-shell { display: flex; flex-direction: column; } #loft-content .loft-roles__grid { order: 1; display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: clamp(32px, 5vw, 76px); } #loft-content .loft-roles--clear .loft-roles__grid, #loft-content .loft-roles--privacy .loft-roles__grid { grid-template-columns: 1fr; } #loft-content .loft-roles--privacy { padding-top: var(--section); } #loft-content .loft-role { position: relative; display: grid; grid-template-columns: minmax(0px, 7fr) minmax(190px, 5fr); grid-template-rows: auto minmax(0px, 1fr) minmax(240px, 44%); column-gap: 16px; height: clamp(500px, 55vw, 700px); } #loft-content .loft-role--accent { grid-template-columns: minmax(190px, 5fr) minmax(0px, 7fr); } #loft-content .loft-role::before { z-index: 0; grid-row: 1 / 3; background: var(--night); content: ""; } #loft-content .loft-role--clear::before, #loft-content .loft-role--clear :is(h2, h3), #loft-content .loft-role--clear .loft-role__description, #loft-content .loft-role--clear .loft-role__support { grid-column: 2; } #loft-content .loft-role--accent::before, #loft-content .loft-role--accent :is(h2, h3), #loft-content .loft-role--accent .loft-role__description, #loft-content .loft-role--accent .loft-role__support { grid-column: 1; } #loft-content .loft-role--clear .loft-role__main { grid-column: 1; } #loft-content .loft-role--accent .loft-role__main { grid-column: 2; } #loft-content .loft-role :is(h2, h3) { z-index: 1; grid-row: 1; padding: clamp(22px, 2.1vw, 28px) clamp(20px, 2vw, 26px) 0px; color: white; font-size: clamp(24px, 2.05vw, 31px) !important; font-weight: 500; letter-spacing: -0.042em; line-height: 1.02 !important; } #loft-content .loft-role__description { z-index: 1; grid-row: 2; align-self: start; padding: 14px clamp(20px, 2vw, 26px) clamp(22px, 2.1vw, 28px); color: rgba(255, 255, 255, 0.66); font-size: 15px !important; line-height: 1.55 !important; } #loft-content .loft-role__main { grid-row: 1 / 4; height: 100%; overflow: hidden; } #loft-content .loft-role__support { grid-row: 3; height: calc(100% - 16px); margin-top: 16px; overflow: hidden; } #loft-content .loft-role__gallery, #loft-content .loft-role__track { display: contents; } #loft-content .loft-role__pagination { display: none; } #loft-content .loft-role img { height: 100%; object-fit: cover; filter: saturate(0.76) contrast(1.03); } #loft-content .loft-materials { order: 3; margin-top: clamp(54px, 6.5vw, 88px); color: white; background: var(--night); } #loft-content .loft-materials__summary { display: flex; min-height: 132px; align-items: center; justify-content: space-between; gap: 36px; padding: clamp(26px, 3vw, 40px); cursor: pointer; list-style: none; } #loft-content .loft-materials__summary::-webkit-details-marker { display: none; } #loft-content .loft-materials__summary small { display: block; color: var(--gold); font-size: 10px !important; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; } #loft-content .loft-materials__summary strong { display: block; margin-top: 10px; font-size: clamp(28px, 3vw, 42px) !important; font-weight: 500; letter-spacing: -0.04em; line-height: 1 !important; } #loft-content .loft-materials__meta { display: flex; align-items: center; gap: clamp(22px, 3vw, 42px); color: rgba(255, 255, 255, 0.55); font-size: 13px !important; } #loft-content .loft-materials__meta i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line-light); border-radius: 50%; color: white; font-size: 26px !important; font-style: normal; font-weight: 300; line-height: 1 !important; transition: transform 0.2s; } #loft-content .loft-materials[open] .loft-materials__meta i { transform: rotate(45deg); } #loft-content .loft-materials__body { --materials-inline: clamp(26px, 3vw, 40px); padding: clamp(30px, 3.5vw, 48px) var(--materials-inline) clamp(36px, 4vw, 54px); } #loft-content .loft-materials__tabs { display: flex; gap: clamp(26px, 4vw, 54px); margin-top: clamp(28px, 3.5vw, 44px); overflow-x: auto; scrollbar-width: none; } #loft-content .loft-materials__tabs::-webkit-scrollbar { display: none; } #loft-content .loft-materials__tabs button { position: relative; flex: 0 0 auto; padding: 0px 0px 16px; border: 0px; color: rgba(255, 255, 255, 0.46); background: transparent; cursor: pointer; font-size: clamp(18px, 1.8vw, 25px) !important; font-weight: 500; letter-spacing: -0.025em; white-space: nowrap; transition: color 0.18s; } #loft-content .loft-materials__tabs button::after { position: absolute; right: 0px; bottom: -1px; left: 0px; height: 2px; background: transparent; content: ""; transition: background 0.18s; } #loft-content .loft-materials__tabs button.is-active { color: white; } #loft-content .loft-materials__tabs button.is-active::after { background: var(--gold); } #loft-content .loft-materials__tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; } #loft-content .loft-materials__tabs span { margin-left: 8px; color: var(--gold); font-size: 11px !important; vertical-align: top; } #loft-content .loft-materials__panel[hidden] { display: none; } #loft-content .loft-materials__track { display: grid; grid-auto-columns: minmax(190px, 19%); grid-auto-flow: column; gap: clamp(12px, 1.5vw, 20px); margin-top: clamp(26px, 3vw, 38px); padding-bottom: 18px; overflow-x: auto; scroll-padding-inline: 1px; scroll-snap-type: x; scrollbar-color: var(--gold) rgba(255, 255, 255, .1); scrollbar-width: thin; } #loft-content .loft-materials__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; } #loft-content .loft-material-card { min-width: 0px; padding: 8px; border: 1px solid transparent; cursor: zoom-in; scroll-snap-align: start; transition: border-color 0.2s, background 0.2s, transform 0.2s; } #loft-content .loft-material-card__image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper); } #loft-content .loft-material-card img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper); transform: scale(1); transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1); } #loft-content .loft-material-card figcaption { min-height: 52px; padding-top: 13px; color: rgba(255, 255, 255, 0.76); font-size: 12px !important; line-height: 1.42 !important; } #loft-content .loft-material-card.is-inspecting { border-color: rgba(182, 160, 113, 0.7); background: rgba(255, 255, 255, 0.055); cursor: zoom-out; } #loft-content .loft-material-card.is-inspecting img { transform: scale(1.72); } #loft-content .loft-material-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } #loft-content .loft-materials__safety { max-width: 820px; margin-top: clamp(30px, 4vw, 52px); color: rgba(255, 255, 255, 0.58); font-size: 14px !important; line-height: 1.62 !important; } #loft-content .loft-materials__showroom { display: inline-block; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid var(--gold); color: white; font-size: 14px !important; line-height: 1.35 !important; } #loft-content .loft-materials__showroom:hover, #loft-content .loft-materials__showroom:focus-visible { color: var(--gold); } #loft-content .loft-system { color: white; background: var(--night-soft); } #loft-content .loft-section-head--dark > p { color: rgba(255, 255, 255, 0.6); } #loft-content .loft-opening { background: var(--night); } #loft-content .loft-opening__summary { display: flex; min-height: 118px; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 34px; cursor: pointer; list-style: none; } #loft-content .loft-opening__summary::-webkit-details-marker { display: none; } #loft-content .loft-opening__summary strong { font-size: clamp(24px, 2.6vw, 37px) !important; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05 !important; } #loft-content .loft-opening__meta { display: flex; align-items: center; gap: clamp(20px, 3vw, 42px); color: rgba(255, 255, 255, 0.5); font-size: 12px !important; } #loft-content .loft-opening__meta i { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-light); border-radius: 50%; color: white; font-size: 26px !important; font-style: normal; font-weight: 300; line-height: 1 !important; transition: transform 0.2s; } #loft-content .loft-opening[open] .loft-opening__meta i { transform: rotate(45deg); } #loft-content .loft-opening__summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; } #loft-content .loft-opening__body { padding: clamp(30px, 3.5vw, 48px) clamp(26px, 3vw, 40px) clamp(36px, 4vw, 54px); } #loft-content .loft-opening__tabs { display: flex; gap: clamp(26px, 4vw, 54px); margin-top: clamp(28px, 3.5vw, 44px); overflow-x: auto; scrollbar-width: none; } #loft-content .loft-opening__tabs::-webkit-scrollbar { display: none; } #loft-content .loft-opening__tabs button { position: relative; flex: 0 0 auto; padding: 0px 0px 16px; border: 0px; color: rgba(255, 255, 255, 0.46); background: transparent; cursor: pointer; font-size: clamp(18px, 1.8vw, 25px) !important; font-weight: 500; letter-spacing: -0.025em; text-align: left; white-space: nowrap; transition: color 0.18s; } #loft-content .loft-opening__tabs button::after { position: absolute; right: 0px; bottom: -1px; left: 0px; height: 2px; background: transparent; content: ""; transition: background 0.18s; } #loft-content .loft-opening__tabs button.is-active { color: white; } #loft-content .loft-opening__tabs button.is-active::after { background: var(--gold); } #loft-content .loft-opening__tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; } #loft-content .loft-opening__panel[hidden] { display: none !important; } #loft-content .loft-opening__panel { margin-top: clamp(28px, 3.5vw, 48px); } #loft-content .loft-opening__panel:not(.loft-opening__panel--swing):not(.loft-opening__panel--sliding) { display: grid; grid-template-columns: minmax(0px, 7fr) minmax(280px, 5fr); align-items: end; gap: clamp(28px, 5vw, 72px); } #loft-content .loft-opening__image { overflow: hidden; background: rgb(34, 41, 43); } #loft-content .loft-opening__image img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.72) contrast(1.04); } #loft-content .loft-opening__copy { max-width: 680px; color: rgba(255, 255, 255, 0.69); font-size: clamp(16px, 1.35vw, 19px) !important; line-height: 1.58 !important; } #loft-content .loft-opening__copy p + p { margin-top: 20px; color: rgba(255, 255, 255, 0.5); font-size: 0.86em !important; } #loft-content .loft-opening__schemes { display: grid; grid-auto-columns: minmax(320px, 30%); grid-auto-flow: column; gap: 12px; margin-top: 0px; padding-bottom: 16px; overflow-x: auto; scroll-snap-type: x; scrollbar-color: var(--gold) rgba(255, 255, 255, .1); scrollbar-width: thin; } #loft-content .loft-opening__schemes:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; } #loft-content .loft-opening__schemes img { width: 100%; height: 214px; padding: 18px 22px 16px; object-fit: contain; mix-blend-mode: multiply; } #loft-content .loft-opening__copy--lead { max-width: 870px; margin-bottom: clamp(28px, 3vw, 42px); } #loft-content .loft-movement-grid { display: grid; grid-auto-columns: minmax(320px, 30%); grid-auto-flow: column; align-items: stretch; gap: 12px; padding-bottom: 16px; overflow-x: auto; scroll-snap-type: x; scrollbar-color: var(--gold) rgba(255, 255, 255, .1); scrollbar-width: thin; } #loft-content .loft-movement-grid:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; } #loft-content .loft-movement-card { display: grid; min-width: 0px; grid-template-rows: minmax(98px, auto) 214px; overflow: hidden; scroll-snap-align: start; color: var(--ink); background: rgb(238, 234, 226); } #loft-content .loft-movement-card figcaption { display: grid; min-height: 98px; align-content: start; gap: 7px; padding: 17px 20px 14px; } #loft-content .loft-movement-card figcaption strong { font-size: 18px !important; font-weight: 500; letter-spacing: -0.025em; line-height: 1.14 !important; } #loft-content .loft-movement-card figcaption span { color: rgba(17, 24, 32, 0.5); font-size: 10px !important; letter-spacing: 0.08em; text-transform: uppercase; } #loft-content .loft-motion-demo { padding: 18px 22px 16px; } #loft-content .loft-motion { display: block; width: 100%; height: 180px; overflow: hidden; } #loft-content .loft-motion__track { fill: none; stroke: var(--gold); stroke-width: 2; } #loft-content .loft-motion__opening { fill: none; stroke: var(--ink); stroke-width: 4; } #loft-content .loft-motion__floor { fill: none; stroke: rgba(17, 24, 32, 0.22); stroke-width: 2; } #loft-content .loft-motion__ghost { fill: none; stroke: rgba(17, 24, 32, 0.2); stroke-width: 2; stroke-dasharray: 7, 7; } #loft-content .loft-motion__panel { fill: rgba(17, 24, 32, 0.14); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: center center; } #loft-content .loft-motion__panel--single { animation: 4.6s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-single; } #loft-content .loft-motion__panel--wall-double-left { animation: 4.6s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-wall-double-left; } #loft-content .loft-motion__panel--wall-double-right { animation: 4.6s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-wall-double-right; } #loft-content .loft-motion__panel--opening-double-left { animation: 8s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-opening-double-left; } #loft-content .loft-motion__panel--opening-double-right { animation: 8s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-opening-double-right; } #loft-content .loft-motion__panel--independent-left { animation: 10s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-independent-left; } #loft-content .loft-motion__panel--independent-middle { animation: 10s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-independent-middle; } #loft-content .loft-motion__panel--independent-right { animation: 10s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-independent-right; } #loft-content .loft-motion__panel--telescope-middle { animation: 6.4s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-telescope-middle; } #loft-content .loft-motion__panel--telescope-right { animation: 6.4s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-telescope-right; } #loft-content .loft-motion__panel--quad-left { animation: 5.8s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-quad-left; } #loft-content .loft-motion__panel--quad-right { animation: 5.8s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-quad-right; } #loft-content .loft-motion__panel--six-left-middle { animation: 6.2s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-six-left-middle; } #loft-content .loft-motion__panel--six-left-inner { animation: 6.2s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-six-left-inner; } #loft-content .loft-motion__panel--six-right-inner { animation: 6.2s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-six-right-inner; } #loft-content .loft-motion__panel--six-right-middle { animation: 6.2s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running loft-slide-six-right-middle; } @keyframes loft-slide-single { 0%, 4%, 100% { transform: translateX(0px); } 30%, 70% { transform: translateX(210px); } } @keyframes loft-slide-wall-double-left { 0%, 4%, 100% { transform: translateX(0px); } 30%, 70% { transform: translateX(-160px); } } @keyframes loft-slide-wall-double-right { 0%, 4%, 100% { transform: translateX(0px); } 30%, 70% { transform: translateX(160px); } } @keyframes loft-slide-opening-double-right { 0%, 5%, 35%, 100% { transform: translateX(0px); } 12%, 28% { transform: translateX(-150px); } } @keyframes loft-slide-opening-double-left { 0%, 42%, 78%, 100% { transform: translateX(0px); } 50%, 70% { transform: translateX(150px); } } @keyframes loft-slide-independent-middle { 0%, 4%, 28%, 100% { transform: translateX(0px); } 10%, 22% { transform: translateX(-120px); } } @keyframes loft-slide-independent-left { 0%, 34%, 58%, 100% { transform: translateX(0px); } 40%, 52% { transform: translateX(120px); } } @keyframes loft-slide-independent-right { 0%, 64%, 88%, 100% { transform: translateX(0px); } 70%, 82% { transform: translateX(-120px); } } @keyframes loft-slide-telescope-middle { 0%, 18%, 100% { transform: translateX(0px); } 48%, 72% { transform: translateX(-120px); } } @keyframes loft-slide-telescope-right { 0%, 12%, 100% { transform: translateX(0px); } 48%, 72% { transform: translateX(-240px); } } @keyframes loft-slide-quad-left { 0%, 15%, 100% { transform: translateX(0px); } 45%, 70% { transform: translateX(-100px); } } @keyframes loft-slide-quad-right { 0%, 15%, 100% { transform: translateX(0px); } 45%, 70% { transform: translateX(100px); } } @keyframes loft-slide-six-left-middle { 0%, 15%, 100% { transform: translateX(0px); } 48%, 72% { transform: translateX(-70px); } } @keyframes loft-slide-six-left-inner { 0%, 20%, 100% { transform: translateX(0px); } 48%, 72% { transform: translateX(-140px); } } @keyframes loft-slide-six-right-inner { 0%, 20%, 100% { transform: translateX(0px); } 48%, 72% { transform: translateX(140px); } } @keyframes loft-slide-six-right-middle { 0%, 15%, 100% { transform: translateX(0px); } 48%, 72% { transform: translateX(70px); } } #loft-content .loft-movement-catalog { display: flex; width: fit-content; max-width: 100%; min-height: 62px; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 16px 22px; color: var(--ink); background: var(--paper); font-size: 14px !important; font-weight: 600; line-height: 1.4 !important; transition: background 0.16s; } #loft-content .loft-movement-catalog i { flex-shrink: 0; color: var(--ink); font-size: 19px !important; font-style: normal; } #loft-content .loft-movement-catalog:hover, #loft-content .loft-movement-catalog:focus-visible { background: var(--mist); } #loft-content .loft-movement-catalog:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; } #loft-content .loft-opening__project { margin-top: clamp(54px, 6vw, 82px); } #loft-content .loft-opening__project > h3 { max-width: 14ch; font-size: clamp(28px, 3vw, 40px) !important; font-weight: 500; letter-spacing: -0.04em; line-height: 1.02 !important; } #loft-content .loft-opening__project-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(30px, 4vw, 48px); } #loft-content .loft-opening__project-grid[hidden] { display: none !important; } #loft-content .loft-opening__project-grid article { min-height: 0px; } #loft-content .loft-opening__project-grid h4 { max-width: 16ch; font-size: 17px !important; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2 !important; } #loft-content .loft-opening__project-grid p { max-width: 28ch; margin-top: 13px; color: rgba(255, 255, 255, 0.55); font-size: 13px !important; line-height: 1.55 !important; } #loft-content .loft-opening__engineering { max-width: 820px; margin-top: clamp(44px, 5vw, 66px); color: rgba(255, 255, 255, 0.52); font-size: 13px !important; line-height: 1.62 !important; } #loft-content .loft-glazing-bridge { margin-top: clamp(72px, 8vw, 112px); } #loft-content .loft-glazing-bridge :is(h2, h3) { max-width: 20ch; margin-top: clamp(24px, 3vw, 38px); font-size: clamp(30px, 3.6vw, 52px) !important; font-weight: 500; letter-spacing: -0.045em; line-height: 1.02 !important; } #loft-content .loft-story-media { position: relative; overflow: hidden; background: rgb(32, 38, 40); } #loft-content .loft-story-media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.78) contrast(1.04); } #loft-content .loft-story-media__replay { position: absolute; right: 18px; bottom: 16px; padding: 8px 12px; border: 0px; border-radius: 999px; color: white; background: rgba(13, 17, 18, 0.72); cursor: pointer; font-size: 11px !important; letter-spacing: 0.04em; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; backdrop-filter: blur(10px); } #loft-content .loft-story-media__replay[hidden] { display: none; } #loft-content .loft-story-media.is-complete .loft-story-media__replay { opacity: 1; pointer-events: auto; transform: none; } #loft-content .loft-story-media__replay:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } #loft-content .loft-layouts { margin-top: clamp(64px, 7vw, 96px); } #loft-content .loft-layouts__head { display: grid; grid-template-columns: minmax(0px, 7fr) minmax(280px, 5fr); align-items: end; gap: clamp(36px, 6vw, 90px); } #loft-content .loft-layouts__head :is(h2, h3) { max-width: 10ch; font-size: clamp(38px, 4.5vw, 64px) !important; font-weight: 500; letter-spacing: -0.05em; line-height: 0.98 !important; } #loft-content .loft-layouts__head p { max-width: 600px; color: rgba(255, 255, 255, 0.58); font-size: clamp(16px, 1.3vw, 19px) !important; line-height: 1.6 !important; } #loft-content .loft-layouts__type { position: absolute; z-index: 2; top: 16px; left: 50%; display: grid; width: min(380px, 100% - 32px); grid-template-columns: repeat(2, 1fr); padding: 4px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(13, 17, 18, 0.7); box-shadow: rgba(0, 0, 0, 0.24) 0px 10px 34px; transform: translateX(-50%); backdrop-filter: blur(14px); } #loft-content .loft-layouts__type button { min-height: 36px; padding: 0px 16px; border: 0px; border-radius: 999px; color: rgba(255, 255, 255, 0.66); background: transparent; cursor: pointer; font-size: 12px !important; text-align: center; transition: color 0.16s, background 0.16s; } #loft-content .loft-layouts__type button:hover { color: white; } #loft-content .loft-layouts__type button.is-active { color: var(--night); background: rgb(238, 234, 226); } #loft-content .loft-layouts__type button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } #loft-content .loft-layouts__tabs { display: grid; grid-auto-columns: 76px; grid-auto-flow: column; gap: 8px; margin-top: clamp(28px, 3.5vw, 46px); padding: 0px 0px 14px; overflow-x: auto; scroll-padding-inline: 1px; scroll-snap-type: x; scrollbar-color: var(--gold) rgba(255, 255, 255, .1); scrollbar-width: thin; } #loft-content .loft-layouts__tabs:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; } #loft-content .loft-layouts__tabs button { display: grid; min-height: 116px; padding: 8px 7px 7px; border: 1px solid transparent; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.035); cursor: pointer; scroll-snap-align: start; transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s; } #loft-content .loft-layouts__tabs button.is-active { color: white; background: rgba(182, 160, 113, 0.18); } #loft-content .loft-layouts__tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; } #loft-content .loft-layouts__tabs img { width: 100%; height: 82px; object-fit: contain; transition: transform 0.24s; } #loft-content .loft-layouts__tabs span { align-self: end; font-size: 9px !important; letter-spacing: 0.03em; } #loft-content .loft-layouts__stage { position: relative; height: clamp(320px, 34vw, 400px); margin-top: 18px; overflow: hidden; background: rgb(34, 41, 43); } #loft-content .loft-layouts__preview { position: relative; display: block; width: 100%; height: 100%; padding: 0px; overflow: hidden; border: 0px; color: white; background: rgb(34, 41, 43); } #loft-content .loft-layouts__preview img { height: 100%; object-fit: contain; filter: saturate(0.74) contrast(1.04); transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1); } #loft-content .loft-layouts__zoom-hint { display: none; } @media (hover: hover) and (pointer: fine) { #loft-content .loft-materials__tabs button:not(.is-active):hover, #loft-content .loft-opening__tabs button:not(.is-active):hover { color: rgba(255, 255, 255, 0.8); } #loft-content .loft-materials__tabs button:not(.is-active):hover::after, #loft-content .loft-opening__tabs button:not(.is-active):hover::after { background: rgba(182, 160, 113, 0.46); } #loft-content .loft-material-card:hover { border-color: rgba(182, 160, 113, 0.32); background: rgba(255, 255, 255, 0.035); transform: translateY(-2px); } #loft-content .loft-layouts__tabs button:hover { border-color: rgba(182, 160, 113, 0.42); color: white; background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); } #loft-content .loft-layouts__tabs button:hover img { transform: scale(1.055); } } #loft-content .loft-transition, #loft-content .loft-layout-section { color: white; background: var(--night-soft); } #loft-content .loft-transition .loft-glazing-bridge, #loft-content .loft-layout-section .loft-layouts { margin-top: 0px; } #loft-content .loft-spec-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 6vw, 82px); border-top: 1px solid var(--line-light); } #loft-content .loft-spec-row--system { grid-template-columns: repeat(2, minmax(0px, 1fr)); } #loft-content .loft-spec-row > div { min-height: 210px; padding: 28px 28px 24px 0px; border-right: 1px solid var(--line-light); } #loft-content .loft-spec-row > div:not(:first-child) { padding-left: 28px; } #loft-content .loft-spec-row > div:last-child { border-right: 0px; } #loft-content .loft-spec-row dt { color: var(--gold); font-size: clamp(28px, 3.4vw, 48px) !important; font-weight: 500; letter-spacing: -0.04em; } #loft-content .loft-spec-row dd { max-width: 250px; margin-top: 18px; color: rgba(255, 255, 255, 0.62); font-size: 14px !important; line-height: 1.55 !important; } #loft-content .loft-language { background: var(--mist); } #loft-content .loft-language__collage { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: clamp(18px, 2.2vw, 32px); } #loft-content .loft-language__collage figure { overflow: hidden; background: rgb(223, 226, 227); } #loft-content .loft-language__details, #loft-content .loft-language__details-track { display: contents; } #loft-content .loft-language__overview { grid-area: 1 / 1 / auto / span 8; height: clamp(440px, 42vw, 590px); } #loft-content .loft-language__motion, #loft-content .loft-language__passage { grid-area: 1 / 9 / auto / span 4; height: clamp(440px, 42vw, 590px); } #loft-content .loft-language__motion { z-index: 2; transition: opacity 0.35s; } #loft-content .loft-language__passage { z-index: 1; } #loft-content .loft-language__bedroom { grid-area: 2 / 1 / auto / span 6; height: clamp(300px, 27vw, 390px); } #loft-content .loft-language__wardrobe { grid-area: 2 / 7 / auto / span 3; height: clamp(370px, 34vw, 480px); } #loft-content .loft-language__corridor { grid-area: 2 / 10 / auto / span 3; height: clamp(320px, 29vw, 420px); } #loft-content .loft-language__collage img, #loft-content .loft-language__collage video { height: 100%; object-fit: cover; filter: saturate(0.74) contrast(1.04); } #loft-content .loft-language__pagination { display: none; } #loft-content .loft-finish-library { margin-bottom: 0px; padding: clamp(30px, 3.5vw, 48px) clamp(26px, 3vw, 40px) clamp(36px, 4vw, 54px); color: white; background: var(--night); } #loft-content .loft-finish-library__head { display: grid; grid-template-columns: minmax(220px, 4fr) minmax(0px, 8fr); align-items: end; gap: clamp(28px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--line-light); } #loft-content .loft-finish-library__head h3 { font-size: clamp(26px, 3vw, 42px) !important; font-weight: 500; letter-spacing: -0.04em; line-height: 1 !important; } #loft-content .loft-finish-library__head p { max-width: 46ch; color: rgba(255, 255, 255, 0.58); font-size: 14px !important; line-height: 1.55 !important; } #loft-content .loft-finish-library__track { display: grid; grid-auto-columns: minmax(150px, 15.5%); grid-auto-flow: column; gap: clamp(10px, 1.25vw, 18px); margin-top: clamp(24px, 3vw, 36px); padding-bottom: 16px; overflow-x: auto; scroll-snap-type: x; scrollbar-color: rgb(141, 121, 77) rgba(23, 28, 30, 0.12); scrollbar-width: thin; } #loft-content .loft-finish-library__track:focus-visible { outline: rgb(141, 121, 77) solid 2px; outline-offset: 5px; } #loft-content .loft-finish-library .loft-material-card figcaption { color: rgba(255, 255, 255, 0.76); } #loft-content .loft-finish-library .loft-material-card.is-inspecting { border-color: rgba(182, 160, 113, 0.7); background: rgba(255, 255, 255, 0.055); } #loft-content .loft-finish-library .loft-material-card__image { border: 1px solid rgba(255, 255, 255, 0.08); } #loft-content .loft-finish-library--profile, #loft-content .loft-finish-library--veneer { margin-top: clamp(48px, 6vw, 84px); } @media (min-width: 701px) { #loft-content .loft-language__details.is-video-complete .loft-language__motion { opacity: 0; pointer-events: none; } } #loft-content .loft-precision__head { margin-bottom: clamp(44px, 5.5vw, 76px); } #loft-content .loft-precision__head h2 { max-width: 10ch; margin-top: 16px; font-size: clamp(42px, 5.2vw, 76px) !important; font-weight: 500; letter-spacing: -0.055em; line-height: 0.96 !important; } #loft-content .loft-precision__intro { max-width: 34ch; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px) !important; line-height: 1.6 !important; } #loft-content .loft-precision__composition { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); grid-template-rows: clamp(168px, 15vw, 208px) minmax(0px, 1fr) auto; align-items: stretch; gap: clamp(18px, 2.2vw, 32px); } #loft-content .loft-precision__composition figure { overflow: hidden; background: rgb(223, 225, 222); } #loft-content .loft-precision__composition img { height: 100%; object-fit: cover; } #loft-content .loft-precision__main { grid-area: 1 / 1 / span 2 / span 8; height: clamp(560px, 50vw, 710px); } #loft-content .loft-precision__main img { object-fit: contain; object-position: 50% 50%; } #loft-content .loft-precision__details { position: relative; grid-area: 2 / 9 / auto / span 4; min-width: 0px; min-height: 0px; overflow: hidden; background: var(--night); } #loft-content .loft-precision__details-track { position: relative; height: 100%; } #loft-content .loft-precision__slide { position: absolute; inset: 0px; margin: 0px; opacity: 0; pointer-events: none; transition: opacity 0.35s; } #loft-content .loft-precision__slide.is-active { opacity: 1; pointer-events: auto; } #loft-content .loft-precision__slide img, #loft-content .loft-precision__slide video { width: 100%; height: 100%; object-fit: cover; } #loft-content .loft-precision__open img { object-fit: contain; } #loft-content .loft-precision__motion video { object-position: 38% 50%; filter: saturate(0.78) contrast(1.04); } #loft-content .loft-precision__pagination { position: absolute; z-index: 4; right: 20px; bottom: 18px; display: flex; } #loft-content .loft-precision__supporting { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); grid-area: 3 / 1 / auto / -1; align-items: end; gap: clamp(18px, 2.2vw, 32px); } #loft-content .loft-precision__supporting-handle { grid-column: 1 / span 6; height: clamp(300px, 29vw, 410px); } #loft-content .loft-precision__supporting-upper { grid-column: 7 / span 3; height: clamp(360px, 34vw, 480px); } #loft-content .loft-precision__supporting-hinge { grid-column: 10 / span 3; height: clamp(320px, 30vw, 430px); } #loft-content .loft-precision__samples { display: grid; grid-template-columns: minmax(0px, 1fr) 1.18fr; grid-area: 1 / 9 / auto / span 4; gap: clamp(12px, 1.2vw, 18px); padding: clamp(16px, 1.5vw, 22px); color: white; background: var(--night); } #loft-content .loft-precision__samples > p { align-self: end; max-width: 18ch; color: rgba(255, 255, 255, 0.72); font-size: clamp(11px, 0.95vw, 14px) !important; line-height: 1.45 !important; } #loft-content .loft-precision__samples > div { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; min-width: 0px; } #loft-content .loft-precision__samples figure { overflow: visible; background: transparent; } #loft-content .loft-precision__samples img { height: 100%; object-fit: cover; } #loft-content .loft-materials__continuation > .loft-precision { margin: clamp(74px, 8vw, 112px) calc(var(--materials-inline) * -1) 0; padding: clamp(72px, 7vw, 104px) var(--materials-inline); color: var(--ink); background: var(--paper); } #loft-content .loft-materials__continuation > .loft-precision > .loft-shell { width: 100%; } #loft-content .loft-materials__continuation > .loft-glazing-bridge { margin-top: clamp(72px, 8vw, 112px); } #loft-content .loft-materials__continuation > .loft-layouts { margin-top: clamp(72px, 8vw, 112px); } #loft-content .loft-veneer { background: rgb(238, 234, 226); } #loft-content .loft-veneer__steps { display: grid; grid-template-columns: minmax(0px, 7fr) minmax(280px, 5fr); align-items: end; gap: clamp(28px, 4vw, 58px); } #loft-content .loft-veneer__step--assembly { margin-top: clamp(56px, 8vw, 112px); } #loft-content .loft-veneer__step .loft-video-card video { aspect-ratio: 4 / 3; object-fit: cover; object-position: center center; filter: saturate(0.78) contrast(1.03); } #loft-content .loft-veneer__step figcaption { display: grid; grid-template-columns: minmax(130px, 1.4fr) minmax(0px, 4fr); gap: 22px; padding-top: 18px; } #loft-content .loft-veneer__step figcaption span { color: rgb(141, 121, 77); font-size: 11px !important; font-weight: 650; letter-spacing: 0.1em; line-height: 1.4 !important; text-transform: uppercase; } #loft-content .loft-veneer__step figcaption p { max-width: 40ch; color: var(--muted); font-size: 14px !important; line-height: 1.55 !important; } #loft-content .loft-production { color: white; background: var(--night); } #loft-content .loft-video-card { position: relative; overflow: hidden; background: rgb(32, 38, 40); } #loft-content .loft-video-card__button { position: relative; display: block; width: 100%; padding: 0px; overflow: hidden; border: 0px; color: white; background: transparent; cursor: pointer; text-align: left; } #loft-content .loft-video-card video { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; filter: saturate(0.74) contrast(1.04); } #loft-content .loft-video-card__button > span { position: absolute; right: 16px; bottom: 14px; padding: 7px 10px; color: rgba(255, 255, 255, 0.82); background: rgba(13, 17, 18, 0.72); font-size: 11px !important; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; } #loft-content .loft-video-card__button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } #loft-content .loft-production > .loft-shell { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(18px, 2.4vw, 34px); align-items: start; } #loft-content .loft-production .loft-section-head { grid-column: 1 / -1; } #loft-content .loft-production__process { display: block; grid-area: 2 / 1 / auto / span 8; } #loft-content .loft-production__process .loft-video-card { width: 100%; } #loft-content .loft-production__process video { display: block; height: clamp(400px, 36vw, 540px); object-fit: cover; } #loft-content .loft-production__process figcaption { max-width: 42ch; padding-top: 18px; color: rgba(255, 255, 255, 0.7); font-size: 14px !important; line-height: 1.5 !important; } #loft-content .loft-production__proofs { display: block; grid-area: 2 / 9 / auto / -1; } #loft-content .loft-production__proofs img { height: clamp(400px, 36vw, 540px); object-fit: cover; filter: saturate(0.72) contrast(1.04); } #loft-content .loft-production__proofs figcaption { padding-top: 18px; color: rgba(255, 255, 255, 0.7); font-size: 14px !important; line-height: 1.5 !important; } #loft-content .loft-family { background: var(--paper); } #loft-content .loft-family__layout { display: grid; grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr); gap: clamp(42px, 7vw, 110px); align-items: start; } #loft-content .loft-family__head { position: sticky; top: 28px; } #loft-content .loft-family h2 { margin-top: 16px; } #loft-content .loft-video-card--family { grid-column: 2; } #loft-content .loft-video-card--family video { height: auto; aspect-ratio: 16 / 10; } #loft-content .loft-family__copy { grid-column: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 56px); } #loft-content .loft-family__copy p + p { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--line); } #loft-content .loft-handoff { background: var(--mist); } #loft-content .loft-handoff__steps { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0px; list-style: none; border-top: 1px solid var(--line); } #loft-content .loft-handoff__steps li { min-height: 210px; padding: 26px 26px 22px 0px; border-right: 1px solid var(--line); } #loft-content .loft-handoff__steps li:not(:first-child) { padding-left: 26px; } #loft-content .loft-handoff__steps li:last-child { border-right: 0px; } #loft-content .loft-handoff__steps span { display: block; color: var(--gold); font-size: 11px !important; letter-spacing: 0.12em; } #loft-content .loft-handoff__steps strong { display: block; margin-top: 26px; font-size: clamp(20px, 1.8vw, 27px) !important; font-weight: 500; letter-spacing: -0.035em; line-height: 1.08 !important; } #loft-content .loft-handoff__steps p { margin-top: 12px; color: var(--muted); font-size: 14px !important; line-height: 1.5 !important; } #loft-content .loft-commercial { display: grid; grid-template-columns: 3fr 3fr 6fr; margin-top: clamp(58px, 7vw, 96px); color: white; background: var(--night-soft); } #loft-content .loft-commercial article { min-height: 290px; padding: clamp(28px, 3vw, 44px); border-right: 1px solid var(--line-light); } #loft-content .loft-commercial article:last-child { border-right: 0px; } #loft-content .loft-commercial article > strong { display: block; color: var(--gold); font-size: clamp(30px, 3.2vw, 48px) !important; font-weight: 500; letter-spacing: -0.045em; line-height: 1 !important; } #loft-content .loft-commercial article > p { max-width: 250px; margin-top: 20px; color: rgba(255, 255, 255, 0.62); font-size: 14px !important; line-height: 1.55 !important; } #loft-content .loft-commercial__price > span { display: block; margin-bottom: 30px; color: rgba(255, 255, 255, 0.5); font-size: 11px !important; letter-spacing: 0.1em; text-transform: uppercase; } #loft-content .loft-commercial__price > div { display: grid; grid-template-columns: minmax(150px, 4fr) minmax(220px, 6fr); align-items: baseline; gap: 20px; padding-block: 22px; border-top: 1px solid var(--line-light); } #loft-content .loft-commercial__price strong { color: var(--gold); font-size: clamp(24px, 2.6vw, 38px) !important; font-weight: 500; letter-spacing: -0.04em; } #loft-content .loft-commercial__price p { color: rgba(255, 255, 255, 0.64); font-size: 14px !important; line-height: 1.5 !important; } #loft-content .loft-handoff__note { max-width: 760px; margin-top: 24px; color: var(--muted); font-size: 13px !important; line-height: 1.55 !important; } #loft-content .loft-catalog { display: grid; grid-template-columns: minmax(250px, 4fr) minmax(0px, 8fr); margin-top: clamp(58px, 7vw, 96px); overflow: hidden; border: 1px solid var(--line); background: rgb(240, 237, 230); } #loft-content .loft-catalog__cover { position: relative; display: grid; min-height: 430px; align-content: space-between; padding: clamp(28px, 3.2vw, 46px); overflow: hidden; color: white; background: var(--night); } #loft-content .loft-catalog__cover::before, #loft-content .loft-catalog__cover::after { position: absolute; top: 22%; bottom: -8%; width: 1px; background: rgba(182, 160, 113, 0.55); content: ""; transform: rotate(18deg); transform-origin: center bottom; } #loft-content .loft-catalog__cover::before { left: 36%; } #loft-content .loft-catalog__cover::after { right: 26%; } #loft-content .loft-catalog__cover > span { position: relative; z-index: 1; color: var(--gold); font-size: 11px !important; font-weight: 650; letter-spacing: 0.18em; } #loft-content .loft-catalog__cover > strong { position: relative; z-index: 1; align-self: center; font-size: clamp(64px, 8vw, 118px) !important; font-weight: 450; letter-spacing: -0.08em; line-height: 0.8 !important; transform: rotate(-90deg) translateY(12%); } #loft-content .loft-catalog__cover > i { position: absolute; inset: 19% 19% 15%; border: 1px solid rgba(255, 255, 255, 0.25); } #loft-content .loft-catalog__cover > small { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.58); font-size: 12px !important; line-height: 1.45 !important; } #loft-content .loft-catalog__body { display: flex; flex-direction: column; padding: clamp(32px, 5vw, 74px); } #loft-content .loft-catalog__body > small { color: rgb(141, 121, 77); font-size: 11px !important; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; } #loft-content .loft-catalog__body > strong { display: block; max-width: 12ch; margin-top: 24px; font-size: clamp(38px, 4.5vw, 64px) !important; font-weight: 500; letter-spacing: -0.055em; line-height: 0.96 !important; } #loft-content .loft-catalog__body > p { max-width: 610px; margin-top: 28px; color: var(--muted); font-size: clamp(15px, 1.25vw, 18px) !important; line-height: 1.6 !important; } #loft-content .loft-catalog__contents { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 34px; color: rgba(17, 24, 32, 0.62); font-size: 12px !important; } #loft-content .loft-catalog__contents > span::before { margin-right: 8px; color: var(--gold); content: "•"; } #loft-content .loft-catalog__action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 38px; font-size: 14px !important; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; } #loft-content .loft-catalog__action b { color: var(--gold); font-size: 24px !important; font-weight: 400; transition: transform 0.18s; } #loft-content .loft-catalog:hover .loft-catalog__action b, #loft-content .loft-catalog:focus-visible .loft-catalog__action b { transform: translate(4px, -4px); } #loft-content .loft-catalog:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; } #loft-content .loft-contact { padding-block: clamp(90px, 11vw, 160px); color: white; background: var(--night); } #loft-content .loft-contact h2 { max-width: 12ch; } #loft-content .loft-contact > .loft-shell > p:not(.loft-eyebrow) { max-width: 720px; margin-top: 34px; color: rgba(255, 255, 255, 0.62); } #loft-content .loft-contact__actions { display: flex; flex-wrap: wrap; margin-top: clamp(50px, 6vw, 84px); border-top: 1px solid var(--line-light); } #loft-content .loft-contact__actions a { flex: 1 1 320px; padding: 28px 0px; border-right: 1px solid var(--line-light); font-size: clamp(22px, 2.6vw, 38px) !important; font-weight: 500; letter-spacing: -0.035em; } #loft-content .loft-contact__actions a + a { padding-left: clamp(24px, 4vw, 56px); border-right: 0px; } #loft-content .loft-contact__actions a:hover, #loft-content .loft-contact__actions a:focus-visible { color: var(--gold); } @media (max-width: 980px) { #loft-content .loft-section-head { grid-template-columns: 1fr; gap: 26px; } #loft-content .loft-section-head > p { max-width: 720px; } #loft-content .loft-opening__panel:not(.loft-opening__panel--swing):not(.loft-opening__panel--sliding) { grid-template-columns: minmax(0px, 3fr) minmax(240px, 2fr); gap: 30px; } #loft-content .loft-opening__project-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); } #loft-content .loft-opening__project-grid article:nth-child(2) { border-right: 0px; } #loft-content .loft-opening__project-grid article:nth-child(3) { padding-left: 0px; } #loft-content .loft-opening__project-grid article:nth-child(n+3) { border-top: 0px; } #loft-content .loft-layouts__head { grid-template-columns: 1fr; gap: 24px; } #loft-content .loft-roles__grid { grid-template-columns: 1fr; gap: 64px; } #loft-content .loft-role { height: clamp(620px, 86vw, 760px); } #loft-content .loft-spec-row, #loft-content .loft-handoff__steps { grid-template-columns: repeat(2, 1fr); } #loft-content .loft-spec-row > div:nth-child(2), #loft-content .loft-handoff__steps li:nth-child(2) { border-right: 0px; } #loft-content .loft-commercial { grid-template-columns: 1fr 1fr; } #loft-content .loft-commercial__price { grid-column: 1 / -1; } #loft-content .loft-family__layout { grid-template-columns: 1fr; } #loft-content .loft-family__head { position: static; } #loft-content .loft-video-card--family, #loft-content .loft-family__copy { grid-column: 1; } } @media (max-width: 700px) { #loft-content { --gutter: 20px; --section: 72px; } #loft-content .loft-section-head { display: block; margin-bottom: 34px; } #loft-content .loft-section-head > p { margin-top: 24px; font-size: 16px !important; } #loft-content .loft-section-head h2, #loft-content .loft-family h2, #loft-content .loft-contact h2 { font-size: clamp(40px, 12vw, 52px) !important; line-height: 0.96 !important; } #loft-content .loft-hero__stage { height: max(620px, 100svh); min-height: 620px; } #loft-content .loft-hero__frame img { object-position: var(--focus-mobile, var(--focus, 50% 50%)); } #loft-content .loft-hero__title { gap: 26px; padding-inline: 0px; } #loft-content .loft-hero__title h1 { max-width: none; font-size: clamp(29px, 8.1vw, 32px) !important; line-height: 0.96 !important; } #loft-content .loft-hero__pagination { position: absolute; z-index: 2; left: 50%; bottom: 14px; display: flex; gap: 0px; padding: 3px 7px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; background: rgba(13, 17, 18, 0.46); backdrop-filter: blur(8px); transform: translateX(-50%); } #loft-content .loft-hero__dot { position: relative; width: 28px; height: 28px; padding: 0px; border: 0px; background: transparent; } #loft-content .loft-hero__dot::before { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); content: ""; transform: translate(-50%, -50%); transition: width 0.2s, background-color 0.2s; } #loft-content .loft-hero__dot.is-active::before { width: 16px; background: white; } #loft-content .loft-hero__dot:focus-visible { outline: white solid 2px; outline-offset: -4px; border-radius: 999px; } #loft-content .loft-hero__lead { max-width: 34ch; font-size: 14px !important; line-height: 1.55 !important; } #loft-content .loft-roles { padding-top: 28px; } #loft-content .loft-roles__grid { grid-template-columns: 1fr; gap: 72px; } #loft-content .loft-role { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; height: auto; } #loft-content .loft-role::before { display: none; } #loft-content .loft-role :is(h2, h3), #loft-content .loft-role--clear :is(h2, h3), #loft-content .loft-role--accent :is(h2, h3) { grid-area: 1 / 1; padding: 0px; color: var(--ink); font-size: clamp(28px, 8vw, 36px) !important; } #loft-content .loft-role__gallery { position: relative; display: block; grid-area: 2 / 1; min-width: 0px; margin-top: 18px; } #loft-content .loft-role__track { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } #loft-content .loft-role__track::-webkit-scrollbar { display: none; } #loft-content .loft-role__main, #loft-content .loft-role--clear .loft-role__main, #loft-content .loft-role--accent .loft-role__main, #loft-content .loft-role__support, #loft-content .loft-role--clear .loft-role__support, #loft-content .loft-role--accent .loft-role__support { flex: 0 0 calc(100% - 28px); width: auto; height: min(120vw, 560px); max-height: none; margin: 0px; border: 0px; scroll-snap-align: start; scroll-snap-stop: always; } #loft-content .loft-role__track::after { flex: 0 0 1px; content: ""; } #loft-content .loft-role__description, #loft-content .loft-role--clear .loft-role__description, #loft-content .loft-role--accent .loft-role__description { grid-area: 3 / 1; padding: 0px; margin-top: 30px; color: var(--muted); font-size: 16px !important; line-height: 1.58 !important; } #loft-content .loft-role__glass-copy { display: none; } #loft-content .loft-materials { margin-top: 22px; } #loft-content .loft-materials__summary { min-height: 108px; gap: 18px; padding: 22px 20px; } #loft-content .loft-materials__summary strong { font-size: 26px !important; } #loft-content .loft-materials__meta { gap: 12px; font-size: 11px !important; } #loft-content .loft-materials__meta > span { display: none; } #loft-content .loft-materials__meta i { width: 36px; height: 36px; font-size: 23px !important; } #loft-content .loft-materials__body { --materials-inline: 20px; padding: 26px var(--materials-inline) 30px; } #loft-content .loft-materials__tabs { display: grid; gap: 10px; margin-top: 28px; margin-right: 0px; padding-right: 0px; overflow: visible; } #loft-content .loft-materials__tabs button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; padding: 8px 0px 10px; border: 0px; font-size: 18px !important; text-align: left; white-space: normal; } #loft-content .loft-materials__tabs span { margin-left: 18px; } #loft-content .loft-materials__track { grid-auto-columns: 56%; gap: 12px; margin-top: 24px; } #loft-content .loft-material-card figcaption { min-height: 58px; font-size: 11px !important; } #loft-content .loft-materials__safety { margin-top: 30px; font-size: 12px !important; line-height: 1.58 !important; } #loft-content .loft-materials__showroom { margin-top: 20px; font-size: 13px !important; } #loft-content .loft-finish-library { margin-bottom: 0px; padding: 24px 20px 30px; } #loft-content .loft-finish-library__head { grid-template-columns: 1fr; gap: 10px; padding-top: 18px; } #loft-content .loft-finish-library__head h3 { font-size: 28px !important; } #loft-content .loft-finish-library__head p { font-size: 13px !important; } #loft-content .loft-finish-library__track { grid-auto-columns: 56%; gap: 12px; margin-top: 22px; } #loft-content .loft-finish-library--profile, #loft-content .loft-finish-library--veneer { margin-top: 52px; } #loft-content .loft-opening__summary { min-height: 104px; padding: 22px 20px; } #loft-content .loft-opening__summary strong { max-width: 12ch; font-size: 26px !important; } #loft-content .loft-opening__meta > span { display: none; } #loft-content .loft-opening__meta i { width: 36px; height: 36px; font-size: 23px !important; } #loft-content .loft-opening__body { padding: 26px 20px 30px; } #loft-content .loft-opening__tabs { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 28px; margin-right: 0px; padding-right: 0px; overflow: visible; } #loft-content .loft-opening__tabs button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; padding: 8px 0px 10px; border: 0px; font-size: 18px !important; text-align: left; white-space: normal; } #loft-content .loft-opening__tabs button::after { right: 0px; } #loft-content .loft-opening__panel { margin-top: 26px; } #loft-content .loft-opening__panel:not(.loft-opening__panel--swing):not(.loft-opening__panel--sliding) { display: flex; flex-direction: column; align-items: stretch; gap: 20px; } #loft-content .loft-opening__panel:not(.loft-opening__panel--swing):not(.loft-opening__panel--sliding) .loft-opening__image { order: 1; } #loft-content .loft-opening__panel:not(.loft-opening__panel--swing):not(.loft-opening__panel--sliding) .loft-opening__copy { order: 2; } #loft-content .loft-opening__copy { font-size: 15px !important; } #loft-content .loft-opening__schemes { grid-auto-columns: 86%; gap: 10px; margin-top: 0px; } #loft-content .loft-opening__schemes img { height: 168px; padding: 12px 17px 14px; } #loft-content .loft-opening__copy--lead { margin-bottom: 24px; } #loft-content .loft-movement-grid { grid-auto-columns: 86%; gap: 10px; } #loft-content .loft-movement-card { grid-template-rows: minmax(96px, auto) 168px; } #loft-content .loft-movement-card figcaption { min-height: 96px; padding: 16px 17px 14px; } #loft-content .loft-movement-card figcaption strong { font-size: 19px !important; } #loft-content .loft-motion-demo { padding: 12px 17px 14px; } #loft-content .loft-motion { height: 142px; } #loft-content .loft-movement-catalog { min-height: 58px; gap: 18px; padding: 16px 18px; font-size: 14px !important; } #loft-content .loft-opening__project { margin-top: 48px; } #loft-content .loft-opening__project > h3 { font-size: 30px !important; } #loft-content .loft-opening__project-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; } #loft-content .loft-opening__project-grid article, #loft-content .loft-opening__project-grid article:not(:first-child) { min-height: 0px; padding: 0px; border: 0px; } #loft-content .loft-opening__project-grid h4 { font-size: 17px !important; } #loft-content .loft-opening__project-grid p { max-width: 32ch; margin-top: 10px; font-size: 13px !important; } #loft-content .loft-opening__engineering { margin-top: 36px; font-size: 12px !important; } #loft-content .loft-layouts { margin-top: 74px; } #loft-content .loft-glazing-bridge { margin-top: 64px; } #loft-content .loft-glazing-bridge .loft-story-media { margin-right: calc(var(--gutter) * -1); margin-left: calc(var(--gutter) * -1); } #loft-content .loft-glazing-bridge :is(h2, h3) { margin-top: 24px; font-size: 32px !important; } #loft-content .loft-story-media__replay { right: 12px; bottom: 12px; } #loft-content .loft-layouts__head { display: block; } #loft-content .loft-layouts__head :is(h2, h3) { font-size: 42px !important; } #loft-content .loft-layouts__head p { margin-top: 20px; font-size: 16px !important; } #loft-content .loft-layouts__type { position: static; order: 2; width: min(320px, 100% - 32px); margin: 12px auto 0px; background: var(--night); box-shadow: none; transform: none; } #loft-content .loft-layouts__type button { min-height: 34px; padding: 0px 10px; font-size: 11px !important; } #loft-content .loft-layouts__tabs { grid-auto-columns: 68px; gap: 7px; margin-top: 28px; } #loft-content .loft-layouts__tabs button { min-height: 104px; padding: 7px 6px 6px; } #loft-content .loft-layouts__tabs img { height: 74px; } #loft-content .loft-layouts__stage { display: flex; height: auto; flex-direction: column; margin-top: 14px; margin-right: calc(var(--gutter) * -1); margin-left: calc(var(--gutter) * -1); overflow: visible; background: transparent; } #loft-content .loft-layouts__preview { order: 1; height: auto; aspect-ratio: 16 / 9; cursor: zoom-in; } #loft-content .loft-layouts__preview.is-inspecting { cursor: zoom-out; } #loft-content .loft-layouts__preview.is-inspecting img { transform: scale(1.72); } #loft-content .loft-layouts__preview:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; } #loft-content .loft-layouts__preview:not(:disabled) .loft-layouts__zoom-hint { position: absolute; right: 16px; bottom: 14px; display: block; padding: 7px 10px; border-radius: 999px; color: white; background: rgba(13, 17, 18, 0.82); font-size: 12px !important; line-height: 1.4 !important; } #loft-content .loft-spec-row { grid-template-columns: 1fr; margin-top: 46px; } #loft-content .loft-spec-row > div, #loft-content .loft-spec-row > div:not(:first-child) { min-height: 0px; padding: 24px 0px; border-right: 0px; border-bottom: 1px solid var(--line-light); } #loft-content .loft-spec-row dd { max-width: none; } #loft-content .loft-language .loft-shell { display: flex; flex-direction: column; } #loft-content .loft-language .loft-section-head, #loft-content .loft-language__collage { display: contents; } #loft-content .loft-language .loft-section-head > div { order: 1; } #loft-content .loft-language__details { order: 2; } #loft-content .loft-language .loft-section-head > p { order: 3; margin-top: 30px; } #loft-content .loft-language__overview { order: 4; } #loft-content .loft-language__bedroom { order: 5; } #loft-content .loft-language__overview, #loft-content .loft-language__bedroom { width: 100%; height: auto; } #loft-content .loft-language__overview { margin-top: 10px; aspect-ratio: 4 / 3; } #loft-content .loft-language__bedroom { margin-top: 10px; aspect-ratio: 2000 / 1429; } #loft-content .loft-language__details { position: relative; display: block; margin-top: 28px; overflow: hidden; } #loft-content .loft-language__details-track { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } #loft-content .loft-language__details-track::-webkit-scrollbar { display: none; } #loft-content .loft-language__details-track figure { flex: 0 0 calc(100% - 28px); height: min(120vw, 560px); scroll-snap-align: start; scroll-snap-stop: always; } #loft-content .loft-language__details-track video { height: 100%; object-fit: cover; } #loft-content .loft-language__pagination { display: flex; } #loft-content .loft-precision__head { margin-bottom: 34px; } #loft-content .loft-precision__head h2 { font-size: clamp(40px, 12vw, 52px) !important; } #loft-content .loft-precision__intro { width: auto; max-width: none; margin-top: 26px; font-size: 16px !important; line-height: 1.58 !important; } #loft-content .loft-precision__composition { display: flex; min-height: 0px; flex-direction: column; } #loft-content .loft-precision__composition figure { width: auto; height: auto; border: 0px; } #loft-content .loft-precision__main { order: 1; } #loft-content .loft-precision__main img { height: auto; aspect-ratio: 4 / 5; object-fit: contain; } #loft-content .loft-precision__samples { position: static; order: 2; width: auto; margin-top: 10px; padding: 18px; grid-template-columns: minmax(0px, 0.9fr) 1.1fr; } #loft-content .loft-precision__samples > p { align-self: center; font-size: 13px !important; } #loft-content .loft-precision__samples > div { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; overflow: visible; } #loft-content .loft-precision__samples figure { width: auto; } #loft-content .loft-precision__samples img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; } #loft-content .loft-precision__details { position: relative; display: block; order: 3; width: auto; height: auto; margin-top: 10px; overflow: hidden; background: transparent; } #loft-content .loft-precision__details-track { position: static; display: flex; height: auto; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } #loft-content .loft-precision__details-track::-webkit-scrollbar { display: none; } #loft-content .loft-precision__slide { position: static; flex: 0 0 calc(100% - 28px); height: auto; opacity: 1; pointer-events: auto; scroll-snap-align: start; scroll-snap-stop: always; } #loft-content .loft-precision__details-track::after { flex: 0 0 1px; content: ""; } #loft-content .loft-precision__details-track img, #loft-content .loft-precision__details-track video { aspect-ratio: 4 / 5; object-fit: cover; } #loft-content .loft-precision__details-track .loft-precision__open img { object-fit: contain; } #loft-content .loft-precision__pagination { right: 18px; bottom: 18px; display: flex; } #loft-content .loft-precision__supporting { order: 4; display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; margin-top: 34px; } #loft-content .loft-precision__supporting figure { height: auto; } #loft-content .loft-precision__supporting-handle { grid-column: 1 / -1; } #loft-content .loft-precision__supporting-upper { grid-column: 1; } #loft-content .loft-precision__supporting-hinge { grid-column: 2; } #loft-content .loft-precision__supporting img { aspect-ratio: 4 / 5; object-fit: cover; } #loft-content .loft-materials__continuation > .loft-precision { margin-top: 62px; padding-block: 64px; } #loft-content .loft-materials__continuation > .loft-glazing-bridge { margin-top: 64px; } #loft-content .loft-materials__continuation > .loft-layouts { margin-top: 68px; } #loft-content .loft-veneer__steps { grid-template-columns: 1fr; gap: 52px; } #loft-content .loft-veneer__step--assembly { margin-top: 0px; } #loft-content .loft-veneer__step .loft-video-card video { aspect-ratio: 4 / 5; } #loft-content .loft-veneer__step--line .loft-video-card video { aspect-ratio: 4 / 3; } #loft-content .loft-veneer__step figcaption { grid-template-columns: 1fr; gap: 10px; } #loft-content .loft-veneer__step figcaption p { max-width: 34ch; font-size: 15px !important; } #loft-content .loft-production > .loft-shell { display: flex; flex-direction: column; } #loft-content .loft-production .loft-section-head { order: 1; } #loft-content .loft-production__process { order: 2; display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 30px; } #loft-content .loft-production__process .loft-video-card { width: 100%; } #loft-content .loft-production__process figcaption { max-width: 30ch; padding: 0px; } #loft-content .loft-production__proofs { order: 3; grid-template-columns: 1fr; gap: 34px; } #loft-content .loft-production__proofs img { height: 112vw; max-height: 560px; } #loft-content .loft-family__layout { display: flex; flex-direction: column; gap: 28px; } #loft-content .loft-family__head { order: 1; } #loft-content .loft-family__layout > .loft-family__intro { order: 2; color: var(--muted); font-size: 16px !important; line-height: 1.6 !important; } #loft-content .loft-video-card--family { order: 3; width: 100%; } #loft-content .loft-video-card--family video { aspect-ratio: 9 / 16; } #loft-content .loft-family__copy { order: 4; display: block; font-size: 16px !important; } #loft-content .loft-family__copy p + p { margin-top: 22px; padding: 22px 0px 0px; border-top: 1px solid var(--line); border-left: 0px; } #loft-content .loft-handoff__steps { grid-template-columns: 1fr; } #loft-content .loft-handoff__steps li, #loft-content .loft-handoff__steps li:not(:first-child) { min-height: 0px; padding: 24px 0px; border-right: 0px; border-bottom: 1px solid var(--line); } #loft-content .loft-commercial { grid-template-columns: 1fr; } #loft-content .loft-commercial article { min-height: 0px; border-right: 0px; border-bottom: 1px solid var(--line-light); } #loft-content .loft-commercial__price { grid-column: auto; } #loft-content .loft-commercial__price > div { grid-template-columns: 1fr; gap: 8px; } #loft-content .loft-catalog { grid-template-columns: 1fr; } #loft-content .loft-catalog__cover { min-height: 270px; } #loft-content .loft-catalog__cover > strong { justify-self: center; font-size: 84px !important; transform: none; } #loft-content .loft-catalog__cover > i { inset: 23% 24% 17%; } #loft-content .loft-catalog__body { min-height: 430px; padding: 30px 24px 28px; } #loft-content .loft-catalog__body > strong { font-size: 38px !important; } #loft-content .loft-catalog__contents { display: grid; gap: 8px; } #loft-content .loft-contact__actions { display: block; } #loft-content .loft-contact__actions a { display: block; padding: 24px 0px; border-right: 0px; border-bottom: 1px solid var(--line-light); } #loft-content .loft-contact__actions a + a { padding-left: 0px; } } @media (prefers-reduced-motion: reduce) { #loft-content { scroll-behavior: auto; } #loft-content .loft-layouts__preview img { transition: none; } #loft-content .loft-hero__rewind { display: none; } #loft-content .loft-hero__title { opacity: 1; transform: none; clip-path: inset(0px); } #loft-content .loft-hero__stage.is-running .loft-hero__title, #loft-content .loft-hero__stage.is-running .loft-hero__frame, #loft-content .loft-hero__stage.is-running .loft-hero__frame img { animation: auto ease 0s 1 normal none running none; } #loft-content .loft-motion__panel { animation: auto ease 0s 1 normal none running none; } #loft-content .loft-motion__panel--single { transform: translateX(210px); } #loft-content .loft-motion__panel--wall-double-left { transform: translateX(-160px); } #loft-content .loft-motion__panel--wall-double-right { transform: translateX(160px); } #loft-content .loft-motion__panel--opening-double-left { transform: translateX(150px); } #loft-content .loft-motion__panel--opening-double-right { transform: translateX(0px); } #loft-content .loft-motion__panel--independent-left { transform: translateX(0px); } #loft-content .loft-motion__panel--independent-middle { transform: translateX(-120px); } #loft-content .loft-motion__panel--independent-right { transform: translateX(0px); } #loft-content .loft-motion__panel--telescope-middle { transform: translateX(-120px); } #loft-content .loft-motion__panel--telescope-right { transform: translateX(-240px); } #loft-content .loft-motion__panel--quad-left { transform: translateX(-100px); } #loft-content .loft-motion__panel--quad-right { transform: translateX(100px); } #loft-content .loft-motion__panel--six-left-middle { transform: translateX(-70px); } #loft-content .loft-motion__panel--six-left-inner { transform: translateX(-140px); } #loft-content .loft-motion__panel--six-right-inner { transform: translateX(140px); } #loft-content .loft-motion__panel--six-right-middle { transform: translateX(70px); } } #loft-content .loft-static-only { display: none; } #loft-content { --ink: #242822; --muted: #5c6358; --paper: #f5f3ed; --mist: #eae8df; --night: #171c19; --night-soft: #202622; --gold: #b9a57b; --line: rgba(36, 40, 34, .2); --line-light: rgba(245, 243, 237, .24); --display: Bahnschrift, "DIN Alternate", "Segoe UI", Arial, sans-serif; --body: "Segoe UI", Arial, sans-serif; --grid-gap: clamp(24px, 2.2vw, 32px); --space-inline: 16px; --space-related: 24px; --space-group: 40px; --space-chapter: clamp(88px, 8vw, 128px); --section: var(--space-chapter); --copy: #343a31; --copy-dark: #e0e3d9; } #loft-content { font-family: var(--body); } #loft-content .loft-layouts__preview { touch-action: pan-y pinch-zoom; user-select: none; } #loft-content .loft-layouts__preview > img { transform-origin: center center; transition: none; user-select: none; -webkit-user-drag: none; } #loft-content .loft-layouts__preview.is-inspecting > img { transform: translate3d(var(--inspection-x, 0px), var(--inspection-y, 0px), 0) scale(var(--inspection-scale, 3)); } #loft-content .loft-layouts__preview:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; } #loft-content .loft-layouts__lens { position: absolute; display: none; border: 2px solid var(--gold); border-radius: 50%; background-color: var(--night-soft); background-repeat: no-repeat; background-origin: border-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 36px; pointer-events: none; } #loft-content .loft-layouts__preview.is-magnifying .loft-layouts__lens { display: block; } #loft-content .loft-image-viewer { position: fixed; inset: 0px; margin: 0px; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 0px; border: 0px; color: var(--paper); background: var(--night); overflow: hidden; } #loft-content .loft-image-viewer[open] { display: flex; flex-direction: column; } #loft-content .loft-image-viewer::backdrop { background: var(--night); } #loft-content .loft-image-viewer__bar { display: flex; justify-content: flex-end; flex: 0 0 auto; padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px 16px; border-bottom: 1px solid var(--line-light); } #loft-content .loft-image-viewer__close { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-light); border-radius: 2px; color: var(--paper); background: transparent; font: 500 16px/1.4 var(--body); cursor: pointer; } #loft-content .loft-image-viewer__close svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; } #loft-content .loft-image-viewer__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } #loft-content .loft-image-viewer__scroll { flex: 1 1 auto; min-height: 0px; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; padding-bottom: env(safe-area-inset-bottom); } #loft-content .loft-image-viewer__scroll > img { display: block; max-width: none; object-fit: contain; transform: none; filter: none; user-select: none; -webkit-user-drag: none; cursor: zoom-out; } #loft-content .loft-language__motion { position: relative; } #loft-content .loft-gallery-play { position: absolute; z-index: 3; right: 16px; bottom: 72px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-light); border-radius: 999px; color: var(--paper); background: var(--night-soft); font: 500 14px/1.4 var(--body); cursor: pointer; } #loft-content .loft-gallery-play[hidden] { display: none; } #loft-content .loft-gallery-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } #loft-content .loft-story-media.needs-play .loft-story-media__replay { opacity: 1; pointer-events: auto; transform: none; min-height: 44px; } #loft-content .loft-movement-catalog svg { display: block; flex-shrink: 0; width: 19px; height: 19px; color: var(--ink); } #loft-content ::selection { color: var(--paper); background: rgb(85, 96, 78); } #loft-content .loft-eyebrow { color: rgb(119, 97, 59); font-size: 12px !important; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4 !important; } #loft-content .loft-eyebrow::before { display: inline-block; width: 24px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentcolor; content: ""; } #loft-content .loft-section-head--dark .loft-eyebrow, #loft-content .loft-contact > .loft-shell > .loft-eyebrow { color: var(--gold); font-size: 12px !important; line-height: 1.4 !important; } #loft-content .loft-section-head h2, #loft-content .loft-family h2, #loft-content .loft-contact h2 { margin-top: 24px; font-family: var(--display); font-size: clamp(40px, 4.6vw, 66px) !important; font-weight: 400; letter-spacing: -0.035em; line-height: 1.08 !important; } #loft-content .loft-section-head > p, #loft-content .loft-precision__intro, #loft-content .loft-layouts__head p, #loft-content .loft-opening__copy, #loft-content .loft-family__copy, #loft-content .loft-contact > .loft-shell > p:not(.loft-eyebrow) { color: var(--copy); font-size: 19px !important; font-weight: 400; line-height: 1.6 !important; } #loft-content .loft-section-head--dark > p, #loft-content .loft-layouts__head p, #loft-content .loft-opening__copy, #loft-content .loft-contact > .loft-shell > p:not(.loft-eyebrow) { color: var(--copy-dark); } #loft-content .loft-copy-lead { display: block; margin-bottom: 16px; color: var(--ink); font-size: 23px !important; line-height: 1.4 !important; font-weight: 500; letter-spacing: -0.015em; } #loft-content .loft-section-head--dark .loft-copy-lead { color: var(--paper); } #loft-content .loft-section-head { align-items: start; margin-bottom: 56px; } #loft-content .loft-layouts__head, #loft-content .loft-finish-library__head { align-items: start; } #loft-content .loft-layouts__head p { margin-top: 0px; } #loft-content .loft-language__collage, #loft-content .loft-precision__composition, #loft-content .loft-precision__supporting, #loft-content .loft-production > .loft-shell { column-gap: var(--grid-gap); } @media (min-width: 981px) { #loft-content .loft-section-head { grid-template-columns: repeat(12, minmax(0px, 1fr)); grid-template-rows: auto auto; gap: 24px var(--grid-gap); } #loft-content .loft-section-head > div { display: grid; grid-area: 1 / 1 / span 2 / span 7; grid-template-rows: subgrid; } #loft-content .loft-section-head > div > .loft-eyebrow { grid-row: 1; } #loft-content .loft-section-head > div > h2 { grid-row: 2; margin: 0px; } #loft-content .loft-section-head > p { grid-area: 2 / 9 / auto / -1; margin: 0px; } #loft-content .loft-layouts__head { grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: var(--grid-gap); } #loft-content .loft-layouts__head :is(h2, h3) { grid-column: 1 / span 7; } #loft-content .loft-layouts__head p { grid-column: 9 / -1; } #loft-content .loft-finish-library__head { grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } } #loft-content .loft-hero__title h1 { font-family: var(--display); font-size: clamp(48px, 5.35vw, 80px) !important; font-weight: 400; letter-spacing: -0.035em; line-height: 1.06 !important; } #loft-content .loft-hero__title h1 span + span { color: rgb(204, 199, 185); } #loft-content .loft-hero__lead { max-width: 850px; color: var(--copy-dark); font-size: 18px !important; line-height: 1.65 !important; } #loft-content .loft-role :is(h2, h3), #loft-content .loft-materials__summary strong, #loft-content .loft-opening__summary strong, #loft-content .loft-finish-library__head h3, #loft-content .loft-opening__project > h3, #loft-content .loft-glazing-bridge :is(h2, h3), #loft-content .loft-layouts__head :is(h2, h3), #loft-content .loft-handoff__steps strong, #loft-content .loft-commercial strong, #loft-content .loft-catalog__body > strong, #loft-content .loft-catalog__cover > strong, #loft-content .loft-contact__actions a { font-family: var(--display); font-weight: 400; letter-spacing: -0.025em; line-height: 1.12 !important; } #loft-content .loft-role :is(h2, h3) { font-size: clamp(26px, 2.2vw, 32px) !important; } #loft-content .loft-role__description { color: var(--copy-dark); font-size: 18px !important; line-height: 1.6 !important; } @media (min-width: 701px) { #loft-content .loft-role { height: auto; min-height: clamp(500px, 55vw, 700px); grid-template-rows: auto minmax(min-content, 1fr) clamp(240px, 24.2vw, 308px); } #loft-content .loft-role__main { contain: size; min-height: 0px; } } #loft-content .loft-glazing-bridge :is(h2, h3) { font-size: clamp(30px, 3.25vw, 46px) !important; } #loft-content .loft-layouts__head :is(h2, h3) { max-width: 15ch; font-size: clamp(38px, 4vw, 58px) !important; } #loft-content .loft-materials, #loft-content .loft-opening { border: 1px solid var(--line-light); } #loft-content .loft-materials__summary, #loft-content .loft-opening__summary { gap: 32px; padding: 32px; background: rgba(245, 243, 237, 0.035); } #loft-content .loft-materials__summary strong, #loft-content .loft-opening__summary strong { font-size: clamp(28px, 2.65vw, 38px) !important; line-height: 1.18 !important; } #loft-content .loft-materials__summary small { font-size: 12px !important; margin-bottom: 12px; } #loft-content .loft-materials__summary { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: start; row-gap: var(--space-related); } #loft-content .loft-materials__intro { grid-column: 1 / -1; max-width: 64ch; color: var(--copy-dark); font-size: 19px !important; font-weight: 400; line-height: 1.6 !important; } #loft-content .loft-materials__meta { grid-area: 1 / 2; } #loft-content .loft-materials__meta, #loft-content .loft-opening__meta { color: var(--copy-dark); font-size: 14px !important; } #loft-content .loft-materials__meta i, #loft-content .loft-opening__meta i, #loft-content .loft-materials[open] .loft-materials__meta i, #loft-content .loft-opening[open] .loft-opening__meta i { display: grid; flex: 0 0 48px; width: 48px; height: 48px; padding: 0px; place-items: center; border: 1px solid rgb(143, 150, 127); color: var(--paper); border-radius: 50%; transform: none; transition: background 0.18s, border-color 0.18s; } #loft-content .loft-toggle-icon { display: block; width: 24px; height: 24px; stroke-width: 1.5; transform-origin: 50% 50%; transition: transform 0.24s; } #loft-content .loft-materials[open] .loft-toggle-icon, #loft-content .loft-opening[open] .loft-toggle-icon { transform: rotate(45deg); } #loft-content .loft-materials__summary:hover i, #loft-content .loft-opening__summary:hover i { background: rgba(245, 243, 237, 0.08); border-color: var(--paper); } #loft-content .loft-materials__body { --materials-inline: 32px; padding: 0 var(--materials-inline) 40px; } #loft-content .loft-opening__body { padding: 0px 32px 40px; } #loft-content .loft-materials__tabs, #loft-content .loft-opening__tabs { gap: 32px; margin-top: 40px; border-bottom: 1px solid var(--line-light); } #loft-content .loft-materials__tabs button, #loft-content .loft-opening__tabs button { padding-bottom: 20px; color: rgb(199, 206, 191); font-size: clamp(19px, 1.6vw, 23px) !important; font-weight: 400; letter-spacing: -0.01em; } #loft-content .loft-materials__tabs button.is-active, #loft-content .loft-opening__tabs button.is-active { color: var(--paper); } #loft-content .loft-materials__tabs button.is-active::after, #loft-content .loft-opening__tabs button.is-active::after { height: 2px; } #loft-content .loft-material-card figcaption, #loft-content .loft-finish-library .loft-material-card figcaption { color: var(--copy-dark); font-size: 14px !important; line-height: 1.5 !important; padding-top: 16px; } #loft-content .loft-materials__safety, #loft-content .loft-opening__engineering { max-width: 64ch; padding-top: 24px; border-top: 1px solid var(--line-light); color: var(--copy-dark); font-size: 16px !important; line-height: 1.6 !important; } #loft-content .loft-materials__safety { margin-top: 40px; } #loft-content .loft-materials__showroom { margin-top: 24px; padding-block: 6px; font-size: 16px !important; line-height: 1.5 !important; } #loft-content .loft-finish-library__head p { color: var(--copy-dark); font-size: 17px !important; line-height: 1.55 !important; } #loft-content .loft-opening__copy p + p { color: var(--copy-dark); font-size: 17px !important; } #loft-content .loft-opening__project-grid { row-gap: 16px; } #loft-content .loft-opening__project-grid article { display: grid; grid-row: span 2; grid-template-rows: subgrid; } #loft-content .loft-opening__project-grid h4 { margin: 0px; max-width: none; font-size: 20px !important; line-height: 1.3 !important; } #loft-content .loft-opening__project-grid p { margin: 0px; color: var(--copy-dark); font-size: 16px !important; line-height: 1.6 !important; } #loft-content .loft-movement-grid { grid-template-rows: auto auto 214px; row-gap: 0px; } #loft-content .loft-movement-card { grid-row: 1 / span 3; grid-template-rows: subgrid; background: var(--paper); } #loft-content .loft-movement-card figcaption { grid-row: 1 / span 2; grid-template-rows: subgrid; gap: 12px; min-height: 0px; padding: 24px; } #loft-content .loft-movement-card figcaption strong { font-family: var(--display); font-size: 22px !important; font-weight: 400; line-height: 1.2 !important; } #loft-content .loft-movement-card figcaption span { color: var(--muted); font-size: 12px !important; line-height: 1.5 !important; } #loft-content .loft-motion-demo { grid-row: 3; } #loft-content .loft-movement-catalog { border-left: 3px solid var(--gold); font-size: 16px !important; padding: 20px 24px; } #loft-content .loft-layouts__tabs { margin-top: 40px; } #loft-content .loft-layouts__tabs button { color: var(--copy-dark); border-color: var(--line-light); } #loft-content .loft-layouts__tabs button.is-active { border-color: var(--gold); background: rgba(185, 165, 123, 0.16); } #loft-content .loft-layouts__tabs span { font-size: 12px !important; letter-spacing: 0.02em; } #loft-content .loft-layouts__type, #loft-content .loft-layouts__type button { border-radius: 3px; } #loft-content .loft-layouts__type { background: rgba(23, 28, 25, 0.92); box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 16px; } #loft-content .loft-layouts__type button { min-height: 40px; color: var(--copy-dark); font-size: 14px !important; } #loft-content .loft-layouts__type button.is-active { color: var(--ink); background: var(--paper); } #loft-content .loft-production__process figcaption, #loft-content .loft-production__proofs figcaption { max-width: 48ch; padding-top: 24px; color: var(--copy-dark); font-size: 17px !important; line-height: 1.6 !important; } #loft-content .loft-precision__samples > p { align-self: start; color: var(--copy-dark); font-size: 15px !important; line-height: 1.55 !important; } #loft-content .loft-veneer { background: var(--mist); } #loft-content .loft-veneer__steps { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 24px var(--grid-gap); align-items: start; } #loft-content .loft-veneer__step { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; } #loft-content .loft-veneer__step--assembly { margin-top: 0px; } #loft-content .loft-veneer__step figcaption { grid-row: 2 / span 2; grid-template-columns: 1fr; grid-template-rows: subgrid; padding: 0px; gap: 16px; } #loft-content .loft-veneer__step figcaption span { font-size: 12px !important; line-height: 1.5 !important; color: rgb(119, 97, 59); } #loft-content .loft-veneer__step figcaption p { max-width: 48ch; color: var(--copy); font-size: 18px !important; line-height: 1.6 !important; } #loft-content .loft-family { background: var(--paper); } #loft-content .loft-family__layout { grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 48px var(--grid-gap); } #loft-content .loft-family__head { position: static; grid-area: 1 / 1 / auto / -1; } #loft-content .loft-family h2 { max-width: 20ch; font-size: clamp(40px, 5.2vw, 74px) !important; } #loft-content .loft-video-card--family { grid-area: 2 / 1 / auto / span 8; } #loft-content .loft-family__copy { display: block; grid-area: 2 / 9 / auto / -1; align-self: start; } #loft-content .loft-family__copy > p { color: var(--copy); font-size: 18px !important; line-height: 1.6 !important; } #loft-content .loft-family__copy > .loft-family__intro { margin-top: 32px; padding: 24px 0px 0px; border-left: 0px; border-top: 1px solid rgb(155, 134, 94); color: var(--ink); font-family: var(--display); font-size: 24px !important; line-height: 1.45 !important; letter-spacing: -0.01em; } #loft-content .loft-commercial { grid-template-columns: repeat(4, minmax(0px, 1fr)); grid-template-rows: auto auto auto; gap: 24px 0px; padding-block: 32px 40px; margin-top: 64px; } #loft-content .loft-commercial article { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; min-height: 0px; padding: 0px 32px; border-right: 1px solid var(--line-light); border-bottom: 0px; } #loft-content .loft-commercial article > strong { grid-row: 2; align-self: start; color: var(--paper); font-size: clamp(30px, 2.8vw, 42px) !important; line-height: 1.12 !important; margin: 0px; } #loft-content .loft-commercial article > p { grid-row: 3; align-self: start; max-width: none; margin: 0px; color: var(--copy-dark); font-size: 17px !important; line-height: 1.6 !important; } #loft-content .loft-commercial .loft-commercial__price { grid-column: 3 / span 2; grid-template-columns: subgrid; padding: 0px; border: 0px; } #loft-content .loft-commercial__price > span { grid-area: 1 / 1 / auto / -1; margin: 0px; padding-inline: 32px; color: var(--gold); font-size: 12px !important; line-height: 1.5 !important; letter-spacing: 0.08em; } #loft-content .loft-commercial__price > div { display: grid; grid-row: 2 / span 2; grid-template-rows: subgrid; grid-template-columns: minmax(0px, 1fr); align-items: start; gap: inherit; padding: 0px 32px; border-top: 0px; } #loft-content .loft-commercial__price > div + div { border-left: 1px solid var(--line-light); } #loft-content .loft-commercial__price strong { color: var(--gold); font-size: clamp(28px, 2.5vw, 38px) !important; line-height: 1.2 !important; font-variant-numeric: tabular-nums; } #loft-content .loft-commercial__price p { color: var(--copy-dark); font-size: 17px !important; line-height: 1.6 !important; } #loft-content .loft-handoff__note { margin-top: 24px; font-size: 15px !important; color: var(--copy); } #loft-content .loft-handoff__steps strong { font-size: 26px !important; } #loft-content .loft-handoff__steps p { color: var(--copy); font-size: 17px !important; line-height: 1.6 !important; } #loft-content .loft-catalog { background: var(--paper); margin-top: 64px; } #loft-content .loft-catalog__body > strong { max-width: 17ch; font-size: clamp(36px, 3.8vw, 56px) !important; } #loft-content .loft-catalog__body > p { color: var(--copy); font-size: 19px !important; line-height: 1.6 !important; } #loft-content .loft-catalog__contents { color: var(--copy); font-size: 15px !important; } #loft-content .loft-catalog__action { padding-top: 40px; font-size: 16px !important; letter-spacing: 0.04em; } #loft-content .loft-catalog__cover > small { color: var(--copy-dark); font-size: 15px !important; } #loft-content .loft-contact__actions a { font-size: clamp(25px, 2.2vw, 34px) !important; } @media (min-width: 701px) and (max-width: 1100px) { #loft-content .loft-precision__composition { grid-template-rows: auto minmax(0px, 1fr) auto; } #loft-content .loft-precision__samples { grid-template-columns: 1fr; } #loft-content .loft-precision__samples > p { max-width: none; } } @media (min-width: 701px) and (max-width: 980px) { #loft-content .loft-role { min-height: clamp(620px, 86vw, 760px); grid-template-rows: auto minmax(min-content, 1fr) clamp(272.8px, 37.84vw, 334.4px); } #loft-content .loft-section-head { grid-template-columns: 1fr; gap: 32px; } #loft-content .loft-section-head > p { max-width: 58ch; margin: 0px; } #loft-content .loft-family__layout { grid-template-columns: 1fr; gap: 40px; } #loft-content .loft-family__head, #loft-content .loft-video-card--family, #loft-content .loft-family__copy { grid-area: auto / 1; } #loft-content .loft-family__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } #loft-content .loft-family__copy > .loft-family__intro { margin: 0px; border-top: 0px; border-left: 1px solid rgb(155, 134, 94); padding: 0px 0px 0px 32px; } #loft-content .loft-commercial { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); } #loft-content .loft-commercial article:not(.loft-commercial__price) { grid-row: 1 / span 2; } #loft-content .loft-commercial article > strong { grid-row: 1; } #loft-content .loft-commercial article > p { grid-row: 2; } #loft-content .loft-commercial .loft-commercial__price { grid-area: 3 / 1 / span 3 / -1; border-top: 1px solid var(--line-light); padding-top: 32px; margin-top: 16px; } } @media (max-width: 700px) { #loft-content { --space-group: 40px; --space-chapter: 80px; --section: var(--space-chapter); } #loft-content .loft-section-head h2, #loft-content .loft-family h2, #loft-content .loft-contact h2 { max-width: 15ch; font-size: clamp(34px, 9.6vw, 42px) !important; line-height: 1.1 !important; letter-spacing: -0.03em; } #loft-content .loft-hero__title h1 { font-size: clamp(26px, 7.6vw, 32px) !important; line-height: 1.1 !important; } #loft-content .loft-hero__lead { max-width: none; font-size: 16px !important; line-height: 1.6 !important; } #loft-content .loft-section-head { margin-bottom: 40px; } #loft-content .loft-section-head > p, #loft-content .loft-precision__intro, #loft-content .loft-layouts__head p, #loft-content .loft-opening__copy { margin-top: 32px; font-size: 18px !important; line-height: 1.6 !important; } #loft-content .loft-copy-lead { font-size: 21px !important; line-height: 1.4 !important; margin-bottom: 20px; } #loft-content .loft-language .loft-section-head > p { margin-block: 40px; } #loft-content .loft-language__overview { margin-top: 0px; } #loft-content .loft-language__bedroom { margin-top: 12px; } #loft-content .loft-language__details { margin-top: 32px; } #loft-content .loft-role :is(h2, h3), #loft-content .loft-role--accent :is(h2, h3) { font-size: clamp(28px, 7.7vw, 34px) !important; line-height: 1.13 !important; } #loft-content .loft-role__gallery { margin-top: 24px; } #loft-content .loft-role .loft-role__description { margin-top: 32px; color: var(--copy); font-size: 18px !important; line-height: 1.6 !important; } #loft-content .loft-materials { margin-top: 40px; } #loft-content .loft-materials__summary, #loft-content .loft-opening__summary { align-items: start; gap: 16px; padding: 24px 20px; } #loft-content .loft-materials__summary { row-gap: var(--space-related); } #loft-content .loft-materials__intro { font-size: 18px !important; } #loft-content .loft-materials__summary strong, #loft-content .loft-opening__summary strong { font-size: 26px !important; } #loft-content .loft-materials__meta, #loft-content .loft-opening__meta { flex: 0 0 44px; } #loft-content .loft-materials__meta i, #loft-content .loft-opening__meta i, #loft-content .loft-materials[open] .loft-materials__meta i, #loft-content .loft-opening[open] .loft-opening__meta i { flex-basis: 44px; width: 44px; height: 44px; } #loft-content .loft-materials__body { --materials-inline: 20px; padding: 0 var(--materials-inline) 32px; } #loft-content .loft-opening__body { padding: 0px 20px 32px; } #loft-content .loft-materials__tabs, #loft-content .loft-opening__tabs { gap: 0px; margin-top: 24px; } #loft-content .loft-materials__tabs button, #loft-content .loft-opening__tabs button { font-size: 19px !important; padding-block: 16px; } #loft-content .loft-material-card figcaption, #loft-content .loft-finish-library .loft-material-card figcaption { font-size: 14px !important; } #loft-content .loft-materials__safety, #loft-content .loft-opening__engineering { font-size: 16px !important; margin-top: 32px; } #loft-content .loft-opening__copy--lead { margin-top: 0px; margin-bottom: 32px; } #loft-content .loft-opening__project-grid { row-gap: 32px; } #loft-content .loft-opening__project-grid article { display: block; grid-row: auto; } #loft-content .loft-opening__project-grid p { margin-top: 12px; max-width: none; font-size: 17px !important; } #loft-content .loft-movement-grid { grid-template-rows: auto auto 168px; } #loft-content .loft-movement-card figcaption { padding: 20px; } #loft-content .loft-movement-card figcaption strong { font-size: 21px !important; } #loft-content .loft-movement-catalog { font-size: 16px !important; padding: 20px; } #loft-content .loft-layouts__head :is(h2, h3) { font-size: 38px !important; } #loft-content .loft-layouts__type button { min-height: 44px; font-size: 13px !important; } #loft-content .loft-glazing-bridge :is(h2, h3) { font-size: 32px !important; margin-top: 32px; } #loft-content .loft-opening__project > h3 { font-size: 30px !important; } #loft-content .loft-finish-library__head { gap: 16px; } #loft-content .loft-finish-library__head p { font-size: 17px !important; } #loft-content .loft-precision__samples { gap: 20px; padding: 24px 20px; } #loft-content .loft-precision__motion { position: relative; } #loft-content .loft-precision__samples > p { font-size: 15px !important; } #loft-content .loft-veneer__steps { display: block; } #loft-content .loft-veneer__step { display: block; } #loft-content .loft-veneer__step--assembly { margin-top: 48px; } #loft-content .loft-veneer__step figcaption { display: grid; gap: 16px; padding-top: 24px; } #loft-content .loft-veneer__step figcaption p { max-width: none; font-size: 18px !important; } #loft-content .loft-production__process { gap: 24px; margin-bottom: 48px; } #loft-content .loft-production__process figcaption, #loft-content .loft-production__proofs figcaption { max-width: none; font-size: 17px !important; } #loft-content .loft-production__process figcaption { padding-top: 0px; } #loft-content .loft-family__layout { display: flex; gap: 40px; } #loft-content .loft-family h2 { max-width: 15ch; } #loft-content .loft-family__layout > .loft-family__intro { color: var(--ink); font-family: var(--display); font-size: 22px !important; line-height: 1.45 !important; letter-spacing: -0.01em; border-top: 1px solid rgb(155, 134, 94); padding-top: 24px; } #loft-content .loft-family__copy { display: block; } #loft-content .loft-family__copy > p { font-size: 18px !important; line-height: 1.6 !important; } #loft-content .loft-commercial { display: block; padding: 0px; margin-top: 40px; } #loft-content .loft-commercial article, #loft-content .loft-commercial .loft-commercial__price { display: block; padding: 32px 24px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line-light); } #loft-content .loft-commercial article > strong { font-size: 38px !important; max-width: 12ch; } #loft-content .loft-commercial article > p { margin-top: 20px; font-size: 18px !important; } #loft-content .loft-commercial__price > span { margin: 0px 0px 28px; padding: 0px; font-size: 12px !important; } #loft-content .loft-commercial__price > div { display: block; padding: 0px; } #loft-content .loft-commercial__price > div + div { margin-top: 28px; padding-top: 28px; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--line-light); } #loft-content .loft-commercial__price strong { font-size: 34px !important; } #loft-content .loft-commercial__price p { margin-top: 16px; font-size: 18px !important; } #loft-content .loft-catalog__body { padding: 32px 24px; } #loft-content .loft-catalog__body > strong { font-size: 36px !important; } #loft-content .loft-catalog__body > p { margin-top: 24px; font-size: 18px !important; } #loft-content .loft-contact > .loft-shell > p:not(.loft-eyebrow) { font-size: 18px !important; line-height: 1.6 !important; } } @media (prefers-reduced-motion: reduce) { #loft-content .loft-toggle-icon { transition: none; } } #loft-content .loft-hero__rewind { background-image: var(--loft-hero-poster, none); background-size: cover; background-position: 50% 50%; } #loft-content .loft-hero__stage:not(.is-running):not(.is-complete) .loft-hero__frame:first-child { opacity: 1; } #loft-content .loft-hero__stage.is-running .loft-hero__frame:not(.is-loaded) { visibility: hidden; } #loft-content .loft-hero__collage { position: absolute; z-index: 2; inset: 0px; display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); grid-template-rows: repeat(2, minmax(0px, 1fr)); gap: 3px; overflow: hidden; background: rgb(27, 37, 33); opacity: 0; pointer-events: none; } #loft-content .loft-hero__collage img { width: 100%; height: 100%; min-height: 0px; object-fit: cover; filter: saturate(0.62) brightness(0.9); } #loft-content .loft-hero__collage::after { position: absolute; inset: 0px; background: linear-gradient(115deg, rgba(203, 193, 160, 0.08), transparent 42%), linear-gradient(90deg, rgba(15, 21, 19, 0.8), rgba(17, 23, 21, 0.76) 68%, rgba(21, 26, 22, 0.58)); content: ""; } #loft-content .loft-hero__stage.is-running .loft-hero__collage { animation: 1050ms ease 3350ms 1 normal both running loft-stopsol-reveal; } #loft-content .loft-hero__stage.is-complete .loft-hero__collage { animation: auto ease 0s 1 normal none running none; opacity: 1; } @keyframes loft-stopsol-reveal { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 700px) { #loft-content .loft-hero__collage { grid-template-columns: repeat(3, minmax(0px, 1fr)); grid-template-rows: repeat(4, minmax(0px, 1fr)); gap: 2px; } #loft-content .loft-hero__collage::after { background: linear-gradient(115deg, rgba(203, 193, 160, 0.06), transparent 50%), linear-gradient(rgba(17, 23, 21, 0.58), rgba(15, 21, 19, 0.78) 30%, rgba(15, 21, 19, 0.78) 70%, rgba(17, 23, 21, 0.58)); } } @media (prefers-reduced-motion: reduce) { #loft-content .loft-hero__rewind { display: block; } #loft-content .loft-hero__stage.is-running .loft-hero__rewind > .loft-hero__frame { animation: loft-rewind-frame var(--span) linear var(--start) both; clip-path: none; } #loft-content .loft-hero__stage.is-running .loft-hero__frame img { animation: auto ease 0s 1 normal none running none; transform: none; } #loft-content .loft-hero__stage:not(.is-complete) .loft-hero__title { opacity: 0; transform: none; clip-path: none; } #loft-content .loft-hero__stage.is-running .loft-hero__title { animation: 620ms ease 3730ms 1 normal both running loft-stopsol-reveal; } #loft-content .loft-hero__stage.is-complete .loft-hero__title { animation: auto ease 0s 1 normal none running none; opacity: 1; } } #loft-content .loft-production__evidence { display: contents; } @media (max-width: 700px) { #loft-content .loft-language__motion video, #loft-content .loft-story-media video, #loft-content .loft-veneer__step .loft-video-card video, #loft-content .loft-video-card video { object-fit: contain; object-position: 50% 50%; } #loft-content .loft-veneer__step .loft-video-card video, #loft-content .loft-production__process video, #loft-content .loft-video-card--family video { display: block; height: auto; aspect-ratio: 9 / 16; } #loft-content .loft-language__details-track figure { height: auto; aspect-ratio: 9 / 16; } #loft-content .loft-production__evidence { display: block; order: 2; } #loft-content .loft-production__evidence .loft-production__proofs img { height: auto; max-height: none; aspect-ratio: 3 / 4; } } #loft-content.loft-page { overflow: clip; } #loft-content .loft-profiles { background: var(--night); color: var(--paper); font-family: var(--body); --profile-copy: var(--copy-dark); --profile-gold: var(--gold); } #loft-content .loft-profiles *, #loft-content .loft-profiles ::before, #loft-content .loft-profiles ::after { box-sizing: border-box; } #loft-content .loft-profiles__stage { position: relative; padding: 64px max(24px, 7.2%); } #loft-content .loft-profiles__chapter { margin-bottom: 64px; } #loft-content .loft-profiles__message { margin: 0px 0px 32px; max-width: 660px; } #loft-content .loft-profiles__message h2, #loft-content .loft-profiles__message h3 { font-family: var(--display); font-size: clamp(34px, 4.6vw, 66px) !important; font-weight: 400; line-height: 1.08 !important; letter-spacing: -0.035em; margin: 24px 0px; } #loft-content .loft-profiles__eyebrow { margin: 0px; color: var(--profile-gold); font-size: 12px !important; line-height: 1.4 !important; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } #loft-content .loft-profiles__support { margin: 0px; max-width: 32em; color: var(--profile-copy); font-size: 19px !important; line-height: 1.6 !important; } #loft-content .loft-profiles__series-legend { display: flex; align-items: center; gap: 24px; margin-top: 28px; font-size: 18px !important; line-height: 1.5 !important; color: var(--profile-copy); } #loft-content .loft-profiles__series-legend > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } #loft-content .loft-profiles__series-legend i { display: inline-block; width: 10px; height: 18px; border: 1px solid rgba(245, 243, 237, 0.45); } #loft-content .loft-profiles__series-gold { background: var(--profile-gold); } #loft-content .loft-profiles__series-black { background: rgb(52, 57, 53); } #loft-content .loft-profiles__film-window { width: min(100%, 480px); margin: 0px; } #loft-content .loft-profiles__film { position: relative; margin: 0px; } #loft-content .loft-profiles__film > img { display: block; width: 100%; height: auto; max-width: none; } #loft-content .loft-profiles__film > canvas { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0; } #loft-content .loft-profiles__film.has-frame > canvas { opacity: 1; } #loft-content .loft-profiles__ambient, #loft-content .loft-profiles__shade, #loft-content .loft-profiles__near-shade, #loft-content .loft-profiles__scene-topline, #loft-content .loft-profiles__scene-bottomline, #loft-content .loft-profiles__profile-label { display: none; } #loft-content .loft-profiles.is-enhanced { height: 210svh; } #loft-content .loft-profiles.is-enhanced .loft-profiles__stage { position: sticky; top: var(--profile-host-inset,0px); height: calc(100svh - var(--profile-host-inset,0px)); padding: 0px; overflow: hidden; isolation: isolate; } #loft-content .loft-profiles.is-enhanced .loft-profiles__chapter { display: contents; margin: 0px; } #loft-content .loft-profiles.is-enhanced .loft-profiles__ambient { display: block; position: absolute; inset: 0px; z-index: -1; background: radial-gradient(ellipse at 77% 40%,#35392e 0,transparent 57%),var(--night); } #loft-content .loft-profiles.is-enhanced .loft-profiles__film-window { position: absolute; left: var(--film-x); top: var(--film-y); width: var(--film-w); height: var(--film-h); margin: 0px; overflow: hidden; } #loft-content .loft-profiles.is-enhanced .loft-profiles__film { position: absolute; inset: 0px; width: 100%; height: 100%; } #loft-content .loft-profiles.is-enhanced .loft-profiles__film > img, #loft-content .loft-profiles.is-enhanced .loft-profiles__film > canvas { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; } #loft-content .loft-profiles.is-enhanced .loft-profiles__film-gold { opacity: var(--gold-opacity,0); } #loft-content .loft-profiles.is-enhanced .loft-profiles__film-black { opacity: var(--black-opacity,0); } #loft-content .loft-profiles.is-enhanced .loft-profiles__film-pair { opacity: var(--pair-opacity,0); background: var(--night); } #loft-content .loft-profiles.is-enhanced .loft-profiles__film-pair > img { object-fit: contain; } #loft-content .loft-profiles.is-enhanced [data-detail] { transform-origin: 0px 0px; will-change: transform; } #loft-content .loft-profiles.is-enhanced .loft-profiles__profile-label { display: block; position: absolute; z-index: 2; top: 17%; transform: translateX(-50%); padding: 9px 12px; background: rgba(23, 28, 25, 0.84); font-size: 12px !important; line-height: 1.2 !important; letter-spacing: 0.08em; white-space: nowrap; opacity: var(--labels,0); border-top: 1px solid var(--profile-gold); } #loft-content .loft-profiles__profile-label-gold { left: var(--gold-x); } #loft-content .loft-profiles__profile-label-black { left: var(--black-x); border-color: var(--profile-copy); } #loft-content .loft-profiles.is-enhanced .loft-profiles__message { position: absolute; z-index: 2; pointer-events: none; margin: 0px; opacity: 0; transform: translate3d(0,var(--text-y,0px),0); left: 7.2%; top: 25%; width: var(--copy-w); max-width: none; } #loft-content .loft-profiles.is-enhanced .loft-profiles__message-open { opacity: 1; } #loft-content .loft-profiles.is-enhanced .loft-profiles__message h2, #loft-content .loft-profiles.is-enhanced .loft-profiles__message h3 { font-size: var(--scene-title-size) !important; line-height: 1.08 !important; margin: 24px 0px 28px; } #loft-content .loft-profiles.is-enhanced .loft-profiles__scene-topline { display: flex; position: absolute; z-index: 3; inset: 18px 4% auto; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px !important; line-height: 1.4 !important; letter-spacing: 0.1em; color: var(--profile-copy); } #loft-content .loft-profiles__scene-topline > a { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; padding: 0px 12px; background: rgba(23, 28, 25, 0.6); color: inherit; text-decoration: none; letter-spacing: 0px; } #loft-content .loft-profiles__scene-topline > a:focus-visible { outline: 2px solid var(--profile-gold); outline-offset: 2px; } #loft-content .loft-profiles.is-enhanced .loft-profiles__scene-bottomline { position: absolute; z-index: 3; inset: auto 4% 24px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; font-size: 11px !important; line-height: 1.4 !important; color: var(--profile-copy); } #loft-content .loft-profiles__scene-progress { grid-column: 1 / -1; height: 1px; background: rgba(245, 243, 237, 0.24); } #loft-content .loft-profiles__scene-count { display: none; } #loft-content .loft-profiles__scene-progress > i { display: block; width: 100%; height: 2px; background: var(--profile-gold); transform: scaleX(var(--progress,0)); transform-origin: left center; } #loft-content .loft-profiles.is-compact.is-enhanced { height: 210svh; } #loft-content .loft-profiles.is-compact .loft-profiles__message { left: 24px; top: auto; bottom: 15%; width: calc(100% - 48px); } #loft-content .loft-profiles.is-compact .loft-profiles__message-open { top: 12%; bottom: auto; } #loft-content .loft-profiles.is-compact .loft-profiles__message h2, #loft-content .loft-profiles.is-compact .loft-profiles__message h3 { font-size: clamp(32px, 8.4vw, 42px) !important; line-height: 1.1 !important; margin: 18px 0px 22px; } #loft-content .loft-profiles.is-compact .loft-profiles__message-open h2 { margin-top: 0px; } #loft-content .loft-profiles.is-compact .loft-profiles__message-open .loft-profiles__eyebrow { display: none; } #loft-content .loft-profiles.is-compact .loft-profiles__support { font-size: 18px !important; line-height: 1.5 !important; } #loft-content .loft-profiles.is-compact .loft-profiles__series-legend { margin-top: 20px; gap: 24px; font-size: 18px !important; } #loft-content .loft-profiles.is-compact .loft-profiles__eyebrow { font-size: 11px !important; } #loft-content .loft-profiles.is-compact .loft-profiles__scene-topline { inset: 8px 20px auto; font-size: 10px !important; } #loft-content .loft-profiles.is-compact .loft-profiles__scene-topline > a { font-size: 11px !important; padding: 0px 8px; } #loft-content .loft-profiles.is-compact .loft-profiles__scene-bottomline { inset: auto 20px 20px; font-size: 10px !important; } #loft-content .loft-profiles.is-compact .loft-profiles__scene-phase { display: none; } #loft-content .loft-profiles.is-compact .loft-profiles__shade, #loft-content .loft-profiles.is-compact .loft-profiles__near-shade { display: block; position: absolute; z-index: 1; inset: 0px; pointer-events: none; } #loft-content .loft-profiles.is-compact .loft-profiles__shade { background: linear-gradient(rgba(23, 28, 25, 0.86), rgba(23, 28, 25, 0.75) 27%, transparent 60%, rgba(23, 28, 25, 0.68)); opacity: var(--shade,1); } #loft-content .loft-profiles.is-compact .loft-profiles__near-shade { background: linear-gradient(0deg, rgba(15, 19, 16, 0.95), rgba(15, 19, 16, 0.88) 33%, transparent 70%); opacity: var(--near-shade,0); } @media (max-height: 600px) { #loft-content .loft-profiles.is-enhanced .loft-profiles__message h2, #loft-content .loft-profiles.is-enhanced .loft-profiles__message h3 { margin: 16px 0px 20px; } #loft-content .loft-profiles .loft-profiles__support { font-size: 18px !important; line-height: 1.45 !important; } } #loft-content .loft-profiles.is-short .loft-profiles__message { top: 64px; bottom: auto; } #loft-content .loft-profiles.is-short .loft-profiles__message h2, #loft-content .loft-profiles.is-short .loft-profiles__message h3 { font-size: 30px !important; line-height: 1.05 !important; margin: 10px 0px 14px; } #loft-content .loft-profiles.is-short .loft-profiles__series-legend { margin-top: 14px; } #loft-content .loft-profiles.is-short .loft-profiles__scene-bottomline { bottom: 16px; gap: 0px; } #loft-content .loft-profiles.is-short .loft-profiles__scene-bottomline > span { display: none; } #loft-content .loft-privacy { --privacy-inset: 0px; --privacy-stage-height: min(900px,calc(100svh - var(--privacy-inset))); margin-top: var(--section); position: relative; color: var(--paper,#f5f3ed); background: var(--night,#171c19); } #loft-content .loft-privacy.is-enhanced { min-height: calc(var(--privacy-stage-height) + 170svh); } #loft-content .loft-privacy__stage { position: relative; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.15fr); max-width: calc(var(--shell) + 2 * var(--gutter)); margin-inline: auto; column-gap: clamp(24px, 5vw, 80px); align-items: center; height: var(--privacy-stage-height); min-height: 480px; padding: 32px var(--gutter); } #loft-content .loft-privacy.is-enhanced .loft-privacy__stage { position: sticky; top: var(--privacy-inset); } #loft-content .loft-privacy__copy { max-width: 460px; } #loft-content .loft-privacy__eyebrow { margin: 0px 0px 28px; color: var(--gold,#b9a57b); font: 600 13px/1.4 var(--body,"Segoe UI",sans-serif); letter-spacing: 0.16em; text-transform: uppercase; } #loft-content .loft-privacy__title { margin: 0px; color: var(--paper,#f5f3ed); font: 600 clamp(34px,4.7vw,72px)/1.06 var(--display,Bahnschrift,"Segoe UI",sans-serif); letter-spacing: -0.025em; text-wrap: balance; } #loft-content .loft-privacy__phase { min-height: 3.1em; margin: 32px 0px; max-width: 25ch; color: rgb(224, 227, 217); font: 400 clamp(17px,1.55vw,22px)/1.5 var(--body,"Segoe UI",sans-serif); } #loft-content .loft-privacy__skip { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; border-bottom: 1px solid var(--gold,#b9a57b); color: inherit; font: 500 16px/1.4 var(--body,"Segoe UI",sans-serif); text-decoration: none; } #loft-content .loft-privacy__skip:focus-visible { outline: 2px solid var(--gold,#b9a57b); outline-offset: 5px; } #loft-content .loft-privacy__visual { position: relative; justify-self: center; width: min(100%,calc((var(--privacy-stage-height) - 64px)*.800285)); aspect-ratio: 1122 / 1402; overflow: hidden; margin: 0px; background: rgb(41, 39, 31); } #loft-content .loft-privacy__visual > img, #loft-content .loft-privacy__visual > picture, #loft-content .loft-privacy__visual > picture > img, #loft-content .loft-privacy__visual > canvas { display: block; width: 100%; height: 100%; object-fit: contain; } #loft-content .loft-privacy__visual > canvas { position: absolute; inset: 0px; opacity: 0; } #loft-content .loft-privacy.has-frame .loft-privacy__visual > canvas { opacity: 1; } #loft-content .loft-privacy__meter { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 3px; background: rgba(245, 243, 237, 0.16); } #loft-content .loft-privacy__meter::after { content: ""; display: block; width: 100%; height: 100%; background: var(--gold,#b9a57b); transform: scaleX(var(--privacy-progress,0)); transform-origin: left center; } #loft-content .loft-privacy__note { margin: 0px; padding: 40px clamp(24px, 5vw, 80px) 56px; max-width: 78ch; color: var(--copy,#343a31); font: 400 20px/1.6 var(--body,"Segoe UI",sans-serif); } #loft-content .loft-privacy__static-note { display: none; } #loft-content .loft-privacy.is-failed .loft-privacy__static-note { display: block; } @media (max-width: 700px) { #loft-content .loft-privacy { --privacy-stage-height: min(calc(100svh - var(--privacy-inset)),calc(125vw + 160px)); } #loft-content .loft-privacy__stage { grid-template-columns: minmax(0px, 1fr); grid-template-rows: auto minmax(0px, 1fr); gap: 20px; padding: 20px var(--gutter) 24px; min-height: 0px; } #loft-content .loft-privacy__copy { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 12px; max-width: none; } #loft-content .loft-privacy__eyebrow, #loft-content .loft-privacy__phase { display: none; } #loft-content .loft-privacy__title { font-size: clamp(26px, 6.2vw, 38px) !important; line-height: 1.06 !important; } #loft-content .loft-privacy__skip { min-height: 44px; font-size: 14px !important; gap: 8px; white-space: nowrap; } #loft-content .loft-privacy__visual { width: min(100%,calc((var(--privacy-stage-height) - 116px)*.800285)); max-height: 100%; } #loft-content .loft-privacy__note { padding: 36px 20px 48px; font-size: 18px !important; } } @media (max-height: 450px) and (min-width: 701px) { #loft-content .loft-privacy__stage { min-height: 0px; padding: 16px 28px; } #loft-content .loft-privacy__title { font-size: 32px !important; } #loft-content .loft-privacy__eyebrow { margin-bottom: 12px; } #loft-content .loft-privacy__phase { margin: 14px 0px; font-size: 16px !important; min-height: 0px; } #loft-content .loft-privacy__visual { width: min(100%,calc((var(--privacy-stage-height) - 32px)*.800285)); } } #loft-content .loft-profiles.is-enhanced.is-scroll-bypass, #loft-content .loft-privacy.is-enhanced.is-scroll-bypass { height: var(--scene-static-height); min-height: 0px; overflow-anchor: none; } #loft-content .loft-profiles.is-enhanced.is-scroll-bypass .loft-profiles__stage, #loft-content .loft-privacy.is-enhanced.is-scroll-bypass .loft-privacy__stage { position: relative; top: 0px; } #loft-content { min-width: 0; padding-top: var(--loft-host-offset, 0px); }