/* WATOWEAR brand overrides
   Our Green #646D57 · Our Black #333333 · Our Beige #F8F7F6 · Hairline #E2E3E3 · White
   Loaded after the theme. No colour outside this set appears below. */

/* ==================================================================
   CALLS TO ACTION - one capsule, nothing behind it
   The theme nests .pb--handle inside .pe--button, so two shapes
   render for one label. The handle is flattened; the capsule is the
   only visible shape.
   ================================================================== */
.pe--button,
.elementor-widget-pebutton .pe--button,
.pe--button--wrapper .pe--button,
.pe--pop--button {
  background-color: #646D57 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  overflow: hidden;
}
.pe--button .pb--handle,
.pe--button--wrapper .pb--handle,
.pe--button .pe--button--wrapper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.pe--button .pe--button--text,
.pe--button span, .pe--button i, .pe--button svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}
.pe--button:hover, .pe--button:focus-visible {
  background-color: #333333 !important;
}

/* ==================================================================
   MENU TOGGLE
   It holds MENU and CLOSE stacked and clips them to swap on hover,
   so it must NOT get extra padding - that is what cropped it to "ME".
   The capsule lives on the wrapper instead.
   ================================================================== */
.menu--toggle--wrap {
  background-color: #646D57 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  display: inline-flex !important;
  align-items: center;
}
.menu--toggle {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #FFFFFF !important;
}
.menu--toggle .toggle--text,
.menu--toggle span, .menu--toggle div {
  color: #FFFFFF !important;
}

/* ==================================================================
   HEADER LOGO PLATE - the template ships a grey plate behind it
   ================================================================== */
.site-header .site-branding,
.site-header .site-logo,
.site-header .main__logo {
  background-color: #646D57 !important;
  border-radius: 6px !important;
  padding: 8px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.site-header .site-branding img,
.site-header .main__logo img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

/* ==================================================================
   FRAMES AND CARDS - Our Green fill, never grey.
   Hairline is a rule colour and must never fill a surface.
   ================================================================== */
.pe--team--member.card,
.pe--team--member .card,
.pe--infobox,
.elementor-widget-peinfobox .pe--infobox,
.pe-accordion-item,
.pe--accordion--wrapper .pe-accordion-item,
.pe--counter.has--bg,
.number--counter.has--bg {
  background-color: #646D57 !important;
  border-color: #646D57 !important;
  color: #F8F7F6 !important;
}
.pe--team--member.card *,
.pe--infobox *,
.pe-accordion-item,
.pe-accordion-item * {
  color: #F8F7F6 !important;
}

/* outlined frames stay green too */
.single-image, .single--image, .pb--handle,
.pe--team--member .member--image {
  border-color: #646D57 !important;
}

/* ==================================================================
   TYPE - Comfortaa carries the page, Cormorant Infant is the accent
   ================================================================== */
body, p, li, .pe--button, .menu--toggle {
  font-family: "Comfortaa", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Comfortaa", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
em, .wtw-accent {
  font-family: "Cormorant Infant", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* rules stay Hairline - as rules, not fills */
hr, .pe--divider, .elementor-divider-separator {
  border-color: #E2E3E3 !important;
  background-color: #E2E3E3 !important;
}


/* ==================================================================
   FORM FIELDS
   ------------------------------------------------------------------
   These used to be forced to #646D57 by a sweep that said nothing on
   the page may keep Hairline grey as a surface. That was too broad:
   the contact form's fields are one of the places the template's own
   #E2E3E3 is right, and the green made the form look like a wall of
   filled boxes. The fill is left to the theme's
   var(--secondaryBackground) again; only the focus ring is ours.
   ================================================================== */
.elementor-923 input:focus,
.elementor-923 textarea:focus {
  outline: 2px solid #333333 !important;
  outline-offset: 1px;
}

/* ==================================================================
   Menu label must be white on the green capsule - the theme was
   still painting it Our Black, which reads muddy against the green.
   ================================================================== */
.site-header .menu--toggle--wrap,
.site-header .menu--toggle--wrap *,
.menu--toggle--wrap .menu--toggle,
.menu--toggle--wrap .menu--toggle * {
  color: #FFFFFF !important;
}

/* Belt and braces: any CTA the theme paints from its own palette */
.pe--button, .pe--button *,
a.elementor-button, a.elementor-button * ,
button[type="submit"], button[type="submit"] * {
  color: #FFFFFF !important;
}
.pe--button, a.elementor-button, button[type="submit"] {
  background-color: #646D57 !important;
  background-image: none !important;
}


/* ==================================================================
   MENU OVERLAY
   The panel had no background at all, so the page showed straight
   through and the labels read as grey ghosts. Our Green with the
   translucency kept - no grey anywhere.
   ================================================================== */
/* .site--nav is the toggle wrapper, only 53x26 when collapsed - not
   the expanding panel. Painting it green drew a small green box in
   the header. The panel background belongs on the overlay itself. */
.site--nav .nav--wrap,
.site--nav .menu--overlay,
.nav--overlay, .menu--overlay {
  background-color: rgba(100, 109, 87, 0.94) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}
.site--nav a,
.site--nav a *,
.site--nav .menu-item a {
  color: #F8F7F6 !important;
}
.site--nav a:hover,
.site--nav a:focus-visible {
  color: #FFFFFF !important;
}

/* the toggle box was 12px tall, so the label rendered as a fragment */
.menu--toggle {
  min-height: 18px !important;
  line-height: 18px !important;
}
.menu--toggle--wrap {
  min-height: 40px !important;
}

/* social icons were rendering as solid black discs */
.site--nav .socials a,
.socials--wrap a,
[class*="social"] a {
  background-color: #646D57 !important;
  color: #F8F7F6 !important;
}

/* the FAQ was painting over the header */
.pe--accordion, .pe--accordion--wrapper { position: relative; z-index: 1; }
.site-header { z-index: 100 !important; }

/* ==================================================================
   PERSON / BRAND / PLANET CARDS
   These containers ship with no background at all, which is why every
   class-based rule missed them. Targeted by element id.
   ================================================================== */
.elementor-923 .elementor-element-13e2db6,
.elementor-923 .elementor-element-cf399da,
.elementor-923 .elementor-element-1b97dfa {
  background-color: #646D57 !important;
  border-radius: 8px !important;
  padding: 26px !important;
}
.elementor-923 .elementor-element-13e2db6 *,
.elementor-923 .elementor-element-cf399da *,
.elementor-923 .elementor-element-1b97dfa * {
  color: #F8F7F6 !important;
}

/* ==================================================================
   LOGO - the mark is roughly square; the theme was squashing it to
   16x34 inside a tall plate.
   ================================================================== */
.site-header .site-branding,
.site-header .site-logo,
.site-header .main__logo {
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
}
.site-header .site-branding img,
.site-header .main__logo img,
.site-header .site-logo img {
  width: auto !important;
  height: 34px !important;
  max-width: none !important;
  min-width: 34px !important;
  object-fit: contain !important;
}

/* ==================================================================
   LOGO - small circle, template size. No plate, no oversized block.
   ================================================================== */
.site-header .site-branding,
.site-header .site-logo,
.site-header .main__logo {
  background-color: #646D57 !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}
.site-header .site-branding img,
.site-header .main__logo img,
.site-header .site-logo img {
  width: 26px !important;
  height: 26px !important;
  min-width: 0 !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* ==================================================================
   MENU LABEL - no frame at all. Plain type on the header.
   ================================================================== */
.menu--toggle--wrap,
.site--nav .menu--toggle--wrap,
.site-header .menu--toggle--wrap {
  background-color: transparent !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.menu--toggle,
.menu--toggle .toggle--text,
.menu--toggle span,
.menu--toggle div {
  background: transparent !important;
  color: #333333 !important;
  letter-spacing: .16em;
}

/* ==================================================================
   CTA RESTING COLOUR
   #646D57 is only 11% saturated, so at button size it reads grey.
   Our Green exactly, #646D57. An earlier pass used #777F45 here - same
   hue and lightness, saturation lifted to 30% - on the reasoning that
   #646D57 is only 11% saturated and reads grey. Chloe called it: that
   tone is not in the palette. The palette is #F8F7F6, #646D57, #333333
   and #333333 at 80%, and nothing else belongs on the page.
   Hover stays Our Black.
   ================================================================== */
.pe--button,
a.elementor-button,
button[type="submit"] {
  background-color: #646D57 !important;
}
.pe--button:hover,
.pe--button:focus-visible,
a.elementor-button:hover,
button[type="submit"]:hover {
  background-color: #333333 !important;
}

/* ==================================================================
   SPECIFICITY CORRECTIONS - these must outrank the earlier blocks
   ================================================================== */

/* menu label: the frame is gone, so white would be invisible on the
   pale header. Our Black, matching the earlier rule's specificity. */
.site-header .menu--toggle--wrap,
.site-header .menu--toggle--wrap *,
.site-header .menu--toggle,
.site-header .menu--toggle * {
  color: #333333 !important;
}

/* CTA resting colour - .elementor-widget-pebutton .pe--button was
   outranking the plain .pe--button rule, so the old value stuck. */
.elementor-widget-pebutton .pe--button,
.pe--button--wrapper .pe--button,
.pe--pop--button,
.elementor-923 .pe--button,
.site-header .pe--button,
a.elementor-button,
button[type="submit"] {
  background-color: #646D57 !important;
}
.elementor-widget-pebutton .pe--button:hover,
.pe--button--wrapper .pe--button:hover,
.elementor-923 .pe--button:hover,
.site-header .pe--button:hover,
a.elementor-button:hover,
button[type="submit"]:hover {
  background-color: #333333 !important;
}

/* ==================================================================
   PERSON / BRAND / PLANET - correct nesting
   Big outer card (holds the image) = Our Green.
   Text block inside it = white with Our Black type.
   Earlier I had painted the text block green and left the card
   transparent, which was inside out.
   ================================================================== */
.elementor-923 .elementor-element-fa9c10f,
.elementor-923 .elementor-element-38a026c,
.elementor-923 .elementor-element-654a358 {
  background-color: #646D57 !important;
  border-radius: 10px !important;
  padding: 18px !important;
  overflow: hidden;
}

/* the text block: white card, black type */
.elementor-923 .elementor-element-13e2db6,
.elementor-923 .elementor-element-cf399da,
.elementor-923 .elementor-element-1b97dfa {
  background-color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 24px !important;
}
.elementor-923 .elementor-element-13e2db6 *,
.elementor-923 .elementor-element-cf399da *,
.elementor-923 .elementor-element-1b97dfa * {
  color: #333333 !important;
}

/* ==================================================================
   LOGO - larger mark, properly centred in the circle
   ================================================================== */
.site-header .site-branding,
.site-header .site-logo,
.site-header .main__logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  text-align: center !important;
}
.site-header .site-branding a,
.site-header .main__logo a,
.site-header .site-logo a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 0 !important;
}
.site-header .site-branding img,
.site-header .main__logo img,
.site-header .site-logo img {
  width: 34px !important;
  height: 34px !important;
  margin: 0 auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* ==================================================================
   THE FOUR GLASS CARDS
   fd5bf7e "Three things" / fa9c10f planet / 38a026c person / 654a358 brand
   Each carries .bg_backdrop_true, whose ::before paints
   rgba(34,36,75,.25) - a navy-violet 25% veil - over the card. That
   veil is what was darkening and dulling the green, and navy is not
   in the palette. The tint is removed and the frosted blur kept.
   Card colour matches Our Green.
   ================================================================== */
.elementor-923 .bg_backdrop_true {
  background-color: #646D57 !important;
  border-radius: 10px !important;
}
.elementor-923 .bg_backdrop_true::before {
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* the inner text block: Our Beige, not white - white against the
   green was too hard a contrast */
.elementor-923 .elementor-element-13e2db6,
.elementor-923 .elementor-element-cf399da,
.elementor-923 .elementor-element-1b97dfa {
  background-color: #F8F7F6 !important;
}
.elementor-923 .elementor-element-13e2db6 *,
.elementor-923 .elementor-element-cf399da *,
.elementor-923 .elementor-element-1b97dfa * {
  color: #333333 !important;
}

/* the same navy veil sat on three CTA handles, making those buttons
   render darker than the rest. Cleared so every CTA is one colour. */
.pb--handle::before,
.pb--handle::after,
.pe--button .pb--handle::before,
.pe--button .pb--handle::after {
  background-color: transparent !important;
  background-image: none !important;
}

/* ==================================================================
   NAVY VEIL - final sweep
   rgba(34,36,75,.25) is painted by the theme on several ::before
   layers. It is not in the palette and it dulls whatever sits under
   it. Cleared everywhere it is still visible, at a specificity that
   beats the theme's own rules.
   ================================================================== */
.elementor-923 .pb--handle::before,
.elementor-923 .pb--handle::after,
.site-header .pb--handle::before,
.site-header .pb--handle::after,
.elementor-element .pb--handle::before,
.elementor-element .pb--handle::after,
.elementor-923 .elementor-element-270a401a::before,
.site-header .elementor-element-49c77b69::before,
.elementor-element-49c77b69::before,
.elementor-element-270a401a::before {
  background-color: transparent !important;
  background-image: none !important;
}

/* ==================================================================
   FROSTED GLASS IN OUR GREEN
   The template's veil was rgba(34,36,75,.25) - navy at 25%. Same
   mechanism, our colour: the approved green at 80% over a 10px
   blur. The card itself goes transparent so the blur has something
   to work on; a solid fill underneath would block it and the glass
   effect would be lost.
   ================================================================== */
.elementor-923 .bg_backdrop_true {
  background-color: transparent !important;
  border-radius: 10px !important;
}
.elementor-923 .bg_backdrop_true::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: rgba(119, 127, 69, 0.80) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 10px !important;
  pointer-events: none;
  z-index: 0;
}
/* keep the card's own content above the veil */
.elementor-923 .bg_backdrop_true > * {
  position: relative;
  z-index: 1;
}

/* ==================================================================
   FROSTED GLASS - Our Green #646D57 at 80%, everywhere the template
   used the effect. Three families carry it:
     .bg_backdrop_true   containers and cards
     .pb--handle         button handles
     .pe--list--item     hover list rows
   Same blur, same veil strength, our colour instead of the
   template's navy. #646D57 here, not the CTA green - the CTA colour
   is an interaction state, this is the surface.
   ================================================================== */
.bg_backdrop_true::before,
.pb--handle::before,
.pe--list--item::before,
[class*="backdrop"]::before {
  background-color: rgba(100, 109, 87, 0.80) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* the four cards keep the surface transparent so the veil reads as
   glass rather than flat fill */
.elementor-923 .bg_backdrop_true {
  background-color: transparent !important;
}

/* ==================================================================
   FROSTED GLASS - final, at a specificity that beats both the theme
   and my own earlier blocks. Every glass surface is Our Green
   #646D57 at 80% with a 10px blur. The CTA green belongs on buttons
   only; it is not a surface colour.
   ================================================================== */
html body .elementor-923 .bg_backdrop_true::before,
html body .elementor-923 .elementor-element.bg_backdrop_true::before,
html body .bg_backdrop_true::before,
html body .elementor-element .pb--handle::before,
html body .pe--button .pb--handle::before,
html body .pb--handle::before,
html body .pe--list--item::before {
  background-color: rgba(100, 109, 87, 0.80) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* ==================================================================
   THE ACTUAL SOURCE OF THE NAVY
   The theme does not hard-code the veil colour. Its rules read a
   custom property:
     .e-con.bg_backdrop_true::before        { background: var(--mainBackground) }
     .button--sharp .pb--handle::before     { background: var(--secondaryBackground) }
   and a scoped rule redefines --mainBackground to #22244B40 (navy at
   40%) on the glass elements. Chasing selectors could never win,
   because the colour is resolved from the variable at the element.
   Redefining the variable on those scopes fixes every glass surface
   at once - including any I have not individually found.
   Our Green #646D57 at 80% = #646D57CC.
   ================================================================== */
.bg_backdrop_true,
.pb--handle,
.pe--list--item,
[class*="backdrop"],
.has--backdrop {
  --mainBackground: #646D57CC !important;
  --secondaryBackground: #646D57CC !important;
}


/* the header toggle area carries no fill of its own */
.site-header .site--nav {
  background-color: transparent !important;
  background: none !important;
}


/* ==================================================================
   MENU - the expanding drawer, fixed after reading the theme source
   ------------------------------------------------------------------
   The click handler lives on .menu--toggle, and the drawer itself is
   .site--menu.menu--expand: position fixed, 0x0, GSAP-tweened open to
   the size of the Elementor block inside it (pe-core widget-scripts.js,
   expandNav()). Earlier passes here styled .site--nav, which is only
   the 47x26 toggle wrapper - that is why a green box appeared in the
   header instead of on the panel.
   ================================================================== */

/* The toggle box shrink-wraps its first label, MENU, at 47px. CLOSE is
   a character longer and was being cut to "CLOS" by the overflow that
   drives the label slide. Reserve the wider of the two labels. */
.site-header .menu--toggle--wrap,
.site-header .menu--toggle,
.site-header .toggle--text--wrapper,
.site-header .open--text,
.site-header .close--text {
  min-width: 64px;
}


/* ==================================================================
   TEAM CARDS
   ------------------------------------------------------------------
   Frosted here is a translucent fill plus a backdrop blur on the
   element itself, not the ::before overlay used elsewhere on this site.
   These cards carry a background of their own - they shipped as a solid
   #646D57 - so there is no need for a pseudo-element, and no risk of
   colliding with one the theme already uses. Both properties need
   !important: the theme's own glass rule sets blur(15px) and a 5px
   radius and otherwise wins.

   The stat row above the team is deliberately NOT styled here. It keeps
   the template's original treatment.
   ================================================================== */
.elementor-923 .pe--team--member.card {
  background-color: rgba(100, 109, 87, 0.80) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 1px !important;
}


/* ==================================================================
   PAGE LOADER - columns reveal, our green, beige type
   ------------------------------------------------------------------
   Copied from the saas-startup demo: 15 columns rising with a curved
   leading edge, staggered from the centre. The demo's ground is a
   salmon gradient image; ours is a flat Our Green, which the theme
   paints from pe-redux['loader_background'] - no image involved.

   Everything written on that green is Bone. The widget's own colour
   control writes into a variable the loader markup does not read, so
   the three painted parts - the cycling word, the percentage, and the
   progress line - are set here instead.

   Supersedes the 3D mark loader (decisions 29-31). That build is not
   lost: its source of record is scratchpad/arch_loader_3d.html and its
   template content is backed up as loader-24-pre-columns.json.
   ================================================================== */
.pe--page--loader .loader--caption,
.pe--page--loader .caption--repeater--text,
.pe--page--loader .loader--progress-count,
.pe--page--loader .lpc-count {
  color: #F8F7F6 !important;
}

/* The shaded ground is printed inline in <head> - see the loader block
   in functions.php. It cannot live here: a rule in this file matching
   .page--loader--column was in the CSSOM and matched the element, yet
   computed to background-image: none, while the identical declaration
   set inline on the same element applied. Rather than keep chasing the
   cascade, the whole ground moved to an inline <style> with !important
   and explicit per-column offsets. */

/* the hairline: a faint track with a solid fill running along it */
.pe--page--loader .loader-progress {
  background-color: rgba(248, 247, 246, 0.28) !important;
}
.pe--page--loader .loader-progress.progress--fill {
  background-color: #F8F7F6 !important;
}


/* ==================================================================
   CONTACT FORM - back to the template's own surface colours
   ------------------------------------------------------------------
   The fields were rendering in our green because the frosted-glass fix
   redefines --mainBackground / --secondaryBackground on the glass
   scopes, and the form inherits them. The template's own values are
   declared at :root as #F8F7F6 and #E2E3E3; restoring them here scopes
   the fix to the form without touching the glass surfaces it was
   written for.
   ================================================================== */
.elementor-923 .elementor-element-411eda9,
.elementor-923 .elementor-element-411eda9 * {
  --mainBackground: #F8F7F6 !important;
  --secondaryBackground: #E2E3E3 !important;
}

/* the light label colour was chosen to sit on green; on the template's
   pale field it has to be our text tone again */
.elementor-923 .elementor-element-411eda9 input,
.elementor-923 .elementor-element-411eda9 textarea {
  color: #333333 !important;
}
.elementor-923 .elementor-element-411eda9 input::placeholder,
.elementor-923 .elementor-element-411eda9 textarea::placeholder {
  color: rgba(51, 51, 51, 0.8) !important;
}


/* ==================================================================
   MENU OPEN STATE
   ------------------------------------------------------------------
   With the drawer open the toggle sits on the green panel, so both of
   its labels have to be light. Closed, the same labels sit on the beige
   header and must stay dark - which is why this is scoped to .active
   rather than set outright.
   ================================================================== */
.site-header .menu--toggle.active,
.site-header .menu--toggle.active *,
.site-header .menu--toggle.active .open--text,
.site-header .menu--toggle.active .close--text,
.site-header .menu--toggle.active .text_char {
  color: #F8F7F6 !important;
}




/* ==================================================================
   BUTTON HOVER WIPE
   ------------------------------------------------------------------
   .pb--handle::before is the panel that slides across a button on
   hover. It shipped as #22244B40 - the template's navy at a quarter
   opacity - which over our green reads as blue.

   It resisted the ordinary overrides because of how Elementor writes
   it. The colour is not a literal in the rule, and not a variable on
   the button either - the rule declares the variable ON THE
   PSEUDO-ELEMENT and reads it in the same block:

       .pb--handle::before { background-color: var(--buttonBgcolor)
                             !important; --buttonBgcolor: #22244B40; }

   So --buttonBgcolor does not exist on .pb--handle - reading it there
   returns empty - and no rule written against a real element can reach
   it. The repeated class below is what outweighs Elementor's five-class
   selector on the same pseudo-element.

   The panel is NOT parked off-screen at rest: it is inset across the
   button and only shifted half its width, so it already covers part of
   the button before any hover. At a quarter opacity that passed
   unnoticed; painted opaque it turned the button black at rest. Hence
   transparent at rest, our black on hover - the slide still animates,
   it simply has nothing to show until the pointer arrives.
   ================================================================== */
.elementor-element.elementor-element.elementor-element.elementor-element.elementor-element
  .pe--button--wrapper .pb--handle::before,
.elementor-element.elementor-element.elementor-element.elementor-element.elementor-element
  .pe--button--wrapper .pb--handle::after {
  --buttonBgcolor: transparent !important;
  --buttonBgHovercolor: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.elementor-element.elementor-element.elementor-element.elementor-element.elementor-element
  .pe--button:hover .pe--button--wrapper .pb--handle::before,
.elementor-element.elementor-element.elementor-element.elementor-element.elementor-element
  .pe--button:hover .pe--button--wrapper .pb--handle::after,
.elementor-element.elementor-element.elementor-element.elementor-element.elementor-element
  .pe--button--wrapper .pb--handle:hover::before,
.elementor-element.elementor-element.elementor-element.elementor-element.elementor-element
  .pe--button--wrapper .pb--handle:hover::after {
  --buttonBgcolor: #333333 !important;
  --buttonBgHovercolor: #333333 !important;
  background-color: #333333 !important;
}


/* The image panel in "What we believe" was pure #FFFFFF. Our light is
   #F8F7F6 - close, but white is not one of the four. */
.elementor-923 .elementor-element-6b154a0 {
  background-color: #F8F7F6 !important;
}


/* the hero sub-line was Our Green, which on the beige reads as a soft
   secondary note; it is a statement, so it takes Our Black */
.elementor-923 .elementor-element-7095f3c,
.elementor-923 .elementor-element-7095f3c * {
  color: #333333 !important;
  /* it rendered at 400 while the headline above it and the body text
     around it are both 300, which is what made it read as bold */
  font-weight: 300 !important;
}


/* ==================================================================
   HOMEPAGE PASS - nine corrections
   ================================================================== */

/* 1. "Not a wardrobe app" moves to the left of the frame. The mark is
      not repositioned by hand: it settles in whichever column the copy
      leaves empty, so moving the copy left sends it right. */
.elementor-923 .elementor-element-9f3b07d {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.elementor-923 .elementor-element-9f3b07d .text-wrapper,
.elementor-923 .elementor-element-9f3b07d p {
  text-align: left !important;
}

/* 3. Section titles take Our Black; the copy under them takes Our Black
      at 80%, which is the fourth value in the palette and the one that
      had never been used on the site. Applies to the pinned pair and to
      the two sections written from the brand doc - all four sit on the
      beige ground. The green cards are untouched: their text is beige
      and stays beige. */
.elementor-923 .elementor-element-303ed80,
.elementor-923 .elementor-element-303ed80 *,
.elementor-923 .elementor-element-6be3c1b,
.elementor-923 .elementor-element-6be3c1b *,
.elementor-923 .elementor-element-ed2011c,
.elementor-923 .elementor-element-ed2011c *,
.elementor-923 .elementor-element-a7b9b46,
.elementor-923 .elementor-element-a7b9b46 * {
  color: #333333 !important;
  font-weight: 300 !important;
}

.elementor-923 .elementor-element-701495e,
.elementor-923 .elementor-element-701495e *,
.elementor-923 .elementor-element-7c4fb99,
.elementor-923 .elementor-element-7c4fb99 *,
.elementor-923 .elementor-element-2eca909,
.elementor-923 .elementor-element-2eca909 *,
.elementor-923 .elementor-element-ee4855b,
.elementor-923 .elementor-element-ee4855b *,
.elementor-923 .elementor-element-d15eae0,
.elementor-923 .elementor-element-d15eae0 *,
.elementor-923 .elementor-element-5725f08,
.elementor-923 .elementor-element-5725f08 *,
.elementor-923 .elementor-element-0895089,
.elementor-923 .elementor-element-0895089 *,
.elementor-923 .elementor-element-e9216cf,
.elementor-923 .elementor-element-e9216cf *,
.elementor-923 .elementor-element-687280f,
.elementor-923 .elementor-element-687280f *,
.elementor-923 .elementor-element-a0cdaa8,
.elementor-923 .elementor-element-a0cdaa8 *,
.elementor-923 .elementor-element-05d4263,
.elementor-923 .elementor-element-05d4263 *,
.elementor-923 .elementor-element-6e1d33d,
.elementor-923 .elementor-element-6e1d33d *,
.elementor-923 .elementor-element-43cd2f0,
.elementor-923 .elementor-element-43cd2f0 * {
  color: rgba(51, 51, 51, 0.8) !important;
  font-weight: 300 !important;
}

/* 4-7. The four cards. An earlier pass gave these inner blocks a beige
        panel with dark text; on the green card that reads as a white
        frame floating inside it. The panel goes, the text turns beige. */
.elementor-923 .elementor-element-0337a6c,
.elementor-923 .elementor-element-13e2db6,
.elementor-923 .elementor-element-cf399da,
.elementor-923 .elementor-element-1b97dfa {
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.elementor-923 .elementor-element-fd5bf7e,
.elementor-923 .elementor-element-fa9c10f,
.elementor-923 .elementor-element-38a026c,
.elementor-923 .elementor-element-654a358,
.elementor-923 .elementor-element-fd5bf7e *,
.elementor-923 .elementor-element-fa9c10f *,
.elementor-923 .elementor-element-38a026c *,
.elementor-923 .elementor-element-654a358 * {
  color: #F8F7F6 !important;
}

/* 8. The HOW IT LEARNS chip sat off-centre in its pill. */
.elementor-923 .elementor-element-cee31a7 .text-wrapper,
.elementor-923 .elementor-element-cee31a7 p {
  text-align: center !important;
}
.elementor-923 .elementor-element-cee31a7 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* 9. "Your coloring, your style direction..." in light, like the rest. */
.elementor-923 .elementor-element-5f146a3,
.elementor-923 .elementor-element-5f146a3 * {
  font-weight: 300 !important;
}


/* ==================================================================
   EMPHASIS INSIDE BODY COPY
   ------------------------------------------------------------------
   The pattern for the whole page: body sits in Our Black at 80% and
   weight 300, and the words worth stopping on step forward in full Our
   Black at 600. Two variables — colour and weight — doing the work of
   a highlighter, without adding a fifth colour.
   ================================================================== */
.elementor-923 .elementor-element-fa90974,
.elementor-923 .elementor-element-fa90974 * {
  color: #333333 !important;
  letter-spacing: .06em !important;   /* capitals need the air */
}

.elementor-923 .elementor-element-eeebedf,
.elementor-923 .elementor-element-eeebedf p,
.elementor-923 .elementor-element-eeebedf span {
  color: rgba(51, 51, 51, 0.8) !important;
  font-weight: 300 !important;
}
.elementor-923 .elementor-element-eeebedf strong,
.elementor-923 .elementor-element-eeebedf strong * {
  color: #333333 !important;
  font-weight: 600 !important;
}