:root {  --color-primary: #111827; --color-primary-hover: #1f2937; --color-secondary: #6b7280; --color-accent: #3b82f6; --color-background: #ffffff; --color-surface: #f9fafb; --color-surface-alt: #f3f4f6; --color-text: #111827; --color-text-light: #6b7280; --color-text-muted: #9ca3af; --color-border: #e5e7eb; --color-border-light: #f3f4f6; --color-success: #10b981; --color-error: #ef4444; --color-warning: #f59e0b;  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-serif: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif);  --container-max: 1280px; --container-padding: 24px;  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px;  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);  --header-height: 70px; --header-bg: var(--color-background); --header-border: var(--color-border);  --safe-top: env(safe-area-inset-top); --safe-right: env(safe-area-inset-right); --safe-bottom: env(safe-area-inset-bottom); --safe-left: env(safe-area-inset-left); }  [data-theme="theme-2"] { --color-primary: #0f172a;  }  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-bottom: calc(24px + var(--safe-bottom)); } body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-background); line-height: 1.6; overflow-x: hidden; } body.no-scroll { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; }  .site-header { background: var(--header-bg); border-bottom: 1px solid var(--header-border); position: relative; z-index: 100; height: calc(var(--header-height) + var(--safe-top)); padding-top: var(--safe-top); } .site-header.sticky { position: sticky; top: 0; box-shadow: var(--shadow-sm); } .header-row { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); height: var(--header-height); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }  .brand { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); display: flex; align-items: center; transition: opacity var(--transition-fast); } .brand:hover { opacity: 0.8; }  .nav-toggle { display: none; width: 44px; height: 44px; background: transparent; border: none; font-size: 24px; color: var(--color-text); align-items: center; justify-content: center; }  .site-nav { display: flex; justify-content: center; } .nav-root { display: flex; align-items: center; gap: 8px; list-style: none; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; padding: 10px 16px; font-size: 15px; font-weight: 500; color: var(--color-text); border-radius: var(--radius-md); transition: all var(--transition-fast); } .nav-link:hover { background: var(--color-surface); color: var(--color-primary); } .nav-item.is-active > .nav-link { color: var(--color-primary); font-weight: 600; }  .nav-item.has-children > .nav-link::after { content: '▾'; margin-left: 6px; font-size: 12px; transition: transform var(--transition-fast); } .nav-item.has-children:hover > .nav-link::after { transform: rotate(180deg); } .nav-sub { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); list-style: none; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-base); z-index: 1000; } .nav-item.has-children:hover > .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); } .nav-sub .nav-item { border-bottom: 1px solid var(--color-border-light); } .nav-sub .nav-item:last-child { border-bottom: none; } .nav-sub .nav-link { padding: 12px 16px; border-radius: 0; } .nav-sub .nav-item:first-child .nav-link { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .nav-sub .nav-item:last-child .nav-link { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }  .header-icons { display: flex; align-items: center; gap: 4px; } .icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text); transition: all var(--transition-fast); position: relative; } .icon-btn:hover { background: var(--color-surface); }  .cart-badge { position: absolute; top: 8px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--color-error); color: white; font-size: 11px; font-weight: 700; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; line-height: 1; } .cart-badge.hidden { display: none; }  @media (max-width: 900px) { .header-row { grid-template-columns: 44px 1fr auto; gap: 16px; } .nav-toggle { display: flex; } .site-nav { position: fixed; top: 0; left: -100%; width: 85%; max-width: 380px; height: 100vh; height: 100dvh; background: var(--color-background); padding: 20px; padding-top: calc(20px + var(--safe-top)); padding-bottom: calc(20px + var(--safe-bottom)); padding-left: calc(20px + var(--safe-left)); padding-right: calc(20px + var(--safe-right)); overflow-y: auto; transition: left var(--transition-slow); box-shadow: var(--shadow-xl); z-index: 9999; } .site-nav.open { left: 0; } .site-nav::before { content: '×'; position: absolute; top: calc(16px + var(--safe-top)); right: calc(16px + var(--safe-right)); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--color-text-light); cursor: pointer; } .nav-root { flex-direction: column; align-items: stretch; gap: 0; margin-top: 60px; } .nav-link { padding: 14px 16px; border-radius: 0; border-bottom: 1px solid var(--color-border-light); } .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; border: none; box-shadow: none; background: var(--color-surface); max-height: 0; overflow: hidden; transition: max-height var(--transition-base); } .nav-item.mobile-open > .nav-sub { max-height: 500px; } .nav-item.has-children > .nav-link::after { margin-left: auto; } }  .drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity var(--transition-base); z-index: 9998; } .drawer-backdrop:not([hidden]) { opacity: 1; } .drawer { position: fixed; top: 0; right: -100%; width: 90%; max-width: 480px; height: 100vh; height: 100dvh; background: var(--color-background); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; transition: right var(--transition-slow); z-index: 9999; } .drawer.ready { transition: right var(--transition-slow); } .drawer.open { right: 0; } .drawer__head { padding: 20px; padding-top: calc(20px + var(--safe-top)); padding-left: calc(20px + var(--safe-left)); padding-right: calc(20px + var(--safe-right)); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; } .drawer__head strong { font-size: 18px; font-weight: 600; } .drawer__close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 20px; color: var(--color-text-light); transition: all var(--transition-fast); } .drawer__close:hover { background: var(--color-surface); border-color: var(--color-text); color: var(--color-text); } .drawer__body { flex: 1; overflow-y: auto; padding: 20px; padding-bottom: calc(20px + var(--safe-bottom)); padding-left: calc(20px + var(--safe-left)); padding-right: calc(20px + var(--safe-right)); } .drawer__foot { padding: 20px; padding-bottom: calc(20px + var(--safe-bottom)); padding-left: calc(20px + var(--safe-left)); padding-right: calc(20px + var(--safe-right)); border-top: 1px solid var(--color-border); background: var(--color-surface); } .drawer__subtotal { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 600; margin-bottom: 16px; } .drawer__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }  .search-form { display: flex; gap: 12px; } .search-input { flex: 1; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 15px; transition: border-color var(--transition-fast); } .search-input:focus { outline: none; border-color: var(--color-primary); }  .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-size: 15px; font-weight: 600; border-radius: var(--radius-md); border: 1px solid transparent; transition: all var(--transition-fast); cursor: pointer; text-decoration: none; white-space: nowrap; } .btn--primary { background: var(--color-primary); color: white; border-color: var(--color-primary); } .btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn--ghost:hover { background: var(--color-surface); border-color: var(--color-text); } .btn--muted { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .btn--muted:hover { background: var(--color-surface-alt); }  .toast-container { position: fixed; top: calc(20px + var(--safe-top)); right: calc(20px + var(--safe-right)); z-index: 10000; display: flex; flex-direction: column; gap: 12px; max-width: 420px; } .toast { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border: 1px solid var(--color-border); padding: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; opacity: 0; transform: translateX(100%); transition: all var(--transition-base); position: relative; overflow: hidden; } .toast.show { opacity: 1; transform: translateX(0); } .toast.hide { opacity: 0; transform: translateX(100%); } .toast__icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; } .toast.success .toast__icon { background: #d1fae5; color: var(--color-success); } .toast.error .toast__icon { background: #fee2e2; color: var(--color-error); } .toast.warning .toast__icon { background: #fef3c7; color: var(--color-warning); } .toast.info .toast__icon { background: #dbeafe; color: var(--color-accent); } .toast__content { flex: 1; min-width: 0; } .toast__title { font-weight: 600; font-size: 14px; margin-bottom: 2px; color: var(--color-text); } .toast__message { font-size: 13px; color: var(--color-text-light); line-height: 1.4; } .toast__close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--color-text-light); font-size: 18px; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition-fast); } .toast__close:hover { background: var(--color-surface); color: var(--color-text); } .toast__progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--color-border-light); } .toast__progress-bar { height: 100%; background: var(--color-primary); transition-property: width; }  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); padding-left: calc(var(--container-padding) + var(--safe-left)); padding-right: calc(var(--container-padding) + var(--safe-right)); } .muted { color: var(--color-text-muted); } .hidden { display: none !important; }  .qty { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 4px; background: var(--color-surface); } .qty button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 16px; font-weight: 600; color: var(--color-text); transition: all var(--transition-fast); } .qty button:hover { background: var(--color-surface); border-color: var(--color-text); } .qty button:disabled { opacity: 0.4; cursor: not-allowed; } .qty input { width: 50px; text-align: center; border: none; background: transparent; font-size: 15px; font-weight: 600; color: var(--color-text); }  .product-container { max-width: 1280px; margin: 0 auto; padding: 40px 24px; } .breadcrumbs { font-size: 14px; color: var(--color-text-light); margin-bottom: 32px; } .breadcrumbs a { color: var(--color-text-light); transition: color var(--transition-fast); } .breadcrumbs a:hover { color: var(--color-text); } .product-container .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } @media (max-width: 900px) { .product-container .grid { grid-template-columns: 1fr; gap: 40px; } }  .hero { width: 100%; aspect-ratio: 1 / 1; background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 16px; } .hero img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--transition-base); } .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; } .thumbs button { aspect-ratio: 1 / 1; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all var(--transition-fast); padding: 0; } .thumbs button:hover { border-color: var(--color-text); } .thumbs button img { width: 100%; height: 100%; object-fit: cover; }  .title { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.2; } .subtitle { font-size: 18px; color: var(--color-text-light); margin-bottom: 20px; } .price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .price { font-size: 28px; font-weight: 700; color: var(--color-text); } .compare { font-size: 20px; color: var(--color-text-muted); text-decoration: line-through; } .badge-note { font-size: 13px; padding: 4px 12px; background: var(--color-surface); color: var(--color-text-light); border-radius: var(--radius-pill); }  .stock { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; margin-bottom: 24px; } .stock.ok { background: #d1fae5; color: var(--color-success); } .stock.low { background: #fef3c7; color: var(--color-warning); } .stock.oos { background: #fee2e2; color: var(--color-error); }  .field { margin-bottom: 24px; } .field .label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); margin-bottom: 12px; } .choices { display: flex; flex-wrap: wrap; gap: 8px; } .choices button { padding: 10px 20px; background: white; border: 2px solid var(--color-border); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; color: var(--color-text); transition: all var(--transition-fast); } .choices button:hover { border-color: var(--color-text); } .choices button[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: white; }  .buy { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; } .buy .btn { flex: 1; min-width: 160px; } .btn-primary { background: var(--color-primary); color: white; border: 2px solid var(--color-primary); } .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: white; color: var(--color-text); border: 2px solid var(--color-border); } .btn-secondary:hover:not(:disabled) { background: var(--color-surface); border-color: var(--color-text); } .btn-secondary.hidden { display: none; }  .accordion { margin-top: 32px; } .accordion details { border-top: 1px solid var(--color-border); padding: 20px 0; } .accordion summary { font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: color var(--transition-fast); } .accordion summary::-webkit-details-marker { display: none; } .accordion summary::after { content: '+'; font-size: 20px; font-weight: 400; transition: transform var(--transition-fast); } .accordion details[open] summary::after { transform: rotate(45deg); } .accordion summary:hover { color: var(--color-primary); } .accordion details > div { margin-top: 16px; color: var(--color-text-light); line-height: 1.7; }  @media (max-width: 768px) { :root { --header-height: 60px; --container-padding: 16px; } .title { font-size: 24px; } .price { font-size: 24px; } .buy { flex-direction: column; } .buy .btn { width: 100%; } .drawer { max-width: 100%; width: 100%; } .toast-container { left: calc(16px + var(--safe-left)); right: calc(16px + var(--safe-right)); max-width: none; } }   .toast-container { position: fixed; top: calc(var(--header-height) + var(--safe-top) + 20px);  right: calc(20px + var(--safe-right)); z-index: 9900;  display: flex; flex-direction: column; gap: 12px; max-width: 400px; pointer-events: none; }  .toast { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.08); padding: 16px; display: flex; align-items: flex-start; gap: 12px; width: 360px; max-width: calc(100vw - 40px); transform: translateX(120%); opacity: 0; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: auto; position: relative; overflow: hidden; } .toast.show { transform: translateX(0); opacity: 1; } .toast.hide { transform: translateX(120%); opacity: 0; }  .toast__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; font-weight: 600; } .toast.success .toast__icon { background: linear-gradient(135deg, #34c759 0%, #30d158 100%); color: white; box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3); } .toast.error .toast__icon { background: linear-gradient(135deg, #ff3b30 0%, #ff453a 100%); color: white; box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3); } .toast.warning .toast__icon { background: linear-gradient(135deg, #ff9500 0%, #ff9f0a 100%); color: white; box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3); } .toast.info .toast__icon { background: linear-gradient(135deg, #007aff 0%, #0a84ff 100%); color: white; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); }  .toast__content { flex: 1; min-width: 0; } .toast__title { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--color-text); line-height: 1.3; } .toast__message { font-size: 13px; color: var(--color-text-light); line-height: 1.4; word-wrap: break-word; }  .toast__close { width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.05); border: none; color: var(--color-text-light); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; margin-top: 9px; } .toast__close:hover { background: rgba(0, 0, 0, 0.1); color: var(--color-text); }  .toast__progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(0, 0, 0, 0.08); overflow: hidden; } .toast__progress-bar { height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)); width: 100%; transition: width linear; } .toast.success .toast__progress-bar { background: linear-gradient(90deg, #34c759, #30d158); } .toast.error .toast__progress-bar { background: linear-gradient(90deg, #ff3b30, #ff453a); } .toast.warning .toast__progress-bar { background: linear-gradient(90deg, #ff9500, #ff9f0a); } .toast.info .toast__progress-bar { background: linear-gradient(90deg, #007aff, #0a84ff); }  @media (max-width: 768px) { .toast-container { top: calc(var(--header-height) + 10px);  right: 10px; left: 10px; max-width: none; } .toast { width: auto; max-width: none; border-radius: 16px; padding: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-150%); } .toast.show { transform: translateY(0); } .toast.hide { transform: translateY(-150%); } .toast__title { font-size: 14px; } .toast__message { font-size: 12px; } .toast__icon { width: 36px; height: 36px; font-size: 18px; } }  @media (prefers-color-scheme: dark) { .toast { background: rgba(30, 30, 30, 0.95); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .toast__title { color: #fff; } .toast__message { color: #aaa; } .toast__close { background: rgba(255, 255, 255, 0.1); color: #aaa; } .toast__close:hover { background: rgba(255, 255, 255, 0.2); color: #fff; } }  @media (prefers-reduced-motion: reduce) { .toast, .toast__close { transition: none !important; } }   .cart-item { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--color-border-light); } .cart-item:last-child { border-bottom: none; } .cart-item__image { width: 70px; height: 70px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); } .cart-item__image img { width: 100%; height: 100%; object-fit: cover; } .cart-item__details { display: flex; flex-direction: column; gap: 6px; } .cart-item__title { font-weight: 600; font-size: 14px; color: var(--color-text); line-height: 1.3; margin: 0; } .cart-item__variant { font-size: 13px; color: var(--color-text-light); } .cart-item__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .cart-item__price { font-weight: 600; font-size: 15px; color: var(--color-text); }  .cart-qty { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px; background: var(--color-surface); } .cart-qty button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: white; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--color-text); cursor: pointer; transition: all var(--transition-fast); } .cart-qty button:hover:not(:disabled) { background: var(--color-surface-alt); } .cart-qty button:disabled { opacity: 0.4; cursor: not-allowed; } .cart-qty span { min-width: 32px; text-align: center; font-size: 14px; font-weight: 600; color: var(--color-text); }  .cart-item__remove { background: transparent; border: none; color: var(--color-text-muted); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px 8px; transition: color var(--transition-fast); } .cart-item__remove:hover { color: var(--color-error); }  .cart-summary { margin-bottom: 16px; } .cart-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 600; margin-bottom: 8px; } .cart-note { text-align: center; color: var(--color-text-light); font-size: 13px; margin: 0; }  .cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cart-actions .btn { text-align: center; padding: 12px 16px; }  .cart-empty { text-align: center; padding: 40px 20px; color: var(--color-text-muted); } .cart-empty svg { width: 48px; height: 48px; margin: 0 auto 16px; opacity: 0.3; } .cart-empty p { margin: 0 0 20px; font-size: 15px; } .cart-empty .btn { display: inline-block; }  .cart-loading { text-align: center; padding: 40px 20px; color: var(--color-text-muted); } .cart-loading::after { content: ''; display: block; width: 24px; height: 24px; margin: 20px auto 0; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }  @media (max-width: 768px) { .cart-item { grid-template-columns: 60px 1fr; gap: 10px; padding: 12px 0; } .cart-item__image { width: 60px; height: 60px; } .cart-item__title { font-size: 13px; } .cart-item__variant { font-size: 12px; } .cart-qty { gap: 2px; } .cart-qty button { width: 26px; height: 26px; font-size: 13px; } .cart-qty span { min-width: 28px; font-size: 13px; } } 
  .section { position: relative; width: 100%; } .section-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }  .section-heading { font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 12px; color: var(--color-text); } .section-subheading { font-size: clamp(16px, 2vw, 18px); font-weight: 400; line-height: 1.6; color: var(--color-text-light); margin: 0 0 40px; max-width: 700px; } .section-header { text-align: center; margin-bottom: 48px; } .section-header--left { text-align: left; margin-bottom: 40px; }  .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); white-space: nowrap; gap: 8px; } .btn--primary { background: var(--color-text); color: var(--color-background); } .btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--secondary { background: transparent; color: var(--color-text); border: 2px solid var(--color-text); } .btn--secondary:hover { background: var(--color-text); color: var(--color-background); } .btn--outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .btn--outline:hover { background: var(--color-surface); border-color: var(--color-text); }  .product-card { text-decoration: none; color: inherit; display: block; transition: all var(--transition-base); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-background); border: 1px solid var(--color-border); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); } .product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); border-color: var(--color-border-hover, #d1d5db); } .product-card__image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-lg); clip-path: inset(0 round var(--radius-lg)); } .product-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); } .product-card:hover .product-card__image img { transform: scale(1.05); } .product-card__badge { position: absolute; top: 12px; right: 12px; padding: 6px 12px; background: var(--color-error); color: white; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--radius-pill); z-index: 2; } .product-card__info { padding: 20px 16px; background: var(--color-background); } .product-card__title { font-size: 16px; font-weight: 500; margin: 0 0 8px; color: var(--color-text); line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__price { display: flex; align-items: baseline; gap: 8px; font-weight: 600; } .product-card__price-current { font-size: 18px; color: var(--color-text); } .product-card__price-compare { font-size: 14px; color: var(--color-text-muted); text-decoration: line-through; } .product-card__price-sale { color: var(--color-error); }  .grid { display: grid; gap: 32px; } @media (max-width: 1024px) { .grid { gap: 24px; } } @media (max-width: 768px) { .grid { gap: 20px; } } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); }  @media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(3, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--2 { grid-template-columns: 1fr; } } @media (max-width: 480px) { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } }  .section-padding { padding: 80px 0; } .section-padding--sm { padding: 40px 0; } .section-padding--lg { padding: 120px 0; } @media (max-width: 768px) { .section-padding { padding: 42px 0; } .section-padding--sm { padding: 28px 0; } .section-padding--lg { padding: 56px 0; } .section-header { margin-bottom: 28px; } .section-header--left { margin-bottom: 24px; } .section-subheading { margin: 0 0 24px; } .product-card__info { padding: 14px 12px; } }  @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.6s ease-out; }  .section-loading { min-height: 400px; display: flex; align-items: center; justify-content: center; } .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-text); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } 
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Roboto-Variable-Latin.woff2") format("woff2"); } @font-face { font-family: "Hind"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/Hind-400-Latin.woff2") format("woff2"); } @font-face { font-family: "Hind"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/Hind-500-Latin.woff2") format("woff2"); } @font-face { font-family: "Hind"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/Hind-600-Latin.woff2") format("woff2"); } @font-face { font-family: "Hind"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/Hind-700-Latin.woff2") format("woff2"); } :root { --ui-font-body: "Hind", "Helvetica Neue", Helvetica, Arial, sans-serif; --ui-font-display: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; --ui-font-display-weight: 600; --ui-font-mono: "SFMono-Regular", Menlo, Consolas, monospace; --ui-color-paper: #f7f4ef; --ui-color-ivory: #fbf9f5; --ui-color-white: #ffffff; --ui-color-ink: #15181d; --ui-color-ink-soft: #262c34; --ui-color-muted: #66717d; --ui-color-line: #d9d2c8; --ui-color-line-strong: #bfb5a8; --ui-color-accent: #1d324d; --ui-color-accent-soft: #edf2f7; --ui-color-success: #2d6a4f; --ui-color-warning: #946200; --ui-color-danger: #7f1f1f; --ui-step--2: clamp(0.72rem, 0.7rem + 0.12vw, 0.8rem); --ui-step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem); --ui-step-0: clamp(0.96rem, 0.92rem + 0.25vw, 1.08rem); --ui-step-1: clamp(1.14rem, 1.02rem + 0.48vw, 1.34rem); --ui-step-2: clamp(1.38rem, 1.16rem + 0.8vw, 1.85rem); --ui-step-3: clamp(1.7rem, 1.3rem + 1.25vw, 2.55rem); --ui-step-4: clamp(2rem, 1.45rem + 2vw, 3.35rem); --ui-space-1: 0.25rem; --ui-space-2: 0.5rem; --ui-space-3: 0.75rem; --ui-space-4: 1rem; --ui-space-5: 1.25rem; --ui-space-6: 1.5rem; --ui-space-8: 2rem; --ui-space-10: 2.5rem; --ui-space-12: 3rem; --ui-space-14: 3.5rem; --ui-space-16: 4rem; --ui-radius-sm: 0.35rem; --ui-radius-md: 0.6rem; --ui-radius-lg: 0.9rem; --ui-radius-pill: 999px; --ui-border-hairline: 1px solid var(--ui-color-line); --ui-shadow-subtle: 0 8px 30px rgba(23, 26, 31, 0.05); --ui-ease: cubic-bezier(0.22, 1, 0.36, 1); --ui-time-fast: 150ms; --ui-time-base: 200ms; --ui-time-slow: 250ms; --ui-page-pad: clamp(1rem, 2vw, 2rem); --ui-container-max: 78rem; --ui-section-pad: clamp(2.5rem, 7vw, 5.5rem); --ui-z-overlay: 130; --ui-z-header: 150; --ui-z-search: 155; --ui-z-drawer: 170; --ui-overlay-top: 0px; --ui-search-max-height: calc(100dvh - 4.35rem); } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; } a, button, summary, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], .emm-btn, .emm-icon-btn, .emm-header__menu-btn, .emm-drawer__close { touch-action: manipulation; } .emm-skip-link { position: absolute; left: var(--ui-space-4); top: -100%; z-index: 10000; background: var(--ui-color-ink); color: var(--ui-color-white); padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--ui-radius-sm); text-decoration: none; } .emm-skip-link:focus-visible { top: var(--ui-space-4); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .emm-section { background: var(--ui-section-bg, var(--ui-color-ivory)); padding-block: var(--ui-section-pad, var(--ui-section-pad)); } .emm-section--page { padding-top: clamp(1rem, 2.2vw, 1.8rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); } .emm-section[data-emm-tone="paper"] { --ui-section-bg: var(--ui-color-paper); } .emm-section[data-emm-tone="white"] { --ui-section-bg: var(--ui-color-white); } .emm-section[data-emm-tone="ink"] { --ui-section-bg: var(--ui-color-ink); color: #f3eee6; } .emm-section[data-emm-tone="ink"] .emm-kicker, .emm-section[data-emm-tone="ink"] .emm-copy, .emm-section[data-emm-tone="ink"] .emm-muted, .emm-section[data-emm-tone="ink"] .emm-link { color: rgba(243, 238, 230, 0.78); } .emm-section[data-emm-tone="ink"] .emm-title, .emm-section[data-emm-tone="ink"] .emm-price { color: #f7f3eb; } .emm-section[data-emm-tone="ink"] .emm-card, .emm-section[data-emm-tone="ink"] .emm-btn--secondary, .emm-section[data-emm-tone="ink"] .emm-btn--ghost, .emm-section[data-emm-tone="ink"] .emm-faq details { border-color: rgba(243, 238, 230, 0.28); background: #151516; } .emm-section[data-emm-tone="ink"] .emm-field { border-color: rgba(243, 238, 230, 0.28); background: #1F1F1F; } .emm-section[data-emm-tone="ink"] .emm-btn--primary { background: #f7f2e8; color: #171a1f; } .emm-container { width: min(var(--ui-container-max), calc(100% - (var(--ui-page-pad) * 2))); margin-inline: auto; } .emm-stack { display: grid; gap: var(--ui-space-4); } .emm-stack--sm { gap: var(--ui-space-2); } .emm-stack--lg { gap: var(--ui-space-8); } .emm-page-shell { display: grid; gap: var(--ui-space-8); } .emm-page-shell--tight { gap: var(--ui-space-6); } .emm-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-4); } .emm-hairline { border-top: var(--ui-border-hairline); } .emm-kicker { font-size: var(--ui-step--2); font-weight: 600; text-transform: none; letter-spacing: 0.02em; color: var(--ui-color-muted); } .emm-title { margin: 0; font-family: var(--ui-font-display); font-weight: var(--ui-font-display-weight, 600); font-size: var(--ui-step-3); line-height: 1.1; letter-spacing: -0.02em; color: var(--ui-color-ink); text-wrap: balance; } .emm-title--display { font-family: var(--ui-font-display); letter-spacing: -0.01em; line-height: 1.02; }  .emm-section:not(.emm-hero) .emm-title, .emm-collection-card__title, .emm-value__title, .emm-site-footer__title { font-family: var(--ui-font-display); letter-spacing: -0.01em; } .emm-title--sm { font-size: var(--ui-step-2); } .emm-copy { margin: 0; max-width: 56ch; color: var(--ui-color-ink-soft); font-size: var(--ui-step-0); line-height: 1.62; } .emm-muted { color: var(--ui-color-muted); font-size: var(--ui-step--1); } .emm-link { color: var(--ui-color-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ui-color-ink) 40%, transparent); transition: border-color var(--ui-time-base) var(--ui-ease), color var(--ui-time-base) var(--ui-ease); } .emm-link:hover { color: var(--ui-color-accent); border-color: currentColor; } .emm-grid { display: grid; gap: var(--ui-space-6); } .emm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .emm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .emm-card { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); background: #151516; } .emm-btn { --ui-btn-bg: var(--ui-color-ink); --ui-btn-fg: var(--ui-color-white); --ui-btn-border: var(--ui-color-ink); appearance: none; border: 1px solid var(--ui-btn-border); background: var(--ui-btn-bg); color: var(--ui-btn-fg); font-size: var(--ui-step--1); font-weight: 600; letter-spacing: 0.01em; min-height: 2.75rem; padding: 0.65rem 1.25rem; border-radius: var(--ui-radius-pill); display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; text-decoration: none; cursor: pointer; transition: transform var(--ui-time-base) var(--ui-ease), background var(--ui-time-base) var(--ui-ease), border-color var(--ui-time-base) var(--ui-ease), color var(--ui-time-base) var(--ui-ease); } .emm-btn:hover { transform: translateY(-1px); } .emm-btn:active { transform: translateY(0); } .emm-btn--secondary { --ui-btn-bg: transparent; --ui-btn-fg: var(--ui-color-ink); --ui-btn-border: var(--ui-color-line-strong); } .emm-btn--secondary:hover { --ui-btn-bg: var(--ui-color-paper); } .emm-btn--ghost { --ui-btn-bg: transparent; --ui-btn-fg: var(--ui-color-ink); --ui-btn-border: transparent; border-radius: 0; padding-inline: 0; min-height: auto; border-bottom: 1px solid currentColor; } .emm-btn--ghost:hover { color: var(--ui-color-accent); } .emm-field { appearance: none; width: 100%; min-height: 2.9rem; border: var(--ui-border-hairline); border-radius: var(--ui-radius-pill); background: #1F1F1F; color: var(--ui-color-ink); font-size: var(--ui-step-0); padding: 0.65rem 1rem; line-height: 1.4; } textarea.emm-field { min-height: 7.5rem; border-radius: var(--ui-radius-md); resize: vertical; padding: 0.9rem 1rem; } .emm-field::placeholder { color: color-mix(in srgb, var(--ui-color-muted) 80%, white); } .emm-field:focus-visible, .emm-btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--ui-color-accent) 60%, white); outline-offset: 2px; } .emm-announcement { font-size: var(--ui-step--1); line-height: 1.45; border-bottom: var(--ui-border-hairline); } .emm-announcement__inner { min-height: 2.4rem; display: flex; align-items: center; justify-content: center; gap: var(--ui-space-3); position: relative; padding-block: 0.4rem; } .emm-announcement__content { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem var(--ui-space-3); text-align: center; } .emm-announcement__link { font-weight: 700; text-underline-offset: 0.18em; } .emm-announcement__dismiss { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: currentColor; font-size: 1rem; line-height: 1; width: 2rem; height: 2rem; } @media (max-width: 40rem) { .emm-announcement__inner { padding-inline: 2.4rem; } .emm-announcement__content { gap: 0.2rem var(--ui-space-2); } } .emm-body { margin: 0; font-family: var(--ui-font-body); color: var(--ui-color-ink); background: var(--ui-color-ivory); } .emm-header { position: sticky; top: 0; z-index: var(--ui-z-header); background: color-mix(in srgb, var(--ui-color-ivory) 92%, #ffffff); border-bottom: var(--ui-border-hairline); backdrop-filter: saturate(140%) blur(10px); } .emm-header__announcement-slot { border-bottom: var(--ui-border-hairline); } .emm-header__bar { position: relative; } .emm-header__inner { min-height: 4.9rem; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--ui-space-4); transition: min-height var(--ui-time-base) var(--ui-ease); } .emm-header.is-compact .emm-header__inner { min-height: 4.2rem; } .emm-header__left, .emm-header__right { display: flex; align-items: center; gap: var(--ui-space-2); } .emm-header__left { min-width: 0; } .emm-header__right { justify-self: end; } .emm-header__wordmark { justify-self: center; text-decoration: none; color: var(--ui-color-ink); font-family: var(--ui-font-display); font-size: clamp(1.95rem, 1.45rem + 1.65vw, 2.55rem); line-height: 1; letter-spacing: -0.02em; } .emm-header__wordmark img { display: block; width: auto; height: clamp(1.75rem, 2vw, 2.55rem); } .emm-header__menu-btn, .emm-icon-btn, .emm-search-panel__close, .emm-drawer__close { min-width: 2.75rem; min-height: 2.75rem; } .emm-header__menu-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--ui-color-ink); cursor: pointer; padding: 0; transition: background var(--ui-time-base) var(--ui-ease), border-color var(--ui-time-base) var(--ui-ease); } .emm-header__menu-btn:hover { border-color: var(--ui-color-line); background: color-mix(in srgb, var(--ui-color-paper) 86%, transparent); } .emm-header__menu-btn svg, .emm-search-panel__close svg, .emm-drawer__close svg { width: 1.1rem; height: 1.1rem; display: block; flex: none; pointer-events: none; } .emm-header__menu-btn svg { width: 1.2rem; height: 1.2rem; } .emm-nav--desktop { display: none; } .emm-nav__list { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: clamp(0.75rem, 0.45rem + 0.8vw, 1.45rem); } .emm-nav__item { position: relative; } .emm-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: color-mix(in srgb, var(--ui-color-ink) 88%, white); font-size: var(--ui-step--2); font-weight: 600; letter-spacing: 0.02em; text-transform: none; } .emm-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.56rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--ui-time-base) var(--ui-ease); } .emm-nav__link:hover::after, .emm-nav__link.is-active::after { transform: scaleX(1); } .emm-nav__link.is-active { color: var(--ui-color-ink); } .emm-nav__item--has-submenu { display: inline-flex; align-items: center; gap: 0.18rem; position: relative; }  .emm-nav__item--has-submenu::after { content: ""; position: absolute; left: -0.75rem; right: -0.75rem; top: 100%; height: 2.1rem; } .emm-nav__submenu-toggle { min-width: auto; min-height: 2rem; border: none; background: transparent; color: color-mix(in srgb, var(--ui-color-ink) 78%, white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.08rem; transition: color var(--ui-time-base) var(--ui-ease), transform var(--ui-time-base) var(--ui-ease); } .emm-nav__submenu-toggle svg { transition: transform var(--ui-time-base) var(--ui-ease); } .emm-nav__submenu-toggle:hover, .emm-nav__item--has-submenu.is-open .emm-nav__submenu-toggle { color: var(--ui-color-ink); } .emm-nav__item--has-submenu.is-open .emm-nav__submenu-toggle svg { transform: rotate(180deg); } .emm-nav__submenu { position: fixed; top: var(--ui-header-bottom, 4.6rem); left: 0; right: 0; border-top: var(--ui-border-hairline); border-bottom: var(--ui-border-hairline); background: color-mix(in srgb, var(--ui-color-ivory) 92%, white); box-shadow: 0 14px 30px rgba(17, 21, 27, 0.08); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity var(--ui-time-base) var(--ui-ease), transform var(--ui-time-base) var(--ui-ease), visibility var(--ui-time-base) var(--ui-ease); z-index: calc(var(--ui-z-header) - 1); } .emm-nav__submenu--mega { padding: 0; } .emm-nav__item--has-submenu:hover .emm-nav__submenu, .emm-nav__item--has-submenu:focus-within .emm-nav__submenu, .emm-nav__item--has-submenu.is-open .emm-nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .emm-nav__mega-inner { padding-block: var(--ui-space-6); display: grid; grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr); gap: var(--ui-space-7, 1.75rem); align-items: start; } .emm-nav__mega-rail { border-right: var(--ui-border-hairline); padding-right: var(--ui-space-6); } .emm-nav__mega-kicker { margin: 0 0 var(--ui-space-4); font-size: var(--ui-step--2); color: var(--ui-color-muted); font-weight: 600; } .emm-nav__mega-rail-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; } .emm-nav__mega-rail-link { display: inline-flex; align-items: center; min-height: 2rem; width: 100%; border: none; border-radius: 0; padding: 0.2rem 0; text-decoration: none; color: var(--ui-color-ink-soft); font-size: var(--ui-step--1); transition: color var(--ui-time-base) var(--ui-ease), transform var(--ui-time-base) var(--ui-ease); } .emm-nav__mega-rail-link:hover, .emm-nav__mega-rail-link:focus-visible, .emm-nav__mega-rail-link.is-active { color: var(--ui-color-ink); transform: translateX(2px); } .emm-nav__mega-collections-link { display: inline-flex; align-items: center; margin-top: var(--ui-space-4); padding-top: var(--ui-space-3); border-top: var(--ui-border-hairline); text-decoration: none; font-size: var(--ui-step--2); font-weight: 600; color: var(--ui-color-ink-soft); } .emm-nav__mega-collections-link:hover, .emm-nav__mega-collections-link:focus-visible { color: var(--ui-color-ink); } .emm-nav__mega-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-6); } .emm-nav__mega-group { min-width: 0; } .emm-nav__mega-title { margin: 0 0 var(--ui-space-3); } .emm-nav__mega-title-link { color: var(--ui-color-ink); text-decoration: none; font-family: var(--ui-font-display); font-size: var(--ui-step-0); letter-spacing: -0.01em; } .emm-nav__mega-title-link:hover { color: var(--ui-color-accent); } .emm-nav__mega-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; } .emm-nav__submenu-link { display: inline-flex; align-items: center; min-height: 1.95rem; border-radius: 0; padding: 0.1rem 0; text-decoration: none; color: var(--ui-color-ink-soft); font-size: var(--ui-step--1); line-height: 1.2; } .emm-nav__submenu-link:hover, .emm-nav__submenu-link:focus-visible { color: var(--ui-color-ink); } .emm-nav__submenu-link.is-active { color: var(--ui-color-ink); font-weight: 600; } .emm-nav__mega-recent { min-width: 0; border-left: var(--ui-border-hairline); padding-left: var(--ui-space-6); } .emm-nav__mega-recent--wide { width: 100%; } .emm-nav__mega-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 var(--ui-space-3); } .emm-nav__mega-recent-link { color: var(--ui-color-ink-soft); text-decoration: none; font-size: var(--ui-step--2); font-weight: 600; } .emm-nav__mega-recent-link:hover, .emm-nav__mega-recent-link:focus-visible { color: var(--ui-color-ink); } .emm-nav__mega-recent-grid { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: nowrap; gap: 0.75rem; overflow: hidden; } .emm-nav__mega-recent-item { flex: 0 1 clamp(11rem, 16vw, 14rem); min-width: 11rem; } .emm-nav__mega-recent-card { display: grid; gap: 0.45rem; text-decoration: none; color: inherit; } .emm-nav__mega-recent-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--ui-color-paper) 55%, transparent); } .emm-nav__mega-recent-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .emm-nav__mega-recent-copy { min-width: 0; display: grid; gap: 0.1rem; } .emm-nav__mega-recent-copy strong { font-size: 0.9rem; font-weight: 700; color: var(--ui-color-ink); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .emm-nav__mega-recent-copy em { font-style: normal; font-size: 0.7rem; color: var(--ui-color-ink-soft); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 78rem) { .emm-nav__mega-inner { grid-template-columns: minmax(10rem, 12rem) minmax(0, 1fr); gap: var(--ui-space-6); } .emm-nav__mega-content { grid-template-columns: minmax(0, 1fr); } .emm-nav__mega-recent { display: none; } } .emm-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 50%; color: var(--ui-color-ink); text-decoration: none; background: transparent; cursor: pointer; transition: background var(--ui-time-base) var(--ui-ease), border-color var(--ui-time-base) var(--ui-ease), color var(--ui-time-base) var(--ui-ease); } .emm-icon-btn:hover { border-color: var(--ui-color-line); background: color-mix(in srgb, var(--ui-color-paper) 88%, transparent); } .emm-icon-btn.is-active { border-color: var(--ui-color-line); background: color-mix(in srgb, var(--ui-color-paper) 86%, white); } .emm-bag-count { position: absolute; top: 0.4rem; right: 0.33rem; min-width: 1rem; height: 1rem; padding-inline: 0.22rem; border-radius: var(--ui-radius-pill); border: 1px solid var(--ui-color-line-strong); background: #1F1F1F; color: var(--ui-color-ink-soft); font-size: 0.62rem; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .emm-search-panel { position: absolute; inset-inline: 0; top: 100%; z-index: var(--ui-z-search); border-top: var(--ui-border-hairline); border-bottom: var(--ui-border-hairline); background: color-mix(in srgb, var(--ui-color-ivory) 92%, #ffffff); box-shadow: 0 14px 30px rgba(17, 21, 27, 0.08); max-height: var(--ui-search-max-height); overflow: visible; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 260ms linear; } .emm-search-panel[hidden] { display: none !important; } .emm-search-panel__inner { padding-block: var(--ui-space-5) var(--ui-space-6); display: grid; gap: var(--ui-space-5); opacity: 0; transform: translate3d(0, -10px, 0) scale(0.985); pointer-events: auto; transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform, backdrop-filter; backface-visibility: hidden; } .emm-search-panel.is-open { opacity: 1; visibility: visible; } .emm-search-panel.is-open .emm-search-panel__inner { opacity: 1; transform: translateY(0) scale(1); } .emm-search-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); } .emm-search-panel__close { appearance: none; border: var(--ui-border-hairline); border-radius: var(--ui-radius-pill); width: 2.6rem; height: 2.6rem; padding: 0; background: #1F1F1F; color: var(--ui-color-ink); font-size: 1.1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .emm-search-form { display: grid; grid-template-columns: 1fr auto; gap: var(--ui-space-3); } .emm-search-panel__predictive { display: grid; gap: var(--ui-space-2); } .emm-search-panel__predictive[hidden] { display: none !important; } .emm-search-suggestions { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ui-space-2); } .emm-search-suggestions li { border: var(--ui-border-hairline); border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--ui-color-paper) 70%, white); } .emm-search-suggestions a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.68rem; text-decoration: none; color: var(--ui-color-ink); padding: 0.62rem 0.82rem; } .emm-search-suggestions a.is-no-thumb { grid-template-columns: minmax(0, 1fr); } .emm-search-suggestion__thumb { width: 2.9rem; height: 2.9rem; border-radius: 0.45rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ui-color-line) 90%, white); background: color-mix(in srgb, var(--ui-color-paper) 75%, white); } .emm-search-suggestion__thumb img { width: 100%; height: 100%; object-fit: cover; } .emm-search-suggestion__content { display: grid; gap: 0.12rem; min-width: 0; } .emm-search-suggestion__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .emm-search-suggestion__title { font-size: var(--ui-step--1); font-weight: 600; line-height: 1.3; color: var(--ui-color-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emm-search-suggestion__type { display: inline-flex; align-items: center; min-height: 1.4rem; padding: 0.06rem 0.42rem; border-radius: var(--ui-radius-pill); border: 1px solid color-mix(in srgb, var(--ui-color-line-strong) 86%, white); background: color-mix(in srgb, var(--ui-color-paper) 86%, white); color: var(--ui-color-muted); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; } .emm-search-suggestion__meta { color: var(--ui-color-muted); font-size: var(--ui-step--2); } .emm-search-suggestion__price { color: var(--ui-color-ink); font-size: var(--ui-step--2); font-weight: 600; } .emm-search-suggestions li.is-active, .emm-search-suggestions li:hover { border-color: var(--ui-color-line-strong); background: color-mix(in srgb, var(--ui-color-paper) 88%, white); } .emm-search-panel__quick { display: grid; gap: var(--ui-space-2); } .emm-search-panel__links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-4); } .emm-search-panel__links a { text-decoration: none; color: var(--ui-color-ink-soft); font-size: var(--ui-step--1); border-bottom: 1px solid transparent; } .emm-search-panel__links a:hover { color: var(--ui-color-ink); border-bottom-color: currentColor; } .emm-account-panel { position: absolute; inset-inline: 0; top: 100%; z-index: var(--ui-z-search); border-top: var(--ui-border-hairline); border-bottom: var(--ui-border-hairline); background: color-mix(in srgb, var(--ui-color-ivory) 92%, #ffffff); box-shadow: 0 14px 30px rgba(17, 21, 27, 0.08); max-height: var(--ui-account-max-height, calc(100dvh - 4.35rem)); overflow: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity var(--ui-time-base) var(--ui-ease), transform var(--ui-time-base) var(--ui-ease), visibility var(--ui-time-base) var(--ui-ease); } .emm-account-panel[hidden] { display: none !important; } .emm-account-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .emm-account-panel__inner { padding-block: var(--ui-space-5) var(--ui-space-6); display: grid; gap: var(--ui-space-4); opacity: 0; transform: translateY(-8px) scale(0.99); transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .emm-account-panel.is-open .emm-account-panel__inner { opacity: 1; transform: translateY(0) scale(1); } .emm-account-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); } .emm-account-panel__close { appearance: none; border: var(--ui-border-hairline); border-radius: var(--ui-radius-pill); padding-inline: 1rem; min-height: 2.6rem; background: #1F1F1F; color: var(--ui-color-ink); font-size: var(--ui-step--1); cursor: pointer; } .emm-account-panel__hello { margin: 0; font-family: var(--ui-font-display); font-size: var(--ui-step-1); color: var(--ui-color-ink); opacity: 0; transform: translateY(8px); } .emm-account-panel__hello span { color: var(--ui-color-accent); } .emm-account-panel.is-open .emm-account-panel__hello { animation: emm-account-fade-in 320ms var(--ui-ease) 90ms both; } @keyframes emm-account-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .emm-account-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--ui-space-3); } .emm-account-panel__link { min-height: 4.6rem; border: var(--ui-border-hairline); border-radius: 1rem; padding: 0.9rem 1rem; text-decoration: none; color: var(--ui-color-ink-soft); background: color-mix(in srgb, var(--ui-color-paper) 84%, white); font-size: var(--ui-step--1); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; text-align: center; transition: transform var(--ui-time-base) var(--ui-ease), border-color var(--ui-time-base) var(--ui-ease), background var(--ui-time-base) var(--ui-ease), color var(--ui-time-base) var(--ui-ease); } .emm-account-panel__link:hover, .emm-account-panel__link:focus-visible { transform: translateY(-1px); border-color: var(--ui-color-line-strong); background: color-mix(in srgb, var(--ui-color-paper) 76%, white); color: var(--ui-color-ink); } .emm-account-panel__link.is-active { color: var(--ui-color-ink); border-color: var(--ui-color-line-strong); background: color-mix(in srgb, var(--ui-color-paper) 72%, white); } .emm-cart-panel { position: absolute; inset-inline: 0; top: 100%; z-index: calc(var(--ui-z-search) + 1); border-top: var(--ui-border-hairline); border-bottom: var(--ui-border-hairline); background: color-mix(in srgb, var(--ui-color-ivory) 93%, #ffffff); box-shadow: 0 14px 30px rgba(17, 21, 27, 0.12); max-height: var(--ui-cart-max-height, calc(100dvh - 4.35rem)); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; overflow: hidden; transition: opacity var(--ui-time-base) var(--ui-ease), transform var(--ui-time-base) var(--ui-ease), visibility var(--ui-time-base) var(--ui-ease); } .emm-cart-panel[hidden] { display: none !important; } .emm-cart-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .emm-cart-panel__inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; } .emm-cart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-4) var(--ui-space-5); border-bottom: var(--ui-border-hairline); } .emm-cart-panel__close { appearance: none; border: var(--ui-border-hairline); border-radius: var(--ui-radius-pill); padding: 0.5rem 0.95rem; background: #1F1F1F; color: var(--ui-color-ink); font-size: var(--ui-step--1); cursor: pointer; } .emm-cart-panel__body { overflow-y: auto; padding: var(--ui-space-4) var(--ui-space-5); } .emm-cart-panel__foot { border-top: var(--ui-border-hairline); padding: var(--ui-space-4) var(--ui-space-5); display: grid; gap: var(--ui-space-3); background: color-mix(in srgb, var(--ui-color-paper) 90%, white); } .emm-cart-panel__subtotal { display: flex; align-items: center; justify-content: space-between; font-size: var(--ui-step-0); font-weight: 600; color: var(--ui-color-ink); } .emm-cart-panel__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2); } .emm-cart-items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ui-space-3); } .emm-cart-item { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr); gap: var(--ui-space-3); border: var(--ui-border-hairline); border-radius: var(--ui-radius-md); padding: var(--ui-space-2); background: color-mix(in srgb, var(--ui-color-paper) 76%, white); } .emm-cart-item__media { width: 4.1rem; height: 4.1rem; border-radius: 0.48rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ui-color-line) 88%, white); background: #1F1F1F; } .emm-cart-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .emm-cart-item__content { min-width: 0; display: grid; gap: 0.2rem; } .emm-cart-item__title { margin: 0; font-size: var(--ui-step--1); font-weight: 600; color: var(--ui-color-ink); line-height: 1.35; } .emm-cart-item__meta { margin: 0; font-size: var(--ui-step--2); color: var(--ui-color-muted); } .emm-cart-item__row { margin-top: 0.28rem; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); } .emm-cart-item__line-total { font-size: var(--ui-step--1); font-weight: 600; color: var(--ui-color-ink); } .emm-cart-qty { display: inline-flex; align-items: center; border: var(--ui-border-hairline); border-radius: var(--ui-radius-pill); overflow: hidden; background: #1F1F1F; } .emm-cart-qty button { appearance: none; border: none; background: transparent; color: var(--ui-color-ink-soft); min-width: 1.9rem; min-height: 1.8rem; font-size: 1rem; cursor: pointer; } .emm-cart-qty button:disabled { opacity: 0.45; cursor: not-allowed; } .emm-cart-qty span { min-width: 1.8rem; text-align: center; font-size: var(--ui-step--2); font-weight: 600; color: var(--ui-color-ink); } .emm-cart-item__remove { appearance: none; border: none; background: transparent; color: var(--ui-color-muted); font-size: var(--ui-step--2); text-decoration: underline; text-underline-offset: 0.14rem; padding: 0; cursor: pointer; } .emm-cart-panel__empty, .emm-cart-panel__loading, .emm-cart-panel__error { text-align: center; color: var(--ui-color-muted); padding: var(--ui-space-6) var(--ui-space-2); display: grid; gap: var(--ui-space-3); justify-items: center; } .emm-cart-panel__empty p, .emm-cart-panel__loading p, .emm-cart-panel__error p { margin: 0; } .emm-cart-panel__empty .emm-btn, .emm-cart-panel__error .emm-btn { min-width: 10rem; } .emm-overlay { --ui-overlay-color: rgba(8, 10, 14, 0.64); --ui-overlay-hole-left: 0px; --ui-overlay-hole-top: 0px; --ui-overlay-hole-width: 0px; --ui-overlay-hole-height: 0px; position: fixed; inset-inline: 0; bottom: 0; top: var(--ui-overlay-top); z-index: var(--ui-z-overlay); background: var(--ui-overlay-color); opacity: 0; pointer-events: none; transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1); } .emm-overlay.has-cutout { background: linear-gradient(var(--ui-overlay-color), var(--ui-overlay-color)) 0 0 / 100% var(--ui-overlay-hole-top) no-repeat, linear-gradient(var(--ui-overlay-color), var(--ui-overlay-color)) 0 var(--ui-overlay-hole-top) / var(--ui-overlay-hole-left) var(--ui-overlay-hole-height) no-repeat, linear-gradient(var(--ui-overlay-color), var(--ui-overlay-color)) calc(var(--ui-overlay-hole-left) + var(--ui-overlay-hole-width)) var(--ui-overlay-hole-top) / calc(100% - (var(--ui-overlay-hole-left) + var(--ui-overlay-hole-width))) var(--ui-overlay-hole-height) no-repeat, linear-gradient(var(--ui-overlay-color), var(--ui-overlay-color)) 0 calc(var(--ui-overlay-hole-top) + var(--ui-overlay-hole-height)) / 100% calc(100% - (var(--ui-overlay-hole-top) + var(--ui-overlay-hole-height))) no-repeat; } .emm-overlay[hidden] { display: none !important; } .emm-overlay.is-active { opacity: 1; pointer-events: auto; } .emm-overlay.emm-overlay--drawer { --ui-overlay-top: var(--ui-header-bottom, 0px); } .emm-overlay.emm-overlay--cart { --ui-overlay-top: 0px; } .emm-overlay.emm-overlay--account { --ui-overlay-top: 0px; } .emm-drawer { position: fixed; inset: 0; z-index: var(--ui-z-drawer); pointer-events: none; } .emm-drawer[hidden] { display: none !important; } .emm-drawer__panel { width: min(88vw, 24rem); max-width: 24rem; height: 100svh; max-height: 100svh; border-right: var(--ui-border-hairline); background: var(--ui-color-ivory); opacity: 0.01; transform: translateX(calc(-100% - 0.85rem)); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; pointer-events: auto; display: grid; grid-template-rows: auto 1fr; } .emm-drawer.is-open .emm-drawer__panel { opacity: 1; transform: translateX(0); }  .emm-contact-panel__maps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .emm-map-action, .emm-map-more > summary { min-height: 3rem; display: flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.7rem 0.85rem; border: var(--ui-border-hairline); border-radius: 0.9rem; background: color-mix(in srgb, var(--ui-color-white) 88%, var(--ui-color-paper)); color: var(--ui-color-ink); font-size: var(--ui-step--1); font-style: normal; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform var(--ui-time-base) var(--ui-ease), border-color var(--ui-time-base) var(--ui-ease), background var(--ui-time-base) var(--ui-ease); } .emm-map-action:hover, .emm-map-more > summary:hover { transform: translateY(-1px); border-color: var(--ui-color-line-strong); } .emm-map-action svg, .emm-map-more > summary svg { flex: 0 0 auto; width: 1rem; height: 1rem; stroke: currentColor; } .emm-map-more { position: relative; grid-column: 1 / -1; justify-self: end; max-height: 0; opacity: 0; pointer-events: none; transform: translateY(-0.3rem); transition: max-height 180ms var(--ui-ease), opacity 180ms var(--ui-ease), transform 180ms var(--ui-ease); transition-delay: 180ms; } .emm-contact-panel__maps:has(.emm-map-action:hover) .emm-map-more { max-height: 3rem; opacity: 0.72; pointer-events: auto; transform: translateY(0); transition-delay: 650ms; } .emm-contact-panel__maps .emm-map-more:hover { max-height: 3rem; opacity: 0.82; pointer-events: auto; transform: translateY(0); transition-delay: 0ms; } .emm-contact-panel__maps:focus-within .emm-map-more, .emm-contact-panel__maps.is-intent-revealed .emm-map-more, .emm-map-more[open] { max-height: 3rem; opacity: 0.82; pointer-events: auto; transform: translateY(0); transition-delay: 0ms; } .emm-contact-panel__maps:focus-within .emm-map-more, .emm-map-more[open] { opacity: 1; } .emm-map-more > summary { min-height: 2rem; justify-content: flex-end; padding: 0.35rem 0.15rem; border-color: transparent; border-radius: 0; background: transparent; color: var(--ui-color-muted); font-size: var(--ui-step--2); font-weight: 550; list-style: none; } .emm-map-more > summary::-webkit-details-marker { display: none; } .emm-map-more > summary:hover { border-color: transparent; background: transparent; color: var(--ui-color-ink); transform: none; } .emm-map-more > summary svg:last-child { width: 0.8rem; height: 0.8rem; transition: transform var(--ui-time-base) var(--ui-ease); } .emm-map-more[open] > summary svg:last-child { transform: rotate(180deg); } .emm-map-more__menu { position: absolute; right: 0; bottom: calc(100% + 0.55rem); z-index: 8; width: max-content; min-width: 12rem; display: grid; gap: 0.2rem; padding: 0.4rem; border: var(--ui-border-hairline); border-radius: 0.9rem; background: var(--ui-color-white); box-shadow: 0 1rem 3rem rgba(10, 12, 15, 0.16); } .emm-map-more__menu a { padding: 0.7rem 0.8rem; border-radius: 0.6rem; color: var(--ui-color-ink); font-size: var(--ui-step--1); font-style: normal; font-weight: 600; text-decoration: none; } .emm-map-more__menu a:hover { background: var(--ui-color-paper); }  @media (max-width: 640px) { .emm-section .emm-btn, .emm-hero .emm-hero__dot { min-height: 44px !important; } .emm-contact-panel__email .emm-link { display: inline-flex; align-items: center; min-height: 44px; } }  .emm-map-action svg.emm-map-brand { width: 1.1rem; height: 1.1rem; fill: currentColor; stroke: none; } .emm-contact-panel--callout .emm-contact-panel__action-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .emm-contact-panel--callout .emm-contact-panel__action-tiles > a { display: flex; align-items: center; gap: 0.65rem; min-width: 0; min-height: 3.5rem; padding: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.045); color: #fff; font-size: 0.85rem; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background 160ms ease, border-color 160ms ease; } .emm-contact-panel--callout .emm-contact-panel__action-tiles > a:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.26); } .emm-contact-panel__action-tiles > a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .emm-contact-panel__action-tiles svg { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; opacity: 0.55; } .emm-contact-panel__action-tiles svg:last-child { margin-left: auto; width: 0.8rem; height: 0.8rem; } @media (max-width: 40rem) { .emm-contact-panel--callout .emm-contact-panel__action-tiles { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .emm-contact-panel--callout .emm-contact-panel__action-tiles > a { transition: none; } } .emm-contact-panel--callout { --ui-section-bg: var(--ui-color-white); padding-block: clamp(2.5rem, 6vw, 6rem); } .emm-contact-panel--callout .emm-contact-panel__inner { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(26rem, 40vw, 34rem); grid-template-columns: minmax(0, 1.18fr) minmax(20rem, 0.82fr); gap: clamp(3rem, 7vw, 8rem); align-items: end; padding: clamp(2rem, 5.5vw, 5.5rem); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: clamp(1.75rem, 3vw, 3rem); background: radial-gradient(circle at 86% 10%, rgba(255, 255, 255, 0.14), transparent 28%), radial-gradient(circle at 8% 105%, rgba(86, 112, 148, 0.25), transparent 36%), linear-gradient(145deg, #18191b 0%, #090a0b 68%, #050505 100%); color: #fff; box-shadow: 0 2rem 5rem rgba(10, 12, 15, 0.16); } .emm-contact-panel--callout .emm-contact-panel__inner::before { content: ""; position: absolute; z-index: -1; top: -9rem; right: -8rem; width: 25rem; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 50%; box-shadow: 0 0 0 3.5rem rgba(255, 255, 255, 0.025), 0 0 0 7rem rgba(255, 255, 255, 0.018); } .emm-contact-panel--callout .emm-contact-panel__inner > header, .emm-contact-panel--callout .emm-contact-panel__body { position: relative; z-index: 1; } .emm-contact-panel--callout .emm-kicker { display: inline-flex; align-items: center; gap: 0.65rem; width: fit-content; color: rgba(255, 255, 255, 0.62); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.11em; text-transform: uppercase; } .emm-contact-panel--callout .emm-kicker::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, 0.1); } .emm-contact-panel--callout .emm-title { max-width: 10ch; color: #fff; font-size: clamp(2.8rem, 6vw, 6.5rem); font-weight: 560; line-height: 0.94; letter-spacing: -0.055em; } .emm-contact-panel--callout .emm-copy { max-width: 39rem; color: rgba(255, 255, 255, 0.66); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; } .emm-contact-panel--callout .emm-contact-panel__body { gap: 1.5rem; padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid rgba(255, 255, 255, 0.14); } .emm-contact-panel--callout .emm-contact-panel__details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .emm-contact-panel--callout .emm-contact-panel__details > p { min-width: 0; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.65rem; padding: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.045); color: rgba(255, 255, 255, 0.68); } .emm-contact-panel--callout .emm-contact-panel__details > p.emm-muted, .emm-contact-panel--callout .emm-contact-panel__details > p.emm-contact-panel__email { grid-column: 1 / -1; } .emm-contact-panel--callout .emm-contact-panel__maps { grid-column: 1 / -1; } .emm-contact-panel--callout .emm-map-action, .emm-contact-panel--callout .emm-map-more > summary { border-color: rgba(255, 255, 255, 0.11); background: rgba(255, 255, 255, 0.055); color: #fff; } .emm-contact-panel--callout .emm-map-more > summary { border-color: transparent; background: transparent; color: rgba(255, 255, 255, 0.42); } .emm-contact-panel--callout .emm-map-action:hover, .emm-contact-panel--callout .emm-map-more > summary:hover { border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.09); } .emm-contact-panel--callout .emm-map-more > summary:hover { border-color: transparent; background: transparent; color: rgba(255, 255, 255, 0.72); } .emm-contact-panel--callout .emm-map-more__menu { border-color: rgba(255, 255, 255, 0.12); background: #1b1c1e; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.36); } .emm-contact-panel--callout .emm-map-more__menu a { color: #fff; } .emm-contact-panel--callout .emm-map-more__menu a:hover { background: rgba(255, 255, 255, 0.08); } .emm-contact-panel--callout .emm-contact-panel__details > p > svg { width: 0.95rem; height: 0.95rem; color: rgba(255, 255, 255, 0.52); } .emm-contact-panel--callout .emm-contact-panel__details > p strong { color: rgba(255, 255, 255, 0.48); font-size: 0.66rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; } .emm-contact-panel--callout .emm-link { overflow-wrap: anywhere; color: #fff; border-color: rgba(255, 255, 255, 0.28); } .emm-contact-panel--callout .emm-link:hover { color: #fff; border-color: #fff; } .emm-contact-panel--callout .emm-contact-panel__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .emm-contact-panel--callout .emm-contact-panel__actions .emm-btn { min-height: 3.25rem; padding-inline: 1.2rem; } .emm-contact-panel--callout .emm-contact-panel__actions .emm-btn--primary { background: #fff; border-color: #fff; color: #0b0b0c; } .emm-contact-panel--callout .emm-contact-panel__actions .emm-btn--secondary { background: transparent; border-color: rgba(255, 255, 255, 0.22); color: #fff; } .emm-contact-panel--callout .emm-contact-panel__actions .emm-btn--secondary:hover { background: rgba(255, 255, 255, 0.08); } @media (max-width: 64rem) { .emm-contact-panel--callout .emm-contact-panel__inner { min-height: auto; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; } .emm-contact-panel--callout .emm-title { max-width: 12ch; } .emm-contact-panel--callout .emm-contact-panel__body { padding-top: 1.5rem; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); border-left: 0; } } @media (max-width: 40rem) { .emm-contact-panel--callout { padding-block: 1.5rem 2.5rem; } .emm-contact-panel--callout .emm-container { width: min(100% - 1rem, var(--ui-container-max)); } .emm-contact-panel--callout .emm-contact-panel__inner { gap: 2rem; padding: 1.5rem; border-radius: 1.5rem; } .emm-contact-panel--callout .emm-title { font-size: clamp(2.65rem, 14vw, 4.25rem); } .emm-contact-panel--callout .emm-contact-panel__details, .emm-contact-panel--callout .emm-contact-panel__actions, .emm-contact-panel__maps { grid-template-columns: minmax(0, 1fr); } .emm-contact-panel--callout .emm-contact-panel__details > p.emm-muted { grid-column: auto; } } @media (hover: none), (pointer: coarse) { .emm-map-more { max-height: 3rem; opacity: 0.62; pointer-events: auto; transform: none; } } @media (prefers-reduced-motion: reduce) { .emm-overlay, .emm-search-panel, .emm-search-panel__inner, .emm-account-panel, .emm-account-panel__inner, .emm-drawer__panel { transition-duration: 1ms !important; animation-duration: 1ms !important; } } .emm-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-4); border-bottom: var(--ui-border-hairline); } .emm-drawer__wordmark { display: inline-flex; align-items: center; text-decoration: none; color: var(--ui-color-ink); font-family: var(--ui-font-display); font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2rem); line-height: 1; } .emm-drawer__wordmark img { display: block; width: auto; height: clamp(1.9rem, 1.5rem + 1.3vw, 2.45rem); max-width: min(11rem, 100%); object-fit: contain; } .emm-drawer__close { appearance: none; border: var(--ui-border-hairline); border-radius: var(--ui-radius-pill); width: 2.6rem; height: 2.6rem; padding: 0; background: #1F1F1F; color: var(--ui-color-ink); font-size: 1.1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .emm-drawer__body { height: 100%; min-height: 0; padding: 0; display: block; overflow: hidden; } .emm-drawer__search-pin { position: sticky; top: 0; z-index: 4; padding: 0.5rem var(--ui-space-4); border-bottom: var(--ui-border-hairline); background: color-mix(in srgb, var(--ui-color-ivory) 98%, white); } .emm-drawer__scroll { min-height: 0; overflow-y: auto; padding: var(--ui-space-3) var(--ui-space-4) calc(var(--ui-space-6) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--ui-space-3); align-content: start; } .emm-drawer__search-link { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--ui-color-ink-soft); font-size: var(--ui-step--1); border-bottom: 1px solid transparent; width: fit-content; } .emm-drawer__search-link:hover { border-bottom-color: currentColor; color: var(--ui-color-ink); } .emm-drawer__search-form { display: block; } .emm-drawer__search-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: center; min-height: 2.05rem; } .emm-drawer__search-icon { width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-color-ink-soft); } .emm-drawer__search-submit { min-width: 4.35rem; min-height: 2.45rem; padding: 0.38rem 0.72rem; font-size: var(--ui-step--2); } .emm-drawer__search-row .emm-field { min-height: 2.05rem; padding: 0.18rem 0; border-radius: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ui-color-line-strong) 92%, white); background: transparent; font-size: 16px; } .emm-drawer__search-row .emm-field:focus { outline: none; border-bottom-color: var(--ui-color-ink); box-shadow: none; } .emm-drawer__search-row .emm-field::placeholder { color: color-mix(in srgb, var(--ui-color-muted) 88%, white); } .emm-drawer__search-predictive { display: grid; gap: var(--ui-space-2); } .emm-drawer__search-predictive[hidden] { display: none !important; } .emm-search-suggestions--drawer a { padding: 0.52rem 0.7rem; } .emm-search-suggestions--drawer .emm-search-suggestion__thumb { width: 2.35rem; height: 2.35rem; } .emm-drawer__account-link { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--ui-color-ink-soft); font-size: var(--ui-step--1); border-bottom: 1px solid transparent; width: fit-content; } .emm-drawer__account-link:hover { border-bottom-color: currentColor; color: var(--ui-color-ink); } .emm-drawer__group { display: grid; gap: var(--ui-space-3); } .emm-drawer__links { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; } .emm-drawer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--ui-color-ink); font-size: var(--ui-step-0); line-height: 1.25; } .emm-drawer__parent { display: grid; } .emm-drawer__parent summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ui-color-ink); font-size: var(--ui-step-0); line-height: 1.25; } .emm-drawer__parent summary::-webkit-details-marker { display: none; } .emm-drawer__parent summary::after { content: '+'; margin-left: 0.45rem; color: var(--ui-color-muted); font-size: 0.9em; } .emm-drawer__parent[open] summary::after { content: '-'; } .emm-drawer__children { margin: 0; padding: 0 0 0.2rem 0.9rem; list-style: none; display: grid; gap: 0.2rem; } .emm-drawer__children a { min-height: 2.15rem; color: var(--ui-color-ink-soft); font-size: var(--ui-step--1); } .emm-drawer__links a:hover { color: var(--ui-color-accent); } .emm-drawer__links a.is-active, .emm-drawer__links a[aria-current="page"] { color: var(--ui-color-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.24em; } .emm-drawer__group--secondary { border-top: var(--ui-border-hairline); padding-top: var(--ui-space-4); } .emm-drawer__details { border-top: var(--ui-border-hairline); padding-top: var(--ui-space-3); } .emm-drawer__details summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--ui-step--1); text-transform: none; letter-spacing: 0.02em; color: var(--ui-color-muted); } .emm-drawer__details summary::-webkit-details-marker { display: none; } .emm-drawer__details--flat { display: grid; gap: var(--ui-space-3); } .emm-drawer__links--secondary a { font-size: var(--ui-step--1); color: var(--ui-color-ink-soft); } .emm-drawer__links--account a { font-size: var(--ui-step--1); color: var(--ui-color-ink-soft); } .emm-drawer__newsletter { border-top: var(--ui-border-hairline); padding-top: var(--ui-space-4); display: grid; gap: var(--ui-space-2); } .emm-drawer__newsletter-row { margin-top: var(--ui-space-2); display: grid; grid-template-columns: 1fr auto; gap: var(--ui-space-2); } .emm-drawer__newsletter-submit { min-width: 2.75rem; padding-inline: 0.8rem; } .emm-drawer__social { border-top: var(--ui-border-hairline); padding-top: var(--ui-space-4); display: grid; gap: var(--ui-space-3); } .emm-drawer__social-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-4); } .emm-drawer__social-list a { text-decoration: none; font-size: var(--ui-step--1); color: var(--ui-color-ink-soft); display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.62rem 0.9rem; border: var(--ui-border-hairline); border-radius: var(--ui-radius-pill); background: color-mix(in srgb, var(--ui-color-paper) 92%, white); transition: color var(--ui-time-base) var(--ui-ease), border-color var(--ui-time-base) var(--ui-ease), transform var(--ui-time-base) var(--ui-ease); } .emm-drawer__social-list a:hover { border-color: var(--ui-color-line-strong); color: var(--ui-color-ink); transform: translateY(-1px); } .emm-drawer__social-icon { width: 1rem; min-width: 1rem; text-align: center; font-size: 0.98rem; } .emm-drawer__account-panel { padding: 0.45rem var(--ui-space-4) calc(0.65rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--ui-color-ivory) 98%, white); position: sticky; bottom: 0; z-index: 3; display: grid; gap: 0.4rem; } .emm-drawer__account-panel::before { content: ''; width: 92%; height: 1px; justify-self: center; background: color-mix(in srgb, var(--ui-color-line-strong) 55%, white); margin-bottom: 0.35rem; } .emm-drawer__utility-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.2rem; } .emm-drawer__utility-btn { text-decoration: none; color: var(--ui-color-ink-soft); min-height: 2.8rem; display: grid; justify-items: center; align-content: center; gap: 0.14rem; padding: 0.12rem; } .emm-drawer__btn-icon { width: 0.95rem; height: 0.95rem; display: inline-flex; align-items: center; justify-content: center; color: currentColor; flex-shrink: 0; } .emm-drawer__btn-label { font-size: 0.68rem; line-height: 1.15; text-align: center; letter-spacing: 0.01em; } .emm-drawer__utility-btn:hover { color: var(--ui-color-ink); } .emm-no-scroll { overflow: hidden; } .emm-hero { position: relative; overflow: hidden; border-bottom: var(--ui-border-hairline); --ui-hero-media-max-width: 1800px; --ui-hero-seamless-fade-color: var(--ui-color-bg, #0b0b0d); --ui-hero-seamless-breakout: clamp(2rem, 5vw, 5rem); --ui-hero-seamless-side-fade: clamp(1rem, 2.6vw, 2.4rem); --ui-hero-seamless-top-fade: 0; --ui-hero-seamless-bottom-fade: clamp(4rem, 12vw, 8rem); --ui-hero-base-width: min(var(--ui-container-max), calc(100vw - (var(--ui-page-pad) * 2))); } .emm-hero__shell { position: relative; display: grid; min-height: clamp( 420px, calc((min(var(--ui-container-max), calc(100vw - (var(--ui-page-pad) * 2))) * 9) / 16), 900px ); } .emm-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .emm-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .emm-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .emm-hero__shade { position: absolute; inset: 0; background: #000; } .emm-hero__seamless-fades, .emm-hero__seamless-fade { position: absolute; inset: 0; pointer-events: none; } .emm-hero__seamless-fades { z-index: 2; } .emm-hero__seamless-fades::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--ui-hero-seamless-top-fade); background: linear-gradient( 180deg, var(--ui-hero-seamless-fade-color) 0%, color-mix(in srgb, var(--ui-hero-seamless-fade-color) 76%, transparent) 44%, transparent 100% ); pointer-events: none; } .emm-hero__seamless-fade--left, .emm-hero__seamless-fade--right { inset-block: 0; width: var(--ui-hero-seamless-side-fade); } .emm-hero__seamless-fade--left { inset-inline: 0 auto; background: linear-gradient( 90deg, var(--ui-hero-seamless-fade-color) 0%, color-mix(in srgb, var(--ui-hero-seamless-fade-color) 72%, transparent) 58%, transparent 100% ); } .emm-hero__seamless-fade--right { inset-inline: auto 0; background: linear-gradient( 270deg, var(--ui-hero-seamless-fade-color) 0%, color-mix(in srgb, var(--ui-hero-seamless-fade-color) 72%, transparent) 58%, transparent 100% ); } .emm-hero__seamless-fade--bottom { inset: auto 0 0; height: var(--ui-hero-seamless-bottom-fade); background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--ui-hero-seamless-fade-color) 64%, transparent) 60%, var(--ui-hero-seamless-fade-color) 100% ); } .emm-hero__grain { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 0.75px, transparent 0.75px); background-size: 4px 4px; opacity: 0.18; mix-blend-mode: soft-light; } .emm-hero__inner { position: relative; z-index: 1; min-height: inherit; height: 100%; display: grid; align-items: stretch; justify-items: start; text-align: left; padding-block: clamp(3.5rem, 8vw, 6rem); } .emm-hero__content { display: grid; align-self: end; justify-self: start; gap: var(--ui-space-5); max-width: 40rem; margin-inline: 0; } .emm-hero--align-desktop-center .emm-hero__inner { justify-items: start; } .emm-hero--align-desktop-center .emm-hero__content { margin-inline: 0 auto; } .emm-hero--align-desktop-right .emm-hero__inner { justify-items: start; } .emm-hero--align-desktop-right .emm-hero__content { margin-inline: 0 auto; } .emm-hero__meta { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); color: var(--ui-color-muted); font-size: var(--ui-step--1); } .emm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); } .emm-hero .emm-btn--primary { background: var(--ui-hero-btn-primary-bg, var(--ui-color-ink)); color: var(--ui-hero-btn-primary-text, var(--ui-color-white)); border-color: var(--ui-hero-btn-primary-border, var(--ui-color-ink)); } .emm-hero .emm-btn--secondary { background: var(--ui-hero-btn-secondary-bg, transparent); color: var(--ui-hero-btn-secondary-text, var(--ui-hero-smart-color, var(--ui-color-ink))); border-color: var(--ui-hero-btn-secondary-border, color-mix(in srgb, var(--ui-hero-smart-color, var(--ui-color-ink)) 45%, transparent)); } .emm-section[data-emm-tone="ink"] .emm-hero__meta { color: rgba(243, 238, 230, 0.8); } .emm-hero--seamless-banner { border-bottom: 0; padding-top: 0; } .emm-hero--seamless-banner > .emm-container { width: 100%; max-width: none; } .emm-hero--seamless-banner .emm-hero__shell { aspect-ratio: auto; overflow: visible; border-radius: 0; background: transparent; } .emm-hero--seamless-banner .emm-hero__media { inset: 0 auto 0 50%; width: min(var(--ui-hero-media-max-width), calc(var(--ui-hero-base-width) + var(--ui-hero-seamless-breakout))); transform: translateX(-50%); } .emm-hero--seamless-banner .emm-hero__inner { width: min(var(--ui-container-max), calc(100% - (var(--ui-page-pad) * 2))); margin-inline: auto; padding-inline: 0; } .emm-collections { gap: var(--ui-space-5); } .emm-collection-card { display: grid; gap: var(--ui-space-3); text-decoration: none; color: inherit; } .emm-collection-card__media { position: relative; border-radius: var(--ui-radius-lg); overflow: hidden; border: var(--ui-border-hairline); background: var(--ui-color-paper); aspect-ratio: var(--ui-card-ratio, 4 / 5); } .emm-collection-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ui-time-slow) var(--ui-ease); } .emm-collection-card:hover .emm-collection-card__media img { transform: scale(1.03); } .emm-collection-card__title { font-size: var(--ui-step-1); margin: 0; } .emm-collection-card__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-space-3); } .emm-value-grid { display: grid; gap: var(--ui-space-4); } .emm-value { display: grid; gap: var(--ui-space-2); padding: var(--ui-space-5); border: var(--ui-border-hairline); border-radius: var(--ui-radius-md); } .emm-value__icon { width: 1.25rem; height: 1.25rem; color: var(--ui-color-muted); } .emm-value__title { margin: 0; font-size: var(--ui-step-0); letter-spacing: 0.01em; } .emm-value__copy { margin: 0; color: var(--ui-color-muted); font-size: var(--ui-step--1); line-height: 1.55; } .emm-split { display: grid; gap: var(--ui-space-8); align-items: center; } .emm-split__media { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); overflow: hidden; background: var(--ui-color-paper); } .emm-split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ui-story-ratio, 4 / 5); } .emm-quote { margin: 0; padding-left: var(--ui-space-4); border-left: 1px solid var(--ui-color-line-strong); font-size: var(--ui-step--1); color: var(--ui-color-muted); } .emm-image-text--quote-cta .emm-quote-cta-card { border: var(--ui-border-hairline); border-radius: clamp(1rem, 2.3vw, 1.5rem); padding: clamp(1.2rem, 3.2vw, 2.2rem); background: color-mix(in srgb, var(--ui-color-ink) 84%, #141823 16%); min-width: 0; } .emm-image-text--quote-cta[data-emm-tone="paper"] .emm-quote-cta-card { background: color-mix(in srgb, var(--ui-color-paper) 88%, var(--ui-color-white) 12%); } .emm-image-text--quote-cta[data-emm-tone="white"] .emm-quote-cta-card { background: color-mix(in srgb, var(--ui-color-white) 92%, var(--ui-color-paper) 8%); } .emm-image-text--quote-cta .emm-quote-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "content media" "actions media"; gap: clamp(1rem, 2.7vw, 2.2rem); align-items: stretch; } .emm-image-text--quote-cta .emm-quote-cta-grid.is-only-copy { grid-template-areas: "content media"; } .emm-image-text--quote-cta .emm-quote-cta-grid.is-only-actions { grid-template-areas: "actions media"; } .emm-image-text--quote-cta .emm-quote-cta-grid.is-media-only { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media"; } .emm-image-text--quote-cta .emm-quote-cta-content { grid-area: content; align-self: start; display: grid; gap: clamp(0.45rem, 1.3vw, 0.9rem); min-width: 0; } .emm-image-text--quote-cta .emm-quote-cta-title { margin: 0; font-size: clamp(1.65rem, 3.1vw, 3rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 20ch; overflow-wrap: anywhere; hyphens: auto; } .emm-image-text--quote-cta .emm-quote-cta-body, .emm-image-text--quote-cta .emm-quote-cta-extra { margin: 0; color: color-mix(in srgb, var(--ui-color-ink-soft) 84%, var(--ui-color-white) 16%); line-height: 1.55; font-size: clamp(0.98rem, 1.45vw, 1.2rem); max-width: 62ch; overflow-wrap: anywhere; hyphens: auto; } .emm-image-text--quote-cta[data-emm-tone="ink"] .emm-quote-cta-body, .emm-image-text--quote-cta[data-emm-tone="ink"] .emm-quote-cta-extra { color: color-mix(in srgb, #dde3ef 88%, #ffffff 12%); } .emm-image-text--quote-cta .emm-quote-cta-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .emm-image-text--quote-cta .emm-quote-cta-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 0.72rem; min-width: 0; } .emm-image-text--quote-cta .emm-quote-cta-btn { border-radius: 999px; min-height: 2.95rem; padding-inline: 1.35rem; font-weight: 620; letter-spacing: 0.01em; text-decoration: none; overflow-wrap: anywhere; hyphens: auto; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease; } .emm-image-text--quote-cta .emm-quote-cta-btn--primary { background: #f5f7fb; color: #10131a; border: 1px solid color-mix(in srgb, #f5f7fb 72%, #9aa7bf 28%); } .emm-image-text--quote-cta .emm-quote-cta-btn--secondary { background: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 36%, transparent 64%); } .emm-image-text--quote-cta .emm-quote-cta-btn:hover { transform: translateY(-1px); } .emm-image-text--quote-cta .emm-quote-cta-btn--primary:hover { background: #ffffff; border-color: #ffffff; } .emm-image-text--quote-cta .emm-quote-cta-btn--secondary:hover { border-color: color-mix(in srgb, currentColor 52%, transparent 48%); background: color-mix(in srgb, currentColor 10%, transparent 90%); } .emm-image-text--quote-cta .emm-quote-cta-btn:focus-visible { outline: 2px solid color-mix(in srgb, #5ea8ff 78%, #ffffff 22%); outline-offset: 2px; } .emm-image-text--quote-cta .emm-quote-cta-media { grid-area: media; border-radius: clamp(0.9rem, 2vw, 1.35rem); overflow: hidden; border: var(--ui-border-hairline); background: color-mix(in srgb, var(--ui-color-ink) 82%, #0f1219 18%); min-height: clamp(14rem, 32vw, 23rem); width: 100%; min-width: 0; align-self: stretch; } .emm-image-text--quote-cta .emm-quote-cta-media img { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; } .emm-image-text--quote-cta .emm-quote-cta-media.is-empty { display: grid; place-items: center; } .emm-image-text--quote-cta .emm-quote-cta-placeholder { width: 100%; height: 100%; min-height: inherit; display: grid; place-items: center; color: color-mix(in srgb, #c7d1e1 54%, #7f8ba3 46%); background: color-mix(in srgb, var(--ui-color-ink) 72%, #0d1017 28%); } .emm-image-text--quote-cta .emm-quote-cta-placeholder svg { width: clamp(1.8rem, 4.6vw, 2.9rem); height: clamp(1.8rem, 4.6vw, 2.9rem); opacity: 0.72; } .emm-image-text--quote-cta [data-cta-motion] { will-change: opacity, transform; } .emm-image-text--quote-cta.is-motion-ready [data-cta-motion] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--cta-delay, 0ms); } .emm-image-text--quote-cta.is-motion-ready.is-inview [data-cta-motion] { opacity: 1; transform: none; } .emm-image-text--quote-cta.is-editor-preview [data-cta-motion] { opacity: 1 !important; transform: none !important; transition: none !important; } .emm-image-text--quote-cta.is-editor-preview, .emm-image-text--quote-cta.is-editor-preview *, .emm-image-text--quote-cta.is-editor-preview *::before, .emm-image-text--quote-cta.is-editor-preview *::after { animation: none !important; transition: none !important; } .emm-product-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ui-space-5); margin-bottom: var(--ui-space-6); } .emm-product-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 18rem); gap: var(--ui-space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--ui-space-2); } .emm-product-track::-webkit-scrollbar { display: none; } .emm-product-item { scroll-snap-align: start; display: grid; gap: var(--ui-space-3); } .emm-product-card { display: grid; gap: var(--ui-space-3); color: inherit; text-decoration: none; } .emm-product-media { position: relative; border-radius: var(--ui-radius-lg); overflow: hidden; border: var(--ui-border-hairline); background: var(--ui-color-paper); aspect-ratio: 1 / 1; clip-path: inset(0 round var(--ui-radius-lg)); } .emm-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ui-time-slow) var(--ui-ease); } .emm-product-card:hover .emm-product-media img { transform: scale(1.02); } .emm-product-badge { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; font-size: 0.64rem; font-weight: 600; text-transform: none; letter-spacing: 0.02em; padding: 0.32rem 0.55rem; border-radius: var(--ui-radius-pill); border: 1px solid transparent; background: #1F1F1F; } .emm-product-badge--coming-soon { color: var(--ui-color-accent); border-color: color-mix(in srgb, var(--ui-color-accent) 25%, transparent); background: color-mix(in srgb, var(--ui-color-accent-soft) 92%, white); } .emm-product-badge--sold-out { color: var(--ui-color-danger); border-color: color-mix(in srgb, var(--ui-color-danger) 24%, transparent); background: color-mix(in srgb, #fff4f2 90%, white); } .emm-product-badge--low-stock { color: var(--ui-color-warning); border-color: color-mix(in srgb, var(--ui-color-warning) 26%, transparent); background: color-mix(in srgb, #fff8e8 92%, white); } .emm-product-badge--in-stock { color: var(--ui-color-success); border-color: color-mix(in srgb, var(--ui-color-success) 25%, transparent); background: color-mix(in srgb, #edf8f1 94%, white); } .emm-product-title { margin: 0; font-size: var(--ui-step-0); line-height: 1.35; } .emm-price { margin: 0; font-size: var(--ui-step-1); line-height: 1.2; font-weight: 600; } .emm-price small { color: var(--ui-color-muted); font-size: 0.72em; font-weight: 500; margin-left: 0.35rem; } .emm-price s { font-size: 0.75em; color: var(--ui-color-muted); margin-left: 0.4rem; } .emm-quick-add { width: 100%; min-height: 2.45rem; border-radius: var(--ui-radius-pill); border: var(--ui-border-hairline); background: transparent; color: var(--ui-color-ink); font-size: var(--ui-step--1); letter-spacing: 0.01em; } .emm-quick-add:hover { background: var(--ui-color-paper); } .emm-quick-add[disabled] { cursor: not-allowed; opacity: 0.45; } .emm-slider-shell { position: relative; } .emm-slider-nav { position: absolute; top: 40%; transform: translateY(-50%); width: 2.15rem; height: 2.15rem; border-radius: 50%; border: var(--ui-border-hairline); background: color-mix(in srgb, var(--ui-color-white) 88%, transparent); color: var(--ui-color-ink); display: inline-flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; } .emm-slider-nav[data-emm-slider-nav="prev"] { left: -0.75rem; } .emm-slider-nav[data-emm-slider-nav="next"] { right: -0.75rem; } .emm-slider-nav[disabled] { opacity: 0.25; pointer-events: none; } .emm-products-grid { display: grid; gap: var(--ui-space-5); grid-template-columns: repeat(var(--ui-columns, 4), minmax(0, 1fr)); } .emm-faq { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); overflow: hidden; } .emm-faq-layout { display: grid; gap: var(--ui-space-6); } .emm-faq-section--split .emm-faq-layout { grid-template-columns: minmax(14rem, 0.36fr) minmax(0, 0.64fr); align-items: start; } .emm-faq details { border-top: var(--ui-border-hairline); background: #1F1F1F; } .emm-faq details:first-child { border-top: none; } .emm-faq summary { list-style: none; cursor: pointer; padding: var(--ui-space-4) var(--ui-space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); font-size: var(--ui-step-0); font-weight: 550; } .emm-faq summary::-webkit-details-marker { display: none; } .emm-faq__icon { font-size: 1.1rem; color: var(--ui-color-muted); transition: transform var(--ui-time-base) var(--ui-ease); } .emm-faq details[open] .emm-faq__icon { transform: rotate(45deg); } .emm-faq__body { padding: 0 var(--ui-space-5) var(--ui-space-4); color: var(--ui-color-muted); font-size: var(--ui-step--1); line-height: 1.6; } .emm-newsletter { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); background: color-mix(in srgb, var(--ui-color-white) 84%, var(--ui-color-paper)); padding: clamp(1.35rem, 3.5vw, 2.4rem); } .emm-newsletter form { display: grid; grid-template-columns: 1fr auto; gap: var(--ui-space-3); margin-top: var(--ui-space-5); } .emm-newsletter__submit { min-width: 2.9rem; padding-inline: 0.95rem; } .emm-links-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ui-space-2); } .emm-links-list a { color: var(--ui-color-ink-soft); text-decoration: none; border-bottom: 1px solid transparent; width: fit-content; } .emm-links-list a:hover { border-bottom-color: currentColor; } .emm-slideshow { position: relative; border-radius: var(--ui-radius-lg); overflow: hidden; min-height: var(--ui-slide-height, 26rem); border: var(--ui-border-hairline); } .emm-slideshow__track { position: relative; min-height: inherit; } .emm-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--ui-time-slow) var(--ui-ease); } .emm-slide.is-active { opacity: 1; pointer-events: auto; } .emm-slide__media { position: absolute; inset: 0; z-index: 0; } .emm-slide__media img { width: 100%; height: 100%; object-fit: cover; } .emm-slide__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 20, 24, 0.16), rgba(17, 20, 24, 0.45)); } .emm-slide__content { position: relative; z-index: 1; min-height: inherit; display: grid; align-content: end; gap: var(--ui-space-4); padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 40rem; color: #f7f4ec; } .emm-slideshow__nav { position: absolute; right: var(--ui-space-4); bottom: var(--ui-space-4); z-index: 2; display: inline-flex; align-items: center; gap: var(--ui-space-2); } .emm-slideshow__nav button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(20, 23, 27, 0.45); color: #f7f4ec; } .emm-video { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); overflow: hidden; background: var(--ui-color-paper); } .emm-video__frame { position: relative; width: 100%; padding-bottom: var(--ui-video-ratio, 56.25%); } .emm-video__frame iframe, .emm-video__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; } .emm-video__placeholder { display: grid; place-items: center; background-size: cover; background-position: center; color: var(--ui-color-muted); } .emm-site-footer { margin-top: clamp(3rem, 8vw, 6rem); border-top: var(--ui-border-hairline); background: var(--ui-color-paper); color: var(--ui-color-ink); } .emm-site-footer__inner { padding-block: clamp(2.25rem, 6vw, 4rem) clamp(1.2rem, 2.8vw, 2rem); } .emm-site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--ui-space-8); } .emm-site-footer__block { display: grid; gap: var(--ui-space-3); align-content: start; } .emm-site-footer__title { margin: 0; font-size: var(--ui-step-0); font-weight: 620; letter-spacing: 0.01em; } .emm-site-footer__copy { margin: 0; color: var(--ui-color-muted); font-size: var(--ui-step--1); line-height: 1.6; } .emm-site-footer__form { display: grid; grid-template-columns: 1fr auto; gap: var(--ui-space-2); } .emm-site-footer__meta { margin-top: var(--ui-space-8); padding-top: var(--ui-space-4); border-top: var(--ui-border-hairline); display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); flex-wrap: wrap; } .emm-site-footer__meta p { margin: 0; color: var(--ui-color-muted); font-size: var(--ui-step--2); } .emm-testimonial { display: grid; gap: var(--ui-space-3); padding: var(--ui-space-5); margin: 0; } .emm-testimonial__quote { margin: 0; font-size: var(--ui-step-0); line-height: 1.65; } .emm-testimonial__meta { margin: 0; color: var(--ui-color-muted); font-size: var(--ui-step--1); } .emm-testimonial__meta cite { color: var(--ui-color-ink-soft); font-style: normal; font-weight: 650; } .emm-testimonials__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ui-space-6); align-items: end; } .emm-review-summary { display: grid; gap: var(--ui-space-1); min-width: 9rem; padding-left: var(--ui-space-5); border-left: var(--ui-border-hairline); } .emm-review-summary p { margin: 0; color: var(--ui-color-muted); font-size: var(--ui-step--1); } .emm-review-summary strong { color: var(--ui-color-ink); font-family: var(--ui-font-display); font-size: var(--ui-step-2); } .emm-testimonials__grid { display: grid; grid-template-columns: repeat(var(--ui-testimonial-columns, 3), minmax(0, 1fr)); gap: var(--ui-space-4); } .emm-testimonials-section--featured .emm-testimonials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-testimonials-section--featured .emm-testimonial:first-child { grid-row: span 2; align-content: center; } .emm-testimonials-section--featured .emm-testimonial:first-child .emm-testimonial__quote { font-size: var(--ui-step-2); } .emm-richtext { font-size: var(--ui-step-0); line-height: 1.75; color: var(--ui-color-ink-soft); } .emm-richtext p, .emm-richtext ul, .emm-richtext ol, .emm-richtext blockquote { margin-block: 0 1em; } .emm-richtext h2, .emm-richtext h3, .emm-richtext h4 { margin: 1.2em 0 0.5em; color: var(--ui-color-ink); line-height: 1.25; } .emm-richtext a { color: var(--ui-color-accent); } .emm-richtext blockquote { border-left: 1px solid var(--ui-color-line-strong); padding-left: var(--ui-space-4); color: var(--ui-color-muted); } .emm-empty { padding: var(--ui-space-8); text-align: center; color: var(--ui-color-muted); border: var(--ui-border-hairline); border-radius: var(--ui-radius-md); } @media (min-width: 62rem) { .emm-title { font-size: clamp(1.56rem, 1.2rem + 1.05vw, 2.2rem); } .emm-title--display { font-size: clamp(1.78rem, 1.28rem + 1.45vw, 2.6rem); } .emm-header__menu-btn { display: none; } .emm-nav--desktop { display: block; } .emm-header__inner { display: flex; align-items: center; min-height: 4.9rem; gap: var(--ui-space-6); } .emm-header__wordmark { order: 1; justify-self: auto; font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); } .emm-header__left { order: 2; margin-left: clamp(1.1rem, 2.6vw, 2.6rem); } .emm-header__right { order: 3; margin-left: auto; justify-self: auto; } .emm-cart-panel { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(27rem, 92vw); max-height: 100dvh; border-top: none; border-bottom: none; border-left: var(--ui-border-hairline); box-shadow: -14px 0 32px rgba(17, 21, 27, 0.18); transform: translateX(100%); opacity: 1; visibility: visible; pointer-events: none; z-index: calc(var(--ui-z-drawer) + 6); } .emm-cart-panel.is-open { transform: translateX(0); pointer-events: auto; } .emm-cart-panel__inner { height: 100dvh; background: var(--ui-color-ivory); } } @media (max-width: 61.99rem) { .emm-header__inner { min-height: 4.35rem; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0.35rem; } .emm-header.is-compact .emm-header__inner { min-height: 3.9rem; } .emm-header__left { grid-column: 1; gap: 0.15rem; } .emm-header__wordmark { grid-column: 2; justify-self: start; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.75rem); } .emm-header__right { grid-column: 4; gap: 0.15rem; } .emm-header__wordmark { letter-spacing: -0.015em; } .emm-header__wordmark img { height: 1.75rem; } .emm-search-form { grid-template-columns: 1fr; } .emm-search-form .emm-btn { width: 100%; } .emm-search-panel { max-height: var(--ui-search-max-height); } .emm-account-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2); } .emm-account-panel__link { min-height: 2.7rem; border-radius: var(--ui-radius-pill); padding: 0.4rem 0.75rem; } .emm-field { font-size: 16px; }  input, textarea, select { font-size: 16px; } .emm-cart-panel { position: fixed; left: 0; right: 0; top: var(--ui-cart-top, var(--ui-header-height, 4.35rem)); bottom: auto; max-height: min(78dvh, var(--ui-cart-max-height, 78dvh)); border-left: none; box-shadow: 0 14px 30px rgba(17, 21, 27, 0.16); } .emm-cart-panel__actions { grid-template-columns: 1fr; } } @media (max-width: 64rem) { .emm-hero { --ui-hero-seamless-breakout: clamp(1.5rem, 4vw, 3rem); --ui-hero-seamless-side-fade: clamp(0.85rem, 2.2vw, 1.6rem); --ui-hero-seamless-bottom-fade: clamp(3.25rem, 11vw, 6rem); } .emm-hero__shell { min-height: clamp( 300px, calc((min(var(--ui-container-max), calc(100vw - (var(--ui-page-pad) * 2))) * 9) / 16), 720px ); } .emm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-products-grid { grid-template-columns: repeat(min(2, var(--ui-columns, 2)), minmax(0, 1fr)); } .emm-slider-nav { display: none; } } @media (max-width: 48rem) { .emm-faq-section--split .emm-faq-layout { grid-template-columns: minmax(0, 1fr); } .emm-stats-grid--band .emm-stats-grid__item + .emm-stats-grid__item { border-left: 0; border-top: var(--ui-border-hairline); } .emm-hero { --ui-hero-seamless-breakout: 0; --ui-hero-seamless-side-fade: 0; --ui-hero-seamless-top-fade: clamp(4.75rem, 18vw, 7rem); --ui-hero-seamless-bottom-fade: clamp(2.5rem, 10vw, 4rem); } .emm-hero__shell { min-height: clamp( 200px, calc((min(var(--ui-container-max), calc(100vw - (var(--ui-page-pad) * 2))) * 9) / 16), 420px ); } :root { --ui-section-pad: clamp(1.2rem, 5.8vw, 2rem); } .emm-section--page { padding-top: clamp(0.5rem, 2.8vw, 0.9rem); padding-bottom: clamp(1.15rem, 5.2vw, 1.9rem); } .emm-grid--2, .emm-grid--3, .emm-grid--4, .emm-products-grid, .emm-newsletter form { grid-template-columns: 1fr; }  .emm-collections .emm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-split { gap: var(--ui-space-3); } .emm-image-text--quote-cta .emm-quote-cta-grid { grid-template-columns: 1fr; grid-template-areas: "content" "actions" "media"; gap: clamp(0.9rem, 3.6vw, 1.3rem); } .emm-image-text--quote-cta .emm-quote-cta-grid.is-media-only { grid-template-areas: "media"; } .emm-image-text--quote-cta .emm-quote-cta-body { -webkit-line-clamp: 4; } .emm-image-text--quote-cta .emm-quote-cta-actions { width: 100%; } .emm-image-text--quote-cta .emm-quote-cta-actions .emm-quote-cta-btn { width: 100%; justify-content: center; } .emm-image-text--quote-cta .emm-quote-cta-media { min-height: clamp(12.6rem, 54vw, 17rem); } .emm-hero__inner { min-height: inherit; height: 100%; align-items: stretch; justify-items: start; text-align: left; padding-block: clamp(1rem, 4.8vw, 1.8rem); } .emm-hero__content { gap: var(--ui-space-3); max-width: min(30rem, 100%); } .emm-hero--align-mobile-center .emm-hero__inner { justify-items: start; } .emm-hero--align-mobile-center .emm-hero__content { margin-inline: 0 auto; } .emm-hero--align-mobile-right .emm-hero__inner { justify-items: start; } .emm-hero--align-mobile-right .emm-hero__content { margin-inline: 0 auto; } .emm-hero__content .emm-title { font-size: clamp(1.45rem, 7.2vw, 2.1rem); line-height: 1.08; } .emm-hero__content .emm-copy { font-size: clamp(0.9rem, 3.5vw, 1.05rem); line-height: 1.4; } .emm-hero__meta { gap: var(--ui-space-2); font-size: var(--ui-step--1); } .emm-hero__actions { width: 100%; display: grid; gap: 0.7rem; max-width: min(26rem, 100%); } .emm-hero__actions .emm-btn { width: 100%; min-height: 2.55rem; font-size: var(--ui-step--1); } .emm-hero--seamless-banner .emm-hero__media { inset: 0; width: 100%; max-width: none; transform: none; } .emm-hero__seamless-fade--left, .emm-hero__seamless-fade--right { display: none; } .emm-announcement__dismiss { inset-inline-end: var(--ui-space-2); } .emm-product-track { grid-auto-columns: minmax(11rem, 74vw); } .emm-site-footer__grid { grid-template-columns: 1fr; gap: var(--ui-space-6); } .emm-site-footer__form { grid-template-columns: 1fr; } } .emm-simple-header__inner { width: min(var(--ui-simple-header-max, 54rem), 100%); display: grid; gap: var(--ui-space-3); } .emm-simple-header--center .emm-simple-header__inner { margin-inline: auto; text-align: center; } .emm-simple-header__divider { width: min(5rem, 22vw); border-top: var(--ui-border-hairline); margin-bottom: var(--ui-space-2); } .emm-simple-header--center .emm-simple-header__divider { margin-inline: auto; } .emm-simple-text__inner { width: min(var(--ui-simple-text-max, 54rem), 100%); display: grid; gap: var(--ui-space-3); } .emm-simple-text--center .emm-simple-text__inner { margin-inline: auto; text-align: center; } .emm-simple-text__content { max-width: 72ch; } .emm-simple-text--center .emm-simple-text__content { margin-inline: auto; } .emm-stats-grid__items { display: grid; gap: var(--ui-space-4); grid-template-columns: repeat(var(--ui-stats-cols, 4), minmax(0, 1fr)); margin: 0; } .emm-stats-grid__item { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); background: color-mix(in srgb, var(--ui-color-white) 92%, var(--ui-color-paper)); padding: var(--ui-space-5); display: grid; gap: var(--ui-space-2); } .emm-stats-grid__value { margin: 0; font-family: var(--ui-font-display); font-size: clamp(1.6rem, 2.6vw, 2.5rem); color: var(--ui-color-ink); line-height: 1.08; order: -1; } .emm-stats-grid--band .emm-stats-grid__items { gap: 0; border-block: var(--ui-border-hairline); } .emm-stats-grid--band .emm-stats-grid__item { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .emm-stats-grid--band .emm-stats-grid__item + .emm-stats-grid__item { border-left: var(--ui-border-hairline); } .emm-stats-grid__label { margin: 0; font-size: var(--ui-step-0); color: var(--ui-color-ink-soft); } .emm-logo-cloud__grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--ui-space-4); --ui-logo-grid-cols-active: var(--ui-logo-cols, 5); --ui-logo-grid-gap-active: var(--ui-space-4); } .emm-logo-cloud__item { border: 0; border-radius: 0; background: transparent; min-height: calc(var(--ui-logo-height, 2.6rem) + clamp(0.85rem, 1.6vw, 1.15rem)); display: flex; align-items: center; justify-content: center; padding: 0; text-decoration: none; } .emm-logo-cloud__grid .emm-logo-cloud__item { flex: 0 0 calc((100% - ((var(--ui-logo-grid-cols-active) - 1) * var(--ui-logo-grid-gap-active))) / var(--ui-logo-grid-cols-active)); max-width: calc((100% - ((var(--ui-logo-grid-cols-active) - 1) * var(--ui-logo-grid-gap-active))) / var(--ui-logo-grid-cols-active)); } .emm-logo-cloud__item img { width: auto; max-width: 100%; height: var(--ui-logo-height, 2.6rem); object-fit: contain; } .emm-logo-cloud--mono .emm-logo-cloud__item img { filter: grayscale(1); opacity: 0.88; } .emm-logo-cloud--accreditations .emm-logo-cloud__item { background: transparent; border-color: var(--ui-color-line); } .emm-logo-cloud--accreditations .emm-logo-cloud__item img { max-width: 10rem; } .emm-logo-cloud--enhanced .emm-logo-cloud__grid { gap: var(--ui-logo-gap, var(--ui-space-4)); --ui-logo-grid-gap-active: var(--ui-logo-gap, var(--ui-space-4)); } .emm-logo-cloud .emm-stack > header + .emm-logo-cloud__viewport, .emm-logo-cloud .emm-stack > header + .emm-logo-cloud__grid { margin-top: clamp(1rem, 2.4vw, 1.8rem); } .emm-logo-cloud__viewport { position: relative; width: 100%; max-width: 100%; overflow: hidden; --ui-logo-per-view-active: var(--ui-logo-per-view, 5); --ui-logo-gap-active: var(--ui-logo-gap, var(--ui-space-4)); --ui-logo-slot: calc((100% - ((var(--ui-logo-per-view-active) - 1) * var(--ui-logo-gap-active))) / var(--ui-logo-per-view-active)); --ui-logo-shift: calc((var(--ui-logo-count, 1) * var(--ui-logo-slot)) + ((var(--ui-logo-count, 1) - 1) * var(--ui-logo-gap-active))); } .emm-logo-cloud__viewport.is-fade { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-size: 100% 100%; mask-repeat: no-repeat; } .emm-logo-cloud__viewport.is-fade::before, .emm-logo-cloud__viewport.is-fade::after { content: ""; position: absolute; top: 0; width: clamp(28px, 6vw, 72px); height: 100%; z-index: 2; pointer-events: none; } .emm-logo-cloud__viewport.is-fade::before { left: 0; background: linear-gradient(to right, #000 0%, transparent 100%); } .emm-logo-cloud__viewport.is-fade::after { right: 0; background: linear-gradient(to left, #000 0%, transparent 100%); } @supports ((mask-image: linear-gradient(to right, #000, transparent)) or (-webkit-mask-image: linear-gradient(to right, #000, transparent))) { .emm-logo-cloud__viewport.is-fade::before, .emm-logo-cloud__viewport.is-fade::after { display: none; } } .emm-logo-cloud__track { display: flex; gap: var(--ui-logo-gap-active); width: max-content; min-width: max-content; align-items: center; } .emm-logo-cloud__rail { display: none; } .emm-logo-cloud__rail-track { display: flex; width: max-content; min-width: max-content; align-items: center; will-change: transform; } .emm-logo-cloud__rail-track.is-animated { animation: emm-logo-cloud-rail-scroll linear infinite; animation-duration: calc(var(--ui-logo-speed, 36s) * 2.4); } .emm-logo-cloud__rail-group { display: flex; align-items: center; gap: var(--ui-logo-gap-active); padding-right: var(--ui-logo-gap-active); flex: 0 0 auto; } .emm-logo-cloud__rail-track:not(.is-animated) .emm-logo-cloud__rail-group { padding-right: 0; } .emm-logo-cloud__track .emm-logo-cloud__item { min-width: var(--ui-logo-slot); flex: 0 0 var(--ui-logo-slot); } .emm-logo-cloud__track.is-animated { animation: emm-logo-cloud-scroll linear infinite; animation-duration: var(--ui-logo-speed, 36s); } .emm-logo-cloud__viewport.pause-on-hover:hover .emm-logo-cloud__track.is-animated { animation-play-state: paused; } @keyframes emm-logo-cloud-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--ui-logo-shift))); } } @keyframes emm-logo-cloud-rail-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .emm-feature-list__items { display: grid; gap: var(--ui-space-4); } .emm-feature-list--grid .emm-feature-list__items { grid-template-columns: repeat(var(--ui-feature-cols, 3), minmax(0, 1fr)); } .emm-feature-list__item { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); background: color-mix(in srgb, var(--ui-color-white) 90%, var(--ui-color-paper)); padding: var(--ui-space-5); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ui-space-4); align-items: start; } .emm-feature-list--list .emm-feature-list__item { grid-template-columns: 1fr; } .emm-feature-list__icon { width: 2rem; height: 2rem; border-radius: 50%; border: var(--ui-border-hairline); display: inline-flex; align-items: center; justify-content: center; color: var(--ui-color-ink-soft); background: color-mix(in srgb, var(--ui-color-paper) 85%, white); } .emm-feature-list__icon svg { width: 1rem; height: 1rem; stroke: currentColor; } .emm-contact-panel__details > p { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; } .emm-contact-panel__details > p > svg { width: 1.1rem; height: 1.1rem; margin-top: 0.18rem; stroke: currentColor; } .emm-contact-panel__details > p > span { display: grid; gap: 0.22rem; } .emm-contact-panel__details > p strong { font-style: normal; font-size: var(--ui-step--1); } .emm-process-timeline__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-4); } .emm-process-timeline__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ui-space-4); border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); background: color-mix(in srgb, var(--ui-color-white) 92%, var(--ui-color-paper)); padding: var(--ui-space-5); transition: border-color var(--ui-motion-fast, 180ms) var(--ui-ease-standard, ease), transform var(--ui-motion-fast, 180ms) var(--ui-ease-standard, ease); } .emm-process-timeline--vertical .emm-process-timeline__item:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--ui-space-5) + 1.1rem); top: calc(100% + 1px); width: 1px; height: var(--ui-space-4); background: var(--ui-color-line); } .emm-process-timeline__index { width: 2.2rem; height: 2.2rem; border-radius: var(--ui-radius-pill); border: var(--ui-border-hairline); display: inline-flex; align-items: center; justify-content: center; font-size: var(--ui-step--1); color: var(--ui-color-muted); } .emm-process-timeline--compact .emm-process-timeline__list { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .emm-process-timeline--compact .emm-process-timeline__item { grid-template-columns: 1fr; } @media (hover: hover) and (pointer: fine) { .emm-process-timeline__item:hover { border-color: var(--ui-color-line-strong); transform: translateY(-2px); } } .emm-case-study__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr); gap: clamp(var(--ui-space-6), 6vw, var(--ui-space-10)); align-items: center; } .emm-case-study[data-media-side="left"] .emm-case-study__media { order: -1; } .emm-case-study__media { margin: 0; overflow: hidden; border-radius: var(--ui-radius-lg); background: var(--ui-color-line); box-shadow: var(--ui-shadow-card); } .emm-case-study__media img { display: block; width: 100%; aspect-ratio: var(--ui-case-study-ratio, 4/3); object-fit: cover; } .emm-case-study__content { min-width: 0; } .emm-case-study__summary { max-width: 62ch; } .emm-case-study__story { display: grid; gap: var(--ui-space-4); margin: 0; } .emm-case-study__story > div { display: grid; grid-template-columns: minmax(6rem, 0.3fr) minmax(0, 1fr); gap: var(--ui-space-4); padding-top: var(--ui-space-4); border-top: var(--ui-border-hairline); } .emm-case-study__story dt, .emm-case-study__metrics dt { color: var(--ui-color-muted); font-size: var(--ui-step--1); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; } .emm-case-study__story dd, .emm-case-study__metrics dd { margin: 0; } .emm-case-study__story dd { color: var(--ui-color-ink-soft); line-height: 1.65; } .emm-case-study__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--ui-space-3); margin: 0; } .emm-case-study__metrics > div { display: flex; flex-direction: column; gap: var(--ui-space-1); padding: var(--ui-space-4); border: var(--ui-border-hairline); border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--ui-color-white) 76%, transparent); } .emm-case-study__metrics dd { color: var(--ui-color-ink); font-family: var(--ui-font-display); font-size: var(--ui-step-2); font-weight: var(--ui-font-display-weight, 600); order: -1; } .emm-case-study__action { justify-self: start; } .emm-case-study--editorial .emm-case-study__inner { grid-template-columns: minmax(0, 1fr); } .emm-case-study--editorial .emm-case-study__media { order: -1; } .emm-case-study.is-text-only .emm-case-study__inner, .emm-case-study.is-media-only .emm-case-study__inner { grid-template-columns: minmax(0, 1fr); } .emm-case-study.is-media-only .emm-case-study__media { width: 100%; } .emm-team-grid__items { display: grid; gap: var(--ui-space-4); grid-template-columns: repeat(var(--ui-team-cols, 3), minmax(0, 1fr)); } .emm-team-grid__item { overflow: hidden; padding: var(--ui-space-4); } .emm-team-grid__media { border-radius: var(--ui-radius-md); overflow: hidden; border: var(--ui-border-hairline); background: color-mix(in srgb, var(--ui-color-paper) 85%, white); aspect-ratio: var(--ui-team-ratio, 4/5); margin-bottom: var(--ui-space-4); } .emm-team-grid__media img { width: 100%; height: 100%; object-fit: cover; } .emm-quote-highlight__inner { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); background: color-mix(in srgb, var(--ui-color-white) 88%, var(--ui-color-paper)); padding: clamp(1.35rem, 3.4vw, 2.5rem); display: grid; gap: var(--ui-space-4); margin: 0; } .emm-quote-highlight__media { width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; border: var(--ui-border-hairline); } .emm-quote-highlight__media img { width: 100%; height: 100%; object-fit: cover; } .emm-quote-highlight blockquote { margin: 0; } .emm-quote-highlight--center .emm-quote-highlight__inner { justify-items: center; text-align: center; } .emm-contact-panel__inner { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); background: color-mix(in srgb, var(--ui-color-white) 88%, var(--ui-color-paper)); padding: clamp(1.3rem, 3.4vw, 2.4rem); display: grid; gap: var(--ui-space-5); } .emm-contact-panel__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ui-space-6); align-items: start; } .emm-contact-panel__details { margin: 0; font-style: normal; display: grid; gap: var(--ui-space-2); } .emm-contact-panel__details p { margin: 0; } .emm-contact-panel__actions { display: grid; gap: var(--ui-space-3); justify-items: start; } .emm-contact-panel--callout .emm-contact-panel__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .emm-contact-panel--callout .emm-contact-panel__body { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); } .emm-contact-panel--callout .emm-contact-panel__actions { display: flex; flex-wrap: wrap; align-items: center; } .emm-related-content__head { max-width: 48rem; } .emm-related-content__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-5); } .emm-related-content__card { min-width: 0; border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); overflow: hidden; background: color-mix(in srgb, var(--ui-color-white) 90%, var(--ui-color-paper)); } .emm-related-content__link { display: grid; height: 100%; color: inherit; text-decoration: none; } .emm-related-content__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ui-color-paper); } .emm-related-content[data-image-ratio="4-3"] .emm-related-content__media { aspect-ratio: 4 / 3; } .emm-related-content__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--ui-time-slow) var(--ui-ease); } .emm-related-content__copy { display: grid; gap: var(--ui-space-3); align-content: start; padding: var(--ui-space-5); } .emm-related-content__title { font-family: var(--ui-font-display); font-size: var(--ui-step-1); font-weight: 650; line-height: 1.2; } .emm-related-content__action { font-size: var(--ui-step--1); font-weight: 650; margin-top: auto; } .emm-related-content__link:hover .emm-related-content__media img { transform: scale(1.025); } .emm-related-content--editorial .emm-related-content__card:first-child { grid-column: span 2; } .emm-cta-strip__inner { border: var(--ui-border-hairline); border-radius: var(--ui-radius-lg); padding: clamp(1rem, 2.6vw, 1.6rem) clamp(1rem, 2.8vw, 2rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ui-space-4); align-items: center; } .emm-cta-strip--center .emm-cta-strip__inner { justify-items: center; text-align: center; grid-template-columns: 1fr; } .emm-cta-strip__actions { display: inline-flex; align-items: center; gap: var(--ui-space-3); flex-wrap: wrap; } @media (max-width: 70rem) { .emm-testimonials__grid, .emm-testimonials-section--featured .emm-testimonials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-case-study__inner { grid-template-columns: minmax(0, 1fr); } .emm-case-study__media, .emm-case-study[data-media-side="right"] .emm-case-study__media { order: -1; } .emm-stats-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-logo-cloud__grid { --ui-logo-grid-cols-active: 3; } .emm-logo-cloud--enhanced .emm-logo-cloud__grid { --ui-logo-grid-cols-active: var(--ui-logo-cols-tablet, 3); } .emm-logo-cloud__viewport { --ui-logo-per-view-active: var(--ui-logo-per-view-tablet, 4); } .emm-feature-list--grid .emm-feature-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-team-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-contact-panel__body, .emm-cta-strip__inner { grid-template-columns: 1fr; } .emm-contact-panel--callout .emm-contact-panel__inner { grid-template-columns: minmax(0, 1fr); } .emm-related-content__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 48rem) { .emm-related-content__grid { grid-template-columns: minmax(0, 1fr); } .emm-related-content--editorial .emm-related-content__card:first-child { grid-column: auto; } .emm-testimonials__head, .emm-testimonials__grid, .emm-testimonials-section--featured .emm-testimonials__grid { grid-template-columns: minmax(0, 1fr); } .emm-review-summary { padding: var(--ui-space-3) 0 0; border-left: 0; border-top: var(--ui-border-hairline); } .emm-testimonials-section--featured .emm-testimonial:first-child { grid-row: auto; } .emm-case-study__story > div { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-2); } .emm-case-study__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-stats-grid__items, .emm-feature-list--grid .emm-feature-list__items, .emm-team-grid__items, .emm-process-timeline--compact .emm-process-timeline__list { grid-template-columns: 1fr; } .emm-process-timeline__item { gap: var(--ui-space-3); padding: var(--ui-space-4); } .emm-process-timeline--vertical .emm-process-timeline__item:not(:last-child)::after { left: calc(var(--ui-space-4) + 1.1rem); } .emm-logo-cloud__grid { --ui-logo-grid-cols-active: 1; } .emm-logo-cloud--enhanced .emm-logo-cloud__grid { --ui-logo-grid-cols-active: var(--ui-logo-cols-mobile, 2); } .emm-logo-cloud__viewport { display: none; } .emm-logo-cloud__rail { display: block; overflow: hidden; --ui-logo-gap-active: 8px; --ui-logo-per-view-mobile-active: clamp(1, var(--ui-logo-per-view-mobile, 2), 3); --ui-logo-mobile-slot: calc((100vw - (2 * var(--ui-page-pad, 1rem)) - ((var(--ui-logo-per-view-mobile-active) - 1) * var(--ui-logo-gap-active))) / var(--ui-logo-per-view-mobile-active)); } .emm-logo-cloud__rail .emm-logo-cloud__item { flex: 0 0 var(--ui-logo-mobile-slot); width: var(--ui-logo-mobile-slot); min-width: 0; max-width: var(--ui-logo-mobile-slot); } .emm-logo-cloud__rail .emm-logo-cloud__item img { height: min(var(--ui-logo-height, 2.6rem), 2rem); width: auto; max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .emm-process-timeline__item { transition: none; } .emm-process-timeline__item:hover { transform: none; } .emm-logo-cloud__track.is-animated, .emm-logo-cloud__rail-track.is-animated { animation: none; } .emm-image-text--quote-cta [data-cta-motion] { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } 
 :root { --ui-focus-ring: color-mix(in srgb, var(--ui-color-accent, #1d324d) 62%, #ffffff); --ui-focus-offset: 2px; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: var(--ui-focus-offset); } body { color: var(--ui-color-ink, #15181d); background: var(--ui-color-ivory, #fbf9f5); font-family: var(--ui-font-body, "Helvetica Neue", Arial, sans-serif); } :where(h1, h2, h3, h4, h5, h6) { font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif); letter-spacing: -0.01em; text-wrap: balance; } :where(p, li, label, input, select, textarea, button, a, span) { font-family: var(--ui-font-body, "Helvetica Neue", Arial, sans-serif); }  .product-image, .product-card__image, .emm-product-media { aspect-ratio: 1 / 1 !important; border-radius: var(--ui-radius-lg, 0.9rem); overflow: hidden; clip-path: inset(0 round var(--ui-radius-lg, 0.9rem)); } .product-image img, .product-card__image img, .emm-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }  .emm-kicker, .emm-nav__link, .emm-header__shortcut, .emm-product-badge { text-transform: none !important; letter-spacing: 0.02em !important; }  :where(.btn, .emm-btn) { border-radius: var(--ui-radius-pill, 999px); transition: background var(--ui-time-base, 200ms) var(--ui-ease, ease), color var(--ui-time-base, 200ms) var(--ui-ease, ease), border-color var(--ui-time-base, 200ms) var(--ui-ease, ease), transform var(--ui-time-base, 200ms) var(--ui-ease, ease); } :where(.btn, .emm-btn):hover { transform: translateY(-1px); } :where(input, select, textarea, .form-input, .form-select, .form-textarea, .qty-input) { border-color: var(--ui-color-line-strong, #bfb5a8); }  .catalog-title, .catalog-page .catalog-title, .catalog-page h1, .shop-page .shop-title { font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif) !important; letter-spacing: -0.01em; } .catalog-subtitle, .shop-subtitle, .product-count { color: var(--ui-color-muted, #66717d) !important; } .catalog-page:not(.emm-page), .shop-page { max-width: var(--ui-container-max, 78rem) !important; margin: 0 auto; padding: clamp(2rem, 4.6vw, 3.25rem) var(--ui-page-pad, 1rem) !important; }  .catalog-page.emm-page { max-width: none !important; margin: 0 !important; padding: 0 !important; } .catalog-header, .shop-header { margin-bottom: var(--ui-space-8, 2rem) !important; padding-bottom: var(--ui-space-5, 1.25rem) !important; border-bottom: var(--ui-border-hairline, 1px solid #d9d2c8) !important; } .emm-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.38rem; margin: 0 0 var(--ui-space-5, 1.25rem); font-size: var(--ui-step--1, 0.9rem); color: var(--ui-color-muted, #66717d); } .emm-breadcrumbs a { color: inherit; text-decoration: none; } .emm-breadcrumbs a:hover { color: var(--ui-color-ink, #15181d); } .emm-page-head { margin-bottom: var(--ui-space-8, 2rem) !important; padding-bottom: var(--ui-space-5, 1.25rem) !important; border-bottom: var(--ui-border-hairline, 1px solid #d9d2c8) !important; } .emm-page-title { margin: 0; font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif) !important; font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.7rem); line-height: 1.06; letter-spacing: -0.01em; } .emm-page-subtitle { margin: 0.48rem 0 0; color: var(--ui-color-muted, #66717d); font-size: var(--ui-step-0, 1rem); max-width: 58ch; } .catalog-toolbar, .shop-toolbar { margin-bottom: var(--ui-space-8, 2rem) !important; } .products-grid { gap: clamp(1rem, 2vw, 1.75rem) !important; } .product-card, .products-grid .product-card { border: var(--ui-border-hairline, 1px solid #d9d2c8) !important; border-radius: var(--ui-radius-lg, 0.9rem) !important; box-shadow: none !important; background: var(--ui-color-white, #fff) !important; } .product-card:hover, .products-grid .product-card:hover { box-shadow: 0 8px 24px rgba(20, 24, 30, 0.06) !important; border-color: var(--ui-color-line-strong, #bfb5a8) !important; } .emm-product-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; min-height: 1.55rem; padding: 0.15rem 0.55rem; border-radius: var(--ui-radius-pill, 999px); border: var(--ui-border-hairline, 1px solid #d9d2c8); background: color-mix(in srgb, var(--ui-color-paper, #f7f4ef) 92%, #fff); color: var(--ui-color-ink-soft, #262c34); font-size: 0.73rem; font-weight: 600; line-height: 1; z-index: 1; } .emm-empty-state__title { margin: 0 0 0.6rem; font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif); font-size: clamp(1.2rem, 0.95rem + 1vw, 1.7rem); letter-spacing: -0.01em; } .emm-filter-controls { align-items: center; } .emm-pagination .emm-btn { min-height: 2.35rem; padding: 0.45rem 0.9rem; }  .product-container .title, .product-container h1.title { font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif) !important; letter-spacing: -0.01em !important; line-height: 1.06; text-transform: none !important; } .product-container .subtitle, .product-container .label, .product-container .breadcrumbs, .product-container .accordion .content { color: var(--ui-color-ink-soft, #262c34); } .product-container .field .label, .product-container .label { text-transform: none !important; letter-spacing: 0.01em !important; font-weight: 600; } .product-container .price-row { color: var(--ui-color-ink, #15181d); } .product-container .field, .product-container .choices button, .product-container .qty, .product-container .accordion details, .product-container .hero, .product-container .thumbs button { border-color: var(--ui-color-line, #d9d2c8) !important; } .product-container .choices button { background: var(--ui-color-white, #fff) !important; color: var(--ui-color-ink, #15181d) !important; border-color: var(--ui-color-line-strong, #bfb5a8) !important; font-weight: 600; } .product-container .choices button:hover:not(:disabled) { background: #f2eee8 !important; border-color: #7f8a99 !important; color: var(--ui-color-ink, #15181d) !important; } .product-container .choices button[aria-pressed="true"] { background: var(--ui-color-ink, #15181d) !important; border-color: var(--ui-color-ink, #15181d) !important; color: var(--ui-color-white, #ffffff) !important; } .product-container .choices button[aria-pressed="true"]:hover, .product-container .choices button[aria-pressed="true"]:focus-visible { background: var(--ui-color-ink, #15181d) !important; border-color: var(--ui-color-ink, #15181d) !important; color: var(--ui-color-white, #ffffff) !important; } .product-container .choices button:disabled, .product-container .choices button[disabled] { opacity: 1 !important; background: #eceff3 !important; border-color: #cfd4dc !important; color: #5f6874 !important; } .product-container .buy { display: grid; grid-template-columns: auto minmax(10rem, 1fr) minmax(10rem, 1fr); align-items: stretch; gap: 0.75rem; } .product-container .buy .qty { min-width: 10.25rem; border-radius: var(--ui-radius-md, 0.6rem); border: var(--ui-border-hairline, 1px solid #d9d2c8); background: var(--ui-color-white, #fff); } .product-container .buy .qty button, .product-container .buy .qty input { font-family: var(--ui-font-body, "Helvetica Neue", Arial, sans-serif); } .product-container .buy .btn { min-height: 3.25rem; border-radius: var(--ui-radius-md, 0.6rem); font-size: 1.05rem; font-weight: 600; line-height: 1; border-width: 1px; } .product-container .buy #addBtn.btn-primary { background: var(--ui-color-ink, #15181d) !important; border-color: var(--ui-color-ink, #15181d) !important; color: var(--ui-color-white, #fff) !important; } .product-container .buy #addBtn.btn-primary:disabled { opacity: 1 !important; background: #d3d6db !important; border-color: #c0c6cf !important; color: #15181d !important; } .product-container .buy #buyBtn.btn-secondary { background: var(--ui-color-white, #fff) !important; border-color: #9ea7b3 !important; color: var(--ui-color-ink, #15181d) !important; }  body { background: var(--ui-color-bg, #0b0b0d); color: var(--ui-color-ink, #ffffff); } .emm-section { background: transparent; } .emm-card, .emm-faq details, .emm-field, .emm-search-panel__inner, .emm-account-panel__inner { border-width: 0 !important; box-shadow: none !important; } .emm-container { width: min(80rem, calc(100% - (var(--ui-page-pad) * 2))); } .emm-header__bar { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; will-change: transform, opacity, background, border-color, box-shadow; transition: background 320ms var(--ui-ease), box-shadow 360ms var(--ui-ease), backdrop-filter 320ms var(--ui-ease), width 320ms var(--ui-ease), margin 320ms var(--ui-ease); } .emm-header { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .emm-body--header-shell-pill, .emm-header--shell-pill, .emm-header--shell-pill ~ .emm-drawer { --ui-header-pill-fill: linear-gradient( 180deg, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-pill-solid-top, 98%), #1b1c22) 0%, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-pill-solid-mid, 95%), #111217) 54%, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-pill-solid-bottom, 92%), #07080b) 100% ); --ui-header-pill-border: var(--ui-storefront-glass-pill-border-solid, rgba(255, 255, 255, 0.08)); --ui-header-pill-shadow: var(--ui-storefront-glass-pill-shadow-solid, 0 22px 58px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.02)); --ui-header-pill-backdrop: var(--ui-storefront-glass-pill-backdrop, saturate(220%) blur(20px) brightness(1.08)); --ui-menu-surface-fill: var(--ui-header-pill-fill); --ui-menu-surface-border: var(--ui-header-pill-border); --ui-menu-surface-shadow: var(--ui-header-pill-shadow); --ui-menu-surface-backdrop: var(--ui-header-pill-backdrop); --ui-menu-surface-radius: clamp(1.35rem, 1.05rem + 0.9vw, 1.75rem); } .emm-header--shell-pill { --ui-header-shell-gap: clamp(0.35rem, 0.8vw, 0.6rem); --ui-header-shell-radius: var(--ui-menu-surface-radius); --ui-header-shell-width: min( calc(var(--ui-container-max) + clamp(1.5rem, 3vw, 2.75rem)), calc(100% - (var(--ui-page-pad) * 2)) ); padding-top: var(--ui-header-shell-gap); } .emm-header--shell-pill .emm-header__bar { width: var(--ui-header-shell-width); margin: 0 auto 0; box-sizing: border-box; border: 0; border-radius: var(--ui-header-shell-radius); overflow: visible; box-shadow: var(--ui-header-pill-shadow); isolation: isolate; } .emm-header--shell-pill .emm-header__bar::before, .emm-header--shell-pill .emm-header__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; clip-path: inset(0 round var(--ui-header-shell-radius)); pointer-events: none; } .emm-header--shell-pill .emm-header__bar::before { z-index: 1; border: 1px solid var(--ui-header-pill-border); opacity: 0; transition: opacity 220ms var(--ui-ease); } .emm-header--shell-pill .emm-header__bar::after { z-index: 0; background: var(--ui-header-pill-fill); opacity: 0; transform: translateY(0) scale(1); transform-origin: center top; filter: blur(0); transition: opacity 280ms var(--ui-ease), transform 420ms var(--ui-ease), filter 420ms var(--ui-ease); } .emm-header--shell-pill .emm-header__inner { position: relative; z-index: 2; width: min(var(--ui-container-max), calc(100% - clamp(1rem, 2.1vw, 1.75rem))); } .emm-body--header-shell-traditional, .emm-header--shell-traditional, .emm-header--shell-traditional ~ .emm-drawer { --ui-header-traditional-fill: linear-gradient( 180deg, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-traditional-top, 96%), transparent) 0%, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-traditional-mid, 84%), transparent) 58%, transparent 100% ); --ui-header-traditional-shadow: var(--ui-storefront-glass-traditional-shadow, 0 18px 44px rgba(0, 0, 0, 0.22)); --ui-header-traditional-backdrop: var(--ui-storefront-glass-traditional-backdrop, saturate(140%) blur(14px)); --ui-menu-surface-fill: var(--ui-header-traditional-fill), linear-gradient( 180deg, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-traditional-menu-top, 97%), #17181d) 0%, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-traditional-menu-bottom, 94%), #101115) 100% ); --ui-menu-surface-border: var(--ui-storefront-glass-traditional-border, color-mix(in srgb, var(--ui-header-line, #2a2a2f) 72%, transparent)); --ui-menu-surface-shadow: var(--ui-header-traditional-shadow); --ui-menu-surface-backdrop: var(--ui-header-traditional-backdrop); --ui-menu-surface-radius: clamp(1rem, 0.8rem + 0.6vw, 1.25rem); } .emm-header--shell-traditional .emm-header__bar { background: var(--ui-header-traditional-fill); box-shadow: var(--ui-header-traditional-shadow); backdrop-filter: var(--ui-header-traditional-backdrop); -webkit-backdrop-filter: var(--ui-header-traditional-backdrop); } .emm-header.is-ready .emm-header__bar { animation: emm-header-bar-enter 520ms var(--ui-ease) both; } .emm-header:not(.is-scrolled) .emm-header__bar { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .emm-header--shell-pill.can-float:not(.is-scrolled) .emm-header__bar::after { transform: translateY(-0.3rem) scale(0.985); filter: blur(12px); } .emm-header--shell-pill.is-scrolled .emm-header__bar { background: var(--ui-header-pill-fill); box-shadow: var(--ui-header-pill-shadow); } .emm-header--shell-pill.is-scrolled .emm-header__bar::before { opacity: 1; } .emm-header--shell-pill.is-scrolled .emm-header__bar::after { opacity: 0; } .emm-header--shell-pill.is-first-scroll-filling .emm-header__bar::after { opacity: 0; animation: emm-header-pill-fill-in 620ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both; } .emm-header--shell-traditional.is-scrolled .emm-header__bar { background: var(--ui-header-traditional-fill); box-shadow: var(--ui-header-traditional-shadow); backdrop-filter: var(--ui-header-traditional-backdrop); -webkit-backdrop-filter: var(--ui-header-traditional-backdrop); } @media (hover: hover) and (pointer: fine) { .emm-header--shell-pill.can-float:hover .emm-header__bar, .emm-header--shell-pill.can-float:focus-within .emm-header__bar { background: var(--ui-header-pill-fill); box-shadow: var(--ui-header-pill-shadow); } .emm-header--shell-pill.can-float:hover .emm-header__bar::after, .emm-header--shell-pill.can-float:focus-within .emm-header__bar::after { opacity: 0; } .emm-header--shell-pill.can-float:hover .emm-header__bar::before, .emm-header--shell-pill.can-float:focus-within .emm-header__bar::before { opacity: 0; } .emm-header--shell-traditional.can-float:hover .emm-header__bar, .emm-header--shell-traditional.can-float:focus-within .emm-header__bar { background: var(--ui-header-traditional-fill); box-shadow: var(--ui-header-traditional-shadow); backdrop-filter: var(--ui-header-traditional-backdrop); -webkit-backdrop-filter: var(--ui-header-traditional-backdrop); } } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .emm-body--header-shell-pill, .emm-header--shell-pill, .emm-header--shell-pill ~ .emm-drawer { --ui-header-pill-fill: linear-gradient( 180deg, color-mix(in srgb, #ffffff var(--ui-storefront-glass-pill-liquid-white-top, 11%), transparent) 0%, color-mix(in srgb, #ffffff var(--ui-storefront-glass-pill-liquid-white-mid, 4%), transparent) 18%, transparent 44% ), radial-gradient( 130% 180% at 10% 0%, color-mix(in srgb, #ffffff var(--ui-storefront-glass-pill-liquid-radial, 10%), transparent) 0%, transparent 48% ), linear-gradient( 180deg, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-pill-liquid-tint-top, 10%), transparent) 0%, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-pill-liquid-tint-mid, 16%), transparent) 56%, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) var(--ui-storefront-glass-pill-liquid-tint-bottom, 22%), transparent) 100% ); --ui-header-pill-border: var(--ui-storefront-glass-pill-border-liquid, rgba(255, 255, 255, 0.1)); --ui-header-pill-shadow: var(--ui-storefront-glass-pill-shadow-liquid, 0 16px 42px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.03)); --ui-header-pill-backdrop: var(--ui-storefront-glass-pill-backdrop, saturate(220%) blur(20px) brightness(1.08)); } .emm-header--shell-pill .emm-header__bar::after { backdrop-filter: var(--ui-header-pill-backdrop); -webkit-backdrop-filter: var(--ui-header-pill-backdrop); } .emm-header--shell-pill .emm-header__bar { backdrop-filter: var(--ui-header-pill-backdrop); -webkit-backdrop-filter: var(--ui-header-pill-backdrop); } .emm-header--shell-pill.is-scrolled .emm-header__bar { backdrop-filter: var(--ui-header-pill-backdrop); -webkit-backdrop-filter: var(--ui-header-pill-backdrop); } @media (hover: hover) and (pointer: fine) { .emm-header--shell-pill.can-float:hover .emm-header__bar, .emm-header--shell-pill.can-float:focus-within .emm-header__bar { backdrop-filter: var(--ui-header-pill-backdrop); -webkit-backdrop-filter: var(--ui-header-pill-backdrop); } } } @keyframes emm-header-bar-enter { from { opacity: 0; transform: translateY(-0.45rem); } to { opacity: 1; transform: translateY(0); } } @keyframes emm-header-pill-fill-in { from { opacity: 0; transform: translateY(-0.32rem) scale(0.985); filter: blur(12px); } 55% { opacity: 0.78; } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .emm-header__inner { min-height: 4rem; } .emm-header__wordmark, .emm-header__menu-btn, .emm-icon-btn, .emm-nav__submenu-toggle { color: var(--ui-header-ink, #ffffff) !important; } .emm-header__menu-btn { min-width: 44px; min-height: 44px; padding: 0.24rem 0.36rem 0.24rem 0.32rem; margin-left: 0.2rem; border: 0 !important; border-radius: 999px; background: transparent !important; box-shadow: none !important; transition: background var(--ui-time-base) var(--ui-ease), box-shadow var(--ui-time-base) var(--ui-ease); } .emm-header__menu-btn:hover, .emm-header__menu-btn:focus-visible { border-color: transparent !important; background: transparent !important; } .emm-header__menu-btn:active, .emm-header__menu-btn[aria-expanded="true"] { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) !important; } .emm-header__wordmark img { height: 1.1rem; max-height: 1.1rem; } .emm-nav__link { color: var(--ui-header-ink-soft, #d4d4d8); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.01em !important; padding-inline: 0.6rem; } .emm-nav__link:hover, .emm-nav__link.is-active { color: var(--ui-header-ink, #ffffff); } .emm-search-panel__inner { background: var(--ui-menu-surface-fill, var(--ui-header-pill-fill)) !important; border-color: var(--ui-menu-surface-border, var(--ui-header-line, #2a2a2f)) !important; box-shadow: var(--ui-menu-surface-shadow, 0 24px 60px rgba(0, 0, 0, 0.28)) !important; backdrop-filter: var(--ui-menu-surface-backdrop, none) !important; -webkit-backdrop-filter: var(--ui-menu-surface-backdrop, none) !important; border-radius: var(--ui-menu-surface-radius, clamp(1rem, 0.8rem + 0.6vw, 1.25rem)); isolation: isolate; }  .emm-mobile-mega .emm-drawer__panel { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0 !important; border-radius: 0; background: #111215 !important; color: #f5f5f7; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; transform: translateY(-12px); transition: transform 180ms ease-out, opacity 180ms ease-out; } .emm-mobile-mega.is-open .emm-drawer__panel { transform: none; } .emm-mega-head { display: flex; align-items: center; justify-content: space-between; padding: max(12px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left)); border-bottom: 1px solid #ffffff16; } .emm-mega-brand { display: flex; align-items: center; min-height: 44px; } .emm-mega-brand img { width: 112px; height: 36px; object-fit: contain; } .emm-mega-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff20; border-radius: 50%; color: #f5f5f7; background: #ffffff08; cursor: pointer; } .emm-mega-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left)); scrollbar-width: thin; scrollbar-color: #555 transparent; } .emm-mega-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; } .emm-mega-intro h3 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; color: #f5f5f7; } .emm-mega-intro a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; color: #b7bbc3; } .emm-mega-group { margin: 0 0 16px; } .emm-mega-group:last-child { margin-bottom: 0; } .emm-mobile-mega h4 { margin: 0 0 4px; color: #9ca1ab; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .emm-mega-group ul { list-style: none; margin: 0; padding: 0; } .emm-mega-group li { margin: 0; } .emm-mega-group a, .emm-mega-explore a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 8px 0; color: #f5f5f7; text-decoration: none; border-bottom: 1px solid #ffffff10; font-size: 16px; line-height: 1.35; } .emm-mega-label { display: block; } .emm-mega-arrow, .emm-mega-explore a > span { flex: none; color: #9398a3; font-size: 16px; } .emm-mega-explore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; } .emm-mega-explore a { justify-content: center; flex-wrap: wrap; gap: 6px; padding: 8px 4px; border: 1px solid #ffffff20; border-radius: 10px; background: #ffffff06; font-size: 13px; } @media (max-width: 360px) { .emm-mega-explore a > span { display: none; } } .emm-mega-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px max(24px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); border-top: 1px solid #ffffff20; background: #17181c; } .emm-mega-quote { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 16px; border-radius: 12px; color: #111215; background: #f5f5f7; font-size: 14px; font-weight: 600; text-decoration: none; } .emm-mega-email { display: flex; align-items: center; min-height: 44px; color: #c2c5cd; font-size: 13px; text-decoration: none; } .emm-mobile-mega a:focus-visible, .emm-mobile-mega button:focus-visible { outline: 2px solid #b9d9ff; outline-offset: 4px; border-radius: 6px; } .emm-mobile-mega a[aria-current="page"] { color: #b9d9ff; } .emm-mobile-mega a:active, .emm-mega-close:active { opacity: .65; } @media (min-width: 600px) { .emm-mega-services { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } } @media (prefers-reduced-motion: reduce) { .emm-mobile-mega .emm-drawer__panel { transition: none; transform: none; } } .emm-drawer__panel { --ui-drawer-panel-gap: var(--ui-space-4); width: min(24rem, calc(100vw - (var(--ui-page-pad) * 2))); max-width: calc(100vw - (var(--ui-page-pad) * 2)); height: auto; max-height: min(75svh, calc(100svh - var(--ui-header-bottom, 4.6rem) - var(--ui-drawer-panel-gap) - var(--ui-page-pad))); margin: calc(var(--ui-header-bottom, 4.6rem) + var(--ui-drawer-panel-gap)) var(--ui-page-pad) var(--ui-page-pad); border: var(--ui-border-hairline) !important; border-radius: var(--ui-menu-surface-radius, clamp(1rem, 0.8rem + 0.6vw, 1.35rem)); overflow: hidden; box-sizing: border-box; isolation: isolate; display: flex; flex-direction: column; background: var(--ui-menu-surface-fill) !important; border-color: var(--ui-menu-surface-border, var(--ui-header-line, #2a2a2f)) !important; box-shadow: var(--ui-menu-surface-shadow, 0 28px 72px rgba(0, 0, 0, 0.34)) !important; backdrop-filter: var(--ui-menu-surface-backdrop, none); -webkit-backdrop-filter: var(--ui-menu-surface-backdrop, none); } .emm-drawer__head--minimal { --ui-drawer-close-size: 2.6rem; justify-content: flex-start; align-items: center; min-height: 3rem; padding: 0.45rem var(--ui-space-4); border-bottom: 0; background: transparent !important; position: relative; z-index: 4; } .emm-drawer__search-pin, .emm-drawer__account-panel { position: static !important; top: auto !important; bottom: auto !important; } .emm-drawer__head-social { position: relative; flex: 1 1 auto; min-width: 0; padding-right: calc(var(--ui-drawer-close-size) + var(--ui-space-4) + 0.35rem); -webkit-mask-image: none; mask-image: none; } .emm-drawer__head--minimal .emm-drawer__close { position: absolute; top: 50%; right: var(--ui-space-4); transform: translateY(-50%); z-index: 3; width: auto; height: auto; padding: 0.1rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 1.4rem; } .emm-drawer__body { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; } .emm-drawer__scroll { min-height: 0; padding-top: var(--ui-space-3); } .emm-drawer__social { border-top: 0; padding-top: 0; gap: var(--ui-space-2); } .emm-drawer__social-list { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: var(--ui-space-2); padding-bottom: 0.2rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .emm-drawer__social-list::-webkit-scrollbar { display: none; } .emm-drawer__social-list li { flex: 0 0 auto; scroll-snap-align: start; } .emm-drawer__social-list--head { gap: 0.5rem; padding: 0; } .emm-drawer__social-list--head .emm-drawer__social-link { min-width: 2.1rem; min-height: 2.1rem; justify-content: center; gap: 0; padding: 0.18rem; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; } .emm-drawer__social-list--head .emm-drawer__social-link span { display: none; } .emm-drawer__social-list--head .emm-drawer__social-icon { width: 1.4rem; min-width: 1.4rem; font-size: 1.29rem; } .emm-drawer__wordmark img { height: 1.25rem; max-height: 1.25rem; } .emm-nav__submenu, .emm-nav__submenu--mega { background: transparent !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; overflow: visible !important; } .emm-nav__submenu--mega { top: var(--ui-header-bar-bottom, var(--ui-header-bottom, 4.6rem)); --ui-mega-ink-soft: color-mix(in srgb, var(--ui-header-ink, #ffffff) 72%, var(--ui-header-ink-soft, #d4d4d8)); --ui-mega-ink-muted: color-mix(in srgb, var(--ui-header-ink, #ffffff) 54%, var(--ui-header-ink-soft, #d4d4d8)); --ui-mega-surface-fill: linear-gradient( 180deg, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) 18%, transparent) 0%, color-mix(in srgb, var(--ui-header-bg, #0b0b0d) 26%, transparent) 100% ), var(--ui-menu-surface-fill, var(--ui-header-pill-fill)); } .emm-nav__submenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .emm-nav__mega-inner { margin: 0; padding: var(--ui-space-5) clamp(1rem, 2.2vw, 1.5rem) var(--ui-space-6); border: 0; border-radius: 0; background: transparent; box-shadow: none; max-height: calc(100dvh - var(--ui-header-bar-bottom, var(--ui-header-bottom, 4.6rem)) - var(--ui-page-pad)); overflow: auto; overscroll-behavior: contain; } .emm-nav__mega-inner--services { display: block; } .emm-nav__mega-inner--services .emm-nav__mega-rail { border-right: 0; padding-right: 0; } .emm-nav__mega-inner--services .emm-nav__mega-rail-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1rem, 2.5vw, 2.5rem); row-gap: 0.25rem; } .emm-nav__mega-inner--services .emm-nav__mega-collections-link { width: fit-content; } @media (min-width: 62rem) { .emm-nav__submenu--mega { top: calc(var(--ui-header-bottom, var(--ui-header-bar-bottom, 4.6rem)) + var(--ui-search-start-gap, var(--ui-space-4))); left: var(--ui-header-bar-left, var(--ui-page-pad)); right: auto; width: min( var(--ui-header-bar-width, calc(100vw - (var(--ui-page-pad) * 2))), calc(100vw - (var(--ui-page-pad) * 2)) ); box-sizing: border-box; border: 1px solid var(--ui-menu-surface-border, var(--ui-header-line, #2a2a2f)) !important; border-radius: var(--ui-menu-surface-radius, var(--ui-header-shell-radius, clamp(1rem, 0.8rem + 0.6vw, 1.25rem))); background: var(--ui-mega-surface-fill) !important; box-shadow: var(--ui-menu-surface-shadow, var(--ui-header-pill-shadow)) !important; backdrop-filter: var(--ui-menu-surface-backdrop, none) !important; -webkit-backdrop-filter: var(--ui-menu-surface-backdrop, none) !important; overflow: hidden !important; isolation: isolate; } .emm-nav__submenu--mega .emm-nav__mega-rail { border-right-color: color-mix(in srgb, var(--ui-header-ink, #ffffff) 12%, transparent); } .emm-nav__submenu--mega .emm-nav__mega-recent { border-left-color: color-mix(in srgb, var(--ui-header-ink, #ffffff) 12%, transparent); } .emm-nav__submenu--mega .emm-nav__mega-kicker, .emm-nav__submenu--mega .emm-nav__mega-recent-link, .emm-nav__submenu--mega .emm-nav__mega-recent-copy em { color: var(--ui-mega-ink-muted) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22); } .emm-nav__submenu--mega .emm-nav__mega-rail-link, .emm-nav__submenu--mega .emm-nav__submenu-link { color: var(--ui-mega-ink-soft) !important; font-weight: 550; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); } .emm-nav__submenu--mega .emm-nav__mega-title-link, .emm-nav__submenu--mega .emm-nav__mega-recent-copy strong { color: var(--ui-header-ink, #ffffff) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.24); } .emm-nav__submenu--mega .emm-nav__mega-title-link { font-size: clamp(1.02rem, 0.94rem + 0.24vw, 1.14rem); font-weight: 600; } .emm-nav__submenu--mega .emm-nav__submenu-link { line-height: 1.32; } .emm-nav__submenu--mega::before, .emm-nav__submenu--mega::after { content: none; } .emm-nav__submenu--mega .emm-nav__mega-inner { position: relative; z-index: 2; width: 100%; margin: 0; box-sizing: border-box; max-width: none; padding: var(--ui-space-5) clamp(1rem, 2.2vw, 1.5rem) var(--ui-space-6) !important; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; max-height: calc( 100dvh - var(--ui-header-bottom, var(--ui-header-bar-bottom, 4.6rem)) - var(--ui-search-start-gap, var(--ui-space-4)) - var(--ui-search-end-gap, var(--ui-space-5)) ); } .emm-nav__submenu--mega .emm-nav__mega-inner::before, .emm-nav__submenu--mega .emm-nav__mega-inner::after { content: none; } } .emm-search-panel { background: transparent !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; overflow: visible !important; pointer-events: none !important; } .emm-search-panel__inner { margin-block: var(--ui-space-4) var(--ui-space-5); padding: var(--ui-space-5) clamp(1rem, 2.2vw, 1.5rem) var(--ui-space-6) !important; position: relative; border: 1px solid var(--ui-menu-surface-border, var(--ui-header-line, #2a2a2f)) !important; max-height: calc(var(--ui-search-max-height) - (var(--ui-space-4) + var(--ui-space-5))); overflow: auto; overscroll-behavior: contain; pointer-events: auto !important; }  .emm-search-panel .emm-search-suggestions li { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); transition: background 160ms var(--ui-ease), border-color 160ms var(--ui-ease); } .emm-search-panel .emm-search-suggestions li:hover, .emm-search-panel .emm-search-suggestions li.is-active, .emm-search-panel .emm-search-suggestions li:focus-within { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); } .emm-search-panel .emm-search-suggestion__title { color: var(--ui-header-ink, #fff); } .emm-search-panel .emm-search-suggestion__meta { color: var(--ui-header-ink-soft, #d4d4d8); } .emm-search-panel .emm-search-suggestion__type { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.12); color: var(--ui-header-ink-soft, #d4d4d8); } .emm-search-panel .emm-search-suggestions a:focus-visible { outline: 2px solid var(--ui-header-ink, #fff); outline-offset: -3px; border-radius: inherit; } .emm-nav__mega-kicker, .emm-nav__mega-rail-link, .emm-nav__mega-title-link, .emm-nav__submenu-link, .emm-nav__mega-recent-link, .emm-nav__mega-recent-copy em, .emm-search-panel__links a, .emm-drawer__links a { color: var(--ui-header-ink-soft, #d4d4d8) !important; } .emm-nav__mega-rail-link:hover, .emm-nav__mega-rail-link.is-active, .emm-nav__mega-title-link:hover, .emm-nav__submenu-link:hover, .emm-nav__submenu-link.is-active, .emm-nav__mega-recent-link:hover, .emm-nav__mega-recent-copy strong { color: var(--ui-header-ink, #ffffff) !important; } .emm-nav__mega-recent-media { border: 1px solid color-mix(in srgb, var(--ui-header-line, #2a2a2f) 85%, transparent); } .emm-header__cta { min-height: 1.9rem !important; padding: 0.32rem 0.82rem !important; font-size: 0.72rem !important; font-weight: 700 !important; border-radius: 999px; } @media (max-width: 61.99rem) { .emm-nav__mega-inner--services .emm-nav__mega-rail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-header__cta { display: none !important; } .emm-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.35rem; } .emm-header__left { grid-column: 1; justify-self: start; } .emm-header__wordmark { grid-column: 2; justify-self: center; margin-inline: auto; } .emm-header__right { grid-column: 3; justify-self: end; } } .emm-hero { border-bottom: 0; padding-top: 0.25rem; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child { margin-top: calc(-1 * var(--ui-header-bottom, 4.7rem)); padding-top: 0; } .emm-body--home #main-content > .emm-hero:first-child.emm-hero--seamless-banner { --ui-hero-seamless-breakout: clamp(3.5rem, 7vw, 7rem); --ui-hero-seamless-side-fade: clamp(1rem, 2.2vw, 2rem); } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__shell { min-height: max( 34rem, min( calc( clamp( 420px, calc((min(var(--ui-container-max), calc(100vw - (var(--ui-page-pad) * 2))) * 9) / 16), 900px ) + var(--ui-header-bottom, 4.7rem) ), 100svh ) ); } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__inner { padding-inline: 0; } .emm-hero__shell { position: relative; display: grid; border-radius: 1.35rem; overflow: hidden; background: #111114; border: 0; box-shadow: none; } .emm-hero.emm-hero--seamless-banner .emm-hero__shell { border-radius: 0; overflow: visible; background: transparent; } .emm-hero__inner { min-height: inherit; height: 100%; display: grid; align-items: stretch; justify-items: start; text-align: left; padding: clamp(1.2rem, 3vw, 2rem); box-sizing: border-box; } .emm-hero__content { align-self: end; justify-self: start; margin-inline: 0; max-width: min(54rem, calc(100% - 15rem)); gap: 0.65rem; text-align: left; } .emm-hero__bottom-gradient { position: absolute; inset: auto 0 0 0; height: clamp(32%, 40vw, 56%); background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--ui-color-bg, #0b0b0d) 88%, transparent) 100% ); pointer-events: none; } .emm-hero.emm-hero--position-top .emm-hero__content { align-self: start; } .emm-hero.emm-hero--position-center .emm-hero__content { align-self: center; } .emm-hero.emm-hero--position-bottom .emm-hero__content { align-self: end; } .emm-hero.emm-hero--align-desktop-left .emm-hero__content { justify-self: start; margin-inline: 0; text-align: left; } .emm-hero.emm-hero--align-desktop-center .emm-hero__content { justify-self: center; margin-inline: auto; text-align: center; } .emm-hero.emm-hero--align-desktop-right .emm-hero__content { justify-self: end; margin-inline: 0; text-align: right; } .emm-hero .emm-kicker { letter-spacing: 0; font-size: clamp(0.78rem, 1.4vw, 0.95rem); opacity: 0.95; } .emm-hero .emm-title { font-family: var(--ui-font-body); font-size: clamp(2.35rem, 4.15vw, 4.25rem); font-weight: 700; line-height: 0.94; letter-spacing: -0.055em; text-wrap: balance; text-shadow: 0 4px 32px rgba(0, 0, 0, 0.32); } .emm-hero .emm-copy { max-width: 34rem; font-size: clamp(1rem, 1.45vw, 1.22rem); font-weight: 450; line-height: 1.45; letter-spacing: 0.01em; opacity: 0.9; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } .emm-hero--style-cinematic .emm-hero__inner { padding: clamp(2rem, 4vw, 3.75rem); } .emm-hero--style-cinematic .emm-hero__bottom-gradient { height: 46%; background: linear-gradient( 180deg, transparent 0%, rgba(5, 7, 9, 0.24) 42%, var(--ui-color-bg, #0b0b0d) 100% ); } .emm-hero--style-cinematic .emm-hero__seamless-fades { display: none; } @media (min-width: 48rem) { .emm-body--home #main-content > .emm-hero--style-cinematic:first-child.emm-hero--seamless-banner { --ui-hero-seamless-side-fade: clamp(0px, calc(50vw - 900px), 72px); --ui-hero-seamless-fade-color: var(--ui-color-bg, #0b0b0d); }  .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__seamless-fades { display: none; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child.emm-hero--seamless-banner .emm-hero__media { width: min(1800px, 100vw); -webkit-mask-image: none; mask-image: none; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__inner { width: min(80rem, calc(100% - (var(--ui-page-pad) * 2))); margin-inline: auto; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__controls { right: max(var(--ui-page-pad), calc((100vw - 80rem) / 2)); } }  @media (min-width: 1801px) { .emm-body--home #main-content > .emm-hero--style-cinematic:first-child.emm-hero--seamless-banner .emm-hero__media { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ui-hero-seamless-side-fade), #000 calc(100% - var(--ui-hero-seamless-side-fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--ui-hero-seamless-side-fade), #000 calc(100% - var(--ui-hero-seamless-side-fade)), transparent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } } .emm-hero__meta { display: flex; margin-top: 0.35rem; } .emm-hero__actions { display: flex; margin-top: 0.55rem; } .emm-hero--style-editorial, .emm-hero--style-split { --ui-hero-smart-color: var(--ui-color-ink); } .emm-hero--style-editorial .emm-hero__shell { min-height: 0; grid-template-rows: minmax(20rem, auto) auto; background: var(--ui-color-paper); } .emm-hero--style-editorial .emm-hero__media { position: relative; grid-row: 1; aspect-ratio: 16 / 9; min-height: 20rem; } .emm-hero--style-editorial.emm-hero--media-wide .emm-hero__media { aspect-ratio: 21 / 9; } .emm-hero--style-editorial.emm-hero--media-portrait .emm-hero__media { aspect-ratio: 4 / 5; max-height: min(72rem, 78svh); } .emm-hero--style-editorial .emm-hero__shade, .emm-hero--style-split .emm-hero__shade, .emm-hero--style-editorial .emm-hero__bottom-gradient, .emm-hero--style-split .emm-hero__bottom-gradient { display: none; } .emm-hero--style-editorial .emm-hero__inner { grid-row: 2; min-height: 0; height: auto; box-sizing: border-box; padding: clamp(2rem, 5vw, 4.5rem); background: var(--ui-color-paper); } .emm-hero--style-editorial .emm-hero__content { max-width: min(54rem, 100%); } .emm-hero--style-editorial .emm-title, .emm-hero--style-split .emm-title { font-family: var(--ui-font-display); font-size: clamp(2.35rem, 5.2vw, 5.8rem); font-weight: 600; line-height: 0.96; letter-spacing: -0.045em; } .emm-hero--style-split .emm-title { font-size: clamp(2.35rem, 4.4vw, 4.4rem); } .emm-hero--style-editorial .emm-copy, .emm-hero--style-split .emm-copy { max-width: 42rem; font-size: clamp(1rem, 1.3vw, 1.22rem); line-height: 1.55; } .emm-hero--style-split .emm-hero__shell { min-height: clamp(31rem, 56vw, 48rem); grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); background: var(--ui-color-paper); } .emm-hero--style-split.emm-hero--media-wide .emm-hero__shell { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } .emm-hero--style-split.emm-hero--media-portrait .emm-hero__shell { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .emm-hero--style-split .emm-hero__media, .emm-hero--style-split .emm-hero__inner { position: relative; grid-row: 1; min-width: 0; } .emm-hero--style-split .emm-hero__media { grid-column: 2; } .emm-hero--style-split .emm-hero__inner { grid-column: 1; min-height: 0; height: 100%; box-sizing: border-box; padding: clamp(2rem, 5vw, 5rem); background: var(--ui-color-paper); } .emm-hero--style-split.emm-hero--media-side-left .emm-hero__media { grid-column: 1; } .emm-hero--style-split.emm-hero--media-side-left .emm-hero__inner { grid-column: 2; } .emm-hero--style-split:not(.emm-hero--has-media) .emm-hero__inner { grid-column: 1 / -1; } .emm-hero--style-split:not(.emm-hero--has-media) .emm-hero__content { max-width: 54rem; } @media (max-width: 47.99rem) { .emm-body--home #main-content > .emm-hero:first-child.emm-hero--seamless-banner { --ui-hero-seamless-breakout: 0; --ui-hero-seamless-side-fade: 0; } .emm-body--home #main-content > .emm-hero:first-child.emm-hero--seamless-banner > .emm-container { width: 100% !important; max-width: none !important; margin-inline: 0 !important; } .emm-body--home #main-content > .emm-hero:first-child.emm-hero--seamless-banner .emm-hero__shell { border-radius: 0 !important; overflow: visible !important; background: transparent !important; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__shell { min-height: calc(clamp(390px, 112vw, 440px) + var(--ui-header-bottom, 3.65rem)); } .emm-body--home #main-content > .emm-hero:first-child.emm-hero--seamless-banner .emm-hero__inner { padding-inline: 0; } .emm-hero--style-cinematic .emm-hero__shell { aspect-ratio: 3 / 4; min-height: var(--ui-hero-height-mobile, 200px); } .emm-hero--style-editorial.emm-hero--has-media .emm-hero__shell, .emm-hero--style-split.emm-hero--has-media .emm-hero__shell, .emm-hero--style-editorial:not(.emm-hero--has-media) .emm-hero__shell, .emm-hero--style-split:not(.emm-hero--has-media) .emm-hero__shell { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; } .emm-hero--style-cinematic.emm-hero--has-actions .emm-hero__shell, .emm-hero--style-cinematic.emm-hero--has-meta .emm-hero__shell { min-height: clamp(34rem, 150vw, 42rem); aspect-ratio: auto; } .emm-hero--style-editorial .emm-hero__media, .emm-hero--style-split .emm-hero__media { position: relative; grid-column: 1; grid-row: 1; min-height: 15rem; aspect-ratio: 4 / 3; max-height: 68svh; } .emm-hero--style-editorial.emm-hero--media-wide .emm-hero__media, .emm-hero--style-split.emm-hero--media-wide .emm-hero__media { aspect-ratio: 16 / 9; } .emm-hero--style-editorial.emm-hero--media-portrait .emm-hero__media, .emm-hero--style-split.emm-hero--media-portrait .emm-hero__media { aspect-ratio: 4 / 5; } .emm-hero--style-editorial .emm-hero__inner, .emm-hero--style-split .emm-hero__inner, .emm-hero--style-split.emm-hero--media-side-left .emm-hero__inner { grid-column: 1; grid-row: 2; padding: clamp(1.6rem, 7vw, 2.6rem); } .emm-hero--style-editorial .emm-title, .emm-hero--style-split .emm-title { font-size: clamp(2.2rem, 12vw, 4.25rem); } .emm-hero__bottom-gradient { height: clamp(46%, 70vw, 74%); background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--ui-color-bg, #0b0b0d) 94%, transparent) 100% ); } .emm-hero--style-cinematic .emm-hero__content { align-self: end; justify-self: start; width: 100%; max-width: calc(100% - 1rem); gap: 0.35rem; padding-bottom: 1rem; text-align: left; } .emm-hero--style-cinematic.emm-hero--position-bottom .emm-hero__content, .emm-hero--style-cinematic.emm-hero--position-center .emm-hero__content, .emm-hero--style-cinematic.emm-hero--position-top .emm-hero__content { align-self: end; } .emm-hero--style-cinematic .emm-title { width: 100%; font-size: clamp(1.15rem, 6.25vw, 1.65rem); line-height: 1; letter-spacing: -0.045em; white-space: nowrap; } .emm-hero--style-cinematic .emm-copy { max-width: 19rem; font-size: 0.9rem; line-height: 1.35; } .emm-hero--style-cinematic .emm-hero__inner { align-items: end; padding: calc(var(--ui-header-bottom, 3.65rem) + 0.75rem) 1rem 1rem; } .emm-hero--style-cinematic .emm-hero__bg img { object-position: center 38%; } .emm-hero--style-cinematic .emm-hero__bottom-gradient { display: block; inset: auto 0 0; height: 42%; background: linear-gradient( 180deg, transparent 0%, rgba(5, 7, 9, 0.24) 42%, var(--ui-color-bg, #0b0b0d) 100% ); } .emm-hero--style-cinematic .emm-hero__seamless-fades { display: none; } .emm-hero.emm-hero--align-mobile-left .emm-hero__content { justify-self: start; margin-inline: 0; text-align: left; } .emm-hero.emm-hero--align-mobile-center .emm-hero__content { justify-self: center; margin-inline: auto; text-align: center; } .emm-hero.emm-hero--align-mobile-right .emm-hero__content { justify-self: end; margin-inline: 0; text-align: right; } } .emm-products { padding-top: clamp(1.4rem, 3vw, 2.6rem); } .emm-product-head { margin-bottom: 1rem; } .emm-product-head .emm-title { font-family: var(--ui-font-body); font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 800; color: #ffffff; } .emm-product-head .emm-copy { color: #d4d4d8; } .emm-product-head__action { position: relative; z-index: 2; flex: 0 0 auto; min-height: 2.5rem; padding: 0.55rem 0.95rem 0.55rem 1.05rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: transparent; color: #ffffff; box-shadow: none; } .emm-product-head__action svg { width: 1rem; height: 1rem; stroke: currentColor; transition: transform 180ms ease; } .emm-product-head__action:hover, .emm-product-head__action:focus-visible { border-color: #ffffff; background: #ffffff; color: #171819; } .emm-product-head__action:hover svg, .emm-product-head__action:focus-visible svg { transform: translateX(0.15rem); } @media (max-width: 640px) { .emm-product-head { align-items: flex-start; gap: 0.9rem; } .emm-product-head__action { min-height: 2.35rem; padding: 0.48rem 0.8rem 0.48rem 0.9rem; white-space: nowrap; } } .emm-products-grid { gap: 1rem; } .emm-title { font-size: clamp(1.22rem, 2.35vw, 1.95rem); line-height: 1.12; } .emm-title--sm { font-size: clamp(1.04rem, 1.7vw, 1.34rem); } .emm-copy { font-size: clamp(0.9rem, 1.2vw, 1rem); } .emm-products--overlay-cards .emm-product-item--service { gap: 0; } .emm-services-grid-v2 { --ui-service-title-scale-desktop: 0.92; --ui-service-title-scale-mobile: 1; } .emm-services-grid-v2 .emm-services-grid-layout { display: grid; gap: 1rem; } .emm-services-grid-v2 .emm-services-grid-primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .emm-services-grid-v2 .emm-services-grid-secondary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } .emm-services-grid-v2 .emm-services-grid-card { min-width: 0; } .emm-services-grid-v2 .emm-services-grid-card .emm-product-card { height: 100%; } .emm-services-grid-v2 .emm-services-grid-card .emm-copy { overflow-wrap: anywhere; hyphens: auto; } .emm-services-grid-v2 .emm-services-grid-card.is-primary .emm-product-media { aspect-ratio: 19 / 10 !important; min-height: clamp(8.75rem, 18vw, 12.75rem); } .emm-services-grid-v2.emm-products--overlay-cards .emm-services-grid-card.is-primary .emm-service-card__content { padding: 1rem 1.05rem; } .emm-services-grid-v2.emm-products--overlay-cards .emm-services-grid-card.is-primary .emm-product-title { font-size: clamp( calc(1.15rem * var(--ui-service-title-scale-desktop, 0.92)), calc(1.7vw * var(--ui-service-title-scale-desktop, 0.92)), calc(1.55rem * var(--ui-service-title-scale-desktop, 0.92)) ); } .emm-services-grid-v2.emm-products--overlay-cards .emm-services-grid-card.is-secondary .emm-product-title { font-size: clamp( calc(1rem * var(--ui-service-title-scale-desktop, 0.92)), calc(1.45vw * var(--ui-service-title-scale-desktop, 0.92)), calc(1.3rem * var(--ui-service-title-scale-desktop, 0.92)) ); } .emm-products.emm-products--service-grayscale .emm-product-media img { filter: grayscale(1); } .emm-products.emm-products--service-grayscale-hover-color .emm-product-media img { filter: grayscale(1); transition: filter 220ms ease; } @media (hover: hover) { .emm-products.emm-products--service-grayscale-hover-color .emm-product-card:hover .emm-product-media img, .emm-products.emm-products--service-grayscale-hover-color .emm-product-card:focus-visible .emm-product-media img { filter: grayscale(0); } }  .services-directory-page { padding: 1.9rem 0 3.2rem; } .services-directory-head { display: grid; gap: 0.75rem; margin-bottom: 0.9rem; } .services-directory-head-main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 1.5rem; } .services-directory-title-wrap { margin-top: 0.5rem; } .services-directory-search { display: flex; align-items: center; gap: 0.45rem; flex: 1 1 auto; margin-bottom: 0.25rem; } .services-directory-search .emm-field { flex: 1 1 auto; min-width: 0; min-height: 2.5rem; } .services-directory-search .emm-btn { flex: 0 0 auto; min-height: 2.5rem; } .services-directory-title { margin: 0 0 0.35rem; font-size: clamp(1.25rem, 2.25vw, 1.9rem); } .services-directory-subtitle { margin: 0; color: color-mix(in srgb, var(--ui-color-ink, #fff) 72%, #8f98aa); } .services-directory-head--with-image { grid-template-columns: minmax(0, 1fr) clamp(210px, 28vw, 360px); align-items: stretch; gap: 0.85rem; } .services-directory-hero-media { margin: 0; border-radius: 0.85rem; overflow: hidden; min-height: 150px; background: #151516; border: 1px solid rgba(255, 255, 255, 0.08); } .services-directory-hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; } .services-directory-controls { display: grid; gap: 0.6rem; margin-bottom: 0.95rem; } .services-category-pills { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .services-category-pills .emm-btn { flex: 0 0 auto; min-height: 2rem; padding: 0.2rem 0.7rem; font-size: 0.76rem; border-radius: 999px; } .services-category-pills .emm-btn.is-active { background: #151617; color: #050507; border-color: #ffffff; } .services-mobile-view-toggle { display: none; gap: 0.4rem; } .services-mobile-view-toggle .emm-btn { min-height: 1.95rem; padding: 0.2rem 0.58rem; font-size: 0.72rem; border-radius: 999px; } .services-mobile-view-toggle .emm-btn.is-active { border-color: #ffffff; color: #ffffff; } .services-directory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } .services-directory-card { border: 0 !important; border-radius: 0.95rem !important; background: #151516 !important; overflow: hidden; } .services-directory-card-link { display: block; text-decoration: none; color: inherit; } .services-directory-media { aspect-ratio: 1 / 1; background: #151516; } .services-directory-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .services-directory-body { padding: 0.72rem; border-top: 0; } .services-directory-kicker { margin: 0 0 0.35rem; font-size: 0.66rem; color: color-mix(in srgb, #ffffff 74%, #6f7890); } .services-directory-card-title { margin: 0; font-size: 0.94rem; line-height: 1.2; font-weight: 700; } .services-directory-summary { margin: 0.4rem 0 0; color: color-mix(in srgb, #ffffff 70%, #667085); font-size: 0.8rem; line-height: 1.35; } .services-empty { padding: 1.2rem; background: #151516 !important; }  .emm-instagram-gallery__showcase { display: grid; gap: 0.85rem; overflow: hidden; position: relative; } .emm-instagram-gallery__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; } .emm-instagram-gallery__header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; } .emm-instagram-gallery__header-action { margin: 0; } .emm-instagram-gallery__showcase::before, .emm-instagram-gallery__showcase::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 6vw, 5.5rem); z-index: 2; pointer-events: none; } .emm-instagram-gallery__showcase::before { left: 0; background: linear-gradient(90deg, rgba(11, 13, 18, 1) 0%, rgba(11, 13, 18, 0) 100%); } .emm-instagram-gallery__showcase::after { right: 0; background: linear-gradient(270deg, rgba(11, 13, 18, 1) 0%, rgba(11, 13, 18, 0) 100%); } .emm-instagram-gallery__lane { display: flex; gap: 0.85rem; width: max-content; min-width: 100%; animation: emmInstagramLaneForward 168s linear infinite; } .emm-instagram-gallery__lane--reverse { animation-name: emmInstagramLaneReverse; animation-duration: 186s; flex-direction: row-reverse; justify-content: flex-end; transform: translate3d(0, 0, 0); } .emm-instagram-gallery__lane--mobile-only { display: none; } .emm-instagram-gallery__track { display: flex; gap: 0.85rem; flex: none; } .emm-instagram-gallery__lane--reverse .emm-instagram-gallery__track { flex-direction: row-reverse; } .emm-instagram-gallery__item { aspect-ratio: 1 / 1; background: #141720; overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, 0.08); flex: 0 0 clamp(12rem, 18vw, 18rem); width: clamp(12rem, 18vw, 18rem); border-radius: 1rem; } .emm-instagram-gallery__lane--reverse .emm-instagram-gallery__item { flex-basis: clamp(6rem, 9vw, 9rem); width: clamp(6rem, 9vw, 9rem); } .emm-instagram-gallery__lane--reverse .emm-instagram-gallery__overlay-badge { display: none; } .emm-instagram-gallery__item--embed { aspect-ratio: auto; background: transparent; } .emm-instagram-gallery__link { display: block; height: 100%; width: 100%; position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; text-align: left; } .emm-instagram-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 280ms ease, filter 280ms ease; } .emm-instagram-gallery__item:hover img, .emm-instagram-gallery__item:focus-within img { transform: scale(1.03); filter: saturate(1.03); } .emm-instagram-gallery__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 0.9rem; color: #fff; background: linear-gradient(180deg, rgba(5, 7, 10, 0.18) 0%, rgba(5, 7, 10, 0.08) 35%, rgba(5, 7, 10, 0.68) 100%); opacity: 0; transition: opacity 220ms ease; } .emm-instagram-gallery__item:hover .emm-instagram-gallery__overlay, .emm-instagram-gallery__item:focus-within .emm-instagram-gallery__overlay { opacity: 1; } .emm-instagram-gallery__overlay-badge { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; padding: 0.4rem 0.65rem; border-radius: 999px; background: rgba(8, 10, 14, 0.68); backdrop-filter: blur(8px); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; } .emm-instagram-gallery__overlay-badge svg { width: 1rem; height: 1rem; } .emm-instagram-gallery__overlay-copy { display: grid; gap: 0.22rem; max-width: 90%; } .emm-instagram-gallery__overlay-copy strong { font-size: 0.95rem; font-weight: 700; } .emm-instagram-gallery__cta--mobile { display: none; } .emm-instagram-gallery__overlay-copy span { font-size: 0.72rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); text-transform: uppercase; letter-spacing: 0.02em; } .emm-instagram-gallery__embed { display: flex; justify-content: center; align-items: flex-start; min-height: 100%; } .emm-instagram-gallery__embed > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } @keyframes emmInstagramLaneForward { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 0.425rem), 0, 0); } } @keyframes emmInstagramLaneReverse { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(50% + 0.425rem), 0, 0); } } .emm-instagram-lightbox { position: fixed; inset: 0; z-index: 12100; display: none; align-items: center; justify-content: center; padding: 1rem; } .emm-instagram-lightbox.is-open { display: flex; } .emm-instagram-lightbox__backdrop { position: absolute; inset: 0; background: rgba(3, 4, 7, 0.84); backdrop-filter: blur(8px); } .emm-instagram-lightbox__dialog { position: relative; z-index: 1; width: min(1220px, 96vw); max-height: min(90vh, 920px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: #0d1016; box-shadow: 0 32px 70px rgba(0, 0, 0, 0.45); } .emm-instagram-lightbox__media { min-height: 26rem; background: #090b10; } .emm-instagram-lightbox__media img { width: 100%; height: 100%; max-height: 90vh; object-fit: contain; display: block; } .emm-instagram-lightbox__panel { display: grid; align-content: start; gap: 0.85rem; padding: 1.25rem 1.15rem 1.15rem; background: linear-gradient(180deg, rgba(16, 20, 28, 0.98) 0%, rgba(11, 14, 20, 0.98) 100%); max-height: 90vh; overflow-y: auto; } .emm-instagram-lightbox__meta { margin: 0; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.56); } .emm-instagram-lightbox__caption { margin: 0; font-size: 0.96rem; line-height: 1.7; color: rgba(255, 255, 255, 0.9); white-space: pre-line; overflow-wrap: anywhere; } .emm-instagram-lightbox__actions { margin: auto 0 0; } .emm-instagram-lightbox__close { position: absolute; top: 0.55rem; right: 0.55rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px; background: rgba(6, 9, 13, 0.74); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }  .gallery-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 1.25rem; } .gallery-card--category { border: 1px solid rgba(255, 255, 255, 0.09); } .gallery-category-copy { margin: 0.5rem 0 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); } .gallery-preview-head { margin: 0.6rem 0 0.75rem; } .gallery-preview-head .emm-copy { margin: 0.25rem 0 0; } .gallery-category-header { margin-bottom: 1.15rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), #101218; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.24); } .gallery-category-header img { width: 100%; display: block; min-height: 280px; max-height: 360px; object-fit: cover; } .gallery-social-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 38%), #10131a; margin-bottom: 1.1rem; } .gallery-social-strip__eyebrow { display: inline-flex; align-items: center; min-height: 28px; padding: 0 0.72rem; margin-bottom: 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.76); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; } .gallery-social-strip__copy strong { display: block; font-size: 1rem; margin-bottom: 0.22rem; } .gallery-social-strip__copy p { margin: 0; max-width: 58ch; font-size: 0.92rem; color: rgba(255, 255, 255, 0.72); } .gallery-social-strip__links { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; } .gallery-social-strip__links .emm-btn { min-height: 38px; padding: 0 0.9rem; } .gallery-empty-state { display: grid; justify-items: center; gap: 0.9rem; padding: 2.5rem 1.4rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; background: radial-gradient(circle at top center, rgba(255, 255, 255, 0.06), transparent 42%), #0f1117; text-align: center; margin-top: 0.35rem; } .gallery-empty-state__eyebrow { display: inline-flex; align-items: center; min-height: 30px; padding: 0 0.78rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.74); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .gallery-empty-state .emm-title { margin: 0; } .gallery-empty-state .emm-copy { margin: 0; max-width: 58ch; color: rgba(255, 255, 255, 0.74); } .gallery-empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; } .gallery-job-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; } .gallery-job-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0.22rem 0.68rem; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.86); text-decoration: none; font-size: 0.76rem; line-height: 1.25; } .gallery-job-pill:hover { border-color: rgba(255, 255, 255, 0.42); } .gallery-job-pill.is-active { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.1); } .gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; } .gallery-card { background: #111318; overflow: hidden; } .emm-simple-gallery__head { display: grid; gap: var(--ui-space-2); max-width: 68ch; margin-bottom: var(--ui-space-5); } .emm-simple-gallery__head .emm-copy { margin: 0; } .emm-simple-gallery__grid { gap: var(--ui-space-3); } .emm-simple-gallery--editorial .emm-simple-gallery__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .emm-simple-gallery--editorial .emm-simple-gallery__card { grid-column: span 4; } .emm-simple-gallery--editorial .emm-simple-gallery__card:nth-child(5n + 1), .emm-simple-gallery--editorial .emm-simple-gallery__card:nth-child(5n + 2) { grid-column: span 6; } .emm-simple-gallery__card { border-radius: 1rem; border: 1px solid rgba(17, 24, 39, 0.08); box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08); } .emm-simple-gallery__card img { min-height: 0; aspect-ratio: 4 / 3; } .emm-simple-gallery[data-image-ratio="1-1"] .emm-simple-gallery__card img { aspect-ratio: 1 / 1; } .emm-simple-gallery[data-image-ratio="4-5"] .emm-simple-gallery__card img { aspect-ratio: 4 / 5; } .emm-simple-gallery__card:focus-within { outline: 2px solid var(--ui-color-accent); outline-offset: 3px; } .gallery-card__link { display: block; position: relative; color: inherit; text-decoration: none; } .gallery-card__link:focus-visible { outline: none; } .gallery-card__link--lightbox { width: 100%; border: 0; padding: 0; background: transparent; text-align: left; cursor: zoom-in; } .gallery-card img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; } [data-gallery-protect] { -webkit-user-drag: none; user-select: none; } .gallery-card__overlay { position: absolute; inset: auto 0 0 0; display: grid; gap: 0.1rem; padding: 0.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent); } .gallery-card__overlay strong { font-size: 0.82rem; line-height: 1.2; } .gallery-card--category .gallery-card__overlay strong { font-size: 0.7rem; } .gallery-card__overlay small { font-size: 0.72rem; color: rgba(255, 255, 255, 0.8); } .gallery-cta { margin: 0.35rem 0 0; } .gallery-lightbox { position: fixed; inset: 0; z-index: 12000; display: none; align-items: center; justify-items: center; padding: 1rem; } .gallery-lightbox.is-open { display: grid; } .gallery-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.86); } .gallery-lightbox__dialog { position: relative; z-index: 1; width: min(1100px, 96vw); max-height: 90vh; display: grid; gap: 0.45rem; justify-items: center; } .gallery-lightbox__dialog img { width: auto; max-width: 100%; max-height: calc(90vh - 3.8rem); object-fit: contain; border: 1px solid rgba(255, 255, 255, 0.18); background: #0f1117; } .gallery-lightbox__close { position: absolute; top: -0.2rem; right: -0.2rem; width: 2rem; height: 2rem; border: 0; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; } .gallery-lightbox__caption { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); } body.gallery-lightbox-open { overflow: hidden; } @media (max-width: 63.99rem) { .services-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 56rem) { .emm-simple-gallery--editorial .emm-simple-gallery__card, .emm-simple-gallery--editorial .emm-simple-gallery__card:nth-child(5n + 1), .emm-simple-gallery--editorial .emm-simple-gallery__card:nth-child(5n + 2) { grid-column: span 6; } .emm-instagram-gallery__lane--mobile-only { display: flex; } .emm-instagram-gallery__header { grid-template-columns: minmax(0, 1fr); align-items: start; } .emm-instagram-gallery__header-actions { justify-content: flex-start; } .emm-instagram-gallery__showcase::before, .emm-instagram-gallery__showcase::after { width: clamp(1.25rem, 5vw, 2.5rem); } .emm-instagram-gallery__lane { gap: 0.65rem; animation-duration: 168s; } .emm-instagram-gallery__lane--reverse { animation-duration: 182s; } .emm-instagram-gallery__track { gap: 0.65rem; } .emm-instagram-gallery__item { flex-basis: calc((100vw - 2.6rem) / 3); width: calc((100vw - 2.6rem) / 3); } .emm-instagram-gallery__lane--reverse .emm-instagram-gallery__item { flex-basis: calc((100vw - 2.6rem) / 3); width: calc((100vw - 2.6rem) / 3); } .emm-instagram-lightbox__dialog { width: min(96vw, 42rem); grid-template-columns: minmax(0, 1fr); max-height: 92vh; } .emm-instagram-lightbox__media { min-height: 18rem; max-height: 55vh; } .emm-instagram-lightbox__panel { max-height: 37vh; padding: 1rem 0.95rem 1.05rem; } .emm-instagram-lightbox__caption { font-size: 0.92rem; line-height: 1.65; } .emm-instagram-gallery__overlay { opacity: 1; justify-content: flex-end; align-items: flex-start; padding: 0.65rem; background: linear-gradient(180deg, rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, 0.1) 42%, rgba(5, 7, 10, 0.84) 100%); } .emm-instagram-gallery__overlay-badge { display: none; } .emm-instagram-gallery__overlay-copy { max-width: 100%; align-self: flex-start; } .emm-instagram-gallery__overlay-copy strong { display: none; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; opacity: 0.5; } .emm-instagram-gallery__overlay-copy .emm-instagram-gallery__cta--mobile { display: block; } .emm-instagram-gallery__overlay-copy span { display: none; } } @media (max-width: 40rem) { .emm-simple-gallery__grid { grid-template-columns: 1fr !important; } .emm-simple-gallery--editorial .emm-simple-gallery__card, .emm-simple-gallery--editorial .emm-simple-gallery__card:nth-child(5n + 1), .emm-simple-gallery--editorial .emm-simple-gallery__card:nth-child(5n + 2) { grid-column: 1 / -1; } } @media (max-width: 47.99rem) { .services-directory-page { padding: 0.95rem 0 2.3rem; } .services-directory-title { font-size: 1.26rem; } .services-directory-subtitle { font-size: 0.84rem; } .services-directory-head-main { gap: 0.85rem; } .services-directory-head--with-image { grid-template-columns: 1fr; } .services-directory-hero-media { min-height: 112px; } .services-mobile-view-toggle { display: inline-flex; } .services-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .services-directory-card { background: #151516 !important; } .services-directory-body { padding: 0.55rem; background: #151516; } .services-directory-card-title { font-size: 0.82rem; } .services-directory-summary { display: -webkit-box; margin-top: 0.28rem; font-size: 0.74rem; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .services-directory-grid.services-view--single { grid-template-columns: 1fr; } .services-directory-grid.services-view--list { grid-template-columns: 1fr; gap: 0.42rem; } .services-directory-grid.services-view--list .services-directory-card-link { display: grid; grid-template-columns: 6.15rem minmax(0, 1fr); align-items: stretch; } .services-directory-grid.services-view--list .services-directory-media { aspect-ratio: auto; height: 100%; min-height: 5.8rem; } .services-directory-grid.services-view--list .services-directory-summary { display: block; margin-top: 0.25rem; font-size: 0.75rem; } .emm-instagram-gallery__grid, .gallery-category-grid, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.45rem; } .gallery-social-strip { grid-template-columns: 1fr; gap: 0.6rem; } .gallery-social-strip__links { justify-content: flex-start; } .gallery-empty-state { justify-items: stretch; text-align: left; } .gallery-empty-state__actions { justify-content: flex-start; } .gallery-card img { min-height: 142px; } } .emm-products--overlay-cards .emm-product-card { position: relative; border-radius: 0.65rem; overflow: hidden; } .emm-products--overlay-cards .emm-product-media { aspect-ratio: 4 / 5; border-radius: 0.65rem; border: 0; background: #17171b; } .emm-service-card__shade { position: absolute; inset: 0; background: var(--ui-card-overlay-color, #000000); opacity: var(--ui-card-overlay-opacity, 0.56); pointer-events: none; } .emm-service-card__bottom-gradient { position: absolute; inset: auto 0 0 0; height: 58%; z-index: 1; background: linear-gradient(180deg, transparent 0%, var(--ui-card-overlay-color, #000000) 100%); opacity: 0.88; pointer-events: none; } .emm-service-card__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: var(--ui-card-overlay-justify, flex-end); align-items: var(--ui-card-overlay-align, flex-start); text-align: var(--ui-card-overlay-text-align, left); padding: 0.85rem; pointer-events: none; } @media (max-width: 48rem) { .emm-services-grid-v2.emm-products--overlay-cards .emm-service-card__content { justify-content: var(--ui-card-overlay-justify-mobile, var(--ui-card-overlay-justify, flex-end)); align-items: var(--ui-card-overlay-align-mobile, var(--ui-card-overlay-align, flex-start)); text-align: var(--ui-card-overlay-text-align-mobile, var(--ui-card-overlay-text-align, left)); } } .emm-products--overlay-cards .emm-product-title { margin: 0; font-family: var(--ui-font-body); font-size: clamp(1.1rem, 1.6vw, 1.7rem); font-weight: var(--ui-card-overlay-title-weight, 800); line-height: 1.1; color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } .emm-collections--overlay-cards .emm-collection-card { position: relative; gap: 0; } .emm-collections--overlay-cards .emm-collection-card__media { border: 0; background: #17171b; } .emm-collection-card__shade { position: absolute; inset: 0; background: var(--ui-card-overlay-color, #000000); opacity: var(--ui-card-overlay-opacity, 0.56); pointer-events: none; } .emm-collection-card__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: var(--ui-card-overlay-justify, flex-end); align-items: var(--ui-card-overlay-align, flex-start); text-align: var(--ui-card-overlay-text-align, left); gap: 0.18rem; padding: 0.85rem; pointer-events: none; } .emm-collections--overlay-cards .emm-collection-card__title { font-weight: var(--ui-card-overlay-title-weight, 800); color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } .emm-collection-card__meta-text { color: rgba(255, 255, 255, 0.82); font-size: var(--ui-step--2); line-height: 1.35; } .service-system-page #svc-anchor-simple-text .emm-simple-text__inner { margin-inline: 0; text-align: left; } .service-system-page #svc-anchor-simple-text .emm-simple-text__content { margin-inline: 0; } .service-system-page #svc-anchor-simple-text { margin-bottom: clamp(16px, 2vw, 28px); } .emm-image-text { padding-top: clamp(2rem, 4vw, 3.2rem); } .emm-image-text .emm-split { align-items: center; gap: clamp(1rem, 3vw, 2.2rem); } .emm-image-text .emm-title { font-family: var(--ui-font-body); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; color: #ffffff; } .emm-image-text .emm-copy { color: #d4d4d8; font-size: clamp(1rem, 1.4vw, 1.4rem); } .emm-image-text .emm-quote { display: none; } .emm-image-text .emm-split__media { border-radius: 1rem; overflow: hidden; border: 0; } .emm-image-text .emm-btn { background: #f4f4f5; color: #111114; border-color: #f4f4f5; font-weight: 700; } @media (max-width: 64rem) { .emm-services-grid-v2 .emm-services-grid-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .emm-services-grid-v2 .emm-services-grid-card.is-primary .emm-product-media { aspect-ratio: 5 / 4 !important; min-height: clamp(9rem, 26vw, 13rem); } .emm-services-grid-v2 .emm-services-grid-secondary { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 48rem) { .emm-header--shell-pill { --ui-header-shell-gap: 0.35rem; --ui-header-shell-width: calc(100% - (var(--ui-page-pad) * 2)); } .emm-header--shell-pill .emm-header__inner { width: calc(100% - 0.8rem); margin-inline: auto; } .emm-header__inner { min-height: 3.65rem; } .emm-collections .emm-grid { align-items: stretch; } .emm-collection-card { height: 100%; grid-template-rows: auto minmax(0, 1fr); } .emm-collection-card__media { aspect-ratio: 1 / 1 !important; } .emm-services-grid-v2:not(.emm-services-grid-v2--mobile-featured) .emm-services-grid-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-services-grid-v2:not(.emm-services-grid-v2--mobile-featured) .emm-services-grid-primary, .emm-services-grid-v2:not(.emm-services-grid-v2--mobile-featured) .emm-services-grid-secondary { display: contents; } .emm-services-grid-v2:not(.emm-services-grid-v2--mobile-featured) .emm-services-grid-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-services-grid-v2:not(.emm-services-grid-v2--mobile-featured) .emm-services-grid-card.is-primary .emm-product-media { aspect-ratio: 1 / 1 !important; min-height: 0; } .emm-services-grid-v2--mobile-featured .emm-services-grid-primary { grid-template-columns: 1fr; } .emm-services-grid-v2--mobile-featured .emm-services-grid-card.is-primary .emm-product-media { aspect-ratio: 19 / 8 !important; min-height: 0; } .emm-services-grid-v2 .emm-services-grid-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emm-services-grid-v2.emm-products--overlay-cards:not(.emm-services-grid-v2--mobile-featured) .emm-services-grid-card.is-primary .emm-product-title { font-size: clamp( calc(0.95rem * var(--ui-service-title-scale-mobile, 1)), calc(3.6vw * var(--ui-service-title-scale-mobile, 1)), calc(1.15rem * var(--ui-service-title-scale-mobile, 1)) ); } .emm-services-grid-v2.emm-products--overlay-cards.emm-services-grid-v2--mobile-featured .emm-services-grid-card.is-primary .emm-product-title { font-size: clamp( calc(1.05rem * var(--ui-service-title-scale-mobile, 1)), calc(4.8vw * var(--ui-service-title-scale-mobile, 1)), calc(1.25rem * var(--ui-service-title-scale-mobile, 1)) ); } .emm-services-grid-v2.emm-products--overlay-cards .emm-services-grid-card.is-secondary .emm-product-title { font-size: clamp( calc(0.95rem * var(--ui-service-title-scale-mobile, 1)), calc(3.6vw * var(--ui-service-title-scale-mobile, 1)), calc(1.15rem * var(--ui-service-title-scale-mobile, 1)) ); } .emm-products--overlay-cards .emm-product-title { font-size: clamp(1rem, 4.5vw, 1.35rem); } } .product-container .buy #buyBtn.btn-secondary:hover:not(:disabled), .product-container .buy #buyBtn.btn-secondary:hover:not(:disabled) { background: var(--ui-color-paper, #f7f4ef) !important; border-color: #7f8a99 !important; } .product-container .stock-badge { border: 1px solid var(--ui-color-line, #d9d2c8); border-radius: var(--ui-radius-pill, 999px); box-shadow: none; } .product-container .stock-badge.in-stock, .product-container .stock-badge.low-stock, .product-container .stock-badge.backorder, .product-container .stock-badge.out-of-stock { background: color-mix(in srgb, var(--ui-color-paper, #f7f4ef) 90%, #fff) !important; color: var(--ui-color-ink-soft, #262c34) !important; } .product-container .stock-badge .dot { width: 6px !important; height: 6px !important; } .emm-sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 49; padding: 0.65rem var(--ui-page-pad, 1rem) calc(env(safe-area-inset-bottom) + 0.65rem); background: color-mix(in srgb, var(--ui-color-ivory, #fbf9f5) 90%, #fff); border-top: var(--ui-border-hairline, 1px solid #d9d2c8); transform: translateY(110%); transition: transform var(--ui-time-base, 200ms) var(--ui-ease, ease); } .emm-sticky-atc.is-visible { transform: translateY(0); } .emm-sticky-atc__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; } .emm-sticky-atc__meta { min-width: 0; } .emm-sticky-atc__title, .emm-sticky-atc__price { margin: 0; } .emm-sticky-atc__title { font-size: 0.95rem; font-weight: 600; } .emm-sticky-atc__price { color: var(--ui-color-ink-soft, #262c34); font-size: 0.82rem; } .emm-sticky-atc .emm-btn { min-width: 10rem; }  .cart-main, .cart-sidebar { border: var(--ui-border-hairline, 1px solid #d9d2c8) !important; border-radius: var(--ui-radius-lg, 0.9rem) !important; box-shadow: none !important; } .page-title { font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif) !important; letter-spacing: -0.01em; } .cart-page, .cart-page .summary-row, .cart-page .cart-item-title, .cart-page .cart-item-variant, .cart-page .continue-shopping, .cart-page .btn { font-family: var(--ui-font-body, "Helvetica Neue", Arial, sans-serif); } .cart-page .summary-title, .cart-page .page-title { font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif) !important; } .cart-item { border-bottom-color: var(--ui-color-line, #d9d2c8) !important; } .qty-selector, .qty-btn, .qty-input { border-color: var(--ui-color-line-strong, #bfb5a8) !important; } .remove-btn { color: color-mix(in srgb, var(--ui-color-ink, #15181d) 74%, #b42318) !important; } .summary-row.total { border-top-color: var(--ui-color-line, #d9d2c8) !important; }  .empty-cart p, .empty-state .empty-text { color: var(--ui-color-muted, #66717d) !important; }  main h1, main h2, main .emm-title { font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif); letter-spacing: -0.01em; }  .checkout-page .page-title, .checkout-page .section-title, .checkout-page .summary-title { font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif); letter-spacing: -0.01em; } .checkout-page .checkout-main, .checkout-page .checkout-sidebar, .checkout-page .section { border-color: var(--ui-color-line, #d9d2c8) !important; } .checkout-page .form-input, .checkout-page .checkbox-input { border-color: var(--ui-color-line-strong, #bfb5a8) !important; } .checkout-page .breadcrumb, .checkout-page .summary-note, .checkout-page .form-label, .checkout-page .section-title { color: var(--ui-color-ink-soft, #262c34) !important; }  .oc-modern .oc-hero-title, .oc-modern .oc-card h2, .oc-modern .oc-summary-total { font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif) !important; letter-spacing: -0.01em; } .oc-modern .oc-card, .oc-modern .oc-hero, .oc-modern .oc-item, .oc-modern .oc-pill, .oc-modern .oc-summary-divider { border-color: var(--ui-color-line, #d9d2c8) !important; box-shadow: none !important; } .oc-modern .oc-card-sub, .oc-modern .oc-item-variant, .oc-modern .oc-bullets { color: var(--ui-color-ink-soft, #262c34) !important; } .oc-modern .oc-item-img { overflow: hidden; } .oc-modern .oc-item-qty, .checkout-page .cart-item-qty { min-width: 1.1rem; min-height: 1.1rem; padding: 0 0.2rem; border-radius: 999px; font-size: 0.66rem; font-weight: 600; line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ui-color-paper, #f7f4ef) 86%, #fff); border: var(--ui-border-hairline, 1px solid #d9d2c8); color: var(--ui-color-ink, #15181d); }  .about-page .about-page__story, .about-page .about-page__approach { align-items: center; } .about-page__media { overflow: hidden; } .about-page__media img { display: block; width: 100%; height: auto; } .about-page__guiding-shell { border: 0; border-radius: 0; background: transparent; padding: 0; } .about-page__guiding--bg-soft-surface .about-page__guiding-shell { border-radius: clamp(0.9rem, 1.8vw, 1.2rem); padding: clamp(1rem, 2.2vw, 1.3rem); border: 1px solid color-mix(in srgb, var(--ui-color-line, #d9d2c8) 84%, transparent); background: rgba(255, 255, 255, var(--about-guiding-surface-alpha, 0.18)); } .about-page__guiding--bg-none .about-page__guiding-shell { border: 0; background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; } .about-page__guiding-head { gap: 0.35rem; } .about-page__guiding-title { margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .about-page__guiding-subtitle { margin: 0; max-width: 72ch; } .about-page__guiding-grid { margin: 0; padding: 0; list-style: none; display: grid; --about-guiding-column-gap: clamp(1.1rem, 2.6vw, 1.75rem); column-gap: var(--about-guiding-column-gap); row-gap: clamp(0.9rem, 1.8vw, 1.2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-page__guiding-grid.is-cols-1 { grid-template-columns: 1fr; } .about-page__guiding-grid.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-page__guiding-grid.is-compact { max-width: 100%; margin-inline: 0; } .about-page__guiding-item { list-style: none; min-width: 0; position: relative; } .about-page__guiding-card { min-height: 100%; display: grid; grid-template-columns: 1fr; align-items: start; gap: 0.6rem; padding: 0.15rem 0; text-decoration: none; color: inherit; } .about-page__guiding-grid--icon-layout-stacked .about-page__guiding-card { grid-template-columns: 1fr; } .about-page__guiding-grid--icon-layout-left .about-page__guiding-card { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; gap: clamp(0.75rem, 1.6vw, 1rem); } .about-page__guiding-card--link:hover, .about-page__guiding-card--link:focus-visible { text-decoration: none; } .about-page__guiding-card--link:hover .about-page__guiding-item-title, .about-page__guiding-card--link:focus-visible .about-page__guiding-item-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } .about-page__guiding-grid--card-minimal .about-page__guiding-card { border: 0; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; } .about-page__guiding-grid--card-outlined .about-page__guiding-card { background: transparent; border-radius: 0.75rem; border: 1px solid color-mix(in srgb, var(--ui-color-line, #d9d2c8) 85%, transparent); padding: clamp(0.7rem, 1.6vw, 0.92rem); } .about-page__guiding-grid--card-soft .about-page__guiding-card { border: 0; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; } .about-page__guiding-media { display: inline-flex; align-self: start; } .about-page__guiding-grid--icon-layout-left .about-page__guiding-media { align-self: stretch; align-items: flex-start; } .about-page__guiding-badge { width: calc(var(--about-guiding-icon-size, 20px) + 14px); height: calc(var(--about-guiding-icon-size, 20px) + 14px); border-radius: 0.64rem; border: 1px solid color-mix(in srgb, var(--ui-color-line, #d9d2c8) 78%, transparent); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ui-color-paper, #f7f4ef) 68%, #fff); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); flex: 0 0 auto; } .about-page__guiding-grid--badge-outlined .about-page__guiding-badge { background: transparent; box-shadow: none; } .about-page__guiding-grid--badge-subtle .about-page__guiding-badge { background: color-mix(in srgb, var(--ui-color-paper, #f7f4ef) 68%, #fff); } .about-page__guiding-grid--badge-none .about-page__guiding-badge { background: transparent; border-color: transparent; box-shadow: none; } .about-page__guiding-icon { width: var(--about-guiding-icon-size, 20px); height: var(--about-guiding-icon-size, 20px); display: inline-flex; align-items: center; justify-content: center; color: var(--ui-color-ink, #ffffff); } .about-page__guiding-icon svg, .about-page__guiding-icon .lucide { width: 100%; height: 100%; display: block; } .about-page__guiding-icon--svg svg { width: 100%; height: 100%; } .about-page__guiding-content { min-width: 0; display: grid; gap: 0.32rem; } .about-page__guiding-item-title { font-weight: 600; color: var(--ui-color-ink, #ffffff); font-size: 1rem; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .about-page__guiding-item-description { margin: 0; color: color-mix(in srgb, var(--ui-color-ink, #ffffff) 70%, #a1a1aa); font-size: 0.9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .about-page__guiding-link-label { margin-top: 0.18rem; font-size: 0.82rem; font-weight: 600; color: var(--ui-color-ink-soft, #262c34); } @media (min-width: 801px) { .about-page__guiding-grid.is-cols-2 .about-page__guiding-item:nth-child(2n)::before, .about-page__guiding-grid.is-cols-3 .about-page__guiding-item:nth-child(3n + 2)::before, .about-page__guiding-grid.is-cols-3 .about-page__guiding-item:nth-child(3n)::before { content: ""; position: absolute; left: calc(var(--about-guiding-column-gap) / -2); top: 0.22rem; bottom: 0.22rem; width: 1px; background: color-mix(in srgb, var(--ui-color-line, #d9d2c8) 82%, transparent); pointer-events: none; } } .about-page__richtext { color: var(--ui-color-ink-soft, #262c34); max-width: 65ch; } .contact-page__layout { align-items: start; } .contact-page__card { padding: clamp(1rem, 2vw, 1.5rem); } .contact-page__card address { font-style: normal; } .contact-page__enquiry-points { display: grid; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; } .contact-page__enquiry-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ui-space-2); align-items: baseline; } .contact-page__enquiry-points li::before { content: "✓"; color: var(--ui-color-accent); font-weight: 700; } .contact-page__card label { font-weight: 600; font-size: 0.9rem; color: var(--ui-color-ink-soft, #262c34); } .contact-page__card .emm-field, .contact-page__card textarea.emm-field { border: 1px solid color-mix(in srgb, var(--ui-color-line, #d9d2c8) 86%, #ffffff) !important; background: #1E1E1F !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(21, 24, 29, 0.04) !important; } .contact-page__card .emm-field::placeholder, .contact-page__card textarea.emm-field::placeholder { color: rgba(255, 255, 255, 0.68) !important; } .contact-page__map-card { padding: clamp(1rem, 2vw, 1.5rem); } .contact-page__map-card .embed-map-responsive { position: relative; text-align: right; width: 100%; height: 0; padding-bottom: 66.66666666666666%; border-radius: clamp(0.9rem, 1.8vw, 1.25rem); overflow: hidden; background: #ffffff; } .contact-page__map-card .embed-map-container { overflow: hidden; background: none !important; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .contact-page__map-card .embed-map-frame { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; border: 0; opacity: 0; transition: opacity 280ms ease; } .contact-page__map-card .embed-map-responsive.is-loaded .embed-map-frame { opacity: 1; } .contact-map__placeholder, .contact-map__fallback { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.65rem; color: rgba(255, 255, 255, 0.78); background: linear-gradient(145deg, #191a1c, #0f1011); transition: opacity 220ms ease, visibility 220ms ease; } .contact-map__placeholder svg, .contact-map__fallback svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; } .contact-page__map-card .embed-map-responsive.is-loaded .contact-map__placeholder { opacity: 0; visibility: hidden; } .contact-map__fallback { visibility: hidden; opacity: 0; text-decoration: none; } .contact-page__map-card .embed-map-responsive.is-error .contact-map__placeholder { visibility: hidden; opacity: 0; } .contact-page__map-card .embed-map-responsive.is-error .contact-map__fallback { visibility: visible; opacity: 1; } .contact-page__richtext { color: var(--ui-color-ink-soft, #262c34); max-width: 65ch; } .delivery-page__cards { align-items: stretch; } .delivery-page__card { padding: clamp(1rem, 2vw, 1.5rem); } .delivery-page__richtext { color: var(--ui-color-ink-soft, #262c34); line-height: 1.65; max-width: 70ch; } .legal-page__body { color: var(--ui-color-ink-soft, #262c34); line-height: 1.68; max-width: 70ch; }  .emm-service-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-width: 0; } .emm-service-intro[data-media-side="right"] { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .emm-service-intro__content { min-width: 0; max-width: 62ch; } .emm-image-text--editorial .emm-service-intro { align-items: end; gap: clamp(1.5rem, 5vw, 5rem); } .emm-image-text--editorial .emm-split__media { border-radius: 0; border-inline: 0; } .emm-image-text.is-text-only .emm-service-intro, .emm-image-text.is-media-only .emm-service-intro { grid-template-columns: minmax(0, 1fr); } .emm-image-text.is-text-only .emm-service-intro__content { max-width: 72ch; } .emm-feature-list--list .emm-feature-list__items { margin: 0; border-top: var(--ui-border-hairline); } .emm-feature-list--list .emm-feature-list__item { grid-template-columns: minmax(10rem, 0.72fr) minmax(0, 1.28fr); border: 0; border-bottom: var(--ui-border-hairline); border-radius: 0; background: transparent; padding: var(--ui-space-5) 0; } .emm-feature-list--list .emm-feature-list__icon { display: none; } .emm-feature-list--list :is(dt, dd) { margin: 0; } .emm-feature-list--list .emm-feature-list__item > dt { grid-column: 1; grid-row: 1 / span 2; } .emm-feature-list--list .emm-feature-list__item > dd { grid-column: 2; } .emm-feature-list__item :is(.emm-title, .emm-copy, .emm-link) { overflow-wrap: anywhere; }  .emm-hero .emm-title, .emm-section:not(.emm-hero) .emm-title, .emm-product-title, .emm-products--overlay-cards .emm-product-title, .emm-collection-card__title, .emm-site-footer__title { font-family: var(--ui-font-display, "Roboto", "Helvetica Neue", Arial, sans-serif); font-weight: var(--ui-font-display-weight, 600); letter-spacing: -0.02em; }  .emm-site-footer { border-top: 0; background: var(--ui-footer-bg, #0f1013); color: var(--ui-footer-ink, #ffffff); } .emm-site-footer :is(.emm-site-footer__title, .emm-site-footer__copy, .emm-site-footer__meta p, .emm-links-list a) { color: var(--ui-footer-ink, #ffffff); } .site-contact-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; } .site-contact-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.65rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--ui-radius-pill, 999px); color: inherit; font-weight: 700; text-decoration: none; } .site-contact-actions a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }  .emm-body--home #main-content > .emm-hero:first-child .emm-title { font-size: clamp(2.1rem, 3.65vw, 3.75rem); } @media (max-width: 768px) { .emm-body--home #main-content > .emm-hero:first-child .emm-title { font-size: clamp(1.08rem, 5.7vw, 1.5rem); }  .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__shell { height: clamp(38rem, 82svh, 43rem); min-height: clamp(38rem, 82svh, 43rem); aspect-ratio: auto; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__bg img { object-position: center 34%; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__bottom-gradient { display: block; height: 62%; background: linear-gradient( 180deg, transparent 0%, rgba(5, 7, 9, 0.12) 22%, rgba(5, 7, 9, 0.72) 60%, var(--ui-color-bg, #0b0b0d) 100% ); } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__content { max-width: min(22rem, calc(100% - 0.5rem)); gap: 0.4rem; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0.5rem; margin-top: 0.45rem; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__shell[data-emm-hero-slider] .emm-hero__actions { margin-bottom: 2.75rem; } .emm-body--home #main-content > .emm-hero--style-cinematic:first-child .emm-hero__actions .emm-btn { width: 100%; min-width: 0; min-height: 2.45rem; padding: 0.35rem 0.65rem; font-size: 0.72rem; line-height: 1.1; white-space: nowrap; } }  .services-directory-page { padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(4rem, 8vw, 7rem); background: transparent; } .services-directory-page > .emm-section { padding: 0; } .services-directory-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(3rem, 6vw, 5rem); } .services-directory-head-main { display: block; } .services-directory-title-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); align-items: end; gap: clamp(2rem, 8vw, 8rem); margin-top: clamp(1.4rem, 3vw, 2.5rem); } .services-directory-title { max-width: 12ch; margin: 0; color: #fff; font-family: var(--ui-font-display, var(--ui-font-body)); font-size: clamp(3.2rem, 7vw, 6.8rem); font-weight: var(--ui-font-display-weight, 600); line-height: 0.9; letter-spacing: -0.055em; } .services-directory-subtitle { max-width: 38rem; margin: 0 0 0.35rem; color: rgba(235, 239, 245, 0.76); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; } .services-directory-head--with-image { grid-template-columns: minmax(0, 1fr); } .services-directory-hero-media { min-height: 0; aspect-ratio: 21 / 7; border: 0; border-radius: 4px; background: transparent; } .services-directory-controls { display: grid; gap: 1rem; margin-bottom: clamp(3rem, 6vw, 5rem); } .services-directory-selector-label { margin: 0; color: rgba(235, 239, 245, 0.72); font-size: 0.92rem; font-weight: 600; } .services-category-pills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 0; overflow: visible; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); } .services-category-pills .emm-btn { display: grid; align-content: start; justify-items: start; gap: 0.5rem; min-height: 7.2rem; padding: 1.25rem 1.1rem; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: transparent; color: rgba(255, 255, 255, 0.66); text-align: left; white-space: normal; } .services-category-pills .emm-btn:last-child { border-right: 0; } .services-category-pills .emm-btn span { color: #fff; font-size: 1.02rem; font-weight: 700; } .services-category-pills .emm-btn small { max-width: 18ch; font-size: 0.78rem; font-weight: 450; line-height: 1.4; } .services-category-pills .emm-btn:hover, .services-category-pills .emm-btn.is-active { background: rgba(255, 255, 255, 0.055); color: rgba(255, 255, 255, 0.88); } .services-category-pills .emm-btn.is-active { box-shadow: inset 0 2px 0 #fff; } .services-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem) clamp(1.2rem, 2.5vw, 2.5rem); } .services-directory-card { border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible; } .services-directory-card-link { display: grid; gap: 1rem; } .services-directory-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #111216; } .services-directory-media img { transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 300ms ease; } .services-directory-card-link:hover .services-directory-media img { transform: scale(1.025); opacity: 0.92; } .services-directory-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.25rem; padding: 0; background: transparent; } .services-directory-card-title { margin: 0; color: #fff; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.15; } .services-directory-summary { max-width: 52ch; margin: 0.55rem 0 0; color: rgba(235, 239, 245, 0.7); font-size: 0.96rem; line-height: 1.5; } .services-directory-body > svg { width: 20px; height: 20px; margin-top: 0.1rem; color: rgba(255, 255, 255, 0.72); stroke-width: 1.6; transition: transform 180ms ease; } .services-directory-card-link:hover .services-directory-body > svg { transform: translate(2px, -2px); } .services-directory-guidance { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 7vw, 7rem); margin-top: clamp(4.5rem, 9vw, 8rem); padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .services-directory-guidance h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.03em; } .services-directory-guidance p { max-width: 54ch; margin: 0.8rem 0 0; color: rgba(235, 239, 245, 0.72); line-height: 1.55; } .services-directory-guidance .emm-btn { display: inline-flex; align-items: center; gap: 1rem; min-height: 3rem; white-space: nowrap; } .services-directory-guidance .emm-btn svg { width: 17px; height: 17px; } @media (max-width: 47.99rem) { .services-directory-page { padding: 1.5rem 0 4rem; } .services-directory-head { margin-bottom: 2.75rem; } .services-directory-title-wrap { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; margin-top: 1.25rem; } .services-directory-title { max-width: none; font-size: clamp(2.5rem, 14vw, 3.5rem); line-height: 0.94; } .services-directory-subtitle { max-width: 34ch; font-size: 1rem; } .services-directory-hero-media { aspect-ratio: 16 / 8; } .services-directory-controls { margin-inline: calc(-1 * var(--ui-page-pad)); margin-bottom: 3rem; } .services-directory-selector-label { padding-inline: var(--ui-page-pad); } .services-category-pills { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--ui-page-pad); } .services-category-pills::-webkit-scrollbar { display: none; } .services-category-pills .emm-btn { flex: 0 0 min(72vw, 17rem); min-height: 6.6rem; scroll-snap-align: start; border-right: 1px solid rgba(255, 255, 255, 0.1); } .services-directory-grid, .services-directory-grid.services-view--single, .services-directory-grid.services-view--list { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; } .services-directory-card-link, .services-directory-grid.services-view--list .services-directory-card-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; } .services-directory-grid.services-view--list .services-directory-media { aspect-ratio: 16 / 10; min-height: 0; } .services-directory-card-title { font-size: 1.15rem; } .services-directory-summary, .services-directory-grid.services-view--list .services-directory-summary { display: block; margin-top: 0.45rem; font-size: 0.92rem; line-height: 1.48; -webkit-line-clamp: unset; overflow: visible; } .services-directory-guidance { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.75rem; margin-top: 4.5rem; padding-block: 2.25rem; } .services-directory-guidance h2 { max-width: 12ch; font-size: 2rem; } .services-directory-guidance .emm-btn { width: 100%; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } } @media (max-width: 800px) { .emm-service-intro, .emm-service-intro[data-media-side="right"], .emm-feature-list--list .emm-feature-list__item { grid-template-columns: minmax(0, 1fr); } .emm-feature-list--list .emm-feature-list__item > :is(dt, dd) { grid-column: 1; grid-row: auto; } .emm-service-intro .emm-split__media { order: -1; } .product-container .buy { grid-template-columns: 1fr; } .product-container .buy .qty, .product-container .buy .btn { width: 100%; } .about-page__guiding-grid { grid-template-columns: 1fr; } .about-page__guiding-item::before { content: none !important; } .emm-sticky-atc__inner { flex-direction: column; align-items: stretch; } .emm-sticky-atc .emm-btn { width: 100%; min-width: 0; } } @media (min-width: 801px) and (max-width: 980px) { .about-page__guiding-grid.is-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-page__guiding-grid.is-cols-3 .about-page__guiding-item::before { content: none; } .about-page__guiding-grid.is-cols-3 .about-page__guiding-item:nth-child(2n)::before { content: ""; position: absolute; left: calc(var(--about-guiding-column-gap) / -2); top: 0.22rem; bottom: 0.22rem; width: 1px; background: color-mix(in srgb, var(--ui-color-line, #d9d2c8) 82%, transparent); pointer-events: none; } }  .job-lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: clamp(12px, 3vw, 28px); background: transparent; color: #fff; } .job-lightbox::backdrop { background: rgba(5, 6, 8, .94); } .job-lightbox [hidden] { display: none !important; } .job-lightbox[open] { display: grid; place-items: center; } .job-lightbox__viewer { width: min(1200px, 100%); display: grid; gap: 12px; } .job-lightbox__toolbar { display: flex; align-items: center; justify-content: space-between; } .job-lightbox button { border: 1px solid #555; border-radius: 8px; color: #fff; background: #17181b; min-width: 44px; min-height: 44px; padding: 8px 14px; cursor: pointer; } .job-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .job-lightbox__stage { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; } .job-lightbox__stage img { width: 100%; height: min(72dvh, 850px); object-fit: contain; touch-action: pan-y; user-select: none; } .job-lightbox__stage button { font-size: 28px; padding: 0; } .job-lightbox__caption, .job-lightbox__error { margin: 0; text-align: center; font-size: .9rem; } body.job-lightbox-open { overflow: hidden; } @media (max-width: 600px) { .job-lightbox__stage { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 4px; } .job-lightbox__stage button { min-width: 36px; } } .emm-feature-list--job-details { padding-block: 20px; } .emm-feature-list--job-details > .emm-container { gap: 14px; } .emm-feature-list--job-details .emm-feature-list__items { gap: 0; } .emm-feature-list--job-details .emm-feature-list__item { grid-template-columns: minmax(90px, 22%) minmax(0, 1fr); gap: 14px; padding: 10px 0; } .emm-feature-list--job-details .emm-feature-list__item > dt { grid-column: 1; grid-row: 1; } .emm-feature-list--job-details .emm-feature-list__item > dd { grid-column: 2; grid-row: auto; } .flex-page--social > .work-banner:first-child { margin-top: calc(-1 * var(--ui-header-bottom, var(--ui-header-height, 4.9rem))); } .work-banner { position: relative; overflow: hidden; width: 100%; min-height: min(82svh, 860px); display: grid; background: #090a0c; color: #fff; } .work-banner__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1024px) { .work-banner { min-height: min(94svh, 1080px); } } .work-banner__media { position:absolute; inset:0; overflow:hidden; } .work-banner__media > :is(img,canvas) { transform-origin:50% 50%; } .work-banner__frame { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 700ms ease; pointer-events:none; } .work-banner__frame.is-visible { opacity:1; } .work-banner__motion { position:absolute; right:0; bottom:16px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #ffffff30; border-radius:50%; background:#1118; color:#fff; cursor:pointer; } .work-banner__motion .work-banner__play, .work-banner__motion.is-paused .work-banner__pause { display:none; } .work-banner__motion.is-paused .work-banner__play { display:block; } .work-banner__progress { position:absolute; inset:-1px; transform:rotate(-90deg); pointer-events:none; } .work-banner__progress circle { stroke:rgba(255,255,255,.65); stroke-width:1.25; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; } .work-banner__motion[hidden] { display:none; } .work-banner__motion:focus-visible { outline:2px solid #fff; outline-offset:4px; } @media (prefers-reduced-motion:reduce) { .work-banner__frame { transition:none; } } .work-banner::before, .work-banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; } .work-banner::before { background: linear-gradient(180deg, rgba(5,6,8,.78), rgba(5,6,8,.32) 20%, transparent 42%); } .work-banner::after { background: linear-gradient(180deg, transparent 38%, rgba(12,12,14,.6) 78%, #0c0c0e); } .work-banner__body { position: relative; z-index: 2; width: min(1240px, calc(100vw - 44px)); margin-inline: auto; min-height: inherit; padding: calc(var(--ui-header-bottom, var(--ui-header-height, 4.9rem)) + 28px) 0 clamp(36px, 5vw, 66px); display: flex; flex-direction: column; gap: 12px; } .work-banner .emm-breadcrumbs { margin: 0; color: rgba(255,255,255,.72); } .work-banner .emm-breadcrumbs a, .work-banner .emm-breadcrumbs span { color: inherit; } .work-banner__context { margin-top: auto; max-width: 760px; } .work-banner__title { margin: 0; max-width: 18ch; color: #fff; font-size: clamp(2.1rem, 3.65vw, 3.75rem); line-height: .98; letter-spacing: -.05em; } .work-banner__context .emm-copy { margin: 12px 0 0; color: rgba(255,255,255,.85); } @keyframes work-text-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .work-project .work-banner.is-intro-pending .work-banner__body { opacity:0; } .work-project .work-banner.is-intro-ready .work-banner__image { animation:work-photo-reveal .65s ease-out both; } .work-project .work-banner.is-intro-ready .work-banner__body { animation:work-text-rise .85s cubic-bezier(.22,.61,.36,1) .4s both; } } @keyframes work-photo-reveal { from { opacity:0; } to { opacity:1; } } .gallery-card--published-work .gallery-card__link { aspect-ratio: var(--work-image-ratio, 16/9); overflow: hidden; } .gallery-card--published-work img { position: absolute; inset: 0; min-height: 0; } .gallery-card--published-work .gallery-card__overlay { color: #fff; padding: 42px 16px 16px; } .gallery-card--published-work .gallery-card__overlay strong { font-size: 1rem; }  .work-project .emm-container { max-width: 1240px; } .work-project .project-opening { padding: 32px 0 36px; } .project-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ui-color-muted, #a5a7af); text-decoration: none; } .project-back:hover { color: inherit; text-decoration: underline; } .project-heading { max-width: 920px; margin: 32px 0 40px; } .project-eyebrow { margin: 0 0 16px; color: var(--ui-color-muted, #a5a7af); font-size: 13px; letter-spacing: .06em; } .project-heading h1 { margin: 0; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -.045em; font-weight: 550; overflow-wrap: anywhere; } .project-heading .emm-copy { margin: 20px 0 0; max-width: 64ch; } .project-lead { margin: 0; } .project-lead img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; background: #191a1d; } .work-project > .emm-section { padding-block: clamp(28px, 4vw, 52px); } .work-project .emm-simple-text__inner { max-width: 760px; margin-inline: 0; text-align: left; } .work-project .emm-simple-text__content { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.85; overflow-wrap: anywhere; } .work-project .emm-title { letter-spacing: -.025em; line-height: 1.2; } .work-project .emm-feature-list--job-details .emm-feature-list__items { max-width: 760px; } .work-project .emm-feature-list--job-details .emm-feature-list__item { padding-block: 16px; } .work-project .emm-simple-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px; } .work-project .emm-simple-gallery__card { min-width: 0; border: 0; background: transparent; box-shadow: none; border-radius: 12px; } .work-project .emm-simple-gallery__card .gallery-card__link { display: block; aspect-ratio: 4/3; } .work-project .emm-simple-gallery__card img { display: block; width: 100%; min-height: 0; height: 100%; aspect-ratio: 4/3; object-fit: cover; } .work-project .emm-simple-gallery__card .gallery-card__overlay { display: none; } .work-project .emm-simple-gallery__head { margin-bottom: 28px; } .work-project .emm-cta-strip__inner { padding: clamp(24px, 4vw, 48px); border: 1px solid rgba(150,150,160,.2); border-radius: 16px; gap: 28px; } .work-project .emm-cta-strip__actions { flex-shrink: 0; } .work-project a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; } @media (max-width: 767px) { .work-project .project-opening { padding: 16px 0 20px; } .project-heading { margin: 24px 0 28px; } .project-lead img { aspect-ratio: 4/3; border-radius: 10px; } .work-project .emm-simple-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; } .work-project .emm-feature-list--job-details .emm-feature-list__item { grid-template-columns: minmax(0, 1fr); gap: 6px; } .work-project .emm-feature-list--job-details .emm-feature-list__item > dd { grid-column: 1; overflow-wrap: anywhere; } .work-project .emm-cta-strip__inner { display: flex; flex-direction: column; align-items: stretch; } .work-project .emm-cta-strip__actions .emm-btn { width: 100%; min-height: 48px; } }  .work-portfolio--compact .work-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:32px 0 20px; } .work-portfolio--compact .work-section-heading h2 { margin:0; } .work-portfolio--compact .work-section-heading a { color:inherit; font-size:14px; } .work-portfolio.work-portfolio--compact .gallery-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:32px 24px; margin-bottom:56px; } .work-portfolio.work-portfolio--compact .gallery-card__overlay strong { font-size:clamp(17px,1.5vw,21px); line-height:1.35; } .work-portfolio--compact time { font-size:12px; color:var(--ui-color-muted,#a5a7af); } .work-archive-controls { display:grid; grid-template-columns:minmax(180px,2fr) 1fr 1fr auto; gap:16px; align-items:end; margin:32px 0 20px; } .work-archive-controls label { display:grid; gap:8px; font-size:13px; min-width:0; } .work-archive-controls input,.work-archive-controls select { width:100%; min-width:0; min-height:46px; padding:10px 12px; border:1px solid #45454a; border-radius:8px; background:#171719; color:#fff; font:inherit; font-size:16px; } .work-archive-controls option { background:#171719; color:#fff; } .work-results { font-size:14px; color:var(--ui-color-muted,#a5a7af); margin-bottom:24px; } .work-results a { margin-left:16px; color:inherit; } .work-pagination { display:flex; flex-wrap:wrap; gap:8px; margin:32px 0; } .work-pagination__gap { display:grid; place-items:center; min-width:24px; min-height:44px; color:var(--ui-color-muted,#a5a7af); } .work-pagination a { display:grid; place-items:center; min-width:44px; min-height:44px; padding:8px 12px; border:1px solid #45454a; border-radius:8px; color:inherit; text-decoration:none; } .work-pagination [aria-current] { background:#f3f1e8; color:#111; } .work-featured-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .work-featured-categories a { display:flex; flex-direction:column; gap:10px; color:inherit; text-decoration:none; min-width:0; } .work-featured-categories img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:10px; } .work-featured-categories span { font-size:13px; color:var(--ui-color-muted,#a5a7af); } .work-portfolio--compact :is(a,input,select,button):focus-visible { outline:2px solid currentColor; outline-offset:4px; } @media (min-width:768px) and (max-width:1023px) { .work-portfolio.work-portfolio--compact .gallery-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .work-archive-controls { grid-template-columns:1fr 1fr; } } @media (max-width:767px) { .work-portfolio.work-portfolio--compact .gallery-category-grid { grid-template-columns:minmax(0,1fr) !important; gap:20px; margin-bottom:36px; } .work-portfolio.work-portfolio--compact .gallery-card__link { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:start; gap:16px; } .work-portfolio.work-portfolio--compact .gallery-card__link img,.work-portfolio.work-portfolio--compact .work-photo-unavailable { aspect-ratio:1; border-radius:8px; } .work-portfolio.work-portfolio--compact .gallery-card__overlay { padding:0; gap:5px; } .work-portfolio.work-portfolio--compact .gallery-card__overlay strong { font-size:16px; } .work-portfolio.work-portfolio--compact .gallery-card__overlay small { font-size:11px; } .work-section-heading { flex-wrap:wrap; } .work-archive-controls { grid-template-columns:minmax(0,1fr); gap:14px; } .work-featured-categories { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; } }  @media (min-width:1024px) { .work-portfolio.work-portfolio--showcase .gallery-category-grid { grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:calc((100% - 60px)/4); gap:20px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; padding:6px 0 14px; margin-bottom:32px; } .work-portfolio.work-portfolio--showcase .gallery-card { scroll-snap-align:start; } .work-portfolio.work-portfolio--showcase .gallery-card__overlay { padding-top:12px; gap:5px; } .work-portfolio.work-portfolio--showcase .gallery-card__overlay strong { font-size:16px; line-height:1.35; } .work-portfolio.work-portfolio--showcase .gallery-card__overlay small { font-size:11px; } .work-portfolio--showcase .services-directory-head { margin-bottom:24px; } .work-portfolio--showcase .services-directory-title { font-size:clamp(40px,4vw,56px); } } @media (min-width:1440px) { .work-portfolio.work-portfolio--showcase .gallery-category-grid { grid-auto-columns:calc((100% - 80px)/5); } } .work-card-tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; color:var(--ui-color-muted,#a5a7af); font-size:11px; line-height:1.5; } .work-card-tag { display:inline-block; padding:3px 7px; border:1px solid #ffffff20; border-radius:5px; overflow-wrap:anywhere; } .work-card-tags__more { max-width:100%; } .work-card-tags__more summary { display:inline-flex; align-items:center; min-height:32px; padding:3px 7px; cursor:pointer; list-style:none; text-decoration:underline; text-underline-offset:3px; } .work-card-tags__more summary::-webkit-details-marker { display:none; } .work-card-tags__more summary:focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:4px; } .work-card-tags__extras { display:flex; flex-wrap:wrap; gap:6px; padding-top:6px; } @media (max-width:767px) { .work-portfolio--showcase .work-card-tags { margin-left:116px; } .work-card-tags__more summary { min-height:44px; } }  @media (min-width: 1024px) { .work-portfolio.work-portfolio--archive .gallery-category-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:28px 20px; } .work-portfolio.work-portfolio--archive .gallery-card__overlay { padding-top:12px; gap:5px; } .work-portfolio.work-portfolio--archive .gallery-card__overlay strong { font-size:16px; line-height:1.35; } .work-portfolio.work-portfolio--archive .gallery-card__overlay small { font-size:11px; } } @media (min-width: 1440px) { .work-portfolio.work-portfolio--archive .gallery-category-grid { grid-template-columns:repeat(5,minmax(0,1fr)) !important; } }  .work-portfolio .emm-page-shell { display: block; max-width: 1280px; } .work-portfolio .services-directory-head { margin-bottom: 32px; } .work-portfolio .services-directory-title-wrap { margin-top: 24px; } .emm-page .services-directory-title, .work-portfolio .services-directory-title { font-size: clamp(40px, 5vw, 72px); line-height: 1; } .work-portfolio .gallery-category-grid, .work-portfolio .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 48px 32px; margin: 0 0 64px; } .work-portfolio .gallery-card { min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .work-portfolio .gallery-card__link { display: block; aspect-ratio: auto; overflow: visible; border-radius: 0; } .work-portfolio .gallery-card img, .work-portfolio .work-photo-unavailable { position: relative !important; inset: auto !important; display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #1b1c20; } .work-portfolio .work-photo-unavailable { display: grid; } .work-portfolio .gallery-card__overlay { position: static; display: flex; flex-direction: column; gap: 8px; padding: 18px 0 0; background: none; color: inherit; } .work-portfolio .gallery-card__overlay strong { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; } .work-portfolio .gallery-card__overlay small { order: -1; font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--ui-color-muted, #a5a7af); } .work-portfolio .gallery-card__link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; } .work-portfolio .gallery-card__link:hover strong { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } .work-portfolio .gallery-preview-head { margin: 0 0 24px; } .work-category-nav { margin: 28px 0 40px; } .work-category-picker summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; padding: 12px 16px; border: 1px solid #ffffff26; border-radius: 10px; cursor: pointer; list-style: none; } .work-category-picker summary::-webkit-details-marker { display: none; } .work-category-picker[open] summary svg { transform: rotate(180deg); } .work-category-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; } .work-category-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid #ffffff26; border-radius: 24px; color: inherit; text-decoration: none; font-size: 14px; } .work-category-links a[aria-current], .work-category-links a:hover { background: #ffffff12; } .work-category-picker summary:focus-visible, .work-category-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } @media (min-width: 768px) { .work-category-picker { display: none; } } @media (max-width: 767px) { .work-portfolio .gallery-category-grid, .work-portfolio .gallery-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; margin-bottom: 44px; } .work-portfolio .gallery-card__overlay { padding-top: 14px; gap: 6px; } .work-category-nav { margin: 20px 0 28px; } .work-category-links { flex-direction: column; gap: 0; } .work-category-links a { border: 0; border-radius: 6px; } .work-category-desktop { display: none; } } @media (max-width: 767px) { .work-portfolio.work-portfolio--archive .gallery-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 12px; } .work-portfolio.work-portfolio--archive .gallery-card__link { display: block; } .work-portfolio.work-portfolio--archive .gallery-card__link img, .work-portfolio.work-portfolio--archive .work-photo-unavailable { aspect-ratio: 4/3; border-radius: 8px; } .work-portfolio.work-portfolio--archive .gallery-card__overlay { padding-top: 10px; gap: 4px; } .work-portfolio.work-portfolio--archive .gallery-card__overlay strong { font-size: 14px; line-height: 1.35; } .work-portfolio.work-portfolio--archive .gallery-card__overlay small { font-size: 10px; letter-spacing: .02em; } .work-banner { --work-banner-blend:#0c0c0e; min-height:0; display:block; padding-top:0; background:var(--work-banner-blend); } .work-banner__media { position:relative; inset:auto; width:100%; aspect-ratio:var(--work-photo-ratio,4/3); } .work-banner__image { position:relative; display:block; width:100%; height:auto; aspect-ratio:var(--work-photo-ratio, 4/3); } .work-banner__frame { top:0; height:var(--work-photo-height, 75vw); } .work-banner::before { display:block; top:0; bottom:auto; height:var(--work-photo-height, 75vw); background:linear-gradient(180deg,rgba(5,6,8,.55),transparent 45%); }  .work-banner::after { top:0; height:calc(var(--work-photo-height, 75vw) + 1px); bottom:auto; background:linear-gradient(180deg,rgba(12,12,14,0) 52%,rgba(12,12,14,.16) 65%,rgba(12,12,14,.48) 79%,rgba(12,12,14,.85) 91%,var(--work-banner-blend) calc(100% - 2px)); } .work-banner__body { width:calc(100% - 32px); min-height:0; padding:18px 52px 24px 0; box-sizing:border-box; } .work-banner__body > .emm-breadcrumbs { display:flex; min-width:0; font-size:12px; line-height:1.5; } .work-banner .emm-breadcrumbs a, .work-banner .emm-breadcrumbs [aria-hidden] { flex-shrink:0; } .work-banner__title { font-size: clamp(1.5rem, 7vw, 2.1rem); max-width: 20ch; } .work-banner .emm-breadcrumbs { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; } .work-banner .emm-breadcrumbs span:last-child { overflow: hidden; text-overflow: ellipsis; } }  .emm-header :is(.emm-header__menu-btn, .emm-icon-btn):focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } .service-system-page .service-back-btn { min-width: 44px; min-height: 44px; } .svc-hero-context .svc-hero-quote { display: inline-flex; justify-self: start; width: fit-content; margin-top: 1rem; min-height: 44px; color: #15181d; background: #ffffff; border-color: #ffffff; } .svc-hero-context .svc-hero-quote:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }  .emm-footer-modern { border-top: 1px solid rgba(255,255,255,.1); } .emm-footer-modern .emm-site-footer__inner { padding-block: clamp(2rem,4vw,3.5rem) 1.25rem; } .emm-footer-modern__masthead { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12); } .emm-footer-modern__brand { margin:0 0 .5rem; font-family:var(--ui-font-display,"Roboto",Arial,sans-serif); font-size:clamp(1.35rem,2.1vw,1.9rem); font-weight:600; letter-spacing:-.035em; line-height:1.2; } .emm-footer-modern__masthead .emm-btn { flex-shrink:0; gap:1rem; } .emm-footer-modern .emm-site-footer__grid { grid-template-columns:.8fr 1.2fr 1fr; gap:clamp(1.5rem,4vw,4rem); } .emm-footer-modern .emm-site-footer__block { min-width:0; gap:.65rem; } .emm-footer-modern .emm-site-footer__title { margin-bottom:.5rem; color:#aaaeb5; font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; } .emm-footer-modern .emm-site-footer__copy { color:#b8bbc1; font-size:.875rem; line-height:1.65; } .emm-footer-modern__links { list-style:none; padding:0; margin:0; display:grid; gap:0; } .emm-footer-modern__links a,.emm-footer-modern__contact a { display:inline-flex; align-items:center; min-height:2.75rem; color:#f4f4f5; text-decoration:none; font-size:.9375rem; } .emm-footer-modern__contact { display:grid; justify-items:start; } .emm-footer-modern__contact a { overflow-wrap:anywhere; max-width:100%; } .emm-footer-modern__location { margin:0; font-size:.9375rem; color:#f4f4f5; line-height:1.65; } .emm-footer-modern__text-link { display:inline-flex; align-items:center; justify-self:start; gap:.6rem; min-height:2.75rem; color:#f4f4f5; text-underline-offset:.3em; font-size:.875rem; } .emm-footer-modern .emm-site-footer__meta { gap:.5rem 1.5rem; margin-top:2rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.12); } .emm-footer-modern .emm-site-footer__meta p,.emm-footer-modern__credit,.emm-footer-modern__legal a { color:#aaaeb5; font-size:.75rem; line-height:1.5; } .emm-footer-modern__legal { display:flex; flex-wrap:wrap; gap:1.25rem; } .emm-footer-modern__legal a,.emm-footer-modern__credit { display:inline-flex; align-items:center; min-height:2.75rem; text-decoration:none; } .emm-footer-modern a:hover { color:#fff; text-decoration:underline; text-underline-offset:.25em; } .emm-footer-modern a:focus-visible { outline:2px solid #fff; outline-offset:4px; border-radius:3px; } @media(max-width:48rem) { .emm-footer-modern__masthead { align-items:flex-start; gap:1.25rem; flex-direction:column; padding-bottom:1.5rem; margin-bottom:1.5rem; } .emm-footer-modern .emm-site-footer__grid { grid-template-columns:1fr 1fr; gap:1.5rem; } .emm-footer-modern .emm-site-footer__block:first-child { grid-column:1 / -1; } .emm-footer-modern__links { display:flex; flex-wrap:wrap; gap:0 1.5rem; } .emm-footer-modern .emm-site-footer__meta { align-items:flex-start; flex-direction:column; margin-top:1.5rem; } } @media(max-width:34rem) { .emm-footer-modern .emm-site-footer__grid { grid-template-columns:1fr; } .emm-footer-modern .emm-site-footer__block:first-child { grid-column:auto; } .emm-footer-modern .emm-site-footer__block { gap:.4rem; } }