/* ==========================================================================
   Empersini — literal, pixel-exact recreation of the Figma frames:
     - "Slide 16:9 - 10"  (node 4854:1731)  1920 x 5097  → desktop
     - "iPhone 16 - 1"    (node 4854:1871)   393 x 5097  → mobile
   Every rule below reproduces the exact left/top/width/height/rotation/
   shadow/mask value that used to live inline on that element, verbatim.
   Nothing has been redesigned, simplified, or re-flowed.

   Contents
   --------
   1. Reset & base
   2. Frame scaffold (scale-to-fit viewport)
   3. Shared utility classes (recurring, exact-duplicate declarations)
   4. Buttons & interactive elements
   5. Contact form (functional inputs + validation states)
   6. Scroll-reveal animation hooks
   7. Desktop frame — generated per-element geometry
   8. Mobile frame — generated per-element geometry
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. Reset & base                                                        */
/* ---------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #e7e7e7;
  font-family: 'Google Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
p, h1, h2, h3 { margin: 0; }

/* Mobile browsers paint their own translucent grey "tap highlight" flash
   over any tappable element that doesn't opt out — buttons, inputs, links.
   Nothing here is Figma geometry/color; it only removes an unrelated
   browser default that made buttons/fields on touch devices look dull or
   greyed-out right after a tap, something a desktop mouse (:hover) never
   triggers. Real interaction feedback stays exactly as authored below
   (:hover, :active, :focus-visible, .is-engaged). */
button, input, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------- */
/* 2. Frame scaffold — keeps the exact-px frame centered and uniformly    */
/*    scaled to fit the viewport width, so nothing reflows.               */
/* ---------------------------------------------------------------------- */
.frame-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  /* Centers .frame-scaler via flexbox instead of auto margins (see note
     below) — flex's justify-content:center reliably splits overflow
     evenly on both sides regardless of the page's dir="rtl". */
  display: flex;
  justify-content: center;
}
.frame-scaler {
  position: relative;
  transform-origin: top center;
  /* Auto margins (both logical margin-inline:auto and physical
     margin-left/margin-right:auto) resolved asymmetrically here in
     Chromium: on an over-width box (this frame is wider than the
     viewport at in-between sizes, e.g. tablet) under dir="rtl", all the
     overflow landed on one side instead of splitting evenly — the frame
     rendered shifted with content cut off on the right instead of
     centered. Centering is now handled by justify-content on the parent
     instead (see .frame-viewport), which isn't direction-dependent. */
}
.figma-frame {
  position: relative;
  background: #ffffff;
  overflow: hidden;
}
#frame-desktop { width: 1920px; height: 5097px; }
#frame-mobile  { width: 393px;  height: 5097px; }
.figma-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 {
  filter: brightness(0.98);
  opacity: .9;
}
.whatsapp-fixed-btn:active {
  transform: scale(0.99);
}
@media (max-width: 480px) {
  .whatsapp-fixed-btn {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
  }
}

/* Base every transcribed node uses: absolute positioning within its frame */
.abs { position: absolute;
  z-index:10;
 }

/* ---------------------------------------------------------------------- */
/* 3. Shared utility classes                                              */
/*    Each corresponds to a style string that was repeated identically    */
/*    across several elements in the Figma export (photo-fill masks,      */
/*    text weight/line-height overrides, card/badge backgrounds, etc).    */
/*    Applied alongside a per-element class, never redefining the same    */
/*    property twice.                                                     */
/* ---------------------------------------------------------------------- */
.fill-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.media-clip { inset: 0; overflow: hidden; pointer-events: none; }
.fill { width: 100%; height: 100%; }

.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.fw-regular { font-weight: 400; }
.lh-copy { line-height: 34px; }
.lh-tight { line-height: 1.2; }
.lh-relaxed { line-height: 1.671; }

.list-reset { list-style: disc; margin: 0; padding: 0; }
.who-list__item { margin-inline-start: 33px; line-height: 34px; }


.awaits-card__icon--compare { left: 290px; top: 0; width: 77px; height: 119px; }
.awaits-card__icon--diamond { left: 290px; top: 0; width: 79px; height: 121px; }
.awaits-card__icon--budget  { left: 247px; top: 0; width: 60px; height: 121px; z-index:3; }
.awaits-card__icon--design  { left: 290px; top: 0; width: 75px; height: 120px; }
.awaits-card__icon--pace    { left: 290px; top: 0; width: 78px; height: 124px; }

.badge-bg { inset: 0; background: #a9c3ef; border-radius: 12px; }

.form-field__box { inset: 0; background: #fff; box-shadow: 0 4px 81px 8px rgba(0,0,0,0.15); }
.form-field__box--tight { box-shadow: 0 4px 81px 3px rgba(0,0,0,0.15); }

/* ---------------------------------------------------------------------- */
/* 4. Buttons & interactive elements                                      */
/*    These pills were plain <div>s with cursor:pointer in the original  */
/*    export; they are now real <button> elements (see index.html), with */
/*    all native button chrome reset so the visual box is unchanged.     */
/* ---------------------------------------------------------------------- */
.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;
}
.cta-primary__bg { inset: 0; background: #000; border-radius: 22.5px; transition: 0.3s ease; }
.cta-primary__label {
  inset: 8.89% 2.65%;
  font-family: 'Google Sans';
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  text-align: center;
  line-height: 1.671;
}
.cta-secondary__label {
  left: 129px;
  top: 2px;
  width: 244.301px;
  transform: translateX(-50%);
  font-family: 'Google Sans';
  font-weight: 700;
  font-size: 25px;
  /* Was #000 on the #a9c3ef pill background below — dark text on a pale
     pastel fill reads as washed-out/low-contrast next to the site's solid
     black primary CTAs. White on black matches those and gives the
     submit button proper visual weight as an actionable button. */
  color: #fff;
  text-align: center;
  line-height: 1.671;
}

/* Subtle, size-preserving hover/press feedback: a transform on the pill's
   own box never changes layout (it's an absolutely-positioned element,
   and transform doesn't participate in reflow), so exact button size,
   color and typography stay untouched — only a gentle lift/press cue is
   added. Respect prefers-reduced-motion by dropping the transition. */
.hero-cta,
.m-hero-cta,
.awaits-cta,
.contact-cta__submit {
  transition: transform 0.3s ease, filter 0.15s ease;
}
.hero-cta:hover,
.m-hero-cta:hover,
.awaits-cta:hover,
.contact-cta__submit:hover {
  filter: brightness(0.98);
  opacity: .9;
}

.contact-cta__p2:hover {
background:#A9C3EF;
}

.cta-primary__bg:hover {
  background:#A9C3EF;
}

.awaits-cta__p1:hover {
background:#A9C3EF;
}

.container:has(.contact-cta__p2:hover) .cta-secondary__label

.hero-cta:active,
.m-hero-cta:active,
.awaits-cta:active,
.contact-cta__submit:active {
  transform:scale(0.99);
}
.hero-cta:focus-visible,
.m-hero-cta:focus-visible,
.awaits-cta:focus-visible,
.contact-cta__submit:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
/* Momentary disabled state (only used while an actual network submit is
   in flight — see script.js) must never look "greyed out" or blocked:
   same look as normal, just a non-interactive cursor. */
.contact-cta__submit:disabled {
  opacity: 1;
  filter: none;
  cursor: default;
}

/* Touch devices never trigger :hover, so the mobile submit button never
   got the same "lit up" feedback a desktop visitor sees on mouseover.
   script.js adds .is-engaged to the mobile contact form once the visitor
   starts typing into any field, and this reuses the exact same
   brightness(1.08) desktop already applies on :hover — same color/filter,
   just triggered by a touch-appropriate signal instead of a pointer that
   doesn't exist on mobile. The caption under the button gets a matching
   nudge so it doesn't look duller than the now-brightened button. */
.contact-cta__submit.is-engaged {
  filter: brightness(1.08);
}
.contact-cta__p3.is-engaged,
.m-contact-cta__p3.is-engaged {
  color: #000;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* 5. Contact form — functional inputs, same footprint as the original   */
/*    label-on-white-card look. Labels become placeholders so the        */
/*    unfocused state is visually identical to the static export.        */
/* ---------------------------------------------------------------------- */
/* The <input> IS the visual box now (reuses .form-field__box for its
   position/background/shadow) — this class only resets native widget
   chrome and sets the typography that used to belong to the static
   label, so the unfocused input looks exactly like the old design. */
.form-field__input {
  border: 0;
  outline: 0;
  font-family: 'Google Sans';
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #000;
  text-align: right;
  direction: rtl;
}
.form-field__input::placeholder {
  color: rgba(0, 0, 0, 0.55);
  font-family: 'Google Sans';
  font-weight: 400;
  font-style: normal;
}
.form-field__input:focus {
  outline: 2px solid rgba(169, 195, 239, 0.9);
  outline-offset: -2px;
}
.form-field__input.is-invalid {
  outline: 2px solid #d33;
  outline-offset: -2px;
}

/* Exact per-field right-inset, taken from each label's original
   right-anchored position in the Figma export (0px for the three
   flush-right fields, ~19px for the two inset ones, 14.38px for the
   one mobile field with its own bespoke anchor). */
.pad-r-0 { padding: 0 19px 0 20px; }
.pad-r-19 { padding: 0 19px 0 20px; }
.pad-r-14-38 { padding: 0 14.38px 0 20px; }

.form-field__error {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  font-family: 'Google Sans';
  font-size: 12px;
  color: #d33;
  display: none;
}
.form-field__input.is-invalid ~ .form-field__error { display: block; }

.form-status {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -34px;
  width: 100%;
  text-align: center;
  font-family: 'Google Sans';
  font-size: 16px;
  font-weight: 600;
  display: none;
}
.form-status.is-success { display: block; color: #1c7a3c; }
.form-status.is-error { display: block; color: #d33; }

/* ---------------------------------------------------------------------- */
/* 6. Scroll-reveal animation hooks                                       */
/*    Elements get [data-reveal] in the markup; script.js toggles         */
/*    .is-visible once, on first intersection.                            */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Uses the standalone `translate` property (not `transform`) for the
     reveal offset on purpose: several revealed elements (e.g. .contact-panel,
     .m-story-card) already carry their own `transform: translateX(...)` for
     centering. `transform` is a single property — two rules setting it
     would have one replace the other outright, breaking that centering the
     moment .is-visible's higher-specificity rule won. `translate` composes
     alongside `transform` instead of competing with it, so the reveal
     offset and the element's own positioning transform never collide. */
  [data-reveal] {
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.6s ease, translate 0.6s ease;
    will-change: opacity, translate;
  }
  [data-reveal].is-visible {
    opacity: 1;
    translate: 0 0;
    /* Drop the compositing hint once settled, so revealed text returns to
       the exact same paint/antialiasing path as normal, never-animated
       content instead of staying on its own GPU layer indefinitely. */
    will-change: auto;
  }
  [data-reveal].reveal-d1 { transition-delay: 0.05s; }
  [data-reveal].reveal-d2 { transition-delay: 0.1s; }
  [data-reveal].reveal-d3 { transition-delay: 0.15s; }
  [data-reveal].reveal-d4 { transition-delay: 0.2s; }
  [data-reveal].reveal-d5 { transition-delay: 0.25s; }
}
/* If JS never runs (disabled/blocked), nothing should stay invisible. */
.no-js [data-reveal] {
  opacity: 1 !important;
  translate: 0 0 !important;
}

/* ---------------------------------------------------------------------- */
/* 7 & 8. Per-element geometry, generated from the Figma export.          */
/*    Mechanically produced (tools/refactor.py) from what used to be      */
/*    each element's inline `style="..."` attribute — verbatim values,   */
/*    just relocated here under a descriptive class name. Section 7 is   */
/*    the desktop frame ("Slide 16:9 - 10"); section 8 is the mobile     */
/*    frame ("iPhone 16 - 1").                                            */
/* ---------------------------------------------------------------------- */

/* ---- generated: desktop instance geometry ---- */
.brand-domain { /* node 4854:1732 */
  left:50%;
  top:5997px;
  transform:translateX(-50%);
  width:177px;
  white-space:nowrap;
  font-family:'Google Sans';
  font-weight:700;
  font-size:25px;
  line-height:1.671;
  color:#000;
  text-align:center;
}
.hero-blob { /* node 5094:489 */
  left:calc(50% + 0.5px);
  top:1333.42px;
  width:1644.133px;
  height:786.166px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-blob__p1 {
  width:1620px;
  height:731px;
  background:#a9c3ef;
  transform:rotate(-1.97deg);
}
.hero-ellipse-deco { /* node 5094:490 */
  left:calc(50% + 30.5px);
  top:682px;
  width:3351px;
  height:816px;
  transform:translateX(-50%);
  z-index:1;
}
.hero-ellipse-deco__p1 {
  inset:-9.01% -2.19%;
}
.hero-photo-bg { /* node 5094:491 */
  left:calc(50% - 0.5px);
  top:682px;
  width:2029px;
  height:780px;
  transform:translateX(-50%);
  background:#fff;
}
.hero-photo { /* node 5094:492 */
  left:557px;
  top:682px;
  width:1414px;
  height:780px;
  overflow:hidden;
  pointer-events:none;
}
.hero-photo__p1 {
  position:absolute;
  left:-0.02%;
  top:-1.31%;
  width:100.05%;
  height:102.08%;
  max-width:none;
}
.hero-body-text { /* node 5094:493 */
  left:762px;
  top:885px;
  width:828px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:22px;
  color:#000;
  text-align:center;
  line-height:1.2;
}
.hero-subheading { /* node 5094:494 */
  left:765px;
  top:866px;
  width:827px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:22px;
  color:#000;
  text-align:center;
  line-height:1.2;
}
.hero-heading { /* node 5094:495 */
  left:763.5px;
  top:800px;
  width:827px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:45px;
  color:#000;
  text-align:center;
  line-height:1.671;
}
.hero-icon { /* node 5094:496 */
  left:725px;
  top:734px;
  width:80.395px;
  height:65px;
}
.hero-address { /* node 5094:498 */
  left:762px;
  top:1274px;
  width:659px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:20px;
  color:#000;
  text-align:center;
  line-height:1.671;
}
.hero-badge-diamonds { /* node 5094:499 */
  left:587px;
  top:1091px;
  width:355.616px;
  height:84px;
}
.hero-badge-diamonds__p1 {
  left:177.81px;
  top:25px;
  width:324.915px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:22px;
  color:#fff;
  text-align:center;
  line-height:1.2;
}
.hero-badge-custom { /* node 5094:502 */
  left:588px;
  top:1185px;
  width:355.616px;
  height:84px;
}
.hero-badge-custom__p1 {
  left:177.5px;
  top:6px;
  width:263px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:19px;
  color:#fff;
  text-align:center;
  line-height:1.2;
}
.hero-divider { /* node 5094:505 */
  left:443px;
  top:890px;
  width:634px;
  height:1px;
  background:#000;
}
.hero-cta-hint { /* node 5094:506 */
  left:765px;
  top:1388px;
  width:416px;
  height:39px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:16px;
  color:#000;
  text-align:center;
  line-height:1.671;
}
.choice-photo-card { /* node 5094:507 */
  left:200px;
  top:1574px;
  width:806px;
  height:681px;
  transition: transform 0.8s ease, box-shadow 0.15s ease;
}

.choice-photo-card:hover,
.who-photo-card__p2:hover {
  transform:scale(1.02);
}
.choice-photo-card__p1 {
  left:0;
  top:0;
  width:0;
  height:0;
  background:#fff;
}
.choice-photo-card__p2 {
  left:-43px;
  top:5px;
  width:894px;
  height:694px;
  overflow:hidden;
}
.choice-content { /* node 5094:512 */
  left:1068px;
  top:1512px;
  width:636px;
  height:483px;
}
.choice-content__rings-icon { /* node 5094:513 */
  left:197px;
  top:0;
  width:242px;
  height:136px;
}
.choice-content__copy { /* node 5094:515 */
  left:0;
  top:95px;
  width:636px;
  height:388px;
  text-align:center;
  color:#000;
  font-style:normal;
}
.choice-content__copy__p1 {
  left:308px;
  top:0px;
  width:616px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:33px;
  line-height:1.671;
}
.choice-content__copy__p2 {
  left:328px;
  top:55px;
  width:616px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:22px;
  line-height:1.671;
}
.choice-craftsman-photo { /* node 5094:518 */
  left:12px;
  top:1927px;
  width:749px;
  height:499px;
  object-fit:cover;
}
.choice-divider { /* node 5094:519 */
  left:1069px;
  top:1768px;
  width:634px;
  height:0.799px;
  background:#000;
}
.awaits-deco { /* node 5094:520 */
  left:242px;
  top:2205px;
  width:1677.57px;
  height:1200.64px;
}
.awaits-heading { /* node 5094:524 */
  left:1209px;
  top:2361px;
  width:344px;
  text-align:right;
  font-family:'Google Sans';
  font-weight:700;
  font-size:33px;
  color:#000;
  line-height:1.101;
}
.awaits-card--budget { /* node 5094:526 */
  left:952px;
  top:2412px;
  width:315px;
  height:187px;
}
.awaits-card--budget__p1 {
  left:312px;
  top:83px;
  width:312px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
}
.awaits-card--diamond { /* node 5094:529 */
  left:553px;
  top:2286px;
  width:333px;
  height:242px;
}
.awaits-card--diamond__p1 {
  left:328px;
  top:86px;
  width:328px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
}
.awaits-card--compare { /* node 5094:532 */
  left:91px;
  top:2352px;
  width:346px;
  height:215px;
}
.awaits-card--compare__p1 {
  left:344px;
  top:94px;
  width:346px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
}
.awaits-card--design { /* node 5094:535 */
  left:405px;
  top:2559px;
  width:295px;
  height:239px;
}
.awaits-card--design__p1 {
  left:293px;
  top:83px;
  width:293px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
}
.awaits-card--pace { /* node 5094:538 */
  left:737px;
  top:2688px;
  width:297px;
  height:193px;
}
.awaits-card--pace__p1 {
  left:295px;
  top:89px;
  width:295px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
}
.who-deco { /* node 5094:541 */
  left:-277px;
  top:2688px;
  width:1081.463px;
  height:1145.869px;
  z-index:-10;
}
.who-cta-hint { /* node 5094:544 */
  left:961px;
  top:3061px;
  width:236px;
  height:59px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:16px;
  color:#000;
  text-align:center;
  line-height:1.091;
}
.who-panel-bg { /* node 5094:545 */
  left:calc(50% - 397px);
  top:3176px;
  width:2732px;
  height:426px;
  transform:translateX(-50%);
  background:#a9c3ef;
}
.who-divider { /* node 5094:546 */
  left:1182px;
  top:3332px;
  width:583.452px;
  height:0.799px;
  background:#000;
}
.who-body-text { /* node 5094:547 */
  left:1474px;
  top:3242px;
  width:776px;
  height:92px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:22px;
  color:#000;
  text-align:center;
  line-height:1.2;
}
.who-heading { /* node 5094:548 */
  left:1473.5px;
  top:3198px;
  width:431px;
  height:44px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:33px;
  color:#000;
  text-align:center;
  line-height:1.671;
}
.who-photo-card { /* node 5094:549 */
  left:16px;
  top:3144px;
  width:951px;
  height:476px;
}
.who-photo-card__p1 {
  left:15px;
  top:0;
  width:951px;
  height:476px;
  background:#fff;
  box-shadow: 4px 0px 19px 0px rgba(0, 0, 0, 0.25);
}
.who-photo-card__p2 {
  left:49px;
  top:32px;
  width:883px;
  height:412px;
  transition: transform 0.8s ease, box-shadow 0.15s ease;
}
.who-ring-badge { /* node 5094:554 */
  left:795.5px;
  top:3428.5px;
  width:319px;
  height:247px;
}
.who-ring-badge__p1 {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.story-photo-card { /* node 5094:557 */
  left:852.34px;
  top:3644px;
  width:799.662px;
  height:692.624px;
}
.story-copy { /* node 5094:564 */
  left:177px;
  top:3764px;
  width:902px;
  height:289px;
  text-align:center;
  color:#000;
  font-family:'Google Sans';
  font-style:normal;
}
.story-copy__p1 {
  left:451px;
  top:85px;
  width:698px;
  transform:translateX(-50%);
  font-size:22px;
}
.story-copy__p2 {
  left:451px;
  top:0;
  width:902px;
  transform:translateX(-50%);
  font-size:33px;
}
.brand-wordmark-art { /* node 5094:568 */
  left:50%;
  top:159px;
  width:1980px;
  height:479px;
  transform:translateX(-50%);
}
.brand-crest { /* node 5094:569 */
  left:50%;
  top:64px;
  width:188px;
  height:89px;
  transform:translateX(-50%);
}
.section-divider-art { /* node 5094:570 */
  left:50%;
  top:4697px;
  width:1998px;
  height:376px;
  opacity:1;
  transform:translateX(-50%);
  pointer-events: none; /* purely decorative background art — never intercepts clicks */
}
.margin-deco-photo { /* node 4854:1789 */
  left:100.54px;
  top:2203.37px;
  width:649px;
  height:1221.263px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-section { /* node 5094:571 */
  left:50%;
  top:4145px;
  width:782px;
  height:764px;
  transform:translateX(-50%);
  scroll-margin-top: 16px; /* keeps the section's own top clear of the viewport edge */
}
.contact-panel { /* node 5094:572 */
  left:calc(50% + 0.5px);
  top:0;
  width:771px;
  height:481px;
  transform:translateX(-50%);
}
.contact-fields { /* node 5094:573 */
  left:calc(50% + 0.5px);
  z-index:10;
  top:232px;
  width:771px;
  height:249px;
  transform:translateX(-50%);
}
.contact-fields__p1 {
  left:405px;
  top:0;
  width:366px;
  height:63px;
}
.contact-fields__p2 {
  left:366px;
  top:23px;
  width:97px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.contact-fields__p3 {
  left:0;
  top:0;
  width:366px;
  height:63px;
}
.contact-fields__p4 {
  left:366px;
  top:23px;
  width:97px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.contact-fields__p5 {
  left:405px;
  top:86px;
  width:366px;
  height:63px;
}
.contact-fields__p6 {
  left:366px;
  top:23px;
  width:97px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.contact-fields__p7 {
  left:0;
  top:87px;
  width:366px;
  height:63px;
}
.contact-fields__p8 {
  left:347px;
  top:23px;
  width:168px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.contact-fields__p9 {
  left:0;
  top:186px;
  width:771px;
  height:63px;
}
.contact-fields__p10 {
  left:752px;
  top:23px;
  width:265px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.contact-intro { /* node 5094:589 */
  left:calc(50% + 1px);
  top:83px;
  width:590px;
  height:191px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  color:#000;
  font-size:20px;
  text-align:center;
  pointer-events: none; /* static copy — its box overlaps the fullName/phone
    row above it, and must not steal clicks meant for those inputs */
}
.contact-intro__p1 {
  font-weight:700;
  line-height:1.671;
}
.contact-logo { /* node 5094:590 */
  left:312px;
  top:0;
  width:148px;
  height:83px;
}
.contact-logo__p1 {
  left:110px;
  top:67px;
  width:20px;
  height:12px;
  background:#fff;
}
.contact-cta-bg { /* node 5094:593 */
  left:50%;
  top:618px;
  width:782px;
  height:146px;
  transform:translateX(-50%);
  background:#a9c3ef;
  border-radius:16px;
}
.contact-cta { /* node 5094:594 */
  left:50%;
  top:528px;
  width:258px;
  height:89px;
  transform:translateX(-50%);
}
.contact-cta__p1 {
  left:0;
  top:0;
  width:258px;
  height:45px;
}
.contact-cta__p2 {
  left:50%;
  top:0;
  width:258px;
  height:45px;
  transition: 0.3s ease;
  transform:translateX(-50%);
  /* Matches the site's solid-black primary CTA styling instead of the
     pale badge blue, which read as a faded/disabled button. */
  background:#000;
  border-radius:22.5px;
}
.contact-cta__p3 {
  left:129px;
  top:50px;
  width:251.911px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:16px;
  color:#000;
  text-align:center;
  text-decoration:underline;
  text-decoration-style:solid;
  -webkit-text-decoration-line:underline;
  line-height:1.2;
}
.contact-footer-text { /* node 5094:600 */
  left:calc(50% + 0.5px);
  top:643px;
  width:767px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:25px;
  color:#000;
  text-align:center;
  line-height:34px;
}
.awaits-cta { /* node 5094:601 */
  left:calc(42% + 0.5px);
  top:2982px;
  width:317px;
  height:71px;
  cursor:pointer;
}
.awaits-cta__p1 {
  inset:0;
  background:#000;
  border-radius:53.5px;
  box-shadow:0 4px 7px 0 rgba(0,0,0,0.25);
  transition: 0.3s ease;
}
.awaits-cta__p2 {
  left:12.62%;
  right:12.93%;
  top:16.9%;
  bottom:0;
  font-family:'Google Sans';
  font-weight:700;
  font-size:22px;
  color:#fff;
  text-align:center;
}
.awaits-cta__p3 {
  line-height:1.091;
  margin-bottom:0;
}
.awaits-cta__p4 {
  line-height:1.091;
}
.hero-cta { /* node 5094:603 */
  left:596px;
  top:1338px;
  width:339px;
  height:45px;
  cursor:pointer;
}
.who-list { /* node 5094:604 */
  left:1766px;
  top:3342px;
  width:711px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:22px;
  color:#000;
  text-align:right;
}
.who-list__p1 {
  font-weight:700;
  line-height:34px;
  white-space:pre-wrap;
}

/* ---- generated: mobile instance geometry ---- */
.m-brand-wordmark-art { /* node 5103:1465 */
  left:calc(50% - 0.14px);
  top:41.56px;
  width:946.716px;
  height:247.877px;
  transform:translateX(-50%);
}
.m-brand-wordmark-art__p1 {
  left:0;
  top:27.32px;
  width:946.716px;
  height:228.56px;
  overflow:hidden;
  pointer-events:none;
}
.m-brand-wordmark-art__p2 {
  left:calc(50% - 0.1px);
  top:0;
  width:57.094px;
  height:27.028px;
  transform:translateX(-50%);
  overflow:hidden;
  pointer-events:none;
}
.m-hero-photo-card { /* node 5103:1468 */
  left:-203.391px;
  top:334.999px;
  width:889.858px;
  height:512.196px;
}
.m-hero-photo-card__p1 {
  left:0;
  top:0;
  width:889.858px;
  height:512.196px;
  background:#fff;
}
.m-hero-photo-card__p2 {
  /* Composite is naturally 393x449 — a full-bleed edge-to-edge crop of
     the phone frame's own width (confirmed against the Figma frame
     screenshot: this photo runs flush to both screen edges). The old
     823.421px width didn't match that, forcing object-fit:cover to
     zoom in and crop well beyond what Figma shows. Left recomputed so
     the photo sits flush with the viewport edge (this card's own
     left:-203.391px bleed is the surrounding white card only); height/
     top unchanged. */
  left:203.391px;
  top:31.631px;
  width:393px;
  height:479.94px;
  overflow:hidden;
}

/*.m-hero-photo-card__p2 img{
  object-fit: fill;
}*/

.m-hero-heading { /* node 5103:1473 */
  left:50%;
  top:855px;
  width:337px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:45px;
  color:#000;
  text-align:center;
  line-height:0;
}
.m-hero-heading__p1 {
  font-weight:400;
  line-height:1.06;
}
.m-hero-heading__p2 {
  line-height:1.06;
}
.m-hero-subheading { /* node 5103:1474 */
  left:50%;
  top:951px;
  width:293px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:22px;
  color:#000;
  text-align:center;
  line-height:1.2;
}
.m-hero-body-text { /* node 5103:1475 */
  left:50%;
  top:1047px;
  width:285px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  color:#000;
  text-align:center;
  font-size:19px;
}
.m-hero-divider { /* node 5103:1476 */
  left:calc(50% + 0.5px);
  top:1050px;
  width:262px;
  height:1px;
  background:#000;
  transform:translateX(-50%);
}
.m-hero-photo-secondary { /* node 5103:1477 */
  left:-238.658px;
  top:1357px;
  width:695.147px;
  height:476.187px;
}
.m-hero-photo-secondary__p1 {
  left:0;
  top:0;
  width:695.147px;
  height:476.187px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-hero-photo-secondary__p2 {
  width:646.416px;
  height:387.94px;
  transform:rotate(8.2deg);
  background:#fff;
}
.m-hero-photo-secondary__p3 {
  left:229px;
  top:-21.1px;
  width:393px;
  height:512px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-hero-photo-secondary__p4 {
  /* The composite image already has its rotation baked into the pixels
     (it's a flattened screenshot of the rotated Figma group, like the
     other masked/rotated photos in this build) and is naturally
     376x422 — the old width/height/rotate here were left over from
     before it was flattened and don't match the asset, which forced
     object-fit:cover to zoom/crop it far more than Figma shows. */
  width:376px;
  height:422px;
}
.m-badge-diamonds { /* node 5103:1480 */
  left:27px;
  top:1852px;
  width:212.864px;
  height:199.298px;
}
.m-badge-diamonds__p1 {
  left:0;
  top:0;
  width:212.864px;
  height:199.298px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-badge-diamonds__p2 {
  width:185px;
  height:168px;
  transform:rotate(-10.65deg);
  background:#a9c3ef;
  border-radius:12px;
}
.m-badge-diamonds__p3 {
  left:12.5px;
  top:27.61px;
  width:186.817px;
  height:141.311px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-badge-diamonds__p4 {
  width:169.029px;
  transform:rotate(-10.65deg);
  font-family:'Google Sans';
  font-weight:700;
  font-size:22px;
  color:#fff;
  text-align:center;
  line-height:1.2;
}
.m-hero-deco-photo { /* node 5103:1483 */
  left:-17px;
  top:1863px;
  width:318.38px;
  height:414.547px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Sits between the two blue badge cards in source order, which put the
     second badge's card visually on top of it. Client feedback: the ring
     photo should read as the top layer over both cards. */
  z-index:12;
}
.m-badge-custom { /* node 5103:1484 */
  left:152px;
  top:1977px;
  width:227.988px;
  height:324.397px;
}
.m-badge-custom__p1 {
  left:19.84px;
  top:0;
  width:208.149px;
  height:193.897px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-badge-custom__p2 {
  width:185px;
  height:168px;
  transform:rotate(8.64deg);
  background:#a9c3ef;
  border-radius:12px;
}
.m-badge-custom__p3 {
  left:36.93px;
  top:-54.46px;
  width:178.551px;
  height:305.292px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-badge-custom__p4 {
  width:136.819px;
  transform:rotate(8.64deg);
  font-family:'Google Sans';
  font-weight:700;
  font-size:19px;
  color:#fff;
  text-align:center;
}
.m-hero-address { /* node 5103:1487 */
  left:calc(50% + 0.5px);
  top:2191px;
  width:310px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:20px;
  color:#000;
  text-align:center;
  line-height:1.671;
}
.m-hero-cta { /* node 5103:1488 */
  left:16%;
  top:2268px;
  width:259px;
  height:45px;
  cursor:pointer;
}
.m-hero-cta-hint { /* node 5103:1489 */
  left:calc(50% + 0.5px);
  top:2317px;
  width:416px;
  height:39px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:16px;
  color:#000;
  text-align:center;
  line-height:1.671;
}
.m-who-panel-bg { /* node 5103:1490 */
  left:calc(50% - 75.76px);
  top:2344px;
  width:514.508px;
  height:307.013px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-who-panel-bg__p1 {
  width:504.858px;
  height:289.858px;
  transform:rotate(-1.97deg);
  background:#a9c3ef;
}
.m-who-heading { /* node 5103:1491 */
  left:calc(50% - 4.11px);
  top:2373.44px;
  width:417.82px;
  height:45.268px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-who-heading__p1 {
  width:417px;
  transform:rotate(-2.1deg);
  font-family:'Google Sans';
  font-weight:700;
  font-size:24px;
  color:#000;
  text-align:center;
  line-height:1.06;
}
.m-who-body-text { /* node 5103:1492 */
  left:calc(50% + 1.12px);
  top:2409.88px;
  width:289.876px;
  height:230.191px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-who-body-text__p1 {
  width:282px;
  transform:rotate(-2.1deg);
  font-family:'Google Sans';
  font-weight:400;
  font-size:22px;
  color:#000;
  text-align:center;
}
.m-who-body-text__p2 {
  font-weight:700;
  line-height:1.2;
}
.m-awaits-strip { /* node 5103:1501 */
  left:0;
  top:2992px;
  width:393px;
  height:376px;
  overflow-x:hidden; /* the track's own transform drives the scroll position — see script.js */
  overflow-y:clip;
  background:#fff;
  /* Let the browser keep handling vertical page scroll through this strip;
     script.js only takes over the horizontal axis once a drag is
     recognized, via touch/pointer handlers (see initAwaitsMarquee). */
  touch-action: pan-y;
  cursor: grab;
}
.m-awaits-strip:active {
  cursor: grabbing;
}
.m-awaits-strip__p1 {
  left:calc(50% - 802.5px);
  top:0;
  width:1998px;
  height:376px;
  transform:translateX(-50%);
}
.m-awaits-strip__p2 {
  inset:0;
  opacity:0.31;
  overflow:hidden;
  pointer-events:none;
}

/* Seamless right-to-left carousel: .track holds two identical .set copies
   side by side (each exactly one card-row width). script.js drives the
   scroll position (auto-play + drag) via this same transform; the
   @keyframes below is only a fallback for when JS never runs (e.g.
   disabled/blocked) or the visitor prefers reduced motion, in which case
   .no-js/[data-reveal] rules elsewhere already show a static first card —
   here we just also let a no-JS visitor pan it with native touch scroll. */
.m-awaits-strip__track {
  position: absolute;
  left: 0;
  top: 67px;
  display: flex;
  height: 242px;
  width: max-content;
  will-change: transform;
}
.m-awaits-strip__set {
  position: relative;
  flex: 0 0 1922px;
  width: 1922px;
  height: 242px;
}
/* No auto-play anywhere (JS build or no-js fallback) — the carousel only
   moves via the "תגללו" button or a finger swipe (see initAwaitsMarquee in
   script.js). With JS disabled entirely, native horizontal scrolling still
   lets a visitor pan the strip with their finger. */
.no-js .m-awaits-strip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.m-awaits-strip__p4 {
  /* Card 1's slot moved from 0 to 1607 (mirrored with card 5's old slot)
     so the sequence still reads 1→2→3→4→5 while the strip now pans the
     opposite way — see the comment above .m-awaits-strip__track and
     initAwaitsMarquee() in script.js for the full explanation. */
   left: 1628px;
  top:0;
  width:315px;
  height:187px;
}
.m-awaits-strip__p5 {
  left:300px;
  top:83px;
  width:280px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
  z-index:5;
}
.m-awaits-strip__p6 {
  /* Card 2's slot moved from 379 to 1190 (mirrored with card 4's old slot). */
   left: 1190px;
  top:0;
  width:333px;
  height:242px;
}
.m-awaits-strip__p7 {
  left:356px;
  top:86px;
  width:328px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
}
.m-awaits-strip__p8 {
  left: 809px;
  top:0;
  width:346px;
  height:215px;
}
.m-awaits-strip__p9 {
  left:356px;
  top:85px;
  width:346px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
}
.m-awaits-strip__p10 {
  /* Card 4's slot moved from 1190 to 379 (mirrored with card 2's old slot). */
  left: 379px;
  top:0;
  width:295px;
  height:239px;
}
.m-awaits-strip__p11 {
  left:356px;
  top:83px;
  width:293px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
}
.m-awaits-strip__p12 {
  /* Card 5's slot moved from 1607 to 0 (mirrored with card 1's old slot). */
  left: 0px;
  top:0;
  width:297px;
  height:193px;
}
.m-awaits-strip__p13 {
  left:356px;
  top:89px;
  width:266px;
  transform:translateX(-100%);
  text-align:right;
  font-family:'Google Sans';
  font-weight:400;
  font-size:21px;
  color:#000;
  line-height:1.2;
}
.text-arrow {
  /* Stays unpositioned (position: static) on purpose: its nested
     hint-text/hint-icon are themselves .abs (position: absolute), and
     they rely on skipping this button to position against .m-awaits-strip
     directly. Making the button itself positioned would make it their
     containing block instead and move them. */
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.text-arrow::before {
  /* The button's own hitbox otherwise collapses to a sliver near the top
     of the strip — nowhere near the visible "תגללו ←" hint. This
     pseudo-element positions against .m-awaits-strip (same as the hint
     itself) to cover that hint's actual footprint, so it's tappable; a
     click on it still bubbles up to the real <button>. */
  content: '';
  position: absolute;
  left: 0;
  top: 296px;
  width: 282px;
  height: 68px;
  z-index: 11; /* above the strip's other .abs children (z-index:10) */
}
.m-awaits-strip__hint-text { /* node 5103:1521 */
  left:182px;
  top:305px;
  width:312px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:700;
  font-size:21px;
  color:#000;
  text-align:right;
  line-height:1.2;
}
.m-awaits-strip__hint-icon { /* node 5103:1520 */
  left:88px;
  top:330.5px;
  width:94px;
  height:16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.m-awaits-strip__hint-icon__chevron {
  /* The strip now pans left-to-right (see initAwaitsMarquee in script.js),
     so the hint chevron is mirrored to point right instead of left. */
  display: inline-flex;
  transform: scaleX(1);
}

.m-awaits-strip__hint-icon__chevron img{
  /* The strip now pans left-to-right (see initAwaitsMarquee in script.js),
     so the hint chevron is mirrored to point right instead of left. */
  max-width:94px;
}

/*.m-awaits-strip__hint-icon__chevron,
.m-awaits-strip__hint-icon__chevron::before {
  width: 10px;
  height: 10px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
}
.m-awaits-strip__hint-icon__chevron::before {
  content: '';
  display: block;
  margin-inline-start: 10px;
}*/
.m-who-photo-card { /* node 5103:1493 */
  left:64.922px;
  top:2601px;
  width:469.567px;
  height:418.729px;
}
.m-who-photo-card__p1 {
  left:0;
  top:0;
  width:469.567px;
  height:418.729px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.m-who-photo-card__p2 {
  width:411.877px;
  height:348px;
  transform:rotate(10.75deg);
}
.m-who-photo-card__p3 {
  /* Composite is naturally 393x514 (rotation already baked into the
     pixels); the old width here didn't match that ratio and forced
     object-fit:cover to crop far more off the top/bottom than Figma
     shows. Height kept as originally sized, width corrected to match
     the asset's real aspect ratio and re-centered in the white card. */
  left:-62.783px;
  top:-30.936px;
  width:393.021px;
  height:514.397px;
}
.m-who-deco-blob { /* node 5103:1498 */
  left:-5px;
  top:2806.302px;
  width:253px;
  height:245px;
}
.m-story-card { /* node 5103:1522 */
  left:calc(50% + 0.5px);
  top:3394px;
  width:334px;
  height:751px;
  transform:translateX(-50%);
  background:#fff;
  box-shadow:0 3px 7.6px 0 rgba(0,0,0,0.25);
  border-radius:4px;
  overflow:hidden;
}
.m-story-card__p1 {
  left:1px;
  top:0;
  width:332px;
  height:725px;
  overflow:hidden;
}
/* Flattened composite (photo + ring accent + sketch overlay), replacing
   the original nested mask-group chain — see assets/images README. */
.m-story-card__photo {
  /* Composite is naturally 336x329 — the old height (215) was far
     short of that, forcing object-fit:cover to crop off a large band
     top/bottom that Figma actually shows. Height corrected to match
     the asset (top kept as originally placed), width re-centered on
     the same horizontal footprint. */
  position: absolute;
  left: -13.1px;
  top: -9px;
  width: 336px;
  height: 329px;
}
.m-story-card__p8 {
  position:absolute;
  left:166px;
  top:274px;
  width:309.534px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:22px;
  color:#000;
  text-align:center;
}
.m-story-card__p9 {
  position:absolute;
  left:166px;
  top:189px;
  width:400px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:33px;
  color:#000;
  text-align:center;
}
.m-contact-section { /* node 5103:1537 */
  left:55px;
  top:4192.001px;
  width:284px;
  height:832px;
  scroll-margin-top: 16px; /* keeps the section's own top clear of the viewport edge */
  /* m-section-divider-art (a later sibling, outside this form) overlaps
     the bottom of this form at 0.52 opacity and visually washes the last
     field + submit button out to grey — even though the button itself
     had a higher z-index, that only wins inside the form's own stacking
     context, and the form itself (default z-index:10) was tied with the
     divider, losing to it on DOM order. Raising the whole form above the
     divider here is what actually fixes the wash-out. */
  z-index:20;
}
.m-contact-intro { /* node 5103:1538 */
  left:26px;
  top:0;
  width:231px;
  height:274px;
}
.m-contact-intro__p1 {
  left:0;
  top:83px;
  width:231px;
  font-family:'Google Sans';
  font-weight:700;
  font-size:20px;
  color:#000;
  text-align:center;
  line-height:0;
}
.m-contact-intro__p2 {
  left:42px;
  top:0;
  width:148px;
  height:83px;
}
.m-contact-fields { /* node 5103:1543 */
  left:0;
  z-index:100;
  top:305px;
  width:284px;
  height:407px;
}
.m-contact-fields__p1 {
  left:7px;
  top:0;
  width:277px;
  height:63px;
}
.m-contact-fields__p2 {
  left:262.62px;
  top:23px;
  width:73.413px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.m-contact-fields__p3 {
  left:7px;
  top:172px;
  width:277px;
  height:63px;
}
.m-contact-fields__p4 {
  left:258px;
  top:23px;
  width:97px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.m-contact-fields__p5 {
  left:7px;
  top:86px;
  width:277px;
  height:63px;
}
.m-contact-fields__p6 {
  left:258px;
  top:23px;
  width:97px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.m-contact-fields__p7 {
  left:7px;
  top:258px;
  width:277px;
  height:63px;
}
.m-contact-fields__p8 {
  left:258px;
  top:23px;
  width:168px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.m-contact-fields__p9 {
  left:0;
  top:344px;
  width:284px;
  height:63px;
}
.m-contact-fields__p10 {
  left:7px;
  top:0;
  width:277px;
  height:63px;
  background:#fff;
  box-shadow:0 4px 81px 3px rgba(0,0,0,0.15);
}
.m-contact-fields__p11 {
  left:265px;
  top:23px;
  width:265px;
  transform:translateX(-100%);
  font-family:'Google Sans';
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:rgba(0,0,0,0.55);
  text-align:right;
}
.m-contact-cta { /* node 5103:1559 */
  left:142px;
  top:743px;
  width:258px;
  height:89px;
  transform:translateX(-50%);
}
.m-contact-cta__p1 {
  left:0;
  top:0;
  width:258px;
  height:45px;
}
.m-contact-cta__p2 {
  inset:0;
  /* Matches the site's solid-black primary CTA styling instead of the
     pale badge blue, which read as a faded/disabled button. */
  background:#000;
  border-radius:22.5px;
}
.m-contact-cta__p3 {
  left:129px;
  top:50px;
  width:251.911px;
  transform:translateX(-50%);
  font-family:'Google Sans';
  font-weight:400;
  font-size:16px;
  color:#000;
  text-align:center;
  text-decoration:underline;
  line-height:1.2;
}
.m-section-divider-art { /* node 5103:1565 */
  left:0;
  top:4808.001px;
  width:393px;
  height:300px;
  opacity:1;
  /* Purely decorative background art, but its box overlaps the bottom of
     the contact form (last field + submit button) — without this it sits
     on top in the DOM and both blocks clicks on them and visually washes
     them out through its own opacity. */
  pointer-events: none;
}
.m-margin-deco-photo { /* node 5103:1566 */
  /* Composite is naturally 393x550 (already the full width the phone
     frame can ever show); the old 672.517px width didn't match that,
     forcing object-fit:cover to zoom in and crop off the top/bottom.
     Width corrected to match the asset, re-centered on the same
     horizontal footprint; height unchanged. */
  left:9.759px;
  top:1471px;
  width:393px;
  height:549.677px;
  display:flex;
  align-items:center;
  justify-content:center;
}