/* ==========================================================================
   Empersini — Rosh Hashanah landing page
   1:1 recreation of Figma frames "Slide 16:9 - 11" (desktop, 1920x4525) and
   "iPhone 16 - 3" (mobile, 393x7498), file Y5vmAnQvqGk6bEKgDIQvD3.
   This file holds every rule that ISN'T pure per-element geometry — those
   generated left/top/width/height rules live in css/geometry.css and are
   appended after this file. See README for the build process.
   ========================================================================== */

/* ---- 1. Reset & base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* Reserve the vertical scrollbar's track width unconditionally, from the
     very first paint -- before #frame-viewport's real (post-scale) height
     has been assigned by script.js. Without this, a classic/non-overlay
     scrollbar (Windows/Linux Chrome & Firefox, older Safari) only claims
     its ~15-17px once page overflow is confirmed, which can lag one tick
     behind script.js's very first layout() call. Any scale computed in
     that gap is based on a viewport.clientWidth that's still a few pixels
     too wide, so #frame-scaler renders a few pixels too big and gets
     clipped by #frame-viewport's `overflow: hidden` -- visible as a
     persistent blank strip between the design's right edge and the real
     scrollbar (reported: page "not centered", gap on the right). Reserving
     the gutter up front makes the very first clientWidth reading already
     correct, so there's nothing left to correct after the fact. */
  scrollbar-gutter: stable;
}
body {
  background-image:url(assets/images/bg.png);
  background-size:100% auto;
  font-family: 'Google Sans', Arial, sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font-family: inherit; }
a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: -1px; padding: 0; border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  background: #fff6df;
  color: #000;
  padding: 0;
  z-index: 1000;
  border-radius: 0 0 8px 8px;
}
.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  padding: 10px 16px;
}

:focus-visible {
  outline: 3px solid #b08d3e;
  outline-offset: 2px;
}

/* ---- 2. Frame scaffold: fixed-pixel canvases, scaled to fit the viewport
   width (like zooming the Figma frame), so absolute Figma coordinates need
   no per-breakpoint recalculation. Only the mobile/desktop frame choice
   changes at 768px — nothing inside either frame reflows. ---------------- */
.frame-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-image:url(assets/images/bg.png);
  background-size:100% 100%;
  /* This page is dir="rtl" (Hebrew). Without this override, .frame-scaler
     below -- a plain block box narrower/wider than its container -- gets
     its horizontal position resolved per the RTL block-layout rule (CSS2.1
     10.3.3): with a fixed width and both margins at their default 0, the
     box hugs the containing block's RIGHT edge instead of the left. That
     silently breaks the scale-to-fit math below, which assumes the
     unscaled frame's own top-left corner sits at x:0 (transform-origin:
     "top left" scales everything relative to that corner). With the RTL
     hug, the frame instead renders shifted left by (viewport width - frame
     width)px -- at common desktop widths this is hundreds of px, so a
     large slice of the design's right-hand side (logo/headline area, in
     this right-to-left layout) renders off past the right edge while a
     matching blank gap opens on the left -- exactly the "content runs past
     the right edge" bug. Forcing ltr here is layout-only: .frame below
     restores direction: rtl for every actual design element/text inside. */
  direction: ltr;
}
.frame-scaler {
  transform-origin: top left;
  position: relative;
}
.frame {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  /* Undo the direction: ltr above for everything the design actually
     contains -- text shaping/bidi order and any direction-sensitive
     default must stay exactly as authored (dir="rtl" on <html>). Every
     element positioned inside .frame uses explicit left/top px (not
     direction-relative offsets), so this has zero effect on layout, only
     on text/bidi rendering. */
  direction: rtl;
}
.frame--desktop { width: 1920px; height: 4525px; }
.frame--mobile {
  width: 393px;
  /* +130px over the Figma-authored 7498px: the fixed WhatsApp button
     (bottom-right, anchored to the real viewport, not this frame) was
     sitting directly on top of the closing banner's text once the page
     was scrolled all the way down, since that banner ended almost
     exactly at the frame's original bottom edge. The extra space below
     the last section gives the button clear room. */
  height: 7628px;
}
.frame[hidden] { display: none; }

/* Fixed WhatsApp button — not part of the Figma source; a functional
   addition requested outside the design. Sits as a sibling of
   #frame-viewport (see index.html) so position:fixed anchors to the real
   browser viewport, not the scaled/transformed frame — it stays pinned to
   the bottom-right corner through the entire scroll, on both the desktop
   and mobile frames. `right`/`bottom` (not logical inset-inline) are used
   deliberately so it stays at the physical bottom-right even though the
   page is dir="rtl". */
.whatsapp-fixed-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-fixed-btn:hover,
.whatsapp-fixed-btn:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
.whatsapp-fixed-btn:active {
  transform: scale(0.97);
}
@media (max-width: 480px) {
  .whatsapp-fixed-btn {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
  }
}

.abs { position: absolute; }

/* ---- 3. Shared image/mask utilities --------------------------------------- */
.fill-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.mask-photo {
  overflow: hidden;
  pointer-events: none;
}
.mask-photo__img {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.mask-photo__img--cover {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.deco-watermark, .deco-rotated {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deco-watermark__img { max-width: none; }

/* ---- 4. Masthead ----------------------------------------------------------- */
.masthead { /* static: children anchor to .frame */ }

/* ---- 5. Typography tokens -------------------------------------------------- */
.intro__heading, .goodtoknow__heading, .closing__heading {
  font-family: 'Google Sans', sans-serif;
  font-weight: 700;
}
/* Client feedback: closing banner text should be bold. It was previously
   listed here too, alongside the regular-weight tokens — since this rule
   comes second with equal specificity, it was silently overriding the
   font-weight:700 above and forcing it back to 400. Removed from this
   list so the bold rule above wins. */
.intro__body, .cream-banner__text, .goodtoknow__text, .cta-banner__intro,
.card-white__label, .thumbs-row__label {
  font-family: 'Google Sans', sans-serif;
  font-weight: 400;
}

/* ---- 6. Thumbnail row (desktop, fixed) & strip (mobile, scrollable) ------ */
.thumbs-row { /* static: children anchor to .frame */ }
.thumbs-row__list { /* static: children anchor to .frame */ }
.thumbs-row__item { position: absolute; background: #fff; }
.thumbs-row__box {
  position: absolute; inset: 0;
  overflow: hidden;
}

.thumbs-row__item{
transition: transform 1s ease, box-shadow 0.15s ease;
}

.thumbs-row__item:hover {
  transform:scale(1.010);
}

.thumbs-row__img { position: absolute; max-width: none; }
.thumbs-row__label {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -22px;
  width: 67px; height: 34px; line-height: 34px;
  font-size: 12px; text-align: center; color: #000;
}
.thumbs-strip {
  position: absolute; left: 0; top: 1681px;
  width: 393px; height: 145px;
  overflow-x: auto; overflow-y: hidden;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  /* direction must be ltr on THIS element (the overflow/scroll container),
     not just the inner <ul> -- it's this box's own `direction` that decides
     which side an over-width child (or a scrollable region) overflows to
     and where the default/unscrolled position sits. The page itself is
     dir="rtl", so without this override the doubled-width marquee list
     (and, before that, the plain one-set-wide list) overflows/starts on the
     wrong side and the strip renders empty or shows the wrong end first. */
  direction: ltr;
}
.thumbs-strip__list {
  /* width: set per-frame in geometry.css (2x one set, for the seamless
     mobile marquee loop -- see section 20 below) */
  position: relative;
  height: 145px;
}
.thumbs-strip__item {
  position: absolute; top: 0;
  width: 261.209px; height: 128px;
  background: #fff;
}

/* ---- 7. Intro section (heading, body, cream callout) --------------------- */
.intro { /* static: children anchor to .frame */ }
.intro__heading {
  position: absolute;
  left: 67%; transform: translateX(-50%);
  text-align: center;
}
.frame--desktop .intro__heading { top: 844px; width: 902px; font-size: 33px; line-height: 34px; }
.frame--mobile .intro__heading { top: 1207px; left:50%; width: 462px; font-size: 33px; line-height: 34px; }
.intro__body {
  position: absolute;
  left: 67%; transform: translateX(-50%);
  text-align: center;
}
.frame--desktop .intro__body { top: 884px; width: 698px; font-size: 22px; line-height: 34px; }
.frame--mobile .intro__body { top: 1292px; left:50%; width: 357.512px; font-size: 16px; line-height: 25px; }
.intro__body strong, .cream-banner__text strong, .goodtoknow__text strong, .cta-banner__intro strong {
  font-weight: 700;
}

/* ---- 8. Cream (#fff6df) callout / banner family --------------------------- */
.cream-banner {
  background: #fff6df;
  border-radius: 16px;
  box-shadow: 0 4px 15px 0 rgba(0,0,0,0.13);
}
.cream-banner__text {
  /* Vertically centered via top:50%+translateY, NOT display:flex: a flex
     container wraps each contiguous run of inline content (the plain text
     before <strong>, then <strong> itself) into its OWN anonymous flex
     item, so with the default nowrap it laid the two runs out side by side
     in a squeezed column instead of one continuously-wrapping paragraph --
     visibly wrong vs. Figma wherever the combined text needed more than one
     line (both cream banners with bold copy). translateY centering keeps
     normal inline/paragraph flow so text + <strong> wrap together exactly
     like plain text would. */
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: 16px; line-height: 26px;
  padding: 0 22px;
  margin: 0;
}
.cream-banner__text--lg { font-size: 22px; line-height: 27px; padding: 0 28px; }
.cream-banner--wide {}
/* Mobile callouts sit in narrower cream boxes than their desktop
   counterparts, so the horizontal padding that centers the text to
   Figma's exact text-box width differs per frame. */
.frame--mobile .cream-banner__text { padding: 0 10.4px; }
.frame--mobile .cream-banner__text--lg { padding: 0 18.5px; }

/* ---- 9. Necklace / large photo sections ----------------------------------- */
.necklace-photo, .photos-pair { /* static: children anchor to .frame */ }
.disclaimer-text {
  font-size: 12px; line-height: 34px; height: 34px;
  color: #000; text-align: right;
  transform: translateX(100%);
}
.disclaimer-text--rotated {
  transform: rotate(89.73deg) translateX(100%);
  transform-origin: right top;
}

/* ---- 10. White product cards (2001-2004 + the numbered grid) ------------- */
.card-white {
  position: absolute;
  border-radius: 16px;
  overflow: visible;
}
.card-white__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 16px;
}
.card-white__label {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 67px; height: 34px; line-height: 34px;
  font-size: 12px; text-align: center; color: #000;
}
.cards-2000__list, .product-grid__list { /* static: children anchor to .frame */ }
.cards-2000__list--column .cards-2000__item,
.product-grid__list--column .product-grid__item { position: absolute; }

.product-grid { /* static: children anchor to .frame */ }
.product-grid__item { position: absolute; }
.product-grid__img {
  position: absolute;
  max-width: none;
  object-fit: contain;
}

.cards-2000__item:hover {
  transform: scale(1.010);
}

.product-grid__item:hover {
  transform: scale(1.010);
}

/* ---- 11. Horizontal scroll strip (mobile "awaits" pattern) ---------------- */
.photos-strip {
  position: absolute; left: 0; top: 3240px;
  width: 393px; height: 501px;
  overflow-x: auto; overflow-y: hidden;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  /* see .thumbs-strip above: direction must be ltr on the overflow
     container itself, not just the inner <ul>. */
  direction: ltr;
}
.photos-strip__list {
  /* width: set per-frame in geometry.css (2x one set, for the seamless
     mobile marquee loop -- see section 20 below) */
  position: relative;
  height: 501px;
}
.photos-strip__item {
  position: absolute; top: 0;
  width: 305px; height: 501px;
}
.photos-strip__img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---- 12. "Good to know" banner -------------------------------------------- */
.goodtoknow { /* static: children anchor to .frame */ }
.goodtoknow__heading {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  font-size: 29px; line-height: 34px;
  text-align: center;
}
.frame--desktop .goodtoknow__heading { top: 3483px; width: 276px; }
.frame--mobile .goodtoknow__heading { top: 6200px; width: 276px; }
.goodtoknow__text {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  text-align: center;
  font-size: 16px;
}
.frame--desktop .goodtoknow__text { top: 3521px; width: 1091px; line-height: 24px; }
.frame--mobile .goodtoknow__text { top: 6234px; width: 329px; line-height: 22px; }

/* ---- 13. CTA banner + intro paragraph ------------------------------------- */
.cta-banner { /* static: children anchor to .frame */ }
.cta-banner__intro {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  text-align: center;
  font-size: 22px; line-height: 24px;
}
.frame--desktop .cta-banner__intro { top: 3859px; width: 932px; }
.frame--mobile .cta-banner__intro { top: 6715px; width: 286px; }

/* ---- 14. Buttons & interactive elements: reset native chrome, keep the
   exact visual box, add paint-only hover/press feedback. -------------------- */
.cta-reset {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent;
  padding: 0; margin: 0;
  font: inherit; color: inherit;
  text-align: inherit;
  display: block;
  cursor: pointer;
}
.contact-cta__submit {
  /* position:absolute is required here: this button's left:50% (set per-
     frame by .d-submit-pill/.m-submit-pill) + the translateX(-50%) below
     are the same centering pattern used throughout this codebase, and only
     work together under absolute positioning. Without it, `left` is a
     no-op on a statically-flowed element while the transform still fires,
     shifting the button an extra half-width to the left of where the
     already-centered wrap div puts it. */
  position: absolute;
  background: #fff6df;
  border-radius: 22.5px;
  font-family: 'Google Sans', sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.671;
  text-align: center;
  transition: 0.3s ease;
  transform: translateX(-50%) translateZ(0);
}


@media (hover: hover) {
  .contact-cta__submit:hover { background:#000000; color:#FFF6DF; }
}
.contact-cta__submit:active { transform: translateX(-50%) scale(0.97); filter: brightness(0.94); }
.contact-cta__submit:disabled { opacity: 0.7; cursor: default; }

/* ---- 15. Contact form ------------------------------------------------------ */
.contact { /* static: children anchor to .frame */ }
.contact-form { /* static: children anchor to .frame */ }
.contact-form__row { position: absolute; }
.form-field__input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: 0;
  background: #ffffff;
  box-shadow: 0 4px 81px 8px rgba(0,0,0,0.15);
  font-family: 'Google Sans', sans-serif;
  font-size: 16px;
  color: rgba(0,0,0,0.55);
  text-align: right;
  padding: 0 20px;
  direction: rtl;
}
.form-field__input::placeholder { color: rgba(0,0,0,0.55); }
.form-field__input.is-invalid {
  box-shadow: 0 4px 81px 8px rgba(200,60,50,0.28), 0 0 0 2px rgba(200,60,50,0.55) inset;
}
.contact-form__submit-wrap { text-align: center; }
.contact-form__hint {
  position: absolute; left: 50%; top: 50px; transform: translateX(-50%);
  width: 251.911px; height: 39px;
  font-family: 'Google Sans', sans-serif;
  font-size: 16px; text-align: center;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  margin: 0;
}
.form-status {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 90%; max-width: 700px;
  text-align: center;
  font-size: 15px;
  font-family: 'Google Sans', sans-serif;
  margin: 0;
  min-height: 1.4em;
}
.frame--desktop .form-status { top: 4460px; }
.frame--mobile .form-status { top: 7550px; }
.form-status.is-error { color: #a12b2b; }
.form-status.is-success { color: #1f6d3a; }

.closing__heading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 25px; line-height: 34px;
  padding: 0 120px;
  margin: 0;
}
.closing__heading--sm { font-size: 20px; line-height: 34px; padding: 0 57px; }

/* ---- 16. Scroll-reveal animation ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    translate: 0 24px;
    transition: opacity .6s ease, translate .6s ease;
    will-change: opacity, translate;
  }
  [data-reveal].is-visible {
    opacity: 1;
    translate: 0 0;
    will-change: auto;
  }
  [data-reveal].reveal-d1 { transition-delay: .05s; }
  [data-reveal].reveal-d2 { transition-delay: .12s; }
  [data-reveal].reveal-d3 { transition-delay: .19s; }
  [data-reveal].reveal-d4 { transition-delay: .26s; }
  [data-reveal].reveal-d5 { transition-delay: .33s; }
}
.no-js [data-reveal] { opacity: 1 !important; translate: 0 0 !important; }

/* ---- 17. Responsive note ---------------------------------------------------
   Both frames are pixel-fixed reproductions of their own Figma frame; the
   mobile frame *is* the responsive layout (per the Figma mobile frame),
   swapped in below a 768px viewport by js/script.js, then the whole frame
   is uniformly scaled to fill the viewport width. Desktop geometry is
   therefore never touched by the responsive behavior. --------------------- */

/* ---- 18. Mobile strips (thumbs-strip / photos-strip) ---------------------
   thumbs-strip: client feedback was that this strip should not move
   automatically -- controlled entirely manually (swipe/drag). Kept that
   way below.
   photos-strip: auto-plays AND stays manually swipeable at the same time.
   That combination is driven from script.js (section 4) via the strip's
   native `scrollLeft`, not a CSS transform -- a transform-based marquee
   would fight the browser's native touch-scroll (two different coordinate
   systems moving the content at once), so this stays a plain scrollable
   container and JS nudges scrollLeft forward each frame, pausing whenever
   the user is actively touching/dragging/scrolling it. The item list is
   still rendered twice in the markup (2nd copy aria-hidden) so JS can loop
   scrollLeft seamlessly past one set-width -- see script.js for the exact
   math. */
@media (max-width: 767px) {
  .thumbs-strip.is-visible,
  .photos-strip.is-visible {
    overflow-x: auto;
  }
}
.d-wm-1{left:1163px;top:872px;width:992px;height:558px;}
.d-wm-1 > span{transform:rotate(0deg);}
.d-wm-1 > span > img{opacity:1;}
.d-hero-hand{left:-4px;top:28px;width:1028px;height:501px;}
.d-hero-hand__img{height:100%;width:100%;left:0%;top:0;}
.d-logo-card{left:942px;top:27px;width:998px;height:506px;}
/* Client feedback: this calligraphy watermark should read as background
   text behind the ring+bee photo, but at its original footprint it was
   almost entirely covered by that photo (deco-890-891 overlaps ~85% of
   it), leaving only a thin sliver visible at the edge. Enlarged ~1.5x
   around the same center and nudged opacity up slightly so it actually
   shows as a background flourish around the photo instead of being
   fully hidden behind it. */
.d-deco-889{left:24px;top:439px;width:821px;height:1263px;}
.d-deco-889 > span{transform:rotate(-97.91deg);}
.d-deco-889 > span > img{opacity:.22;width:1182px;height:665px;}
.d-deco-890-891{left:-11px;top:668px;width:1298px;height:690px;}
.d-deco-890-891__img{max-width: 1323px;top:-0.01%;}
.d-thumb-1001{left:333px;top:566px;width:261.209px;height:128px;}
.d-thumb-1001__img{left:15px;top:22px;width:231px;height:85px;}
.d-thumb-1002{left:664px;top:566px;width:261.209px;height:128px;}
.d-thumb-1002__img{left:26px;top:0px;width:209px;height:128px;}
.d-thumb-1003{left:995px;top:566px;width:261.209px;height:128px;}
.d-thumb-1003__img{left:49px;top:6px;width:164px;height:117px;}
.d-thumb-1004{left:1326px;top:566px;width:261.209px;height:128px;}
.d-thumb-1004__img{left:13.4px;top:0px;width:235.163px;height:128px;}
.d-intro-icon{left:1238px;top:796px;width:86px;height:48px;}
.d-intro-callout{left:calc(50% + 8px);top:1107px;width:627px;height:87px;}
.d-necklace{left:740px;top:1331px;width:985px;height:535px;}
.d-card2000-2001{left:200px;top:1331px;width:285px;height:279px;}
.d-card2000-2002{left:462px;top:1331px;width:285px;height:279px;}
.d-card2000-2003{left:200px;top:1600px;width:285px;height:279px;}
.d-card2000-2004{left:462px;top:1600px;width:285px;height:279px;}
.disclaimer-1{left:1206px;top:1849px;width:255px;}
.d-photo-right{left:967px;top:1916px;width:684px;height:851px; z-index:500;}
.d-photo-left{left:269px;top:1924px;width:684px;height:851px; z-index:500;}
.d-wm-2{left:3px;top:2338px;width:971px;height:585px; z-index:999;}
.d-wm-2 > span{transform:rotate(0deg) scaleY(1);}
.d-wm-2 > span > img{opacity:1;}
.disclaimer-2{left:1126px;top:2767px;width:255px;}
.d-grid-301{left:228px;top:2846px;width:228.657px;height:228.657px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13); z-index:1000;}
.d-grid-301__img{left:13.94px;top:13.94px;width:200.772px;height:200.772px;}
.d-grid-302{left:540.658px;top:2846px;width:228.657px;height:228.657px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);}
.d-grid-302__img{left:13.94px;top:13.94px;width:200.772px;height:200.772px;}
.d-grid-303{left:853.316px;top:2846px;width:228.657px;height:228.657px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);}
.d-grid-303__img{left:13.94px;top:13.94px;width:200.772px;height:200.772px;}
.d-grid-1010{left:1161.975px;top:2846px;width:228.657px;height:228.657px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);}
.d-grid-1010__img{left:0px;top:47.4px;width:201.702px;height:126.412px;}
.d-grid-1005{left:1471.559px;top:2846px;width:228.657px;height:228.657px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);}
.d-grid-1005__img{left:23.24px;top:40.9px;width:188.689px;height:135.707px;}
.d-grid-1006{left:383px;top:3139px;width:228.657px;height:228.657px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);}
.d-grid-1006__img{left:19.52px;top:67.85px;width:190.548px;height:108.752px;}
.d-grid-1007{left:699.656px;top:3139px;width:228.657px;height:228.657px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);}
.d-grid-1007__img{left:19.52px;top:73.43px;width:186.83px;height:103.175px;}
.d-grid-1008{left:1008.314px;top:3139px;width:228.657px;height:228.657px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);}
.d-grid-1008__img{left:25.41px;top:71.57px;width:181.253px;height:92.95px;}
.d-grid-1009{left:1316.973px;top:3139px;width:228.657px;height:228.657px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);}
.d-grid-1009__img{left:28.82px;top:62.28px;width:171.958px;height:104.104px;}
.d-goodtoknow{left:50%;top:3418px;width:2144px;height:196px;transform:translateX(-50%);}
.d-goodtoknow-icon{left:calc(50%);top:3444px;width:71px;height:40px;transform:translateX(-50%);}
/* Client feedback: honeycomb pattern cropped in some areas — this one
   only showed ~44% of the cluster (the other desktop watermarks show
   58-100%). Shifted right to bring it in line with the others. */
.d-wm-3{left:-576px;top:3527px;width:1015.872px;height:1193.218px;}
.d-wm-3 > span{transform:rotate(0deg);}
.d-wm-3 > span > img{opacity:1;}
.d-wm-4{left:1242px;top:3526px;width:1179.836px;height:915.668px;}
.d-wm-4 > span{transform:rotate(0) scaleY(1);}
.d-wm-4 > span > img{opacity:1;}
.d-cta-icon{left:894px;top:3663px;width:148px;height:83px;}
.d-cta-banner{left:calc(50% + 0.5px);top:3747px;width:987px;height:87px;transform:translateX(-50%);}
.d-field-fullName{left:calc(50% + 203.0px);top:3947px;width:366px;height:63px;transform:translateX(-50%);}
.d-field-phone{left:calc(50% + -202.0px);top:3947px;width:366px;height:63px;transform:translateX(-50%);}
.d-field-budget{left:calc(50% + 203.0px);top:4034px;width:366px;height:63px;transform:translateX(-50%);}
.d-field-timing{left:calc(50% + -202.0px);top:4034px;width:366px;height:63px;transform:translateX(-50%);}
.d-field-style{left:calc(50% + 0.5px);top:4134px;width:771px;height:63px;transform:translateX(-50%);}
.d-submit-pill{left:50%;width:258px;height:45px;transform:translateX(-50%);}
.d-submit-wrap{left:50%;top:4246px;transform:translateX(-50%);width:258px;height:89px;}
.d-closing{left:50%;top:4337px;width:782px;height:122px;transform:translateX(-50%);}
.disclaimer-3{left:-220px;top:216px;width:255px;}
.m-deco1{left:-199px;top:829px;width:758px;height:293px;}
.m-ring-deco{left:-86.7px;top:769px;width:320.31px;height:492.309px;}
.m-wm-1{left:141px;top:423px;width:1179.836px;height:915.668px;}
.m-deco2{left:-371px;top:509px;width:769px;height:658px;}
.m-subtract{left:0px;top:0px;width:394px;height:772px;}
/* Client feedback: hand image severely cropped, with the logo and bottom
   signature cut off. The container's aspect ratio (429x762) didn't match
   the source image's native aspect ratio (393x800), so object-fit:cover
   was cropping the top/bottom to fill the wider box. Height corrected to
   match the image's native aspect ratio so nothing gets cut off. */
.m-hero-flat{left:-9px;top:0px;width:410px;height:778px;}
.m-deco1__img{height:145.32%;top:-16%;}
.m-ring-deco > span{transform:rotate(-97.91deg);}
.m-ring-deco > span > img{opacity:.15;width:460.999px;height:259.312px;}
.m-wm-1 > span{transform:rotate(159.24deg) scaleY(1);}
.m-wm-1 > span > img{opacity:1;width:1040px;height:585px;}
.m-deco2__img{height:143.37%;top:-14.44%;}
.m-intro-icon{left:calc(50% + 0.5px);top:1149px;width:86px;height:48px;transform:translateX(-50%);}
.m-callout{left:calc(50% + 0.5px);top:1502px;width:290px;height:167px;transform:translateX(-50%);}
.thumbs-strip__list{width:930.672px; top:-12px;}
.m-thumb-1001{left:0.0px;}
.m-thumb-1001__img{left:15px;top:22px;width:231px;height:85px;}
.m-thumb-1002{left:220.209px;}
.m-thumb-1002__img{left:26px;top:0px;width:209px;height:128px;}
.m-thumb-1003{left:440.418px;}
.m-thumb-1003__img{left:49px;top:6px;width:164px;height:117px;}
.m-thumb-1004{left:660.627px;}
.m-thumb-1004__img{left:13.4px;top:0px;width:235.163px;height:128px;}
.m-thumb-1001-dup{left:921.836px;}
.m-thumb-1001-dup__img{left:15px;top:22px;width:231px;height:85px;}
.m-thumb-1002-dup{left:1142.045px;}
.m-thumb-1002-dup__img{left:26px;top:0px;width:209px;height:128px;}
.m-thumb-1003-dup{left:1362.254px;}
.m-thumb-1003-dup__img{left:49px;top:6px;width:164px;height:117px;}
.m-thumb-1004-dup{left:1582.463px;}
.m-thumb-1004-dup__img{left:13.4px;top:0px;width:235.163px;height:128px;}
.m-necklace{left:38px;top:1869px;width:318px;height:279px;}
.disclaimer-4{left:-169px;top:2141px;width:255px;}
/* Client feedback: honeycomb pattern cropped in some areas. This one was
   positioned so far left that only ~34% of the cluster was visible (vs.
   the other watermarks on this page which all span the full viewport
   width). Shifted right so the pattern spans the viewport like its
   siblings instead of being mostly wasted off-screen. */
.m-wm-2{left:-258px;top:1674px;width:792.296px;height:1140.425px;}
.m-wm-2 > span{transform:rotate(0deg) scaleY(1);}
.m-wm-2 > span > img{opacity:1;}
.m-wm-3{left:-199px;top:2136px;width:792.296px;height:1140.425px;}
.m-wm-3 > span{transform:rotate(0deg) scaleY(1);}
.m-wm-3 > span > img{opacity:1;}
.m-card2000-2001{left:73px;top:2175px;width:247px;height:247px;}
.m-card2000-2003{left:73px;top:2437px;width:247px;height:247px;}
.m-card2000-2002{left:73px;top:2699px;width:247px;height:247px;}
.m-card2000-2004{left:73px;top:2960px;width:247px;height:247px;}
.photos-strip__list{width:610px;}
.m-photo-b{left:0px;}
.m-photo-a{left:305px;}
.m-photo-b-dup{left:610px;}
.m-photo-a-dup{left:915px;}
.disclaimer-5{left:-125px;top:3732px;width:255px;}
.m-wm-4{left:-398px;top:3456px;width:1179.836px;height:915.668px;}
.m-wm-4 > span{transform:rotate(0deg) scaleY(1);}
.m-wm-4 > span > img{opacity:1;}
.m-wm-5{left:-307.219px;top:4370.31px;width:1008.273px;height:1193.043px;}
.m-wm-5 > span{transform:rotate(0deg) scaleY(1);}
.m-wm-5 > span > img{opacity:1;}
.m-wm-6{left:-309px;top:5082px;width:1008.273px;height:1193.043px;}
.m-wm-6 > span{transform:rotate(0deg) scaleY(1);}
.m-wm-6 > span > img{opacity:1;}
.m-grid-1005{left:74.076px;top:3759px;width:245.924px;height:245.924px;}
.m-grid-1005__img{left:0;top:0;width:245px;height:245px;}
.m-grid-1010{left:74.076px;top:4020.293px;width:245.924px;height:245.924px;}
.m-grid-1010__img{left:0;top:0;width:245px;height:245px;}
.m-grid-303{left:74.076px;top:4281.586px;width:245.924px;height:245.924px;}
.m-grid-303__img{left:0;top:0;width:245px;height:245px;}
.m-grid-302{left:74.076px;top:4542.51px;width:245.924px;height:245.924px;}
.m-grid-302__img{left:0;top:0;width:245px;height:245px;}
.m-grid-301{left:74.076px;top:4803.803px;width:245.924px;height:245.924px;}
.m-grid-301__img{left:0;top:0;width:245px;height:245px;}
.m-grid-1009{left:74.076px;top:5064.728px;width:245.924px;height:245.924px;}
.m-grid-1009__img{left:0px;top:0px;width:245px;height:245px;}
.m-grid-1008{left:74.076px;top:5325.652px;width:245.924px;height:245.924px;}
.m-grid-1008__img{left:0;top:0px;width:245px;height:245px;}
.m-grid-1007{left:74.076px;top:5586.576px;width:245.924px;height:245.924px;}
.m-grid-1007__img{left:0;top:0;width:245px;height:245px;}
.m-grid-1006{left:74.076px;top:5847.5px;width:245.924px;height:245.924px;}
.m-grid-1006__img{left:0px;top:0px;width:245px;height:245px;}
.m-goodtoknow{left:50%;top:6136px;width:523px;height:248px;transform:translateX(-50%);}
.m-goodtoknow-icon{left:50%;top:6161px;width:71px;height:40px;transform:translateX(-50%);}
.m-cta-banner{left:50%;top:6499px;width:317px;height:188px;transform:translateX(-50%);}
.m-cta-icon{left:123px;top:6416px;width:148px;height:83px;}
.m-field-fullName{left:calc(50% + 4px);top:6837px;width:277px;height:63px;transform:translateX(-50%);}
.m-field-phone{left:calc(50% + 4px);top:7009px;width:277px;height:63px;transform:translateX(-50%);}
.m-field-budget{left:calc(50% + 4px);top:6923px;width:277px;height:63px;transform:translateX(-50%);}
.m-field-timing{left:calc(50% + 4px);top:7095px;width:277px;height:63px;transform:translateX(-50%);}
.m-field-style{left:calc(50% + 4px);top:7181px;width:277px;height:63px;transform:translateX(-50%);}
.m-submit-pill{left:calc(50% + 0.5px);width:258px;height:45px;transform:translateX(-50%);}
.m-submit-wrap{left:calc(50% + 0.5px);top:7259px;transform:translateX(-50%);width:258px;height:89px;}
.m-closing{left:calc(50% + 0.5px);top:7348px;width:464px;height:189px;transform:translateX(-50%);}