*, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); } img { display: block; max-width: 100%; height: auto; } .photo-grade { filter: var(--photo-grade); } a { color: inherit; text-decoration: none; } a:hover, a:focus-visible { color: var(--color-accent-deep); } button, input, textarea, select { font: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 600; line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; } h1 { font-size: clamp(2.9rem, 5vw, 5.1rem); } h2 { font-size: clamp(1.9rem, 2.9vw, 3rem); } h3 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); } p, ul, ol { margin: 0; } ul, ol { padding-left: 1.2rem; } .container { width: 100%; padding-inline: var(--gutter); margin-inline: auto; } .section { padding-block: var(--space-8); } .section--compact { padding-block: var(--space-7); } .section--surface { background: var(--color-surface); } .section--framed { position: relative; } .section--framed::before { content: ""; position: absolute; inset: 1.4rem; border: 1px solid rgba(23, 26, 24, 0.07); border-radius: var(--radius-lg); pointer-events: none; } .flow > * + * { margin-top: var(--space-4); } .flow-sm > * + * { margin-top: var(--space-3); } .eyebrow { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2; color: var(--color-accent-text); } .eyebrow--chip { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 0.5rem; margin: 0; padding: 0.38rem 0.76rem; border: 1px solid var(--color-line); font-size: 0.76rem; letter-spacing: 0.1em; } .eyebrow__marker { width: 0.34rem; height: 0.34rem; transform: rotate(45deg); background: var(--color-accent); flex: none; } .dual-offer__intro, .lead-project__intro, .process-steps__intro, .home-projects__header, .closing-cta__lead, .about-hero__head, .about-positioning__intro, .contact-hero__head, .contact-routes__intro, .contact-form__details, .furniture-hero__head, .furniture-categories__header, .furniture-proof__intro, .office-hero__head, .office-split__intro, .office-process__intro, .office-why__copy, .office-projects__header, .office-cta__lead, .project-hero__head, .project-story__block, .project-scope__intro, .project-notes__intro, .project-gallery__intro, .project-next__head, .projects-hero { border-top: 1px solid var(--hairline-color, var(--color-line)); padding-top: clamp(1.4rem, 2.5vw, 2rem); } .about-band > .container, .section--office-stats > .container, .section--stats > .container { border-top: 1px solid var(--hairline-color, var(--color-line)); padding-top: clamp(1.4rem, 2.5vw, 2rem); } .section-rule { height: 1px; width: 100%; background: var(--color-line); border: 0; } .lead { max-width: 52rem; font-size: var(--type-body-lg); line-height: 1.66; color: var(--color-muted); } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { top: 1rem; left: 1rem; width: auto; height: auto; padding: 0.75rem 1rem; margin: 0; clip: auto; background: var(--color-dark); color: #fff; z-index: 1000; } @media (max-width: 780px) { .section { padding-block: var(--space-7); } .section--compact { padding-block: var(--space-6); } } .button, button, input[type="submit"] { --btn-text: var(--color-ink); --btn-border: var(--color-ink); --btn-fill: var(--color-ink); --btn-fill-text: var(--color-warm-white); position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem); padding: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem) clamp(0.75rem, 0.7rem + 0.25vw, 1rem); overflow: hidden; border: 1px solid var(--btn-border); border-radius: 0; background-color: transparent; font-family: var(--font-body); font-weight: 500; font-size: clamp(0.8125rem, 0.8rem + 0.0625vw, 0.875rem); letter-spacing: -0.025rem; text-transform: uppercase; line-height: 1.2; color: var(--btn-text); cursor: pointer; isolation: isolate; transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .button, .button--outline, .button--secondary { background-color: transparent; border-color: var(--btn-border); color: var(--btn-text); } .button::before, button::before, input[type="submit"]::before, .button::after, button::after, input[type="submit"]::after { content: ""; position: absolute; top: 0; bottom: 0; width: 51%; z-index: -1; background-color: var(--btn-fill); transform: translateY(101%); transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1); } .button::before, button::before, input[type="submit"]::before { left: 0; } .button::after, button::after, input[type="submit"]::after { right: 0; transition-delay: 0.1s; } .button > *, button > *, input[type="submit"] > * { position: relative; z-index: 1; } .button:hover, .button:focus-visible, .button--outline:hover, .button--outline:focus-visible, .button--secondary:hover, .button--secondary:focus-visible { color: var(--btn-fill-text); } .button:hover::before, .button:focus-visible::before, .button:hover::after, .button:focus-visible::after { transform: translateY(0%); } .section--closing-cta .button, .section--office-cta .button, .section--furniture-statement .button, .section--process-steps .button, .section--office-statement .button, .about-band .button, .section--furniture-proof-forest .button, .site-footer .button, .section--closing-cta .button--outline, .section--office-cta .button--outline, .section--furniture-statement .button--outline, .section--process-steps .button--outline, .section--office-statement .button--outline, .about-band .button--outline, .section--furniture-proof-forest .button--outline, .site-footer .button--outline { --btn-text: var(--color-warm-white); --btn-border: rgba(255, 254, 250, 0.5); --btn-fill: var(--color-warm-white); --btn-fill-text: var(--color-ink); } .main-navigation .button { padding: 8px 14px; font-size: 12px; gap: 8px; } .main-navigation .button .button__plus { width: 13px; height: 13px; font-size: 13px; } .button__plus { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; font-size: 0; line-height: 1; overflow: hidden; } .button__plus::before, .button__plus::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; } .button__plus::before { content: "+"; } .button__plus::after { content: "\2192"; font-size: 14px; } .button__plus::before { transform: translateY(0); opacity: 0.9; transition: transform 0.4s cubic-bezier(0.87, 0, 0.13, 1) 0.05s, opacity 0.4s cubic-bezier(0.87, 0, 0.13, 1) 0.05s; } .button__plus::after { transform: translateY(1rem); opacity: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s; } .button:hover .button__plus::before, .button:focus-visible .button__plus::before, .button--outline:hover .button__plus::before, .button--outline:focus-visible .button__plus::before, .button--secondary:hover .button__plus::before, .button--secondary:focus-visible .button__plus::before { transform: translateY(-1rem); opacity: 0; } .button:hover .button__plus::after, .button:focus-visible .button__plus::after, .button--outline:hover .button__plus::after, .button--outline:focus-visible .button__plus::after, .button--secondary:hover .button__plus::after, .button--secondary:focus-visible .button__plus::after { transform: translateY(0); opacity: 1; } .button:focus-visible, button:focus-visible, input[type="submit"]:focus-visible, .text-link:focus-visible, .main-navigation a:focus-visible { outline: 2px solid rgba(162, 151, 130, 0.6); outline-offset: 4px; } .text-link { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-text); transition: color 260ms var(--ease-out-soft), transform 320ms var(--ease-out-soft); } .site-footer .text-link { color: var(--color-accent); } .text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.18rem; height: 1px; background: currentColor; opacity: 0.34; transform: scaleX(0.36); transform-origin: left; transition: opacity 260ms ease, transform 420ms var(--ease-out-soft); } .text-link:hover, .text-link:focus-visible { transform: translateX(0.18rem); } .text-link:hover::after, .text-link:focus-visible::after { opacity: 0.72; transform: scaleX(1); } .site-header { position: sticky; top: 0; z-index: 50; padding-block: 0; background: var(--color-bg); transition: box-shadow 260ms ease; } .site-header.is-scrolled { background: var(--color-bg); box-shadow: 0 14px 34px rgba(17, 22, 19, 0.06); } .site-header__inner { position: relative; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 2.4vw, 2.6rem); min-height: 4.55rem; padding-block: 0.5rem; border-bottom: 0; transition: min-height 260ms cubic-bezier(0.16, 1, 0.3, 1), padding 260ms cubic-bezier(0.16, 1, 0.3, 1); } .site-header.is-scrolled .site-header__inner { min-height: 4.02rem; } .site-branding { display: flex; align-items: center; gap: 0.9rem; min-width: 0; } .site-branding__mark { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 4px; background: var(--color-dark); color: #fff; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; } .site-logo, .site-logo a { display: inline-flex; align-items: center; min-width: 0; line-height: 0; } .site-logo img, .custom-logo { display: block; width: auto; max-width: clamp(10.25rem, 13vw, 12.75rem); max-height: 2.65rem; height: auto; object-fit: contain; } .site-branding:has(.site-logo) .site-branding__mark { display: none; } .site-branding:has(.site-logo) .site-branding__text { display: none; } .site-kicker { margin-bottom: 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); } .site-title { display: inline-block; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; letter-spacing: 0; } .site-tagline { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .main-navigation .menu { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(0.75rem, 1.25vw, 1.35rem); padding: 0; margin: 0; list-style: none; white-space: nowrap; } .main-navigation .menu-item { position: relative; } .main-navigation a:not(.button) { position: relative; display: inline-flex; align-items: center; min-height: 2.4rem; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); transition: color var(--transition), transform 260ms cubic-bezier(0.16, 1, 0.3, 1); } .main-navigation a:not(.button)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 1px; background: currentColor; opacity: 0; transform: scaleX(0); transform-origin: right; transition: opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .main-navigation a:not(.button):hover::after, .main-navigation a:not(.button):focus-visible::after { opacity: 0.45; transform: scaleX(1); transform-origin: left; } .main-navigation a:not(.button):hover, .main-navigation a:not(.button):focus-visible { transform: translateY(-1px); } .main-navigation .sub-menu { position: absolute; z-index: 20; top: calc(100% + 0.55rem); left: 50%; display: grid; gap: 0; min-width: 17rem; padding: 0.5rem; margin: 0; list-style: none; background: var(--color-bg); border: 1px solid rgba(23, 26, 24, 0.12); box-shadow: 0 24px 54px rgba(17, 22, 19, 0.14); opacity: 0; visibility: hidden; transform: translate(-50%, 0.45rem); transition: opacity 220ms var(--ease-out-soft), visibility 0ms linear 220ms, transform 260ms var(--ease-out-soft); } .main-navigation .menu-item-has-children:hover > .sub-menu, .main-navigation .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0ms; } .main-navigation .sub-menu a { justify-content: flex-start; width: 100%; min-height: 2.55rem; padding: 0.55rem 0.65rem; color: rgba(23, 26, 24, 0.82); } .main-navigation .sub-menu a::after { display: none; } .main-navigation .sub-menu a:hover, .main-navigation .sub-menu a:focus-visible { background: rgba(138, 106, 54, 0.08); color: var(--color-dark); transform: none; } @media (min-width: 981px) { .main-navigation .menu-item--cta > a, .main-navigation .menu-item--whatsapp > a { min-height: 2.4rem; padding-top: 0; padding-bottom: 0; padding-left: 1rem; padding-right: 1rem; font-size: 0.8125rem; letter-spacing: 0.04em; } .main-navigation .menu-item--whatsapp + .menu-item--cta { margin-left: 0.75rem; } } @media (min-width: 981px) and (max-width: 1099px) { .main-navigation .menu-item--whatsapp { display: none; } } @media (min-width: 981px) and (max-width: 1519px) { .main-navigation .menu > .menu-item:first-child { margin-left: auto; } .main-navigation .menu-item--cta, .main-navigation .menu-item--whatsapp { margin-left: auto; } .main-navigation .menu-item--whatsapp + .menu-item--cta { margin-left: 0.75rem; } } @media (min-width: 1520px) { .main-navigation { position: absolute; top: 0; bottom: 0; right: var(--gutter); left: calc(50% + clamp(0.375rem, 0.35rem + 0.125vw, 0.5rem)); display: flex; align-items: center; } .main-navigation .menu { width: 100%; justify-content: flex-start; } .main-navigation .menu-item--cta, .main-navigation .menu-item--whatsapp { margin-left: auto; } .main-navigation .menu-item--whatsapp + .menu-item--cta { margin-left: 0.75rem; } } .nav-toggle { display: none; align-items: center; justify-content: center; padding: 0.72rem 0.9rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .nav-toggle:hover, .nav-toggle:focus-visible { color: var(--color-accent-deep); border-color: var(--color-accent-deep); } .site-header__cta { justify-self: end; } .site-footer { padding-top: clamp(5.25rem, 7vw, 8rem); padding-bottom: var(--space-6); color: rgba(255, 254, 250, 0.82); background: var(--color-ink); } .site-footer__wordmark { margin: 0 auto clamp(2.4rem, 4vw, 3.6rem); font-family: var(--font-heading); font-size: clamp(2.4rem, 6vw, 5.2rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1; text-transform: uppercase; color: #fff; } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(12rem, 0.58fr) minmax(18rem, 1fr); gap: clamp(1.8rem, 3.2vw, 3.2rem); padding-block: clamp(1.8rem, 3.2vw, 2.75rem) var(--space-7); border-top: 1px solid rgba(255, 255, 255, 0.12); } .site-footer__grid h2, .site-footer__grid h3:not(.eyebrow) { color: #fff; } .site-footer__grid h3.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-accent-text); font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; margin-bottom: var(--space-3); } .site-footer__grid h3.eyebrow::before { content: ""; width: 0.34rem; height: 0.34rem; flex: none; transform: rotate(45deg); background: var(--color-accent); } .site-footer__brand h2 { max-width: 17ch; font-size: clamp(1.7rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; } .site-footer .menu { padding: 0; margin: 0; list-style: none; } .site-footer .menu li + li { margin-top: 0.6rem; } .site-footer .menu a { position: relative; color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; transition: color 260ms var(--ease-out-soft); } .site-footer .menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.16rem; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out-soft); } .site-footer .menu a:hover, .site-footer .menu a:focus-visible { color: #fff; } .site-footer .menu a:hover::after, .site-footer .menu a:focus-visible::after { transform: scaleX(1); } .site-footer__tags { display: flex; flex-wrap: wrap; gap: 1.1rem; } .site-footer__tags span { padding: 0; border: 0; background: transparent; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .site-footer__contact { padding: 0 0 0 clamp(1.5rem, 3vw, 3rem); border: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); background: transparent; } .site-footer__nav { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid rgba(255, 255, 255, 0.1); } .site-footer__note { font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); } .site-footer__meta { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .footer-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .page-header--split { display: grid; grid-template-columns: 1fr minmax(18rem, 28rem); gap: var(--space-5); align-items: end; } .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr); gap: var(--space-5); align-items: start; } .page-hero__content { padding: clamp(2rem, 3.4vw, 3.2rem); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(17, 22, 19, 0.97), rgba(26, 33, 28, 0.96)), var(--color-dark); color: rgba(255, 255, 255, 0.92); box-shadow: 0 22px 54px rgba(17, 22, 19, 0.16); } .page-hero__content .eyebrow, .page-hero__content .lead { color: rgba(255, 255, 255, 0.72); } .page-hero__panel, .archive-note, .project-summary-card { padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #f6f0e7 0%, #efe7da 100%); box-shadow: var(--shadow-soft); } .page-hero__panel { position: relative; overflow: hidden; } .page-hero__panel::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 0.35rem; background: linear-gradient(90deg, var(--color-accent), rgba(133, 100, 44, 0.12)); } .page-hero__points { display: grid; gap: 0.9rem; padding-top: 0.8rem; } .page-hero__points div { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.85rem; align-items: start; padding-top: 0.85rem; border-top: 1px solid rgba(23, 26, 24, 0.08); } .page-hero__points span { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(17, 22, 19, 0.08); font-size: 0.82rem; font-weight: 800; } .page-hero__note { padding-top: 1rem; border-top: 1px solid rgba(23, 26, 24, 0.08); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-dark-soft); } .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-5); align-items: start; } .content-layout__main > * + * { margin-top: var(--space-4); } .sidebar-card { padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-soft); } .post-list { display: grid; gap: var(--space-4); } .entry-card, .project-card { border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); box-shadow: 0 1px 0 rgba(17, 22, 19, 0.06); } .project-card { overflow: hidden; } .entry-card__meta { font-size: 0.88rem; color: var(--color-muted); } .project-card__body { display: grid; gap: var(--space-3); padding: 1.4rem; } .project-card__meta-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.8rem; align-items: center; } .project-card__meta-tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-dark-soft); } .project-card__signal { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-deep); } .project-card__summary { max-width: 46rem; font-size: 0.98rem; line-height: 1.62; color: var(--color-muted); } .project-card__evidence { max-width: 44rem; padding-top: 0.9rem; border-top: 1px solid rgba(23, 26, 24, 0.08); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-deep); } .project-card__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(23, 26, 24, 0.1); } .project-card__detail { display: grid; gap: 0.35rem; align-content: start; } .project-card__detail strong { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); } .project-card__detail span { font-size: 0.95rem; font-weight: 600; line-height: 1.45; color: var(--color-text); } .project-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .project-card__image--placeholder { background: linear-gradient(145deg, rgba(17, 22, 19, 0.34), rgba(17, 22, 19, 0.06)), linear-gradient(180deg, #d9cfbf 0%, #cdbda4 100%); } .entry-content > * + * { margin-top: var(--space-4); } .archive-note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .info-grid, .process-grid, .route-grid, .route-detail__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } .info-card, .process-card, .case-study-meta, .route-detail__panel { padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-soft); } .info-card h3 { margin-bottom: 0.85rem; } .process-card__number { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: var(--radius-sm); background: var(--color-dark); color: #fff; font-weight: 700; } .cta-panel { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: linear-gradient(135deg, #f6f0e7 0%, #ece3d5 100%); } .cta-panel--split { align-items: start; } .cta-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 16rem; } .case-study-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); } .case-study-meta p { margin-top: 0.6rem; font-weight: 600; } .case-study-body { display: grid; gap: var(--space-5); } .case-study-section { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-line); } .case-study-section:last-child { padding-bottom: 0; border-bottom: 0; } .route-detail { padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-soft); } .route-detail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .route-detail__list { padding-left: 1.1rem; margin: 0; display: grid; gap: 0.7rem; } .main-navigation .menu { gap: clamp(0.7rem, 1.08vw, 1.15rem); } .main-navigation .menu-item-has-children > a { gap: 0.38rem; } .main-navigation .menu-item-has-children > a::before { content: ""; order: 2; width: 0.28rem; height: 0.28rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: 0.58; transform: translateY(-0.08rem) rotate(45deg); } .main-navigation .sub-menu { left: 0; min-width: 18.5rem; padding: 0.7rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent), rgba(246, 243, 237, 0.985); transform: translate(0, 0.45rem); } .main-navigation .menu-item-has-children:hover > .sub-menu, .main-navigation .menu-item-has-children:focus-within > .sub-menu { transform: translate(0, 0); } .main-navigation .sub-menu a { min-height: 2.7rem; padding: 0.65rem 0.75rem; font-size: 0.72rem; letter-spacing: 0.09em; } @media (max-width: 980px) { .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; } .site-logo img, .custom-logo { max-width: min(12rem, 54vw); max-height: 2.45rem; } .main-navigation { display: none; grid-column: 1 / -1; padding-bottom: 1rem; } .main-navigation.is-open { display: block; } .main-navigation .menu { flex-direction: column; align-items: flex-start; gap: 0.2rem; } .main-navigation .sub-menu { position: static; min-width: 0; padding: 0.25rem 0 0.5rem 1rem; background: transparent; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .main-navigation .menu-item-has-children > a::before { display: none; } .main-navigation .sub-menu a { min-height: 2.1rem; padding: 0.25rem 0; font-size: 0.7rem; color: rgba(23, 26, 24, 0.68); } .main-navigation .sub-menu a:hover, .main-navigation .sub-menu a:focus-visible { background: transparent; } .nav-toggle { display: inline-flex; } .main-navigation .menu-item--cta > a, .main-navigation .menu-item--whatsapp > a { margin-top: 0.35rem; } .site-footer__grid, .page-header--split, .content-layout, .page-hero__grid, .archive-note-grid, .info-grid, .process-grid, .route-grid, .route-detail__grid, .case-study-meta-grid, .cta-panel { grid-template-columns: 1fr; } .cta-panel { display: grid; } .site-footer__contact { padding-left: 0; padding-top: var(--space-4); border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } } @media (max-width: 640px) { .site-header { padding-top: 0.5rem; } .site-header__inner { min-height: 3.65rem; padding-block: 0.42rem; } .site-logo img, .custom-logo { max-width: min(10rem, 52vw); max-height: 2.25rem; } .site-footer__meta { flex-direction: column; } } .quote-chooser[hidden] { display: none; } .quote-chooser { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: var(--space-4, 1.25rem); } .quote-chooser__scrim { position: absolute; inset: 0; background: rgba(17, 22, 19, 0.45); } .quote-chooser__panel { position: relative; width: min(26rem, 100%); background: var(--color-base, #efece6); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.8rem; box-shadow: 0 24px 60px -30px rgba(17, 22, 19, 0.5); } .quote-chooser__path { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.1rem; border: 1px solid var(--color-line); background: var(--color-warm-white, #fffefa); text-decoration: none; transition: border-color 180ms ease, transform 180ms ease; } .quote-chooser__path:hover, .quote-chooser__path:focus-visible { border-color: var(--color-accent-deep); transform: translateY(-1px); outline: none; } .quote-chooser__path-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; color: var(--color-ink); } .quote-chooser__path-copy { font-size: 0.86rem; color: var(--color-muted); } .quote-chooser__close { position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--color-muted); cursor: pointer; } .enquiry-form__bridge { margin-top: 0.8rem; font-size: 0.88rem; color: var(--color-muted); } .spec-brief { margin-top: var(--space-4); max-width: 34rem; } .spec-brief__card { padding: var(--space-3); border: 1px solid var(--color-line); background: var(--color-surface, #fff); } .spec-brief__heading { margin: 0; font-size: 1.15rem; line-height: 1.3; } .spec-brief__copy { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--color-muted); } .spec-brief__form { margin-top: var(--space-3); display: grid; gap: 0.8rem; } .spec-brief__upload { font-size: 0.85rem; } .spec-brief__upload-link { cursor: pointer; list-style: none; color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; } .spec-brief__upload-link::-webkit-details-marker { display: none; } .spec-brief__upload .spec-brief__field { margin-top: 0.6rem; } .spec-brief__footer { margin: 0.2rem 0 0; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; } .spec-brief__promise { font-size: 0.82rem; color: var(--color-muted); } .spec-brief__thanks { font-size: 0.92rem; color: var(--color-accent-deep); } .trust-strip { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: clamp(1.5rem, 3vw, 2.75rem); row-gap: 0.55rem; margin: clamp(1.1rem, 2vw, 1.6rem) 0 0; padding: 0; border: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-muted); } .trust-strip__fact { display: inline-flex; align-items: baseline; gap: 0.5rem; color: inherit; white-space: nowrap; } .trust-strip__mark { width: 0.3rem; height: 0.3rem; transform: rotate(45deg); background: var(--color-accent); flex: none; transform-origin: center; align-self: center; } a.trust-strip__fact { text-decoration: none; transition: color 200ms ease; } a.trust-strip__fact .trust-strip__words { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.3em; } a.trust-strip__fact:hover, a.trust-strip__fact:focus-visible { color: var(--color-accent-deep); } .product-configurator__panel .trust-strip, .trust-strip--stacked { flex-direction: column; align-items: flex-start; } @media (max-width: 1100px) { .trust-strip { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .trust-strip { letter-spacing: 0.06em; } .trust-strip__fact { white-space: normal; } } .consent-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2, 12px) var(--space-4, 24px); padding: 14px clamp(16px, 4vw, 40px); background: var(--color-ink, #191919); color: var(--color-warm-white, #fffefa); } .consent-bar__text { margin: 0; font-size: 0.9rem; } .consent-bar__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .consent-bar__actions { display: flex; gap: 10px; } .consent-bar .button--small { padding: 8px 18px; font-size: 0.85rem; } .consent-bar .button--outline { border-color: currentColor; color: inherit; background: transparent; } .consent-bar .button { background: var(--color-warm-white, #fffefa); color: var(--color-ink, #262626); border: 1px solid var(--color-warm-white, #fffefa); white-space: nowrap; } .consent-bar .button:hover { background: transparent; color: var(--color-warm-white, #fffefa); } .consent-bar .button--outline { background: transparent; color: var(--color-warm-white, #fffefa); border-color: currentColor; } .consent-bar__actions { flex-wrap: nowrap; } .enquiry-form__hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .cf-turnstile:empty { display: none; } .build-tiles { display: flex; gap: 0.35rem; margin: 0.5rem 0 0; padding: 0 0 0.2rem; list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--color-line) transparent; -webkit-overflow-scrolling: touch; } .build-tiles::-webkit-scrollbar { height: 3px; } .build-tiles::-webkit-scrollbar-thumb { background: var(--color-line); } .build-tiles__tile { flex: 0 0 auto; width: 3.5rem; } .build-tiles__face { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; overflow: hidden; border: 1px solid var(--color-line); background: #fff; } .build-tiles__face img { width: 100%; height: 100%; object-fit: contain; } .build-tiles__face--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .build-tiles__half { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; } .build-tiles__face--words { padding: 0.2rem 0.15rem; font-family: var(--font-mono); font-size: 0.56rem; line-height: 1.25; letter-spacing: 0.02em; text-align: center; color: var(--color-muted); overflow: hidden; overflow-wrap: anywhere; } .build-tiles__name { display: -webkit-box; padding: 0.2rem 0.05rem 0; font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.3; letter-spacing: 0.02em; text-align: center; color: var(--color-muted); overflow: hidden; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .build-tiles__note { display: block; padding: 0.1rem 0.05rem 0; font-family: var(--font-mono); font-size: 0.52rem; line-height: 1.25; letter-spacing: 0.06em; text-align: center; color: var(--color-muted); } .build-tiles__tile--more .build-tiles__face--words { font-size: 0.62rem; letter-spacing: 0.04em; } .choice, .config-chip, .config-tile .config-tile__face, .config-tiles--cards .config-tile, .builder__tile, .config-qty, .furniture-subfilter__chip, .furniture-filter__chip { --choice-face: transparent; border: 1px solid var(--color-line); background: var(--choice-face); color: var(--color-ink); cursor: pointer; transition: border-color 220ms var(--ease-out-soft), background-color 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft); } .config-tile .config-tile__face:has(img), .config-tile--image .config-tile__face, .config-tile--render .config-tile__face { --choice-face: #fff; } .choice:hover, .config-chip:hover, .config-tile:hover .config-tile__face, .config-tiles--cards .config-tile:hover, .builder__tile:hover, .furniture-subfilter__chip:hover, .furniture-filter__chip:hover { border-color: var(--color-ink); } .choice:has(input:focus-visible), .config-chip:has(input:focus-visible), .config-tile:has(input:focus-visible) .config-tile__face, .furniture-subfilter__chip:focus-visible, .furniture-filter__chip:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; } .choice.is-selected, .config-chip.is-selected, .config-tile.is-selected .config-tile__face, .config-tiles--cards .config-tile.is-selected, .builder__tile.is-active, .furniture-subfilter__chip.is-active, .furniture-filter__chip.is-active { --choice-face: var(--color-ink); border-color: var(--color-ink); background: var(--color-ink); color: var(--color-warm-white); box-shadow: 0 0 0 1px var(--color-ink); } .choice.is-selected::after, .config-chip.is-selected::after, .config-tile.is-selected::after, .builder__tile.is-active::after { content: ""; position: absolute; top: 6px; right: 6px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-warm-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.7 11 12 5.2' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; box-shadow: 0 0 0 1px var(--color-ink); pointer-events: none; } .choice__price, .config-chip__price, .builder__tile-price { font-family: var(--font-mono); font-size: 12px; letter-spacing: normal; color: inherit; opacity: 0.7; } @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } .nav-toggle { min-width: 44px; min-height: 44px; } } .home-hero { position: relative; padding-block: 0; background: var(--color-ink); color: rgba(255, 255, 255, 0.92); overflow: hidden; } .home-hero::before { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(228, 226, 220, 0.08)); pointer-events: none; } .home-hero__content { position: relative; display: block; min-height: clamp(46rem, calc(100svh - 4.2rem), 62rem); padding-block: 0; background: var(--color-ink); overflow: hidden; isolation: isolate; } .home-hero__content:not(.has-project-proof)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(13, 18, 16, 0.98), rgba(25, 32, 28, 0.92)), var(--color-dark); } .home-hero__visual { position: absolute; inset: 0; z-index: 0; min-height: 100%; overflow: hidden; background: var(--color-ink); } .home-hero__image-stack { position: absolute; inset: -3% -3% -3% -1.5%; overflow: hidden; transform: translate3d(0, 0, 0); transform-origin: center; transition: opacity 980ms var(--ease-out-soft), transform 980ms var(--ease-out-soft); } .home-hero__video { position: absolute; z-index: 2; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 55% 50%; opacity: 0; transform: scale(1.015); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .home-hero__visual.has-video.is-video-ready .home-hero__video { opacity: 1; transform: scale(1); } .home-hero__visual.has-video .home-hero__image-frame:not(:first-child) { display: none; } .home-hero__visual.has-video .home-hero__image-frame { z-index: 0; } .home-hero__image-stack::before, .home-hero__image-stack::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; } .home-hero__image-stack::before { background: radial-gradient(circle at 74% 42%, rgba(255, 255, 255, 0.08), transparent 34%), linear-gradient(90deg, rgba(7, 10, 9, 0.91) 0%, rgba(7, 10, 9, 0.64) 29%, rgba(7, 10, 9, 0.18) 58%, rgba(7, 10, 9, 0.03) 100%), linear-gradient(180deg, rgba(9, 13, 11, 0.02) 0%, rgba(9, 13, 11, 0.2) 100%); } .home-hero__image-stack::after { inset: auto 0 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(9, 13, 11, 0.5)); } .home-hero__image-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translate3d(42px, 0, 0); transition: opacity 1650ms var(--ease-premium), transform 1650ms var(--ease-premium); } .home-hero__image-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 13, 11, 0.32), transparent 44%), linear-gradient(180deg, transparent 50%, rgba(9, 13, 11, 0.24)); opacity: var(--hero-veil-opacity, 0); pointer-events: none; } .home-hero__image-stack:not(.is-enhanced) .home-hero__image-frame:first-child { z-index: 2; opacity: 1; transform: translate3d(0, 0, 0); } .home-hero__image-frame.is-active { z-index: 2; opacity: 1; transform: translate3d(0, 0, 0); } .home-hero__image-frame.is-leaving { z-index: 1; opacity: 0; transform: translate3d(-34px, 0, 0); transition-duration: 1450ms, 1650ms; } .home-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focal-x, 58%) var(--hero-focal-y, 50%); transform: scale(var(--hero-crop-scale, 1)); transform-origin: var(--hero-focal-x, 58%) var(--hero-focal-y, 50%); filter: var(--photo-grade); } .motion-ready .home-hero__image-stack { opacity: 1; transform: translate3d(0, 0, 0); } .motion-ready.motion-loaded .home-hero__image-stack { opacity: 1; transform: translate3d(0, 0, 0); } .home-hero__main { position: relative; z-index: 2; display: grid; gap: clamp(0.95rem, 1.42vw, 1.42rem); width: min(100%, clamp(34rem, 54vw, 56rem)); min-height: inherit; margin-left: 0; padding: clamp(5.2rem, 7.4vw, 8.4rem) clamp(2rem, 3vw, 3.4rem) clamp(4.3rem, 6.4vw, 7.05rem) clamp(2.3rem, 5.8vw, 6.85rem); border-right: 0; background: linear-gradient(101deg, rgba(7, 10, 9, 0.72) 0%, rgba(7, 10, 9, 0.42) 58%, rgba(7, 10, 9, 0) 100%); align-content: end; } .home-hero__content .eyebrow, .home-hero__content .lead { color: rgba(255, 255, 255, 0.7); } .hero-copy { max-width: 50rem; } .hero-copy h1 { max-width: 17ch; font-size: clamp(2.6rem, 4.4vw, 4.5rem); font-weight: 600; line-height: 1.0; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; text-shadow: none; } .hero-copy .lead { max-width: 30rem; font-size: clamp(0.98rem, 1.02vw, 1.06rem); line-height: 1.64; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; padding-top: 0.65rem; } .hero-proofline { display: grid; grid-template-columns: 1fr; gap: 0.62rem; align-items: start; max-width: 30rem; padding-top: clamp(0.86rem, 1.25vw, 1.14rem); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.82rem; font-weight: 650; color: rgba(255, 255, 255, 0.68); } .hero-proofline p { margin: 0; } .hero-trust-list { display: flex; flex-wrap: wrap; gap: 0.4rem 0.86rem; padding: 0; margin: 0; list-style: none; } .hero-trust-list li { position: relative; padding-left: 0.72rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.62); } .hero-trust-list li::before { content: ""; position: absolute; left: 0; top: 0.58rem; width: 0.24rem; height: 0.24rem; border-radius: 50%; background: var(--color-accent); } .section--google-reviews { padding-top: 0; } .google-reviews { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-6); align-items: start; padding: clamp(1.7rem, 2.4vw, 2.3rem); border-top: 1px solid rgba(23, 26, 24, 0.08); border-bottom: 1px solid rgba(23, 26, 24, 0.08); } .google-reviews__summary { max-width: 28rem; padding-top: 0.35rem; } .google-reviews__stats { display: flex; flex-wrap: wrap; gap: 1rem 1.35rem; align-items: end; padding-top: 0.35rem; } .google-reviews__rating, .google-reviews__count { margin: 0; } .google-reviews__rating { display: inline-flex; align-items: baseline; gap: 0.45rem; font-family: var(--font-heading); font-size: 0.98rem; letter-spacing: 0; color: var(--color-dark); } .google-reviews__rating span { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; line-height: 0.95; } .google-reviews__rating small, .google-reviews__count, .google-reviews__note { font-size: 0.92rem; color: var(--color-muted); } .google-reviews__count { font-weight: 700; letter-spacing: 0.03em; } .google-reviews__list { display: grid; gap: 0; } .google-review { padding: 1.1rem 0; border-top: 1px solid rgba(23, 26, 24, 0.08); } .google-review:first-child { padding-top: 0; border-top: 0; } .google-review__head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; } .google-review__author { display: flex; gap: 0.9rem; align-items: start; min-width: 0; } .google-review__photo { flex: 0 0 auto; width: 2.7rem; height: 2.7rem; border-radius: 50%; object-fit: cover; background: rgba(17, 22, 19, 0.08); } .google-review__author-meta { min-width: 0; } .google-review__author-meta a, .google-review__author-meta span { display: inline-block; font-weight: 700; color: var(--color-text); } .google-review__author-meta p { margin-top: 0.25rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .google-review__link { flex: 0 0 auto; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-deep); } .google-review__body { max-width: 42rem; padding-top: 0.85rem; } .google-review__body p { font-size: 1rem; line-height: 1.72; color: var(--color-text); } .google-reviews__attribution { padding-top: 1rem; font-size: 0.78rem; color: var(--color-muted); } .google-reviews__attribution span { font-weight: 700; color: var(--color-dark-soft); } .google-reviews__attribution a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; } .section--projects-showcase { position: relative; z-index: 1; padding-block: clamp(5.25rem, 7.6vw, 8.9rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.052), transparent 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 34%), #efede7; isolation: isolate; } .section--projects-showcase::before { content: ""; position: absolute; inset: clamp(1.25rem, 2vw, 1.9rem) clamp(1.25rem, 2vw, 1.9rem) auto auto; width: clamp(9rem, 18vw, 19rem); height: 1px; background: rgba(23, 26, 24, 0.24); pointer-events: none; } .projects-showcase__intro { display: grid; grid-template-columns: minmax(0, 0.64fr) minmax(22rem, 0.36fr); gap: clamp(1.9rem, 3.8vw, 4.45rem); align-items: end; max-width: none; margin-bottom: clamp(2.15rem, 3.45vw, 3.45rem); padding-bottom: clamp(1.55rem, 2.4vw, 2.25rem); border-bottom: 1px solid rgba(23, 26, 24, 0.1); } .projects-showcase__intro .eyebrow, .projects-showcase__intro h2 { grid-column: 1; } .projects-showcase__intro h2 { max-width: 16ch; font-size: clamp(2.85rem, 4.45vw, 5rem); line-height: 0.87; letter-spacing: -0.06em; } .projects-showcase__intro .lead { grid-column: 2; grid-row: 1 / span 2; max-width: 28rem; justify-self: end; align-self: end; font-size: var(--type-body-lg); line-height: 1.6; } .projects-showcase__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(0.95rem, 1.55vw, 1.25rem); align-items: start; } .projects-showcase__featured { max-width: none; } .projects-showcase__slider { position: relative; display: grid; gap: clamp(0.8rem, 1.25vw, 1rem); isolation: isolate; } .projects-showcase__arrow-controls { position: absolute; z-index: 8; top: clamp(17rem, 23vw, 22.4rem); left: clamp(0.9rem, 1.35vw, 1.35rem); right: calc(clamp(0.7rem, 1.25vw, 1.25rem) + clamp(0.9rem, 1.35vw, 1.35rem)); display: flex; justify-content: space-between; align-items: center; pointer-events: none; } .projects-showcase__arrow { display: inline-flex; align-items: center; justify-content: center; width: clamp(2.65rem, 3.1vw, 3.05rem); height: clamp(2.65rem, 3.1vw, 3.05rem); border: 1px solid rgba(255, 255, 255, 0.46); border-radius: 0; background: rgba(13, 18, 16, 0.34); backdrop-filter: blur(10px); color: #fff; font-size: clamp(0.95rem, 1.25vw, 1.08rem); line-height: 1; cursor: pointer; pointer-events: auto; transition: background-color 300ms var(--ease-out-soft), border-color 300ms var(--ease-out-soft), color 260ms ease, transform 320ms var(--ease-out-soft); } .projects-showcase__arrow:hover, .projects-showcase__arrow:focus-visible { border-color: rgba(255, 255, 255, 0.78); background: rgba(13, 18, 16, 0.66); color: #fff; transform: translateX(0.08rem); } .projects-showcase__arrow--previous:hover, .projects-showcase__arrow--previous:focus-visible { transform: translateX(-0.08rem); } .projects-showcase__slides { display: grid; gap: clamp(0.8rem, 1.25vw, 1rem); padding-right: clamp(0rem, 0.8vw, 0.75rem); } .projects-showcase__slide { min-width: 0; } .projects-showcase__slider:not(.is-enhanced) .projects-showcase__slide:not(.is-active) { display: none; } .projects-showcase__slider.is-enhanced .projects-showcase__slides { position: relative; display: block; overflow: hidden; transition: height 860ms var(--ease-out-soft); } .projects-showcase__slider.is-enhanced .projects-showcase__slide { position: absolute; top: 0; right: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateZ(0); z-index: 0; transition: opacity 860ms var(--ease-premium), visibility 0ms linear 860ms; pointer-events: none; } .projects-showcase__slider.is-enhanced .projects-showcase__slide.is-leaving { position: absolute; opacity: 0; visibility: visible; transform: translateZ(0); z-index: 1; transition: opacity 740ms var(--ease-premium); pointer-events: none; } .projects-showcase__slider.is-enhanced .projects-showcase__slide.is-active { position: absolute; opacity: 1; visibility: visible; transform: translateZ(0); z-index: 2; transition-delay: 0ms; pointer-events: auto; } .motion-ready .projects-showcase__slider.is-enhanced .projects-showcase__slide .project-card__body, .motion-ready .projects-showcase__slider.is-enhanced .projects-showcase__slide .project-card__details { transition: opacity 820ms var(--ease-out-soft), transform 820ms var(--ease-out-soft); } .motion-ready .projects-showcase__slider.is-enhanced .projects-showcase__slide:not(.is-slide-ready) .project-card__body { opacity: 0; transform: translateX(0.72rem); } .motion-ready .projects-showcase__slider.is-enhanced .projects-showcase__slide:not(.is-slide-ready) .project-card__details { opacity: 0; transform: translateY(0.42rem); } .motion-ready .projects-showcase__slider.is-enhanced .projects-showcase__slide.is-active .project-card__body { transition-delay: 110ms; } .motion-ready .projects-showcase__slider.is-enhanced .projects-showcase__slide.is-active .project-card__details { transition-delay: 190ms; } .motion-ready .projects-showcase__slider.is-enhanced .projects-showcase__slide.is-leaving .project-card__body, .motion-ready .projects-showcase__slider.is-enhanced .projects-showcase__slide.is-leaving .project-card__details { opacity: 0; transform: translateY(-0.25rem); transition-delay: 0ms; } .projects-showcase__controls { display: flex; justify-content: flex-start; gap: clamp(1rem, 1.6vw, 1.5rem); align-items: center; padding-top: 0; border-top: 0; } .projects-showcase__counter { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; color: var(--color-accent-deep); } .projects-showcase__empty { max-width: 42rem; padding-block: clamp(2.2rem, 4vw, 3.4rem); border-top: 1px solid rgba(23, 26, 24, 0.14); border-bottom: 1px solid rgba(23, 26, 24, 0.1); } .projects-showcase__empty h3 { max-width: 18ch; font-size: clamp(1.8rem, 2.6vw, 2.4rem); } .projects-showcase__rail { display: grid; grid-template-columns: minmax(10rem, 0.26fr) minmax(0, 1fr) auto; gap: clamp(1.2rem, 2.6vw, 2.25rem); align-items: start; max-width: none; padding-top: 1.35rem; border-top: 1px solid rgba(23, 26, 24, 0.14); } .projects-showcase__rail-note { max-width: 20rem; font-size: 0.9rem; color: var(--color-muted); } .projects-showcase__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); padding: 0; margin: 0; list-style: none; border-top: 0; } .projects-showcase__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; padding: 0 0 1rem; border-bottom: 1px solid rgba(23, 26, 24, 0.1); } .projects-showcase__item-main { display: grid; gap: 0.35rem; } .projects-showcase__item a { font-family: var(--font-heading); font-size: clamp(1.05rem, 1.2vw, 1.18rem); font-weight: 700; letter-spacing: 0; } .projects-showcase__item p { max-width: 28rem; font-size: 0.92rem; color: var(--color-muted); } .projects-showcase__item span { justify-self: end; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); } .project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } .project-card { display: grid; grid-template-rows: auto 1fr; gap: 0; } .project-card--featured { position: relative; display: grid; gap: clamp(0.82rem, 1.15vw, 1rem); min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .project-card__featured-stage { position: relative; display: grid; min-height: 0; padding-right: clamp(0.7rem, 1.25vw, 1.25rem); background: linear-gradient(90deg, #0d1210 0%, #0d1210 calc(100% - clamp(0.7rem, 1.25vw, 1.25rem)), transparent 100%); } .project-card--featured .project-card__image { position: relative; z-index: 1; display: block; min-height: clamp(36rem, 49vw, 48rem); border-radius: 0; } .project-card--featured .project-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 22, 19, 0.02), transparent 52%, rgba(16, 22, 19, 0.12)), linear-gradient(180deg, transparent 64%, rgba(16, 22, 19, 0.2)); pointer-events: none; } .project-card--featured .project-card__body { position: absolute; right: clamp(0rem, 0.7vw, 0.65rem); bottom: clamp(1.3rem, 2.2vw, 2.25rem); z-index: 2; display: grid; grid-template-columns: 1fr; gap: clamp(0.7rem, 0.86vw, 0.86rem); align-items: start; width: min(25.4rem, 26vw); padding: clamp(1rem, 1.42vw, 1.42rem); border-left: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 58%), rgba(13, 18, 16, 0.62); box-shadow: 0 22px 54px rgba(5, 8, 7, 0.17); color: rgba(255, 255, 255, 0.88); } .project-card--featured .project-card__header, .project-card--featured .project-card__summary, .project-card--featured .project-card__footer { grid-column: auto; } .project-card--featured h3 { max-width: 16ch; font-size: clamp(1.5rem, 1.8vw, 1.88rem); line-height: 1; letter-spacing: -0.04em; color: #fff; } .project-card--featured .project-card__summary { max-width: 20.5rem; font-size: 0.86rem; line-height: 1.54; color: rgba(255, 255, 255, 0.74); } .project-card--featured .project-card__evidence { display: none; } .project-card--featured .project-card__meta-row { gap: 0.45rem; font-size: 0.68rem; color: rgba(255, 255, 255, 0.68); } .project-card--featured .project-card__details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; padding: clamp(1rem, 1.4vw, 1.3rem) 0 0; border-top: 0; border-bottom: 0; background: linear-gradient(90deg, rgba(23, 26, 24, 0.62), rgba(23, 26, 24, 0.08)) 0 0 / 100% 1px no-repeat; } .project-card--featured .project-card__detail { position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; align-items: start; gap: 0.42rem; min-width: 0; padding: clamp(1rem, 1.45vw, 1.35rem) clamp(1rem, 1.65vw, 1.55rem) 0 0; border-right: 0; color: var(--color-text); } .project-card--featured .project-card__detail::before { content: ""; position: absolute; top: clamp(1rem, 1.45vw, 1.35rem); left: 0; width: 1px; height: 100%; background: rgba(23, 26, 24, 0.095); } .project-card--featured .project-card__detail:first-child { padding-left: 0; } .project-card--featured .project-card__detail:first-child::before { display: none; } .project-card--featured .project-card__detail:not(:first-child) { padding-left: clamp(1rem, 1.65vw, 1.55rem); } .project-card--featured .project-card__detail:last-child { padding-right: 0; } .project-card--featured .project-card__detail strong { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: rgba(80, 85, 79, 0.78); } .project-card--featured .project-card__detail span { display: block; font-family: var(--font-heading); font-size: clamp(1rem, 1.22vw, 1.18rem); font-weight: 700; line-height: 1.3; color: var(--color-dark); } .project-card--featured .project-card__footer { padding-top: 0.18rem; } .project-card--featured .project-card__meta-tag, .project-card--featured .project-card__footer, .project-card--featured .text-link { color: rgba(255, 255, 255, 0.74); } .project-card__image { overflow: hidden; border-radius: 0; background: linear-gradient(140deg, rgba(17, 22, 19, 0.24), rgba(17, 22, 19, 0.05)), var(--color-sage); aspect-ratio: 16 / 10; } .project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1); } .project-card__image--alternate-crop img { object-position: 64% 50%; transform: scale(1.045); } .project-card:hover .project-card__image img, .project-card:focus-within .project-card__image img { transform: scale(1.014); } .project-card--featured:hover .project-card__image img, .project-card--featured:focus-within .project-card__image img { transform: scale(1.016); } .project-card--featured:hover .project-card__image--alternate-crop img, .project-card--featured:focus-within .project-card__image--alternate-crop img { transform: scale(1.06); } .motion-enhanced .motion-reveal { opacity: 0; transform: translateY(1.15rem); transition: opacity 860ms var(--ease-out-soft), transform 860ms var(--ease-out-soft); transition-delay: calc(var(--motion-index, 0) * 72ms); } .motion-enhanced .motion-load { opacity: 0; transform: translateY(0.95rem); transition: opacity 940ms var(--ease-out-soft), transform 940ms var(--ease-out-soft); transition-delay: calc(180ms + var(--motion-index, 0) * 105ms); } .motion-enhanced .motion-reveal.is-visible { opacity: 1; transform: translateY(0); } .motion-enhanced.motion-loaded .motion-load { opacity: 1; transform: translateY(0); } .motion-enhanced .hero-actions.motion-load { transform: translateY(0.65rem); } .motion-enhanced .hero-proofline.motion-load, .motion-enhanced .home-hero .hero-actions.motion-load { transform: translateY(0.55rem); } .motion-enhanced .home-hero__main.motion-reveal { transform: translateY(0.65rem); transition-duration: 880ms; } .motion-enhanced .delivery-confidence__steps li.motion-reveal { transform: translateY(0.75rem); } .heading-motion { --heading-motion-x: 0; --heading-motion-y: 0; --heading-motion-delay: 0ms; display: block; } .heading-motion__inner { display: block; will-change: transform, opacity; } .motion-enhanced .heading-motion { overflow: hidden; } .motion-enhanced .heading-motion .heading-motion__inner { opacity: 0; transform: translate3d(var(--heading-motion-x), var(--heading-motion-y), 0); transition: opacity 880ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 980ms cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--heading-motion-delay); } .motion-enhanced .heading-motion.is-visible .heading-motion__inner { opacity: 1; transform: translate3d(0, 0, 0); } .motion-enhanced h1.heading-motion .heading-motion__inner, .motion-enhanced h2.heading-motion .heading-motion__inner { --heading-motion-y: clamp(3.2rem, 6vw, 5.6rem); } .motion-enhanced .eyebrow.heading-motion .heading-motion__inner { --heading-motion-y: 1.25rem; } .motion-enhanced .lead.heading-motion .heading-motion__inner, .motion-enhanced .site-footer__brand > p.heading-motion .heading-motion__inner { --heading-motion-y: 2rem; } .motion-enhanced .projects-showcase__intro h2.heading-motion .heading-motion__inner, .motion-enhanced .process-journey__lead h2.heading-motion .heading-motion__inner { --heading-motion-x: -2.8rem; --heading-motion-y: 3.2rem; } .motion-enhanced .capability-band__lead h2.heading-motion .heading-motion__inner, .motion-enhanced .closing-cta__lead h2.heading-motion .heading-motion__inner { --heading-motion-x: 2.6rem; --heading-motion-y: 3.4rem; } .motion-heading-right, .motion-copy-up { --target-motion-delay: 0ms; } body.motion-ready .motion-heading-right, body.motion-ready .motion-copy-up { opacity: 0; transition: opacity 1450ms cubic-bezier(0.16, 1, 0.3, 1), transform 1500ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--target-motion-delay); } body.motion-ready .motion-heading-right { transform: translate3d(clamp(7.5rem, 10vw, 10rem), 0, 0); } body.motion-ready .motion-copy-up { transform: translate3d(0, clamp(5rem, 7vw, 7.5rem), 0); transition-duration: 1300ms; } body.motion-ready .motion-heading-right.is-visible, body.motion-ready .motion-copy-up.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .project-card__location, .project-card__footer { font-size: 0.92rem; color: var(--color-muted); } .project-card__scope { display: grid; gap: 0.55rem; padding-left: 1.1rem; margin: 0; color: var(--color-text); } .project-location { font-weight: 600; color: var(--color-muted); } .section-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem); gap: var(--space-5); align-items: end; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(23, 26, 24, 0.08); } .offer-grid, .priority-grid, .trust-grid, .conversion-grid { display: grid; gap: var(--space-4); } .offer-grid { grid-template-columns: 1.15fr 1fr; } .priority-grid, .trust-grid, .conversion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .section--capability-band { position: relative; padding-block: clamp(4.5rem, 6.4vw, 7.2rem); background: radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.075), transparent 30%), linear-gradient(118deg, #050806 0%, #0d1410 58%, #070a08 100%); border-top: 1px solid rgba(199, 185, 149, 0.18); overflow: hidden; } .section--capability-band::before { content: ""; position: absolute; inset: auto auto -16% -9%; width: clamp(20rem, 38vw, 42rem); height: clamp(20rem, 38vw, 42rem); background: radial-gradient(circle at 50% 50%, rgba(111, 117, 85, 0.18), transparent 66%); opacity: 0.34; transform: translate3d(-2.5%, 0, 0); transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .section--capability-band::after { content: ""; position: absolute; inset: clamp(1.2rem, 2.2vw, 1.9rem); background: linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 25% 100%, linear-gradient(180deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px) 0 0 / 100% 50%; opacity: 0.13; pointer-events: none; } .motion-ready .section--capability-band:has(.motion-reveal.is-visible)::before { opacity: 0.48; transform: translate3d(0, 0, 0); } .capability-band { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.68fr) minmax(17rem, 0.32fr); gap: clamp(1.75rem, 3.6vw, 4rem); align-items: start; padding: 0; color: rgba(255, 255, 255, 0.9); } .capability-band__lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.68fr) minmax(17rem, 0.32fr); gap: inherit; align-items: start; padding-right: 0; padding-bottom: clamp(1.85rem, 3vw, 2.85rem); border-bottom: 1px solid rgba(255, 255, 255, 0.085); } .capability-band__lead h2 { max-width: 17ch; font-size: clamp(2.9rem, 4.45vw, 4.95rem); line-height: 0.88; letter-spacing: -0.06em; color: #fff; } .capability-band__lead .eyebrow { grid-column: 1; } .capability-band__lead h2 { grid-column: 1; } .capability-band__lead .lead, .capability-band__assurance { grid-column: 2; } .capability-band__lead .eyebrow, .capability-band__lead .lead { color: rgba(255, 255, 255, 0.68); } .capability-band__assurance { max-width: 29rem; padding-top: 1.05rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.88rem; font-weight: 700; color: rgba(255, 255, 255, 0.76); } .capability-band__list { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; margin: 0; list-style: none; border-top: 0; border-left: 0; } .capability-band__list li { position: relative; display: grid; grid-template-columns: minmax(9rem, 0.32fr) minmax(0, 0.68fr); gap: clamp(1.1rem, 2.4vw, 2.5rem); min-height: 0; align-items: start; padding: clamp(1rem, 1.55vw, 1.35rem) 0; border-top: 1px solid rgba(255, 255, 255, 0.095); border-top: 0; border-right: 0; border-bottom: 0; } .capability-band__list li::before { display: none; } .capability-band__list li:nth-child(2) { margin-top: 0; } .capability-band__list li:nth-child(3) { margin-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.095); } .capability-band__list li:last-child { border-right: 0; padding-right: 0; } .capability-band__list h3 { margin-bottom: 0; font-size: clamp(1.18rem, 1.36vw, 1.38rem); line-height: 1.05; color: #fff; } .capability-band__list p { max-width: 34rem; font-size: 0.94rem; line-height: 1.58; color: rgba(255, 255, 255, 0.7); } .capability-band__spine { grid-column: 2; display: flex; flex-direction: row; flex-wrap: wrap; align-content: start; gap: 0; min-height: 0; padding: clamp(1.05rem, 2vw, 1.65rem) 0 0 clamp(1.35rem, 2.5vw, 2.4rem); border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.12); } .capability-band__spine span { display: inline-flex; width: 100%; padding: 0.72rem 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.11); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); } .capability-band__spine span:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .section--delivery-confidence { position: relative; padding-block: clamp(5.8rem, 8.4vw, 9.8rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px) 0 0 / 12.5% 100%, radial-gradient(circle at 82% 17%, rgba(138, 106, 54, 0.105), transparent 27%), linear-gradient(180deg, #f4f0e8 0%, #eee7da 100%); overflow: hidden; } .section--delivery-confidence::before { content: ""; position: absolute; inset: clamp(1rem, 1.6vw, 1.5rem); border: 1px solid rgba(23, 26, 24, 0.075); pointer-events: none; } .section--delivery-confidence::after { content: ""; position: absolute; top: clamp(5rem, 8vw, 8rem); right: clamp(1.6rem, 4vw, 4.5rem); width: clamp(7rem, 13vw, 14rem); height: 1px; background: rgba(138, 106, 54, 0.42); pointer-events: none; } .delivery-confidence { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(2.9rem, 5.9vw, 6.8rem); align-items: start; padding-top: 0; border-top: 0; } .delivery-confidence__lead { display: grid; grid-template-columns: minmax(0, 0.56fr) minmax(19rem, 0.36fr); gap: clamp(1.9rem, 4vw, 4.6rem); align-content: start; max-width: none; padding: 0; border-top: 0; border-bottom: 0; } .delivery-confidence__lead h2 { max-width: 17ch; font-size: clamp(3rem, 5vw, 5.95rem); line-height: 0.88; letter-spacing: -0.06em; color: var(--color-dark); } .delivery-confidence__lead .eyebrow, .delivery-confidence__lead h2 { grid-column: 1; } .delivery-confidence__lead .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 34rem; font-size: clamp(1rem, 1.08vw, 1.12rem); line-height: 1.68; } .delivery-confidence__route { --route-line-top: clamp(1.55rem, 2.3vw, 2.15rem); --route-progress: 1; position: relative; padding: clamp(1.1rem, 1.7vw, 1.7rem) 0 clamp(1.1rem, 1.7vw, 1.7rem); border-top: 1px solid rgba(23, 26, 24, 0.18); border-bottom: 1px solid rgba(23, 26, 24, 0.12); } .delivery-confidence__route::before, .delivery-confidence__route::after { display: none; } .delivery-confidence__route::before { background: linear-gradient(90deg, rgba(23, 26, 24, 0.16), rgba(23, 26, 24, 0.56), rgba(23, 26, 24, 0.16)); } .delivery-confidence__route::after { background: linear-gradient(90deg, transparent, rgba(138, 106, 54, 0.72), transparent); transform: scaleX(var(--route-progress)); transform-origin: left center; } .delivery-confidence__route-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: clamp(1.2rem, 2.3vw, 2.25rem); font-size: 0.67rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(23, 26, 24, 0.52); } .delivery-confidence__route-meta span { display: inline-flex; align-items: center; gap: 0.55rem; } .delivery-confidence__route-meta span::before, .delivery-confidence__route-meta span::after { content: ""; width: 2.3rem; height: 1px; background: rgba(138, 106, 54, 0.5); } .delivery-confidence__route-meta span:first-child::after, .delivery-confidence__route-meta span:last-child::before { display: none; } .delivery-confidence__experience { display: grid; gap: clamp(2rem, 4.6vw, 5rem); } .delivery-confidence__active { position: relative; display: grid; grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 0.66fr); gap: clamp(1.4rem, 4vw, 4.2rem); align-items: end; min-height: clamp(16rem, 22vw, 22rem); padding: clamp(2rem, 4vw, 4.4rem); background: linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 16.66% 100%, radial-gradient(circle at 83% 18%, rgba(199, 185, 149, 0.16), transparent 30%), linear-gradient(125deg, #070b09 0%, #111813 58%, #080c0a 100%); border: 1px solid rgba(23, 26, 24, 0.2); box-shadow: 0 36px 92px rgba(23, 26, 24, 0.16); color: rgba(255, 255, 255, 0.84); overflow: hidden; isolation: isolate; } .delivery-confidence__active::before, .delivery-confidence__active::after { content: ""; position: absolute; pointer-events: none; } .delivery-confidence__active::before { inset: clamp(0.8rem, 1.4vw, 1.2rem); border: 1px solid rgba(255, 255, 255, 0.075); z-index: 0; } .delivery-confidence__active::after { right: clamp(1.6rem, 4vw, 4.4rem); bottom: clamp(1.6rem, 3vw, 3.2rem); width: clamp(8rem, 20vw, 19rem); height: 1px; background: rgba(199, 185, 149, 0.56); z-index: 0; } .delivery-confidence__active-number { position: relative; z-index: 1; font-family: var(--font-heading); font-size: clamp(7rem, 15vw, 17rem); font-weight: 800; line-height: 0.62; letter-spacing: -0.12em; color: rgba(199, 185, 149, 0.24); text-shadow: 0 0 44px rgba(199, 185, 149, 0.11); transition: opacity 420ms var(--ease-out-soft), transform 520ms var(--ease-premium); } .delivery-confidence__active-copy { position: relative; z-index: 1; display: grid; gap: clamp(0.65rem, 1.2vw, 1rem); max-width: 42rem; transition: opacity 260ms var(--ease-out-soft), transform 360ms var(--ease-out-soft); } .delivery-confidence__active.is-updating .delivery-confidence__active-copy { opacity: 0; transform: translateY(0.55rem); } .delivery-confidence__active.is-updating .delivery-confidence__active-number { opacity: 0.38; transform: translateX(0.45rem) scale(0.985); } .delivery-confidence__active-copy small { width: fit-content; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(199, 185, 149, 0.9); } .delivery-confidence__active-copy h3 { max-width: 13ch; font-size: clamp(2.25rem, 4.6vw, 5rem); line-height: 0.9; letter-spacing: -0.058em; color: #fff; } .delivery-confidence__active-copy p { max-width: 35rem; font-size: clamp(1rem, 1.16vw, 1.18rem); line-height: 1.66; color: rgba(255, 255, 255, 0.68); } .delivery-confidence__steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: clamp(2.4rem, 3.6vw, 3.3rem) 0 0; margin: 0; list-style: none; border-top: 0; border-bottom: 0; counter-reset: delivery-step; } .delivery-confidence__steps::before { content: ""; position: absolute; top: var(--route-line-top); left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(23, 26, 24, 0.16), rgba(23, 26, 24, 0.56), rgba(23, 26, 24, 0.16)); pointer-events: none; } .delivery-confidence__steps::after { content: ""; position: absolute; top: var(--route-line-top); left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(138, 106, 54, 0.72), transparent); transform: scaleX(var(--route-progress)); transform-origin: left center; pointer-events: none; } .delivery-confidence__steps li { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(0.5rem, 0.9vw, 0.8rem); align-items: start; min-height: 0; padding: 0 clamp(0.85rem, 1.45vw, 1.35rem) clamp(1.4rem, 2.3vw, 2rem) 0; border-top: 0; border-right: 0; border-bottom: 0; background: transparent; color: var(--color-text); isolation: isolate; cursor: default; transition: opacity 320ms var(--ease-out-soft), transform 360ms var(--ease-out-soft), filter 360ms var(--ease-out-soft); } .delivery-confidence__steps li + li { padding-left: 0; } .delivery-confidence__steps li:last-child { border-right: 0; border-bottom: 0; } .delivery-confidence__steps li::before { content: ""; position: absolute; top: calc(var(--route-line-top) - clamp(2.4rem, 3.6vw, 3.3rem)); left: 0; width: clamp(0.82rem, 1vw, 0.98rem); height: clamp(0.82rem, 1vw, 0.98rem); border: 1px solid rgba(23, 26, 24, 0.72); border-radius: 999px; background: var(--color-bg); transform: translateY(-50%); z-index: 1; transition: background-color 260ms var(--ease-out-soft), border-color 260ms var(--ease-out-soft), transform 260ms var(--ease-out-soft); } .delivery-confidence__steps li::after { content: ""; position: absolute; z-index: -1; inset: clamp(-0.9rem, -1.4vw, -0.5rem) clamp(0.25rem, 0.8vw, 0.7rem) clamp(0.5rem, 1vw, 0.9rem) clamp(-0.9rem, -1.2vw, -0.5rem); border: 1px solid rgba(138, 106, 54, 0.16); background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06)), radial-gradient(circle at 18% 4%, rgba(138, 106, 54, 0.16), transparent 34%); box-shadow: 0 22px 58px rgba(23, 26, 24, 0.065); opacity: 0; transform: translateY(0.55rem) scale(0.985); transition: opacity 360ms var(--ease-out-soft), transform 420ms var(--ease-out-soft), border-color 360ms var(--ease-out-soft); pointer-events: none; } .delivery-confidence__steps li:nth-child(even) { padding-top: clamp(2.3rem, 4vw, 4.4rem); } .delivery-confidence__steps span { font-family: var(--font-heading); font-size: clamp(4.5rem, 6.8vw, 7.75rem); font-weight: 800; line-height: 0.66; letter-spacing: -0.105em; text-transform: uppercase; color: rgba(138, 106, 54, 0.3); transition: color 260ms var(--ease-out-soft), transform 260ms var(--ease-out-soft); } .delivery-confidence__steps small { display: inline-flex; width: fit-content; padding-top: 0.1rem; font-size: 0.64rem; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(138, 106, 54, 0.76); } .delivery-confidence__steps h3 { max-width: 13rem; font-size: clamp(1.04rem, 1.22vw, 1.3rem); line-height: 1.05; color: var(--color-dark); transition: color 260ms var(--ease-out-soft), transform 300ms var(--ease-out-soft); } .delivery-confidence__steps p { grid-column: auto; max-width: 16rem; font-size: 0.87rem; line-height: 1.55; color: var(--color-muted); transition: color 280ms var(--ease-out-soft), opacity 280ms var(--ease-out-soft), transform 320ms var(--ease-out-soft); } .delivery-confidence__route.is-interacting .delivery-confidence__steps li:not(.is-step-active) { opacity: 0.43; filter: saturate(0.78); } .delivery-confidence__steps li:hover, .delivery-confidence__steps li:focus-visible, .delivery-confidence__steps li.is-step-active { transform: translateY(-0.32rem); } .delivery-confidence__steps li:focus-visible { outline: 1px solid rgba(138, 106, 54, 0.72); outline-offset: 0.45rem; } .delivery-confidence__steps li:hover::before, .delivery-confidence__steps li:focus-visible::before, .delivery-confidence__steps li.is-step-active::before { border-color: rgba(138, 106, 54, 0.9); background: rgba(138, 106, 54, 0.9); box-shadow: 0 0 0 0.5rem rgba(138, 106, 54, 0.12), 0 0 2.2rem rgba(138, 106, 54, 0.18); transform: translateY(-50%) scale(1.18); } .delivery-confidence__steps li:hover span, .delivery-confidence__steps li:focus-visible span, .delivery-confidence__steps li.is-step-active span { color: rgba(138, 106, 54, 0.58); transform: translateY(-0.16rem) scale(1.045); } .delivery-confidence__steps li:hover::after, .delivery-confidence__steps li:focus-visible::after, .delivery-confidence__steps li.is-step-active::after { border-color: rgba(138, 106, 54, 0.24); opacity: 1; transform: translateY(0) scale(1); } .delivery-confidence__steps li:hover h3, .delivery-confidence__steps li:focus-visible h3, .delivery-confidence__steps li.is-step-active h3 { color: #111611; transform: translateY(-0.05rem); } .delivery-confidence__steps li:hover p, .delivery-confidence__steps li:focus-visible p, .delivery-confidence__steps li.is-step-active p { color: rgba(23, 26, 24, 0.82); opacity: 1; transform: translateY(-0.04rem); } .motion-enhanced .delivery-confidence__steps::after { transform: scaleX(0); transform-origin: left center; transition: transform 1200ms var(--ease-out-soft); } .motion-enhanced .delivery-confidence__lead.is-visible + .delivery-confidence__route .delivery-confidence__steps::after, .motion-enhanced .delivery-confidence__route:has(.motion-reveal.is-visible) .delivery-confidence__steps::after { transform: scaleX(var(--route-progress)); } .section--process-journey { position: relative; padding-block: clamp(6rem, 8.8vw, 10.5rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px) 0 0 / 12.5% 100%, radial-gradient(circle at 82% 16%, rgba(138, 106, 54, 0.11), transparent 28%), linear-gradient(180deg, #f5f1e9 0%, #ebe5d9 100%); overflow: hidden; } .section--process-journey::before { content: ""; position: absolute; inset: clamp(1rem, 1.6vw, 1.5rem); border: 1px solid rgba(23, 26, 24, 0.075); pointer-events: none; } .section--process-journey::after { content: ""; position: absolute; top: clamp(4.6rem, 8vw, 8rem); right: clamp(1.4rem, 4vw, 4.5rem); width: clamp(8rem, 17vw, 18rem); height: 1px; background: rgba(138, 106, 54, 0.48); pointer-events: none; } .process-journey { position: relative; z-index: 1; display: grid; gap: clamp(3rem, 6vw, 7rem); } .process-journey__lead { display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(20rem, 0.36fr); gap: clamp(1.9rem, 4vw, 4.8rem); align-content: start; } .process-journey__lead h2 { grid-column: 1; max-width: 17ch; font-size: clamp(3rem, 5vw, 5.95rem); line-height: 0.88; letter-spacing: -0.06em; color: var(--color-dark); } .process-journey__lead .eyebrow { grid-column: 1; } .process-journey__lead .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 35rem; font-size: clamp(1rem, 1.08vw, 1.12rem); line-height: 1.68; } .process-journey__system { --process-progress: 0; --process-x: 12%; --process-y: 24%; --process-drift-x: 0px; --process-drift-y: 0px; --process-drift-x-soft: 0px; --process-drift-y-soft: 0px; --process-drift-x-inverse: 0px; --process-drift-y-inverse: 0px; --process-accent-scale: 0.28; position: relative; display: grid; grid-template-columns: minmax(0, 0.64fr) minmax(20rem, 0.36fr); gap: 0; min-height: clamp(37rem, 54vw, 48rem); padding: clamp(0.75rem, 1.2vw, 1rem); background: radial-gradient(circle at var(--process-x) var(--process-y), rgba(199, 185, 149, 0.2), transparent 23%), linear-gradient(135deg, rgba(255, 255, 255, 0.075), transparent 42%), linear-gradient(180deg, #101612 0%, #070b09 100%); border: 1px solid rgba(23, 26, 24, 0.18); box-shadow: 0 38px 96px rgba(23, 26, 24, 0.18); color: rgba(255, 255, 255, 0.82); overflow: hidden; isolation: isolate; transition: background-position 560ms var(--ease-premium); } .process-journey__system::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 16.66% 100%, linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 25%, radial-gradient(circle at 78% 22%, rgba(199, 185, 149, 0.16), transparent 29%); transform: translate3d(var(--process-drift-x-inverse), var(--process-drift-y-inverse), 0); transition: transform 520ms var(--ease-premium); pointer-events: none; } .process-journey__system::after { content: ""; position: absolute; z-index: 0; top: var(--process-y); left: var(--process-x); width: clamp(7rem, 14vw, 14rem); height: clamp(7rem, 14vw, 14rem); border: 1px solid rgba(199, 185, 149, 0.2); border-radius: 999px; opacity: 0.7; transform: translate(calc(-50% + var(--process-drift-x)), calc(-50% + var(--process-drift-y))); transition: top 520ms var(--ease-premium), left 520ms var(--ease-premium), transform 520ms var(--ease-premium), opacity 300ms var(--ease-out-soft); pointer-events: none; } .process-journey__trace { position: absolute; inset: clamp(0.75rem, 1.2vw, 1rem); z-index: 1; pointer-events: none; transform: translate3d(var(--process-drift-x-soft), var(--process-drift-y-soft), 0); transition: transform 520ms var(--ease-premium); } .process-journey__trace span { position: absolute; background: rgba(199, 185, 149, 0.2); transform-origin: left center; } .process-journey__trace span:nth-child(1) { top: 18%; left: 7%; width: 42%; height: 1px; transform: rotate(-7deg); } .process-journey__trace span:nth-child(2) { right: 34%; top: 10%; width: 1px; height: 72%; background: rgba(255, 255, 255, 0.075); } .process-journey__trace span:nth-child(3) { right: 6%; bottom: 18%; width: 36%; height: 1px; transform: rotate(-12deg); } .process-journey__stage { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; align-content: end; min-height: 100%; padding: clamp(2.35rem, 5.2vw, 6.2rem); border: 1px solid rgba(255, 255, 255, 0.095); border-right: 0; background: radial-gradient(circle at var(--process-x) var(--process-y), rgba(199, 185, 149, 0.14), transparent 31%), linear-gradient(130deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)); overflow: hidden; transition: background 520ms var(--ease-premium), border-color 340ms var(--ease-out-soft); } .process-journey__stage::before, .process-journey__stage::after { content: ""; position: absolute; pointer-events: none; } .process-journey__stage::before { inset: clamp(0.85rem, 1.3vw, 1.2rem); border: 1px solid rgba(255, 255, 255, 0.06); transform: translate3d(var(--process-drift-x-soft), var(--process-drift-y-soft), 0); transition: transform 520ms var(--ease-premium); } .process-journey__stage::after { left: clamp(2rem, 5vw, 6rem); right: clamp(2rem, 6vw, 7rem); bottom: clamp(2rem, 4vw, 4.3rem); width: auto; height: 1px; background: linear-gradient(90deg, rgba(199, 185, 149, 0.72), transparent); transform: scaleX(var(--process-accent-scale)); transform-origin: left center; transition: transform 520ms var(--ease-premium); } .process-journey__stage-meta { position: absolute; z-index: 2; top: clamp(1.4rem, 2.4vw, 2.4rem); left: clamp(1.5rem, 3vw, 3.4rem); right: clamp(1.5rem, 3vw, 3.4rem); display: flex; justify-content: space-between; gap: 1rem; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(255, 255, 255, 0.48); } .process-journey__ghost-number { position: absolute; z-index: 1; left: clamp(1.7rem, 3vw, 3.4rem); top: 50%; font-family: var(--font-heading); font-size: clamp(13rem, 26vw, 30rem); font-weight: 800; line-height: 0.58; letter-spacing: -0.13em; color: rgba(199, 185, 149, 0.19); text-shadow: 0 0 54px rgba(199, 185, 149, 0.12); transform: translateY(-50%) translate3d(var(--process-drift-x-soft), var(--process-drift-y-soft), 0); transition: opacity 440ms var(--ease-out-soft), transform 620ms var(--ease-premium); } .process-journey__stage-copy { position: relative; z-index: 2; display: grid; gap: clamp(0.7rem, 1.3vw, 1.1rem); max-width: 45rem; margin-left: clamp(7.2rem, 12vw, 15rem); transition: opacity 280ms var(--ease-out-soft), transform 420ms var(--ease-out-soft); } .process-journey__stage.is-updating .process-journey__stage-copy { opacity: 0; transform: translateY(0.75rem); } .process-journey__stage.is-updating .process-journey__ghost-number { opacity: 0.34; transform: translateY(-50%) translateX(0.7rem) translate3d(var(--process-drift-x-soft), var(--process-drift-y-soft), 0) scale(0.985); } .process-journey__stage-copy small { width: fit-content; font-size: 0.7rem; font-weight: 850; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(199, 185, 149, 0.94); } .process-journey__stage-copy h3 { max-width: 13ch; font-size: clamp(2.8rem, 5.7vw, 6.6rem); line-height: 0.88; letter-spacing: -0.064em; color: #fff; } .process-journey__stage-copy p { max-width: 36rem; font-size: clamp(1.02rem, 1.2vw, 1.24rem); line-height: 1.62; color: rgba(255, 255, 255, 0.68); } .process-journey__route { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 0; align-content: stretch; padding: clamp(1.65rem, 2.8vw, 3rem) 0; margin: 0; list-style: none; border: 1px solid rgba(255, 255, 255, 0.095); background: rgba(255, 255, 255, 0.028); } .process-journey__route::before, .process-journey__route::after { content: ""; position: absolute; top: clamp(2rem, 3vw, 3rem); bottom: clamp(2rem, 3vw, 3rem); left: clamp(3.25rem, 4.5vw, 4.3rem); width: 1px; height: auto; pointer-events: none; } .process-journey__route::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16)); } .process-journey__route::after { background: linear-gradient(180deg, transparent, rgba(199, 185, 149, 0.9), transparent); transform: scaleY(var(--process-progress)); transform-origin: top center; transition: transform 520ms var(--ease-premium); } .process-journey__route li { position: relative; display: grid; grid-template-columns: clamp(4.1rem, 5vw, 5.2rem) 1fr; gap: 0.26rem clamp(0.8rem, 1.3vw, 1.2rem); align-content: start; min-height: 0; padding: clamp(1rem, 1.55vw, 1.45rem) clamp(1rem, 1.5vw, 1.4rem) clamp(1rem, 1.55vw, 1.45rem) 0; color: rgba(255, 255, 255, 0.62); cursor: pointer; isolation: isolate; transition: opacity 320ms var(--ease-out-soft), transform 380ms var(--ease-out-soft), color 300ms var(--ease-out-soft); } .process-journey__route li::before { content: ""; position: absolute; top: 50%; left: clamp(3.25rem, 4.5vw, 4.3rem); width: clamp(0.76rem, 1vw, 0.96rem); height: clamp(0.76rem, 1vw, 0.96rem); border: 1px solid rgba(255, 255, 255, 0.48); border-radius: 999px; background: var(--color-ink); transform: translate(-50%, -50%); transition: background-color 280ms var(--ease-out-soft), border-color 280ms var(--ease-out-soft), box-shadow 320ms var(--ease-out-soft), transform 320ms var(--ease-out-soft); } .process-journey__route li::after { content: ""; position: absolute; z-index: -1; inset: 0 clamp(0.7rem, 1vw, 1rem) 0 clamp(0.72rem, 1vw, 1rem); border: 1px solid rgba(199, 185, 149, 0.15); background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)), radial-gradient(circle at 10% 0%, rgba(199, 185, 149, 0.13), transparent 34%); opacity: 0; transform: translateY(0.5rem) scale(0.985); transition: opacity 340ms var(--ease-out-soft), transform 420ms var(--ease-out-soft); pointer-events: none; } .process-journey__route span { grid-column: 1; grid-row: 1 / span 3; align-self: center; justify-self: center; font-family: var(--font-heading); font-size: clamp(2.75rem, 4.2vw, 4.6rem); font-weight: 800; line-height: 0.7; letter-spacing: -0.095em; color: rgba(199, 185, 149, 0.31); transition: color 280ms var(--ease-out-soft), transform 380ms var(--ease-out-soft); } .process-journey__route small { grid-column: 2; width: fit-content; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(199, 185, 149, 0.7); } .process-journey__route h3 { grid-column: 2; max-width: 12rem; font-size: clamp(1rem, 1.12vw, 1.2rem); line-height: 1.07; color: rgba(255, 255, 255, 0.82); transition: color 280ms var(--ease-out-soft), transform 300ms var(--ease-out-soft); } .process-journey__route p { grid-column: 2; max-width: 15.5rem; font-size: 0.82rem; line-height: 1.52; color: rgba(255, 255, 255, 0.48); transition: color 280ms var(--ease-out-soft), opacity 280ms var(--ease-out-soft), transform 320ms var(--ease-out-soft); } .process-journey__system.is-interacting .process-journey__route li:not(.is-step-active) { opacity: 0.36; } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { color: rgba(255, 255, 255, 0.9); transform: translateX(-0.35rem); } .process-journey__route li:focus-visible { outline: 1px solid rgba(199, 185, 149, 0.78); outline-offset: 0.45rem; } .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before, .process-journey__route li.is-step-active::before { border-color: rgba(199, 185, 149, 0.95); background: rgba(199, 185, 149, 0.95); box-shadow: 0 0 0 0.55rem rgba(199, 185, 149, 0.11), 0 0 2.4rem rgba(199, 185, 149, 0.22); transform: translate(-50%, -50%) scale(1.16); } .process-journey__route li:hover::after, .process-journey__route li:focus-visible::after, .process-journey__route li.is-step-active::after { opacity: 1; transform: translateY(0) scale(1); } .process-journey__route li:hover span, .process-journey__route li:focus-visible span, .process-journey__route li.is-step-active span { color: rgba(199, 185, 149, 0.68); transform: translateY(-0.12rem) scale(1.045); } .process-journey__route li:hover h3, .process-journey__route li:focus-visible h3, .process-journey__route li.is-step-active h3 { color: #fff; transform: translateY(-0.04rem); } .process-journey__route li:hover p, .process-journey__route li:focus-visible p, .process-journey__route li.is-step-active p { color: rgba(255, 255, 255, 0.68); opacity: 1; transform: translateY(-0.04rem); } .motion-enhanced .process-journey__route::after { transform: scaleY(0); } .motion-enhanced .process-journey__system:has(.motion-reveal.is-visible) .process-journey__route::after, .motion-enhanced .process-journey__lead.is-visible + .process-journey__system .process-journey__route::after { transform: scaleY(var(--process-progress)); } .section--process-journey { background: linear-gradient(90deg, rgba(23, 26, 24, 0.04) 1px, transparent 1px) 0 0 / 8.333% 100%, linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 34%), radial-gradient(circle at 78% 18%, rgba(138, 106, 54, 0.13), transparent 29%), linear-gradient(180deg, #f4f0e8 0%, #e8e1d5 100%); } .process-journey { gap: clamp(3.4rem, 6.4vw, 7.4rem); } .process-journey__lead h2 { max-width: 16.5ch; } .process-journey__system { --process-progress: 0.035; --process-step: 1; --route-board-glow: rgba(199, 185, 149, 0.14); grid-template-columns: minmax(23rem, 0.46fr) minmax(34rem, 0.54fr); min-height: clamp(43rem, 58vw, 53rem); padding: clamp(0.75rem, 1vw, 1rem); background: radial-gradient(circle at var(--process-x) var(--process-y), rgba(199, 185, 149, 0.18), transparent 24%), linear-gradient(90deg, rgba(255, 255, 255, 0.065) 1px, transparent 1px) 0 0 / 12.5% 100%, linear-gradient(180deg, #111713 0%, #070b09 100%); box-shadow: 0 44px 110px rgba(23, 26, 24, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .process-journey__system::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 16.66% 100%, linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 20%, radial-gradient(circle at 82% 18%, rgba(199, 185, 149, 0.16), transparent 26%), linear-gradient(135deg, transparent 0 63%, rgba(199, 185, 149, 0.07) 63.2% 63.45%, transparent 63.7%); } .process-journey__trace span:nth-child(1) { top: 16%; left: 6%; width: 57%; transform: rotate(-5deg); } .process-journey__trace span:nth-child(2) { right: 45%; top: 9%; height: 78%; } .process-journey__trace span:nth-child(3) { right: 5%; bottom: 13%; width: 48%; transform: rotate(-9deg); } .process-journey__stage { min-height: auto; border-right: 1px solid rgba(255, 255, 255, 0.095); background: radial-gradient(circle at 15% 25%, rgba(199, 185, 149, 0.14), transparent 28%), linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012)); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.035), 18px 0 70px rgba(0, 0, 0, 0.12); } .process-journey__stage::after { right: clamp(2rem, 4vw, 5rem); transform: scaleX(var(--process-accent-scale)); } .process-journey__ghost-number { left: clamp(1rem, 2.2vw, 2.6rem); font-size: clamp(14rem, 26vw, 31rem); color: rgba(199, 185, 149, 0.21); transform: translateY(-50%) translate3d(var(--process-drift-x-soft), var(--process-drift-y-soft), 0) scale(calc(0.98 + (var(--process-progress) * 0.05))); } .process-journey__stage-copy { max-width: 36rem; margin-left: clamp(5.6rem, 10vw, 12.5rem); } .process-journey__stage-copy small { position: relative; padding-left: 3.1rem; } .process-journey__stage-copy small::before { content: ""; position: absolute; left: 0; top: 50%; width: 2.35rem; height: 1px; background: rgba(199, 185, 149, 0.72); } .process-journey__route-board { position: relative; z-index: 2; min-height: 100%; padding: clamp(1.35rem, 2.2vw, 2.4rem); border: 1px solid rgba(255, 255, 255, 0.095); border-left: 0; background: radial-gradient(circle at var(--process-x) var(--process-y), var(--route-board-glow), transparent 22%), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 20% 100%, linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); overflow: hidden; } .process-journey__route-board::before, .process-journey__route-board::after { content: ""; position: absolute; pointer-events: none; } .process-journey__route-board::before { inset: clamp(0.9rem, 1.4vw, 1.25rem); border: 1px solid rgba(255, 255, 255, 0.055); } .process-journey__route-board::after { right: clamp(1.4rem, 2.2vw, 2.4rem); bottom: clamp(1.2rem, 1.8vw, 2rem); width: clamp(8rem, 17vw, 16rem); height: 1px; background: linear-gradient(90deg, transparent, rgba(199, 185, 149, 0.58)); transform: scaleX(calc(0.42 + var(--process-progress) * 0.58)); transform-origin: right center; transition: transform 520ms var(--ease-premium); } .process-journey__route-scale { position: absolute; z-index: 3; top: clamp(1.2rem, 1.8vw, 2rem); left: clamp(1.4rem, 2.2vw, 2.4rem); right: clamp(1.4rem, 2.2vw, 2.4rem); display: flex; justify-content: space-between; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); } .process-journey__route-line { position: absolute; z-index: 1; inset: clamp(3rem, 5vw, 4.7rem) clamp(2.1rem, 3.8vw, 4.3rem) clamp(2rem, 3.2vw, 3.8rem); width: auto; height: auto; overflow: visible; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.18)); pointer-events: none; } .process-journey__route-base, .process-journey__route-fill { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .process-journey__route-base { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.2; } .process-journey__route-fill { stroke: rgba(199, 185, 149, 0.9); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--process-progress)); transition: stroke-dashoffset 620ms var(--ease-premium); } .process-journey__route { position: absolute; z-index: 2; inset: clamp(3rem, 5vw, 4.7rem) clamp(1.7rem, 3.1vw, 3.6rem) clamp(2rem, 3.2vw, 3.8rem); display: block; padding: 0; border: 0; background: transparent; } .process-journey__route::before, .process-journey__route::after { display: none; } .process-journey__route li { position: absolute; width: clamp(13.5rem, 16vw, 17.5rem); min-height: 0; padding: clamp(0.9rem, 1.2vw, 1.1rem) clamp(0.9rem, 1.25vw, 1.18rem); display: grid; grid-template-columns: auto 1fr; gap: 0.28rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.09); background: linear-gradient(145deg, rgba(8, 12, 10, 0.76), rgba(14, 20, 16, 0.54)), linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 52%); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16); backdrop-filter: blur(10px); transform: translate(-50%, -50%); } .process-journey__route li:nth-child(1) { left: 8%; top: 8%; } .process-journey__route li:nth-child(2) { left: 43%; top: 16%; } .process-journey__route li:nth-child(3) { left: 82%; top: 26%; } .process-journey__route li:nth-child(4) { left: 63%; top: 51%; } .process-journey__route li:nth-child(5) { left: 20%; top: 67%; } .process-journey__route li:nth-child(6) { left: 82%; top: 86%; } .process-journey__route li::before { top: 0; left: 0; width: 0.66rem; height: 0.66rem; border-color: rgba(255, 255, 255, 0.58); background: var(--color-ink); transform: translate(-50%, -50%); } .process-journey__route li::after { inset: -1px; border-color: rgba(199, 185, 149, 0.25); background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.018)), radial-gradient(circle at 12% 0%, rgba(199, 185, 149, 0.18), transparent 42%); transform: translateY(0.35rem) scale(0.982); } .process-journey__route span { grid-column: 1; grid-row: 1 / span 3; align-self: start; font-size: clamp(2.2rem, 3vw, 3.5rem); color: rgba(199, 185, 149, 0.38); } .process-journey__route small, .process-journey__route h3, .process-journey__route p { grid-column: 2; } .process-journey__route h3 { max-width: 9.5rem; font-size: clamp(0.94rem, 1.02vw, 1.12rem); } .process-journey__route p { max-width: 12rem; font-size: 0.76rem; line-height: 1.44; } .process-journey__system.is-interacting .process-journey__route li:not(.is-step-active) { opacity: 0.42; } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { transform: translate(-50%, -50%) scale(1.035); } .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before, .process-journey__route li.is-step-active::before { box-shadow: 0 0 0 0.52rem rgba(199, 185, 149, 0.12), 0 0 2.3rem rgba(199, 185, 149, 0.26); transform: translate(-50%, -50%) scale(1.18); } .process-journey__route li:hover span, .process-journey__route li:focus-visible span, .process-journey__route li.is-step-active span { transform: translateY(-0.08rem) scale(1.08); } .process-journey__system { --process-progress: 0.035; --process-step: 1; grid-template-columns: 1fr; gap: clamp(1rem, 1.45vw, 1.35rem); min-height: 0; padding: clamp(0.75rem, 1vw, 1rem); } .process-journey__stage { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(14rem, 0.38fr); align-items: end; min-height: clamp(23rem, 31vw, 29rem); padding: clamp(2rem, 4vw, 4.7rem); border-right: 1px solid rgba(255, 255, 255, 0.095); } .process-journey__stage-icon { position: absolute; z-index: 2; right: clamp(2rem, 4vw, 4.7rem); bottom: clamp(2rem, 3.4vw, 3.9rem); display: inline-flex; align-items: center; justify-content: center; width: clamp(5.6rem, 9vw, 9.4rem); height: clamp(5.6rem, 9vw, 9.4rem); border: 1px solid rgba(199, 185, 149, 0.32); background: linear-gradient(135deg, rgba(199, 185, 149, 0.14), rgba(255, 255, 255, 0.028)), rgba(8, 12, 10, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045); color: rgba(199, 185, 149, 0.92); transform: translate3d(var(--process-drift-x-soft), var(--process-drift-y-soft), 0); transition: color 320ms var(--ease-out-soft), border-color 320ms var(--ease-out-soft), transform 560ms var(--ease-premium); } .process-journey__stage-icon svg, .process-journey__milestone-icon svg, .process-journey__milestone-icon-source svg { display: block; width: 100%; height: 100%; } .process-journey__stage-icon svg, .process-journey__milestone-icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .process-journey__ghost-number { left: clamp(1rem, 2.2vw, 2.7rem); font-size: clamp(11rem, 22vw, 25rem); transform: translateY(-50%) translate3d(var(--process-drift-x-soft), var(--process-drift-y-soft), 0); } .process-journey__stage-copy { max-width: 42rem; margin-left: clamp(5rem, 9vw, 10.5rem); } .process-journey__route-board { min-height: 0; padding: clamp(1.25rem, 2.1vw, 2.2rem); border-left: 1px solid rgba(255, 255, 255, 0.095); overflow: visible; } .process-journey__route-board::before { z-index: 0; } .process-journey__route-board::after { display: none; } .process-journey__route-scale { position: relative; top: auto; left: auto; right: auto; z-index: 2; padding-bottom: clamp(1.05rem, 1.7vw, 1.6rem); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .process-journey__route-line { position: absolute; z-index: 1; top: clamp(6.15rem, 7.2vw, 7.8rem); left: clamp(2.2rem, 4vw, 4.2rem); right: clamp(2.2rem, 4vw, 4.2rem); height: 2px; filter: none; pointer-events: none; overflow: visible; } .process-journey__route-base, .process-journey__route-fill { position: absolute; inset: 0; display: block; height: 100%; border-radius: 999px; } .process-journey__route-base { background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)); } .process-journey__route-fill { background: linear-gradient(90deg, rgba(199, 185, 149, 0.18), rgba(199, 185, 149, 0.96)), linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.56) 46%, transparent 58%) 0 0 / 32% 100%; box-shadow: 0 0 16px rgba(199, 185, 149, 0.2), 0 0 34px rgba(199, 185, 149, 0.12); transform: scaleX(var(--process-progress)); transform-origin: left center; transition: box-shadow 320ms var(--ease-out-soft), transform 720ms var(--ease-premium); } .process-journey__route-line::before, .process-journey__route-line::after { content: ""; position: absolute; top: 50%; pointer-events: none; } .process-journey__route-line::before { left: 0; width: calc(var(--process-progress) * 100%); height: 14px; background: linear-gradient(90deg, transparent, rgba(199, 185, 149, 0.18), transparent); filter: blur(7px); opacity: 0.78; transform: translateY(-50%); transition: width 720ms var(--ease-premium); } .process-journey__route-line::after { left: calc(var(--process-progress) * 100%); width: 0.74rem; height: 0.74rem; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: 999px; background: rgba(199, 185, 149, 0.96); box-shadow: 0 0 0 0.42rem rgba(199, 185, 149, 0.13), 0 0 1.6rem rgba(199, 185, 149, 0.32); transform: translate(-50%, -50%); transition: left 720ms var(--ease-premium), opacity 280ms var(--ease-out-soft), transform 720ms var(--ease-premium); } .process-journey__system.is-interacting .process-journey__route-fill { animation: process-route-sweep 1200ms var(--ease-out-soft) both; } .process-journey__system.is-interacting .process-journey__route-line::after { animation: process-route-pulse 1200ms var(--ease-out-soft) both; } @keyframes process-route-sweep { 0% { background-position: -34% 0; } 100% { background-position: 134% 0; } } @keyframes process-route-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 42% { transform: translate(-50%, -50%) scale(1.22); } } .process-journey__route { position: relative; inset: auto; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.65rem, 1vw, 1rem); padding: clamp(1.9rem, 3vw, 2.7rem) 0 0; margin: 0; } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { position: relative; left: auto; top: auto; display: grid; grid-template-columns: 1fr; gap: 0.58rem; align-content: start; width: auto; min-height: clamp(19rem, 22vw, 23rem); padding: clamp(1.05rem, 1.25vw, 1.25rem); border-color: rgba(255, 255, 255, 0.085); background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)), rgba(8, 12, 10, 0.42); box-shadow: none; backdrop-filter: blur(9px); transform: none; } .process-journey__route li::before { top: calc(clamp(-2.75rem, -2.35vw, -1.85rem)); left: 50%; width: 0.74rem; height: 0.74rem; border-color: rgba(255, 255, 255, 0.52); background: var(--color-ink); transform: translate(-50%, -50%); } .process-journey__route li::after { inset: -1px; border-color: rgba(199, 185, 149, 0.16); background: linear-gradient(180deg, rgba(199, 185, 149, 0.11), rgba(255, 255, 255, 0.018)), radial-gradient(circle at 50% 0%, rgba(199, 185, 149, 0.15), transparent 34%); transform: translateY(0.45rem) scale(0.985); } .process-journey__milestone-icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(2.9rem, 4vw, 3.6rem); height: clamp(2.9rem, 4vw, 3.6rem); margin-bottom: clamp(0.25rem, 0.6vw, 0.55rem); border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(255, 255, 255, 0.035); color: rgba(199, 185, 149, 0.58); transition: color 300ms var(--ease-out-soft), border-color 300ms var(--ease-out-soft), background-color 300ms var(--ease-out-soft), transform 360ms var(--ease-out-soft); } .process-journey__milestone-number { grid-column: auto; grid-row: auto; align-self: auto; justify-self: start; font-family: var(--font-heading); font-size: clamp(2.3rem, 4vw, 4.1rem); font-weight: 800; line-height: 0.7; letter-spacing: -0.09em; color: rgba(199, 185, 149, 0.34); transition: color 300ms var(--ease-out-soft), transform 360ms var(--ease-out-soft); } .process-journey__route small, .process-journey__route h3, .process-journey__route p { grid-column: auto; max-width: none; } .process-journey__route small { font-size: 0.6rem; color: rgba(199, 185, 149, 0.68); } .process-journey__route h3 { max-width: 10.5rem; font-size: clamp(0.98rem, 1.04vw, 1.12rem); line-height: 1.05; } .process-journey__route p { max-width: 13.5rem; font-size: 0.76rem; line-height: 1.5; } .process-journey__system.is-interacting .process-journey__route li:not(.is-step-active) { opacity: 0.48; } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { transform: translateY(-0.45rem); } .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before, .process-journey__route li.is-step-complete::before, .process-journey__route li.is-step-active::before { border-color: rgba(199, 185, 149, 0.96); background: rgba(199, 185, 149, 0.95); box-shadow: 0 0 0 0.55rem rgba(199, 185, 149, 0.11), 0 0 2.2rem rgba(199, 185, 149, 0.24); transform: translate(-50%, -50%) scale(1.18); } .process-journey__route li.is-step-complete:not(.is-step-active)::before { box-shadow: 0 0 0 0.36rem rgba(199, 185, 149, 0.08), 0 0 1.4rem rgba(199, 185, 149, 0.15); transform: translate(-50%, -50%) scale(1.04); } .process-journey__route li:hover .process-journey__milestone-icon, .process-journey__route li:focus-visible .process-journey__milestone-icon, .process-journey__route li.is-step-complete .process-journey__milestone-icon, .process-journey__route li.is-step-active .process-journey__milestone-icon { border-color: rgba(199, 185, 149, 0.36); background: rgba(199, 185, 149, 0.12); color: rgba(199, 185, 149, 0.96); transform: translateY(-0.14rem) scale(1.05); } .process-journey__route li.is-step-complete:not(.is-step-active) .process-journey__milestone-icon { background: rgba(199, 185, 149, 0.07); color: rgba(199, 185, 149, 0.76); transform: none; } .process-journey__route li:hover .process-journey__milestone-number, .process-journey__route li:focus-visible .process-journey__milestone-number, .process-journey__route li.is-step-complete .process-journey__milestone-number, .process-journey__route li.is-step-active .process-journey__milestone-number { color: rgba(199, 185, 149, 0.8); transform: translateY(-0.08rem) scale(1.08); } .process-journey__route li.is-step-complete:not(.is-step-active) .process-journey__milestone-number { color: rgba(199, 185, 149, 0.58); transform: none; } .project-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 34rem); gap: var(--space-5); align-items: center; } .project-image { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .case-study-scope { display: grid; gap: 0.8rem; padding-left: 1.1rem; margin: 0; } .section--priorities-band { padding-top: calc(var(--space-7) - 1rem); } .priorities-band { padding: clamp(2rem, 3vw, 2.7rem); border-radius: clamp(1.4rem, 2vw, 1.9rem); background: linear-gradient(150deg, rgba(17, 22, 19, 0.98), rgba(28, 35, 30, 0.94)), var(--color-dark); color: rgba(255, 255, 255, 0.86); } .priorities-band__lead { max-width: 54rem; margin-bottom: var(--space-5); } .priorities-band__lead h2, .priorities-band__lead .eyebrow, .priorities-band__lead .lead { color: #fff; } .priorities-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .priority-pill { display: grid; grid-template-columns: 2.8rem 1fr; gap: 1rem; align-items: start; padding: 1.4rem 1.2rem 0 0; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: transparent; } .priority-pill:last-child { border-right: 0; padding-right: 0; } .priority-pill:first-child { padding-left: 0; } .priority-pill span { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.06); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.78); } .priority-pill h3 { margin-bottom: 0.55rem; } .section--closing-cta { position: relative; padding-block: clamp(3.6rem, 6vw, 5.5rem); background: var(--color-ink); color: rgba(255, 254, 250, 0.92); } .closing-cta { display: flex; flex-direction: column; } .closing-cta__lead { display: flex; flex-direction: column; gap: clamp(1.4rem, 2.5vw, 2.2rem); } .closing-cta__lead h2 { max-width: 16ch; margin: 0; font-size: var(--type-section-xl); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; color: #f0f2ee; } .section--closing-cta .eyebrow--chip { color: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.3); } .section--closing-cta .closing-cta__lead { --hairline-color: rgba(255, 255, 255, 0.28); } .section--closing-cta .eyebrow__marker { background: var(--color-sage); } .section--closing-cta .section-rule { background: rgba(255, 255, 255, 0.2); } .section--closing-cta .text-link { color: rgba(255, 255, 255, 0.85); } .closing-cta__rule { margin-block: clamp(2rem, 3vw, 3rem) clamp(1.8rem, 2.6vw, 2.6rem); } .closing-cta__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; } .closing-cta__note { max-width: 34rem; margin: 0; font-family: var(--font-body); font-weight: 400; font-size: var(--type-body-lg); line-height: 1.5; color: rgba(255, 255, 255, 0.76); } .closing-cta__actions { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); } .closing-cta__trust { margin: 0; font-family: var(--font-mono); font-size: var(--type-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58); } @media (max-width: 680px) { .closing-cta__meta { grid-template-columns: 1fr; row-gap: var(--space-5); } .closing-cta__actions { justify-self: start; align-items: flex-start; } } .section--office-band { position: relative; } .section--office-band::before { content: ""; position: absolute; inset: 3rem 0; background: var(--color-surface); border-top: 1px solid rgba(23, 26, 24, 0.06); border-bottom: 1px solid rgba(23, 26, 24, 0.06); pointer-events: none; } .section--office-band .container { position: relative; } .section--office-fit-out-hero { position: relative; overflow: hidden; padding-block: clamp(5.6rem, 9vw, 8.8rem) clamp(4.7rem, 7vw, 7.2rem); background: radial-gradient(circle at 82% 30%, rgba(138, 106, 54, 0.12), transparent 32%), linear-gradient(180deg, #f6f2eb 0%, #ebe4d8 100%); } .section--office-fit-out-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 242, 235, 0.96) 0%, rgba(246, 242, 235, 0.78) 41%, rgba(246, 242, 235, 0.08) 74%, rgba(246, 242, 235, 0.42) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent 44%, rgba(235, 228, 216, 0.45)); pointer-events: none; } .office-fit-out-service-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.48fr) minmax(28rem, 0.52fr); gap: clamp(2rem, 5vw, 5.8rem); align-items: center; min-height: clamp(34rem, 52vw, 46rem); } .office-fit-out-service-hero__content { position: relative; z-index: 3; max-width: 46rem; } .office-fit-out-service-hero__content h1 { max-width: 11.5ch; font-size: clamp(3rem, 5.6vw, 6.45rem); line-height: 0.9; letter-spacing: -0.065em; } .office-fit-out-service-hero__content .lead { max-width: 38rem; } .office-fit-out-service-hero__visual { --fit-out-sketch-opacity: 0.42; position: relative; z-index: 1; width: min(64vw, 58rem); margin: 0; margin-right: max(-11vw, -10rem); opacity: var(--fit-out-sketch-opacity); mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 87%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 87%, transparent 100%); animation: hero-sketch-entrance 1250ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; } .office-fit-out-service-hero__visual img { display: block; width: 100%; height: auto; object-fit: contain; filter: sepia(0.18) saturate(0.82) contrast(0.94) brightness(0.98); } .office-fit-out-section-intro { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(18rem, 0.5fr); gap: clamp(1.5rem, 4vw, 4.8rem); align-items: end; margin-bottom: clamp(2rem, 4.5vw, 4.6rem); } .office-fit-out-section-intro .eyebrow { grid-column: 1 / -1; margin-bottom: -0.35rem; } .office-fit-out-section-intro h2 { max-width: 14ch; } .office-fit-out-section-intro .lead { max-width: 43rem; } .office-fit-out-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(23, 26, 24, 0.13); border-left: 1px solid rgba(23, 26, 24, 0.08); } .office-fit-out-capability { display: grid; gap: 1.2rem; align-content: start; min-height: clamp(16rem, 21vw, 21rem); padding: clamp(1.35rem, 2.4vw, 2.2rem); border-right: 1px solid rgba(23, 26, 24, 0.08); border-bottom: 1px solid rgba(23, 26, 24, 0.13); background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)), rgba(248, 243, 235, 0.54); } .office-fit-out-capability span, .office-fit-out-process__steps span { font-size: 0.72rem; font-weight: 850; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: rgba(138, 106, 54, 0.78); } .office-fit-out-capability h3, .office-fit-out-process__steps h3, .office-fit-out-project-card h3 { margin: 0; font-size: clamp(1.28rem, 1.6vw, 1.75rem); line-height: 1; letter-spacing: -0.035em; } .section--office-fit-out-process { background: linear-gradient(90deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px) 0 0 / 12.5% 100%, linear-gradient(180deg, #f5f1ea 0%, #ebe4d8 100%); } .office-fit-out-process__steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid rgba(23, 26, 24, 0.14); counter-reset: fit-out-step; } .office-fit-out-process__steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .office-fit-out-process__steps li { position: relative; display: grid; gap: 0.9rem; align-content: start; min-height: clamp(16rem, 22vw, 20.5rem); padding: clamp(1.15rem, 1.8vw, 1.65rem) clamp(1rem, 1.45vw, 1.4rem); border-right: 1px solid rgba(23, 26, 24, 0.1); } .office-fit-out-process__steps li:first-child { border-left: 1px solid rgba(23, 26, 24, 0.1); } .office-fit-out-process__steps li::before { content: ""; position: absolute; top: -0.38rem; left: clamp(1rem, 1.45vw, 1.4rem); width: 0.72rem; height: 0.72rem; border-radius: 50%; background: var(--color-dark); box-shadow: 0 0 0 0.45rem rgba(138, 106, 54, 0.12); } .office-fit-out-process__steps p { margin: 0; font-size: 0.94rem; line-height: 1.48; color: rgba(23, 26, 24, 0.68); } .office-fit-out-why { display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(20rem, 0.42fr); gap: clamp(1.7rem, 4.2vw, 5.2rem); align-items: start; } .office-fit-out-why__copy h2 { max-width: 18ch; } .office-fit-out-why__points { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid rgba(23, 26, 24, 0.13); } .office-fit-out-why__points li { position: relative; padding: 1.15rem 0 1.15rem 2rem; border-bottom: 1px solid rgba(23, 26, 24, 0.13); font-weight: 750; color: rgba(23, 26, 24, 0.82); } .office-fit-out-why__points li::before { content: ""; position: absolute; top: 1.58rem; left: 0; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: rgba(138, 106, 54, 0.72); } .office-fit-out-projects { display: grid; gap: clamp(2rem, 4vw, 4.4rem); } .office-fit-out-projects__intro { display: grid; grid-template-columns: minmax(0, 0.76fr) auto; gap: 1rem clamp(1.5rem, 3vw, 3rem); align-items: end; } .office-fit-out-projects__intro .eyebrow, .office-fit-out-projects__intro h2 { grid-column: 1; } .office-fit-out-projects__intro h2 { max-width: 17ch; } .office-fit-out-projects__intro .text-link { grid-column: 2; grid-row: 2; justify-self: end; } .office-fit-out-projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } .office-fit-out-project-card { display: grid; grid-template-rows: minmax(16rem, 22vw) 1fr; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.3)), rgba(248, 243, 235, 0.55); box-shadow: 0 20px 54px rgba(23, 26, 24, 0.08); transition: transform 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium); } .office-fit-out-project-card:hover, .office-fit-out-project-card:focus-within { transform: translateY(-0.28rem); box-shadow: 0 28px 66px rgba(23, 26, 24, 0.12); } .office-fit-out-project-card__image { display: block; overflow: hidden; background: linear-gradient(135deg, rgba(17, 22, 19, 0.14), rgba(17, 22, 19, 0.04)), #d8d1c6; } .office-fit-out-project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms var(--ease-premium); } .office-fit-out-project-card:hover .office-fit-out-project-card__image img, .office-fit-out-project-card:focus-within .office-fit-out-project-card__image img { transform: scale(1.035); } .office-fit-out-project-card__image span { display: block; width: 100%; height: 100%; } .office-fit-out-project-card__body { padding: clamp(1.1rem, 1.8vw, 1.6rem); } .office-fit-out-project-card__body p:not(.eyebrow) { margin: 0; color: rgba(23, 26, 24, 0.66); } .section--office-fit-out-final-cta { padding-top: calc(var(--space-8) - 0.9rem); } .office-fit-out-final-cta { display: grid; grid-template-columns: minmax(0, 0.68fr) auto; gap: clamp(1.5rem, 4vw, 4.8rem); align-items: end; padding: clamp(2rem, 4vw, 4.2rem); background: linear-gradient(135deg, rgba(11, 15, 13, 0.99), rgba(24, 31, 27, 0.96)), var(--color-dark); color: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow-soft); } .office-fit-out-final-cta h2 { max-width: 15ch; color: #fff; } .office-fit-out-final-cta .eyebrow, .office-fit-out-final-cta .lead { color: rgba(255, 255, 255, 0.68); } .office-fit-out-final-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-end; } @media (max-width: 1080px) { .office-fit-out-service-hero, .office-fit-out-section-intro, .office-fit-out-why, .office-fit-out-projects__intro, .office-fit-out-final-cta { grid-template-columns: 1fr; } .office-fit-out-service-hero { min-height: 0; } .office-fit-out-service-hero__content h1 { max-width: 13ch; } .office-fit-out-service-hero__visual { --fit-out-sketch-opacity: 0.34; width: min(100%, 48rem); margin: 0 auto; } .office-fit-out-section-intro .eyebrow, .office-fit-out-section-intro h2, .office-fit-out-section-intro .lead, .office-fit-out-projects__intro .eyebrow, .office-fit-out-projects__intro h2, .office-fit-out-projects__intro .text-link { grid-column: auto; grid-row: auto; justify-self: start; } .office-fit-out-capabilities, .office-fit-out-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .office-fit-out-process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .office-fit-out-process__steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .office-fit-out-final-cta__actions { justify-content: flex-start; } } @media (max-width: 720px) { .section--office-fit-out-hero { padding-block: clamp(4.5rem, 15vw, 6.2rem) clamp(3.4rem, 11vw, 4.8rem); } .office-fit-out-service-hero__visual { --fit-out-sketch-opacity: 0.28; width: min(118%, 33rem); } .office-fit-out-capabilities, .office-fit-out-projects__grid { grid-template-columns: 1fr; } .office-fit-out-capability { min-height: 0; } .office-fit-out-process__steps { grid-template-columns: 1fr; border-left: 1px solid rgba(23, 26, 24, 0.1); } .office-fit-out-process__steps li, .office-fit-out-process__steps li:first-child { min-height: 0; padding-left: 3.1rem; border-left: 0; border-right: 0; border-bottom: 1px solid rgba(23, 26, 24, 0.1); } .office-fit-out-process__steps li::before { top: 1.42rem; left: 1.15rem; } .office-fit-out-project-card { grid-template-rows: minmax(15rem, 58vw) auto; } .office-fit-out-final-cta { padding: 1.45rem; } .office-fit-out-final-cta__actions { flex-direction: column; align-items: stretch; } .office-fit-out-final-cta__actions .button { justify-content: center; } } .page-hero--sketch { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 84% 30%, rgba(151, 112, 58, 0.11), transparent 30%), linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 52%), linear-gradient(180deg, #f5f1ea 0%, #ebe4d8 100%); } .page-hero--sketch::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(245, 241, 234, 0.95) 0%, rgba(245, 241, 234, 0.72) 34%, rgba(245, 241, 234, 0.1) 70%, rgba(245, 241, 234, 0.46) 100%), linear-gradient(180deg, rgba(245, 241, 234, 0.3), transparent 44%, rgba(235, 228, 216, 0.44)); pointer-events: none; } .page-hero--sketch .page-hero__grid { position: relative; z-index: 3; } .page-hero--sketch .page-hero__content, .page-hero--sketch .page-hero__panel { position: relative; z-index: 4; } .page-hero__sketch { --sketch-opacity: 0.38; --sketch-y: -50%; --sketch-x: 0; --sketch-scale: 1; position: absolute; z-index: 2; top: 50%; right: max(-16vw, -15rem); width: clamp(46rem, 62vw, 80rem); pointer-events: none; opacity: var(--sketch-opacity); mix-blend-mode: multiply; transform: translate3d(var(--sketch-x), var(--sketch-y), 0) scale(var(--sketch-scale)); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%); animation: hero-sketch-entrance 1250ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; } .page-hero__sketch img { display: block; width: 100%; height: auto; object-fit: contain; filter: sepia(0.16) saturate(0.85) contrast(0.94) brightness(0.98); } @keyframes hero-sketch-entrance { from { opacity: 0; transform: translate3d(calc(var(--sketch-x) + 2rem), var(--sketch-y), 0) scale(1.025); } to { opacity: var(--sketch-opacity); transform: translate3d(var(--sketch-x), var(--sketch-y), 0) scale(var(--sketch-scale)); } } @media (max-width: 1080px) { .home-hero__content.has-project-proof, .section-intro, .offer-grid, .project-hero__grid, .project-grid, .project-card--featured, .delivery-confidence, .trust-grid, .conversion-grid, .priorities-strip, .closing-cta { grid-template-columns: 1fr; } .home-hero__visual { position: absolute; inset: 0; grid-column: 1; grid-row: 1; } .home-hero__image-stack { inset: -3%; } .home-hero__image-stack::before { background: linear-gradient(90deg, rgba(9, 13, 11, 0.72), rgba(9, 13, 11, 0.36)), linear-gradient(180deg, rgba(9, 13, 11, 0.08), rgba(9, 13, 11, 0.56)); } .home-hero__image { object-position: var(--hero-focal-tablet-x, var(--hero-focal-x, 54%)) var(--hero-focal-tablet-y, var(--hero-focal-y, 50%)); transform-origin: var(--hero-focal-tablet-x, var(--hero-focal-x, 54%)) var(--hero-focal-tablet-y, var(--hero-focal-y, 50%)); } .home-hero__main { min-height: clamp(37rem, 78vw, 44rem); height: auto; border-right: 0; background: linear-gradient(90deg, rgba(9, 13, 11, 0.88), rgba(9, 13, 11, 0.56) 62%, rgba(9, 13, 11, 0.22)), linear-gradient(180deg, rgba(9, 13, 11, 0.1), rgba(9, 13, 11, 0.54)); } .projects-showcase__intro, .google-reviews, .projects-showcase__layout, .capability-band, .capability-band__lead, .capability-band__list, .office-fit-out-overview, .office-fit-out-scope, .office-fit-out-proof, .office-fit-out-cta { grid-template-columns: 1fr; } .project-card__featured-stage { display: grid; min-height: 0; padding-right: 0; } .project-card--featured .project-card__body { position: relative; right: auto; bottom: auto; width: auto; padding: 1.35rem; border-left: 0; } .project-card--featured { display: grid; min-height: 0; } .project-card--featured .project-card__image { position: relative; inset: auto; min-height: clamp(22rem, 54vw, 34rem); } .projects-showcase__arrow-controls { top: clamp(11rem, 27vw, 17rem); } .project-card--featured .project-card__details, .project-card--featured .project-card__footer, .capability-band__lead .lead, .capability-band__assurance { grid-column: auto; } .projects-showcase__list { grid-template-columns: 1fr; } .projects-showcase__rail { grid-template-columns: 1fr; } .projects-showcase__intro .lead { grid-column: auto; grid-row: auto; justify-self: start; } .projects-showcase__intro .eyebrow, .projects-showcase__intro h2 { grid-column: auto; } .projects-showcase__item { grid-template-columns: 1fr; } .projects-showcase__item span { justify-self: start; } .office-fit-out-overview__questions, .office-fit-out-scope__list { padding-left: 0; border-left: 0; } .priority-pill, .priority-pill:first-child, .priority-pill:last-child { padding: 1.2rem 0 0; border-right: 0; } .office-fit-out-cta__lead { padding-top: 0; } .capability-band__list { border-left: 0; } .capability-band__list li { grid-template-columns: 1fr; margin-top: 0; padding-left: 0; border-right: 0; } .capability-band__spine { grid-column: auto; grid-row: auto; flex-direction: row; flex-wrap: wrap; min-height: 0; gap: 0.7rem 1rem; padding: 1.2rem 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); } .capability-band__spine span { padding: 0; border-bottom: 0; } .delivery-confidence__route { padding-block: clamp(1.2rem, 2.4vw, 2rem); } .delivery-confidence__active { grid-template-columns: minmax(7rem, 0.26fr) minmax(0, 0.74fr); min-height: clamp(14rem, 30vw, 19rem); } .delivery-confidence__steps::before, .delivery-confidence__steps::after { top: clamp(5.2rem, 7vw, 6.6rem); bottom: 0.9rem; left: clamp(3.6rem, 5.5vw, 5.4rem); right: auto; width: 1px; height: auto; background: linear-gradient(180deg, rgba(23, 26, 24, 0.12), rgba(23, 26, 24, 0.5), rgba(23, 26, 24, 0.1)); } .delivery-confidence__steps::after { background: linear-gradient(180deg, transparent, rgba(138, 106, 54, 0.72), transparent); transform: scaleY(var(--route-progress)); transform-origin: top center; } .delivery-confidence__steps { grid-template-columns: 1fr; padding-top: clamp(1.4rem, 2.8vw, 2.4rem); gap: 0; } .motion-enhanced .delivery-confidence__steps::after { transform: scaleY(0); transform-origin: top center; } .motion-enhanced .delivery-confidence__lead.is-visible + .delivery-confidence__route .delivery-confidence__steps::after, .motion-enhanced .delivery-confidence__route:has(.motion-reveal.is-visible) .delivery-confidence__steps::after { transform: scaleY(var(--route-progress)); } .delivery-confidence__steps li { grid-template-columns: clamp(4.6rem, 7vw, 6.4rem) minmax(10rem, 0.38fr) minmax(0, 0.62fr); gap: clamp(1rem, 2vw, 2.1rem); min-height: 0; padding: clamp(1.08rem, 1.8vw, 1.6rem) 0; border-top: 1px solid rgba(23, 26, 24, 0.1); } .delivery-confidence__steps li::before { top: 50%; left: clamp(3.35rem, 5.2vw, 5.12rem); transform: translate(-50%, -50%); } .delivery-confidence__steps li:hover::before, .delivery-confidence__steps li:focus-visible::before, .delivery-confidence__steps li.is-step-active::before { transform: translate(-50%, -50%) scale(1.18); } .delivery-confidence__steps li:nth-child(even) { margin-top: 0; } .delivery-confidence__steps span, .delivery-confidence__steps small, .delivery-confidence__steps p { grid-column: auto; grid-row: auto; } .delivery-confidence__steps small { grid-column: 2; grid-row: 1; } .delivery-confidence__steps h3 { grid-column: 2; grid-row: 2; } .delivery-confidence__steps p { grid-column: 3; grid-row: 1 / span 2; max-width: 28rem; } .delivery-confidence__steps li:nth-child(2n) { border-right: 0; } .delivery-confidence__lead { grid-template-columns: 1fr; position: static; } .delivery-confidence__lead .eyebrow, .delivery-confidence__lead h2, .delivery-confidence__lead .lead { grid-column: auto; grid-row: auto; } .delivery-confidence__lead .lead { max-width: 42rem; } .hero-copy h1 { font-size: 4rem; } .project-card--featured h3 { font-size: 2rem; } .capability-band__lead h2, .closing-cta__lead h2 { font-size: 3rem; } .closing-cta__actions, .closing-cta__links { justify-items: start; text-align: left; } .closing-cta__actions { padding-left: 0; border-left: 0; } } @media (max-width: 720px) { .google-review__head, .google-review__author { flex-direction: column; } .office-fit-out-cta__actions { flex-direction: column; align-items: flex-start; } .office-fit-out-question, .office-fit-out-proof__item { grid-template-columns: 1fr; } .hero-actions, .closing-cta__links, .hero-trust-list { flex-direction: column; align-items: flex-start; } .hero-proofline { grid-template-columns: 1fr; } .project-card__details { grid-template-columns: 1fr; } .project-card--featured .project-card__details { grid-template-columns: 1fr; padding-block: 0; border-bottom: 0; background: transparent; } .project-card--featured .project-card__detail, .project-card--featured .project-card__detail:first-child, .project-card--featured .project-card__detail:last-child, .project-card--featured .project-card__detail:not(:first-child) { gap: 0.36rem; padding: 0.85rem 0; border-right: 0; border-bottom: 1px solid rgba(23, 26, 24, 0.1); } .project-card--featured .project-card__detail::before { display: none; } .home-hero__content { min-height: 38rem; padding: 0; } .home-hero__content::after { inset: 0.75rem; } .home-hero__main { min-height: 38rem; padding-block: 2.6rem; margin-left: 0; background: linear-gradient(180deg, rgba(9, 13, 11, 0.72), rgba(9, 13, 11, 0.88)), linear-gradient(90deg, rgba(9, 13, 11, 0.56), rgba(9, 13, 11, 0.2)); } .home-hero__image-stack::before { background: linear-gradient(180deg, rgba(9, 13, 11, 0.38), rgba(9, 13, 11, 0.8)), linear-gradient(90deg, rgba(9, 13, 11, 0.44), rgba(9, 13, 11, 0.14)); } .home-hero__image { object-position: var(--hero-focal-mobile-x, var(--hero-focal-tablet-x, 50%)) var(--hero-focal-mobile-y, var(--hero-focal-tablet-y, 48%)); transform-origin: var(--hero-focal-mobile-x, var(--hero-focal-tablet-x, 50%)) var(--hero-focal-mobile-y, var(--hero-focal-tablet-y, 48%)); } .project-card--featured .project-card__image { min-height: 18rem; } .projects-showcase__controls { align-items: flex-start; } .projects-showcase__arrow-controls { top: 9rem; left: 0.85rem; right: 0.85rem; } .projects-showcase__arrow { width: 2.45rem; height: 2.45rem; background: rgba(16, 22, 19, 0.5); } .home-hero .hero-actions { position: relative; right: auto; left: auto; bottom: auto; align-self: stretch; z-index: 4; gap: 0.55rem; margin: 0.35rem 0 0; background: transparent; } .home-hero .hero-actions .button { width: 100%; } .projects-showcase__list, .delivery-confidence__steps { grid-template-columns: 1fr; } .delivery-confidence__route { padding: 1.2rem 0; } .delivery-confidence__route-meta { align-items: flex-start; padding-bottom: 0.9rem; font-size: 0.6rem; } .delivery-confidence__route-meta span::before, .delivery-confidence__route-meta span::after { width: 1.45rem; } .delivery-confidence__steps::before, .delivery-confidence__steps::after { top: 5.2rem; bottom: 2rem; left: 0.45rem; } .delivery-confidence__active { grid-template-columns: 1fr; min-height: 16rem; padding: 1.55rem; } .delivery-confidence__active-number { position: absolute; right: 1.1rem; bottom: 0.65rem; font-size: clamp(6.8rem, 29vw, 9.8rem); opacity: 0.58; } .delivery-confidence__active-copy h3 { max-width: 11ch; font-size: clamp(2rem, 11vw, 3.3rem); } .delivery-confidence__steps li, .delivery-confidence__steps li:nth-child(even), .delivery-confidence__steps li:nth-child(odd) { grid-template-columns: 1fr; gap: 0.5rem; min-height: 0; margin-top: 0; padding: 1.25rem 0 1.25rem 2rem; border-right: 0; } .delivery-confidence__steps li:hover, .delivery-confidence__steps li:focus-visible, .delivery-confidence__steps li.is-step-active { transform: translateX(0.18rem); } .delivery-confidence__steps::before, .delivery-confidence__steps::after { display: block; top: 1.65rem; bottom: 1.65rem; left: 0.45rem; right: auto; width: 1px; height: auto; } .delivery-confidence__steps li::before { display: block; top: 1.55rem; left: 0.45rem; } .delivery-confidence__steps li:hover::before, .delivery-confidence__steps li:focus-visible::before, .delivery-confidence__steps li.is-step-active::before { transform: translateY(-50%) scale(1.14); } .delivery-confidence__steps li::after { display: none; } .delivery-confidence__steps small, .delivery-confidence__steps h3, .delivery-confidence__steps p { grid-column: auto; grid-row: auto; max-width: none; } .project-card--featured .project-card__body { padding: 1.2rem; } .hero-copy h1 { font-size: 3rem; } .project-card--featured h3, .capability-band__lead h2, .closing-cta__lead h2 { font-size: 1.9rem; } } @media (max-width: 1080px) { .process-journey__lead { grid-template-columns: 1fr; } .process-journey__lead .eyebrow, .process-journey__lead h2, .process-journey__lead .lead { grid-column: auto; grid-row: auto; } .process-journey__lead .lead { max-width: 43rem; } .process-journey__stage { grid-template-columns: 1fr; min-height: clamp(18rem, 36vw, 26rem); } .process-journey__system { grid-template-columns: 1fr; } .process-journey__stage { border-right: 1px solid rgba(255, 255, 255, 0.095); } .process-journey__stage-copy { margin-left: clamp(5rem, 12vw, 9rem); } .process-journey__ghost-number { font-size: clamp(9rem, 26vw, 15rem); } .process-journey__route { grid-template-columns: 1fr; padding-top: clamp(1.8rem, 3vw, 2.4rem); } .process-journey__route::before, .process-journey__route::after { top: clamp(2.2rem, 3vw, 2.7rem); bottom: 1rem; left: clamp(3.25rem, 5vw, 5rem); right: auto; width: 1px; height: auto; } .process-journey__route::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14)); } .process-journey__route::after { background: linear-gradient(180deg, transparent, rgba(199, 185, 149, 0.88), transparent); transform: scaleY(var(--process-progress)); transform-origin: top center; } .motion-enhanced .process-journey__route::after { transform: scaleY(0); } .motion-enhanced .process-journey__system:has(.motion-reveal.is-visible) .process-journey__route::after, .motion-enhanced .process-journey__lead.is-visible + .process-journey__system .process-journey__route::after { transform: scaleY(var(--process-progress)); } .process-journey__route li, .process-journey__route li:nth-child(even), .process-journey__route li:nth-child(odd) { grid-template-columns: clamp(4.5rem, 7vw, 6.2rem) minmax(10rem, 0.38fr) minmax(0, 0.62fr); gap: clamp(1rem, 2vw, 2rem); min-height: 0; padding: clamp(1rem, 1.8vw, 1.5rem) 0; border-top: 1px solid rgba(255, 255, 255, 0.09); } .process-journey__route li::before { top: 50%; left: clamp(3.05rem, 4.7vw, 4.7rem); transform: translate(-50%, -50%); } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { transform: translateX(0.24rem); } .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before, .process-journey__route li.is-step-active::before { transform: translate(-50%, -50%) scale(1.16); } .process-journey__route span, .process-journey__route small, .process-journey__route p { grid-column: auto; grid-row: auto; } .process-journey__route small { grid-column: 2; grid-row: 1; } .process-journey__route h3 { grid-column: 2; grid-row: 2; } .process-journey__route p { grid-column: 3; grid-row: 1 / span 2; max-width: 29rem; } } @media (max-width: 720px) { .section--process-journey { padding-block: clamp(4.7rem, 16vw, 6.4rem); } .process-journey { gap: 2.4rem; } .process-journey__system { padding: 0.65rem; } .process-journey__stage { grid-template-columns: 1fr; min-height: 17rem; padding: 1.45rem; } .process-journey__stage-meta { position: relative; inset: auto; margin-bottom: 1.6rem; } .process-journey__ghost-number { position: absolute; right: 1.1rem; bottom: 0.55rem; left: auto; top: auto; font-size: clamp(7rem, 34vw, 11rem); opacity: 0.58; transform: none; } .process-journey__stage-copy { margin-left: 0; } .process-journey__stage-copy h3 { max-width: 11ch; font-size: clamp(2.05rem, 12vw, 3.55rem); } .process-journey__stage-copy p { font-size: 0.98rem; } .process-journey__route::before, .process-journey__route::after { top: 1.65rem; bottom: 1.65rem; left: 0.45rem; } .process-journey__route li, .process-journey__route li:nth-child(even), .process-journey__route li:nth-child(odd) { grid-template-columns: 1fr; gap: 0.48rem; padding: 1.2rem 0 1.2rem 2rem; } .process-journey__route li::before { top: 1.55rem; left: 0.45rem; transform: translateY(-50%); } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { transform: translateX(0.18rem); } .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before, .process-journey__route li.is-step-active::before { transform: translateY(-50%) scale(1.14); } .process-journey__route li::after { display: none; } .process-journey__route small, .process-journey__route h3, .process-journey__route p { grid-column: auto; grid-row: auto; max-width: none; } } @media (max-width: 1180px) { .process-journey__system { grid-template-columns: 1fr; min-height: 0; } .process-journey__stage { min-height: clamp(20rem, 36vw, 27rem); border-right: 1px solid rgba(255, 255, 255, 0.095); } .process-journey__route-board { min-height: clamp(34rem, 58vw, 42rem); border-left: 1px solid rgba(255, 255, 255, 0.095); border-top: 0; } .process-journey__stage-copy { max-width: 40rem; margin-left: clamp(5rem, 13vw, 9rem); } .process-journey__ghost-number { font-size: clamp(9.5rem, 26vw, 16rem); } .process-journey__route li { width: clamp(12.4rem, 24vw, 16rem); } } @media (max-width: 840px) { .process-journey__route-board { min-height: 0; padding: clamp(1rem, 4vw, 1.4rem); } .process-journey__route-scale, .process-journey__route-line { display: none; } .process-journey__route { position: relative; inset: auto; display: grid; gap: 0; padding: 0; } .process-journey__route::before, .process-journey__route::after { display: block; content: ""; position: absolute; top: 1.65rem; bottom: 1.65rem; left: 0.45rem; width: 1px; height: auto; pointer-events: none; } .process-journey__route::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14)); } .process-journey__route::after { background: linear-gradient(180deg, rgba(199, 185, 149, 0.1), rgba(199, 185, 149, 0.88), rgba(199, 185, 149, 0.1)); transform: scaleY(var(--process-progress)); transform-origin: top center; transition: transform 520ms var(--ease-premium); } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { position: relative; left: auto; top: auto; width: auto; grid-template-columns: minmax(2.3rem, auto) 1fr; gap: 0.36rem 0.9rem; padding: 1.08rem 0 1.08rem 1.95rem; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); background: transparent; box-shadow: none; backdrop-filter: none; transform: none; } .process-journey__route li:first-child { border-top: 0; } .process-journey__route li::before { top: 1.55rem; left: 0.45rem; transform: translateY(-50%); } .process-journey__route li::after { inset: 0; display: block; border: 0; background: linear-gradient(90deg, rgba(199, 185, 149, 0.08), transparent 72%); transform: none; } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { transform: translateX(0.14rem); } .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before, .process-journey__route li.is-step-active::before { transform: translateY(-50%) scale(1.14); } .process-journey__route span { grid-column: 1; grid-row: 1 / span 3; align-self: start; justify-self: start; font-size: clamp(2.15rem, 10vw, 3.1rem); } .process-journey__route small, .process-journey__route h3, .process-journey__route p { grid-column: 2; max-width: none; } } @media (max-width: 720px) { .process-journey__stage { min-height: 18rem; padding: 1.45rem; } .process-journey__stage-copy { margin-left: 0; } .process-journey__stage-copy small { padding-left: 2.4rem; } .process-journey__stage-copy small::before { width: 1.75rem; } .process-journey__ghost-number { right: 0.75rem; bottom: 0.35rem; left: auto; top: auto; font-size: clamp(7rem, 34vw, 11rem); opacity: 0.58; transform: none; } .process-journey__route-board { padding: 0.7rem; } } @media (max-width: 1180px) { .process-journey__stage { grid-template-columns: minmax(0, 1fr); min-height: clamp(21rem, 38vw, 27rem); } .process-journey__stage-icon { width: clamp(4.8rem, 10vw, 7.5rem); height: clamp(4.8rem, 10vw, 7.5rem); } .process-journey__route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.35rem, 2.3vw, 2rem) clamp(0.8rem, 1.4vw, 1.2rem); padding-top: 2rem; } .process-journey__route-line { display: none; } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { min-height: 16.5rem; } .process-journey__route li::before { top: -0.35rem; left: clamp(1.05rem, 1.25vw, 1.25rem); transform: translateY(-50%); } } @media (max-width: 840px) { .process-journey__route-board { padding: clamp(1rem, 4vw, 1.35rem); } .process-journey__route-scale { display: flex; } .process-journey__route { grid-template-columns: 1fr; gap: 0; padding: 0.7rem 0 0 1.65rem; } .process-journey__route::before, .process-journey__route::after { display: block; content: ""; position: absolute; top: 1.15rem; bottom: 1.15rem; left: 0.42rem; width: 1px; height: auto; pointer-events: none; } .process-journey__route::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.13)); } .process-journey__route::after { background: linear-gradient(180deg, rgba(199, 185, 149, 0.1), rgba(199, 185, 149, 0.86), rgba(199, 185, 149, 0.1)); box-shadow: 0 0 16px rgba(199, 185, 149, 0.16), 0 0 28px rgba(199, 185, 149, 0.1); transform: scaleY(var(--process-progress)); transform-origin: top center; transition: transform 520ms var(--ease-premium); } .process-journey__route-line { display: block; top: 0.7rem; bottom: 1.1rem; left: 0.42rem; right: auto; width: 1px; height: auto; } .process-journey__route-line .process-journey__route-base, .process-journey__route-line .process-journey__route-fill, .process-journey__route-line::before, .process-journey__route-line::after { display: none; } .process-journey__route::before { box-shadow: 0 0 18px rgba(0, 0, 0, 0.12); } .process-journey__route li.is-step-complete:not(.is-step-active)::before { transform: translateY(-50%) scale(1.04); } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { min-height: 0; padding: 1.1rem 0 1.1rem 1rem; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); background: transparent; backdrop-filter: none; transform: none; } .process-journey__route li:first-child { border-top: 0; } .process-journey__route li::before { top: 1.55rem; left: -1.23rem; transform: translateY(-50%); } .process-journey__route li::after { inset: 0; border: 0; background: linear-gradient(90deg, rgba(199, 185, 149, 0.09), transparent 72%); transform: none; } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { transform: translateX(0.14rem); } .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before, .process-journey__route li.is-step-active::before { transform: translateY(-50%) scale(1.14); } .process-journey__milestone-icon { width: 3rem; height: 3rem; } } @media (max-width: 720px) { .process-journey__stage { min-height: 18.5rem; padding: 1.45rem; } .process-journey__stage-icon { right: 1.1rem; bottom: 1.1rem; width: 4rem; height: 4rem; opacity: 0.78; } .process-journey__ghost-number { right: 0.75rem; bottom: 0.35rem; left: auto; top: auto; font-size: clamp(7rem, 34vw, 11rem); opacity: 0.54; transform: none; } .process-journey__stage-copy { max-width: calc(100% - 2.5rem); margin-left: 0; } .process-journey__stage-copy h3 { font-size: clamp(2.05rem, 11vw, 3.35rem); } .process-journey__route p { font-size: 0.82rem; } } .section--process-journey { padding-block: clamp(5.4rem, 8vw, 9.3rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px) 0 0 / 12.5% 100%, linear-gradient(180deg, #f5f1e9 0%, #e7e1d7 100%); } .section--process-journey::before { inset: clamp(0.85rem, 1.4vw, 1.2rem); border-color: rgba(23, 26, 24, 0.055); } .section--process-journey::after, .process-journey__trace, .process-journey__stage::before, .process-journey__stage::after, .process-journey__stage-icon, .process-journey__milestone-icon { display: none; } .process-journey { gap: clamp(2.6rem, 4.8vw, 5.7rem); } .process-journey__lead { grid-template-columns: minmax(0, 0.6fr) minmax(20rem, 0.34fr); align-items: end; } .process-journey__lead h2 { max-width: 16ch; font-size: clamp(2.9rem, 4.9vw, 5.8rem); } .process-journey__lead .lead { max-width: 34rem; color: rgba(23, 26, 24, 0.66); } .process-journey__system { --process-progress: 0.035; position: relative; display: grid; grid-template-columns: minmax(20rem, 0.38fr) minmax(0, 0.62fr); gap: clamp(2.2rem, 4.2vw, 5.2rem); min-height: 0; padding: clamp(2.1rem, 4.2vw, 5rem); background: linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 16.66% 100%, linear-gradient(180deg, #111713 0%, #080c0a 100%); border: 1px solid rgba(23, 26, 24, 0.14); box-shadow: 0 32px 86px rgba(23, 26, 24, 0.16); overflow: hidden; } .process-journey__system::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 25%, radial-gradient(circle at 84% 14%, rgba(199, 185, 149, 0.12), transparent 28%); transform: none; } .process-journey__system::after { top: auto; left: auto; right: clamp(2rem, 4vw, 4.8rem); bottom: clamp(1.5rem, 2.6vw, 2.6rem); width: clamp(7rem, 15vw, 15rem); height: 1px; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(199, 185, 149, 0.48)); opacity: 1; transform: scaleX(calc(0.28 + var(--process-progress) * 0.72)); transform-origin: right center; } .process-journey__stage { position: relative; z-index: 2; display: grid; align-content: end; min-height: clamp(21rem, 29vw, 27rem); padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; } .process-journey__stage-meta { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.55rem 1.1rem; margin-bottom: clamp(2.2rem, 4vw, 4.4rem); color: rgba(255, 255, 255, 0.42); } .process-journey__ghost-number { left: auto; right: -0.1em; top: clamp(0.2rem, 1vw, 1rem); font-size: clamp(8rem, 17vw, 18rem); line-height: 0.72; color: rgba(199, 185, 149, 0.075); text-shadow: none; transform: none; } .process-journey__stage-copy { max-width: 31rem; margin: 0; gap: clamp(0.65rem, 1vw, 0.95rem); } .process-journey__stage-copy small { padding-left: 2.75rem; font-size: 0.66rem; color: rgba(199, 185, 149, 0.86); } .process-journey__stage-copy small::before { width: 2rem; background: rgba(199, 185, 149, 0.64); } .process-journey__stage-copy h3 { max-width: 12ch; font-size: clamp(2.8rem, 5.4vw, 6rem); line-height: 0.9; letter-spacing: -0.058em; } .process-journey__stage-copy p { max-width: 28rem; font-size: clamp(1rem, 1.08vw, 1.12rem); line-height: 1.68; color: rgba(255, 255, 255, 0.66); } .process-journey__stage.is-updating .process-journey__stage-copy { opacity: 0; transform: translateY(0.35rem); } .process-journey__stage.is-updating .process-journey__ghost-number { opacity: 0.7; transform: translateX(0.18rem); } .process-journey__route-board { position: relative; z-index: 2; display: grid; align-content: center; min-height: clamp(22rem, 31vw, 28rem); padding: clamp(1.2rem, 2vw, 2rem) 0 0; border: 0; background: transparent; overflow: visible; } .process-journey__route-board::before, .process-journey__route-board::after { display: none; } .process-journey__route-scale { position: relative; display: flex; justify-content: space-between; padding-bottom: clamp(1.8rem, 3vw, 3rem); border: 0; font-size: 0.58rem; color: rgba(255, 255, 255, 0.34); } .process-journey__route-line { position: absolute; z-index: 1; top: calc(50% - 1px); left: 0; right: 0; display: block; height: 2px; overflow: visible; } .process-journey__route-base, .process-journey__route-fill { position: absolute; inset: 0; display: block; height: 100%; border-radius: 999px; } .process-journey__route-base { background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)); } .process-journey__route-fill { background: linear-gradient(90deg, rgba(199, 185, 149, 0.26), rgba(199, 185, 149, 0.9)), linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.38) 46%, transparent 58%) 0 0 / 34% 100%; box-shadow: 0 0 14px rgba(199, 185, 149, 0.18), 0 0 30px rgba(199, 185, 149, 0.1); transform: scaleX(var(--process-progress)); transform-origin: left center; transition: transform 780ms var(--ease-premium), box-shadow 320ms var(--ease-out-soft); } .process-journey__route-line::before { content: ""; position: absolute; top: 50%; left: 0; width: calc(var(--process-progress) * 100%); height: 16px; background: linear-gradient(90deg, transparent, rgba(199, 185, 149, 0.18), transparent); filter: blur(8px); opacity: 0.72; transform: translateY(-50%); transition: width 780ms var(--ease-premium); pointer-events: none; } .process-journey__route-line::after { content: ""; position: absolute; top: 50%; left: calc(var(--process-progress) * 100%); width: 0.66rem; height: 0.66rem; border-radius: 999px; background: rgba(199, 185, 149, 0.96); box-shadow: 0 0 0 0.38rem rgba(199, 185, 149, 0.11), 0 0 1.5rem rgba(199, 185, 149, 0.28); transform: translate(-50%, -50%); transition: left 780ms var(--ease-premium), transform 420ms var(--ease-out-soft); pointer-events: none; } .process-journey__system.is-interacting .process-journey__route-fill { animation: process-route-sweep 1250ms var(--ease-out-soft) both; } .process-journey__system.is-interacting .process-journey__route-line::after { animation: process-route-pulse 1250ms var(--ease-out-soft) both; } .process-journey__route { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.5rem, 1vw, 1rem); padding: clamp(4rem, 6vw, 5.8rem) 0 0; margin: 0; } .process-journey__route::before, .process-journey__route::after { display: none; } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { position: relative; left: auto; top: auto; display: grid; grid-template-columns: 1fr; gap: 0.44rem; width: auto; min-height: 0; padding: 0.1rem 0 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; color: rgba(255, 255, 255, 0.52); cursor: pointer; transform: none; transition: color 320ms var(--ease-out-soft), opacity 320ms var(--ease-out-soft), transform 420ms var(--ease-out-soft); } .process-journey__route li::before { content: ""; position: absolute; top: calc(clamp(-4.1rem, -4.8vw, -3.15rem)); left: 0; width: 0.72rem; height: 0.72rem; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 999px; background: var(--color-ink); transform: translateY(-50%); transition: background-color 380ms var(--ease-out-soft), border-color 380ms var(--ease-out-soft), box-shadow 420ms var(--ease-out-soft), transform 420ms var(--ease-out-soft); transition-delay: calc(var(--milestone-index, 0) * 55ms); } .process-journey__route li::after { display: none; } .process-journey__milestone-number { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.2vw, 2.3rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.055em; color: rgba(199, 185, 149, 0.28); transition: color 320ms var(--ease-out-soft), transform 420ms var(--ease-out-soft); } .process-journey__route small { font-size: 0.56rem; color: rgba(199, 185, 149, 0.46); } .process-journey__route h3 { max-width: 11rem; font-size: clamp(0.82rem, 0.9vw, 0.96rem); line-height: 1.15; color: rgba(255, 255, 255, 0.68); } .process-journey__route p { max-width: 15rem; font-size: 0.76rem; line-height: 1.5; color: rgba(255, 255, 255, 0.5); } .process-journey__system.is-process-enhanced .process-journey__route p { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(0.3rem); transition: max-height 420ms var(--ease-out-soft), opacity 320ms var(--ease-out-soft), transform 420ms var(--ease-out-soft); } .process-journey__system.is-process-enhanced .process-journey__route li.is-step-active p { max-height: 8rem; opacity: 1; transform: translateY(0); } .process-journey__system.is-interacting .process-journey__route li:not(.is-step-active) { opacity: 0.52; } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { outline: 0; color: rgba(255, 255, 255, 0.86); transform: translateY(-0.28rem); } .process-journey__route li.is-step-complete::before, .process-journey__route li.is-step-active::before, .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before { border-color: rgba(199, 185, 149, 0.92); background: rgba(199, 185, 149, 0.92); box-shadow: 0 0 0 0.42rem rgba(199, 185, 149, 0.09), 0 0 1.3rem rgba(199, 185, 149, 0.2); transform: translateY(-50%) scale(1.08); } .process-journey__route li.is-step-active::before { box-shadow: 0 0 0 0.52rem rgba(199, 185, 149, 0.12), 0 0 1.9rem rgba(199, 185, 149, 0.28); transform: translateY(-50%) scale(1.22); } .process-journey__route li.is-step-complete .process-journey__milestone-number, .process-journey__route li.is-step-active .process-journey__milestone-number { color: rgba(199, 185, 149, 0.72); } .process-journey__route li.is-step-active .process-journey__milestone-number { transform: translateY(-0.08rem) scale(1.08); } .process-journey__route li.is-step-active h3 { color: #fff; } @media (max-width: 1080px) { .process-journey__lead, .process-journey__system { grid-template-columns: 1fr; } .process-journey__lead .eyebrow, .process-journey__lead h2, .process-journey__lead .lead { grid-column: auto; grid-row: auto; } .process-journey__stage { min-height: clamp(18rem, 36vw, 25rem); } .process-journey__route-board { min-height: 0; padding-top: 0; } .process-journey__route { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.45rem, 1.4vw, 0.9rem); } } @media (max-width: 720px) { .section--process-journey { padding-block: clamp(4.6rem, 15vw, 6.4rem); } .process-journey { gap: 2.3rem; } .process-journey__system { gap: 2.1rem; padding: 1.25rem; } .process-journey__stage { min-height: 17.5rem; } .process-journey__stage-meta { margin-bottom: 1.6rem; } .process-journey__ghost-number { right: 0; top: auto; bottom: 0.2rem; font-size: clamp(6.5rem, 31vw, 9.5rem); } .process-journey__stage-copy { max-width: min(24rem, 100%); } .process-journey__stage-copy h3 { font-size: clamp(2.05rem, 11vw, 3.2rem); } .process-journey__route-scale { padding-bottom: 1.4rem; } .process-journey__route-line { display: none; } .process-journey__route { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 1.45rem; } .process-journey__route::before, .process-journey__route::after { display: block; content: ""; position: absolute; top: 0.85rem; bottom: 0.85rem; left: 0.32rem; width: 1px; height: auto; pointer-events: none; } .process-journey__route::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.11)); } .process-journey__route::after { background: linear-gradient(180deg, rgba(199, 185, 149, 0.18), rgba(199, 185, 149, 0.88)); box-shadow: 0 0 20px rgba(199, 185, 149, 0.12); transform: scaleY(var(--process-progress)); transform-origin: top center; transition: transform 720ms var(--ease-premium); } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { padding: 1rem 0 1rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .process-journey__route li:first-child { border-top: 0; } .process-journey__route li::before { top: 1.45rem; left: -1.13rem; transform: translateY(-50%); } .process-journey__route li.is-step-complete::before, .process-journey__route li.is-step-active::before, .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before { transform: translateY(-50%) scale(1.08); } .process-journey__route li.is-step-active::before { transform: translateY(-50%) scale(1.18); } .process-journey__system.is-process-enhanced .process-journey__route p { max-height: 8rem; opacity: 1; transform: none; } } .section--process-journey { padding-block: clamp(6.2rem, 9.5vw, 11.5rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.03) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(180deg, #f5f1e9 0%, #e6ded1 100%); } .section--process-journey::before { inset: clamp(0.9rem, 1.5vw, 1.3rem); border-color: rgba(23, 26, 24, 0.055); } .section--process-journey::after, .process-journey__trace, .process-journey__stage-icon, .process-journey__milestone-icon { display: none; } .process-journey { gap: clamp(3.2rem, 5.8vw, 7rem); } .process-journey__lead { grid-template-columns: minmax(0, 0.58fr) minmax(20rem, 0.34fr); align-items: end; } .process-journey__lead h2 { max-width: 15.5ch; font-size: clamp(3.2rem, 5.8vw, 7.15rem); line-height: 0.86; } .process-journey__lead .lead { max-width: 35rem; color: rgba(23, 26, 24, 0.66); } .process-journey__system { --process-progress: 0.035; position: relative; display: block; min-height: clamp(46rem, 66vw, 60rem); padding: 0; border: 1px solid rgba(23, 26, 24, 0.16); background: radial-gradient(circle at var(--process-x) var(--process-y), rgba(199, 185, 149, 0.16), transparent 18%), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(180deg, #101612 0%, #060a08 100%); box-shadow: 0 42px 100px rgba(23, 26, 24, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.075); overflow: hidden; } .process-journey__system::before { display: block; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 16.66%, linear-gradient(120deg, transparent 0 58%, rgba(199, 185, 149, 0.075) 58.05% 58.2%, transparent 58.25%), radial-gradient(circle at 78% 16%, rgba(199, 185, 149, 0.11), transparent 29%); opacity: 1; transform: translate3d(var(--process-drift-x-inverse), var(--process-drift-y-inverse), 0); } .process-journey__system::after { content: ""; position: absolute; z-index: 1; right: clamp(3rem, 5.8vw, 6.4rem); bottom: clamp(2.4rem, 4.2vw, 4.5rem); width: clamp(12rem, 25vw, 27rem); height: 1px; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(199, 185, 149, 0.48)); opacity: 0.76; transform: scaleX(calc(0.32 + var(--process-progress) * 0.68)); transform-origin: right center; transition: transform 900ms var(--ease-premium), opacity 420ms var(--ease-out-soft); pointer-events: none; } .process-journey__stage { position: absolute; z-index: 4; top: clamp(6.8rem, 9vw, 9.8rem); left: clamp(2rem, 4vw, 4.4rem); display: grid; align-content: start; width: min(30rem, calc(100% - 4rem)); min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; } .process-journey__stage::before, .process-journey__stage::after { display: none; } .process-journey__stage-meta { position: relative; inset: auto; display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin-bottom: clamp(1.7rem, 2.8vw, 3rem); color: rgba(255, 255, 255, 0.42); } .process-journey__ghost-number { position: absolute; z-index: -1; top: clamp(-1.6rem, -2vw, -0.6rem); right: -0.12em; left: auto; font-size: clamp(10rem, 20vw, 22rem); line-height: 0.72; color: rgba(199, 185, 149, 0.085); text-shadow: none; transform: translate3d(var(--process-drift-x-soft), var(--process-drift-y-soft), 0); transition: opacity 420ms var(--ease-out-soft), transform 720ms var(--ease-premium); } .process-journey__stage-copy { max-width: 31rem; margin: 0; gap: clamp(0.7rem, 1vw, 1rem); padding-left: clamp(1rem, 1.8vw, 1.6rem); border-left: 1px solid rgba(199, 185, 149, 0.46); transition: opacity 260ms var(--ease-out-soft), transform 520ms var(--ease-premium); } .process-journey__stage-copy small { padding-left: 0; font-size: 0.68rem; color: rgba(199, 185, 149, 0.86); } .process-journey__stage-copy small::before { display: none; } .process-journey__stage-copy h3 { max-width: 11.5ch; font-size: clamp(2.85rem, 4.8vw, 5.45rem); line-height: 0.86; letter-spacing: -0.06em; } .process-journey__stage-copy p { max-width: 28rem; font-size: clamp(1rem, 1.1vw, 1.14rem); line-height: 1.7; color: rgba(255, 255, 255, 0.66); } .process-journey__stage.is-updating .process-journey__stage-copy { opacity: 0; transform: translateY(0.45rem); } .process-journey__stage.is-updating .process-journey__ghost-number { opacity: 0.42; transform: translate3d(0.28rem, 0, 0); } .process-journey__route-board { position: absolute; z-index: 2; inset: 0; display: block; min-height: 0; padding: 0; border: 0; background: transparent; overflow: visible; } .process-journey__route-board::before, .process-journey__route-board::after { display: none; } .process-journey__route-scale { position: absolute; z-index: 3; top: clamp(2rem, 3.4vw, 3.6rem); left: clamp(2rem, 4vw, 4.4rem); right: clamp(2rem, 4vw, 4.4rem); display: flex; justify-content: space-between; padding: 0; border: 0; font-size: 0.58rem; font-weight: 850; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.34); } .process-journey__route-line { position: absolute; z-index: 1; top: clamp(8.2rem, 11.5vw, 11rem); right: clamp(1.6rem, 3.2vw, 3.4rem); bottom: clamp(3.8rem, 6vw, 5.6rem); left: clamp(1.4rem, 2.8vw, 3rem); display: block; width: auto; height: auto; overflow: visible; pointer-events: none; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.18)); } .process-journey__route-line::before, .process-journey__route-line::after { display: none; } .process-journey__route-base, .process-journey__route-fill, .process-journey__route-sheen { position: static; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .process-journey__route-base { stroke: rgba(255, 255, 255, 0.16); stroke-width: 7; } .process-journey__route-fill { stroke: rgba(199, 185, 149, 0.9); stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--process-progress)); filter: drop-shadow(0 0 12px rgba(199, 185, 149, 0.18)); transition: stroke-dashoffset 980ms var(--ease-premium); } .process-journey__route-sheen { stroke: rgba(255, 247, 225, 0.82); stroke-width: 9; stroke-dasharray: 0.07 1; stroke-dashoffset: calc(1 - var(--process-progress)); opacity: 0; filter: blur(0.5px) drop-shadow(0 0 14px rgba(199, 185, 149, 0.26)); } .process-journey__system.is-interacting .process-journey__route-sheen { animation: process-curved-route-sheen 1450ms var(--ease-out-soft) both; } .process-journey__route { position: absolute; z-index: 2; inset: clamp(8.2rem, 11.5vw, 11rem) clamp(1.6rem, 3.2vw, 3.4rem) clamp(3.8rem, 6vw, 5.6rem) clamp(1.4rem, 2.8vw, 3rem); display: block; padding: 0; margin: 0; list-style: none; } .process-journey__route::before, .process-journey__route::after { display: none; } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { position: absolute; left: var(--marker-x); top: var(--marker-y); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.28rem 0.7rem; width: clamp(8.2rem, 10.4vw, 10.8rem); min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; color: rgba(255, 255, 255, 0.52); cursor: pointer; outline: 0; transform: translate(-0.42rem, -0.42rem); transition: color 360ms var(--ease-out-soft), opacity 360ms var(--ease-out-soft), transform 620ms var(--ease-premium); } .process-journey__route li:nth-child(1) { --marker-x: 7%; --marker-y: 60%; } .process-journey__route li:nth-child(2) { --marker-x: 25%; --marker-y: 43%; } .process-journey__route li:nth-child(3) { --marker-x: 43%; --marker-y: 58%; } .process-journey__route li:nth-child(4) { --marker-x: 57%; --marker-y: 55%; } .process-journey__route li:nth-child(5) { --marker-x: 73%; --marker-y: 35%; } .process-journey__route li:nth-child(6) { --marker-x: 86%; --marker-y: 39%; } .process-journey__route li::before { content: ""; position: absolute; top: 0; left: 0; width: 0.78rem; height: 0.78rem; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; background: var(--color-ink); box-shadow: 0 0 0 0 rgba(199, 185, 149, 0); transform: translate(-50%, -50%); transition: background-color 420ms var(--ease-out-soft), border-color 420ms var(--ease-out-soft), box-shadow 520ms var(--ease-out-soft), transform 620ms var(--ease-premium); transition-delay: calc(var(--milestone-index, 0) * 65ms); } .process-journey__route li::after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 2.4rem; height: 1px; background: rgba(255, 255, 255, 0.18); transform: translate(0.72rem, -50%) scaleX(0.62); transform-origin: left center; transition: background-color 360ms var(--ease-out-soft), transform 520ms var(--ease-premium); } .process-journey__milestone-number { grid-column: 1; grid-row: 1 / span 3; padding-left: 0.9rem; font-family: var(--font-heading); font-size: clamp(1.55rem, 2.6vw, 3rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.055em; color: rgba(199, 185, 149, 0.28); transition: color 360ms var(--ease-out-soft), transform 620ms var(--ease-premium); } .process-journey__route small, .process-journey__route h3, .process-journey__route p { grid-column: 2; } .process-journey__route small { padding-top: 0.08rem; font-size: 0.55rem; color: rgba(199, 185, 149, 0.48); } .process-journey__route h3 { max-width: 8.8rem; font-size: clamp(0.78rem, 0.85vw, 0.92rem); line-height: 1.14; color: rgba(255, 255, 255, 0.64); } .process-journey__route p { max-width: 12rem; font-size: 0.74rem; line-height: 1.48; color: rgba(255, 255, 255, 0.52); } .process-journey__system.is-process-enhanced .process-journey__route p { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(0.35rem); transition: max-height 460ms var(--ease-out-soft), opacity 320ms var(--ease-out-soft), transform 520ms var(--ease-premium); } .process-journey__system.is-process-enhanced .process-journey__route li.is-step-active p { max-height: 0; opacity: 0; transform: translateY(0.35rem); } .process-journey__system.is-interacting .process-journey__route li:not(.is-step-active) { opacity: 0.45; } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { color: rgba(255, 255, 255, 0.86); transform: translate(-0.42rem, -0.42rem) scale(1.04); } .process-journey__route li.is-step-complete::before, .process-journey__route li.is-step-active::before, .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before { border-color: rgba(199, 185, 149, 0.92); background: rgba(199, 185, 149, 0.94); box-shadow: 0 0 0 0.46rem rgba(199, 185, 149, 0.09), 0 0 1.5rem rgba(199, 185, 149, 0.2); transform: translate(-50%, -50%) scale(1.08); } .process-journey__route li.is-step-complete::after, .process-journey__route li.is-step-active::after, .process-journey__route li:hover::after, .process-journey__route li:focus-visible::after { background: rgba(199, 185, 149, 0.5); transform: translate(0.72rem, -50%) scaleX(1); } .process-journey__route li.is-step-active::before { box-shadow: 0 0 0 0.65rem rgba(199, 185, 149, 0.13), 0 0 2.1rem rgba(199, 185, 149, 0.32); transform: translate(-50%, -50%) scale(1.28); } .process-journey__route li.is-step-complete .process-journey__milestone-number, .process-journey__route li.is-step-active .process-journey__milestone-number { color: rgba(199, 185, 149, 0.74); } .process-journey__route li.is-step-active .process-journey__milestone-number { transform: translateY(-0.08rem) scale(1.08); } .process-journey__route li.is-step-active h3 { color: #fff; } @keyframes process-curved-route-sheen { 0% { opacity: 0; stroke-dashoffset: calc(1 - var(--process-progress) + 0.16); } 18%, 72% { opacity: 0.82; } 100% { opacity: 0; stroke-dashoffset: calc(1 - var(--process-progress) - 0.08); } } @media (max-width: 1080px) { .process-journey__lead { grid-template-columns: 1fr; } .process-journey__lead .lead { max-width: 45rem; } .process-journey__system { min-height: clamp(48rem, 86vw, 58rem); } .process-journey__stage { top: clamp(4.8rem, 8vw, 6.4rem); width: min(30rem, calc(100% - 3rem)); } .process-journey__stage-copy h3 { font-size: clamp(2.8rem, 8vw, 5.8rem); } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { width: clamp(8rem, 16vw, 11rem); } } @media (max-width: 720px) { .section--process-journey { padding-block: clamp(4.8rem, 15vw, 6.8rem); } .process-journey { gap: 2.4rem; } .process-journey__lead h2 { font-size: clamp(2.65rem, 13vw, 4.8rem); } .process-journey__system { min-height: 0; padding: clamp(1.15rem, 5vw, 1.55rem); } .process-journey__system::after { display: none; } .process-journey__stage { position: relative; top: auto; left: auto; width: auto; margin-bottom: 2.2rem; padding: 0.35rem 0 0.75rem; } .process-journey__stage-meta { margin-bottom: 1.4rem; } .process-journey__ghost-number { right: -0.04em; top: auto; bottom: 0.4rem; font-size: clamp(7rem, 34vw, 10.5rem); } .process-journey__stage-copy { max-width: min(24rem, 100%); } .process-journey__stage-copy h3 { font-size: clamp(2.15rem, 12vw, 3.65rem); } .process-journey__stage-copy p { font-size: 0.98rem; } .process-journey__route-board { position: relative; inset: auto; min-height: 0; } .process-journey__route-scale, .process-journey__route-line { display: none; } .process-journey__route { position: relative; inset: auto; display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 0 0 1.8rem; } .process-journey__route::before, .process-journey__route::after { display: block; content: ""; position: absolute; top: 0.9rem; bottom: 0.9rem; left: 0.36rem; width: 1px; height: auto; pointer-events: none; } .process-journey__route::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12)); } .process-journey__route::after { background: linear-gradient(180deg, rgba(199, 185, 149, 0.2), rgba(199, 185, 149, 0.9)); box-shadow: 0 0 18px rgba(199, 185, 149, 0.13); transform: scaleY(var(--process-progress)); transform-origin: top center; transition: transform 820ms var(--ease-premium); } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { position: relative; left: auto; top: auto; width: auto; padding: 1rem 0 1rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); transform: none; } .process-journey__route li:first-child { border-top: 0; } .process-journey__route li::before { top: 1.45rem; left: -1.44rem; transform: translateY(-50%); } .process-journey__route li::after { top: 1.45rem; left: -1.2rem; width: 1.45rem; transform: translateY(-50%) scaleX(0.55); } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { transform: translateX(0.18rem); } .process-journey__route li.is-step-complete::before, .process-journey__route li.is-step-active::before, .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before { transform: translateY(-50%) scale(1.08); } .process-journey__route li.is-step-active::before { transform: translateY(-50%) scale(1.2); } .process-journey__milestone-number { font-size: clamp(1.9rem, 10vw, 3.25rem); } .process-journey__route h3 { max-width: none; font-size: 0.98rem; } .process-journey__system.is-process-enhanced .process-journey__route li:not(.is-step-active) p { max-height: 0; opacity: 0; } } .section--process-journey { padding-block: clamp(6.4rem, 9vw, 11rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.032) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(180deg, #f5f1e9 0%, #e7dfd4 100%); } .section--process-journey::before { inset: clamp(0.9rem, 1.45vw, 1.25rem); border-color: rgba(23, 26, 24, 0.055); } .section--process-journey::after, .process-journey__trace, .process-journey__stage-icon, .process-journey__milestone-icon { display: none; } .process-journey { gap: clamp(3.4rem, 5.6vw, 6.6rem); } .process-journey__lead { grid-template-columns: minmax(0, 0.58fr) minmax(20rem, 0.34fr); align-items: end; } .process-journey__lead h2 { max-width: 15.5ch; font-size: clamp(3.1rem, 5.55vw, 6.85rem); line-height: 0.87; } .process-journey__lead .lead { max-width: 35rem; color: rgba(23, 26, 24, 0.66); } .process-journey__system { --process-progress: 0.035; position: relative; display: block; min-height: clamp(44rem, 62vw, 56rem); padding: 0; border: 1px solid rgba(23, 26, 24, 0.16); background: radial-gradient(circle at var(--process-x) var(--process-y), rgba(199, 185, 149, 0.15), transparent 17%), linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(180deg, #101611 0%, #060a08 100%); box-shadow: 0 42px 100px rgba(23, 26, 24, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.075); overflow: hidden; isolation: isolate; } .process-journey__system::before { display: block; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 16.66%, linear-gradient(45deg, transparent 0 58%, rgba(199, 185, 149, 0.055) 58.05% 58.18%, transparent 58.25%), radial-gradient(circle at 82% 14%, rgba(199, 185, 149, 0.1), transparent 28%); opacity: 1; transform: translate3d(var(--process-drift-x-inverse), var(--process-drift-y-inverse), 0); } .process-journey__system::after { content: ""; position: absolute; z-index: 1; right: clamp(3rem, 5.8vw, 6.4rem); bottom: clamp(2.4rem, 4.2vw, 4.5rem); width: clamp(11rem, 23vw, 25rem); height: 1px; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(199, 185, 149, 0.44)); opacity: 0.72; transform: scaleX(calc(0.32 + var(--process-progress) * 0.68)); transform-origin: right center; transition: transform 980ms var(--ease-premium), opacity 420ms var(--ease-out-soft); pointer-events: none; } .process-journey__stage { position: absolute; z-index: 6; left: clamp(2rem, 4vw, 4.4rem); top: clamp(24rem, 34vw, 29rem); bottom: auto; display: grid; align-content: start; width: min(29rem, calc(100% - 4rem)); min-height: 0; padding: clamp(1rem, 1.7vw, 1.45rem) clamp(1.1rem, 1.9vw, 1.65rem) clamp(1.1rem, 1.9vw, 1.65rem) 0; border: 0; background: linear-gradient(90deg, rgba(6, 10, 8, 0.93), rgba(6, 10, 8, 0.74) 72%, transparent); box-shadow: none; overflow: visible; } .process-journey__stage::before, .process-journey__stage::after { display: none; } .process-journey__stage-meta { position: relative; inset: auto; display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin-bottom: clamp(1.4rem, 2vw, 2.2rem); color: rgba(255, 255, 255, 0.42); } .process-journey__ghost-number { position: absolute; z-index: -1; right: -0.08em; top: clamp(1rem, 2vw, 2rem); bottom: auto; left: auto; font-size: clamp(8.5rem, 16vw, 17rem); line-height: 0.72; color: rgba(199, 185, 149, 0.082); text-shadow: none; transform: translate3d(var(--process-drift-x-soft), var(--process-drift-y-soft), 0); transition: opacity 420ms var(--ease-out-soft), transform 760ms var(--ease-premium); } .process-journey__stage-copy { max-width: 31rem; margin: 0; gap: clamp(0.65rem, 0.95vw, 0.95rem); padding-left: clamp(1rem, 1.7vw, 1.55rem); border-left: 1px solid rgba(199, 185, 149, 0.46); transition: opacity 260ms var(--ease-out-soft), transform 520ms var(--ease-premium); } .process-journey__stage-copy small { padding-left: 0; font-size: 0.67rem; color: rgba(199, 185, 149, 0.86); } .process-journey__stage-copy small::before { display: none; } .process-journey__stage-copy h3 { max-width: 12ch; font-size: clamp(2.55rem, 4vw, 4.55rem); line-height: 0.9; letter-spacing: -0.058em; } .process-journey__stage-copy p { max-width: 28rem; font-size: clamp(1rem, 1.08vw, 1.13rem); line-height: 1.68; color: rgba(255, 255, 255, 0.66); } .process-journey__stage.is-updating .process-journey__stage-copy { opacity: 0; transform: translateY(0.45rem); } .process-journey__stage.is-updating .process-journey__ghost-number { opacity: 0.42; transform: translate3d(0.25rem, 0, 0); } .process-journey__route-board { position: absolute; z-index: 2; inset: 0; display: block; min-height: 0; padding: 0; border: 0; background: transparent; overflow: visible; } .process-journey__route-board::before, .process-journey__route-board::after { display: none; } .process-journey__route-scale { position: absolute; z-index: 4; top: clamp(2rem, 3.3vw, 3.5rem); left: clamp(2rem, 4vw, 4.4rem); right: clamp(2rem, 4vw, 4.4rem); display: flex; justify-content: space-between; padding: 0; border: 0; font-size: 0.58rem; font-weight: 850; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.35); } .process-journey__route-line { position: absolute; z-index: 1; top: clamp(4.6rem, 7vw, 6.8rem); right: clamp(2rem, 3.8vw, 4.2rem); bottom: clamp(9.5rem, 15vw, 14rem); left: clamp(1.5rem, 3vw, 3.2rem); display: block; width: auto; height: auto; overflow: visible; pointer-events: none; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.18)); } .process-journey__route-line::before, .process-journey__route-line::after { display: none; } .process-journey__route-base, .process-journey__route-fill, .process-journey__route-sheen, .process-journey__route-branch { position: static; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .process-journey__route-branch { stroke: rgba(119, 130, 116, 0.22); stroke-width: 2.4; stroke-dasharray: 0; } .process-journey__route-base { stroke: rgba(238, 236, 228, 0.19); stroke-width: 8; } .process-journey__route-fill { stroke: rgba(199, 185, 149, 0.94); stroke-width: 5.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--process-progress)); filter: drop-shadow(0 0 13px rgba(199, 185, 149, 0.2)); transition: stroke-dashoffset 1080ms var(--ease-premium); } .process-journey__route-sheen { stroke: rgba(255, 248, 226, 0.82); stroke-width: 9; stroke-dasharray: 0.065 1; stroke-dashoffset: calc(1 - var(--process-progress)); opacity: 0; filter: blur(0.45px) drop-shadow(0 0 14px rgba(199, 185, 149, 0.26)); } .process-journey__system.is-interacting .process-journey__route-sheen { animation: process-subway-route-sheen 1500ms var(--ease-out-soft) both; } .process-journey__map-tags { position: absolute; z-index: 3; inset: clamp(4.6rem, 7vw, 6.8rem) clamp(2rem, 3.8vw, 4.2rem) clamp(9.5rem, 15vw, 14rem) clamp(1.5rem, 3vw, 3.2rem); pointer-events: none; } .process-journey__map-tag { position: absolute; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.56rem; font-weight: 850; letter-spacing: 0.17em; line-height: 1; text-transform: uppercase; color: rgba(255, 255, 255, 0.34); transition: color 420ms var(--ease-out-soft), opacity 420ms var(--ease-out-soft); } .process-journey__map-tag::before { content: ""; width: 1.45rem; height: 1px; background: rgba(119, 130, 116, 0.45); } .process-journey__map-tag--planning { top: 5%; left: 26%; } .process-journey__map-tag--furniture { right: 23%; bottom: 17%; } .process-journey__map-tag--fitout { top: 8%; right: 2%; } .process-journey__system[style*="--process-step: 2"] .process-journey__map-tag--planning, .process-journey__system[style*="--process-step: 3"] .process-journey__map-tag--furniture, .process-journey__system[style*="--process-step: 4"] .process-journey__map-tag--furniture, .process-journey__system[style*="--process-step: 5"] .process-journey__map-tag--fitout, .process-journey__system[style*="--process-step: 6"] .process-journey__map-tag--fitout { color: rgba(199, 185, 149, 0.76); } .process-journey__route { position: absolute; z-index: 4; inset: clamp(4.6rem, 7vw, 6.8rem) clamp(2rem, 3.8vw, 4.2rem) clamp(9.5rem, 15vw, 14rem) clamp(1.5rem, 3vw, 3.2rem); display: block; padding: 0; margin: 0; list-style: none; } .process-journey__route::before, .process-journey__route::after { display: none; } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { position: absolute; left: var(--marker-x); top: var(--marker-y); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.24rem 0.66rem; width: clamp(8rem, 10.2vw, 10.8rem); min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; color: rgba(255, 255, 255, 0.52); cursor: pointer; outline: 0; transform: translate(-0.44rem, -0.44rem); transition: color 380ms var(--ease-out-soft), opacity 380ms var(--ease-out-soft), transform 660ms var(--ease-premium); } .process-journey__route li:nth-child(1) { --marker-x: 8%; --marker-y: 69%; } .process-journey__route li:nth-child(2) { --marker-x: 25%; --marker-y: 43%; } .process-journey__route li:nth-child(3) { --marker-x: 40%; --marker-y: 55%; } .process-journey__route li:nth-child(4) { --marker-x: 56%; --marker-y: 43%; } .process-journey__route li:nth-child(5) { --marker-x: 73%; --marker-y: 27%; } .process-journey__route li:nth-child(6) { --marker-x: 90%; --marker-y: 45%; } .process-journey__route li::before { content: ""; position: absolute; top: 0; left: 0; width: 0.88rem; height: 0.88rem; border: 2px solid rgba(238, 236, 228, 0.48); border-radius: 999px; background: var(--color-ink); box-shadow: 0 0 0 0.2rem rgba(7, 10, 8, 0.88), 0 0 0 0 rgba(199, 185, 149, 0); transform: translate(-50%, -50%); transition: background-color 420ms var(--ease-out-soft), border-color 420ms var(--ease-out-soft), box-shadow 560ms var(--ease-out-soft), transform 660ms var(--ease-premium); transition-delay: calc(var(--milestone-index, 0) * 65ms); } .process-journey__route li::after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 2.25rem; height: 1px; background: rgba(238, 236, 228, 0.18); transform: translate(0.78rem, -50%) scaleX(0.6); transform-origin: left center; transition: background-color 380ms var(--ease-out-soft), transform 560ms var(--ease-premium); } .process-journey__milestone-number { grid-column: 1; grid-row: 1 / span 3; padding-left: 0.95rem; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.45vw, 2.8rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.055em; color: rgba(199, 185, 149, 0.3); transition: color 380ms var(--ease-out-soft), transform 660ms var(--ease-premium); } .process-journey__route small, .process-journey__route h3, .process-journey__route p { grid-column: 2; } .process-journey__route small { padding-top: 0.08rem; font-size: 0.54rem; color: rgba(199, 185, 149, 0.48); } .process-journey__route h3 { max-width: 8.8rem; font-size: clamp(0.77rem, 0.84vw, 0.91rem); line-height: 1.14; color: rgba(255, 255, 255, 0.65); } .process-journey__route p { max-width: 12rem; font-size: 0.74rem; line-height: 1.48; color: rgba(255, 255, 255, 0.52); } .process-journey__system.is-process-enhanced .process-journey__route p, .process-journey__system.is-process-enhanced .process-journey__route li.is-step-active p { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(0.35rem); } .process-journey__system.is-interacting .process-journey__route li:not(.is-step-active) { opacity: 0.44; } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { color: rgba(255, 255, 255, 0.88); transform: translate(-0.44rem, -0.44rem) scale(1.045); } .process-journey__route li.is-step-complete::before, .process-journey__route li.is-step-active::before, .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before { border-color: rgba(199, 185, 149, 0.94); background: var(--color-ink); box-shadow: 0 0 0 0.2rem rgba(7, 10, 8, 0.9), 0 0 0 0.56rem rgba(199, 185, 149, 0.11), 0 0 1.6rem rgba(199, 185, 149, 0.22); transform: translate(-50%, -50%) scale(1.08); } .process-journey__route li.is-step-active::before { background: rgba(199, 185, 149, 0.94); box-shadow: 0 0 0 0.2rem rgba(7, 10, 8, 0.9), 0 0 0 0.72rem rgba(199, 185, 149, 0.13), 0 0 2.2rem rgba(199, 185, 149, 0.34); transform: translate(-50%, -50%) scale(1.26); } .process-journey__route li.is-step-complete::after, .process-journey__route li.is-step-active::after, .process-journey__route li:hover::after, .process-journey__route li:focus-visible::after { background: rgba(199, 185, 149, 0.5); transform: translate(0.78rem, -50%) scaleX(1); } .process-journey__route li.is-step-complete .process-journey__milestone-number, .process-journey__route li.is-step-active .process-journey__milestone-number { color: rgba(199, 185, 149, 0.76); } .process-journey__route li.is-step-active .process-journey__milestone-number { transform: translateY(-0.08rem) scale(1.08); } .process-journey__route li.is-step-active h3 { color: #fff; } .motion-enhanced .process-journey__route-base { stroke-dasharray: 1; stroke-dashoffset: 1; animation: process-subway-base-draw 1400ms var(--ease-premium) 180ms both; transition: stroke-dashoffset 1400ms var(--ease-premium); } .motion-enhanced .process-journey__route-branch, .motion-enhanced .process-journey__map-tag { opacity: 0; animation: process-subway-fade-in 820ms var(--ease-out-soft) 520ms both; transition: opacity 760ms var(--ease-out-soft); } .motion-enhanced .process-journey__route li { opacity: 0; transform: translate(-0.44rem, 0.15rem); animation: process-subway-station-in 760ms var(--ease-premium) both; animation-delay: calc(560ms + (var(--milestone-index, 0) * 90ms)); transition: opacity 620ms var(--ease-out-soft), color 380ms var(--ease-out-soft), transform 760ms var(--ease-premium); transition-delay: calc(var(--milestone-index, 0) * 80ms); } .motion-enhanced .process-journey__lead.is-visible + .process-journey__system .process-journey__route-base, .motion-enhanced .process-journey__system:has(.motion-reveal.is-visible) .process-journey__route-base { stroke-dashoffset: 0; } .motion-enhanced .process-journey__lead.is-visible + .process-journey__system .process-journey__route-branch, .motion-enhanced .process-journey__lead.is-visible + .process-journey__system .process-journey__map-tag, .motion-enhanced .process-journey__system:has(.motion-reveal.is-visible) .process-journey__route-branch, .motion-enhanced .process-journey__system:has(.motion-reveal.is-visible) .process-journey__map-tag { opacity: 1; } .motion-enhanced .process-journey__lead.is-visible + .process-journey__system .process-journey__route li, .motion-enhanced .process-journey__system:has(.motion-reveal.is-visible) .process-journey__route li { opacity: 1; transform: translate(-0.44rem, -0.44rem); } @keyframes process-subway-base-draw { to { stroke-dashoffset: 0; } } @keyframes process-subway-fade-in { to { opacity: 1; } } @keyframes process-subway-station-in { to { opacity: 1; transform: translate(-0.44rem, -0.44rem); } } @keyframes process-subway-route-sheen { 0% { opacity: 0; stroke-dashoffset: calc(1 - var(--process-progress) + 0.14); } 18%, 72% { opacity: 0.76; } 100% { opacity: 0; stroke-dashoffset: calc(1 - var(--process-progress) - 0.08); } } @media (max-width: 1080px) { .process-journey__lead { grid-template-columns: 1fr; } .process-journey__lead .lead { max-width: 45rem; } .process-journey__system { min-height: clamp(45rem, 86vw, 56rem); } .process-journey__stage { width: min(29rem, calc(100% - 3rem)); } .process-journey__stage-copy h3 { font-size: clamp(2.7rem, 7.4vw, 5.4rem); } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { width: clamp(7.5rem, 16vw, 10.5rem); } } @media (max-width: 720px) { .section--process-journey { padding-block: clamp(4.8rem, 15vw, 6.8rem); } .process-journey { gap: 2.4rem; } .process-journey__lead h2 { font-size: clamp(2.65rem, 13vw, 4.8rem); } .process-journey__system { min-height: 0; padding: clamp(1.15rem, 5vw, 1.55rem); } .process-journey__system::after { display: none; } .process-journey__stage { position: relative; top: auto; left: auto; bottom: auto; width: auto; margin-bottom: 2.2rem; padding: 0.35rem 0 0.75rem; background: transparent; } .process-journey__stage-meta { margin-bottom: 1.4rem; } .process-journey__ghost-number { right: -0.04em; top: auto; bottom: 0.4rem; font-size: clamp(7rem, 34vw, 10.5rem); } .process-journey__stage-copy { max-width: min(24rem, 100%); } .process-journey__stage-copy h3 { font-size: clamp(2.15rem, 12vw, 3.65rem); } .process-journey__stage-copy p { font-size: 0.98rem; } .process-journey__route-board { position: relative; inset: auto; min-height: 0; } .process-journey__route-scale, .process-journey__route-line, .process-journey__map-tags { display: none; } .process-journey__route { position: relative; inset: auto; display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 0 0 1.8rem; } .process-journey__route::before, .process-journey__route::after { display: block; content: ""; position: absolute; top: 0.9rem; bottom: 0.9rem; left: 0.36rem; width: 2px; height: auto; border-radius: 999px; pointer-events: none; } .process-journey__route::before { background: linear-gradient(180deg, rgba(238, 236, 228, 0.14), rgba(238, 236, 228, 0.3), rgba(238, 236, 228, 0.14)); } .process-journey__route::after { background: linear-gradient(180deg, rgba(199, 185, 149, 0.2), rgba(199, 185, 149, 0.92)); box-shadow: 0 0 18px rgba(199, 185, 149, 0.13); transform: scaleY(var(--process-progress)); transform-origin: top center; transition: transform 900ms var(--ease-premium); } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { position: relative; left: auto; top: auto; width: auto; padding: 1rem 0 1rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); transform: none; } .process-journey__route li:first-child { border-top: 0; } .process-journey__route li::before { top: 1.45rem; left: -1.44rem; transform: translateY(-50%); } .process-journey__route li::after { top: 1.45rem; left: -1.2rem; width: 1.45rem; transform: translateY(-50%) scaleX(0.55); } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { transform: translateX(0.18rem); } .process-journey__route li.is-step-complete::before, .process-journey__route li.is-step-active::before, .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before { transform: translateY(-50%) scale(1.08); } .process-journey__route li.is-step-active::before { transform: translateY(-50%) scale(1.2); } .process-journey__milestone-number { font-size: clamp(1.9rem, 10vw, 3.25rem); } .process-journey__route h3 { max-width: none; font-size: 0.98rem; } } .section--process-journey { padding-block: clamp(6.2rem, 8.8vw, 10.6rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.028) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(180deg, #f5f1e9 0%, #e8e0d5 100%); } .process-journey { gap: clamp(3rem, 5vw, 5.8rem); } .process-journey__lead h2 { max-width: 15.5ch; font-size: clamp(3rem, 5.2vw, 6.25rem); } .process-journey__system { --process-progress: 0.035; min-height: clamp(36rem, 50vw, 44rem); background: radial-gradient(circle at var(--process-x) var(--process-y), rgba(199, 185, 149, 0.11), transparent 16%), linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(180deg, #101611 0%, #060a08 100%); } .process-journey__system::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.034) 1px, transparent 1px) 0 0 / 100% 20%, radial-gradient(circle at 82% 14%, rgba(199, 185, 149, 0.065), transparent 28%); transform: none; } .process-journey__system::after, .process-journey__route-branch, .process-journey__map-tags { display: none; } .process-journey__route-scale { top: clamp(1.9rem, 3vw, 3.2rem); color: rgba(255, 255, 255, 0.28); } .process-journey__route-line { top: clamp(4.5rem, 6.6vw, 6.7rem); right: clamp(2.1rem, 4vw, 4.6rem); bottom: clamp(12.5rem, 18vw, 16rem); left: clamp(2rem, 3.8vw, 4.2rem); filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.14)); } .process-journey__route-base { stroke: rgba(238, 236, 228, 0.18); stroke-width: 6.5; } .process-journey__route-fill { stroke: rgba(199, 185, 149, 0.9); stroke-width: 4.8; filter: drop-shadow(0 0 10px rgba(199, 185, 149, 0.16)); transition: stroke-dashoffset 1120ms var(--ease-premium); } .process-journey__route-sheen { stroke-width: 7.5; stroke-dasharray: 0.055 1; filter: blur(0.35px) drop-shadow(0 0 12px rgba(199, 185, 149, 0.2)); } .process-journey__route { inset: clamp(4.5rem, 6.6vw, 6.7rem) clamp(2.1rem, 4vw, 4.6rem) clamp(12.5rem, 18vw, 16rem) clamp(2rem, 3.8vw, 4.2rem); } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { width: clamp(7.2rem, 9.4vw, 10rem); gap: 0.18rem 0.58rem; color: rgba(255, 255, 255, 0.36); } .process-journey__route li::before { width: 0.8rem; height: 0.8rem; border-width: 1.5px; border-color: rgba(238, 236, 228, 0.34); box-shadow: 0 0 0 0.22rem rgba(7, 10, 8, 0.9); } .process-journey__route li::after { width: 1.65rem; background: rgba(238, 236, 228, 0.12); transform: translate(0.7rem, -50%) scaleX(0.48); } .process-journey__milestone-number { padding-left: 0.88rem; font-size: clamp(1.18rem, 1.5vw, 1.75rem); color: rgba(199, 185, 149, 0.28); } .process-journey__route small { font-size: 0.5rem; color: rgba(199, 185, 149, 0.38); } .process-journey__route h3 { max-width: 8rem; font-size: clamp(0.72rem, 0.78vw, 0.86rem); color: rgba(255, 255, 255, 0.48); } .process-journey__system.is-process-enhanced .process-journey__route p, .process-journey__system.is-process-enhanced .process-journey__route li.is-step-active p { max-height: 0; opacity: 0; overflow: hidden; } .process-journey__system.is-interacting .process-journey__route li:not(.is-step-active) { opacity: 0.34; } .process-journey__route li:hover, .process-journey__route li:focus-visible, .process-journey__route li.is-step-active { color: rgba(255, 255, 255, 0.82); transform: translate(-0.44rem, -0.44rem) scale(1.025); } .process-journey__route li.is-step-complete::before, .process-journey__route li.is-step-active::before, .process-journey__route li:hover::before, .process-journey__route li:focus-visible::before { border-color: rgba(199, 185, 149, 0.88); background: var(--color-ink); box-shadow: 0 0 0 0.22rem rgba(7, 10, 8, 0.92), 0 0 0 0.46rem rgba(199, 185, 149, 0.08), 0 0 1.15rem rgba(199, 185, 149, 0.16); } .process-journey__route li.is-step-active::before { background: rgba(199, 185, 149, 0.9); box-shadow: 0 0 0 0.22rem rgba(7, 10, 8, 0.92), 0 0 0 0.6rem rgba(199, 185, 149, 0.12), 0 0 1.65rem rgba(199, 185, 149, 0.26); } .process-journey__route li.is-step-complete .process-journey__milestone-number, .process-journey__route li.is-step-active .process-journey__milestone-number { color: rgba(199, 185, 149, 0.64); } .process-journey__route li.is-step-active h3 { color: rgba(255, 255, 255, 0.95); } .process-journey__stage { left: clamp(2.4rem, 4.2vw, 4.8rem); right: clamp(2.4rem, 4.2vw, 4.8rem); top: clamp(19rem, 26vw, 21.5rem); bottom: auto; width: auto; display: grid; grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 0.78fr); gap: clamp(1.4rem, 2.7vw, 3rem); align-items: end; padding: clamp(1.25rem, 2.2vw, 2rem) 0 0; border-top: 1px solid rgba(238, 236, 228, 0.12); background: transparent; } .process-journey__stage-meta { display: grid; gap: 0.55rem; margin: 0; color: rgba(255, 255, 255, 0.38); } .process-journey__stage-copy { max-width: 48rem; display: grid; grid-template-columns: minmax(8rem, 0.34fr) minmax(16rem, 0.66fr); gap: 0.7rem clamp(1.5rem, 3vw, 3.2rem); align-items: end; padding-left: 0; border-left: 0; } .process-journey__stage-copy small { grid-column: 1; align-self: start; font-size: 0.64rem; color: rgba(199, 185, 149, 0.78); } .process-journey__stage-copy h3 { grid-column: 1; max-width: 9.5ch; font-size: clamp(2.25rem, 3.7vw, 4.35rem); line-height: 0.9; } .process-journey__stage-copy p { grid-column: 2; max-width: 31rem; font-size: clamp(0.98rem, 1.05vw, 1.1rem); line-height: 1.68; color: rgba(255, 255, 255, 0.64); } .process-journey__ghost-number { right: clamp(1.5rem, 3vw, 3.2rem); bottom: clamp(0.2rem, 0.8vw, 0.6rem); top: auto; font-size: clamp(6rem, 12vw, 12.5rem); color: rgba(199, 185, 149, 0.045); } .motion-enhanced .process-journey__route-branch, .motion-enhanced .process-journey__map-tag { animation: none; } @media (max-width: 1080px) { .process-journey__system { min-height: clamp(37rem, 76vw, 45rem); } .process-journey__stage { grid-template-columns: 1fr; gap: 1.1rem; } .process-journey__stage-copy { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); } } @media (max-width: 720px) { .process-journey__system { min-height: 0; padding: clamp(1.15rem, 5vw, 1.55rem); } .process-journey__stage { position: relative; inset: auto; display: grid; grid-template-columns: 1fr; margin-bottom: 2rem; padding: 0.3rem 0 0.75rem; border-top: 0; } .process-journey__stage-copy { grid-template-columns: 1fr; max-width: min(24rem, 100%); } .process-journey__stage-copy small, .process-journey__stage-copy h3, .process-journey__stage-copy p { grid-column: auto; } .process-journey__stage-copy h3 { font-size: clamp(2.05rem, 11vw, 3.4rem); } .process-journey__ghost-number { right: -0.04em; bottom: 0.4rem; font-size: clamp(6rem, 30vw, 9rem); } .process-journey__route { padding-left: 1.75rem; } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { width: auto; gap: 0.2rem 0.65rem; padding: 0.92rem 0 0.92rem 1rem; } .process-journey__route h3 { max-width: none; font-size: 0.96rem; } } .section--process-journey { padding-block: clamp(5.8rem, 8vw, 9.8rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.028) 1px, transparent 1px) 0 0 / 10% 100%, radial-gradient(circle at 72% 18%, rgba(168, 129, 75, 0.08), transparent 24%), linear-gradient(180deg, #f6f1e9 0%, #ebe2d6 100%); color: var(--color-dark); } .section--process-journey::before { border-color: rgba(23, 26, 24, 0.055); } .section--process-journey::after, .process-journey__trace, .process-journey__stage-icon, .process-journey__milestone-icon, .process-journey__map-tags { display: none; } .process-journey { gap: clamp(2.8rem, 5vw, 5.6rem); } .process-journey__lead { grid-template-columns: minmax(0, 0.58fr) minmax(20rem, 0.36fr); align-items: end; } .process-journey__lead h2 { max-width: 15.8ch; font-size: clamp(3rem, 5.3vw, 6.45rem); color: var(--color-dark); } .process-journey__lead .lead { max-width: 36rem; color: rgba(23, 26, 24, 0.66); } .process-journey__system { --process-progress: 0.035; position: relative; display: block; min-height: clamp(40rem, 56vw, 49rem); padding: 0; border: 1px solid rgba(23, 26, 24, 0.08); background: linear-gradient(90deg, rgba(23, 26, 24, 0.028) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(180deg, rgba(255, 252, 246, 0.76), rgba(239, 231, 219, 0.82)); box-shadow: 0 34px 78px rgba(23, 26, 24, 0.11); overflow: hidden; isolation: isolate; color: var(--color-dark); } .process-journey__system::before { content: ""; position: absolute; z-index: 0; right: clamp(2rem, 5vw, 5.5rem); bottom: clamp(2.2rem, 4vw, 4.3rem); width: clamp(14rem, 32vw, 34rem); height: clamp(8rem, 19vw, 19rem); background: linear-gradient(90deg, rgba(138, 106, 54, 0.16) 1px, transparent 1px) 0 100% / 18% 58% no-repeat, linear-gradient(180deg, rgba(138, 106, 54, 0.13) 1px, transparent 1px) 0 100% / 100% 32% no-repeat, linear-gradient(155deg, transparent 0 54%, rgba(138, 106, 54, 0.16) 54.2% 54.7%, transparent 55%) 0 0 / 100% 100%; opacity: 0.32; transform: none; pointer-events: none; } .process-journey__system::after { display: none; } .process-journey__route-board { position: absolute; z-index: 1; inset: 0; display: block; padding: 0; background: transparent; overflow: visible; } .process-journey__route-board::before, .process-journey__route-board::after { display: none; } .process-journey__route-scale { position: absolute; z-index: 3; top: clamp(2rem, 3vw, 3.2rem); left: clamp(2rem, 4vw, 4rem); right: clamp(2rem, 4vw, 4rem); display: flex; justify-content: space-between; padding: 0; border: 0; font-size: 0.58rem; font-weight: 850; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(23, 26, 24, 0.42); } .process-journey__route-line { position: absolute; z-index: 1; inset: clamp(7.2rem, 9vw, 9rem) clamp(2rem, 4vw, 4.6rem) clamp(11.5rem, 15vw, 13.8rem); display: block; width: auto; height: auto; filter: drop-shadow(0 24px 24px rgba(23, 26, 24, 0.16)); pointer-events: none; overflow: visible; } .process-journey__route-line::before, .process-journey__route-line::after { display: none; } .process-journey__route-base, .process-journey__route-lane, .process-journey__route-fill, .process-journey__route-sheen { position: static; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .process-journey__route-base { stroke: #171917; stroke-width: 42; } .process-journey__route-lane { stroke: rgba(210, 179, 118, 0.86); stroke-width: 2.2; stroke-dasharray: 0.024 0.032; } .process-journey__route-fill { stroke: rgba(210, 179, 118, 0.98); stroke-width: 4.5; stroke-dasharray: var(--process-progress) 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 10px rgba(168, 129, 75, 0.18)); transition: stroke-dasharray 980ms var(--ease-premium); } .process-journey__route-sheen { stroke: rgba(255, 248, 226, 0.9); stroke-width: 7; stroke-dasharray: 0.055 1; stroke-dashoffset: calc(1 - var(--process-progress)); opacity: 0; filter: blur(0.4px) drop-shadow(0 0 12px rgba(168, 129, 75, 0.2)); } .process-journey__system.is-interacting .process-journey__route-sheen { animation: process-roadmap-sheen 1350ms var(--ease-out-soft) both; } .process-journey__route { position: absolute; z-index: 3; inset: clamp(7.2rem, 9vw, 9rem) clamp(2rem, 4vw, 4.6rem) clamp(11.5rem, 15vw, 13.8rem); display: block; padding: 0; margin: 0; list-style: none; } .process-journey__route::before, .process-journey__route::after, .process-journey__route li::before, .process-journey__route li::after { display: none; } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { position: absolute; left: var(--marker-x); top: var(--marker-y); width: clamp(7.4rem, 10.5vw, 11.4rem); min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; transform: translate(-50%, -100%); } .process-journey__route li:nth-child(1) { --marker-x: 5%; --marker-y: 82%; } .process-journey__route li:nth-child(2) { --marker-x: 24%; --marker-y: 76%; } .process-journey__route li:nth-child(3) { --marker-x: 43%; --marker-y: 66%; } .process-journey__route li:nth-child(4) { --marker-x: 61%; --marker-y: 54%; } .process-journey__route li:nth-child(5) { --marker-x: 77%; --marker-y: 39%; } .process-journey__route li:nth-child(6) { --marker-x: 91%; --marker-y: 24%; } .process-journey__station { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.28rem 0.72rem; width: 100%; padding: 0 0 2.3rem; border: 0; background: transparent; color: rgba(23, 26, 24, 0.76); text-align: left; cursor: pointer; appearance: none; transition: color 320ms var(--ease-out-soft), transform 520ms var(--ease-premium), opacity 320ms var(--ease-out-soft); } .process-journey__station::before { content: ""; position: absolute; left: 50%; bottom: 0.5rem; width: 1px; height: clamp(1.5rem, 3vw, 2.4rem); background: rgba(138, 106, 54, 0.38); transform: translateX(-50%); } .process-journey__station-dot { position: absolute; left: 50%; bottom: 0; width: 0.72rem; height: 0.72rem; border-radius: 999px; background: rgba(210, 179, 118, 0.92); box-shadow: 0 0 0 0.2rem rgba(255, 252, 246, 0.86), 0 0 1rem rgba(23, 26, 24, 0.18); transform: translate(-50%, 50%); transition: transform 420ms var(--ease-premium), box-shadow 420ms var(--ease-out-soft), background-color 320ms var(--ease-out-soft); } .process-journey__milestone-number { grid-column: 1; grid-row: 1 / span 3; padding-left: 0; font-family: var(--font-heading); font-size: clamp(1.35rem, 2.1vw, 2.15rem); font-weight: 500; line-height: 0.86; letter-spacing: -0.02em; color: rgba(138, 106, 54, 0.88); } .process-journey__station small { grid-column: 2; font-size: 0.55rem; line-height: 1; letter-spacing: 0.16em; color: rgba(138, 106, 54, 0.7); } .process-journey__milestone-title { grid-column: 2; max-width: 9.5rem; font-size: clamp(0.78rem, 0.9vw, 0.98rem); font-weight: 850; line-height: 1.15; letter-spacing: 0; text-transform: none; color: rgba(23, 26, 24, 0.9); } .process-journey__milestone-body { grid-column: 2; max-width: 10.5rem; font-size: 0.78rem; line-height: 1.45; color: rgba(23, 26, 24, 0.62); } .process-journey__system.is-process-enhanced .process-journey__milestone-body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .process-journey__system.is-interacting .process-journey__station:not(.is-step-active) { opacity: 0.62; } .process-journey__station:hover, .process-journey__station:focus-visible, .process-journey__station.is-step-active { color: var(--color-dark); transform: translateY(-0.18rem); outline: 0; } .process-journey__station:focus-visible .process-journey__station-dot, .process-journey__station:hover .process-journey__station-dot, .process-journey__station.is-step-complete .process-journey__station-dot, .process-journey__station.is-step-active .process-journey__station-dot { background: rgba(210, 179, 118, 1); box-shadow: 0 0 0 0.28rem rgba(255, 252, 246, 0.92), 0 0 0 0.56rem rgba(210, 179, 118, 0.12), 0 0 1.25rem rgba(138, 106, 54, 0.24); transform: translate(-50%, 50%) scale(1.08); } .process-journey__station.is-step-active .process-journey__station-dot { transform: translate(-50%, 50%) scale(1.28); } .process-journey__station.is-step-active .process-journey__milestone-title { color: #050706; } .process-journey__stage { position: absolute; z-index: 4; left: clamp(2rem, 4vw, 4rem); right: clamp(2rem, 4vw, 4rem); bottom: clamp(1.5rem, 2.8vw, 2.8rem); top: auto; display: grid; grid-template-columns: minmax(7rem, 0.18fr) minmax(0, 0.82fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: end; width: auto; min-height: 0; padding: clamp(1rem, 1.8vw, 1.5rem) 0 0; border-top: 1px solid rgba(23, 26, 24, 0.1); background: transparent; box-shadow: none; color: var(--color-dark); } .process-journey__stage-meta { position: relative; inset: auto; display: grid; gap: 0.5rem; margin: 0; color: rgba(23, 26, 24, 0.54); } .process-journey__stage-copy { display: grid; grid-template-columns: minmax(8rem, 0.34fr) minmax(16rem, 0.66fr); gap: 0.7rem clamp(1.5rem, 3vw, 3.2rem); align-items: end; max-width: 50rem; margin: 0; padding-left: 0; border-left: 0; } .process-journey__stage-copy small { grid-column: 1; align-self: start; padding-left: 0; font-size: 0.64rem; color: rgba(138, 106, 54, 0.78); } .process-journey__stage-copy small::before { display: none; } .process-journey__stage-copy h3 { grid-column: 1; max-width: 9.5ch; font-size: clamp(2.15rem, 3.4vw, 4rem); line-height: 0.92; letter-spacing: -0.04em; color: var(--color-dark); } .process-journey__stage-copy p { grid-column: 2; max-width: 33rem; font-size: clamp(0.98rem, 1.05vw, 1.1rem); line-height: 1.68; color: rgba(23, 26, 24, 0.66); } .process-journey__ghost-number { right: clamp(1rem, 2.4vw, 2.8rem); bottom: 0.2rem; top: auto; font-size: clamp(6rem, 12vw, 12rem); color: rgba(138, 106, 54, 0.055); } @keyframes process-roadmap-sheen { 0% { opacity: 0; stroke-dashoffset: calc(1 - var(--process-progress) + 0.14); } 18%, 72% { opacity: 0.82; } 100% { opacity: 0; stroke-dashoffset: calc(1 - var(--process-progress) - 0.08); } } @media (max-width: 1080px) { .process-journey__lead { grid-template-columns: 1fr; } .process-journey__system { min-height: clamp(39rem, 74vw, 46rem); } .process-journey__stage { grid-template-columns: 1fr; gap: 1rem; } } @media (max-width: 720px) { .process-journey__system { min-height: 0; padding: clamp(1.2rem, 5vw, 1.6rem); } .process-journey__route-scale, .process-journey__route-line { display: none; } .process-journey__route { position: relative; inset: auto; display: grid; gap: 0; padding: 0 0 0 1.75rem; margin: 0 0 2rem; } .process-journey__route::before, .process-journey__route::after { display: block; content: ""; position: absolute; top: 1rem; bottom: 1rem; left: 0.36rem; width: 2px; border-radius: 999px; pointer-events: none; } .process-journey__route::before { background: rgba(23, 26, 24, 0.24); } .process-journey__route::after { background: rgba(210, 179, 118, 0.94); box-shadow: 0 0 18px rgba(138, 106, 54, 0.13); transform: scaleY(var(--process-progress)); transform-origin: top center; transition: transform 880ms var(--ease-premium); } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { position: relative; left: auto; top: auto; width: auto; transform: none; } .process-journey__station { padding: 0.92rem 0 0.92rem 0.95rem; } .process-journey__station::before { left: -1.15rem; top: 1.43rem; bottom: auto; width: 1.35rem; height: 1px; transform: none; } .process-journey__station-dot { left: -1.38rem; top: 1.43rem; bottom: auto; transform: translateY(-50%); } .process-journey__station:focus-visible .process-journey__station-dot, .process-journey__station:hover .process-journey__station-dot, .process-journey__station.is-step-complete .process-journey__station-dot, .process-journey__station.is-step-active .process-journey__station-dot { transform: translateY(-50%) scale(1.08); } .process-journey__station.is-step-active .process-journey__station-dot { transform: translateY(-50%) scale(1.2); } .process-journey__stage { position: relative; inset: auto; grid-template-columns: 1fr; padding-top: 1.2rem; } .process-journey__stage-copy { grid-template-columns: 1fr; } .process-journey__stage-copy small, .process-journey__stage-copy h3, .process-journey__stage-copy p { grid-column: auto; } .process-journey__stage-copy h3 { font-size: clamp(2rem, 11vw, 3.25rem); } } .process-journey__route li::before, .process-journey__route li::after { display: none; content: none; } .process-journey__route li:hover, .process-journey__route li:focus-within, .process-journey__route li.is-step-active { transform: translate(-50%, -100%); } .process-journey__route .process-journey__station { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.28rem 0.72rem; width: 100%; padding: 0 0 3.65rem; border: 0; border-radius: 0; background: transparent; color: rgba(23, 26, 24, 0.76); text-align: left; box-shadow: none; transform: none; } .process-journey__route .process-journey__station::before { content: ""; position: absolute; left: 50%; bottom: 0.5rem; display: block; width: 1px; height: clamp(2.4rem, 4vw, 3.6rem); background: rgba(138, 106, 54, 0.38); transform: translateX(-50%); } .process-journey__route .process-journey__station-dot { position: absolute; left: 50%; bottom: 0; display: block; width: 0.72rem; height: 0.72rem; border-radius: 999px; background: rgba(210, 179, 118, 0.92); box-shadow: 0 0 0 0.2rem rgba(255, 252, 246, 0.86), 0 0 1rem rgba(23, 26, 24, 0.18); transform: translate(-50%, 50%); } .process-journey__route .process-journey__milestone-number { display: block; grid-column: 1; grid-row: 1 / span 3; align-self: start; justify-self: start; padding-left: 0; font-family: var(--font-heading); font-size: clamp(1.35rem, 2.1vw, 2.15rem); font-weight: 500; line-height: 0.86; letter-spacing: -0.02em; color: rgba(138, 106, 54, 0.88); text-shadow: 0 1px 0 rgba(255, 252, 246, 0.78), 0 0 12px rgba(255, 252, 246, 0.72); transform: none; } .process-journey__route .process-journey__station small { display: block; grid-column: 2; grid-row: auto; max-width: none; font-size: 0.55rem; font-weight: 850; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(138, 106, 54, 0.7); text-shadow: 0 1px 0 rgba(255, 252, 246, 0.82), 0 0 10px rgba(255, 252, 246, 0.72); transform: none; } .process-journey__route .process-journey__milestone-title { display: block; grid-column: 2; grid-row: auto; max-width: 9.5rem; font-size: clamp(0.78rem, 0.9vw, 0.98rem); font-weight: 850; line-height: 1.15; letter-spacing: 0; text-transform: none; color: rgba(23, 26, 24, 0.9); text-shadow: 0 1px 0 rgba(255, 252, 246, 0.86), 0 0 12px rgba(255, 252, 246, 0.76); transform: none; } .process-journey__route .process-journey__milestone-body { display: block; grid-column: 2; grid-row: auto; max-width: 10.5rem; padding-left: 0; font-size: 0.78rem; line-height: 1.45; color: rgba(23, 26, 24, 0.62); transform: none; } .process-journey__system.is-process-enhanced .process-journey__route .process-journey__milestone-body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .process-journey__system.is-process-enhanced .process-journey__route .process-journey__milestone-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .process-journey__system.is-process-enhanced .process-journey__route .process-journey__station.is-step-active .process-journey__milestone-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } .process-journey__route .process-journey__station:hover, .process-journey__route .process-journey__station:focus-visible, .process-journey__route .process-journey__station.is-step-active { color: var(--color-dark); transform: translateY(-0.18rem); outline: 0; } .process-journey__route .process-journey__station:hover .process-journey__milestone-number, .process-journey__route .process-journey__station:focus-visible .process-journey__milestone-number, .process-journey__route .process-journey__station.is-step-active .process-journey__milestone-number { transform: none; color: rgba(138, 106, 54, 1); } .process-journey__route .process-journey__station.is-step-active .process-journey__milestone-title { color: #050706; } .process-journey__system.is-process-enhanced .process-journey__route .process-journey__station.is-step-active .process-journey__milestone-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .process-journey__route .process-journey__station:focus-visible .process-journey__station-dot, .process-journey__route .process-journey__station:hover .process-journey__station-dot, .process-journey__route .process-journey__station.is-step-complete .process-journey__station-dot, .process-journey__route .process-journey__station.is-step-active .process-journey__station-dot { background: rgba(210, 179, 118, 1); box-shadow: 0 0 0 0.28rem rgba(255, 252, 246, 0.92), 0 0 0 0.56rem rgba(210, 179, 118, 0.12), 0 0 1.25rem rgba(138, 106, 54, 0.24); transform: translate(-50%, 50%) scale(1.08); } .process-journey__route .process-journey__station.is-step-active .process-journey__station-dot { transform: translate(-50%, 50%) scale(1.28); } @media (max-width: 720px) { .process-journey__system { display: flex; flex-direction: column; gap: 1.35rem; min-height: 0; overflow: visible; } .process-journey__route-board { position: relative; inset: auto; order: 1; min-height: 0; padding: 0; overflow: visible; } .process-journey__route-scale { display: none; } .process-journey__route li:hover, .process-journey__route li:focus-within, .process-journey__route li.is-step-active { transform: none; } .process-journey__system.is-process-enhanced .process-journey__route .process-journey__milestone-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } .process-journey__route .process-journey__station { padding: 0.92rem 0 0.92rem 0.95rem; } .process-journey__route .process-journey__station::before { left: -1.15rem; top: 1.43rem; bottom: auto; width: 1.35rem; height: 1px; transform: none; } .process-journey__route .process-journey__station-dot { left: -1.38rem; top: 1.43rem; bottom: auto; transform: translateY(-50%); } .process-journey__route .process-journey__station:focus-visible .process-journey__station-dot, .process-journey__route .process-journey__station:hover .process-journey__station-dot, .process-journey__route .process-journey__station.is-step-complete .process-journey__station-dot, .process-journey__route .process-journey__station.is-step-active .process-journey__station-dot { transform: translateY(-50%) scale(1.08); } .process-journey__route .process-journey__station.is-step-active .process-journey__station-dot { transform: translateY(-50%) scale(1.2); } .process-journey__stage { position: relative; inset: auto; order: 2; display: grid; grid-template-columns: 1fr; gap: 1.1rem; padding-top: 1.2rem; border-top: 1px solid rgba(23, 26, 24, 0.1); } .process-journey__stage-copy { grid-template-columns: 1fr; } .process-journey__stage-copy small, .process-journey__stage-copy h3, .process-journey__stage-copy p { grid-column: auto; } .process-journey__stage-copy h3 { font-size: clamp(2rem, 11vw, 3.25rem); } .process-journey__ghost-number { display: none; } } .section--process-journey { background: linear-gradient(90deg, rgba(23, 26, 24, 0.026) 1px, transparent 1px) 0 0 / 8.333% 100%, radial-gradient(circle at 84% 22%, rgba(175, 139, 84, 0.12), transparent 25%), linear-gradient(180deg, #f8f3ea 0%, #eee5d8 100%); } .process-journey { gap: clamp(3.2rem, 5.8vw, 6.8rem); } .process-journey__lead { grid-template-columns: minmax(0, 0.62fr) minmax(18rem, 0.34fr); } .process-journey__lead h2 { max-width: 14.8ch; letter-spacing: -0.065em; } .process-journey__system { --process-progress: 0.035; --process-truck-x: 34px; --process-truck-y: 342px; --process-truck-angle: -2deg; min-height: clamp(43rem, 58vw, 52rem); border: 1px solid rgba(23, 26, 24, 0.075); background: linear-gradient(90deg, rgba(23, 26, 24, 0.027) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(239, 231, 218, 0.9)); box-shadow: 0 38px 86px rgba(23, 26, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .process-journey__system::before { right: clamp(2rem, 4vw, 4.8rem); bottom: clamp(1.4rem, 2vw, 2.2rem); width: clamp(16rem, 36vw, 37rem); height: clamp(10rem, 20vw, 22rem); background: linear-gradient(90deg, rgba(138, 106, 54, 0.12) 1px, transparent 1px) 0 100% / 16% 62% no-repeat, linear-gradient(180deg, rgba(138, 106, 54, 0.11) 1px, transparent 1px) 0 100% / 100% 34% no-repeat, linear-gradient(155deg, transparent 0 51%, rgba(138, 106, 54, 0.13) 51.2% 51.55%, transparent 51.75%) 0 0 / 100% 100%; opacity: 0.36; } .process-journey__drafting { position: absolute; z-index: 0; right: clamp(1rem, 2.4vw, 2.8rem); bottom: clamp(1.2rem, 2.5vw, 3rem); width: min(54rem, 58vw); max-width: 72%; color: rgba(92, 78, 56, 0.24); opacity: 0.5; pointer-events: none; } .process-journey__drafting path, .process-journey__drafting circle { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; } .process-journey__route-board { z-index: 2; } .process-journey__route-line { z-index: 2; inset: clamp(6.4rem, 8.2vw, 8.4rem) clamp(2.2rem, 4.5vw, 5.2rem) clamp(13.8rem, 17vw, 16rem); filter: drop-shadow(0 26px 26px rgba(23, 26, 24, 0.12)) drop-shadow(0 8px 20px rgba(23, 26, 24, 0.1)); } .process-journey__route-base { stroke: #121511; stroke-width: 46; } .process-journey__route-lane { stroke: rgba(222, 190, 126, 0.78); stroke-width: 2; stroke-dasharray: 0.026 0.034; } .process-journey__route-fill { stroke: rgba(221, 185, 112, 0.98); stroke-width: 6.5; stroke-dasharray: var(--process-progress) 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 13px rgba(151, 112, 58, 0.28)); transition: stroke-dasharray 1180ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__route-sheen { stroke: rgba(255, 248, 226, 0.86); stroke-width: 10; stroke-dasharray: 0.045 1; filter: blur(0.4px) drop-shadow(0 0 14px rgba(151, 112, 58, 0.2)); } .process-journey__system.is-interacting .process-journey__route-sheen { animation-duration: 1650ms; animation-timing-function: cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__truck { color: #f4dfae; transform: translate(var(--process-truck-x), var(--process-truck-y)) rotate(var(--process-truck-angle)) scale(0.82); transform-box: view-box; transform-origin: 0 0; transition: transform 1180ms cubic-bezier(0.65, 0, 0.18, 1); filter: drop-shadow(0 8px 10px rgba(23, 26, 24, 0.34)) drop-shadow(0 0 12px rgba(221, 185, 112, 0.16)); } .process-journey__truck-shadow { fill: none; stroke: rgba(0, 0, 0, 0.26); stroke-width: 5; stroke-linecap: round; opacity: 0.42; } .process-journey__truck-body, .process-journey__truck-cab, .process-journey__truck-bed, .process-journey__truck-line, .process-journey__truck-wheel { fill: rgba(18, 21, 17, 0.95); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .process-journey__truck-cab, .process-journey__truck-line { fill: none; } .process-journey__truck-wheel { fill: #f8f3ea; stroke-width: 2.4; } .process-journey__mobile-truck { display: none; } .process-journey__route { inset: clamp(6.4rem, 8.2vw, 8.4rem) clamp(2.2rem, 4.5vw, 5.2rem) clamp(13.8rem, 17vw, 16rem); z-index: 4; } .process-journey__route li, .process-journey__route li:nth-child(1), .process-journey__route li:nth-child(2), .process-journey__route li:nth-child(3), .process-journey__route li:nth-child(4), .process-journey__route li:nth-child(5), .process-journey__route li:nth-child(6) { width: clamp(7.2rem, 9.4vw, 10.5rem); } .process-journey__route .process-journey__station { gap: 0.2rem 0.62rem; padding-bottom: 3.8rem; } .process-journey__route .process-journey__station::before { height: clamp(2.5rem, 4vw, 3.8rem); background: linear-gradient(180deg, rgba(138, 106, 54, 0.12), rgba(138, 106, 54, 0.48)); } .process-journey__route .process-journey__station-dot { width: 0.78rem; height: 0.78rem; background: var(--color-bg); box-shadow: 0 0 0 0.18rem rgba(210, 179, 118, 0.42), 0 0 0 0.48rem rgba(255, 252, 246, 0.86), 0 0 1rem rgba(23, 26, 24, 0.16); } .process-journey__route .process-journey__station.is-step-complete .process-journey__station-dot, .process-journey__route .process-journey__station.is-step-active .process-journey__station-dot { background: var(--color-gold); box-shadow: 0 0 0 0.2rem rgba(255, 252, 246, 0.96), 0 0 0 0.58rem rgba(220, 185, 119, 0.18), 0 0 1.35rem rgba(143, 104, 51, 0.3); } .process-journey__route .process-journey__station.is-step-active .process-journey__station-dot { transform: translate(-50%, 50%) scale(1.36); } .process-journey__route .process-journey__milestone-number { font-size: clamp(1.55rem, 2.25vw, 2.35rem); color: rgba(151, 112, 58, 0.9); } .process-journey__route .process-journey__station small { font-size: 0.54rem; color: rgba(151, 112, 58, 0.7); } .process-journey__route .process-journey__milestone-title { max-width: 8.6rem; font-size: clamp(0.78rem, 0.82vw, 0.92rem); } .process-journey__stage { z-index: 5; left: clamp(2rem, 4.6vw, 5rem); right: clamp(2rem, 4.6vw, 5rem); bottom: clamp(1.7rem, 3vw, 3.4rem); display: grid; grid-template-columns: minmax(8rem, 0.2fr) minmax(0, 0.8fr); align-items: end; padding: clamp(1.15rem, 1.8vw, 1.6rem) 0 0; border-top: 1px solid rgba(23, 26, 24, 0.12); } .process-journey__stage::before { content: ""; position: absolute; left: 0; top: -1px; width: clamp(4rem, 9vw, 8rem); height: 1px; background: rgba(151, 112, 58, 0.78); transform: scaleX(var(--process-accent-scale)); transform-origin: left center; transition: transform 820ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__stage-meta { gap: 0.42rem; font-size: 0.66rem; font-weight: 850; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(23, 26, 24, 0.48); } .process-journey__stage-copy { grid-template-columns: minmax(10rem, 0.36fr) minmax(18rem, 0.64fr); max-width: 58rem; } .process-journey__stage-copy small { color: rgba(151, 112, 58, 0.85); } .process-journey__stage-copy h3 { max-width: 10ch; font-size: clamp(2.45rem, 4.1vw, 4.65rem); line-height: 0.88; letter-spacing: -0.055em; } .process-journey__stage-copy p { max-width: 35rem; font-size: clamp(1rem, 1.08vw, 1.16rem); color: rgba(23, 26, 24, 0.68); } .process-journey__ghost-number { right: clamp(1rem, 2vw, 2.2rem); bottom: -0.2rem; font-size: clamp(6rem, 11vw, 11rem); color: rgba(151, 112, 58, 0.052); } @media (max-width: 720px) { .process-journey__system { gap: 1.55rem; padding: clamp(1.15rem, 5vw, 1.65rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.032) 1px, transparent 1px) 0 0 / 16.66% 100%, linear-gradient(180deg, rgba(255, 253, 248, 0.92), rgba(239, 231, 218, 0.92)); } .process-journey__drafting { right: -5rem; bottom: 2rem; width: 36rem; max-width: none; opacity: 0.32; } .process-journey__mobile-truck { position: absolute; z-index: 5; top: var(--process-mobile-truck-y, 1.45rem); left: 2.55rem; display: block; width: 2.9rem; height: 1.9rem; color: #dcb977; transform: translate(-57%, -50%) rotate(90deg); filter: drop-shadow(0 5px 8px rgba(23, 26, 24, 0.24)) drop-shadow(0 0 10px rgba(151, 112, 58, 0.16)); transition: top 880ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__mobile-truck svg { display: block; width: 100%; height: 100%; } .process-journey__mobile-truck path, .process-journey__mobile-truck circle { fill: rgba(18, 21, 17, 0.95); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .process-journey__mobile-truck path:nth-child(2) { fill: none; } .process-journey__mobile-truck circle { fill: #f8f3ea; } .process-journey__route { padding-left: 2.2rem; margin-bottom: 3.2rem; } .process-journey__route .process-journey__station { padding: 0.92rem 0 0.92rem 0.95rem; } .process-journey__system.is-process-enhanced .process-journey__route .process-journey__station.is-step-active .process-journey__milestone-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } .process-journey__stage { grid-template-columns: 1fr; padding-top: 1.45rem; } .process-journey__stage-meta { grid-template-columns: 1fr; gap: 0.42rem; font-size: 0.62rem; } .process-journey__stage-copy { grid-template-columns: 1fr; gap: 0.42rem; max-width: none; } .process-journey__stage-copy small, .process-journey__stage-copy h3, .process-journey__stage-copy p { grid-column: auto; max-width: none; } .process-journey__stage-copy h3 { font-size: clamp(2.2rem, 12vw, 3.7rem); } .process-journey__stage-copy p { font-size: 0.98rem; line-height: 1.62; } } .process-journey__system { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(22rem, clamp(24rem, 43vw, 35rem)) auto; gap: clamp(1.6rem, 2.8vw, 2.6rem); min-height: 0; padding: clamp(1.2rem, 2.2vw, 2rem); overflow: hidden; } .process-journey__drafting { z-index: 1; right: clamp(1.1rem, 2.6vw, 3rem); bottom: clamp(4.7rem, 7vw, 7.4rem); width: min(50rem, 52vw); color: rgba(112, 95, 67, 0.36); opacity: 0.54; } .process-journey__route-board { position: relative; z-index: 2; inset: auto; order: 0; display: block; min-height: clamp(22rem, 43vw, 35rem); padding: 0; overflow: visible; } .process-journey__map-label { position: absolute; z-index: 7; top: clamp(0.7rem, 1.2vw, 1.1rem); left: clamp(1rem, 1.8vw, 2rem); margin: 0; padding-bottom: 0.48rem; border-bottom: 1px solid rgba(151, 112, 58, 0.36); font-size: clamp(0.62rem, 0.68vw, 0.76rem); font-weight: 850; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(23, 26, 24, 0.62); } .process-journey__route-line { position: absolute; inset: clamp(2.2rem, 3.4vw, 3.6rem) clamp(1.2rem, 2vw, 2.4rem) clamp(1.8rem, 3vw, 3rem); display: block; width: auto; height: auto; overflow: visible; } .process-journey__route-line .process-journey__route-base, .process-journey__route-line .process-journey__route-lane, .process-journey__route-line .process-journey__route-fill, .process-journey__route-line .process-journey__route-sheen { position: static !important; inset: auto !important; display: inline !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: none !important; fill: none !important; stroke-linecap: round; stroke-linejoin: round; transform: none !important; transform-origin: 0 0 !important; vector-effect: non-scaling-stroke; } .process-journey__route-scale { top: clamp(2.55rem, 3.2vw, 3.35rem); left: clamp(1rem, 1.8vw, 2rem); right: clamp(1rem, 1.8vw, 2rem); z-index: 4; color: rgba(23, 26, 24, 0.38); } .process-journey__route-base { stroke: #10130f; stroke-width: 44; } .process-journey__route-lane { stroke: rgba(222, 190, 126, 0.74); stroke-width: 2; stroke-dasharray: 0.026 0.034; } .process-journey__route-fill { stroke: rgba(218, 181, 109, 0.98); stroke-width: 7; stroke-dasharray: 0 1; stroke-dashoffset: 0; transition: stroke-dashoffset 980ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__route-sheen { transition: stroke-dashoffset 980ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__road-marker { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; transition: opacity 260ms var(--ease-out-soft), filter 460ms var(--ease-out-soft); } .process-journey__road-marker-halo { fill: rgba(248, 243, 234, 0.9); stroke: rgba(218, 181, 109, 0.28); stroke-width: 2; opacity: 0.7; transition: opacity 320ms var(--ease-out-soft), r 420ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__road-marker-dot { fill: #f8f3ea; stroke: rgba(18, 21, 17, 0.76); stroke-width: 3; transition: fill 320ms var(--ease-out-soft), stroke 320ms var(--ease-out-soft), r 420ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__road-marker-number { font-family: var(--font-heading); font-size: 25px; font-weight: 700; text-anchor: middle; fill: rgba(23, 26, 24, 0.42); letter-spacing: 0; } .process-journey__road-marker.is-step-complete .process-journey__road-marker-dot, .process-journey__road-marker.is-step-active .process-journey__road-marker-dot { fill: #dcb977; stroke: #f8f3ea; } .process-journey__road-marker.is-step-active { filter: drop-shadow(0 0 14px rgba(151, 112, 58, 0.32)); } .process-journey__road-marker.is-step-active .process-journey__road-marker-halo { opacity: 1; r: 30px; stroke: rgba(218, 181, 109, 0.5); } .process-journey__road-marker.is-step-active .process-journey__road-marker-dot { r: 13px; } .process-journey__road-marker.is-step-active .process-journey__road-marker-number { fill: rgba(23, 26, 24, 0.82); } .process-journey__system.is-interacting .process-journey__road-marker:not(.is-step-complete):not(.is-step-active) { opacity: 0.42; } .process-journey__truck { pointer-events: none; } .process-journey__marker-hitbox { position: absolute; z-index: 6; inset: clamp(2.2rem, 3.4vw, 3.6rem) clamp(1.2rem, 2vw, 2.4rem) clamp(1.8rem, 3vw, 3rem); pointer-events: none; } .process-journey__marker-hit { position: absolute; left: var(--marker-x); top: var(--marker-y); width: clamp(2.8rem, 4vw, 3.7rem); height: clamp(2.8rem, 4vw, 3.7rem); padding: 0; border: 0; border-radius: 999px; background: transparent; color: transparent; cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%); appearance: none; } .process-journey__marker-hit:focus-visible { outline: 1px solid rgba(151, 112, 58, 0.72); outline-offset: 0.28rem; } .process-journey__marker-hit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .process-journey__mobile-truck, .process-journey__route, .process-journey__stage { display: none; } .process-journey__steps { position: relative; z-index: 3; order: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: clamp(1rem, 1.8vw, 1.35rem) 0 0; margin: 0; border-top: 1px solid rgba(23, 26, 24, 0.12); list-style: none; } .process-journey__step { position: relative; min-width: 0; } .process-journey__step::before { content: ""; position: absolute; top: calc(clamp(1rem, 1.8vw, 1.35rem) * -1 - 1px); left: 0; width: 100%; height: 1px; background: rgba(218, 181, 109, 0.82); opacity: 0; transform: scaleX(0.35); transform-origin: left center; transition: opacity 320ms var(--ease-out-soft), transform 460ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__step-button { display: grid; grid-template-rows: auto auto auto 1fr; gap: 0.5rem; width: 100%; min-height: clamp(14.5rem, 18vw, 17rem); padding: 0 clamp(0.75rem, 1.1vw, 1rem) 0 0; border: 0; border-right: 1px solid rgba(23, 26, 24, 0.1); background: transparent; color: #090b08; text-align: left; cursor: pointer; appearance: none; transition: opacity 280ms var(--ease-out-soft), transform 420ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__step:last-child .process-journey__step-button { border-right: 0; } .process-journey__step-number { font-family: var(--font-heading); font-size: clamp(1.8rem, 2.6vw, 3rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.03em; color: rgba(23, 26, 24, 0.42); transition: color 280ms var(--ease-out-soft), transform 420ms cubic-bezier(0.65, 0, 0.18, 1); } .process-journey__step-meta { font-size: 0.56rem; font-weight: 850; line-height: 1; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(151, 112, 58, 0.74); } .process-journey__step-title { max-width: 10rem; font-size: clamp(0.92rem, 1vw, 1.08rem); font-weight: 850; line-height: 1.08; letter-spacing: -0.01em; color: #090b08; } .process-journey__step-body { max-width: 14.5rem; font-size: clamp(0.8rem, 0.86vw, 0.93rem); line-height: 1.55; color: rgba(23, 26, 24, 0.58); transition: color 280ms var(--ease-out-soft); } .process-journey__step.is-step-active::before { opacity: 1; transform: scaleX(1); } .process-journey__step.is-step-active .process-journey__step-button, .process-journey__step-button:hover, .process-journey__step-button:focus-visible { outline: 0; transform: translateY(-0.18rem); } .process-journey__step.is-step-active .process-journey__step-number, .process-journey__step-button:hover .process-journey__step-number, .process-journey__step-button:focus-visible .process-journey__step-number { color: rgba(151, 112, 58, 0.96); transform: translateY(-0.1rem); } .process-journey__step.is-step-active .process-journey__step-body, .process-journey__step-button:hover .process-journey__step-body, .process-journey__step-button:focus-visible .process-journey__step-body { color: rgba(23, 26, 24, 0.78); } .process-journey__system.is-interacting .process-journey__step:not(.is-step-active) .process-journey__step-button { opacity: 0.52; } @media (max-width: 1080px) { .process-journey__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.35rem; } .process-journey__step:nth-child(3n) .process-journey__step-button { border-right: 0; } } @media (max-width: 720px) { .process-journey__system { display: grid; grid-template-rows: minmax(15rem, 50vw) auto; gap: 1.25rem; padding: 1rem; overflow: hidden; } .process-journey__route-board { min-height: clamp(15rem, 50vw, 19rem); } .process-journey__route-line { inset: 1.2rem 0.4rem 1rem; display: block; } .process-journey__marker-hitbox { inset: 1.2rem 0.4rem 1rem; } .process-journey__route-scale { display: none; } .process-journey__map-label { top: 0.45rem; left: 0.55rem; font-size: 0.58rem; letter-spacing: 0.18em; } .process-journey__route-base { stroke-width: 34; } .process-journey__route-fill { stroke-width: 5.5; } .process-journey__road-marker-number { font-size: 22px; } .process-journey__drafting { right: -8rem; bottom: 1.5rem; width: 40rem; opacity: 0.32; } .process-journey__steps { grid-template-columns: repeat(6, minmax(13.2rem, 1fr)); gap: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.35rem; scroll-snap-type: x proximity; } .process-journey__step { scroll-snap-align: start; } .process-journey__step-button { min-height: 16rem; padding-right: 1rem; } .process-journey__step:nth-child(3n) .process-journey__step-button { border-right: 1px solid rgba(23, 26, 24, 0.1); } } .process-journey__system { --process-ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --process-gold: 218, 181, 109; --process-ink: 12, 15, 11; --process-paper: 248, 243, 234; --process-truck-scale: 0.76; gap: clamp(1.8rem, 3.4vw, 3rem); padding: clamp(1.25rem, 2.3vw, 2.15rem); border-color: rgba(23, 26, 24, 0.08); box-shadow: 0 1.4rem 4.4rem rgba(23, 26, 24, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.58); } .process-journey__drafting { right: clamp(0.8rem, 2vw, 2.4rem); bottom: clamp(2.2rem, 4.5vw, 4.9rem); width: min(48rem, 50vw); color: rgba(112, 95, 67, 0.3); opacity: 0.46; transform: translate3d(var(--process-drift-x-soft, 0), var(--process-drift-y-soft, 0), 0); transition: opacity 520ms var(--process-ease-premium), transform 900ms var(--process-ease-premium); } .process-journey__map-label { padding-bottom: 0.55rem; border-bottom-color: rgba(var(--process-gold), 0.42); color: rgba(var(--process-ink), 0.58); letter-spacing: 0.24em; } .process-journey__route-scale { color: rgba(var(--process-ink), 0.34); letter-spacing: 0.2em; } .process-journey__route-base { stroke: rgb(var(--process-ink)); stroke-width: 43; filter: drop-shadow(0 1.15rem 1.5rem rgba(23, 26, 24, 0.13)); } .process-journey__route-lane { stroke: rgba(255, 253, 247, 0.78); stroke-width: 2; stroke-dasharray: 20 30; stroke-dashoffset: 4; opacity: 0.92; } .process-journey__route-fill { stroke: rgba(var(--process-gold), 0.96); stroke-width: 6.4; transition: stroke-dashoffset 920ms var(--process-ease-premium), stroke-width 360ms var(--process-ease-premium), filter 420ms var(--process-ease-premium); filter: drop-shadow(0 0 0.48rem rgba(var(--process-gold), 0.22)); } .process-journey__system.is-interacting .process-journey__route-fill { stroke-width: 7; filter: drop-shadow(0 0 0.8rem rgba(var(--process-gold), 0.28)); } .process-journey__route-sheen { stroke: rgba(255, 244, 212, 0.72); stroke-width: 8.5; opacity: 0; transition: opacity 360ms var(--process-ease-premium), stroke-dashoffset 920ms var(--process-ease-premium); filter: blur(0.35px) drop-shadow(0 0 0.65rem rgba(var(--process-gold), 0.24)); } .process-journey__system.is-interacting .process-journey__route-sheen { opacity: 0.56; } .process-journey__road-marker { transition: opacity 360ms var(--process-ease-premium), filter 420ms var(--process-ease-premium), transform 420ms var(--process-ease-premium); } .process-journey__road-marker-halo { fill: rgba(var(--process-paper), 0.92); stroke: rgba(var(--process-gold), 0.24); stroke-width: 1.65; opacity: 0.58; transition: opacity 320ms var(--process-ease-premium), r 520ms var(--process-ease-premium), stroke 320ms var(--process-ease-premium); } .process-journey__road-marker-dot { fill: rgb(var(--process-paper)); stroke: rgba(var(--process-ink), 0.74); stroke-width: 2.7; transition: fill 320ms var(--process-ease-premium), stroke 320ms var(--process-ease-premium), r 520ms var(--process-ease-premium), filter 360ms var(--process-ease-premium); } .process-journey__road-marker-number { fill: rgba(var(--process-ink), 0.4); transition: fill 300ms var(--process-ease-premium), transform 420ms var(--process-ease-premium); } .process-journey__road-marker.is-step-complete .process-journey__road-marker-halo { opacity: 0.78; stroke: rgba(var(--process-gold), 0.38); } .process-journey__road-marker.is-step-complete .process-journey__road-marker-dot { fill: rgba(var(--process-gold), 0.88); stroke: rgba(var(--process-paper), 0.96); filter: drop-shadow(0 0 0.36rem rgba(var(--process-gold), 0.22)); } .process-journey__road-marker.is-step-active { filter: drop-shadow(0 0 0.85rem rgba(var(--process-gold), 0.34)); } .process-journey__road-marker.is-step-active .process-journey__road-marker-halo { r: 31px; opacity: 1; stroke: rgba(var(--process-gold), 0.58); } .process-journey__road-marker.is-step-active .process-journey__road-marker-dot { r: 13px; fill: rgb(var(--process-gold)); } .process-journey__road-marker.is-step-active .process-journey__road-marker-number { fill: rgba(var(--process-ink), 0.86); } .process-journey__system.is-interacting .process-journey__road-marker:not(.is-step-complete):not(.is-step-active) { opacity: 0.34; } .process-journey__truck { color: rgba(239, 210, 151, 0.96); transform: translate(var(--process-truck-x), var(--process-truck-y)) rotate(var(--process-truck-angle)) scale(0.76); transition: transform 920ms var(--process-ease-premium), filter 420ms var(--process-ease-premium); filter: drop-shadow(0 0.52rem 0.58rem rgba(23, 26, 24, 0.23)) drop-shadow(0 0 0.45rem rgba(var(--process-gold), 0.16)); } .process-journey__system.is-interacting .process-journey__truck { filter: drop-shadow(0 0.62rem 0.68rem rgba(23, 26, 24, 0.25)) drop-shadow(0 0 0.75rem rgba(var(--process-gold), 0.22)); } .process-journey__truck-shadow { stroke: rgba(23, 26, 24, 0.32); stroke-width: 4.5; } .process-journey__truck-body, .process-journey__truck-cab, .process-journey__truck-bed, .process-journey__truck-line, .process-journey__truck-wheel { fill: rgba(var(--process-ink), 0.96); stroke: currentColor; stroke-width: 1.65; } .process-journey__truck-cab, .process-journey__truck-line { fill: none; } .process-journey__truck-wheel { fill: rgb(var(--process-paper)); stroke-width: 2; } .process-journey__steps { padding-top: clamp(1.15rem, 2vw, 1.65rem); border-top-color: rgba(var(--process-ink), 0.1); } .process-journey__step::before { top: calc(clamp(1.15rem, 2vw, 1.65rem) * -1 - 1px); background: linear-gradient(90deg, rgba(var(--process-gold), 0.96), rgba(var(--process-gold), 0.18)); transition: opacity 340ms var(--process-ease-premium), transform 620ms var(--process-ease-premium); } .process-journey__step-button { gap: 0.52rem; min-height: clamp(14rem, 17vw, 16.4rem); padding: 0 clamp(0.75rem, 1.15vw, 1.05rem) 0.25rem 0; border-right-color: rgba(var(--process-ink), 0.095); color: rgb(var(--process-ink)); transition: opacity 340ms var(--process-ease-premium), transform 520ms var(--process-ease-premium), background-color 360ms var(--process-ease-premium); } .process-journey__step-button:hover, .process-journey__step-button:focus-visible, .process-journey__step.is-step-active .process-journey__step-button { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)); } .process-journey__step-button:focus-visible { outline: 1px solid rgba(var(--process-gold), 0.74); outline-offset: 0.28rem; } .process-journey__step-number { color: rgba(var(--process-ink), 0.36); transition: color 320ms var(--process-ease-premium), transform 540ms var(--process-ease-premium); } .process-journey__step-meta { color: rgba(151, 112, 58, 0.66); transition: color 320ms var(--process-ease-premium), opacity 320ms var(--process-ease-premium); } .process-journey__step-title { max-width: 10.5rem; color: rgba(var(--process-ink), 0.92); transition: color 320ms var(--process-ease-premium), transform 520ms var(--process-ease-premium); } .process-journey__step-body { color: rgba(var(--process-ink), 0.54); font-weight: 520; transition: color 340ms var(--process-ease-premium), opacity 340ms var(--process-ease-premium); } .process-journey__step.is-step-complete:not(.is-step-active) .process-journey__step-number { color: rgba(151, 112, 58, 0.54); } .process-journey__step.is-step-active .process-journey__step-button, .process-journey__step-button:hover, .process-journey__step-button:focus-visible { transform: translateY(-0.28rem); } .process-journey__step.is-step-active .process-journey__step-number, .process-journey__step-button:hover .process-journey__step-number, .process-journey__step-button:focus-visible .process-journey__step-number { color: rgba(151, 112, 58, 0.98); transform: translateY(-0.12rem); } .process-journey__step.is-step-active .process-journey__step-title, .process-journey__step-button:hover .process-journey__step-title, .process-journey__step-button:focus-visible .process-journey__step-title { color: rgb(var(--process-ink)); transform: translateY(-0.04rem); } .process-journey__step.is-step-active .process-journey__step-body, .process-journey__step-button:hover .process-journey__step-body, .process-journey__step-button:focus-visible .process-journey__step-body { color: rgba(var(--process-ink), 0.76); } .process-journey__system.is-interacting .process-journey__step:not(.is-step-active) .process-journey__step-button { opacity: 0.5; } @media (max-width: 720px) { .process-journey__system { gap: 1.45rem; --process-truck-scale: 0.68; } .process-journey__drafting { right: -9rem; bottom: 0.65rem; width: 39rem; opacity: 0.28; } .process-journey__route-base { stroke-width: 33; } .process-journey__route-lane { stroke-width: 1.8; stroke-dasharray: 16 24; } .process-journey__route-fill { stroke-width: 5.4; } .process-journey__route-sheen { stroke-width: 7; } .process-journey__truck { transform: translate(var(--process-truck-x), var(--process-truck-y)) rotate(var(--process-truck-angle)) scale(0.68); } .process-journey__steps { padding-top: 1.2rem; } .process-journey__step::before { top: calc(-1.2rem - 1px); } .process-journey__step-button { min-height: 15.25rem; } } .process-journey__system { --process-truck-scale: 0.72; grid-template-rows: minmax(24rem, clamp(26rem, 46vw, 38rem)) auto; padding: clamp(1.45rem, 2.8vw, 2.45rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px) 0 0 / 10% 100%, radial-gradient(circle at 82% 20%, rgba(218, 181, 109, 0.13), transparent 25%), radial-gradient(circle at 15% 78%, rgba(23, 26, 24, 0.055), transparent 24%), linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.1) 42%, rgba(232, 225, 213, 0.22)), linear-gradient(180deg, #f6f1e8 0%, #ebe3d6 100%); } .process-journey__route-board { min-height: clamp(24rem, 46vw, 38rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(180deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px) 0 0 / 100% 24%, radial-gradient(circle at 18% 70%, rgba(218, 181, 109, 0.1), transparent 18%), linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)); box-shadow: inset 0 0 0 1px rgba(23, 26, 24, 0.055), 0 1.5rem 3.6rem rgba(23, 26, 24, 0.07); } .process-journey__route-line { inset: clamp(2.25rem, 3.2vw, 3.8rem) clamp(1rem, 1.8vw, 2.1rem) clamp(2rem, 3vw, 3.25rem); filter: drop-shadow(0 1.45rem 1.15rem rgba(23, 26, 24, 0.11)); } .process-journey__route-base { stroke: #090c08; stroke-width: 47; filter: drop-shadow(0 1.55rem 1.7rem rgba(23, 26, 24, 0.2)) drop-shadow(0 0.2rem 0.1rem rgba(255, 255, 255, 0.16)); } .process-journey__route-lane { stroke: rgba(255, 253, 247, 0.86); stroke-width: 2.2; stroke-dasharray: 17 28; stroke-dashoffset: 3; opacity: 0.94; } .process-journey__route-fill { stroke: rgba(var(--process-gold), 0.98); stroke-width: 8.4; transition: stroke-dashoffset 980ms var(--process-ease-premium), stroke-width 420ms var(--process-ease-premium), filter 460ms var(--process-ease-premium); filter: drop-shadow(0 0 0.72rem rgba(var(--process-gold), 0.3)) drop-shadow(0 0.2rem 0.15rem rgba(255, 249, 230, 0.18)); } .process-journey__system.is-interacting .process-journey__route-fill, .process-journey__system.is-route-moving .process-journey__route-fill { stroke-width: 9.2; filter: drop-shadow(0 0 1rem rgba(var(--process-gold), 0.34)) drop-shadow(0 0.2rem 0.15rem rgba(255, 249, 230, 0.22)); } .process-journey__route-sheen { stroke: rgba(255, 245, 218, 0.76); stroke-width: 12; opacity: 0.08; mix-blend-mode: screen; transition: opacity 420ms var(--process-ease-premium), stroke-dashoffset 980ms var(--process-ease-premium); } .process-journey__system.is-route-moving .process-journey__route-sheen { animation: process-route-glide 1080ms var(--process-ease-premium) both; } .process-journey__road-marker-halo { fill: rgba(248, 243, 234, 0.84); stroke-width: 1.35; } .process-journey__road-marker-dot { stroke-width: 2.4; } .process-journey__road-marker.is-step-complete:not(.is-step-active) .process-journey__road-marker-halo { opacity: 0.9; r: 25px; } .process-journey__road-marker.is-step-complete:not(.is-step-active) .process-journey__road-marker-dot { r: 10.5px; } .process-journey__road-marker.is-step-active .process-journey__road-marker-halo { r: 33px; fill: rgba(248, 243, 234, 0.96); stroke: rgba(var(--process-gold), 0.68); } .process-journey__road-marker.is-step-active .process-journey__road-marker-dot { r: 12.4px; filter: drop-shadow(0 0 0.42rem rgba(var(--process-gold), 0.38)) drop-shadow(0 0.2rem 0.16rem rgba(23, 26, 24, 0.16)); } .process-journey__truck { color: rgba(241, 214, 158, 0.96); transition: transform 980ms var(--process-ease-premium), filter 520ms var(--process-ease-premium); filter: drop-shadow(0 0.62rem 0.62rem rgba(23, 26, 24, 0.22)) drop-shadow(0 0 0.46rem rgba(var(--process-gold), 0.18)); } .process-journey__truck-body, .process-journey__truck-cab, .process-journey__truck-bed, .process-journey__truck-line, .process-journey__truck-wheel { stroke-width: 1.45; } .process-journey__truck-line { opacity: 0.78; } .process-journey__truck-wheel { fill: rgba(255, 252, 244, 0.94); } .process-journey__system.is-route-moving .process-journey__truck { filter: drop-shadow(0 0.72rem 0.7rem rgba(23, 26, 24, 0.24)) drop-shadow(0 0 0.88rem rgba(var(--process-gold), 0.26)); } .process-journey__drafting { color: rgba(112, 95, 67, 0.27); opacity: 0.5; } .process-journey__steps { gap: clamp(0.2rem, 0.45vw, 0.42rem); padding-top: clamp(1.35rem, 2.3vw, 1.85rem); } .process-journey__step::before { top: calc(clamp(1.35rem, 2.3vw, 1.85rem) * -1 - 1px); height: 2px; } .process-journey__step-button { min-height: clamp(14.2rem, 17vw, 16.8rem); padding: clamp(0.08rem, 0.35vw, 0.32rem) clamp(0.82rem, 1.2vw, 1.15rem) 0.38rem 0; } .process-journey__step.is-step-active .process-journey__step-button { transform: translateY(-0.38rem); } .process-journey__step.is-step-active .process-journey__step-number { transform: translateY(-0.16rem) scale(1.03); } .process-journey__step.is-step-active .process-journey__step-meta { color: rgba(151, 112, 58, 0.92); } .process-journey__step.is-step-active .process-journey__step-title { transform: translateY(-0.08rem); } .process-journey__system.is-interacting .process-journey__step:not(.is-step-active) .process-journey__step-button { opacity: 0.44; } @keyframes process-route-glide { 0% { opacity: 0.08; } 35% { opacity: 0.58; } 100% { opacity: 0.14; } } @media (max-width: 720px) { .process-journey__lead { display: grid; grid-template-columns: 1fr; gap: 1.15rem; } .process-journey__lead h2 { max-width: 9.4ch; font-size: clamp(3.15rem, 14.5vw, 4.35rem); line-height: 0.86; letter-spacing: -0.06em; } .process-journey__lead .lead { width: min(100%, 23rem); max-width: 23rem; font-size: 1rem; line-height: 1.58; } .process-journey__system { --process-truck-scale: 0.64; grid-template-rows: minmax(16rem, 54vw) auto; padding: 1rem; } .process-journey__route-board { min-height: clamp(16rem, 54vw, 20rem); } .process-journey__route-base { stroke-width: 35; } .process-journey__route-fill { stroke-width: 6.1; } .process-journey__system.is-interacting .process-journey__route-fill, .process-journey__system.is-route-moving .process-journey__route-fill { stroke-width: 6.6; } .process-journey__road-marker.is-step-active .process-journey__road-marker-halo { r: 29px; } .process-journey__step-button { min-height: 14.8rem; } } .section--projects-showcase { padding-block: clamp(5.8rem, 8vw, 9.4rem); background: linear-gradient(90deg, rgba(23, 26, 24, 0.032) 1px, transparent 1px) 0 0 / 12.5% 100%, linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 30%), radial-gradient(circle at 83% 12%, rgba(151, 112, 58, 0.085), transparent 25%), linear-gradient(180deg, #f3f0e9 0%, #e9e3d8 100%); } .projects-showcase__intro { grid-template-columns: minmax(0, 0.58fr) minmax(21rem, 0.42fr); align-items: end; margin-bottom: clamp(2.4rem, 4vw, 4.25rem); padding-bottom: clamp(1.35rem, 2vw, 1.9rem); border-bottom-color: rgba(23, 26, 24, 0.12); } .projects-showcase__intro h2 { max-width: 16ch; font-size: clamp(2.85rem, 4.55vw, 5.25rem); line-height: 0.88; } .projects-showcase__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.2rem, 3.7vw, 4rem); align-items: start; } .projects-showcase__slider { min-width: 0; gap: clamp(1.05rem, 1.8vw, 1.55rem); } .projects-showcase__slides { padding-right: 0; } .projects-showcase__arrow-controls { top: clamp(16.75rem, 31.25vw, 25rem); right: clamp(0.9rem, 1.55vw, 1.45rem); left: clamp(0.9rem, 1.55vw, 1.45rem); display: flex; gap: 0; justify-content: space-between; transform: translateY(-50%); } .project-card--featured .project-card__image { min-height: clamp(34rem, 48vw, 50rem); box-shadow: 0 34px 82px rgba(23, 26, 24, 0.13); } .project-card--featured .project-card__image::after { background: linear-gradient(90deg, rgba(16, 22, 19, 0.03), transparent 46%, rgba(16, 22, 19, 0.05)), linear-gradient(180deg, transparent 78%, rgba(16, 22, 19, 0.08)); } .project-card__featured-stage { padding-right: 0; background: transparent; } .project-card--featured .project-card__body { position: relative; right: auto; bottom: auto; z-index: 3; grid-template-columns: minmax(0, 0.7fr) minmax(12rem, 0.3fr); gap: clamp(1.2rem, 2.5vw, 2.8rem); width: min(68rem, calc(100% - clamp(2rem, 8vw, 8rem))); margin: clamp(-3.2rem, -3.9vw, -2.05rem) 0 0 clamp(1.1rem, 3.8vw, 4.8rem); padding: clamp(1.35rem, 2.25vw, 2.2rem); border: 1px solid rgba(23, 26, 24, 0.1); border-left: 3px solid rgba(151, 112, 58, 0.55); background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.2)), rgba(242, 239, 232, 0.92); box-shadow: 0 24px 62px rgba(23, 26, 24, 0.12); color: var(--color-text); backdrop-filter: blur(14px); } .project-card--featured .project-card__header { display: grid; grid-column: 1; gap: clamp(0.65rem, 1vw, 0.9rem); } .project-card--featured .project-card__meta-row { gap: 0.75rem; align-items: center; font-size: 0.66rem; color: rgba(80, 85, 79, 0.74); } .project-card--featured .project-card__meta-row .eyebrow { color: rgba(151, 112, 58, 0.86); } .project-card--featured .project-card__meta-tag { color: rgba(80, 85, 79, 0.68); } .project-card--featured .project-card__details { gap: 0; margin-top: clamp(1rem, 1.9vw, 1.7rem); padding-top: clamp(1.1rem, 1.8vw, 1.55rem); border-top: 1px solid rgba(23, 26, 24, 0.12); background: transparent; } .project-card--featured h3 { max-width: 18ch; font-size: clamp(2.05rem, 3.15vw, 3.55rem); line-height: 0.93; letter-spacing: -0.055em; color: var(--color-dark); } .project-card--featured .project-card__summary { grid-column: 1; max-width: 31rem; font-size: clamp(0.95rem, 1.04vw, 1.08rem); line-height: 1.64; color: rgba(23, 26, 24, 0.68); } .project-card--featured .project-card__footer { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-content: flex-end; padding-top: 0; } .project-card--featured .project-card__footer, .project-card--featured .text-link { color: var(--color-dark); } .project-card--featured .project-card__detail { padding-block: 0.1rem 0; } .project-card--featured .project-card__detail strong { margin-bottom: 0.18rem; color: rgba(80, 85, 79, 0.62); } .project-card--featured .project-card__detail span { font-size: clamp(0.95rem, 1.08vw, 1.08rem); font-weight: 650; line-height: 1.35; color: rgba(23, 26, 24, 0.88); } .projects-showcase__controls { justify-content: space-between; padding-top: 0; } .projects-showcase__arrow { width: clamp(2.65rem, 3.1vw, 3.15rem); height: clamp(2.65rem, 3.1vw, 3.15rem); border-color: rgba(255, 255, 255, 0.62); border-radius: 999px; background: rgba(13, 18, 16, 0.5); backdrop-filter: blur(14px); box-shadow: 0 14px 34px rgba(5, 8, 7, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16); color: #fff; } .projects-showcase__arrow:hover, .projects-showcase__arrow:focus-visible { border-color: rgba(255, 255, 255, 0.88); background: var(--color-bg); box-shadow: 0 18px 42px rgba(5, 8, 7, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.42); color: var(--color-dark); } .projects-showcase__arrow:focus-visible { outline: 2px solid rgba(151, 112, 58, 0.62); outline-offset: 3px; } .projects-showcase__supporting { display: grid; grid-template-columns: minmax(12rem, 0.18fr) minmax(0, 1fr); gap: clamp(1.4rem, 2.8vw, 3rem); align-items: start; min-width: 0; padding-top: clamp(1.35rem, 2.2vw, 2rem); border-top: 1px solid rgba(23, 26, 24, 0.12); } .projects-showcase__supporting-label { margin: 0; font-size: 0.64rem; font-weight: 850; letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; color: rgba(80, 85, 79, 0.66); } .projects-showcase__supporting-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); } .project-card--supporting { display: grid; grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 0.62fr); gap: clamp(0.85rem, 1.35vw, 1.2rem); align-items: stretch; overflow: visible; border-top: 1px solid rgba(23, 26, 24, 0.1); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; padding-top: clamp(1rem, 1.45vw, 1.25rem); background: transparent; box-shadow: none; } .project-card--supporting .project-card__image { aspect-ratio: 5 / 4; min-height: 100%; margin-bottom: 0; background: var(--color-surface-strong); } .project-card--supporting .project-card__body { display: grid; gap: 0.55rem; align-content: start; padding: 0; } .project-card--supporting .project-card__meta-row { display: flex; justify-content: flex-start; gap: 0.55rem 0.75rem; } .project-card--supporting .project-card__meta-row .eyebrow, .project-card--supporting .project-card__meta-tag { font-size: 0.58rem; letter-spacing: 0.16em; color: rgba(80, 85, 79, 0.72); } .project-card--supporting h3 { max-width: 14ch; font-size: clamp(1.05rem, 1.28vw, 1.32rem); line-height: 1; letter-spacing: -0.035em; } .project-card--supporting .project-card__summary { display: none; } .project-card--supporting .project-card__scope { display: grid; gap: 0.3rem; padding: 0; margin: 0; list-style: none; font-size: 0.82rem; line-height: 1.35; color: rgba(23, 26, 24, 0.62); } .project-card--supporting .project-card__scope li + li { display: none; } .project-card--supporting .project-card__footer { align-self: end; padding-top: 0.35rem; font-size: 0.86rem; } .section--process-journey { padding-block: clamp(5.2rem, 7.4vw, 8.4rem); } .process-journey { gap: clamp(2.4rem, 4.2vw, 4.8rem); } .process-journey__lead h2 { max-width: 13.6ch; font-size: clamp(2.7rem, 4.6vw, 5.4rem); } .process-journey__lead .lead { max-width: 34rem; } .process-journey__system { grid-template-rows: minmax(22rem, clamp(24rem, 39vw, 33rem)) auto; padding: clamp(1.15rem, 2vw, 1.8rem); box-shadow: 0 28px 70px rgba(23, 26, 24, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.66); } .process-journey__route-board { min-height: clamp(22rem, 39vw, 33rem); } .process-journey__route-line { inset: clamp(2.35rem, 3.3vw, 3.8rem) clamp(1rem, 1.8vw, 2rem) clamp(1.9rem, 3vw, 3.1rem); } .process-journey__route-base { stroke-width: 43; } .process-journey__route-fill { stroke-width: 7.2; } .process-journey__system.is-interacting .process-journey__route-fill, .process-journey__system.is-route-moving .process-journey__route-fill { stroke-width: 7.8; } .process-journey__drafting { opacity: 0.38; } .process-journey__steps { padding-top: clamp(1rem, 1.7vw, 1.35rem); } .process-journey__step::before { top: calc(clamp(1rem, 1.7vw, 1.35rem) * -1 - 1px); } .process-journey__step-button { min-height: clamp(12.5rem, 14vw, 14.6rem); } .process-journey__step-title { font-size: clamp(0.88rem, 0.94vw, 1.02rem); } .process-journey__step-body { font-size: clamp(0.78rem, 0.82vw, 0.88rem); line-height: 1.5; } @media (max-width: 1080px) { .projects-showcase__supporting { grid-template-columns: 1fr; gap: 1rem; } .projects-showcase__supporting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-card--featured .project-card__body { width: min(58rem, calc(100% - 2rem)); margin-left: 1rem; } } @media (max-width: 720px) { .projects-showcase__intro { grid-template-columns: 1fr; } .projects-showcase__intro h2, .process-journey__lead h2 { font-size: clamp(2.6rem, 12.5vw, 3.85rem); line-height: 0.9; } .projects-showcase__intro .lead { grid-column: auto; grid-row: auto; justify-self: start; } .projects-showcase__supporting-grid { grid-template-columns: 1fr; } .project-card--supporting { grid-template-columns: minmax(6.6rem, 0.34fr) minmax(0, 0.66fr); } .project-card--featured .project-card__image { min-height: clamp(22rem, 72vw, 27rem); } .projects-showcase__arrow-controls { top: clamp(11rem, 36vw, 13.5rem); right: clamp(0.75rem, 4vw, 1rem); left: clamp(0.75rem, 4vw, 1rem); } .projects-showcase__arrow { width: 2.55rem; height: 2.55rem; } .project-card--featured .project-card__body { grid-template-columns: 1fr; width: auto; margin: 0; border-left-width: 2px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.2)), rgba(242, 239, 232, 0.94); } .project-card--featured .project-card__footer { grid-column: auto; grid-row: auto; justify-content: flex-start; } .project-card--featured .project-card__details { grid-template-columns: 1fr; } .project-card--featured .project-card__detail, .project-card--featured .project-card__detail:first-child, .project-card--featured .project-card__detail:last-child, .project-card--featured .project-card__detail:not(:first-child) { padding: 0.95rem 0; } .project-card--featured .project-card__detail::before { top: 0; width: 100%; height: 1px; } .project-card--featured .project-card__detail:first-child::before { display: block; } .process-journey__system { grid-template-rows: minmax(15rem, 50vw) auto; } .process-journey__route-board { min-height: clamp(15rem, 50vw, 18.5rem); } .process-journey__step-button { min-height: 14rem; } } .furniture-page-intro { position: relative; padding-block: clamp(5.2rem, 8vw, 8.8rem) clamp(3.2rem, 5vw, 5.6rem); background: radial-gradient(circle at 84% 30%, rgba(151, 112, 58, 0.12), transparent 28%), linear-gradient(180deg, rgba(255, 255, 255, 0.56), transparent 48%), linear-gradient(180deg, #f5f1ea 0%, #ebe4d8 100%); overflow: hidden; isolation: isolate; } .furniture-page-intro::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(245, 241, 234, 0.98) 0%, rgba(245, 241, 234, 0.78) 36%, rgba(245, 241, 234, 0.14) 68%, rgba(245, 241, 234, 0.64) 100%), linear-gradient(180deg, rgba(245, 241, 234, 0.48), transparent 42%, rgba(235, 228, 216, 0.5)); pointer-events: none; } .furniture-page-intro__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.52fr) minmax(18rem, 0.48fr); gap: clamp(1.8rem, 5vw, 6rem); align-items: end; min-height: clamp(33rem, 48vw, 45rem); } .furniture-page-intro__content { position: relative; z-index: 3; max-width: 62rem; } .furniture-page-intro .page-title { max-width: 16ch; } .furniture-page-intro .lead { max-width: 44rem; } .furniture-page-intro__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; padding-top: 0.4rem; } .furniture-page-intro__visual { --sketch-opacity: 0.42; --sketch-y: -50%; --sketch-x: 0; --sketch-scale: 1; position: absolute; z-index: 0; top: 50%; right: max(-18vw, -17rem); width: clamp(48rem, 66vw, 84rem); min-height: 0; pointer-events: none; transform: translate3d(var(--sketch-x), var(--sketch-y), 0) scale(var(--sketch-scale)); opacity: var(--sketch-opacity); mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 84%, transparent 100%); animation: hero-sketch-entrance 1250ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; } .furniture-page-intro__visual img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; filter: sepia(0.16) saturate(0.86) contrast(0.96) brightness(0.98); } .furniture-hub, .furniture-archive, .furniture-product-spec { display: grid; gap: clamp(2rem, 4vw, 4.2rem); } .furniture-hub__intro, .furniture-archive__intro { display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(19rem, 0.42fr); gap: clamp(1.6rem, 3.4vw, 3.8rem); align-items: end; padding-bottom: clamp(1.25rem, 2vw, 1.9rem); border-bottom: 1px solid rgba(23, 26, 24, 0.12); } .furniture-hub__intro h2, .furniture-archive__intro h2 { max-width: 15ch; font-size: clamp(2.3rem, 3.8vw, 4.25rem); line-height: 0.92; letter-spacing: -0.055em; } .furniture-hub__intro .lead, .furniture-archive__intro .lead { max-width: 34rem; justify-self: end; } .furniture-hub__intro--simple h2 { max-width: 18ch; } .furniture-hub__intro--simple { grid-template-columns: minmax(0, 1fr); } .furniture-pathways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(23, 26, 24, 0.12); border-bottom: 1px solid rgba(23, 26, 24, 0.1); } .furniture-pathways--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .furniture-pathway { display: grid; gap: 0.9rem; align-content: start; min-height: clamp(17rem, 23vw, 23rem); padding: clamp(1.25rem, 2vw, 2rem); border-right: 1px solid rgba(23, 26, 24, 0.1); background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 58%); } .furniture-pathway:last-child { border-right: 0; } .furniture-pathway span { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 4.6rem); font-weight: 800; line-height: 0.86; letter-spacing: -0.055em; color: rgba(151, 112, 58, 0.48); } .furniture-pathway h3, .furniture-range-card h3 { max-width: 13ch; font-size: clamp(1.4rem, 1.8vw, 2rem); line-height: 0.98; letter-spacing: -0.035em; } .furniture-pathway p, .furniture-range-card p { max-width: 22rem; color: rgba(23, 26, 24, 0.66); } .furniture-range-grid, .furniture-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); } .furniture-range-card, .nuwave-product-card, .furniture-empty-state { border: 1px solid rgba(23, 26, 24, 0.1); background: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.16)), rgba(242, 239, 232, 0.78); box-shadow: 0 1px 0 rgba(23, 26, 24, 0.05); } .furniture-range-card { display: grid; gap: 0.85rem; align-content: start; min-height: 18rem; padding: clamp(1.2rem, 2vw, 1.9rem); } .nuwave-product-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; } .nuwave-product-card__image { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, rgba(17, 22, 19, 0.16), rgba(17, 22, 19, 0.03)), #d9d3c8; } .nuwave-product-card__image img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); transition: transform 640ms var(--ease-premium); } .nuwave-product-card:hover .nuwave-product-card__image img, .nuwave-product-card:focus-within .nuwave-product-card__image img { transform: scale(1.025); } .nuwave-product-card__image span { position: absolute; inset: 18%; border: 1px solid rgba(23, 26, 24, 0.12); } .nuwave-product-card__body { display: grid; gap: 0.75rem; align-content: start; padding: clamp(1rem, 1.5vw, 1.35rem); } .nuwave-product-card__category { margin: 0; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: rgba(80, 85, 79, 0.68); } .nuwave-product-card h3 { max-width: 13ch; font-size: clamp(1.18rem, 1.5vw, 1.58rem); line-height: 1; letter-spacing: -0.035em; } .nuwave-product-card__detail { margin: 0; font-size: 0.9rem; line-height: 1.45; color: rgba(23, 26, 24, 0.68); } .nuwave-product-card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding-top: 0.4rem; } .text-link--muted { color: rgba(23, 26, 24, 0.56); } .furniture-quote-system { display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(18rem, 0.42fr); gap: clamp(1.6rem, 3.6vw, 4rem); align-items: stretch; padding: clamp(1.4rem, 2.4vw, 2.4rem); border: 1px solid rgba(23, 26, 24, 0.12); background: linear-gradient(90deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px) 0 0 / 12.5% 100%, linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.14)); } .furniture-quote-system__copy h2 { max-width: 14ch; font-size: clamp(2.25rem, 3.8vw, 4.4rem); line-height: 0.92; letter-spacing: -0.055em; } .furniture-quote-system__panel { display: grid; gap: 1.2rem; align-content: space-between; padding: clamp(1.15rem, 2vw, 1.8rem); background: var(--color-ink); color: rgba(255, 255, 255, 0.82); } .furniture-quote-system__panel ul { display: grid; gap: 0.8rem; padding: 0; margin: 0; list-style: none; } .furniture-quote-system__panel li { padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 700; } .furniture-archive-hero .page-hero__panel .button { justify-self: start; } .furniture-product-spec__grid { display: grid; grid-template-columns: minmax(0, 0.56fr) minmax(24rem, 0.44fr); gap: clamp(1.6rem, 3.8vw, 4.8rem); align-items: start; } .furniture-product-spec__gallery { display: grid; gap: clamp(0.8rem, 1.4vw, 1.2rem); } .furniture-product-spec__image { min-height: clamp(27rem, 45vw, 42rem); margin: 0; overflow: hidden; background: linear-gradient(135deg, rgba(17, 22, 19, 0.16), rgba(17, 22, 19, 0.04)), #d8d1c6; } .furniture-product-spec__image img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); } .furniture-product-spec__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; } .furniture-product-spec__thumbs figure { aspect-ratio: 1; margin: 0; overflow: hidden; background: var(--color-surface-strong); } .furniture-product-spec__thumbs img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); } .furniture-product-spec__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; } .furniture-spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(23, 26, 24, 0.12); border-left: 1px solid rgba(23, 26, 24, 0.08); } .furniture-spec-list > div { display: grid; gap: 0.55rem; padding: clamp(0.95rem, 1.5vw, 1.25rem); border-right: 1px solid rgba(23, 26, 24, 0.08); border-bottom: 1px solid rgba(23, 26, 24, 0.1); } .furniture-spec-list strong { font-size: 0.68rem; font-weight: 850; letter-spacing: 0.15em; line-height: 1; text-transform: uppercase; color: rgba(80, 85, 79, 0.68); } .furniture-spec-list ul { display: grid; gap: 0.4rem; padding: 0; margin: 0; list-style: none; } .furniture-empty-state { max-width: 46rem; padding: clamp(1.4rem, 2.6vw, 2.4rem); } @media (max-width: 1080px) { .furniture-page-intro__grid { grid-template-columns: 1fr; min-height: 0; } .furniture-page-intro__visual { --sketch-y: 0; --sketch-opacity: 0.44; position: relative; top: auto; right: auto; width: min(100%, 46rem); margin: clamp(0.5rem, 2vw, 1.2rem) auto 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%); } .page-hero__sketch { --sketch-y: 0; --sketch-opacity: 0.28; top: 42%; right: -14rem; width: clamp(38rem, 78vw, 58rem); } .furniture-range-grid, .furniture-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .furniture-product-spec__grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .furniture-page-intro { padding-block: clamp(4.3rem, 16vw, 6rem) clamp(2.4rem, 10vw, 3.4rem); } .furniture-page-intro__visual { --sketch-opacity: 0.34; width: min(118%, 32rem); margin-inline: auto; } .page-hero__sketch { --sketch-opacity: 0.18; top: 30%; right: -13rem; width: clamp(30rem, 112vw, 42rem); } .furniture-page-intro__actions { align-items: stretch; } .furniture-page-intro__actions .button { width: 100%; justify-content: center; } .furniture-hub__intro, .furniture-archive__intro, .furniture-quote-system { grid-template-columns: 1fr; } .furniture-pathways, .furniture-pathways--two, .furniture-range-grid, .furniture-product-grid, .furniture-spec-list { grid-template-columns: 1fr; } .furniture-pathway { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(23, 26, 24, 0.1); } .furniture-range-card { min-height: 0; } .furniture-hub__intro .lead, .furniture-archive__intro .lead { justify-self: start; } } html:not(.motion-ready) .motion-reveal, html:not(.motion-ready) .motion-load, html:not(.motion-ready) .motion-heading-right, html:not(.motion-ready) .motion-copy-up, html:not(.motion-ready) .heading-motion .heading-motion__inner { opacity: 1; transform: none; visibility: visible; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } .motion-enhanced .motion-reveal, .motion-enhanced .motion-load, .motion-enhanced .motion-heading-right, .motion-enhanced .motion-copy-up, .motion-enhanced .delivery-confidence__steps li.motion-reveal, .motion-enhanced .process-journey__route li.motion-reveal, .motion-enhanced .process-journey__stage.motion-reveal { opacity: 1; transform: none; } .section--capability-band::before { transition: none; transform: none; } .home-hero__image-stack, .motion-ready .home-hero__image-stack, .motion-ready.motion-loaded .home-hero__image-stack { opacity: 1; transform: none; transition: none; } .home-hero__image-frame, .home-hero__image-frame.is-active, .home-hero__image-frame.is-leaving, .home-hero__video { opacity: 1; transform: none; transition: none; visibility: visible; } .home-hero__visual.has-video .home-hero__video { display: none; } .home-hero__image-frame:not(:first-child) { display: none; } .project-card:hover .project-card__image img, .project-card:focus-within .project-card__image img, .project-card--featured:hover .project-card__image img, .project-card--featured:focus-within .project-card__image img { transform: none; } .projects-showcase__slider.is-enhanced .projects-showcase__slide { transition: none; transform: none; } .projects-showcase__slider.is-enhanced .projects-showcase__slide.is-leaving { visibility: hidden; } } .social-proof { padding-block: var(--space-5); } .social-proof__text { font-size: var(--type-label); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin: 0; } .section--dual-offer { padding-block: clamp(4rem, 6vw, 6rem) 0; } .dual-offer__intro { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(1.5rem, 2.4vw, 2rem); } .dual-offer__intro .eyebrow--chip { align-self: center; font-size: clamp(0.92rem, 1.34vw, 1.29rem); padding: clamp(0.48rem, 0.7vw, 0.66rem) clamp(0.95rem, 1.4vw, 1.32rem); gap: clamp(0.6rem, 0.9vw, 0.84rem); } .dual-offer__intro .eyebrow__marker { width: 0.57rem; height: 0.57rem; } .dual-offer__headline { max-width: 40rem; margin-top: clamp(1.1rem, 1.6vw, 1.5rem); font-size: clamp(2.2rem, 4.25vw, 4.6rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.018em; color: var(--color-ink); } .dual-offer__support { margin-top: clamp(0.9rem, 1.4vw, 1.2rem); font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.6; color: var(--color-muted); } .fork { --fork-gap: clamp(3.5rem, 6vw, 5.5rem); position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--fork-gap); } .fork__divider { position: absolute; top: calc(-1 * var(--fork-gap)); bottom: 0; left: 50%; width: 1px; background: #b8b7b1; transform-origin: top center; pointer-events: none; z-index: 1; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), background-color 900ms ease; } .fork__half { position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--color-text); text-decoration: none; transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1); } .fork.is-armed .fork__divider { transform: scaleY(0); transition: none; } .fork.is-armed .fork__half { opacity: 0; transition: none; } .fork.is-armed .fork__half--one { transform: translateX(4%); } .fork.is-armed .fork__half--two { transform: translateX(-4%); } .fork.is-armed .fork__half--one .fork__media { clip-path: inset(0 0 0 100%); } .fork.is-armed .fork__half--two .fork__media { clip-path: inset(0 100% 0 0); } .fork.is-armed .fork__img { transform: scale(1.06); } .fork.is-armed .fork__body > * { opacity: 0; transform: translateY(0.75rem); } .fork.is-parting .fork__divider { transform: scaleY(1); background: var(--color-accent); transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); } .fork.is-parting .fork__half { opacity: 1; transform: none; transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) 450ms, transform 1300ms cubic-bezier(0.16, 1, 0.3, 1) 450ms; } .fork.is-parting .fork__media { clip-path: inset(0 0 0 0); transition: clip-path 1400ms cubic-bezier(0.22, 1, 0.36, 1) 500ms; } .fork.is-parting .fork__img { transform: scale(1); transition: transform 1600ms cubic-bezier(0.22, 1, 0.36, 1) 500ms; } .fork.is-parting .fork__body > * { opacity: 1; transform: none; transition: opacity 700ms ease-out 950ms, transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 950ms; } .fork.is-parting .fork__body > :nth-child(2) { transition-delay: 1050ms; } .fork.is-parting .fork__body > :nth-child(3) { transition-delay: 1150ms; } .fork.is-parted:has(.fork__half--one:hover) .fork__divider, .fork.is-parted:has(.fork__half--one:focus-visible) .fork__divider { transform: translateX(10px); } .fork.is-parted:has(.fork__half--two:hover) .fork__divider, .fork.is-parted:has(.fork__half--two:focus-visible) .fork__divider { transform: translateX(-10px); } .fork:has(.fork__half:hover) .fork__half:not(:hover), .fork:has(.fork__half:focus-visible) .fork__half:not(:focus-visible) { opacity: 0.72; } .fork__half::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--color-accent); opacity: 0; transition: opacity 350ms ease; pointer-events: none; z-index: 2; } .fork__half:hover::after, .fork__half:focus-visible::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .fork.is-armed .fork__divider, .fork.is-armed .fork__half, .fork.is-armed .fork__media, .fork.is-armed .fork__img, .fork.is-armed .fork__body > * { opacity: 1; transform: none; clip-path: none; } .fork__half::after { display: none; } } .fork__media { position: relative; display: block; overflow: hidden; height: clamp(16rem, 40vh, 26rem); background: var(--color-card); } .fork__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-grade); transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .fork__half:hover .fork__img, .fork__half:focus-visible .fork__img { filter: var(--photo-grade) brightness(1.06); } .fork__media::after { content: ""; position: absolute; inset: 0; background: rgba(38, 38, 38, 0.16); opacity: 1; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .fork__half:hover .fork__media::after, .fork__half:focus-visible .fork__media::after { opacity: 0; } .fork__body { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.9rem, 1.6vw, 1.3rem); padding: clamp(1.8rem, 3vw, 2.8rem) var(--gutter) clamp(2.2rem, 3.6vw, 3.2rem); } .fork__row { display: flex; align-items: baseline; gap: clamp(0.9rem, 1.8vw, 1.5rem); } .fork__num { font-family: var(--font-mono); font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-weight: 500; line-height: 1; color: var(--color-muted); transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .fork__title { font-family: var(--font-heading); font-size: clamp(2.2rem, 4.4vw, 4.4rem); font-weight: 500; line-height: 1; letter-spacing: normal; text-transform: uppercase; color: var(--color-ink); transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .fork__half:hover .fork__num, .fork__half:hover .fork__title, .fork__half:focus-visible .fork__num, .fork__half:focus-visible .fork__title { color: var(--color-accent-deep); } .fork__line { max-width: 28rem; font-size: var(--type-body-lg); line-height: 1.6; color: var(--color-muted); } .fork__cta { margin-top: clamp(0.4rem, 1vw, 0.8rem); } .fork__half:hover .fork__cta, .fork__half:focus-visible .fork__cta { color: var(--btn-fill-text, var(--color-warm-white)); } .fork__half:hover .fork__cta::before, .fork__half:focus-visible .fork__cta::before, .fork__half:hover .fork__cta::after, .fork__half:focus-visible .fork__cta::after { transform: translateY(0%); } .fork__half:hover .fork__cta .button__plus::before, .fork__half:focus-visible .fork__cta .button__plus::before { transform: translateY(-1rem); opacity: 0; } .fork__half:hover .fork__cta .button__plus::after, .fork__half:focus-visible .fork__cta .button__plus::after { transform: translateY(0); opacity: 1; } @media (max-width: 780px) { .fork { --fork-gap: 3rem; grid-template-columns: 1fr; } .fork__divider { bottom: auto; height: var(--fork-gap); } .fork__half + .fork__half { border-top: 1px solid #b8b7b1; } .fork__media { height: auto; aspect-ratio: 16 / 10; } .fork.is-armed .fork__half--one, .fork.is-armed .fork__half--two { transform: translateY(1rem); } .fork.is-armed .fork__half--one .fork__media, .fork.is-armed .fork__half--two .fork__media { clip-path: inset(0 0 100% 0); } .fork.is-parting .fork__half--two { transition-delay: 800ms; } .fork.is-parting .fork__half--two .fork__media, .fork.is-parting .fork__half--two .fork__img { transition-delay: 850ms; } .fork.is-parting .fork__half--two .fork__body > * { transition-delay: 1300ms; } .fork.is-parting .fork__half--two .fork__body > :nth-child(2) { transition-delay: 1400ms; } .fork.is-parting .fork__half--two .fork__body > :nth-child(3) { transition-delay: 1500ms; } } .section--lead-project { padding-block: clamp(5rem, 7vw, 7.5rem); } .section--lead-project-bleed { padding-bottom: 0; overflow: hidden; } .lead-project__intro { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: clamp(2rem, 4vw, 3.2rem); } .lead-project__rule { margin-block: var(--space-4) 0; } .lead-project__image { position: relative; display: block; overflow: hidden; width: 100%; height: clamp(28rem, 78vh, 50rem); background: var(--color-surface-strong); } .lead-project__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-grade); will-change: transform; } .lead-project__veil { position: absolute; inset: 0; pointer-events: none; background: var(--scrim-corner); } .lead-project__overlay { position: absolute; top: clamp(1.6rem, 3vw, 3rem); left: clamp(1.6rem, 3vw, 3rem); right: clamp(1.6rem, 3vw, 3rem); max-width: 36rem; display: flex; flex-direction: column; gap: clamp(0.8rem, 1.4vw, 1.2rem); } .lead-project__title { display: inline-flex; align-items: baseline; gap: 0.7rem; margin: 0; font-family: var(--font-heading); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.015em; color: #f6f3ec; } .lead-project__plus { font-family: var(--font-mono); font-size: 0.5em; font-weight: 500; color: #f6f3ec; } .lead-project__overlay-rule { width: clamp(9rem, 22vw, 16rem); background: rgba(243, 239, 231, 0.4); } .lead-project__meta { display: flex; flex-wrap: wrap; gap: 0.6rem clamp(1.6rem, 4vw, 4rem); font-family: var(--font-mono); font-size: var(--type-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(243, 239, 231, 0.82); } .lead-project__location { color: rgba(243, 239, 231, 0.82); } .lead-project__year { color: rgba(243, 239, 231, 0.66); } @media (max-width: 640px) { .lead-project__image { aspect-ratio: 4 / 5; } } .section--process-steps { padding-block: clamp(5rem, 7vw, 7.5rem); } .process-steps { display: grid; grid-template-columns: minmax(15rem, 22rem) 1fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; border-top: 1px solid var(--color-line); padding-top: clamp(2.4rem, 4vw, 3.6rem); } .process-steps__intro { max-width: none; } .process-steps__intro h2 { font-weight: 500; } .process-steps__main { border-inline-start: 1px solid var(--color-line); padding-inline-start: clamp(3rem, 6vw, 6rem); } .process-steps__list { position: relative; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(2rem, 3vw, 3rem); } .process-steps__list::before { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 2.6rem; width: 1px; background: var(--color-line); } .process-steps__item { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 40rem); column-gap: clamp(2rem, 3.5vw, 3.2rem); align-items: baseline; } .process-steps__item::before { content: ""; position: absolute; left: 2.6rem; top: 0.5rem; width: 7px; height: 7px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-accent); transform: translateX(-50%); } .process-steps__item:first-child::before { background: var(--color-accent); } .process-steps__num { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); text-align: right; padding-right: 0.7rem; } .process-steps__content { display: flex; flex-direction: column; gap: var(--space-1); } .process-steps__title { font-family: var(--font-heading); font-size: clamp(1.35rem, 1.8vw, 1.75rem); font-weight: 500; color: var(--color-text); line-height: 1.15; letter-spacing: -0.012em; margin: 0; } .process-steps__body { font-size: 1rem; color: var(--color-muted); line-height: 1.6; max-width: 34rem; margin: 0; } @media (max-width: 780px) { .process-steps { grid-template-columns: 1fr; row-gap: clamp(2rem, 5vw, 3rem); } .process-steps__main { border-inline-start: 0; padding-inline-start: 0; } .process-steps__item { grid-template-columns: 2.6rem minmax(0, 1fr); } } .process-steps__list.is-building::before, .office-process__list.is-building::before { opacity: 0; } .process-scrub-line { position: absolute; top: 0.5rem; bottom: 0.5rem; left: 2.6rem; width: 1px; background: var(--color-line); transform-origin: top center; will-change: transform; pointer-events: none; } .process-steps__list.is-building .process-steps__item::before { opacity: 0; transform: translateX(-50%) scale(0.4); } .process-steps__list.is-building .process-steps__item.is-on::before { opacity: 1; transform: translateX(-50%) scale(1); background: var(--color-accent); transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); } .process-steps__list.is-building .process-steps__num, .office-process__list.is-building .office-process__num { opacity: 0; transform: translateY(0.5em); } .process-steps__list.is-building .process-steps__item.is-on .process-steps__num, .office-process__list.is-building .office-process__item.is-on .office-process__num { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .process-steps__list.is-building .process-steps__content, .office-process__list.is-building .office-process__content { overflow: hidden; } .process-steps__list.is-building .process-steps__item:not(.is-on) .process-steps__content > *, .office-process__list.is-building .office-process__item:not(.is-on) .office-process__content > * { opacity: 0; transform: translateY(100%); } .process-steps__list.is-building .process-steps__item.is-on .process-steps__content > *, .office-process__list.is-building .office-process__item.is-on .office-process__content > * { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; } .process-steps__list.is-building .process-steps__item.is-on .process-steps__content > *:nth-child(2), .office-process__list.is-building .office-process__item.is-on .office-process__content > *:nth-child(2) { transition-delay: 0.2s, 0.2s; } .section--stats { padding-block: clamp(5rem, 7vw, 7.5rem); } .stats-band__rule { margin-top: var(--space-4); } .stats-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 4rem); } .stats-band__item { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 0 clamp(1.2rem, 2.5vw, 2rem); border-left: 1px solid var(--color-line); } .stats-band__item:first-child { padding-left: 0; border-left: 0; } .stats-band__value { margin: 0; overflow-wrap: break-word; font-family: var(--font-heading); font-size: clamp(1.9rem, 4vw, 3.4rem); font-weight: 500; line-height: 1.03; letter-spacing: -0.01em; color: var(--color-text); } .stats-band__caption { margin: 0; font-family: var(--font-mono); font-size: var(--type-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } @media (max-width: 820px) { .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 5vw, 2.6rem); } .stats-band__item:nth-child(odd) { padding-left: 0; border-left: 0; } .stats-band__item:nth-child(n + 3) { padding-top: clamp(1.6rem, 4vw, 2rem); border-top: 1px solid var(--color-line); } } @media (max-width: 480px) { .stats-band { grid-template-columns: 1fr; } .stats-band__item { padding-left: 0; border-left: 0; padding-top: clamp(1.2rem, 4vw, 1.6rem); border-top: 1px solid var(--color-line); } .stats-band__item:first-child { padding-top: 0; border-top: 0; } } .section--reviews { padding-block: clamp(5rem, 7vw, 7.5rem); background: var(--color-maroon-light); color: var(--color-text); } .section--reviews .reviews__score, .section--reviews .review__text, .section--reviews .review__name, .section--reviews .review__company, .section--reviews .eyebrow, .section--reviews .reviews__clients-label { color: var(--color-text); } .section--reviews .eyebrow--chip { border-color: rgba(20, 16, 12, 0.32); } .section--reviews .reviews__clients { border-top-color: rgba(20, 16, 12, 0.2); } .section--reviews .review + .review { border-left-color: rgba(20, 16, 12, 0.2); } .reviews { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: clamp(2.4rem, 4vw, 4rem); } .reviews__label { margin-bottom: clamp(0.6rem, 1.2vw, 1rem); } .reviews__summary { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--space-3); } .reviews__rating { display: flex; align-items: center; gap: 0.9rem; } .reviews__google-logo { width: auto; height: 1.5rem; } .reviews__stars { display: inline-flex; gap: 0.14rem; } .reviews__star { width: 1.05rem; height: 1.05rem; fill: var(--color-gold); } .reviews__score { margin: 0; font-family: var(--font-body); font-size: var(--type-body-lg); font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--color-muted); max-width: 34ch; } .reviews__quotes { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(2.4rem, 4vw, 4rem); row-gap: clamp(2rem, 3vw, 3rem); width: 100%; } .review { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; } .review + .review { border-left: 1px solid var(--color-line); padding-left: clamp(2.4rem, 4vw, 4rem); } .review .reviews__star { width: 0.9rem; height: 0.9rem; } .review__text { margin: 0; font-size: var(--type-body-lg); line-height: 1.6; color: var(--color-text); } .review__author { display: flex; flex-direction: column; gap: 0.2rem; margin-top: var(--space-1); } .review__name { font-weight: 500; font-size: 0.92rem; color: var(--color-text); } .review__company { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); } .reviews__clients { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; padding-top: clamp(1.6rem, 2.6vw, 2.4rem); border-top: 1px solid var(--color-line); } .reviews__clients-label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--font-mono); font-size: var(--type-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); } .reviews__clients-label::before { content: ""; width: 0.3rem; height: 0.3rem; transform: rotate(45deg); background: var(--color-accent); } .section--client-strip { padding-block: clamp(1.4rem, 2.4vw, 2rem) clamp(0.6rem, 1.2vw, 1rem); background: var(--color-base); } .section--client-strip .reviews__clients { padding-top: clamp(1.2rem, 2vw, 1.8rem); border-top-color: var(--color-line); } .reviews__marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .reviews__track { display: flex; align-items: flex-end; gap: clamp(3rem, 5.5vw, 5.5rem); width: max-content; margin: 0; padding: 0.25rem 0; list-style: none; animation: reviews-marquee 48s linear infinite; will-change: transform; } .reviews__marquee:hover .reviews__track, .reviews__marquee:focus-within .reviews__track { animation-play-state: paused; } @keyframes reviews-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - clamp(3rem, 5.5vw, 5.5rem) / 2)); } } .client { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; flex: none; } .client__mark { position: relative; display: block; height: var(--logo-h, 2.2rem); } .client__full { display: block; height: 100%; width: auto; opacity: 0; transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1); } .client__mono { position: absolute; inset: 0; background: var(--color-accent-deep); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; opacity: 0.85; transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1); } .client:hover .client__full { opacity: 1; } .client:hover .client__mono { opacity: 0; } .client__name { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; } @supports not ((mask: url(#x)) or (-webkit-mask: url(#x))) { .client__mono { display: none; } .client__full { opacity: 0.55; filter: grayscale(1); } .client:hover .client__full { opacity: 1; filter: none; } } @media (prefers-reduced-motion: reduce) { .reviews__marquee { -webkit-mask-image: none; mask-image: none; } .reviews__track { flex-wrap: wrap; width: auto; gap: clamp(1.6rem, 3vw, 2.6rem); animation: none; } .client[aria-hidden="true"] { display: none; } } @media (max-width: 780px) { .reviews__quotes { grid-template-columns: 1fr; row-gap: clamp(1.8rem, 4vw, 2.6rem); } .review + .review { border-left: 0; padding-left: 0; } .reviews__track { gap: 2.4rem; } } .section--home-projects { padding-block: clamp(5rem, 7vw, 7.5rem); } .home-projects { display: flex; flex-direction: column; gap: var(--space-8); } .home-projects__header { display: flex; flex-direction: column; gap: var(--space-3); } .home-projects__header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .home-projects__header-row h2 { font-size: var(--type-section-lg); font-weight: 500; letter-spacing: -0.015em; flex: 1; min-width: 0; } .home-projects__rule { margin-top: var(--space-4); } .work-bands { display: flex; flex-direction: column; margin-top: clamp(2.4rem, 4.5vw, 4rem); } .section--projects-list .work-bands { margin-top: 0; } .work-band { position: relative; display: block; width: 100%; height: 80vh; min-height: 26rem; overflow: hidden; background: var(--color-surface-strong); text-decoration: none; } .work-band__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-grade); } .work-band__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 77%; background: linear-gradient(0deg, var(--color-ink), rgba(38, 38, 38, 0)); mix-blend-mode: multiply; pointer-events: none; } .work-band__cluster { position: absolute; left: 72px; bottom: 64px; width: min(43.34%, 38.6rem); display: flex; flex-direction: column; align-items: flex-start; gap: 0.925rem; } @media (min-width: 641px) { .work-bands .work-band:nth-child(even) .work-band__cluster { left: auto; right: 72px; } } .work-band__label { --btn-fill: var(--color-accent); position: relative; display: inline-flex; align-items: center; gap: 0.925rem; padding: 0.425rem 0.925rem; border-radius: 3px; background: var(--color-bg); overflow: hidden; isolation: isolate; color: var(--color-ink); transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .work-band__label::before, .work-band__label::after { content: ""; position: absolute; top: 0; bottom: 0; width: 51%; z-index: -1; background-color: var(--btn-fill); transform: translateY(101%); transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1); } .work-band__label::before { left: 0; } .work-band__label::after { right: 0; transition-delay: 0.1s; } .work-band__label > * { position: relative; z-index: 1; } .work-band__label:hover, .work-band:focus-visible .work-band__label { color: var(--color-warm-white); } .work-band__label:hover::before, .work-band:focus-visible .work-band__label::before, .work-band__label:hover::after, .work-band:focus-visible .work-band__label::after { transform: translateY(0%); } .work-band__label:hover .button__plus::before, .work-band:focus-visible .work-band__label .button__plus::before { transform: translateY(-1rem); opacity: 0; } .work-band__label:hover .button__plus::after, .work-band:focus-visible .work-band__label .button__plus::after { transform: translateY(0); opacity: 1; } .work-band__name { font-family: var(--font-heading); font-size: 1.675rem; line-height: 1.3; font-weight: 500; letter-spacing: normal; } .work-band__desc { font-size: 1rem; line-height: 1.3; font-weight: 400; color: rgba(255, 254, 250, 0.92); } .work-band__details { width: 100%; border-top: 1px solid rgba(239, 236, 230, 0.4); opacity: 0.8; } .work-band__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: 0.425rem 0; font-family: var(--font-mono); font-size: 1rem; font-weight: 500; letter-spacing: normal; text-transform: uppercase; color: rgba(255, 254, 250, 0.92); } @media (max-width: 900px) { .work-band__cluster { width: min(70%, 38.6rem); } } @media (max-width: 640px) { .work-band { height: 55vh; min-height: 22rem; } .work-band__cluster { left: 1rem; bottom: 1.2rem; width: calc(100% - 2rem); } .work-band__name { font-size: 1.3rem; } .work-band__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .work-band__meta { font-size: 0.82rem; } } .home-projects__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); } .home-project-card { display: flex; flex-direction: column; gap: var(--space-3); } .home-project-card__image-link { display: block; overflow: hidden; aspect-ratio: 4 / 5; } .home-project-card__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-grade); will-change: transform; } .home-project-card__placeholder { width: 100%; aspect-ratio: 4 / 5; background: var(--color-surface-strong); } .home-project-card__caption { display: flex; flex-direction: column; gap: var(--space-2); } .home-project-card__title { font-family: var(--font-heading); font-size: clamp(1rem, 1.1vw, 1.12rem); font-weight: 500; letter-spacing: -0.01em; color: var(--color-text); line-height: 1.3; transition: color 200ms ease; } .home-project-card__title:hover { color: var(--color-accent-deep); } .home-project-card__location { font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } @media (max-width: 540px) { .home-projects__grid { grid-template-columns: 1fr; } } .home-hero { position: relative; background: var(--color-base); color: var(--color-text); overflow: visible; padding-top: clamp(2rem, 4vw, 3.2rem); } .home-hero::before { display: none; } .home-hero__head { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(0.75rem, 0.7rem + 0.25vw, 1rem); align-items: end; } .home-hero__contact { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding-bottom: 0.08em; } .home-hero__contact-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: -0.4px; text-transform: uppercase; color: var(--color-ink); } .home-hero__contact-phone { align-self: flex-start; font-family: var(--font-heading); font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); font-weight: 500; line-height: 1; letter-spacing: normal; color: var(--color-ink); text-decoration: none; transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .home-hero__contact-phone:hover, .home-hero__contact-phone:focus-visible { color: var(--color-accent-deep); } .home-hero h1 { max-width: 22ch; margin: 0; font-size: clamp(1.875rem, 1.65rem + 1.125vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: normal; text-transform: uppercase; color: var(--color-ink); } .home-hero__hairline { position: relative; height: 1px; margin-top: clamp(1.4rem, 2.6vw, 2.2rem); background: #b8b7b1; } .home-hero__hairline::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(50% - clamp(0.375rem, 0.35rem + 0.125vw, 0.5rem)); background: #2e2e2b; } .home-hero__band { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(0.75rem, 0.7rem + 0.25vw, 1rem); padding-block: clamp(1.4rem, 2.6vw, 2rem); } .home-hero__services { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.8rem); margin: 0; padding: 0; list-style: none; font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: normal; text-transform: uppercase; color: var(--color-accent-deep); } .home-hero__trust { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; flex: none; width: calc(50% - clamp(0.375rem, 0.35rem + 0.125vw, 0.5rem)); text-align: left; } .home-hero__trust-label { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: -0.4px; text-transform: uppercase; color: var(--color-ink); } .home-hero__trust-text { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 400; text-transform: none; color: var(--color-ink); } .home-hero__media { width: 100%; } .home-hero__visual { position: relative; inset: auto; width: 100%; height: clamp(28rem, 68vh, 48rem); min-height: 0; overflow: hidden; background: var(--color-card); } .home-hero__image-stack, .motion-ready .home-hero__image-stack, .motion-ready.motion-loaded .home-hero__image-stack { position: absolute; inset: 0; transform: none; } .home-hero__image-stack::before, .home-hero__image-stack::after { display: none; } @media (max-width: 780px) { .home-hero__head { grid-template-columns: 1fr; } .home-hero__contact { display: none; } .home-hero__band { flex-direction: column; align-items: flex-start; gap: clamp(1.2rem, 4vw, 1.8rem); } .home-hero__trust { width: 100%; } .home-hero__hairline::after { display: none; } .home-hero__visual { height: clamp(20rem, 56vh, 30rem); } } @media (max-width: 780px) { .home-hero__meta { grid-template-columns: 1fr; row-gap: clamp(1.4rem, 3vw, 2rem); } .home-hero__visual { height: clamp(24rem, 78vh, 34rem); } .home-hero__overlay { bottom: 2rem; } .home-hero__overlay .home-hero__head { max-width: none; padding-right: var(--gutter); } } .home-hero__image, .dual-offer__img, .lead-project__img, .home-project-card__img { filter: var(--photo-grade); } .section--statement { padding-block: clamp(5rem, 8vw, 8rem); } .statement { max-width: 70rem; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: clamp(1.6rem, 3vw, 2.6rem); } .statement__quote { width: clamp(2.6rem, 4vw, 3.8rem); height: auto; color: var(--color-accent); } .statement__text { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.75rem); line-height: 1.35; letter-spacing: -0.015em; color: var(--color-text); text-wrap: pretty; } .statement-word { transition: opacity 200ms linear; } .section--process-steps { background: var(--color-forest); padding-bottom: clamp(2.6rem, 4vw, 3.6rem); } .section--process-steps .eyebrow, .section--process-steps .process-steps__intro h2, .section--process-steps .process-steps__num, .section--process-steps .process-steps__title { color: #f0f2ee; } .section--process-steps .process-steps__body { color: rgba(255, 255, 255, 0.82); } .section--process-steps .eyebrow--chip { border-color: rgba(255, 255, 255, 0.34); } .section--process-steps .process-steps__intro { --hairline-color: rgba(255, 255, 255, 0.28); } .section--process-steps .eyebrow__marker { background: var(--color-bg); } .section--process-steps .process-steps { border-top-color: rgba(255, 255, 255, 0.28); } .section--process-steps .process-steps__main { border-inline-start-color: rgba(255, 255, 255, 0.28); } .section--process-steps .process-steps__list::before { background: rgba(255, 255, 255, 0.28); } .section--process-steps .process-steps__item::before { background: var(--color-forest); border-color: #f0f2ee; } .section--process-steps .process-steps__item:first-child::before { background: var(--color-bg); } .section--process-steps .process-scrub-line { background: rgba(255, 255, 255, 0.28); } @media (min-width: 781px) { .section--process-steps { min-height: 100vh; display: flex; align-items: center; padding-block: clamp(3rem, 6vh, 5rem); } .section--process-steps .container { width: 100%; } .section--process-steps .process-steps { display: block; } .section--process-steps .process-steps__intro { margin-bottom: clamp(3.5rem, 9vh, 6.5rem); max-width: 30ch; } .section--process-steps .process-steps__main { border-inline-start: 0; padding-inline-start: 0; } .section--process-steps .process-steps__list { --process-line-y: 2rem; flex-direction: row; align-items: stretch; gap: clamp(1.4rem, 2.4vw, 2.4rem); } .section--process-steps .process-steps__list > li { flex: 1 1 0; } .section--process-steps .process-steps__list::before, .section--process-steps .process-scrub-line { top: var(--process-line-y); bottom: auto; left: 0; right: 0; width: auto; height: 1px; } .section--process-steps .process-scrub-line { transform-origin: left center; } .section--process-steps .process-steps__item { display: flex; flex-direction: column; padding-top: calc(var(--process-line-y) + 1.6rem); } .section--process-steps .process-steps__num { position: absolute; top: 0; left: 0; text-align: left; padding-right: 0; } .section--process-steps .process-steps__item::before { top: calc(var(--process-line-y) - 3.5px); left: 4px; } .section--process-steps .process-steps__title { font-size: clamp(1.15rem, 1.35vw, 1.4rem); } .section--process-steps .process-steps__body { font-size: 0.95rem; line-height: 1.55; } } .motion-enhanced .nu-assemble { opacity: 0; transform: translate3d(0, 44px, 0); transition: opacity 0.85s var(--ease-out-soft), transform 0.85s var(--ease-out-soft); transition-delay: calc(var(--nu-index, 0) * 110ms); } .motion-enhanced .nu-assemble.is-assembled { opacity: 1; transform: none; } html:not(.motion-enhanced) .nu-assemble, .reduced-motion .nu-assemble { opacity: 1; transform: none; transition: none; } .nu-mask { display: block; overflow: hidden; margin: 0; padding: 0; } .motion-enhanced .nu-masked .nu-mask > div { transform: translateY(112%); transition: transform 0.85s var(--ease-out-soft); transition-delay: calc(var(--nu-line, 0) * 110ms); } .motion-enhanced .nu-masked.is-mask-revealed .nu-mask > div { transform: none; } html:not(.motion-enhanced) .nu-mask > div, .reduced-motion .nu-mask > div { transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .nu-assemble, .nu-mask > div { opacity: 1 !important; transform: none !important; transition: none !important; } } .motion-enhanced img.nu-settle-img { transform: scale(1.08); transition: transform 1.2s var(--ease-out-soft); } .motion-enhanced img.nu-settle-img.is-settled { transform: scale(1); } .motion-enhanced .furniture-category-card:hover .furniture-category-card__img.nu-settle-img { transform: scale(1.04); } html:not(.motion-enhanced) img.nu-settle-img, .reduced-motion img.nu-settle-img { transform: none; transition: none; } .motion-enhanced .nu-band-wipe { clip-path: inset(14% 0 0 0); transform: translate3d(0, 30px, 0); transition: clip-path 0.95s var(--ease-out-soft), transform 0.95s var(--ease-out-soft); } .motion-enhanced .nu-band-wipe.is-wiped { clip-path: inset(0 0 0 0); transform: none; } html:not(.motion-enhanced) .nu-band-wipe, .reduced-motion .nu-band-wipe { clip-path: none; transform: none; transition: none; } @media (min-width: 821px) { .office-process__intro, .office-why__copy { position: sticky; top: clamp(5.5rem, 10vh, 8rem); align-self: start; } } @media (prefers-reduced-motion: reduce) { img.nu-settle-img, .nu-band-wipe { transform: none !important; clip-path: none !important; transition: none !important; } } .section--guarantee { scroll-margin-top: 6rem; } .guarantee-note__copy { max-width: 46rem; margin-top: clamp(0.9rem, 1.4vw, 1.2rem); font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.7; color: var(--color-muted); } .site-footer__details { font-style: normal; line-height: 1.7; } .site-footer__details a { color: inherit; } .stats-band__eyebrow { margin: 0 0 4px; font-family: var(--font-mono, monospace); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-deep, #485035); } .section--not-found { padding-block: clamp(120px, 16vh, 180px); } .not-found__search { display: flex; gap: 10px; max-width: 560px; margin-top: var(--space-4, 1.4rem); } .not-found__search input[type="search"] { flex: 1; padding: 12px 16px; border: 1px solid var(--color-ink); background: var(--color-warm-white, #fffefa); font: inherit; } .not-found__doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4, 1.4rem); margin-top: clamp(40px, 6vh, 64px); max-width: 900px; } .not-found__door { display: block; padding: 24px 22px; border-top: 2px solid var(--color-ink); color: inherit; text-decoration: none; transition: border-color 0.2s ease; } .not-found__door:hover { border-top-color: var(--color-accent, #6f7555); } .not-found__door h2 { margin: 0 0 6px; font-size: 1.25rem; } .not-found__door p { margin: 0; font-size: 0.92rem; color: var(--color-deep); } .home-hero__trust-link { display: inline-block; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition), color var(--transition); } .home-hero__trust-link:hover, .home-hero__trust-link:focus-visible { border-bottom-color: currentColor; color: var(--color-accent-deep); } .home-call-bar { display: none; } @media (max-width: 780px) { .home-call-bar { position: fixed; left: 0; right: 0; bottom: var(--nuwave-consent-h, 0px); z-index: 40; display: flex; gap: 1px; background: var(--color-line); border-top: 1px solid var(--color-line); padding-bottom: env(safe-area-inset-bottom, 0px); } .home-call-bar__phone, .home-call-bar__whatsapp { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0.9rem 1rem; font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; background: var(--color-ink); color: var(--color-warm-white); } .home-call-bar__whatsapp { background: var(--color-green-deep); } body.home .site-footer { padding-bottom: calc(56px + var(--nuwave-consent-h, 0px)); } } .section--home-products { background: var(--color-deep); color: rgba(255, 254, 250, 0.92); } .section--home-products .button--outline { --btn-text: var(--color-warm-white); --btn-border: rgba(255, 254, 250, 0.5); --btn-fill: var(--color-warm-white); --btn-fill-text: var(--color-ink); } .home-products__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: clamp(1.5rem, 3vw, 3rem); margin-bottom: clamp(1.8rem, 3vw, 2.8rem); } .home-products__heading { max-width: 22ch; margin-top: 0; font-size: var(--type-section-lg); font-weight: 500; line-height: 1.05; letter-spacing: -0.018em; color: #f0f2ee; } .home-products__support { max-width: 42ch; margin: 0; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.6; color: rgba(255, 254, 250, 0.72); } .home-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.4vw, 3.2rem) clamp(1.6rem, 2.8vw, 2.6rem); margin: 0; padding: 0; list-style: none; } .home-product { margin: 0; } .home-product__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: rgba(255, 254, 250, 0.92); } .home-product__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-card); transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .home-product__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); } .home-product__link:hover .home-product__media, .home-product__link:focus-visible .home-product__media { transform: translateY(-4px); } .home-product__link:hover .home-product__img, .home-product__link:focus-visible .home-product__img { transform: scale(1.03); } .home-product__body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem 0 0; margin-top: 1rem; border-top: 1px solid rgba(255, 254, 250, 0.16); } .home-product__meta { display: flex; align-items: baseline; gap: 0.8rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 254, 250, 0.6); } .home-product__num { color: var(--color-accent); } .home-product__title { font-family: var(--font-heading); font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 500; line-height: 1.2; color: #f0f2ee; transition: color 300ms ease; } .home-product__link:hover .home-product__title, .home-product__link:focus-visible .home-product__title { color: var(--color-accent); } .home-product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; margin-top: 0.2rem; } .home-product__price-from, .home-product__price-note { font-size: 0.8rem; color: rgba(255, 254, 250, 0.62); } .home-product__price-value { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 500; color: #f0f2ee; } .home-product__price-ex { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; } .home-product__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); opacity: 0; transform: translateY(4px); transition: opacity 300ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1); } .home-product__link:hover .home-product__cta, .home-product__link:focus-visible .home-product__cta { opacity: 1; transform: none; } .home-product__arrow { transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); } .home-product__link:hover .home-product__arrow { transform: translateX(3px); } .home-products__foot { display: flex; justify-content: center; margin-top: clamp(1.6rem, 2.6vw, 2.4rem); } @media (max-width: 720px) { .home-products__head { grid-template-columns: 1fr; align-items: start; } .home-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; } .home-product__cta { display: none; } } .reviews__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; } .reviews__heading { max-width: 20ch; margin: clamp(0.9rem, 1.4vw, 1.2rem) 0 0; font-size: var(--type-section-lg); font-weight: 500; line-height: 1.05; letter-spacing: -0.018em; color: var(--color-ink); } .reviews__source { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: clamp(1rem, 1.6vw, 1.4rem); padding: 0.55rem 0.9rem 0.55rem 0.7rem; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-card); color: var(--color-text); text-decoration: none; transition: border-color var(--transition), background var(--transition); } .reviews__source:hover, .reviews__source:focus-visible { border-color: var(--color-accent); background: var(--color-warm-white); } .reviews__g { width: 1.15rem; height: 1.15rem; flex: none; } .reviews__source-text { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--color-ink); } .reviews__source-cta { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-text); } .reviews__source-arrow { font-size: 0.85rem; line-height: 1; } .review { position: relative; } .review__quote { margin: 0; padding: 0; border: 0; } .review--lead .review__text { font-size: clamp(1.15rem, 1.45vw, 1.35rem); line-height: 1.5; } .review__meta { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); } .closing-cta__actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); } .closing-cta__actions .closing-cta__trust { flex-basis: 100%; text-align: right; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--transition); } .closing-cta__actions .closing-cta__trust:hover, .closing-cta__actions .closing-cta__trust:focus-visible { color: rgba(255, 255, 255, 0.92); } @media (max-width: 680px) { .closing-cta__actions { justify-content: flex-start; } .closing-cta__actions .closing-cta__trust { text-align: left; } } .about-hero { padding-block: clamp(2rem, 4vw, 3.2rem) var(--space-6); } .about-hero__head { display: flex; flex-direction: column; gap: var(--space-4); } .about-hero__title { max-width: 16ch; font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 5.75rem); line-height: 1.05; letter-spacing: -0.03em; } .about-hero__rule { margin-block: clamp(2.2rem, 4vw, 3.4rem); } .about-hero__meta { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; } .about-hero__meta-label { margin: 0; } .about-hero__lead { max-width: 46rem; font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.5; color: var(--color-text); } .about-hero__actions { grid-column: 2; margin-top: var(--space-3); } .about-positioning__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; } .about-positioning__title { font-weight: 500; max-width: 18ch; } .about-positioning__body { max-width: 44rem; color: var(--color-muted); font-size: var(--type-body-lg); line-height: 1.7; border-inline-start: 1px solid var(--color-line); padding-inline-start: clamp(2rem, 4vw, 3.5rem); } @media (min-width: 821px) { .about-positioning__intro { position: sticky; top: clamp(5.5rem, 10vh, 8rem); align-self: start; } } .about-positioning__body .text-link { margin-top: var(--space-2); } .about-band { background: var(--color-green-deep); color: #f2f4f0; padding-block: clamp(5rem, 9vw, 8rem); } .about-band__label { border-color: rgba(242, 236, 230, 0.28); color: #e6dcd3; } .about-band > .container { --hairline-color: rgba(242, 236, 230, 0.28); } .about-band__label .eyebrow__marker { background: var(--color-bg); } .about-band__quote { margin: clamp(2rem, 4vw, 3rem) 0 0; } .about-band__quote p { max-width: 26ch; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 3.1rem); line-height: 1.12; letter-spacing: -0.018em; } .about-band__link { margin-top: clamp(2rem, 4vw, 3rem); } .about-stats__label { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); } .about-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); } .about-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1rem, 2vw, 2rem) clamp(1.8rem, 3vw, 2.8rem) 0; border-bottom: 1px solid var(--color-line); } .about-stat + .about-stat { border-left: 1px solid var(--color-line); padding-left: clamp(1.2rem, 2vw, 2.2rem); } .about-stat__value { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 3.1rem); line-height: 1.05; letter-spacing: -0.02em; } .about-stat__label { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-text); } .about-disciplines__header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); } .about-disciplines__header-row h2 { font-weight: 500; max-width: 22ch; } .about-disciplines__header .section-rule { margin-top: var(--space-4); } .about-disciplines__list { list-style: none; margin: clamp(2rem, 4vw, 3.2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .about-discipline { display: flex; gap: clamp(1rem, 2vw, 1.8rem); padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.5rem, 3vw, 3rem) clamp(1.8rem, 3vw, 2.6rem) 0; border-bottom: 1px solid var(--color-line); } .about-discipline:nth-child(odd) { border-right: 1px solid var(--color-line); } .about-discipline:nth-child(-n + 2) { border-top: 1px solid var(--color-line); } .about-discipline__num { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; color: var(--color-accent-deep); padding-top: 0.35rem; flex: none; } .about-discipline__title { font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.7rem); letter-spacing: -0.01em; } .about-discipline__text { margin-top: var(--space-2); max-width: 34rem; color: var(--color-muted); line-height: 1.66; } @media (max-width: 900px) { .about-hero__meta, .about-positioning__grid { grid-template-columns: 1fr; } .about-hero__actions { grid-column: auto; } .about-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-stat:nth-child(odd) { border-left: 0; padding-left: 0; } .about-stat:nth-child(even) { border-left: 1px solid var(--color-line); padding-left: clamp(1.2rem, 4vw, 2rem); } .about-disciplines__list { grid-template-columns: 1fr; } .about-discipline:nth-child(odd) { border-right: 0; } .about-discipline:nth-child(2) { border-top: 0; } } @media (max-width: 560px) { .about-stats__grid { grid-template-columns: 1fr; } .about-stat, .about-stat:nth-child(even) { border-left: 0; padding-left: 0; } } .ct-hero { position: relative; background: var(--color-base); color: var(--color-text); padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(2.4rem, 4vw, 3.6rem); } .ct-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .ct-crumbs a { color: var(--color-accent-text); text-decoration: none; } .ct-crumbs a:hover, .ct-crumbs a:focus-visible { color: var(--color-ink); } .ct-hero__head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 1.8vw, 1.4rem); } .ct-hero__title { margin: 0; max-width: 20ch; font-family: var(--font-heading); font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; color: var(--color-ink); } .ct-hero__lead { display: flex; flex-direction: column; gap: 0.9rem; max-width: 62rem; } .ct-hero__lead p { margin: 0; font-size: var(--type-body-lg); line-height: 1.6; color: var(--color-text); } .ct-hero__lead p + p { color: var(--color-muted); } .ct-hero .trust-strip { margin-top: clamp(0.6rem, 1.2vw, 1rem); } .ct-section-head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.8rem, 1.4vw, 1.1rem); margin-bottom: clamp(1.8rem, 3vw, 2.6rem); } .ct-section-title { margin: 0; max-width: 24ch; font-size: var(--type-section-md); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-ink); } .ct-note { margin: 0; max-width: 46rem; font-size: 0.92rem; line-height: 1.6; color: var(--color-muted); } .ct-hero__lead a, .ct-note a, .ct-guide__section a, .ct-faq__a a, .ct-delivery__item a { color: var(--color-accent-deep); text-decoration: none; border-bottom: 1px solid currentColor; transition: color 160ms ease; } .ct-hero__lead a:hover, .ct-note a:hover, .ct-guide__section a:hover, .ct-faq__a a:hover, .ct-delivery__item a:hover { color: var(--color-ink); } .ct-prices__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1.8rem, 3vw, 2.6rem); align-items: start; } .ct-prices__group-title { margin: 0 0 0.35rem; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.005em; } .ct-prices__group-note { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--color-muted); } .ct-prices__group-title + .ct-table-wrap { margin-top: 0.9rem; } .ct-table-wrap { overflow-x: auto; border: 1px solid var(--color-line); background: var(--color-warm-white); } .ct-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .ct-table th { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--color-muted); text-align: left; } .ct-table th, .ct-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--color-line); white-space: nowrap; vertical-align: top; } .ct-table tbody tr:last-child td { border-bottom: 0; } .ct-table th.ct-table__figure { text-align: right; } .ct-table td.ct-table__figure { text-align: right; font-family: var(--font-heading); font-weight: 500; color: var(--color-ink); } .ct-table__covers { white-space: normal; min-width: 18rem; font-size: 0.88rem; color: var(--color-muted); } .ct-table a { color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-line); transition: border-color 160ms ease; } .ct-table a:hover, .ct-table a:focus-visible { border-color: var(--color-accent); } .ct-prices__after { margin-top: clamp(1.2rem, 2vw, 1.6rem); } .ct-related { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-top: clamp(1.6rem, 2.6vw, 2.2rem); padding-top: clamp(1.2rem, 2vw, 1.6rem); border-top: 1px solid var(--color-line); font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase; } .ct-related__label { color: var(--color-muted); } .ct-related a { color: var(--color-accent-text); text-decoration: none; transition: color 160ms ease; } .ct-related a:hover, .ct-related a:focus-visible { color: var(--color-ink); } .ct-guide__sections { display: flex; flex-direction: column; gap: clamp(2rem, 3.4vw, 3rem); max-width: 62rem; } .ct-guide__heading { margin: 0 0 0.7rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; } .ct-guide__section p { margin: 0; line-height: 1.7; color: var(--color-muted); } .ct-guide__section p + p { margin-top: 0.8rem; } .ct-reviews .reviews__profile-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: color 160ms ease; } .ct-reviews .reviews__profile-link:hover, .ct-reviews .reviews__profile-link:focus-visible { color: var(--color-accent-deep); } .ct-delivery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); max-width: 72rem; } .ct-delivery__item { margin: 0; line-height: 1.7; color: var(--color-muted); } .ct-delivery__item strong { display: block; margin-bottom: 0.3rem; font-weight: 500; color: var(--color-ink); } .ct-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 3.6vw, 3.2rem) clamp(2rem, 4vw, 4rem); max-width: 72rem; } .ct-faq__q { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; } .ct-faq__a { margin: 0; line-height: 1.65; color: var(--color-muted); } .ct-grid__group + .ct-grid__group { margin-top: clamp(2.4rem, 4vw, 3.6rem); } .ct-grid__group-title { margin: 0 0 clamp(1rem, 1.8vw, 1.4rem); font-size: 1.1rem; font-weight: 500; } .furniture-band__guide { margin: 0 0 clamp(1.2rem, 2vw, 1.6rem); font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase; } .product-configurator__guide { margin: 0; font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase; } .furniture-band__guide a, .product-configurator__guide a { color: var(--color-accent-text); text-decoration: none; transition: color 160ms ease; } .furniture-band__guide a:hover, .furniture-band__guide a:focus-visible, .product-configurator__guide a:hover, .product-configurator__guide a:focus-visible { color: var(--color-ink); } .site-footer__grid h3.site-footer__furniture-label { margin-top: var(--space-5); } @media (max-width: 780px) { .ct-faq__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .ct-table th, .ct-table td { white-space: normal; padding: 0.65rem 0.8rem; } .ct-table--covers thead { display: none; } .ct-table--covers tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .ct-table--covers td { border-bottom: 0; } .ct-table--covers td.ct-table__covers { grid-column: 1 / -1; min-width: 0; padding-top: 0; border-bottom: 1px solid var(--color-line); } .ct-table--covers tbody tr:last-child td.ct-table__covers { border-bottom: 0; } .ct-related { gap: 0.5rem 1rem; } } @media (prefers-reduced-motion: reduce) { .ct-hero__lead a, .ct-note a, .ct-guide__section a, .ct-faq__a a, .ct-delivery__item a, .ct-table a, .ct-related a, .ct-reviews .reviews__profile-link, .furniture-band__guide a, .product-configurator__guide a { transition: none; } } .ct-table__ex { display: block; margin-top: 0.1rem; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 500; letter-spacing: 0; color: var(--color-muted); white-space: nowrap; } .contact-hero { padding-block: clamp(2rem, 4vw, 3.2rem) clamp(1.4rem, 2.4vw, 2rem); } .contact-hero__head { display: flex; flex-direction: column; gap: clamp(0.8rem, 1.6vw, 1.2rem); } .contact-hero__title { max-width: 24ch; margin: 0; font-size: clamp(1.875rem, 1.65rem + 1.125vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: normal; text-transform: uppercase; color: var(--color-ink); } .contact-hero__rule { margin-block: clamp(2rem, 3.4vw, 3.2rem) clamp(1.8rem, 2.6vw, 2.6rem); } .contact-hero__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; } .contact-hero__lead { max-width: 38rem; margin: 0; font-size: var(--type-body-lg); line-height: 1.6; color: var(--color-muted); } .contact-hero__actions { justify-self: end; } .contact-routes__intro h2, .contact-form__heading { font-weight: 500; letter-spacing: -0.012em; } .contact-routes__rule { margin-block: clamp(1.8rem, 3vw, 2.8rem); } .contact-routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); } .route-card { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(1.6rem, 2.4vw, 2.4rem) 0 0; border-top: 1px solid var(--color-line); color: var(--color-text); text-decoration: none; transition: border-top-color 260ms var(--ease-out-soft); } .route-card:hover, .route-card:focus-visible { border-top-color: var(--color-accent-deep); color: var(--color-text); } .route-card:hover .route-card__title, .route-card:focus-visible .route-card__title { color: var(--color-accent-deep); } .route-card:hover .route-card__link::after, .route-card:focus-visible .route-card__link::after { opacity: 0.72; transform: scaleX(1); } .route-card__num { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; color: var(--color-accent-text); } .route-card__title { margin: 0; font-family: var(--font-heading); font-size: var(--type-section-md); font-weight: 500; letter-spacing: -0.01em; transition: color 260ms var(--ease-out-soft); } .route-card__text { margin: 0; max-width: 32ch; color: var(--color-muted); line-height: 1.6; } .route-card__link { margin-top: auto; padding-top: var(--space-2); } .contact-form__grid { display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .contact-form__heading { font-size: var(--type-section-md); margin-top: var(--space-1); } .contact-form__hint { margin: 0; color: var(--color-muted); line-height: 1.6; } .contact-form__info { margin: var(--space-2) 0 0; border-top: 1px solid var(--color-line); } .contact-form__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); } .contact-form__row dt { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-text); } .contact-form__row dd { margin: 0; text-align: right; font-weight: 500; } .contact-form__note { max-width: 34ch; margin: 0; color: var(--color-muted); line-height: 1.6; } .contact-form__main { min-width: 0; } .contact-form .entry-content > * + * { margin-top: var(--space-4); } .enquiry-form { display: flex; flex-direction: column; gap: clamp(1.6rem, 2.6vw, 2.4rem); } .enquiry-form__error { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid rgba(156, 74, 55, 0.45); color: var(--color-error); font-size: 0.92rem; } .enquiry-form__field-error { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--color-error); } .enquiry-form__field-error:empty { display: none; } .enquiry-form__field.is-invalid input, .enquiry-form__field.is-invalid select, .enquiry-form__field.is-invalid textarea { border-color: var(--color-error); } .enquiry-form__fieldset--need.is-invalid .enquiry-form__choice span { border-color: var(--color-error); } .enquiry-form__label { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-text); } .enquiry-form__fieldset { margin: 0; padding: 0; border: 0; } .enquiry-form__fieldset legend { padding: 0; } .enquiry-form__choices { display: flex; flex-wrap: wrap; gap: var(--space-2); } .enquiry-form__choice input { position: absolute; opacity: 0; pointer-events: none; } .enquiry-form__choice span { display: inline-flex; align-items: center; min-height: 2.65rem; padding: 0.72rem 1.1rem; border: 1px solid var(--color-line); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); cursor: pointer; transition: background-color 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft); } .enquiry-form__choice input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); } .enquiry-form__choice input:focus-visible + span { outline: 2px solid rgba(151, 104, 61, 0.42); outline-offset: 3px; } .enquiry-form__choice:hover span { border-color: var(--color-dark); } .enquiry-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.2vw, 2rem); } .enquiry-form__field { margin: 0; min-width: 0; } .enquiry-form input[type="text"], .enquiry-form input[type="email"], .enquiry-form input[type="tel"], .enquiry-form select, .enquiry-form textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--color-line); border-radius: 0; background: var(--color-bg); color: var(--color-text); font-size: 0.95rem; line-height: 1.5; transition: border-color 220ms var(--ease-out-soft); } .enquiry-form select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c1a16' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; } .enquiry-form input:focus-visible, .enquiry-form select:focus-visible, .enquiry-form textarea:focus-visible { outline: none; border-color: var(--color-accent-deep); } .enquiry-form textarea { resize: vertical; min-height: 8rem; } .enquiry-form__upload { margin: 0; min-width: 0; } .enquiry-form__dropzone { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 3.4rem; padding: 0.85rem 1rem; border: 1px dashed var(--color-line); background: var(--color-bg); cursor: pointer; transition: border-color 220ms var(--ease-out-soft); } .enquiry-form__dropzone:hover, .enquiry-form__dropzone:focus-within { border-color: var(--color-accent-deep); } .enquiry-form__dropzone input[type="file"] { width: 100%; font-size: 0.9rem; color: var(--color-text); } .enquiry-form__dropzone-prompt { display: none; } .enquiry-form__upload.is-enhanced .enquiry-form__dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .enquiry-form__upload.is-enhanced .enquiry-form__dropzone-prompt { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); } .enquiry-form__dropzone-plus { color: var(--color-accent); } .enquiry-form__upload.has-file .enquiry-form__dropzone { display: none; } .enquiry-form__hint { display: block; margin-top: var(--space-2); font-size: 0.85rem; color: var(--color-muted); } .enquiry-form__file { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3.4rem; padding: 0.85rem 1rem; border: 1px solid var(--color-line); background: var(--color-bg); } .enquiry-form__file[hidden] { display: none; } .enquiry-form__file-name { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; overflow-wrap: anywhere; } .enquiry-form__file-remove { border: 0; padding: 0; background: none; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .enquiry-form__file-remove:hover, .enquiry-form__file-remove:focus-visible { color: var(--color-ink); } .enquiry-form__error--inline { display: block; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); } .enquiry-form__error--inline[hidden] { display: none; } .enquiry-form__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--color-line); } .enquiry-form__privacy { max-width: 34rem; margin: 0; font-size: 0.85rem; color: var(--color-muted); } .enquiry-form__success { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(2rem, 4vw, 3.2rem); border: 1px solid var(--color-line); } .enquiry-form__success h3 { max-width: 24ch; font-weight: 500; font-size: var(--type-section-md); } .enquiry-form__success p:last-child { max-width: 44ch; color: var(--color-muted); } @media (max-width: 980px) { .contact-routes__grid { grid-template-columns: 1fr; gap: 0; } .contact-form__grid { grid-template-columns: 1fr; } } @media (max-width: 680px) { .contact-hero__meta { grid-template-columns: 1fr; row-gap: var(--space-5); } .contact-hero__actions { justify-self: start; } .enquiry-form__grid { grid-template-columns: 1fr; } } .config-group--fabric .config-tiles { align-items: flex-start; } .config-group--fabric .config-tile--action { height: auto; } .config-group--fabric .config-tile--action .config-tile__face { height: 88px; } .config-tile__caption { display: block; padding-top: 0.3rem; font-family: var(--font-heading); font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.02em; font-variant-caps: all-small-caps; text-align: center; color: var(--color-ink); } .config-tile__caption-main { display: block; font-weight: 500; } .config-tile__caption-sub { display: block; margin-top: 1px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--color-muted); } .config-tile--mosaic .config-tile__caption-sub { font-size: 0.7rem; color: var(--color-ink); } .config-tile__mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .config-tile__mosaic-cell { background-size: cover; background-position: center; opacity: 0.88; } .config-tile--mosaic:hover .config-tile__mosaic-cell { opacity: 1; } .config-tile__chosen { position: absolute; inset: 0; background-size: cover; background-position: center; } .config-tile__chosen[hidden] { display: none; } .config-tile__mosaic[hidden] { display: none; } .config-tile--own .config-tile__face { --choice-face: var(--color-card); } .config-tile--own .config-tile__own { display: block; width: 100%; padding: 0.25rem 0.15rem; font-family: var(--font-heading); font-size: 0.7rem; line-height: 1.25; letter-spacing: 0.01em; color: var(--color-muted); text-align: center; overflow-wrap: anywhere; } .config-tile--own:hover .config-tile__own, .config-tile--own.is-selected .config-tile__own { color: var(--color-ink); } .config-group--upgrade .config-tiles { align-items: flex-start; } .config-tile__words { display: block; padding: 0.3rem 0.25rem; font-family: var(--font-heading); font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; font-variant-caps: all-small-caps; color: inherit; text-align: center; } .config-fabric__own-note { margin-top: 0.8rem; padding: 0.8rem 0.9rem; border: 1px solid var(--color-line); background: var(--color-card); } .config-fabric__own-note[hidden] { display: none; } .config-fabric__own-line { margin: 0 0 0.6rem; font-size: 0.84rem; color: var(--color-muted); } .config-fabric__own-label { display: block; margin-bottom: 0.35rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } .config-fabric__own-input { width: 100%; } .fabric-sheet { position: fixed; inset: 0; z-index: 210; pointer-events: none; } .fabric-sheet__scrim { position: absolute; inset: 0; background: rgba(38, 38, 38, 0.32); opacity: 0; transition: opacity 320ms var(--ease-out-soft); } .fabric-sheet__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(60rem, 100%); display: flex; flex-direction: column; background: var(--color-base); border-left: 1px solid var(--color-line); transform: translateX(100%); transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); outline: none; } .fabric-sheet.is-open { pointer-events: auto; } .fabric-sheet.is-open .fabric-sheet__scrim { opacity: 1; } .fabric-sheet.is-open .fabric-sheet__panel { transform: translateX(0); } .fabric-sheet__handle { display: none; } .fabric-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem) 1rem; border-bottom: 1px solid var(--color-line); } .fabric-sheet__title { margin: 0; font-size: clamp(1.2rem, 2vw, 1.5rem); } .fabric-sheet__note { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--color-muted); } .fabric-sheet__close { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border: 1px solid var(--color-line); background: none; font-size: 1.2rem; line-height: 1; color: var(--color-ink); cursor: pointer; transition: border-color 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft); } .fabric-sheet__close:hover, .fabric-sheet__close:focus-visible { border-color: var(--color-ink); color: var(--color-accent-deep); } .fabric-sheet__filters { display: flex; align-items: center; gap: 0.4rem; padding: 0.8rem clamp(1.2rem, 2vw, 1.6rem); border-bottom: 1px solid var(--color-line); overflow-x: auto; scrollbar-width: none; } .fabric-sheet__filters::-webkit-scrollbar { display: none; } .fabric-sheet__filter-sep { flex: 0 0 1px; align-self: stretch; margin: 0 0.3rem; background: var(--color-line); } .fabric-chip { flex: 0 0 auto; padding: 0.4rem 0.8rem; border: 1px solid var(--color-line); background: none; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; cursor: pointer; transition: border-color 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft), background-color 220ms var(--ease-out-soft); } .fabric-chip:hover, .fabric-chip:focus-visible { border-color: var(--color-ink); color: var(--color-ink); } .fabric-chip.is-active { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-warm-white); } @media (hover: none), (pointer: coarse) { .fabric-chip { min-height: 40px; display: inline-flex; align-items: center; } } .fabric-sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.2rem, 2vw, 1.6rem); } .fabric-group + .fabric-group { margin-top: var(--space-4); } .fabric-group[hidden] { display: none; } .fabric-group__title { margin: 0; font-size: 1rem; font-weight: 500; } .fabric-group__line { margin: 0.2rem 0 0.9rem; font-size: 0.82rem; color: var(--color-muted); } .fabric-group__effect { color: var(--color-ink); } .fabric-group__grid { display: grid; grid-template-columns: repeat(auto-fill, 120px); gap: 0.8rem; } .fabric-sheet__empty { margin: var(--space-4) 0 0; color: var(--color-muted); } .fabric-sheet__empty[hidden] { display: none; } .fabric-tile { position: relative; display: block; width: 120px; cursor: pointer; } .fabric-tile[hidden] { display: none; } .fabric-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; } .fabric-tile__face { position: relative; display: block; width: 120px; height: 120px; overflow: hidden; border: 1px solid rgba(38, 38, 38, 0.1); background-size: cover; transition: border-color 220ms var(--ease-out-soft); } .fabric-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .fabric-tile__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.24rem 0.3rem; background: rgba(250, 249, 246, 0.92); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fabric-tile--dark .fabric-tile__name { background: rgba(38, 38, 38, 0.78); color: var(--color-warm-white); } .fabric-tile:hover .fabric-tile__face, .fabric-tile input:focus-visible + .fabric-tile__face { border-color: var(--color-ink); } .fabric-tile.is-selected .fabric-tile__face { outline: 2px solid var(--color-ink); outline-offset: 2px; border-color: rgba(38, 38, 38, 0.16); } .fabric-tile.is-selected::after { content: ""; position: absolute; z-index: 2; top: -7px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 4.7 8.6 9.5 3.8' fill='none' stroke='%23faf9f6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; box-shadow: 0 0 0 2px var(--color-base); pointer-events: none; } .fabric-group__grid:hover .fabric-tile:not(.is-selected):not(:hover) { opacity: 0.85; } .fabric-tile__preview { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 30; width: 240px; transform: translate(-50%, 4px); padding: 0.5rem; border: 1px solid var(--color-line); background: var(--color-base); box-shadow: 0 18px 40px rgba(38, 38, 38, 0.14); opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease-out-soft), transform 220ms var(--ease-out-soft), visibility 0s linear 220ms; pointer-events: none; } .fabric-tile.is-previewing .fabric-tile__preview { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } .fabric-tile__preview img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .fabric-tile__preview-name::before, .fabric-tile__preview-spec::before { content: attr(data-text); } .fabric-tile__preview-name { display: block; margin-top: 0.45rem; font-size: 0.8rem; color: var(--color-ink); } .fabric-tile__preview-spec { display: block; margin-top: 0.15rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--color-muted); } .fabric-sheet__foot { display: flex; align-items: center; gap: var(--space-3); padding: clamp(0.9rem, 1.6vw, 1.2rem) clamp(1.2rem, 2vw, 1.6rem) calc(clamp(0.9rem, 1.6vw, 1.2rem) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-line); background: var(--color-base); } .fabric-sheet__chosen { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .fabric-sheet__chosen-label, .fabric-sheet__price-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } .fabric-sheet__chosen-name { font-size: 0.92rem; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fabric-sheet__price { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.1rem; text-align: right; } .fabric-sheet__price-value { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; color: var(--color-ink); white-space: nowrap; } .fabric-sheet__use { flex: 0 0 auto; } @media (max-width: 720px) { .config-group--fabric .config-tile--action .config-tile__face { height: 76px; } .fabric-sheet__panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 92vh; border-left: 0; border-top: 1px solid var(--color-line); transform: translateY(100%); } .fabric-sheet.is-open .fabric-sheet__panel { transform: translateY(0); } .fabric-sheet__handle { display: block; width: 2.4rem; height: 3px; margin: 0.6rem auto 0; border-radius: 999px; background: var(--color-line); } .fabric-group__grid { grid-template-columns: repeat(auto-fill, 96px); gap: 0.6rem; } .fabric-tile, .fabric-tile__face { width: 96px; } .fabric-tile__face { height: 96px; } .fabric-tile__preview { width: 200px; } .fabric-sheet__foot { flex-wrap: wrap; } .fabric-sheet__use { flex: 1 1 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .fabric-sheet__panel, .fabric-sheet__scrim, .fabric-tile__preview { transition-duration: 1ms; } } .config-group--fabric .config-tile__face, .config-group--upgrade .config-tile__face { --choice-face: var(--color-card); } .config-group--fabric .config-tile__a, .config-group--fabric .config-tile__chosen, .config-group--fabric .config-tile__mosaic { background-color: transparent; } .config-group--fabric .config-tile--captioned, .config-group--upgrade .config-tile--captioned { height: auto; } .config-group--fabric .config-tile--captioned .config-tile__face, .config-group--upgrade .config-tile--captioned .config-tile__face { height: 88px; } .config-tile__caption-price { display: block; padding-top: 0.28rem; font-family: var(--font-mono); font-size: 12px; line-height: 1.2; letter-spacing: normal; font-variant-caps: normal; color: var(--color-muted); text-align: center; white-space: nowrap; } .config-tile.is-selected .config-tile__caption-price { color: var(--color-ink); } .config-tile__note { display: block; padding-top: 0.24rem; font-size: 0.72rem; line-height: 1.35; letter-spacing: 0; font-variant-caps: normal; text-align: center; text-wrap: pretty; color: var(--color-muted); } .config-tile.is-selected .config-tile__note { color: var(--color-ink); } .config-tiles:not(.config-tiles--cards):has(.config-tile__note) .config-tile { width: clamp(9rem, 30%, 12rem); } .config-group--fabric .config-tile__zoom, .config-group--upgrade .config-tile__zoom { top: -6px; left: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--color-base); box-shadow: 0 0 0 1px var(--color-line); color: var(--color-muted); } .config-group--fabric .config-tile:hover .config-tile__zoom, .config-group--upgrade .config-tile:hover .config-tile__zoom { color: var(--color-ink); } @media (max-width: 720px) { .config-group--fabric .config-tile--captioned .config-tile__face, .config-group--upgrade .config-tile--captioned .config-tile__face { height: 76px; } } .config-group--upgrade .config-tile__a { background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: auto; } .config-tile__caption-note { display: block; margin-top: 1px; font-family: var(--font-mono); font-size: 8px; line-height: 1.2; letter-spacing: 0.04em; color: var(--color-muted); text-align: center; white-space: nowrap; } .config-tile.is-selected .config-tile__caption-note { color: var(--color-ink); } .furniture-hero { position: relative; background: var(--color-base); color: var(--color-text); padding-block: clamp(1.6rem, 3vw, 2.4rem) 0; } .furniture-hero__head { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.4vw, 1rem); } .furniture-hero__title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 500; line-height: 1.05; letter-spacing: normal; text-transform: uppercase; color: var(--color-ink); } .furniture-hero__lead { margin: 0; max-width: 60rem; color: var(--color-muted); } .section--furniture-statement { background: var(--color-forest); padding-block: clamp(5.5rem, 8vw, 8rem); } .furniture-statement { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.6rem, 3vw, 2.4rem); max-width: 62rem; } .section--furniture-statement .eyebrow--chip { color: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.3); } .section--furniture-statement .eyebrow__marker { background: var(--color-sage); } .furniture-statement__lead { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1.08; letter-spacing: -0.015em; color: #f0f2ee; } .furniture-statement__body { margin: 0; max-width: 36rem; font-size: var(--type-body-lg); line-height: 1.6; color: rgba(255, 255, 255, 0.82); } .section--furniture-categories { padding-block: clamp(1rem, 1.8vw, 1.4rem) clamp(3rem, 5vw, 4.5rem); } .furniture-categories { display: flex; flex-direction: column; } .furniture-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.2rem, 2.2vw, 2rem); row-gap: clamp(1.2rem, 2vw, 1.6rem); } .furniture-category-grid > .furniture-category-card:nth-child(3n + 2) { transform: translateY(clamp(0.5rem, 1vw, 0.75rem)); } .furniture-category-card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; color: var(--color-text); } .furniture-category-card__media { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--color-surface-strong); } .furniture-category-card__img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); transition: transform 720ms var(--ease-out-soft); } .furniture-category-card:hover .furniture-category-card__img { transform: scale(1.04); } .furniture-category-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.12em; color: var(--color-muted); } .furniture-category-card__copy { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .furniture-category-card__title { font-family: var(--font-heading); font-size: clamp(1.05rem, 1.3vw, 1.25rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; color: var(--color-text); } .furniture-category-card__use { font-size: 0.9rem; line-height: 1.5; color: var(--color-muted); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .furniture-category-card__link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: var(--type-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-deep); transition: transform 320ms var(--ease-out-soft); } .furniture-category-card:hover .furniture-category-card__link, .furniture-category-card:focus-visible .furniture-category-card__link { transform: translateX(0.18rem); } .furniture-category-card__link .button__plus { opacity: 0.7; } @media (max-width: 980px) { .furniture-category-grid { grid-template-columns: repeat(2, 1fr); } .furniture-category-grid > .furniture-category-card:nth-child(3n + 2) { transform: none; } .furniture-category-grid > .furniture-category-card:nth-child(2n) { transform: translateY(clamp(0.9rem, 2vw, 1.4rem)); } } @media (max-width: 680px) { .furniture-category-grid { grid-template-columns: 1fr; row-gap: clamp(2rem, 6vw, 2.8rem); } .furniture-category-grid > .furniture-category-card:nth-child(2n), .furniture-category-grid > .furniture-category-card:nth-child(3n + 2) { transform: none; } } .section--furniture-proof { background: var(--color-sage); padding-block: clamp(5.5rem, 8vw, 8rem); } .section--furniture-proof-bleed { padding-bottom: 0; overflow: hidden; } .furniture-proof__intro { display: flex; flex-direction: column; gap: var(--space-4); } .furniture-proof__header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .furniture-proof__header-row h2 { font-size: var(--type-section-lg); font-weight: 500; letter-spacing: -0.015em; max-width: 20ch; } .furniture-proof__figure { margin: clamp(2rem, 4vw, 3.2rem) 0 0; } .furniture-proof__img { width: 100%; height: clamp(24rem, 78vh, 48rem); object-fit: cover; filter: var(--photo-grade); background: var(--color-surface-strong); } .furniture-proof__caption { display: flex; justify-content: space-between; gap: var(--space-5); margin-top: 0; padding-block: var(--space-4); border-top: 1px solid var(--color-line); font-size: 0.9rem; color: var(--color-muted); } .furniture-proof__caption-note { font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); white-space: nowrap; } .section--furniture-proof .furniture-proof__caption { border-top-color: rgba(28, 24, 19, 0.18); } .section--furniture-proof .furniture-proof__rule { background: rgba(28, 24, 19, 0.18); } .section--furniture-proof .furniture-proof__caption-note { color: var(--color-accent-deep); } .furniture-hero--quote { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); } .furniture-hero--quote .product-configurator__crumbs { margin-bottom: var(--space-4); } .quote-page__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .quote-page__grid--sent { grid-template-columns: minmax(0, 40rem); } .quote-page__summary { position: sticky; top: 6rem; } .quote-summary__items { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 1px solid var(--color-line); } .quote-summary__item { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0.9rem 0; border-bottom: 1px solid var(--color-line); } .quote-summary__item-main { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; } .quote-summary__item-qty { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-muted); padding-top: 0.2rem; } .quote-summary__item-title { font-family: var(--font-heading); font-size: 0.98rem; font-weight: 500; color: var(--color-ink); } .quote-summary__item-options { grid-column: 2; font-size: 0.82rem; line-height: 1.5; color: var(--color-muted); } .quote-summary__item-main > .build-tiles { grid-column: 2; } .quote-summary__item-plan { grid-column: 2; width: 100%; max-width: 320px; margin-top: 8px; border: 1px solid var(--color-line); background: #fff; } .quote-summary__item-price { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 500; white-space: nowrap; color: var(--color-ink); } .quote-summary__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem var(--space-3); padding-top: 1rem; } .quote-summary__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; } .quote-summary__caveat { flex-basis: 100%; margin: 0.3rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--color-muted); } .quote-summary__total-label, .quote-summary__total-note { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .quote-summary__total-value { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; color: var(--color-ink); } .quote-summary__edit { white-space: nowrap; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-deep); text-decoration: none; border-bottom: 1px solid currentColor; } .quote-summary__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; margin-top: var(--space-4); padding: clamp(1.4rem, 3vw, 2rem); background: var(--color-card); } .quote-summary__empty-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; color: var(--color-ink); } .quote-summary__empty-copy { font-size: 0.9rem; line-height: 1.6; color: var(--color-muted); } .quote-summary__empty[hidden], .quote-summary__foot[hidden] { display: none; } .quote-page__form .enquiry-form { margin-top: var(--space-4); } .quote-form__consent-label { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9rem; line-height: 1.55; color: var(--color-text); cursor: pointer; } .quote-form__consent-label input { margin-top: 0.3rem; width: 1rem; height: 1rem; accent-color: var(--color-ink); } .quote-form button[disabled] { opacity: 0.45; cursor: not-allowed; } .quote-form__success { max-width: 40rem; } .quote-form__success p + p { margin-top: var(--space-3); } .quote-form__confirm-items { list-style: none; margin: var(--space-3) 0 0; padding: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; } .quote-form__confirm-items li + li { margin-top: var(--space-1); } @media (max-width: 900px) { .quote-page__grid { grid-template-columns: 1fr; } .quote-page__summary { position: static; } } .quote-page__flow { max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(1.8rem, 3.5vw, 2.6rem); } .quote-page__flow .quote-page__summary { position: static; top: auto; } .quote-delivery { margin-top: clamp(1rem, 2vw, 1.4rem); padding-top: clamp(1rem, 2vw, 1.4rem); border-top: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 0.55rem; } .quote-delivery__select select { width: 100%; } .quote-delivery__estimate { margin: 0; font-size: 0.92rem; color: var(--color-text); } .quote-delivery__method { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--color-muted); } .quote-form__upload-reveal { background: none; border: 0; padding: 0; font-size: 0.9rem; color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .quote-form__bridge { padding-top: 0.4rem; border-top: 1px solid var(--color-line); } .quote-summary__repriced { margin: 0.6rem 0 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--color-accent-deep); } [data-quote-submit].is-sending { opacity: 0.75; cursor: progress; animation: quote-sending 1.6s ease-in-out infinite; } @keyframes quote-sending { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { [data-quote-submit].is-sending { animation: none; } } .quote-form__slow { margin-top: var(--space-2); font-size: 0.85rem; color: var(--color-muted); } .quote-form__success-check { color: var(--color-ink); margin-bottom: var(--space-2); } .quote-form__success-ring { stroke-dasharray: 183; stroke-dashoffset: 183; animation: quote-done-draw 700ms ease-out 150ms forwards; } .quote-form__success-tick { stroke-dasharray: 34; stroke-dashoffset: 34; animation: quote-done-draw 420ms ease-out 700ms forwards; } @media (prefers-reduced-motion: reduce) { .quote-form__success-ring, .quote-form__success-tick { animation: none; stroke-dashoffset: 0; } } @keyframes quote-done-draw { to { stroke-dashoffset: 0; } } .quote-form__success-number { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-deep); margin: var(--space-1) 0 0; } .quote-form__success-call { font-size: 0.85rem; color: var(--color-muted); } .quote-form__success-call a { color: inherit; } .quote-summary__item-note { grid-column: 2; margin-top: 0.25rem; font-size: 0.78rem; line-height: 1.5; color: var(--color-muted); font-style: italic; } .reorder__gone { max-width: 46rem; margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--color-line); } .reorder__gone-list { margin: 0.9rem 0 0; padding: 0; list-style: none; } .reorder__gone-list li { padding: 0.45rem 0; font-family: var(--font-heading); font-size: 1rem; color: var(--color-ink); border-bottom: 1px solid var(--color-line); } .reorder__gone-note { margin-top: 1rem; max-width: 34rem; font-size: 0.88rem; line-height: 1.6; color: var(--color-muted); } .reorder__status { font-size: 0.95rem; color: var(--color-muted); } .reorder__manual { margin-top: 1.6rem; } .reorder-form { max-width: 42rem; } .quote-summary__total-ex, .quote-summary__item-price-ex { display: block; margin-top: 0.15rem; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 500; letter-spacing: 0; color: var(--color-muted); } .section--office-hero { position: relative; padding-top: clamp(2rem, 4vw, 3.2rem); padding-bottom: 0; overflow: visible; } .office-hero__head { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.6vw, 2rem); } .office-hero__title { max-width: 22ch; margin: 0; font-size: clamp(1.875rem, 1.65rem + 1.125vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: normal; text-transform: uppercase; color: var(--color-ink); } .office-hero__hairline { position: relative; height: 1px; margin-top: clamp(1.4rem, 2.6vw, 2.2rem); background: #b8b7b1; } .office-hero__hairline::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(50% - clamp(0.375rem, 0.35rem + 0.125vw, 0.5rem)); background: #2e2e2b; } .office-hero__band { display: flex; align-items: center; justify-content: space-between; gap: clamp(0.75rem, 0.7rem + 0.25vw, 1rem); padding-block: clamp(1.4rem, 2.6vw, 2rem); } .office-hero__services { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.8rem); margin: 0; padding: 0; list-style: none; font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: normal; text-transform: uppercase; color: var(--color-accent-deep); } .office-hero__band-action { flex: none; } .office-hero__support { max-width: 38rem; margin: 0; padding-block: 0 clamp(1.8rem, 3.4vw, 2.8rem); } @media (max-width: 780px) { .office-hero__band { flex-direction: column; align-items: flex-start; gap: clamp(1.2rem, 4vw, 1.8rem); } .office-hero__hairline::after { display: none; } } .section--fitout-stage { position: relative; background: var(--color-ink); color: rgba(255, 254, 250, 0.92); } .fitout-stage__viewport { position: relative; overflow: hidden; } .fitout-stage__frames { margin: 0; padding: 0; list-style: none; } .fitout-stage__frame { position: relative; margin: 0; } .fitout-stage__picture, .fitout-stage__img { display: block; width: 100%; height: auto; } .fitout-stage__img { aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-ink); } .fitout-stage__caption { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.1rem, 2.4vw, 1.6rem) var(--gutter) clamp(1.6rem, 3vw, 2.2rem); } .fitout-stage__count { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(255, 254, 250, 0.7); } .fitout-stage__num { color: var(--color-accent); } .fitout-stage__title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.6rem, 2.6vw, 2.6rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.012em; color: #f0f2ee; } .fitout-stage__text { max-width: 34rem; margin: 0; font-size: clamp(0.98rem, 1.1vw, 1.1rem); line-height: 1.55; color: rgba(255, 254, 250, 0.78); } .fitout-stage__progress, .fitout-stage__hint { display: none; } @media (min-width: 781px) { .fitout-stage.is-pinned .fitout-stage__viewport { height: calc(100svh - var(--fitout-header-h, 4.2rem)); min-height: 32rem; } .fitout-stage.is-pinned .fitout-stage__frames { position: absolute; inset: 0; } .fitout-stage.is-pinned .fitout-stage__frame { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; } .fitout-stage.is-pinned .fitout-stage__frame.is-current { opacity: 1; } .fitout-stage.is-pinned .fitout-stage__picture, .fitout-stage.is-pinned .fitout-stage__img { height: 100%; } .fitout-stage.is-pinned .fitout-stage__img { aspect-ratio: auto; object-position: 50% 55%; } .fitout-stage.is-pinned .fitout-stage__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(2.2rem, 3.6vw, 3.2rem); background: linear-gradient(180deg, rgba(20, 20, 18, 0) 0%, rgba(20, 20, 18, 0.62) 55%, rgba(20, 20, 18, 0.78) 100%); pointer-events: none; } .fitout-stage.is-pinned .fitout-stage__title { font-size: clamp(2rem, 3.6vw, 3.6rem); } .fitout-stage.is-pinned .fitout-stage__progress { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: rgba(255, 254, 250, 0.18); } .fitout-stage.is-pinned .fitout-stage__bar { display: block; height: 100%; background: var(--color-accent); transform-origin: left center; transform: scaleX(0); } .fitout-stage.is-pinned .fitout-stage__hint { display: block; position: absolute; right: var(--gutter); bottom: clamp(2.2rem, 3.6vw, 3.2rem); z-index: 3; margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 254, 250, 0.7); pointer-events: none; transition: opacity 400ms ease; } .fitout-stage.is-pinned .fitout-stage__hint::after { content: ""; display: block; width: 1px; height: 2.2rem; margin: 0.6rem auto 0; background: rgba(255, 254, 250, 0.5); transform-origin: top center; animation: fitout-hint 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite; } } @keyframes fitout-hint { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fitout-stage.is-pinned .fitout-stage__hint::after { animation: none; } } .fitout-process { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .fitout-process__sticky { position: sticky; top: clamp(6rem, 14vh, 9rem); display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.4rem); } .fitout-process__heading { max-width: 14ch; margin: 0; font-size: var(--type-section-lg); font-weight: 500; line-height: 1.05; letter-spacing: -0.018em; color: var(--color-ink); } .fitout-process__support { max-width: 30rem; margin: 0; font-size: var(--type-body-lg); line-height: 1.6; color: var(--color-muted); } .fitout-process__list { --rail-x: clamp(3.4rem, 5vw, 4.6rem); position: relative; margin: 0; padding: 0; list-style: none; } .fitout-process__rail { position: absolute; top: 0.9rem; bottom: 0.9rem; left: var(--rail-x); width: 1px; background: var(--color-line); } .fitout-process__fill { position: absolute; inset: 0; background: var(--color-accent); transform-origin: top center; transform: scaleY(1); } .fitout-process__item { position: relative; display: grid; grid-template-columns: var(--rail-x) minmax(0, 1fr); column-gap: clamp(1.4rem, 2.6vw, 2.4rem); padding: clamp(1.4rem, 2.4vw, 2rem) 0; border-bottom: 1px solid var(--color-line); transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1); } .fitout-process__item:last-child { border-bottom: 0; } .fitout-process__node { position: absolute; top: calc(clamp(1.4rem, 2.4vw, 2rem) + 0.55rem); left: var(--rail-x); width: 0.6rem; height: 0.6rem; border: 1px solid var(--color-accent); background: var(--color-base); transform: translate(-50%, 0) rotate(45deg); transition: background-color 400ms ease, box-shadow 400ms ease; z-index: 1; } .fitout-process__num { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; line-height: 1.7rem; color: var(--color-accent-text); } .fitout-process__body { display: flex; flex-direction: column; gap: 0.55rem; } .fitout-process__title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.3rem, 1.8vw, 1.75rem); font-weight: 500; line-height: 1.15; color: var(--color-ink); transition: color 400ms ease; } .fitout-process__text { max-width: 32rem; margin: 0; font-size: var(--type-body-lg); line-height: 1.55; color: var(--color-muted); } .fitout-process__list.is-scrubbed .fitout-process__fill { transform: scaleY(0); } .fitout-process__list.is-scrubbed .fitout-process__item { opacity: 0.42; } .fitout-process__list.is-scrubbed .fitout-process__item.is-reached { opacity: 1; } .fitout-process__list.is-scrubbed .fitout-process__item.is-reached .fitout-process__node { background: var(--color-accent); box-shadow: 0 0 0 5px rgba(162, 151, 130, 0.18); } .fitout-process__item:hover .fitout-process__title { color: var(--color-accent-deep); } @media (max-width: 900px) { .fitout-process { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); } .fitout-process__sticky { position: static; } .fitout-process__list { --rail-x: 2.6rem; } } .office-cta__trust { display: block; margin-top: 0.6rem; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; } .office-projects__header { margin-bottom: clamp(2.4rem, 4vw, 3.6rem); } .office-projects__header h2 { font-weight: 500; max-width: 22ch; } .office-projects__header-row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .office-projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.4vw, 3.4rem); } .office-project-card { display: flex; flex-direction: column; gap: var(--space-4); } .office-project-card__image { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-surface-strong); } .office-project-card__img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); transition: transform 0.7s var(--ease-premium); } .office-project-card__image:hover .office-project-card__img { transform: scale(1.025); } .office-project-card__placeholder { display: block; width: 100%; height: 100%; background: var(--color-surface-strong); } .office-project-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-line); } .office-project-card__title { font-weight: 500; font-size: clamp(1.2rem, 1.6vw, 1.45rem); margin: 0; } .office-project-card__scope { margin: 0; color: var(--color-muted); font-size: var(--type-body-lg); } .office-project-card__body .text-link { margin-top: var(--space-3); } @media (max-width: 820px) { .office-projects__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .office-projects__grid { grid-template-columns: 1fr; } } .office-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 3vw, 2.4rem); } .office-cta__lead h2 { font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.6rem); max-width: 18ch; } .office-cta__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1.6rem, 4vw, 3.4rem); } .office-cta__note { max-width: 42rem; margin: 0; color: var(--color-muted); font-size: var(--type-body-lg); } .office-cta__actions { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2rem); flex-wrap: wrap; } @media (max-width: 720px) { .office-cta__meta { grid-template-columns: 1fr; align-items: start; } } .prices-band__title { font-size: var(--type-section-md); font-weight: 500; letter-spacing: -0.01em; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); } .prices-table-wrap { overflow-x: auto; border: 1px solid var(--color-line); } .prices-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .prices-table th { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--color-muted); text-align: left; } .prices-table th, .prices-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-line); white-space: nowrap; } .prices-table tbody tr:last-child td { border-bottom: 0; } .prices-table__figure { font-family: var(--font-heading); font-weight: 500; color: var(--color-ink); } .prices-table a { color: var(--color-accent-deep); text-decoration: none; border-bottom: 1px solid currentColor; } .prices-table a:hover, .prices-table a:focus-visible { color: var(--color-ink); } .prices-note { margin-top: 1rem; max-width: 44rem; font-size: 0.88rem; color: var(--color-muted); } .prices-questions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.2rem, 4vw, 3.6rem) clamp(2rem, 4vw, 4rem); max-width: 72rem; } .prices-question__q { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; } .prices-question__a { color: var(--color-muted); line-height: 1.65; } @media (max-width: 780px) { .prices-questions__grid { grid-template-columns: minmax(0, 1fr); } } .prices-table__ex { display: block; margin-top: 0.1rem; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 500; letter-spacing: 0; color: var(--color-muted); } .section--projects-hero { padding-block: clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 2.8vw, 2.4rem); } .projects-hero { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.6rem); } .projects-hero__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.6rem, 4vw, 4.5rem); align-items: end; } .projects-hero__title { max-width: 22ch; margin: 0; font-family: var(--font-heading); font-size: clamp(1.875rem, 1.65rem + 1.125vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: normal; text-transform: uppercase; color: var(--color-ink); } .projects-hero__lead { margin: 0; } .projects-hero__rule { margin-top: clamp(0.4rem, 1vw, 0.8rem); } @media (max-width: 880px) { .projects-hero__row { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; } } .section--projects-list { padding-block: 0; background: var(--color-deep); color: var(--color-warm-white); overflow: hidden; } .projects-editorial { display: flex; flex-direction: column; } .projects-editorial__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } .projects-editorial__row--flip .projects-editorial__text { order: 2; } .projects-editorial__row--flip .projects-editorial__image { order: 1; } .projects-editorial__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.9rem, 1.8vw, 1.4rem); padding: clamp(2.4rem, 5vw, 4.5rem) clamp(1.8rem, 4vw, 4rem); padding-left: max(var(--gutter), clamp(1.8rem, 4vw, 4rem)); } .projects-editorial__row--flip .projects-editorial__text { padding-left: clamp(1.8rem, 4vw, 4rem); padding-right: max(var(--gutter), clamp(1.8rem, 4vw, 4rem)); } .projects-editorial__name { margin: 0; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.2vw, 2.2rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; } .projects-editorial__name a { display: inline-flex; align-items: baseline; gap: 0.6rem; color: var(--color-warm-white); } .projects-editorial__name a:hover, .projects-editorial__name a:focus-visible { color: rgba(255, 254, 250, 0.8); } .projects-editorial__plus { font-family: var(--font-mono); font-size: 0.62em; font-weight: 500; color: rgba(255, 254, 250, 0.7); } .projects-editorial__desc { max-width: 26rem; margin: 0; font-size: var(--type-body-lg); line-height: 1.6; color: rgba(255, 254, 250, 0.82); } .projects-editorial__rule { width: clamp(8rem, 16vw, 12rem); height: 1px; background: rgba(255, 254, 250, 0.28); } .projects-editorial__meta { display: flex; flex-wrap: wrap; gap: 0.5rem clamp(1.2rem, 2.4vw, 2.2rem); font-family: var(--font-mono); font-size: var(--type-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 254, 250, 0.62); } .projects-editorial__image { position: relative; display: block; overflow: hidden; height: clamp(20rem, 46vh, 32rem); background: rgba(255, 254, 250, 0.06); } .projects-editorial__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-grade); transform: scale(1.01); transition: transform 600ms var(--ease-out-soft); } .projects-editorial__image:hover .projects-editorial__img, .projects-editorial__image:focus-visible .projects-editorial__img { transform: scale(1.04); } .projects-editorial__placeholder { position: absolute; inset: 0; background: rgba(255, 254, 250, 0.06); } @media (max-width: 880px) { .projects-editorial__row, .projects-editorial__row--flip { grid-template-columns: 1fr; } .projects-editorial__row--flip .projects-editorial__text { order: 1; padding-left: var(--gutter); padding-right: var(--gutter); } .projects-editorial__row--flip .projects-editorial__image { order: 2; } .projects-editorial__text { padding: clamp(1.8rem, 6vw, 2.6rem) var(--gutter); } .projects-editorial__image { height: auto; aspect-ratio: 16 / 10; } } .projects-archive__nav { padding-block: clamp(1.4rem, 2.5vw, 2.2rem); } .projects-archive__nav .nav-links { display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 254, 250, 0.7); } .projects-archive__nav .nav-links a { color: rgba(255, 254, 250, 0.7); } .projects-archive__nav .nav-links a:hover { color: var(--color-warm-white); } .projects-archive__nav .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .projects-archive__empty { padding-block: var(--space-6); font-family: var(--font-body); color: rgba(255, 254, 250, 0.8); } .quote-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; margin-left: 0.4rem; padding: 0 0.3rem; border-radius: 999px; background: var(--color-accent-deep); color: var(--color-warm-white); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; line-height: 1; letter-spacing: 0; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .quote-badge.is-bumping { transform: scale(1.18); } .quote-fab { position: fixed; right: clamp(1rem, 2vw, 1.6rem); bottom: clamp(1rem, 2vw, 1.6rem); z-index: 90; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-warm-white); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow-soft); transition: background-color 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft); } .quote-fab:hover, .quote-fab:focus-visible { background: var(--color-accent-deep); border-color: var(--color-accent-deep); outline: none; } .has-add-in-view .quote-fab { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms var(--ease-out-soft), visibility 0s 200ms; } @media (min-width: 981px) { .quote-fab { display: none; } } .quote-fab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem; border-radius: 0; background: var(--color-warm-white); color: var(--color-ink); font-family: var(--font-mono); font-size: 0.66rem; } .quote-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; } .quote-drawer__scrim { position: absolute; inset: 0; background: rgba(38, 38, 38, 0.32); opacity: 0; transition: opacity 320ms var(--ease-out-soft); } .quote-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(28rem, 100%); display: flex; flex-direction: column; background: var(--color-base); border-left: 1px solid var(--color-line); transform: translateX(100%); transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); outline: none; } .quote-drawer.is-open { pointer-events: auto; } .quote-drawer.is-open .quote-drawer__scrim { opacity: 1; } .quote-drawer.is-open .quote-drawer__panel { transform: translateX(0); } .quote-drawer__handle { display: none; } .quote-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem) 1rem; border-bottom: 1px solid var(--color-line); } .quote-drawer__title { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink); } .quote-drawer__close { width: 2.4rem; height: 2.4rem; border: 1px solid var(--color-line); background: transparent; font-size: 1.3rem; line-height: 1; color: var(--color-ink); cursor: pointer; transition: border-color 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft); } .quote-drawer__close:hover, .quote-drawer__close:focus-visible { border-color: var(--color-accent-deep); color: var(--color-accent-deep); outline: none; } .quote-drawer__body { flex: 1; overflow-y: auto; padding: 0 clamp(1.2rem, 2vw, 1.6rem); } .quote-drawer__items { list-style: none; margin: 0; padding: 0; } .quote-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: 1.1rem 0; border-bottom: 1px solid var(--color-line); transition: background-color 600ms var(--ease-out-soft), opacity 220ms var(--ease-out-soft), transform 220ms var(--ease-out-soft); } .quote-item.is-highlighted { background: linear-gradient(90deg, rgba(162, 151, 130, 0.16), rgba(162, 151, 130, 0)); } .quote-item.is-leaving { opacity: 0; transform: translateX(0.6rem); } .quote-item__category { margin-bottom: 0.25rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-text); } .quote-item__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 500; line-height: 1.2; } .quote-item__title a { color: var(--color-ink); text-decoration: none; } .quote-item__options { margin-top: 0.35rem; font-size: 0.82rem; line-height: 1.5; color: var(--color-muted); } .quote-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; } .quote-item__price { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 500; color: var(--color-ink); white-space: nowrap; } .quote-item__price-from { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .quote-item__qty { display: inline-flex; border: 1px solid var(--color-line); } .quote-item__qty-btn { width: 2rem; border: 0; background: transparent; color: var(--color-ink); cursor: pointer; } .quote-item__qty-input { width: 2.6rem; border: 0; border-inline: 1px solid var(--color-line); background: transparent; text-align: center; font-size: 0.85rem; color: var(--color-ink); -moz-appearance: textfield; } .quote-item__qty-input::-webkit-outer-spin-button, .quote-item__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quote-item__actions { display: flex; gap: 0.8rem; } .quote-item__link { padding: 0; border: 0; background: transparent; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); cursor: pointer; text-decoration: none; } .quote-item__link:hover { color: var(--color-ink); } .quote-drawer__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: clamp(2.4rem, 5vw, 3.6rem) 0; } .quote-drawer__empty-mark { width: 0.5rem; height: 0.5rem; margin-bottom: 0.4rem; transform: rotate(45deg); background: var(--color-accent); } .quote-drawer__empty-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; color: var(--color-ink); } .quote-drawer__empty-copy { max-width: 22rem; font-size: 0.9rem; line-height: 1.6; color: var(--color-muted); } .quote-drawer__foot { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.1rem clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem); border-top: 1px solid var(--color-line); background: var(--color-base); } .quote-drawer__total { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .quote-drawer__total-label, .quote-drawer__total-note { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .quote-drawer__total-value { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; color: var(--color-ink); } .quote-drawer__cta { justify-content: space-between; width: 100%; } .quote-drawer__reassure { font-size: 0.8rem; color: var(--color-muted); } .quote-drawer__caveat { margin: 0.35rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--color-muted); } .quote-clear { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .quote-clear__link { padding: 0; border: 0; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--color-muted); cursor: pointer; border-bottom: 1px solid transparent; transition: color 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft); } .quote-clear__link:hover, .quote-clear__link:focus-visible { color: var(--color-ink); border-bottom-color: currentColor; } .quote-clear__link[hidden] { display: none; } .quote-clear__link--yes { color: var(--color-accent-deep); border-bottom-color: currentColor; } .quote-clear__link--yes:hover, .quote-clear__link--yes:focus-visible { color: var(--color-ink); } .quote-clear__confirm { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; } .quote-clear__confirm[hidden] { display: none; } .quote-clear__question { color: var(--color-ink); } .quote-clear__sep { color: var(--color-line); } .quote-drawer__foot .quote-clear { margin-top: 0.2rem; } .quote-summary__foot .quote-clear { flex: 0 0 auto; } html.has-quote-drawer { overflow: hidden; } .quote-drawer__empty[hidden], .quote-drawer__foot[hidden], .quote-badge[hidden] { display: none; } @media (max-width: 720px) { .quote-drawer__panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid var(--color-line); transform: translateY(100%); } .quote-drawer.is-open .quote-drawer__panel { transform: translateY(0); } .quote-drawer__handle { display: block; width: 2.4rem; height: 3px; margin: 0.6rem auto 0; border-radius: 999px; background: var(--color-line); } .quote-item { grid-template-columns: 1fr; } .quote-item__side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; } } @media (prefers-reduced-motion: reduce) { .quote-drawer__panel, .quote-drawer__scrim, .quote-item, .quote-badge { transition: none; } } .quote-item__note { margin-top: 0.3rem; font-size: 0.76rem; line-height: 1.5; color: var(--color-muted); font-style: italic; } .quote-drawer__total-ex, .quote-item__price-ex { display: block; margin-top: 0.15rem; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 500; letter-spacing: 0; color: var(--color-muted); } .project-single .project-detail-hero { position: relative; height: 100vh; min-height: 30rem; overflow: hidden; background: var(--color-surface-strong); } .project-single .project-detail-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-grade); } .project-single .project-detail-hero__inner { position: absolute; top: 49%; left: 0; right: 0; } .project-single .project-detail-hero__title { margin: 0; font-family: var(--font-heading); font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 500; line-height: 0.9; letter-spacing: normal; text-transform: uppercase; color: #f0f2ee; } .project-single .project-detail-hero__title--plain { color: var(--color-ink); } .project-single .project-detail-intro__grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: clamp(2.4rem, 5vw, 5.4rem); align-items: start; } .project-single .project-detail-intro__lead { margin: 0; max-width: 26.5rem; font-family: var(--font-heading); font-size: 1.675rem; line-height: 1.3; font-weight: 500; color: var(--color-ink); } .project-single .project-detail-intro__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4.9rem 1.625rem; } .project-single .project-detail-intro__thumb { margin: 0; aspect-ratio: 210 / 173; overflow: hidden; background: var(--color-surface-strong); } .project-single .project-detail-intro__thumb-img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); } .project-single .project-detail-about__grid { display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr); gap: clamp(2.4rem, 5vw, 5.4rem); align-items: start; } .project-single .project-detail-about__label { margin: 0; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-line); font-family: var(--font-mono); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } .project-single .project-detail-about__name { margin: 0; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-line); font-family: var(--font-heading); font-size: 1.675rem; line-height: 1.3; font-weight: 500; color: var(--color-ink); } .project-single .project-detail-about__rows { margin: 0; display: flex; flex-direction: column; } .project-single .project-detail-about__row { display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr); gap: var(--space-4); padding: 1.4rem 0 0.6rem; border-bottom: 1px solid var(--color-line); } .project-single .project-detail-about__row dt { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } .project-single .project-detail-about__row dd { margin: 0; font-size: 1.0875rem; font-weight: 500; color: var(--color-ink); } .project-single .project-detail-about__body { max-width: 51.75rem; margin-top: clamp(2.2rem, 3.6vw, 3.4rem); display: flex; flex-direction: column; gap: var(--space-4); } .project-single .project-detail-about__lead-copy { margin: 0; font-size: 1.0875rem; line-height: 1.6; font-weight: 500; color: var(--color-ink); } .project-single .project-detail-about__copy { margin: 0; font-size: 1.0875rem; line-height: 1.6; color: var(--color-muted); } .project-single .project-detail-about__scope { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .project-single .project-detail-about__scope li { display: flex; align-items: baseline; gap: var(--space-3); font-size: 1.0875rem; line-height: 1.5; color: var(--color-muted); } .project-single .project-detail-about__scope-marker { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); transform: translateY(-1px); } .project-single .project-detail-split__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.4rem); align-items: start; } .project-single .project-detail-split__item { margin: 0; overflow: hidden; background: var(--color-surface-strong); } .project-single .project-detail-split__item--lead { aspect-ratio: 4 / 5; } .project-single .project-detail-split__item--trail { aspect-ratio: 4 / 5; margin-top: 5.125rem; } .project-single .project-detail-split__img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); } .project-single .project-detail-next { padding-top: clamp(3rem, 5vw, 4.5rem); } .project-single .project-detail-next__head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); } .project-single .project-detail-next .work-bands { margin-top: 0; } @media (max-width: 900px) { .project-single .project-detail-intro__grid, .project-single .project-detail-about__grid { grid-template-columns: 1fr; } .project-single .project-detail-intro__thumbs { gap: clamp(1rem, 3vw, 2rem); } .project-single .project-detail-about__label { border-bottom: 0; padding-bottom: 0; } } @media (max-width: 640px) { .project-single .project-detail-hero { height: 72vh; } .project-single .project-detail-intro__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-single .project-detail-split__grid { grid-template-columns: 1fr; } .project-single .project-detail-split__item--trail { margin-top: 0; } .project-single .project-detail-about__row { grid-template-columns: 1fr; gap: 0.4rem; } } .project-single .project-detail-about__related { margin-top: clamp(1.6rem, 2.6vw, 2.2rem); } .project-single .project-detail-about__related-label { margin: 0 0 0.8rem; font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); } .project-single .project-detail-about__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; } .project-single .project-detail-about__chip { display: inline-flex; align-items: center; padding: 0.5rem 0.95rem; border: 1px solid var(--color-line); border-radius: 999px; font-size: 0.86rem; line-height: 1.1; color: var(--color-ink); text-decoration: none; transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease; } .project-single .project-detail-about__chip:hover, .project-single .project-detail-about__chip:focus-visible { border-color: var(--color-accent); color: var(--color-accent-deep); } @media (prefers-reduced-motion: reduce) { .project-single .project-detail-about__chip { transition: none; } }