/* ========================================================================== /interiors/ — Turnkey design + build service page Mirrors REFERENCES/interiors/index.html. Tokens are bridged from the codebase's tokens.css to the reference's shorter aliases so the BEM blocks lift directly. ========================================================================== */ :root { --gold-grad: var(--gold-gradient); --warm: var(--bg-warm); --hero: var(--bg-hero); --serif: var(--font-display); --sans: var(--font-body); --ease: var(--ease-soft); --cinema: var(--ease-cinema); --max: var(--max-w); --gold: var(--gold-primary); --ivory-fade: rgba(244, 237, 224, 0.35); } /* Local default for the page — gold gradient. Scoped to .interiors-page so we don't trample the global header/footer typography. */ .interiors-page em { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* —— FADE-UP ENTRANCE BASE —— Default: visible. JS adds `js-on` to which then hides + animates in. If JS fails to load, content is still readable. */ .fadeup { transition: opacity .9s var(--ease), transform .9s var(--ease); } .js-on .fadeup { opacity: 0; transform: translateY(28px); } .js-on .fadeup.is-in { opacity: 1; transform: translateY(0); } .fadeup--d1 { transition-delay: .08s; } .fadeup--d2 { transition-delay: .18s; } .fadeup--d3 { transition-delay: .28s; } /* HIDE per-image tag overlays — re-enable once content team maps each photo. .cfg__preview-tag stays visible (register names are always known). */ .rcard__label, .gspread__cell-tag, .exec-row__tag { display: none; } /* ========== HERO ========== */ .int-hero { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; background: var(--hero); } .int-hero__img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: brightness(.78) saturate(1.02); animation: int-kenburns 24s ease-in-out infinite alternate; } @keyframes int-kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.5%, -1.5%); } } .int-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 13, .55) 0%, rgba(13, 13, 13, 0) 26%, rgba(13, 13, 13, 0) 60%, rgba(13, 13, 13, .92) 100%); } .int-hero__cap { position: absolute; left: var(--gutter); bottom: var(--gutter); max-width: 780px; } .int-hero__cap-eye { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .int-hero__cap-eye::before { content: ""; width: 32px; height: 1px; background: var(--gold-line); } .int-hero__cap-title { font-family: var(--serif); font-size: clamp(40px, 6vw, 90px); line-height: .96; font-weight: 400; letter-spacing: -.015em; color: var(--ivory); } .int-hero__cap-title em { font-style: italic; } .int-hero__scroll { position: absolute; right: var(--gutter); bottom: var(--gutter); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ivory-fade); display: flex; align-items: center; gap: 14px; } .int-hero__scroll::after { content: ""; width: 40px; height: 1px; background: var(--gold-faint); animation: int-scrollNudge 2.6s ease-in-out infinite; } @keyframes int-scrollNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } } /* ========== PROPOSITION ========== */ .prop { padding: clamp(80px, 11vw, 160px) var(--gutter); max-width: var(--max); margin: 0 auto; text-align: center; } .prop__eye { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 18px; } .prop__eye::before, .prop__eye::after { content: ""; flex: 0 0 50px; height: 1px; background: var(--gold-line); } .prop__title { font-family: var(--serif); font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.01em; font-weight: 400; margin-bottom: 32px; max-width: 880px; margin-inline: auto; } .prop__title em { font-style: italic; } .prop__body { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; color: var(--ivory-dim); max-width: 680px; margin: 0 auto; } /* ========== CONFIGURATOR ========== */ .cfg { padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--warm); border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint); } .cfg__inner { max-width: var(--max); margin: 0 auto; } .cfg__head { margin-bottom: clamp(48px, 6vw, 80px); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .cfg__head-l { max-width: 560px; } .cfg__eye { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .cfg__eye::before { content: ""; width: 32px; height: 1px; background: var(--gold-line); } .cfg__title { font-family: var(--serif); font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -.01em; font-weight: 400; } .cfg__title em { font-style: italic; } .cfg__sub { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ivory-fade); max-width: 300px; text-align: right; } @media (max-width: 780px) { .cfg__sub { text-align: left; } } .cfg__container { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(40px, 4vw, 72px); align-items: stretch; } @media (max-width: 880px) { .cfg__container { grid-template-columns: 1fr; gap: 32px; } } .cfg__preview { position: relative; aspect-ratio: 4/3; background: #1a1612; border: 1px solid var(--gold-faint); overflow: hidden; } .cfg__preview-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--cinema); } .cfg__preview-img.is-active { opacity: 1; } .cfg__preview-tag { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ivory); background: rgba(13, 13, 13, .55); padding: 9px 14px; border: 1px solid var(--gold-faint); backdrop-filter: blur(8px); z-index: 5; } .cfg__preview-tag em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .04em; font-size: 14px; color: var(--gold-mid); background: none; -webkit-background-clip: initial; background-clip: initial; } .cfg__panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; } .cfg__tabs { display: flex; flex-direction: column; border-top: 1px solid var(--gold-faint); } .cfg__tab { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--gold-faint); color: var(--ivory-dim); cursor: pointer; text-align: left; transition: color .3s var(--ease); position: relative; } .cfg__tab-num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--gold-mid); min-width: 28px; } .cfg__tab-name { font-family: var(--serif); font-size: 18px; flex: 1; line-height: 1.2; transition: font-size .35s var(--ease); } .cfg__tab-name em { font-style: italic; } .cfg__tab-arrow { font-family: var(--serif); font-size: 18px; color: var(--gold-mid); opacity: 0; transform: translateX(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .cfg__tab:hover { color: var(--ivory); } .cfg__tab.is-active { color: var(--gold); } .cfg__tab.is-active .cfg__tab-name { font-size: 24px; } .cfg__tab.is-active .cfg__tab-arrow { opacity: 1; transform: translateX(0); } .cfg__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold-grad); transform-origin: left; animation: cfgFill 6s linear forwards; } @keyframes cfgFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .cfg__content { margin-top: 32px; min-height: 200px; position: relative; } .cfg__body { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s var(--cinema), visibility 0s linear .55s; } .cfg__body.is-active { opacity: 1; visibility: visible; transition: opacity .55s var(--cinema), visibility 0s linear 0s; } .cfg__body-desc { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.65; color: var(--ivory-dim); margin-bottom: 22px; } .cfg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .cfg__chip { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-dim); padding: 7px 11px; border: 1px solid var(--gold-faint); background: rgba(244, 237, 224, .02); } .cfg__chip em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .02em; color: var(--gold-mid); font-size: 13px; } .cfg__sample-link { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); border-bottom: 1px solid var(--gold-faint); padding-bottom: 6px; transition: color .3s var(--ease), border-color .3s var(--ease); } .cfg__sample-link em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .02em; color: var(--gold-mid); font-size: 14px; } .cfg__sample-link:hover { color: var(--gold); border-color: var(--gold); } /* ========== RENDERS GALLERY ========== */ .rndr { padding: clamp(80px, 10vw, 140px) var(--gutter); } .rndr__inner { max-width: var(--max); margin: 0 auto; } .rndr__head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 680px; } .rndr__eye { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .rndr__eye::before { content: ""; width: 32px; height: 1px; background: var(--gold-line); } .rndr__title { font-family: var(--serif); font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -.01em; font-weight: 400; } .rndr__title em { font-style: italic; } .rndr__sub { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--ivory-dim); max-width: 520px; margin-top: 18px; } .rndr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); } @media (max-width: 560px) { .rndr__grid { grid-template-columns: 1fr; gap: 14px; } } .rcard { position: relative; aspect-ratio: 16/9; /* uniform across all cards now — no more orientation chaos */ overflow: hidden; background: #1a1612; border: 1px solid var(--gold-faint); } /* iso = full-width hero on top; 16:9 keeps it aligned with the cells beneath */ .rcard--hero { grid-column: 1 / -1; } .rcard--tall { /* Legacy modifier kept for backwards-compat, now neutral */ grid-column: 1 / -1; aspect-ratio: 16/9; } .rcard img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.92); transition: filter .5s var(--ease), transform 1.2s var(--cinema); } .rcard:hover img { filter: brightness(1.02); transform: scale(1.04); } .rcard__label { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--ivory); background: rgba(13, 13, 13, .55); padding: 7px 11px; border: 1px solid var(--gold-faint); backdrop-filter: blur(8px); } .rcard__label em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .04em; color: var(--gold-mid); font-size: 13px; } /* ========== WALKTHROUGHS ========== */ .walks { padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--warm); border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint); } .walks__inner { max-width: var(--max); margin: 0 auto; } .walks__head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 680px; } .walks__eye { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .walks__eye::before { content: ""; width: 32px; height: 1px; background: var(--gold-line); } .walks__title { font-family: var(--serif); font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -.01em; font-weight: 400; } .walks__title em { font-style: italic; } .walks__sub { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--ivory-dim); max-width: 520px; margin-top: 18px; } .walks__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.5vw, 32px); } /* When the section opts into 3-up (.walks--three) — render 1 column with full-width 16:9 cards */ .walks--three .walks__grid { grid-template-columns: 1fr; gap: clamp(28px, 3vw, 44px); max-width: 1100px; margin: 0 auto; } @media (max-width: 880px) { .walks__grid { grid-template-columns: 1fr; gap: 18px; } } .wcard { position: relative; cursor: pointer; } /* Linked card variant — whole card is an to the project page; play button in the bottom-right corner triggers inline YT playback (handled in interiors.js) */ .wcard--linked { display: block; text-decoration: none; color: inherit; transition: transform 320ms var(--ease-soft); } .wcard--linked:hover { transform: translateY(-2px); } .wcard__play-corner { position: absolute; bottom: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; background: rgba(13, 13, 13, 0.78); border: 1px solid var(--gold-line); color: var(--ivory); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 280ms var(--ease-soft), color 280ms var(--ease-soft), border-color 280ms var(--ease-soft); z-index: 2; } .wcard__play-corner:hover { background: var(--gold-primary); color: var(--bg-primary); border-color: var(--gold-primary); } .wcard__play-corner-icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; margin-left: 1px; } @media (max-width: 560px) { .wcard__play-corner-text { display: none; } .wcard__play-corner { padding: 10px; bottom: 10px; right: 10px; } } .wcard__frame { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; border: 1px solid var(--gold-faint); margin-bottom: 14px; } .wcard__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.95); transition: filter .5s var(--ease); } .wcard:hover .wcard__thumb { filter: brightness(.78) saturate(1); } .wcard__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(13, 13, 13, .5); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); } .wcard__play::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--gold); margin-left: 5px; } .wcard.is-playing .wcard__thumb, .wcard.is-playing .wcard__play { opacity: 0; pointer-events: none; transition: opacity .35s ease; } .wcard__loc { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 6px; } .wcard__name { font-family: var(--serif); font-size: 20px; line-height: 1.16; } .wcard__name em { font-style: italic; } .wcard__meta { font-size: 13px; color: var(--ivory-fade); font-style: italic; font-family: var(--serif); margin-top: 4px; } /* ========== PROJECT GALLERY SPREADS ========== */ .gals { padding: clamp(80px, 10vw, 140px) var(--gutter); } .gals__inner { max-width: var(--max); margin: 0 auto; } .gals__head { margin-bottom: clamp(48px, 6vw, 80px); max-width: 680px; } .gals__eye { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .gals__eye::before { content: ""; width: 32px; height: 1px; background: var(--gold-line); } .gals__title { font-family: var(--serif); font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -.01em; font-weight: 400; } .gals__title em { font-style: italic; } .gals__sub { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--ivory-dim); max-width: 520px; margin-top: 18px; } .gspread { margin-bottom: clamp(80px, 10vw, 140px); } .gspread:last-child { margin-bottom: 0; } .gspread__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(28px, 3vw, 40px); gap: 24px; flex-wrap: wrap; } .gspread__head-l { max-width: 560px; } .gspread__loc { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 8px; } .gspread__name { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 42px); line-height: 1.06; letter-spacing: -.01em; font-weight: 400; margin-bottom: 8px; } .gspread__name em { font-style: italic; } .gspread__meta { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ivory-fade); } .gspread__cta { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); border-bottom: 1px solid var(--gold-faint); padding-bottom: 6px; transition: color .3s var(--ease), border-color .3s var(--ease); white-space: nowrap; } .gspread__cta em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .02em; color: var(--gold-mid); font-size: 13px; } .gspread__cta:hover { color: var(--gold); border-color: var(--gold); } /* Asymmetric grid — 5 photos */ .gspread__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); height: clamp(420px, 55vw, 640px); grid-template-areas: "big small1 small2" "big small3 small4"; } .gspread--flip .gspread__grid { grid-template-areas: "small1 small2 big" "small3 small4 big"; grid-template-columns: 1fr 1fr 1.4fr; } @media (max-width: 880px) { .gspread__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "big big" "small1 small2" "small3 small4"; height: auto; gap: 10px; } .gspread--flip .gspread__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "big big" "small1 small2" "small3 small4"; } .gspread__cell { aspect-ratio: 4/3; } .gspread__cell--big { aspect-ratio: 4/3; } } .gspread__cell { position: relative; overflow: hidden; background: #1a1612; border: 1px solid var(--gold-faint); cursor: pointer; transition: border-color .35s var(--ease); } .gspread__cell:hover { border-color: var(--gold-line); } .gspread__cell--big { grid-area: big; } .gspread__cell:nth-child(2) { grid-area: small1; } .gspread__cell:nth-child(3) { grid-area: small2; } .gspread__cell:nth-child(4) { grid-area: small3; } .gspread__cell:nth-child(5) { grid-area: small4; } .gspread__cell img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.92); transition: filter .5s var(--ease), transform 1.2s var(--cinema); } .gspread__cell:hover img { filter: brightness(1.05) saturate(1.05); transform: scale(1.04); } .gspread__cell-tag { position: absolute; left: 12px; bottom: 12px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-mid); background: rgba(13, 13, 13, .55); padding: 6px 10px; border: 1px solid var(--gold-faint); backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .gspread__cell:hover .gspread__cell-tag { opacity: 1; transform: translateY(0); } .gspread__cell--big .gspread__cell-tag { opacity: 1; transform: translateY(0); background: rgba(13, 13, 13, .6); left: 16px; bottom: 16px; } /* ========== PROCESS ========== */ .iproc { padding: clamp(80px, 10vw, 140px) var(--gutter); } .iproc__inner { max-width: var(--max); margin: 0 auto; } .iproc__head { margin-bottom: clamp(48px, 6vw, 80px); max-width: 680px; } .iproc__eye { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .iproc__eye::before { content: ""; width: 32px; height: 1px; background: var(--gold-line); } .iproc__title { font-family: var(--serif); font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -.01em; font-weight: 400; } .iproc__title em { font-style: italic; } .iproc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 2.5vw, 40px); } @media (max-width: 880px) { .iproc__grid { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 560px) { .iproc__grid { grid-template-columns: 1fr; } } .istep { padding: 32px clamp(20px, 2vw, 32px); border: 1px solid var(--gold-faint); background: rgba(13, 13, 13, .4); transition: border-color .35s var(--ease), background .35s var(--ease); } .istep:hover { border-color: var(--gold-line); background: rgba(13, 13, 13, .6); } .istep__num { font-family: var(--serif); font-size: clamp(40px, 4vw, 56px); font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 18px; } .istep__title { font-family: var(--serif); font-size: 22px; line-height: 1.16; font-weight: 400; margin-bottom: 14px; } .istep__title em { font-style: italic; } .istep__body { font-family: var(--serif); font-size: 14px; line-height: 1.68; color: var(--ivory-dim); } /* ========== EXECUTION (image-text editorial) ========== */ .exec { padding: 0 var(--gutter) clamp(80px, 10vw, 140px); } .exec__inner { max-width: var(--max); margin: 0 auto; } .exec__head { padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--gold-faint); text-align: center; } .exec__eye { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; } .exec__title { font-family: var(--serif); font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -.01em; font-weight: 400; max-width: 680px; margin: 0 auto; } .exec__title em { font-style: italic; } .exec__list { display: flex; flex-direction: column; gap: clamp(60px, 8vw, 100px); } .exec-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; } @media (max-width: 880px) { .exec-row { grid-template-columns: 1fr; gap: 24px; } } .exec-row:nth-child(even) .exec-row__vis { order: 2; } .exec-row:nth-child(even) .exec-row__copy { order: 1; } @media (max-width: 880px) { .exec-row:nth-child(even) .exec-row__vis, .exec-row:nth-child(even) .exec-row__copy { order: initial; } } .exec-row__vis { position: relative; aspect-ratio: 4/3; background: #1a1612; border: 1px solid var(--gold-faint); overflow: hidden; } .exec-row__vis img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.92); transition: filter .5s var(--ease), transform 1.2s var(--cinema); } .exec-row:hover .exec-row__vis img { filter: brightness(1.02); transform: scale(1.025); } .exec-row__tag { position: absolute; left: 14px; bottom: 14px; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-mid); background: rgba(13, 13, 13, .55); padding: 7px 11px; border: 1px solid var(--gold-faint); backdrop-filter: blur(8px); } .exec-row__copy { padding: clamp(8px, 2vw, 28px) 0; } .exec-row__num { font-family: var(--serif); font-size: clamp(36px, 5vw, 64px); font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 14px; } .exec-row__title { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); line-height: 1.08; font-weight: 400; margin-bottom: 18px; } .exec-row__title em { font-style: italic; } .exec-row__body { font-family: var(--serif); font-size: 17px; line-height: 1.78; color: var(--ivory); max-width: 520px; } /* ========== VIRTUELLE BANNER ========== */ .vbanner { padding: clamp(40px, 6vw, 80px) var(--gutter); border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint); background: var(--bg-primary); } .vbanner__inner { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .vbanner__copy { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--ivory-dim); } .vbanner__copy em { font-style: italic; color: var(--gold-mid); background: none; -webkit-background-clip: initial; background-clip: initial; } .vbanner__cta { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ivory); padding: 14px 26px; border: 1px solid var(--gold); transition: background .35s var(--ease), color .35s var(--ease); } .vbanner__cta:hover { background: var(--gold); color: #0D0D0D; } .vbanner__cta-arrow { font-family: var(--serif); font-style: italic; font-size: 16px; } /* ========== PORTFOLIO (denser) ========== */ .iport { padding: clamp(80px, 10vw, 140px) var(--gutter); } .iport__inner { max-width: var(--max); margin: 0 auto; } .iport__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(40px, 5vw, 72px); gap: 32px; flex-wrap: wrap; } .iport__head-l { max-width: 560px; } .iport__eye { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .iport__eye::before { content: ""; width: 32px; height: 1px; background: var(--gold-line); } .iport__title { font-family: var(--serif); font-size: clamp(30px, 3.8vw, 46px); line-height: 1.04; letter-spacing: -.01em; font-weight: 400; } .iport__title em { font-style: italic; } .iport__link { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory-dim); border-bottom: 1px solid var(--gold-faint); padding-bottom: 4px; transition: color .3s var(--ease), border-color .3s var(--ease); } .iport__link:hover { color: var(--gold); border-color: var(--gold); } .iport__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); } @media (max-width: 880px) { .iport__grid { grid-template-columns: 1fr 1fr; gap: 14px; } } @media (max-width: 560px) { .iport__grid { grid-template-columns: 1fr; } } .icard { display: block; cursor: pointer; } .icard__img { aspect-ratio: 4/5; background: #1a1612; overflow: hidden; margin-bottom: 18px; border: 1px solid transparent; transition: border-color .35s var(--ease); } .icard__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); transition: filter .5s var(--ease), transform 1.2s var(--cinema); } .icard:hover .icard__img { border-color: var(--gold-faint); } .icard:hover .icard__img img { filter: brightness(1) saturate(1.04); transform: scale(1.04); } .icard__loc { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 8px; } .icard__name { font-family: var(--serif); font-size: 22px; line-height: 1.16; margin-bottom: 6px; } .icard__name em { font-style: italic; } .icard__meta { font-size: 13px; color: var(--ivory-fade); font-style: italic; font-family: var(--serif); } /* ========== PRICING TIERS ========== */ .tiers { padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--warm); border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint); } .tiers__inner { max-width: var(--max); margin: 0 auto; } .tiers__head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); } .tiers__eye { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 20px; } .tiers__title { font-family: var(--serif); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -.01em; font-weight: 400; margin-bottom: 18px; } .tiers__title em { font-style: italic; } .tiers__sub { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--ivory-dim); max-width: 620px; margin: 0 auto; } .tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); align-items: stretch; } @media (max-width: 880px) { .tiers__grid { grid-template-columns: 1fr; gap: 24px; } } .tier { display: flex; flex-direction: column; padding: clamp(36px, 4vw, 56px); border: 1px solid var(--gold-faint); background: rgba(13, 13, 13, .5); position: relative; transition: border-color .35s var(--ease), transform .35s var(--ease); } .tier:hover { border-color: var(--gold-line); transform: translateY(-4px); } .tier--feat { border-color: var(--gold); } .tier--feat::before { content: "Most chosen"; position: absolute; top: -12px; right: 24px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); background: var(--warm); padding: 0 12px; } .tier__lab { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; } .tier__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .tier__price-num { font-family: var(--serif); font-size: clamp(40px, 5vw, 64px); font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; letter-spacing: -.01em; } .tier__price-unit { font-size: 13px; color: var(--ivory-fade); font-family: var(--serif); font-style: italic; } .tier__sub { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory-fade); margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--gold-faint); } .tier__incl { display: flex; flex-direction: column; gap: 14px; font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ivory); margin-bottom: 32px; flex: 1; padding: 0; } .tier__incl li { display: flex; gap: 10px; list-style: none; padding-left: 0; } .tier__incl li::before { content: "·"; color: var(--gold-mid); font-weight: 700; flex: 0 0 auto; } .tier__incl em { font-style: italic; color: var(--gold-mid); background: none; -webkit-background-clip: initial; background-clip: initial; } .tier__best { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory-fade); margin-bottom: 24px; padding-top: 18px; border-top: 1px solid var(--gold-faint); font-feature-settings: normal; } .tier__best em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .02em; color: var(--ivory-dim); font-size: 13px; display: block; margin-top: 6px; background: none; -webkit-background-clip: initial; background-clip: initial; } .tier__cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); border: 1px solid var(--gold-faint); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); align-self: flex-start; } .tier__cta:hover { background: var(--gold); color: #0D0D0D; border-color: var(--gold); } .tier__cta-arrow { font-family: var(--serif); font-style: italic; font-size: 16px; } /* ========== MATERIALS MARQUEE ========== */ .imats { padding: clamp(80px, 10vw, 140px) 0; overflow: hidden; } .imats__head { max-width: var(--max); margin: 0 auto clamp(40px, 5vw, 72px); padding: 0 var(--gutter); text-align: center; } .imats__eye { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; } .imats__title { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06; letter-spacing: -.005em; font-weight: 400; max-width: 680px; margin: 0 auto; } .imats__title em { font-style: italic; } .marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .marquee__track { display: flex; gap: 18px; animation: int-marqueeScroll 70s linear infinite; width: max-content; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes int-marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .imat { flex: 0 0 auto; width: clamp(220px, 28vw, 320px); } .imat__img { aspect-ratio: 1/1; overflow: hidden; background: #1a1612; border: 1px solid var(--gold-faint); margin-bottom: 14px; } .imat__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85) saturate(.95); transition: filter .5s var(--ease), transform 1.2s var(--cinema); } .imat:hover .imat__img img { filter: brightness(1) saturate(1.05); transform: scale(1.05); } .imat__cat { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 6px; } .imat__name { font-family: var(--serif); font-size: 18px; line-height: 1.16; margin-bottom: 6px; } .imat__name em { font-style: italic; } .imat__use { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ivory-fade); line-height: 1.5; } /* ========== LEAD FORM ========== */ .lead { padding: clamp(80px, 10vw, 140px) var(--gutter); border-top: 1px solid var(--gold-faint); background: var(--warm); } .lead__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 5vw, 90px); align-items: start; } @media (max-width: 880px) { .lead__inner { grid-template-columns: 1fr; gap: 48px; } } .lead__head { margin-bottom: clamp(40px, 5vw, 60px); } .lead__eye { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .lead__eye::before { content: ""; width: 32px; height: 1px; background: var(--gold-line); } .lead__title { font-family: var(--serif); font-size: clamp(32px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -.01em; font-weight: 400; margin-bottom: 18px; } .lead__title em { font-style: italic; } .lead__sub { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--ivory-dim); max-width: 520px; } .lform { display: flex; flex-direction: column; gap: 24px; } .lform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 560px) { .lform__row { grid-template-columns: 1fr; } } .lform__field { display: flex; flex-direction: column; gap: 8px; } .lform__label { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-mid); font-weight: 400; } .lform__input, .lform__select, .lform__textarea { background: transparent; border: 0; border-bottom: 1px solid var(--gold-faint); color: var(--ivory); font-family: var(--serif); font-size: 17px; padding: 8px 0 14px; outline: none; transition: border-color .3s var(--ease); } .lform__input:focus, .lform__select:focus, .lform__textarea:focus { border-bottom-color: var(--gold); } .lform__select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-mid) 50%), linear-gradient(135deg, var(--gold-mid) 50%, transparent 50%); background-position: calc(100% - 14px) calc(50% - 4px), calc(100% - 8px) calc(50% - 4px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; } .lform__select option { background: var(--warm); color: var(--ivory); } .lform__textarea { min-height: 100px; resize: vertical; font-family: var(--serif); } .lform__hint { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ivory-fade); } .lform__btn { display: inline-flex; align-items: center; gap: 14px; padding: 18px 32px; border: 1px solid var(--gold); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); background: transparent; cursor: pointer; align-self: flex-start; transition: background .35s var(--ease), color .35s var(--ease); position: relative; overflow: hidden; } .lform__btn::before { content: ""; position: absolute; inset: 0; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--cinema); z-index: -1; } .lform__btn:hover::before { transform: scaleX(1); } .lform__btn:hover { color: #0D0D0D; } .lform__btn:disabled { opacity: 0.6; cursor: progress; } .lform__btn-arrow { font-family: var(--serif); font-style: italic; font-size: 16px; } /* Form success / failure states (mirrors homepage Section 06 contact form) */ .lform__success, .lform__failure { display: none; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); color: var(--ivory); padding: 32px 0; border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint); } .lform.is-success .lform__success { display: block; } .lform.is-success > *:not(.lform__success) { display: none; } .lform.is-failed .lform__failure { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .lform__failure-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: var(--gold); color: var(--bg-primary); border: 1px solid var(--gold); font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } /* Field error highlight */ .lform__field--error .lform__input, .lform__field--error .lform__select, .lform__field--error .lform__textarea { border-bottom-color: #d65a4f; } .lside { padding: clamp(28px, 3vw, 40px); border: 1px solid var(--gold-faint); background: rgba(13, 13, 13, .5); } .lside__h { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 14px; } .lside__name { font-family: var(--serif); font-size: 24px; line-height: 1.16; margin-bottom: 18px; } .lside__name em { font-style: italic; } .lside__addr { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.6; color: var(--ivory-dim); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--gold-faint); } .lside__row { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; } .lside__row a { font-family: var(--serif); font-size: 16px; color: var(--ivory); transition: color .3s var(--ease); } .lside__row a:hover { color: var(--gold); } .lside__wa { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--gold); font-size: 11px !important; letter-spacing: .22em; text-transform: uppercase; color: var(--gold) !important; font-family: var(--sans) !important; transition: background .35s var(--ease), color .35s var(--ease); } .lside__wa:hover { background: var(--gold); color: #0D0D0D !important; } .lside__hours { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ivory-fade); padding-top: 24px; border-top: 1px solid var(--gold-faint); } /* ========== PRICING CONFIGURATOR ========== */ .tcfg{padding:clamp(80px,10vw,140px) var(--gutter);background:var(--warm);border-top:1px solid var(--gold-faint);border-bottom:1px solid var(--gold-faint)} .tcfg__inner{max-width:var(--max);margin:0 auto} .tcfg__head{text-align:center;margin-bottom:clamp(48px,6vw,80px)} .tcfg__eye{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-mid);margin-bottom:20px} .tcfg__title{font-family:var(--serif);font-size:clamp(34px,4.4vw,54px);line-height:1.04;letter-spacing:-.01em;font-weight:400;margin-bottom:18px} .tcfg__title em{font-style:italic} .tcfg__sub{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.6;color:var(--ivory-dim);max-width:620px;margin:0 auto} .tcfg__container{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,4vw,72px);align-items:start} @media (max-width:880px){.tcfg__container{grid-template-columns:1fr;gap:32px}} .tcfg__left{display:flex;flex-direction:column} .tcfg__tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--gold-faint);background:rgba(13,13,13,.5)} .tcfg__tab{padding:18px 14px;background:transparent;border:0;border-right:1px solid var(--gold-faint);color:var(--ivory-dim);cursor:pointer;text-align:left;transition:all .35s var(--ease);display:flex;flex-direction:column;gap:6px;position:relative;font-family:inherit} .tcfg__tab:last-child{border-right:0} .tcfg__tab:hover{background:rgba(244,237,224,.03);color:var(--ivory)} .tcfg__tab.is-active{background:rgba(255,215,0,.06);color:var(--gold)} .tcfg__tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold-grad)} .tcfg__tab-num{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--gold-mid)} .tcfg__tab-name{font-family:var(--serif);font-size:18px;line-height:1.16} .tcfg__tab-price{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-fade);font-feature-settings:"tnum"} .tcfg__tab.is-active .tcfg__tab-price{color:var(--gold-mid)} .tcfg__panels{position:relative;margin-top:24px;min-height:340px} .tcfg__panel{padding:32px;border:1px solid var(--gold-faint);background:rgba(13,13,13,.4);position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s var(--cinema),visibility 0s linear .55s} .tcfg__panel.is-active{opacity:1;visibility:visible;transition:opacity .55s var(--cinema),visibility 0s linear 0s} .tcfg__panel-meta{display:flex;align-items:baseline;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--gold-faint);flex-wrap:wrap} .tcfg__panel-rate{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);font-style:italic;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;letter-spacing:-.01em;font-feature-settings:"tnum"} .tcfg__panel-unit{font-size:12px;color:var(--ivory-fade);font-family:var(--serif);font-style:italic} .tcfg__panel-time{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-mid);margin-left:auto} .tcfg__incl{display:flex;flex-direction:column;gap:12px;font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ivory);margin-bottom:24px;padding-left:0;list-style:none} .tcfg__incl li{display:flex;gap:10px} .tcfg__incl li::before{content:"·";color:var(--gold-mid);font-weight:700;flex:0 0 auto} .tcfg__incl em{font-style:italic;color:var(--gold-mid)} .tcfg__best{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-fade);padding-top:18px;border-top:1px solid var(--gold-faint)} .tcfg__right{padding:32px;border:1px solid var(--gold-faint);background:rgba(13,13,13,.55);position:sticky;top:24px} @media (max-width:880px){.tcfg__right{position:static}} .tcfg__calc-lab{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-mid);margin-bottom:14px} .tcfg__calc-input-row{display:flex;flex-direction:column;gap:14px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--gold-faint)} .tcfg__calc-input-num{display:flex;align-items:baseline;gap:10px} .tcfg__calc-input-num input{flex:1;background:transparent;border:0;border-bottom:1px solid var(--gold-faint);color:var(--ivory);font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);padding:8px 0;outline:none;font-feature-settings:"tnum";font-style:italic} .tcfg__calc-input-num input:focus{border-bottom-color:var(--gold)} .tcfg__calc-input-num input::-webkit-outer-spin-button, .tcfg__calc-input-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .tcfg__calc-input-num input[type=number]{-moz-appearance:textfield} .tcfg__calc-input-unit{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-fade)} .tcfg__calc-input-row input[type=range]{width:100%;-webkit-appearance:none;background:transparent;height:24px;cursor:pointer} .tcfg__calc-input-row input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--gold-faint);border-radius:0} .tcfg__calc-input-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--gold);border-radius:50%;margin-top:-7px} .tcfg__calc-input-row input[type=range]::-moz-range-track{height:1px;background:var(--gold-faint)} .tcfg__calc-input-row input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--gold);border-radius:50%;border:0;cursor:pointer} .tcfg__total{margin-bottom:28px} .tcfg__total-lab{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory-fade);margin-bottom:10px} .tcfg__total-num{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-family:var(--serif);font-size:clamp(24px,3.4vw,38px);line-height:1.1;color:transparent;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;font-style:italic;letter-spacing:-.01em;font-feature-settings:"tnum"} .tcfg__total-sep{font-size:.7em;color:transparent;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text} .tcfg__total-tier{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ivory-dim)} .tcfg__cta{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border:1px solid var(--gold);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);transition:all .35s var(--ease);margin-bottom:18px;text-decoration:none} .tcfg__cta:hover{background:var(--gold);color:#0D0D0D} .tcfg__cta-arrow{font-family:var(--serif);font-style:italic;font-size:16px} .tcfg__hint{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--ivory-fade);line-height:1.5} /* ============================================================ MOBILE FIX (≤880px) — Pricing configurator panels Bug: panels are position:absolute inset:0 with min-height:340px on parent. On narrow viewports the content overflows and adjacent panels bleed through, overlapping with the calculator below. Fix: stack panels statically and toggle display via .is-active. ============================================================ */ @media (max-width: 880px) { .tcfg__panels { min-height: 0; margin-top: 18px; } .tcfg__panel { position: static; inset: auto; opacity: 1; visibility: visible; display: none; padding: 24px 22px; transition: none; } .tcfg__panel.is-active { display: block; } /* Tabs: 3 columns squeeze too tight on narrow screens — let them wrap if needed */ .tcfg__tabs { grid-template-columns: repeat(3, 1fr); } .tcfg__tab { padding: 14px 10px; gap: 4px; } .tcfg__tab-name { font-size: 16px; } .tcfg__tab-num { font-size: 12px; } .tcfg__tab-price { font-size: 9px; letter-spacing: .14em; } /* Calculator: reduce padding on mobile */ .tcfg__right { padding: 24px 22px; } .tcfg__calc-input-row { margin-bottom: 24px; padding-bottom: 20px; } } /* ============================================================ MOBILE FIX (≤780px) — Interiors hero Same pattern as project pages and the C&C hero: aspect 4/5 with object-fit:cover so the interior render fills the frame at a manageable mobile size, with the title overlaid bottom-left. ============================================================ */ @media (max-width: 780px) { .int-hero { height: auto; aspect-ratio: 4 / 5; max-height: 78vh; min-height: 0; } .int-hero__img { inset: 0; width: 100%; height: 100%; object-fit: cover; /* Drop the kenburns scale on mobile — keeps the framing predictable */ animation: none; } .int-hero__cap { bottom: 22px; left: 20px; right: 20px; max-width: none; } .int-hero__cap-eye { font-size: 10px; letter-spacing: .26em; margin-bottom: 10px; } .int-hero__cap-eye::before { width: 22px; } .int-hero__cap-title { font-size: clamp(32px, 8.4vw, 46px); line-height: 1.02; } .int-hero__scroll { display: none; } }