/* Homepage-only integration of the approved Gradient Hero prototype. */
html { overflow-x: clip; overscroll-behavior-x: none; scrollbar-gutter: stable; }
.home-gradient { --gh-header-height: 88px; }
.home-gradient .site-header { background: transparent; transition: background-color 180ms ease, box-shadow 180ms ease; }
.home-gradient .site-header.is-scrolled { background: var(--color-paper); }
.gh-shell { color: #454740; }
.gh-shell { position: relative; isolation: isolate; background: #f5f3ee; }
.gh-stage { display: flex; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--gh-header-height) + 22px) 0 48px; overflow: clip; }
.gh-stage h1 { flex: none; margin: 0; padding: 0 20px; font-family: var(--font-display); font-size: clamp(44px, 5.3vw, 68px); font-weight: 300; line-height: 1.04; letter-spacing: .03em; text-align: center; }
.gh-stage h1:focus { outline: none; }

.gh-gallery { --card-height: clamp(230px, calc(100svh - 490px), 380px); --card-gap: 34px; position: relative; flex: none; width: 100%; margin-top: 24px; }
.gh-colors { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.gh-wash { position: absolute; inset: 0; opacity: 0; background-color: var(--wash-base); background-image: var(--wash-field); will-change: opacity; }
.gh-wash--reut {
  --wash-base: #faf8f2;
  --wash-field:
    radial-gradient(ellipse 28% 25% at 96% 43%, #f2bda080 0%, #f2bda02b 44%, #f2bda000 100%),
    radial-gradient(ellipse 56% 38% at 2% 43%, #f1d58cbd 0%, #f1d58c47 46%, #f1d58c00 100%);
}
.gh-wash--bulie {
  --wash-base: #f1f3f3;
  --wash-field:
    radial-gradient(ellipse 51% 38% at 96% 47%, #518cbaa3 0%, #518cba38 48%, #518cba00 100%),
    radial-gradient(ellipse 37% 32% at 4% 75%, #8b9eaf66 0%, #8b9eaf00 100%),
    radial-gradient(ellipse 68% 25% at 52% 105%, #b7cbd261 0%, #b7cbd200 100%);
}
.gh-wash--amit {
  --wash-base: #f5f4eb;
  --wash-field:
    radial-gradient(ellipse 44% 38% at 8% 60%, #84974a94 0%, #84974a30 49%, #84974a00 100%),
    radial-gradient(ellipse 51% 31% at 99% 38%, #b8c5a078 0%, #b8c5a000 100%),
    radial-gradient(ellipse 70% 27% at 76% 103%, #bec6a661 0%, #bec6a600 100%);
}
.gh-wash--browmaster {
  --wash-base: #f0f1f2;
  --wash-field:
    radial-gradient(ellipse 33% 33% at 98% 61%, #345c8780 0%, #345c872b 44%, #345c8700 100%),
    radial-gradient(ellipse 58% 34% at 0% 43%, #93a5b77a 0%, #93a5b724 51%, #93a5b700 100%),
    radial-gradient(ellipse 75% 29% at 37% 105%, #abb5c163 0%, #abb5c100 100%);
}
.gh-window { position: relative; width: min(100%, 1020px); height: calc(var(--card-height) + 40px); margin: 0 auto; overflow: clip; overscroll-behavior-x: none; perspective: 1800px; perspective-origin: 50% 48%; cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.gh-window:focus-visible { outline-offset: -6px; border-radius: 2px; }
.gh-window.has-pointer-focus:focus, .gh-window.has-pointer-focus :focus { outline: none; }
.gh-window.is-dragging, .gh-window.is-dragging * { cursor: grabbing; }
.gh-card { position: absolute; top: 48%; left: 50%; width: calc(var(--card-height) * .75); height: var(--card-height); margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 2px; background: #f3f2ef; opacity: 0; transform: translate(-50%, -50%); backface-visibility: hidden; cursor: pointer; will-change: transform, opacity; -webkit-user-drag: none; }
.gh-card:first-child { opacity: 1; }
.gh-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.gh-navigation { position: relative; display: grid; grid-template-columns: 44px 178px 44px; align-items: center; justify-content: center; gap: 20px; height: 44px; margin-top: 0; }
.gh-arrow { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; background: transparent; transition: color 200ms, transform 200ms; }
.gh-arrow svg { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.gh-arrow:hover { color: var(--color-night); transform: translateX(3px); }
.gh-arrow:first-child:hover { transform: translateX(-3px); }
.gh-caption { display: flex; width: 178px; height: 44px; align-items: center; justify-content: center; }
.gh-name { white-space: nowrap; font-family: var(--font-display); font-size: 21px; font-weight: 300; line-height: 28px; }
.gh-name:hover, .gh-name:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.gh-action { position: relative; flex: none; margin-top: 26px; }
.gh-intro { display: flex; justify-content: center; padding: 36px 24px 84px; }
.gh-copy-mobile { display: none; }
.gh-intro p { max-width: 690px; margin: 0; font-size: 21px; font-weight: 300; line-height: 1.5; text-align: center; text-wrap: pretty; }
.gh-cta { position: relative; display: inline-flex; min-height: 47px; align-items: center; justify-content: center; overflow: hidden; padding: 10px 17px; border: 1px solid currentColor; font-size: 19px; font-weight: 300; line-height: 1.2; transition: color 300ms, border-color 300ms; }
.gh-cta::before { position: absolute; inset: 0; background: var(--color-night); content: ""; transform: translateY(101%); transition: transform 350ms cubic-bezier(.22, 1, .36, 1); }
.gh-cta span { position: relative; }
.gh-cta:hover { color: white; border-color: var(--color-night); }
.gh-cta:hover::before { transform: none; }

.gh-name { font-family: "Nyght Serif", Georgia, serif; }
.gh-arrow { color: inherit; cursor: pointer; }
.gh-navigation { direction: ltr; }
html[dir="rtl"] .gh-navigation { direction: rtl; }
html[dir="rtl"] .gh-arrow svg { transform: scaleX(-1); }
html[dir="rtl"] .gh-arrow:hover { transform: translateX(-3px); }
html[dir="rtl"] .gh-arrow:first-child:hover { transform: translateX(3px); }
.gh-cta:hover > span { transform: none; }
.gh-cta:focus-visible { color: #454740; }
.gh-gallery:not(.is-enhanced) .gh-window { display: flex; gap: var(--card-gap); height: auto; padding: 20px 24px; overflow-x: auto; }
.gh-gallery:not(.is-enhanced) .gh-card { position: static; flex: 0 0 auto; opacity: 1; transform: none; }
.gh-gallery:not(.is-enhanced) .gh-navigation { display: none; }
@media (min-width: 768px) {
  .gh-stage h1 { transform: translateY(-8px); }
}
@media (max-width: 767px) {
  .home-gradient { --gh-header-height: 72px; }
  .gh-stage { padding: calc(var(--gh-header-height) + 12px) 0 max(20px, env(safe-area-inset-bottom)); }
  .gh-stage h1 { padding-inline: 20px; font-size: clamp(34px, 9.5vw, 46px); line-height: 1.06; }
  .gh-gallery { --card-height: clamp(140px, calc(100svh - 550px), 308px); --card-gap: 22px; margin-top: 20px; }
  .gh-window { height: calc(var(--card-height) + 24px); perspective: 1600px; }
  .gh-card { top: 50%; }
  /* Match the gap to the heading with the gap to the 28px caption in its 44px row. */
  .gh-navigation { gap: 10px; margin-top: 12px; }
  .gh-name { font-size: 20px; }
  .gh-action { margin-top: 20px; }
  .gh-intro { flex: none; padding: 24px 24px 0; }
  .gh-copy-desktop { display: none; }
  .gh-copy-mobile { display: inline; }
  .gh-intro p { max-width: 440px; font-size: 16px; line-height: 1.4; text-wrap: balance; }
  .gh-copy-phrase { white-space: nowrap; }
  .gh-cta { min-height: 44px; padding: 10px 15px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-shell *, .gh-shell *::before, .gh-shell *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}