.elementor-11511 .elementor-element.elementor-element-d228308{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11511 .elementor-element.elementor-element-2000df3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-11511 .elementor-element.elementor-element-3a3ea28{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11511 .elementor-element.elementor-element-28a7b6d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-11511 .elementor-element.elementor-element-959a282{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11511 .elementor-element.elementor-element-61e0093 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-11511 .elementor-element.elementor-element-290aa85{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11511 .elementor-element.elementor-element-b6d6856{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11511 .elementor-element.elementor-element-6c55aac{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11511 .elementor-element.elementor-element-ff014d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-2000df3 *//* ============================================================
   SOHNA — ABOUT · SECTION 01 EDITORIAL HERO (sx-about-hero)
   Route: /about/  ·  Full-bleed atelier image, scrim, left rail.
   Shorter than the homepage hero. No fixed heights. No JS.
   Widget breakout uses a class (no :has()) — add CSS class
   `sx-about-hero-widget` to the Elementor HTML widget.
   Paste into Site Settings → Custom CSS.
   ============================================================ */

.sx-about-hero,
.sx-about-hero * { box-sizing: border-box; }

/* Full-bleed breakout from Elementor's boxed content */
.sx-about-hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: clamp(520px, 68vh, 760px);   /* shorter than homepage hero */
  padding-block: var(--sx-section-2xl, 7.5rem);
  overflow: hidden;
  background: var(--sx-color-ink, #1B1A18);
  isolation: isolate;
}

/* ---------- Media (16:9 source, ~2400×1350) ---------- */
.sx-about-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sx-about-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;   /* negative space stays left for type */
}

/* Scrim — readability only, weighted left */
.sx-about-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(27, 26, 24, 0.62) 0%,
    rgba(27, 26, 24, 0.42) 40%,
    rgba(27, 26, 24, 0.10) 75%,
    rgba(27, 26, 24, 0.04) 100%
  );
}

/* ---------- Content rail ---------- */
.sx-about-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--sx-container-site, 1600px);
  margin-inline: auto;
  padding-inline: var(--sx-gutter, 1.5rem);
}
.sx-about-hero__content {
  max-width: 620px;
  text-align: left;
}

/* Eyebrow */
.sx-about-hero__eyebrow {
  display: block;
  margin: 0 0 var(--sx-space-md, 1.5rem);
  font-family: var(--sx-font-body, sans-serif);
  font-size: var(--sx-text-xs, 0.8125rem);
  font-weight: var(--sx-weight-medium, 500);
  letter-spacing: var(--sx-tracking-wider, 0.12em);
  text-transform: uppercase;
  color: var(--sx-gold-light, #E2C9A0);
}

/* Title */
.sx-about-hero__title {
  margin: 0 0 var(--sx-space-lg, 2rem);
  font-family: var(--sx-font-display, Georgia, serif);
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: var(--sx-weight-regular, 400);
  line-height: 1.06;
  color: var(--sx-color-ink-inverse, #F7F3EC);
  text-wrap: balance;
}

/* Lead */
.sx-about-hero__lead {
  margin: 0 0 var(--sx-space-2xl, 4rem);
  max-width: 54ch;
  font-family: var(--sx-font-body, sans-serif);
  font-size: clamp(var(--sx-text-base, 1rem), 1.3vw, var(--sx-text-md, 1.25rem));
  line-height: var(--sx-leading-relaxed, 1.7);
  color: rgba(247, 243, 236, 0.90);
}

/* ---------- Actions ---------- */
.sx-about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sx-space-lg, 2rem);
}
.sx-about-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-family: var(--sx-font-body, sans-serif);
  font-size: var(--sx-text-xs, 0.8125rem);
  font-weight: var(--sx-weight-medium, 500);
  letter-spacing: var(--sx-tracking-wider, 0.12em);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--sx-transition-base, .25s ease),
    color var(--sx-transition-base, .25s ease),
    border-color var(--sx-transition-base, .25s ease);
}

/* Primary — solid black */
.sx-about-hero__button--primary {
  padding-inline: var(--sx-space-xl, 3rem);
  background: #111111;
  border: 1px solid #111111;
  color: #FFFFFF;
}
.sx-about-hero__button--primary:hover {
  background: var(--sx-gold, #B08D57);
  border-color: var(--sx-gold, #B08D57);
  color: #FFFFFF;
}

/* Secondary — underlined text link on image */
.sx-about-hero__button--secondary {
  min-height: auto;
  padding: 0 0 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sx-color-ink-inverse, #F7F3EC);
  color: var(--sx-color-ink-inverse, #F7F3EC);
}
.sx-about-hero__button--secondary:hover {
  color: var(--sx-gold-light, #E2C9A0);
  border-bottom-color: var(--sx-gold-light, #E2C9A0);
}

/* Focus */
.sx-about-hero__button:focus-visible {
  outline: var(--sx-focus-width, 2px) solid var(--sx-gold-light, #E2C9A0);
  outline-offset: var(--sx-focus-offset, 3px);
}

/* ---------- Elementor HTML widget breakout (no :has()) ----------
   Add CSS class `sx-about-hero-widget` to the HTML widget.
   Harmless to keep if the widget sits in a full-width container. */
.elementor-widget-html.sx-about-hero-widget > .elementor-widget-container {
  width: 100%;
  max-width: none;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .sx-about-hero { min-height: clamp(460px, 60vh, 620px); }
  .sx-about-hero__content { max-width: 560px; }
  .sx-about-hero__scrim {
    background: linear-gradient(
      to right,
      rgba(27, 26, 24, 0.70) 0%,
      rgba(27, 26, 24, 0.50) 55%,
      rgba(27, 26, 24, 0.20) 100%
    );
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .sx-about-hero {
    min-height: 0;
    padding-block: var(--sx-section-xl, 5rem);
  }
  .sx-about-hero__img { object-position: center; }
  .sx-about-hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(27, 26, 24, 0.55) 0%,
      rgba(27, 26, 24, 0.70) 100%
    );
  }
  .sx-about-hero__content { max-width: 100%; }
  .sx-about-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sx-space-md, 1.5rem);
  }
  .sx-about-hero__button--primary { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-about-hero__button { transition: none; }
}

/* ============================================================
   SOHNA — ABOUT HERO · MOBILE + TABLET PATCH (sx-about-hero)
   Desktop untouched. Tightens type, spacing and scrim so the
   image reads as a background mood layer, not a campaign hero.
   No fixed heights. No negative margins. Scoped to .sx-about-hero.
   Paste AFTER the existing sx-about-hero block.
   ============================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .sx-about-hero {
    min-height: clamp(440px, 56vh, 580px);
    padding-block: var(--sx-section-xl, 5rem);
  }
  .sx-about-hero__content { max-width: 540px; }
  .sx-about-hero__title {
    font-size: clamp(34px, 4.6vw, 52px);
    margin-bottom: var(--sx-space-md, 1.5rem);
  }
  .sx-about-hero__lead {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: var(--sx-space-xl, 3rem);
  }
  .sx-about-hero__scrim {
    background: linear-gradient(
      to right,
      rgba(27, 26, 24, 0.72) 0%,
      rgba(27, 26, 24, 0.54) 55%,
      rgba(27, 26, 24, 0.24) 100%
    );
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .sx-about-hero {
    /* content-driven height, but never a flat void below the image */
    min-height: 0;
    padding-block: var(--sx-section-lg, 4rem);
  }

  /* Media fills the whole section, not just the top band */
  .sx-about-hero__media { inset: 0; }
  .sx-about-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;   /* holds the figure, frees the left */
  }

  /* Stronger, evenly weighted scrim — image becomes mood, not subject */
  .sx-about-hero__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(27, 26, 24, 0.68) 0%,
        rgba(27, 26, 24, 0.74) 55%,
        rgba(27, 26, 24, 0.86) 100%
      );
  }
  
  /* ============================================================
   SOHNA — ABOUT HERO · MOBILE OVERRIDE (sx-about-hero)
   Compact editorial hero. Both CTAs left-aligned, primary inline.
   No min-height, no dead space. Desktop untouched.
   Paste AFTER all existing sx-about-hero blocks.
   ============================================================ */

@media (max-width: 767px) {

  /* Content-driven height, compact padding, no dead zone */
  .sx-about-hero {
    display: flex;
    align-items: center;
    min-height: 0 !important;
    height: auto !important;
    padding-top: var(--sx-space-2xl, 4rem) !important;
    padding-bottom: var(--sx-space-2xl, 4rem) !important;
  }

  /* Media must fill the whole section — no seam, no bare band */
  .sx-about-hero__media {
    inset: 0;
    background: var(--sx-color-ink, #1B1A18);
  }
  .sx-about-hero__img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 72% center;
  }

  /* Even, readable scrim — image becomes mood, not subject */
  .sx-about-hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(27, 26, 24, 0.70) 0%,
      rgba(27, 26, 24, 0.76) 60%,
      rgba(27, 26, 24, 0.84) 100%
    );
  }

  .sx-about-hero__content { max-width: 100%; }

  /* Eyebrow */
  .sx-about-hero__eyebrow {
    margin-bottom: var(--sx-space-sm, 1rem);
  }

  /* Title — 36–44px, tight leading */
  .sx-about-hero__title {
    font-size: clamp(32px, 8vw, 40px) !important;
    line-height: 1.12;
    margin-bottom: var(--sx-space-sm, 1rem);
  }

  /* Lead — 16–17px, calm leading, close to the actions */
  .sx-about-hero__lead {
    max-width: 40ch;
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.6;
    margin-bottom: var(--sx-space-lg, 2rem) !important;
    color: rgba(247, 243, 236, 0.85);
  }

  /* Actions — BOTH left-aligned, tight stack */
  .sx-about-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--sx-space-md, 1.5rem) !important;
    margin-bottom: 0;
  }

  /* Primary — inline width, left-aligned, not a heavy block */
  .sx-about-hero__button--primary {
    width: auto !important;
    max-width: 100%;
    align-self: flex-start;
    min-height: 46px;
    padding-inline: var(--sx-space-lg, 2rem);
    font-size: 12px;
  }

  /* Secondary — refined inline text link, same left edge */
  .sx-about-hero__button--secondary {
    width: auto !important;
    align-self: flex-start;
    min-height: auto;
    padding: 0 0 3px;
    font-size: 12px;
  }
}

/* ---------- Small mobile ---------- */
@media (max-width: 380px) {
  .sx-about-hero {
    padding-top: var(--sx-space-xl, 3rem) !important;
    padding-bottom: var(--sx-space-xl, 3rem) !important;
  }
  .sx-about-hero__title { font-size: clamp(28px, 7.6vw, 34px) !important; }
  .sx-about-hero__lead {
    font-size: 15px !important;
    margin-bottom: var(--sx-space-md, 1.5rem) !important;
  }
  .sx-about-hero__actions { gap: var(--sx-space-sm, 1rem) !important; }
}/* End custom CSS */