:root { --paper: #f7f3ec; --surface: #fffaf2; --surface-2: #efe8dc; --ink: #211d18; --muted: #756b5f; --line: rgba(33, 29, 24, 0.12); --gold: #b88a44; --moss: #5f6f52; --clay: #9b6a4a; --charcoal: #211d18; --ss-green: #116A42; --ss-teal: var(--moss); --ss-cyan: var(--gold); --ss-brown: var(--clay); --ss-slate: #4e463d; --ss-ink: var(--charcoal); --ss-teal-dark: #4e5d44; --ss-surface-soft: #fffaf2; --ss-bg: var(--paper); --ss-surface: var(--surface); --ss-surface2: var(--surface-2); --ss-text: var(--ink); --ss-muted: var(--muted); --ss-border: var(--line); --ss-radius: 18px; --ss-radius-sm: 12px; --ss-radius-lg: 24px; --ss-radius-1: 14px; --ss-radius-2: 20px; --ss-shadow: 0 12px 30px rgba(33, 29, 24, 0.10); --ss-shadow-soft: 0 8px 22px rgba(33, 29, 24, 0.08); --ss-shadow-1: 0 10px 30px rgba(33, 29, 24, 0.08); --ss-shadow-2: 0 18px 55px rgba(33, 29, 24, 0.10); --ss-ring: 0 0 0 4px rgba(184, 138, 68, 0.22); --ss-max: 1040px; --ss-pad: clamp(16px, 3vw, 28px); --ss-pad-x: var(--ss-pad); --ss-pad-y: clamp(24px, 4vw, 56px); --ss-s1: 8px; --ss-s2: 16px; --ss-s3: 24px; --ss-s4: 32px; --ss-stack: clamp(12px, 2.2vw, 20px); --ss-prose: 68ch; --ss-text-max: var(--ss-prose); --ss-cta: var(--ss-green); --ss-cta-hover: var(--ss-slate); --ss-focus: rgba(184, 138, 68, 0.34); } :where(svg) { height: auto; max-width: 100%; } :where(svg:not([width]):not([height])) { display: inline-block; width: 1em; height: 1em; vertical-align: middle; } :root { --ss-logo-nav-size: 52px; --ss-logo-nav-size-mobile: 44px; --ss-logo-footer-size: 72px; } .ss-nav .ssbjj-brand, .ss-footer .ssbjj-footer-brand { display: inline-flex !important; align-items: center; gap: 0.625rem; color: var(--ss-text, var(--ss-ink, #362B24)); text-decoration: none; text-align: left; } .ss-nav .ssbjj-brand:hover, .ss-footer .ssbjj-footer-brand:hover { color: var(--ss-teal, #289FA1); text-decoration: none; } .ss-nav .ssbjj-brand picture { display: inline-flex; flex: 0 0 auto; } .ss-nav .ssbjj-brand__logo, .ss-footer .ssbjj-footer-brand__logo { object-fit: contain; flex: 0 0 auto; margin: 0; } .ss-nav .ssbjj-brand__logo { width: var(--ss-logo-nav-size); height: var(--ss-logo-nav-size); } .ssbjj-brand__name { font-weight: 800; letter-spacing: 0.015em; line-height: 1.05; } .ss-footer .ssbjj-footer-brand__logo { width: var(--ss-logo-footer-size); height: var(--ss-logo-footer-size); } .ss-footer .ssbjj-footer-brand { margin-bottom: 0.75rem; } @media (max-width: 767.98px) { .ss-nav .ssbjj-brand { gap: 0.5rem; width: auto; max-width: 100%; } .ss-nav .ssbjj-brand__logo { width: var(--ss-logo-nav-size-mobile); height: var(--ss-logo-nav-size-mobile); } .ss-nav .ssbjj-brand__name { max-width: 11rem; font-size: 0.95rem; } } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ss-bg); color: var(--ss-text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } p { color: var(--ss-muted); line-height: 1.65; margin-bottom: 0.9rem; max-width: var(--ss-prose); } h1, h2, h3, h4, h5, h6 { color: var(--ss-text); letter-spacing: -0.015em; } h1 { line-height: 1.12; margin-bottom: 0.7rem; } h2 { line-height: 1.18; margin-bottom: 0.65rem; } ul, ol { margin-bottom: 0.9rem; } li { margin-bottom: 0.35rem; } img { max-width: 100%; height: auto; } a { color: var(--ss-teal); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--ss-slate); } hr { border-color: var(--ss-border); opacity: 1; } :focus-visible { outline: 3px solid var(--ss-focus); outline-offset: 2px; } .ss-container { max-width: var(--ss-max); margin-left: auto; margin-right: auto; padding-left: var(--ss-pad); padding-right: var(--ss-pad); width: 100%; } .ss-section { padding-block: var(--ss-s4, var(--ss-pad-y)); } .ss-stack > * + * { margin-top: var(--ss-s2); } .ss-prose { max-width: var(--ss-text-max); } @media (min-width: 900px) { .ss-stack > * + * { margin-top: var(--ss-s3); } } .ss-prose h1, .ss-prose h2, .ss-prose h3 { margin-top: 1.6em; } .ss-prose h1 + *, .ss-prose h2 + *, .ss-prose h3 + * { margin-top: 0.6em; } .order-6 { order: 6 !important; } .order-7 { order: 7 !important; } .order-8 { order: 8 !important; } .ss-global-final-cta { padding: clamp(2rem, 4vw, 3rem) 0; background: var(--ss-bg); } .ss-global-final-cta__card { border: 1px solid var(--ss-border); border-radius: 1.5rem; background: var(--ss-surface); box-shadow: 0 18px 44px rgba(54, 43, 36, 0.08); padding: clamp(1.25rem, 4vw, 2.25rem); } .ss-global-final-cta__eyebrow { margin: 0 0 0.45rem; color: var(--ss-green); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .ss-global-final-cta__card h2 { max-width: 48rem; margin: 0; color: var(--ss-ink); font-size: clamp(1.65rem, 4vw, 2.65rem); line-height: 1.08; letter-spacing: 0; } .ss-global-final-cta__copy { max-width: 42rem; margin: 0.85rem 0 0; color: var(--ss-muted); font-size: 1.02rem; line-height: 1.55; } .ss-global-final-cta__actions { display: grid; gap: 0.65rem; margin-top: 1.2rem; } .ss-global-btn { min-height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1rem; font-weight: 900; text-align: center; text-decoration: none; } .ss-global-btn--primary { background: var(--ss-green); border: 1px solid var(--ss-green); color: #fff; } .ss-global-btn--primary:hover, .ss-global-btn--primary:focus-visible { background: #0D5233; border-color: #0D5233; color: #fff; transform: translateY(-1px); } .ss-global-btn--soft { background: #fffaf2; border: 1px solid var(--ss-border); color: var(--ss-ink); } .ss-global-btn--soft:hover, .ss-global-btn--soft:focus-visible { background: var(--ss-surface2); color: var(--ss-green); transform: translateY(-1px); } .ss-global-btn--link { color: var(--ss-ink); } .ss-global-btn--link:hover, .ss-global-btn--link:focus-visible { color: var(--ss-green); } .ss-site-footer { background: linear-gradient(180deg, var(--ss-bg), var(--ss-surface2)); border-top: 1px solid var(--ss-border); padding: 2rem 0 6.25rem; padding-bottom: calc(6.25rem + env(safe-area-inset-bottom)); } .ss-footer-card { display: grid; gap: 1rem; } .ss-footer-brand, .ss-footer-group { background: rgba(255, 250, 242, 0.94); border: 1px solid var(--ss-border); border-radius: 1.25rem; box-shadow: 0 12px 30px rgba(33, 29, 24, 0.06); } .ss-footer-brand { padding: 1.2rem; } .ss-footer-logo { display: inline-flex; color: var(--ss-ink); font-size: 1.2rem; font-weight: 900; letter-spacing: 0; text-decoration: none; } .ss-footer-logo:hover, .ss-footer-logo:focus-visible { color: var(--ss-green); } .ss-footer-tagline { max-width: 34rem; margin: 0.55rem 0 0; color: var(--ss-text); font-weight: 800; line-height: 1.35; } .ss-footer-address { margin: 0.85rem 0 0; color: var(--ss-muted); font-style: normal; line-height: 1.45; } .ss-footer-proof { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; } .ss-footer-proof span { min-height: 2rem; display: inline-flex; align-items: center; padding: 0.38rem 0.65rem; border: 1px solid var(--ss-border); border-radius: 999px; background: var(--ss-surface2); color: var(--ss-ink); font-size: 0.86rem; font-weight: 850; } .ss-footer-nav { display: grid; gap: 0.75rem; } .ss-footer-group { padding: 0.15rem 1rem; } .ss-footer-group summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; color: var(--ss-ink); font-weight: 900; cursor: pointer; list-style: none; } .ss-footer-group summary::-webkit-details-marker { display: none; } .ss-footer-group summary::after { content: "+"; width: 1.65rem; height: 1.65rem; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; margin-left: 0.75rem; border-radius: 999px; background: var(--ss-surface2); color: var(--ss-green); font-weight: 900; } .ss-footer-group[open] summary::after { content: "-"; } .ss-footer-group ul { display: grid; gap: 0.25rem; list-style: none; margin: 0; padding: 0 0 0.85rem; } .ss-footer-group a { min-height: 42px; display: flex; align-items: center; border-radius: 0.75rem; color: var(--ss-muted); font-weight: 800; line-height: 1.25; text-decoration: none; } .ss-footer-group a:hover, .ss-footer-group a:focus-visible { color: var(--ss-green); } .ss-footer-bottom { display: grid; gap: 0.8rem; margin-top: 1rem; color: var(--ss-muted); font-size: 0.92rem; } .ss-footer-bottom p { margin: 0; } .ss-footer-contact { display: flex; flex-wrap: wrap; gap: 0.8rem; } .ss-footer-contact a { color: var(--ss-ink); font-weight: 900; text-decoration: none; } .ss-footer-contact a:hover, .ss-footer-contact a:focus-visible { color: var(--ss-green); } .ss-mobile-actionbar { display: none; } @media (max-width: 767.98px) { .ss-mobile-actionbar, .ss-mobile-sticky-cta, .mobile-sticky-cta, .sticky-cta, .partner-mobile-sticky, .birthday-mobile-sticky, .ff-sticky-actionbar, .hospitality-mobile-sticky-actions, .partner-stickybar, .ss-mobile-sticky { position: fixed; z-index: 1050; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-radius: 0; border: none; border-top: 1px solid rgba(54, 43, 36, 0.14); background: rgba(251, 250, 248, 0.96); box-shadow: 0 -8px 24px rgba(33, 29, 24, 0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(18px); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short) var(--ease-out); } .ss-mobile-actionbar.is-visible, .ss-mobile-sticky-cta, .mobile-sticky-cta, .sticky-cta, .partner-mobile-sticky, .birthday-mobile-sticky, .ff-sticky-actionbar, .hospitality-mobile-sticky-actions, .partner-stickybar, .ss-mobile-sticky { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .ss-mobile-actionbar a, .ss-mobile-actionbar button, .ss-mobile-sticky-cta a, .mobile-sticky-cta a, .sticky-cta a, .partner-mobile-sticky a, .birthday-mobile-sticky a, .ff-sticky-actionbar a, .hospitality-mobile-sticky-actions a, .partner-stickybar a, .ss-mobile-sticky a { min-width: 0; max-width: 100%; width: 100%; min-height: 48px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); border-radius: 999px; background: var(--ss-green, #116A42); color: #ffffff !important; font-size: clamp(0.70rem, 3.2vw, 0.92rem) !important; font-weight: 700; line-height: 1; text-align: center; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-shadow: 0 4px 14px rgba(17, 106, 66, 0.22); transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); } .ss-mobile-actionbar a::before, .ss-mobile-actionbar button::before { content: none !important; } body:has(.ss-mobile-actionbar) .ss-mobile-sticky-cta, body:has(.ss-mobile-actionbar) .partner-mobile-sticky, body:has(.ss-mobile-actionbar) .birthday-mobile-sticky, body:has(.ss-mobile-actionbar) .ff-sticky-actionbar, body:has(.ss-mobile-actionbar) .hospitality-mobile-sticky-actions, body:has(.ss-mobile-actionbar) .partner-stickybar, body:has(.ss-mobile-actionbar) .ss-mobile-sticky { display: none !important; } } .ss-global-btn:focus-visible, .ss-footer-logo:focus-visible, .ss-footer-group summary:focus-visible, .ss-footer-group a:focus-visible, .ss-footer-contact a:focus-visible, .ss-mobile-actionbar a:focus-visible { outline: 3px solid rgba(0, 221, 224, 0.7); outline-offset: 3px; } @media (max-width: 767.98px) { body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } } @media (min-width: 576px) { .ss-global-final-cta__actions { grid-template-columns: auto auto auto; justify-content: start; align-items: center; } } @media (min-width: 768px) { body { padding-bottom: 0; padding-block-end: 0; } .ss-site-footer { padding: 3rem 0 1.5rem; } .ss-footer-card { grid-template-columns: 1.1fr 1.6fr; align-items: stretch; } .ss-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .ss-footer-group { padding: 1rem; } .ss-footer-group summary { min-height: auto; margin-bottom: 0.75rem; cursor: default; pointer-events: none; } .ss-footer-group summary::after { display: none; } .ss-footer-group ul { padding-bottom: 0; } .ss-footer-bottom { grid-template-columns: 1fr auto; align-items: center; } .ss-mobile-actionbar { display: none; } } @media (min-width: 1100px) { .ss-footer-card { grid-template-columns: 0.9fr 2fr; } .ss-footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ss-footer-brand { padding: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .ss-mobile-actionbar, .ss-footer-brand, .ss-footer-group, .ss-global-final-cta__card { transition: none; } } @media print { .ss-mobile-actionbar { display: none; } body { padding-bottom: 0; } } .ss-context-link { margin: 1.25rem 0; padding: 1rem 1.25rem; background-color: var(--ss-surface2, #f4f1ed); border: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); border-radius: 4px; font-size: 0.95rem; line-height: 1.5; color: var(--ss-muted, #4f433c); text-align: left; } .ss-context-link a { color: var(--ss-teal, #289fa1); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color 0.15s ease; } .ss-context-link a:hover, .ss-context-link a:focus-visible { color: var(--ss-green, #116A42); } :root { --paper: var(--color-paper); --surface: var(--color-paper); --surface-2: var(--color-paper-2); --ink: var(--color-ink); --muted: var(--color-muted); --line: var(--ss-border); --gold: var(--color-gold); --moss: var(--color-accent); --clay: var(--color-brown); --charcoal: var(--color-ink); --ss-teal-dark: var(--color-accent-strong); --ss-surface-soft: var(--color-paper-2); --ss-radius: var(--radius-card); --ss-radius-sm: var(--radius-input); --ss-radius-lg: calc(var(--radius-card) + 0.25rem); --ss-radius-1: var(--radius-input); --ss-radius-2: var(--radius-card); --ss-shadow: var(--shadow-card); --ss-shadow-soft: var(--shadow-card); --ss-shadow-1: var(--shadow-card); --ss-shadow-2: var(--shadow-raised); --ss-ring: 0 0 0 3px color-mix(in oklab, var(--color-focus) 28%, transparent); --ss-max: var(--container-standard); --ss-pad: var(--gutter); --ss-pad-x: var(--gutter); --ss-pad-y: clamp(var(--space-lg), 5vw, var(--space-2xl)); --ss-s1: var(--space-2xs); --ss-s2: var(--space-sm); --ss-s3: var(--space-md); --ss-s4: var(--space-lg); --ss-stack: clamp(var(--space-xs), 2.2vw, var(--space-md)); --ss-prose: 68ch; --ss-cta: var(--color-accent); --ss-cta-hover: var(--color-accent-strong); --ss-focus: var(--color-focus); } ::selection { background: var(--color-accent); color: var(--color-accent-ink); } :where(.ss-global-btn--primary, .ss-btn--primary, .btn-primary) { border-radius: var(--radius-pill); } :where(.ss-global-btn, .ss-btn, .btn) { min-width: 44px; white-space: nowrap; } :where(.ss-btn__icon) { width: 2rem; height: 2rem; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; margin-left: 0.45rem; border-radius: 50%; background: var(--cta-icon-surface); color: currentColor; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); } @media (hover: hover) and (pointer: fine) { :where(.ss-btn, .ss-global-btn, .btn):hover .ss-btn__icon, :where(.ss-btn, .ss-global-btn, .btn):focus-visible .ss-btn__icon { transform: translate(1px, -1px) scale(1.05); background: var(--cta-icon-surface-hover); } } :where(.ss-card, .ss-global-final-cta__card, .ss-footer-brand, .ss-footer-group) { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-outer); background: var(--color-paper-2); box-shadow: var(--bezel-outer); } :where(.ss-card > :first-child, .ss-global-final-cta__card > :first-child) { min-width: 0; } @media (hover: hover) and (pointer: fine) { :where(.ss-footer-group a, .ss-footer-contact a, .ss-context-link a) { transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); } :where(.ss-footer-group a, .ss-footer-contact a, .ss-context-link a):hover { transform: translateX(1px); } } html, body { overflow-x: clip; } html { background: var(--color-paper); } body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); letter-spacing: var(--tracking-body); } :where(h1, h2, h3, h4, h5, h6) { min-width: 0; overflow-wrap: anywhere; color: var(--color-ink); font-family: var(--font-display); font-style: normal; font-weight: var(--display-weight); letter-spacing: var(--tracking-display); text-wrap: balance; } :where(p, li, dd) { color: var(--color-muted); } :where(a) { color: var(--color-accent); text-decoration-color: color-mix(in oklab, currentColor 42%, transparent); text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.2em; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } :where(button, input, select, textarea) { font: inherit; } :where(input, select, textarea) { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); outline: 2px solid transparent; outline-offset: 1px; background: var(--color-paper); color: var(--color-ink); } :where(input, select, textarea):focus-visible { border-width: var(--rule-hair); border-color: var(--color-neutral); outline-color: var(--color-focus); } :where(.ss-btn, .ss-global-btn, .btn) { min-height: 44px; border-radius: var(--radius-button); font-family: var(--font-body); font-weight: 650; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); } :where(.ss-btn, .ss-global-btn, .btn):active { transform: translateY(1px); } :where(.ss-btn, .ss-global-btn, .btn)[aria-disabled="true"], :where(.ss-btn, .ss-global-btn, .btn):disabled { cursor: not-allowed; opacity: 0.4; pointer-events: none; transform: none; } :where(.ss-btn--primary, .ss-global-btn--primary, .btn-primary) { border-color: var(--color-accent); background: var(--color-accent); box-shadow: none; color: var(--color-accent-ink); } :where(.ss-btn--ghost, .ss-global-btn--secondary, .btn-outline-primary) { border-color: var(--color-rule-2); background: var(--color-paper); box-shadow: none; color: var(--color-ink); } :where(.ss-card, .ss-global-final-cta__card, .ss-footer-card) { border-color: var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); } .ss-main { background: var(--color-paper); } .ss-context-link { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-muted); } @media (hover: hover) and (pointer: fine) { :where(a):hover { color: var(--color-accent-strong); } :where(.ss-btn--primary, .ss-global-btn--primary, .btn-primary):hover { border-color: var(--color-accent-strong); background: var(--color-accent-strong); color: var(--color-accent-ink); } :where(.ss-btn--ghost, .ss-global-btn--secondary, .btn-outline-primary):hover { border-color: var(--color-neutral); background: var(--color-paper-2); color: var(--color-ink); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }