/* ============================================================================
   Scout Your Stars — one surface
   ----------------------------------------------------------------------------
   Every page was assembled from Elementor blocks that each brought their own
   ground, fonts and text colours: the home page alone painted 8 different
   backgrounds and used 7 font families. That is what made the site read as
   separate blocks stitched together, however good each block was on its own.

   This layer makes every page one continuous surface, the way the best
   editorial sites are built:

     one ground     warm cream, header to footer; blocks are transparent
     one family     cream, brown ink and gold. Marigold, rust, blue retired
     two faces      Instrument Serif for headings, Montserrat for the rest
     one box        a soft gold hairline on a card-white fill
     one rhythm     sections separated by space and rules, never by colour

   Content, wording and section order are untouched: this file only restyles.
   Loaded last on every page. It overrides per-element Elementor CSS, so most
   declarations here carry !important by necessity, not habit.

   Which blocks count as "cards" is decided from the ORIGINAL rendering by
   tools/unify_tag.js and recorded in the markup as .u-card.
   ========================================================================== */

/* ------------------------------------------------------------- the theme  */
/* Two grounds, one palette (2026-09-26). From a set of mockups the client
   chose "Original / Beige (Classic & Elegant)" and "Warm Taupe / Mocha
   (Modern & Soft)", and asked for a mixture of both. So:

     mocha   frames the site: the header and every page's hero, the reviews
             band, the closing call to action, the footer
     beige   carries the reading: everything in between

   Where the two meet, the edge is crisp and well defined (the client's
   call; soft dissolves were tried and rejected) — "the mix" below.
   tools/v2_mix.py marks which sections are mocha.

   Every colour on the site comes from the tokens here; v2.css, chart.css and
   premium.css read them too. The beige tokens sit on :root; a mocha section
   redefines the same tokens for everything inside it, so every rule works on
   both grounds unchanged. Values are measured from the mockups, with two
   nudges for legibility: the mocha is one step deeper (#74604b, inside the
   mockup's own range) so cream body text passes WCAG AA (4.8:1; the mockup's
   own pairing measured 4.1:1), and body text on beige is the mockup's darker
   brown (6.8:1).

   Earlier themes: cream (manavdhariwal.com palette) a66e5e4; ink eef173e. */

:root {
  /* the two grounds */
  --u-beige:       #f9f2e2;
  --u-mocha:       #74604b;

  /* page width (see "page width" at the end of this file): the content runs
     across the screen, a side margin from each edge */
  --u-side:        clamp(20px, 3.2vw, 56px);   /* 20px phone, ~48px laptop */
  --u-wrap:        1680px;                     /* only very wide screens stop here */
  --v2-gutter:     var(--u-side);              /* the hand-built pages' margin */

  /* rhythm (see "rhythm & type scale" at the end of this file) */
  --u-sec-pad:     clamp(14px, 1.45vw, 22px);  /* a section's top and bottom */
  --u-open-pad:    clamp(24px, 2.6vw, 40px);   /* top of a section opening a new topic */
  --u-lead-gap:    clamp(12px, 1.3vw, 18px);   /* section title -> its content */
  --u-edge:        clamp(32px, 3.2vw, 48px);   /* content -> a colour edge */
  --u-edge-out:    calc(var(--u-edge) - var(--u-sec-pad));
  --u-hero-top:    clamp(32px, 3.6vw, 56px);   /* under the header */
  --u-stack:       clamp(14px, 1.3vw, 18px);   /* widget -> widget */
  --u-grid-gap:    clamp(16px, 1.8vw, 28px);   /* box -> box in a row */
  --u-col-gap:     clamp(32px, 4vw, 64px);     /* column -> column */

  /* type scale, by role */
  --u-fs-title:    clamp(2.5rem, 4.6vw, 4.4rem);
  --u-fs-section:  clamp(2rem, 3.1vw, 2.9rem);
  --u-fs-sub:      clamp(1.45rem, 2vw, 1.85rem);
  --u-fs-card:     clamp(1.35rem, 1.75vw, 1.65rem);
  --u-fs-item:     clamp(1.2rem, 1.45vw, 1.4rem);
  --u-fs-num:      clamp(2.2rem, 3.2vw, 3rem);
  --u-fs-body:     clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  --u-fs-lede:     clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
  --u-lh-body:     1.75;

  /* the primary button: one bronze on both grounds, as in both mockups */
  --u-btn:         linear-gradient(135deg, #6b4f27 0%, #85653d 100%);
  --u-btn-hover:   linear-gradient(135deg, #5a4120 0%, #6f532f 100%);
  --u-btn-border:  #6b4f27;
  --u-btn-text:    #fdf1de;                    /* 4.8:1 on the light end */

  /* page transition: mocha, the colour of the header it lifts onto */
  --u-curtain:     radial-gradient(1200px 600px at 50% 0%, rgba(240, 214, 166, 0.16), transparent 60%),
                   linear-gradient(180deg, #7b6752 0%, #6d5a46 100%);
  --u-curtain-ink: #fbf1e0;

  /* shadows: beige page */
  --u-shadow-card: 0 3px 10px rgba(39, 28, 8, 0.06), 0 20px 48px -32px rgba(120, 84, 34, 0.3);
  --u-shadow-header: 0 10px 30px -22px rgba(20, 12, 4, 0.5);
  --u-shadow-btn:  0 14px 30px -12px rgba(90, 62, 26, 0.55);
  --u-shadow-lift: 0 22px 44px -22px rgba(120, 84, 34, 0.5), 0 6px 18px rgba(39, 28, 8, 0.08);
  --u-shadow-review: 0 1px 2px rgba(39, 28, 8, 0.04), 0 18px 40px -28px rgba(120, 84, 34, 0.38);

  --u-radius:      4px;
  --u-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --u-section:     clamp(64px, 9vw, 120px);
}

/* Beige: the page, and review cards sitting on a mocha band (a light card
   on the dark band, as in the mockups' layering). */
:root,
.u-mocha .elementskit-single-testimonial-slider,
.u-alert__verdict {
  --u-ground:      var(--u-beige);
  --u-card:        #fdf9f0;
  --u-card-bg:     linear-gradient(180deg, #fffdf9 0%, #fbf5ea 100%);
  --u-card-edge:   rgba(196, 164, 108, 0.34);
  --u-card-edge-hover: rgba(176, 132, 53, 0.62);
  --u-card-shadow: 0 1px 2px rgba(39, 28, 8, 0.04), 0 14px 34px -20px rgba(120, 84, 34, 0.3),
                   inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --u-card-shadow-hover: 0 2px 6px rgba(39, 28, 8, 0.05), 0 30px 56px -26px rgba(120, 84, 34, 0.45),
                   inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --u-medal:       rgba(196, 160, 98, 0.14);
  --u-band:        rgba(246, 236, 217, 0.6);
  --u-tint:        rgba(196, 160, 98, 0.14);
  --u-head:        #231a12;
  --u-ink:         #231a12;                    /* strongest foreground */
  --u-on-ink:      #fdf6ea;
  --u-text:        #5f5245;                    /* 6.8:1 */
  --u-strong:      #231a12;
  --u-sub:         #5a4c3e;                    /* 7.4:1 */
  --u-mute:        #6d5f50;                    /* 5.5:1 */
  --u-nav:         rgba(35, 26, 18, 0.82);
  --u-gold:        #b08435;                    /* accents: rules, stars */
  --u-gold-deep:   #8a6525;
  --u-gold-text:   #87632a;                    /* gold at text size: 4.9:1 */
  --u-gold-soft:   #d5ba86;
  --u-line:        rgba(196, 164, 108, 0.5);
  --u-rule:        rgba(196, 164, 108, 0.36);
  --u-rule-strong: rgba(35, 26, 18, 0.5);
  --u-frame:       rgba(176, 132, 53, 0.45);
  --u-underline:   rgba(135, 99, 42, 0.35);
  --u-eyebrow-line: rgba(35, 26, 18, 0.55);
  --u-header:      rgba(249, 242, 226, 0.95);
  --u-header-line: rgba(196, 164, 108, 0.45);
  --u-glow-1:      rgba(196, 160, 98, 0.26);
  --u-glow-2:      rgba(236, 216, 180, 0.5);
  --u-metal:       linear-gradient(135deg, #7d5a22, #b08435 45%, #d9bf8a 70%, #b08435);
  --u-logo:        linear-gradient(135deg, #7d5a22, #b08435 55%, #7d5a22);
  --u-chart-line:  rgba(35, 26, 18, 0.28);
  --u-chart-num:   rgba(35, 26, 18, 0.45);
  --u-chart-lit:   rgba(176, 132, 53, 0.2);
  --u-chart-lit-2: rgba(151, 49, 20, 0.14);
}

/* Mocha: the frame. (And the consultation page's picture band, whose words
   sit on a mocha veil.) */
.u-mocha,
#masthead,
.ekit-template-content-footer,
.u-para {
  --u-ground:      var(--u-mocha);
  --u-card:        #6b5845;                    /* inset panels: a step DEEPER, so text on them passes */
  --u-card-bg:     linear-gradient(180deg, #715d49 0%, #65523f 100%);
  --u-card-edge:   rgba(240, 220, 185, 0.26);
  --u-card-edge-hover: rgba(240, 214, 166, 0.55);
  --u-card-shadow: 0 1px 2px rgba(20, 12, 4, 0.12), 0 16px 36px -22px rgba(20, 12, 4, 0.55),
                   inset 0 1px 0 rgba(255, 244, 228, 0.08);
  --u-card-shadow-hover: 0 2px 6px rgba(20, 12, 4, 0.14), 0 30px 56px -26px rgba(20, 12, 4, 0.65),
                   inset 0 1px 0 rgba(255, 244, 228, 0.1);
  --u-medal:       rgba(255, 240, 214, 0.1);
  --u-band:        rgba(255, 245, 228, 0.06);
  --u-tint:        rgba(28, 18, 8, 0.16);      /* insets darken on mocha, never lighten under text */
  --u-head:        #fffaf0;                    /* 5.7:1 */
  --u-ink:         #fffaf0;
  --u-on-ink:      #4a3b2c;
  --u-text:        #f2e4d4;                    /* 4.8:1 */
  --u-strong:      #fffaf0;
  --u-sub:         #f0e0c9;                    /* 4.6:1 */
  --u-mute:        #f0e0c9;
  --u-nav:         rgba(255, 248, 236, 0.9);   /* 5.0:1 */
  --u-gold:        #e3c697;                    /* the mockup's pale-gold linework */
  --u-gold-deep:   #d2b077;
  --u-gold-text:   #f4dfb8;                    /* 4.6:1 */
  --u-gold-soft:   rgba(240, 214, 166, 0.55);
  --u-line:        rgba(240, 220, 185, 0.32);
  --u-rule:        rgba(240, 220, 185, 0.24);
  --u-rule-strong: rgba(255, 248, 236, 0.65);
  --u-frame:       rgba(240, 214, 166, 0.5);
  --u-underline:   rgba(244, 223, 184, 0.45);
  --u-eyebrow-line: rgba(255, 244, 228, 0.7);
  --u-header:      rgba(116, 96, 75, 0.97);
  --u-header-line: rgba(240, 220, 185, 0.2);
  --u-glow-1:      rgba(255, 236, 205, 0.1);
  --u-glow-2:      rgba(255, 240, 215, 0.2);
  --u-metal:       linear-gradient(135deg, #d8b573 0%, #f0d6a2 40%, #fff1d6 62%, #e6c68c 100%);
  --u-logo:        linear-gradient(135deg, #d9b878, #f3dcae 55%, #d9b878);
  --u-btn-border:  rgba(244, 223, 184, 0.5);   /* bronze sits close to mocha: a pale-gold hairline defines it */
  --u-shadow-card: 0 3px 10px rgba(20, 12, 4, 0.12), 0 20px 48px -30px rgba(20, 12, 4, 0.45);
  --u-shadow-btn:  0 14px 30px -12px rgba(20, 12, 4, 0.55);
  --u-shadow-lift: 0 26px 50px -22px rgba(20, 12, 4, 0.6), 0 6px 18px rgba(20, 12, 4, 0.2);
  --u-shadow-review: 0 1px 2px rgba(20, 12, 4, 0.08), 0 22px 44px -28px rgba(20, 12, 4, 0.55);
}

/* ----------------------------------------------------------- the surface  */

html,
body,
body.ast-separate-container,
body.ast-plain-container,
body.ast-page-builder-template {
  background-color: var(--u-ground) !important;
  background-image: none !important;
}

body {
  color: var(--u-text);
  text-rendering: optimizeLegibility;
}

/* Every wrapper between the body and the content goes clear, so the one
   ground shows through all of them. */
#page,
.site,
.site-content,
#content,
.ast-container,
#primary,
#main,
.site-main,
.elementor,
.entry-content,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-archive-description,
.ast-separate-container .comments-area,
.ast-separate-container .comment-respond,
.ast-separate-container .ast-comment-list li,
.ast-separate-container .ast-author-box,
.ast-separate-container .post-navigation,
.ast-separate-container .ast-pagination {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.e-con:not(.u-photo),
.elementor-section,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget:not(.elementor-widget-button):not(.u-photo) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Elementor paints section overlays on ::before. */
.e-con::before,
.e-con > .elementor-background-overlay,
.elementor-section > .elementor-background-overlay,
.elementor-background-overlay {
  background-color: transparent !important;
  background-image: none !important;
}

/* The wave dividers were the loudest "block" signal on the page. */
.elementor-shape {
  display: none !important;
}

/* Shadowed type was only ever there to rescue contrast on orange. */
.elementor *,
.ekit-template-content-footer * {
  text-shadow: none !important;
}

/* ------------------------------------------------------------- type: faces */

.elementor-heading-title,
.elementor-icon-box-title,
.elementor-image-box-title,
.elementor-widget-text-editor :is(h1, h2, h3, h4, h5, h6),
.type-post .entry-content :is(h1, h2, h3, h4, h5, h6),
.entry-title,
.page-title,
.ast-archive-title,
.comment-reply-title,
.eael-pricing .title,
.elementskit-funfact .funfact-title ~ *,
.profile-card .profile-title,
.widget-title {
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;          /* Instrument Serif has no bold; never fake one */
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
  color: var(--u-head) !important;
  font-style: normal;
}

.elementor-heading-title a,
.entry-title a {
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  text-decoration: none !important;
}

/* Everything that is not a heading speaks in one sans. */
.elementor-widget-text-editor,
.elementor-widget-text-editor :is(p, span, li, div, em, strong, b, a),
.elementor-icon-box-description,
.elementor-image-box-description,
.elementor-icon-list-text,
.elementor-button,
.elementor-button-text,
.elementskit-btn,
.elementskit-accordion,
.elementskit-accordion :is(a, span, p, div),
.elementskit-single-testimonial-slider,
.elementskit-single-testimonial-slider :is(p, span, div, strong),
.elementskit-funfact :is(span, h1, h2, h3, h4, h5, h6, p),
.eael-pricing :is(li, span, a),
.eael-countdown-container :is(span, div),
.profile-card :is(p, span),
.wpcf7-form,
.wpcf7-form :is(p, label, input, textarea, select, button, span),
.type-post .entry-content,
.type-post .entry-content :is(p, li, span, a, strong, em),
.entry-meta,
.entry-meta *,
.ast-excerpt-container,
.read-more,
.comment-form,
.comment-form :is(p, label, input, textarea, span),
.ast-footer-copyright,
.ast-footer-copyright * {
  font-family: var(--v2-body) !important;
}

/* ----------------------------------------------------------- type: sizes  */
/* One scale by role, not by tag: see "rhythm & type scale" at the end of
   this file. */

/* Linked titles are still titles: same face, same colour, and the link is
   shown on hover rather than by a permanent underline. */
.elementor-heading-title a,
.elementor-icon-box-title a {
  font-family: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.35s var(--u-ease);
}

.elementor-heading-title a:hover,
.elementor-icon-box-title a:hover {
  color: var(--u-gold-text) !important;
}

.elementor-icon-box-title {
  margin-bottom: 6px !important;
}

/* Body copy */
.elementor-widget-text-editor,
.elementor-icon-box-description,
.elementor-image-box-description,
.type-post .entry-content p,
.type-post .entry-content li {
  font-size: var(--u-fs-body) !important;
  line-height: var(--u-lh-body) !important;
  font-weight: 400 !important;
  color: var(--u-text) !important;
}

.elementor-widget-text-editor :is(p, span, li, div, em) {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.elementor-widget-text-editor :is(strong, b),
.type-post .entry-content :is(strong, b),
.elementor-icon-box-description :is(strong, b) {
  color: var(--u-strong) !important;
  font-weight: 600 !important;
}

.elementor-widget-text-editor a,
.type-post .entry-content a,
.elementor-icon-box-description a {
  color: var(--u-gold-text) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--u-underline) !important;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s var(--u-ease);
}

.elementor-widget-text-editor a:hover,
.type-post .entry-content a:hover {
  text-decoration-color: var(--u-gold) !important;
}

.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ icons */

.elementor-icon,
.elementor-icon i,
.elementor-icon-list-icon i,
.elementskit-funfact .elementskit-funfact-icon,
.elementskit-funfact .elementskit-funfact-icon i {
  color: var(--u-gold-text) !important;
}

.elementor-icon,
.elementor-icon svg,
.elementor-icon-list-icon svg,
.elementskit-funfact svg {
  fill: var(--u-gold-text) !important;
}

.elementskit-stars svg {
  fill: var(--u-gold) !important;
}

.elementor-view-stacked .elementor-icon,
.elementor-view-framed .elementor-icon {
  background-color: transparent !important;
  border: 1px solid var(--u-line) !important;
}

.elementor-icon-list-text {
  color: var(--u-text) !important;
}

.elementor-icon-list-item:not(:last-child)::after {
  border-color: var(--u-rule) !important;
}

/* ---------------------------------------------------------------- dividers */

.elementor-widget-divider {
  --divider-color: var(--u-line) !important;
}

.elementor-divider-separator {
  border-color: var(--u-line) !important;
}

/* ------------------------------------------------------------------ cards */
/* The one way to draw a box (2026-09-26, the client asked for the boxes to be
   "aesthetic, modern and elegant" rather than plain outlined rectangles).
   Softly rounded, a warm paper gradient with a lit top edge, layered warm
   shadows, a gold hairline, and a fine gold accent centred on the top edge.
   On hover the card rises a little towards the reader, the accent widens and
   the hairline deepens. Inside: list icons set in small gold medallions,
   softer dividers, and the call to action pinned to the bottom so buttons
   line up across a row. The same box on mocha, in deep mocha. Review cards
   have their own variant (below); stat counters and cut-out portraits are
   not boxes. */

.u-card,
.eael-pricing .eael-pricing-item,
.profile-card,
.ast-article-post .ast-article-inner {
  position: relative;
  background: var(--u-card-bg) !important;
  border: 1px solid var(--u-card-edge) !important;
  border-radius: 16px !important;
  box-shadow: var(--u-card-shadow) !important;
  transition: transform 0.6s var(--u-ease), box-shadow 0.6s var(--u-ease),
              border-color 0.45s var(--u-ease) !important;
}

/* The gold accent on the top edge. */
.u-card::after,
.eael-pricing .eael-pricing-item::after,
.profile-card::after,
.ast-article-post .ast-article-inner::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 64px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--u-gold), transparent);
  pointer-events: none;
  transition: width 0.6s var(--u-ease);
}

@media (hover: hover) and (pointer: fine) {
  .u-card:not(.u-cutout):not(.elementor-widget-elementskit-funfact):hover,
  .eael-pricing .eael-pricing-item:hover,
  .profile-card:hover,
  .ast-article-post .ast-article-inner:hover {
    transform: translateY(-4px) !important;
    border-color: var(--u-card-edge-hover) !important;
    box-shadow: var(--u-card-shadow-hover) !important;
  }

  .u-card:hover::after,
  .eael-pricing .eael-pricing-item:hover::after,
  .profile-card:hover::after,
  .ast-article-post .ast-article-inner:hover::after {
    width: 132px;
  }
}

/* Room to breathe inside. (A list drawn as a box by itself, the name
   correction page's "Why Choose Scout Your Stars?", kept Elementor's 10px:
   the same room as every other box, 2026-09-28.) */
.u-card.e-con,
.u-card.elementor-widget-icon-list {
  padding: clamp(24px, 2.2vw, 32px) clamp(20px, 2vw, 28px) clamp(22px, 2vw, 28px) !important;
}

/* The call to action sits on the card's floor, so a row of cards has its
   buttons in one line whatever the length of each card's text. */
.u-card.e-con > .elementor-widget-button:last-child,
.u-card.e-con > .elementor-widget-elementskit-button:last-child,
.u-card .e-con-inner > .elementor-widget-button:last-child {
  margin-top: auto !important;
  padding-top: 14px;
}

/* List icons in small gold medallions. */
.u-card .elementor-icon-list-icon {
  flex: 0 0 38px;
  box-sizing: border-box;
  width: 38px !important;
  height: 38px;
  margin-right: 14px;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border-radius: 50%;
  /* The same ring as the site's star marks ("reason marks", below), so a
     list with a star and other icons in it is one set (2026-09-28). */
  border: 1px solid var(--u-card-edge-hover);
  background: var(--u-card-bg) !important;
  box-shadow: 0 0 0 4px var(--u-medal), 0 8px 16px -12px rgba(60, 38, 12, 0.5) !important;
}

.u-card .elementor-icon-list-icon i {
  font-size: 19px !important;
  line-height: 1 !important;
  width: auto !important;
  color: var(--u-gold-text) !important;
}

.u-card .elementor-icon-list-icon svg {
  width: 19px !important;
  height: 19px !important;
  fill: var(--u-gold-text) !important;
}

.u-card .elementor-icon-list-item {
  align-items: center !important;
  padding-block: 10px !important;
}

.u-card .elementor-icon-list-item:not(:last-child)::after {
  border-color: var(--u-rule) !important;
  opacity: 0.8;
}

/* A row of boxes shares one height, and every box starts at the top, so
   titles line up across the row whatever the length of the text below. */
.u-card.e-con {
  justify-content: flex-start !important;
}

.u-card-row .u-card.e-con {
  align-self: stretch !important;
}

/* A wrapper that only holds a pricing card is not a box itself (the pricing
   card is): no box inside a box. */
.u-card:has(.eael-pricing-item) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
}

.u-card:has(.eael-pricing-item)::after {
  display: none;
}

.eael-pricing .eael-pricing-button {
  white-space: nowrap;
  padding: 13px 22px !important;
}

/* Pricing cards: every wrapper alike (one had Elementor's default padding
   and sat 10px low), each card as tall as the row, button on the floor. */
.e-con:has(> .elementor-widget-eael-pricing-table) {
  padding: 0 !important;
}

.elementor-widget-eael-pricing-table,
.elementor-widget-eael-pricing-table .eael-pricing {
  height: 100%;
}

.eael-pricing .eael-pricing-item {
  height: 100%;
  display: flex !important;
  flex-direction: column;
}

.eael-pricing .eael-pricing-item .footer {
  margin-top: auto !important;
  padding-top: clamp(16px, 1.6vw, 24px) !important;
}

/* The list's own bottom margin, and on a phone a fixed 30px above the
   button, stacked up to 60px between the last line and the button. */
.eael-pricing .eael-pricing-item .body ul {
  margin-bottom: 0 !important;
}

/* On a phone the price was made a block, so its "/-" dropped to a line of
   its own under the figure. */
.eael-pricing .eael-pricing-tag .price-tag {
  display: inline !important;
}

/* Not boxes: stat counters, and portraits standing in front of the wheel. */
.elementor-widget-elementskit-funfact.u-card::after,
.u-cutout.u-card::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .u-card,
  .eael-pricing .eael-pricing-item,
  .profile-card,
  .u-card::after {
    transition: none !important;
  }
}

/* Anything that was painted inside a card goes clear too — except controls,
   which carry their own styling below. (Clearing the submit input here once
   left its ink label on an ink ground: an invisible button.) */
.u-card *:not(a):not(button):not(input):not(select):not(textarea):not(svg):not(path) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* The old "cards" were only lifted by movement; the hairline does that job
   now, so the hover jump is retired with the drop shadow. */
.elementor-icon-box-wrapper:hover {
  transform: none !important;
}

/* ---------------------------------------------------------------- images  */
/* Photographs sit in the same hairline as the cards, square-cornered like the
   hero plate. */

.site-content .elementor-widget-image img,
.site-content .elementor-widget-image-gallery img,
.elementor-widget-image-carousel .swiper-slide-image {
  border-radius: var(--u-radius) !important;
}

.site-content .elementor-widget-image:not(.u-card):not(.u-cutout) img[width]:not([width="95"]) {
  outline: 1px solid var(--u-line);
  outline-offset: -1px;
}

/* Screenshot galleries (students' messages): a masonry of whole pictures,
   flowing down the columns, instead of rows that left a gap under every
   shorter screenshot. At least 150px a column, so a phone shows two. */
.elementor-image-gallery .gallery {
  display: block !important;
  columns: 5 150px;
  column-gap: var(--u-grid-gap);
}

.elementor-image-gallery .gallery-item {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 var(--u-grid-gap) !important;
  padding: 0 !important;
  break-inside: avoid;
}

.elementor-image-gallery .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

.elementor-widget-video .elementor-wrapper,
.elementor-widget-video video {
  border-radius: var(--u-radius) !important;
  overflow: hidden;
}

.elementor-widget-video .elementor-wrapper {
  outline: 1px solid var(--u-line);
  outline-offset: -1px;
  background: #000 !important;
}

/* ---------------------------------------------------------------- buttons */
/* Same two buttons as the hero: solid ink for the action, a gold hairline for
   the rest. Hover turns the ink to deep gold with a warm glow. */

.elementor-button,
.elementskit-btn,
.eael-pricing .eael-pricing-button,
.wpcf7-submit,
.ast-button,
.comment-form .submit,
.ast-custom-button,
.menu-item .ast-custom-button-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--v2-body) !important;
  font-size: clamp(0.72rem, 0.8vw, 0.8rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  padding: 16px 30px !important;
  border-radius: 2px !important;
  border: 1px solid var(--u-btn-border) !important;
  background: var(--u-btn) !important;
  color: var(--u-btn-text) !important;
  fill: var(--u-btn-text) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color 0.4s var(--u-ease), border-color 0.4s var(--u-ease),
              color 0.4s var(--u-ease), transform 0.4s var(--u-ease) !important;
}

.elementor-button .elementor-button-text,
.elementor-button .elementor-button-icon,
.elementskit-btn i,
.elementskit-btn svg {
  color: inherit !important;
  fill: currentColor !important;
}

.elementor-button:hover,
.elementskit-btn:hover,
.eael-pricing .eael-pricing-button:hover,
.wpcf7-submit:hover,
.comment-form .submit:hover {
  background: var(--u-btn-hover) !important;
  border-color: var(--u-btn-border) !important;
  color: var(--u-btn-text) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--u-shadow-btn) !important;
  filter: none !important;
}

/* Inside a card the button is secondary to the card itself: a rounded
   outline with an arrow that fills bronze on hover. */
.u-card .elementor-button,
.u-card .elementskit-btn,
.eael-pricing .eael-pricing-button {
  background: transparent !important;
  color: var(--u-head) !important;
  fill: var(--u-head) !important;
  border-color: var(--u-gold-soft) !important;
  border-radius: 999px !important;
  padding: 13px 26px !important;
}

.u-card .elementor-button .elementor-button-text::after,
.eael-pricing .eael-pricing-button::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.4s var(--u-ease);
}

.u-card .elementor-button:hover,
.u-card .elementskit-btn:hover,
.eael-pricing .eael-pricing-button:hover {
  background: var(--u-btn) !important;
  color: var(--u-btn-text) !important;
  fill: var(--u-btn-text) !important;
  border-color: var(--u-btn-border) !important;
  box-shadow: var(--u-shadow-btn) !important;
}

.u-card .elementor-button:hover .elementor-button-text::after,
.eael-pricing .eael-pricing-button:hover::after {
  transform: translateX(4px);
}

/* On the masterclass page, buttons with no link at all are badges ("5000+
   Students", "Limited time offer"): outlined tags, not calls to action. Full
   button padding made two of them collide on a phone. Scoped to that page:
   the consultation hero's "Book Your Session" also has no link, but it is
   the page's main call to action and must look like one. */
.page-id-16 .elementskit-btn:not([href]),
.page-id-16 .elementor-button:not([href]) {
  background: transparent !important;
  color: var(--u-gold-text) !important;
  fill: var(--u-gold-text) !important;
  border-color: var(--u-gold-soft) !important;
  padding: 10px 16px !important;
  font-size: clamp(0.64rem, 0.72vw, 0.7rem) !important;
  cursor: default;
}

.page-id-16 .elementskit-btn:not([href]):hover,
.page-id-16 .elementor-button:not([href]):hover {
  transform: none !important;
  background: transparent !important;
  color: var(--u-gold-text) !important;
  border-color: var(--u-gold-soft) !important;
  box-shadow: none !important;
}

/* The floating WhatsApp button: quiet until wanted. */
.elementor-fixed .elementor-button {
  background: var(--u-header) !important;
  color: var(--u-head) !important;
  border-color: var(--u-gold-soft) !important;
  box-shadow: var(--u-shadow-header) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 13px 22px !important;
}

.elementor-fixed .elementor-button:hover {
  background: var(--u-btn) !important;
  border-color: var(--u-btn-border) !important;
  color: var(--u-btn-text) !important;
}

/* Held back until the hero is scrolled past (premium.js adds the gate). */
html.sys-float-gate .elementor-fixed {
  transition: opacity 0.45s var(--u-ease), visibility 0s linear 0.45s;
}

html.sys-float-gate:not(.sys-float-on) .elementor-fixed {
  opacity: 0;
  visibility: hidden;
}

html.sys-float-gate.sys-float-on .elementor-fixed {
  transition: opacity 0.45s var(--u-ease), visibility 0s linear 0s;
}

/* ------------------------------------------------------------------ header */
/* Stays with the reader, the way the reference's does: translucent cream,
   a blur behind, one gold hairline and a soft shadow. */

#masthead {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: var(--u-header) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--u-header-line);
  box-shadow: var(--u-shadow-header);
}

#masthead .ast-main-header-wrap,
#masthead .ast-primary-header-bar,
#masthead .main-header-bar,
#masthead .site-primary-header-wrap,
#masthead .ast-mobile-header-wrap,
#masthead #ast-desktop-header,
#masthead #ast-mobile-header {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 0 !important;
}

/* The mark, in the palette. The file itself is untouched: the image is moved
   out of its own box and its shape is used as a mask over a gold fill, so the
   logo renders in exact brand gold at any size. */
.custom-logo,
.elementor-element-0c18331 img {
  object-position: -99999px 0;
  background: var(--u-logo);
  -webkit-mask: var(--u-logo-mask) center / contain no-repeat;
  mask: var(--u-logo-mask) center / contain no-repeat;
}

.custom-logo {
  --u-logo-mask: url("/wp-content/uploads/2025/09/cropped-scout_your_stars_colored_logo-removebg-preview.png");
}

.elementor-element-0c18331 img {
  --u-logo-mask: url("/wp-content/uploads/2025/09/cropped-WhatsApp_Image_2025-08-19_at_1.11.59_PM-removebg-preview.png");
}

/* ------------------------------------------------------------------ footer */
/* Same ground as everything above it; a rule marks where the page ends. */

.ekit-template-content-footer {
  margin-top: var(--u-edge-out);
}

.ekit-template-content-footer .elementor-heading-title {
  font-size: clamp(1.3rem, 1.6vw, 1.5rem) !important;
  color: var(--u-head) !important;
}

.ekit-template-content-footer .elementor-icon-list-text,
.ekit-template-content-footer .elementor-icon-list-item a {
  color: var(--u-text) !important;
  font-size: 0.9rem !important;
  transition: color 0.3s var(--u-ease);
}

.ekit-template-content-footer .elementor-icon-list-item a:hover .elementor-icon-list-text {
  color: var(--u-gold-text) !important;
}

/* Copyright line: the last hairline on the page. */
.elementor-element-d9eac65 {
  border-top: 1px solid var(--u-rule);
}

/* The footer's form was scaled to 70% (its labels rendered at 11px, and it
   was pulled up 60px to close the gap the scaling left): full size, filling
   its column, its heading on the left like the other columns'. */
.ekit-template-content-footer .elementor-element-6d92f8f {
  transform: none !important;
  margin-top: 0 !important;
}

.ekit-template-content-footer .elementor-element-337e1c0 .elementor-heading-title {
  text-align: left !important;
}

/* The columns started at different heights (two carried a 58px top margin
   and all were centred against the tall form column): all start at the
   top. */
.ekit-template-content-footer .elementor-element-0125af7 > .e-con-inner {
  align-items: flex-start !important;
}

.ekit-template-content-footer .elementor-element-0125af7 > .e-con-inner > .e-con {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* On a phone the "Get In Touch" column also sat 32px left of the others. */
@media (max-width: 767px) {
  .ekit-template-content-footer .elementor-element-5e42b7e {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ekit-template-content-footer .elementor-element-6d92f8f {
    --container-widget-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

.elementor-element-d9eac65 .elementor-widget-text-editor,
.elementor-element-d9eac65 .elementor-widget-text-editor * {
  color: var(--u-mute) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------- forms */

.wpcf7-form label,
.wpcf7-form p,
.wpcf7-form .wpcf7-quiz-label,
.comment-form label {
  color: var(--u-text) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em;
}

.wpcf7-form :is(input, textarea, select):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.comment-form :is(input, textarea):not([type="submit"]):not([type="checkbox"]) {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--u-line) !important;
  border-radius: 0 !important;
  color: var(--u-head) !important;
  font-size: 0.92rem !important;
  padding: 10px 2px !important;
  box-shadow: none !important;
  transition: border-color 0.3s var(--u-ease);
}

.wpcf7-form :is(input, textarea, select):focus,
.comment-form :is(input, textarea):focus {
  outline: none !important;
  border-bottom-color: var(--u-gold) !important;
}

.wpcf7-form ::placeholder,
.comment-form ::placeholder {
  color: var(--u-mute) !important;
  opacity: 1;
}

.wpcf7-form .wpcf7-submit {
  width: auto !important;
  margin-top: 8px;
}

/* ------------------------------------------------------------ accordions  */
/* FAQ: a list divided by hairlines, not a stack of coloured bars. */

.elementskit-accordion .elementskit-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--u-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.elementskit-accordion .elementskit-card:first-child {
  border-top: 1px solid var(--u-rule) !important;
}

.elementskit-accordion .elementskit-card-header,
.elementskit-accordion .elementskit-card-header > .elementskit-btn-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.elementskit-accordion .elementskit-btn-link {
  padding: 22px 4px !important;
  color: var(--u-head) !important;
  text-decoration: none !important;
}

.elementskit-accordion .ekit-accordion-title {
  font-family: var(--v2-display) !important;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--u-head) !important;
  text-decoration: none !important;
  /* Room for the arrow, which sits over the end of the row: a question that
     wraps (on a phone) ran underneath it. */
  padding-right: 56px !important;
}

.elementskit-accordion .elementskit-btn-link:not(.collapsed) .ekit-accordion-title {
  color: var(--u-gold-text) !important;
}

.elementskit-accordion .ekit_accordion_icon_group,
.elementskit-accordion .ekit_accordion_icon_group i {
  color: var(--u-gold-text) !important;
}

.elementskit-accordion .elementskit-card-body {
  padding: 0 4px 24px !important;
  color: var(--u-text) !important;
  background: transparent !important;
}

.elementskit-accordion .elementskit-card-body,
.elementskit-accordion .elementskit-card-body :is(p, span, li) {
  font-size: var(--u-fs-body) !important;
  line-height: var(--u-lh-body) !important;
  color: var(--u-text) !important;
}

/* ---------------------------------------------------------- testimonials */
/* The reference allows itself exactly one tinted band — its testimonials —
   between two rules. Ours do the same, on every page that has reviews. */


/* ------------------------------------------------------------ review cards */
/* (2026-09-25, user: "make the reviews and ratings box more premium and
   aesthetic and modern. also make them a little smaller in size.")

   A card, top to bottom: a large serif opening quote in gold; the review,
   shown to eight lines, with the rest one click away ("Read full review" —
   premium.js opens the whole review in a dialog); a hairline; then the
   reviewer — photo, or monogram (tools/v2_reviews.py), in a gold ring, name
   in the display serif — with the rating across from them. The plugin's
   "99" icon is retired for the quote mark. The arrows leave the cards' text
   and sit below the row as two small round buttons.

   Every card in a carousel is the height of the tallest: slides stretch,
   the text area takes the slack, so quote marks line up across the top and
   names across the bottom. All five review carousels share this. */

/* The row runs the content width, like everything else on the page. */
.elementskit-testimonial-slider {
  max-width: none;
  margin-inline: 0;
}

.elementskit-testimonial-slider .swiper-wrapper {
  align-items: stretch !important;
}

.elementskit-testimonial-slider .swiper-slide {
  height: auto !important;
  display: flex !important;
}

.elementskit-testimonial-slider .swiper-slide-inner {
  display: flex !important;
  width: 100%;
}

.elementskit-testimonial-slider .elementskit-single-testimonial-slider {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "mark mark"
    "text text"
    "who  stars";
  align-items: center;
  width: 100%;
  padding: 26px 26px 22px !important;
  border: 1px solid rgba(216, 190, 138, 0.42) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fffdf9 0%, var(--u-card) 100%) !important;
  box-shadow: var(--u-shadow-review) !important;
  transition: transform 0.8s var(--u-ease), box-shadow 0.8s var(--u-ease),
              border-color 0.45s var(--u-ease) !important;
}

/* The opening quote mark. (Second declaration: the same mark with empty alt
   text, so screen readers don't announce it; browsers that don't know the
   syntax keep the first.) */
.elementskit-testimonial-slider .elementskit-single-testimonial-slider::before {
  content: "\201C";
  content: "\201C" / "";
  grid-area: mark;
  display: block;
  /* ElementsKit uses this same pseudo-element as a hover overlay pinned over
     the whole card (absolute, full size, transformed away). Take it back. */
  position: static !important;
  inset: auto !important;
  width: auto !important;
  transform: none !important;
  background: none !important;
  border-radius: 0 !important;
  height: 0.38em;
  margin: 0 0 8px -4px;
  font-family: var(--v2-display);
  font-size: 5.2rem;
  line-height: 0.82;
  color: var(--u-gold);
  opacity: 0.5;
}

/* The review. The clamp is visual only: the whole text is in the page, so
   screen readers and search engines get every word. */
.elementskit-testimonial-slider .elementskit-commentor-content {
  grid-area: text;
  align-self: stretch;
  margin: 0 0 16px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--u-rule);
}

.elementskit-testimonial-slider .elementskit-commentor-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
  margin: 0 !important;
  font-size: var(--u-fs-body) !important;
  line-height: 1.72 !important;
  color: var(--u-text) !important;
}

/* Fallback for browsers without <dialog>: the card opens in place. */
.elementskit-testimonial-slider .u-expanded .elementskit-commentor-content p {
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}

.elementskit-testimonial-slider .u-readmore,
.elementskit-testimonial-slider .u-readmore:hover,
.elementskit-testimonial-slider .u-readmore:focus {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
}

.elementskit-testimonial-slider .u-readmore {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--v2-body) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
  color: var(--u-gold-text) !important;
  cursor: pointer;
}

.elementskit-testimonial-slider .u-clamped .u-readmore {
  display: inline-flex;
}

.elementskit-testimonial-slider .u-readmore::after {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--u-ease);
}

.elementskit-testimonial-slider .u-readmore:hover::after {
  width: 30px;
}

.elementskit-testimonial-slider .u-readmore:focus-visible {
  outline: 2px solid var(--u-gold-deep) !important;
  outline-offset: 4px;
}

/* The reviewer. */
.elementskit-testimonial-slider .elementskit-commentor-bio {
  grid-area: who;
  display: flex !important;
  align-items: center;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.elementskit-testimonial-slider .elementkit-commentor-details,
.u-review-dialog .elementkit-commentor-details {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  min-width: 0;
}

.elementskit-testimonial-slider .elementskit-commentor-image,
.u-review-dialog .elementskit-commentor-image {
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}

.elementskit-testimonial-slider .elementskit-commentor-image img,
.elementskit-single-testimonial-slider .u-monogram,
.u-review-dialog .elementskit-commentor-image img,
.u-review-dialog .u-monogram {
  display: block;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fffdf9, 0 0 0 3px var(--u-gold-soft) !important;
}

.elementskit-single-testimonial-slider .u-monogram,
.u-review-dialog .u-monogram {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8efde 0%, #ecdcb9 100%);
  color: var(--u-gold-deep) !important;
  font-family: var(--v2-display) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

.elementskit-testimonial-slider .elementskit-profile-info,
.u-review-dialog .elementskit-profile-info {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

.elementskit-single-testimonial-slider .elementskit-author-name,
.u-review-dialog .elementskit-author-name {
  display: block;
  font-family: var(--v2-display) !important;
  font-size: 1.12rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--u-head) !important;
}

.elementskit-single-testimonial-slider .elementskit-author-des:empty,
.u-review-dialog .elementskit-author-des:empty {
  display: none;
}

.elementskit-single-testimonial-slider .elementskit-author-des {
  color: var(--u-mute) !important;
}

/* The rating, across from the reviewer. */
.elementskit-testimonial-slider .elementskit-commentor-header {
  grid-area: stars;
  position: static !important;
  margin: 0 0 0 12px !important;
  padding: 0 !important;
}

.elementskit-testimonial-slider .elementskit-stars,
.u-review-dialog .elementskit-stars {
  display: flex !important;
  gap: 3px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.elementskit-testimonial-slider .elementskit-stars li,
.u-review-dialog .elementskit-stars li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.elementskit-testimonial-slider .elementskit-stars a,
.u-review-dialog .elementskit-stars a {
  display: block;
  line-height: 0;
}

.elementskit-testimonial-slider .elementskit-stars svg,
.u-review-dialog .elementskit-stars svg {
  width: 12px !important;
  height: 12px !important;
  fill: var(--u-gold) !important;
}

.elementskit-testimonial-slider .elementskit-watermark-icon {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .elementskit-testimonial-slider .swiper-slide:not(.u-mid) .elementskit-single-testimonial-slider:hover {
    border-color: rgba(216, 190, 138, 0.8) !important;
    background: linear-gradient(180deg, #fffdf9 0%, var(--u-card) 100%) !important;
  }
}

/* Room inside the carousel's clipping box: above for the lifted card, at the
   sides for shadows (no wider than the gap between cards, or the next card
   would peek in), below for the arrows. */
.elementskit-testimonial-slider .ekit-main-swiper {
  padding: 22px 12px 92px !important;
}

/* The review in the middle of the row lifts towards the reader (user: "the
   review which is in the middle lifts towards the screen a little").
   premium.js marks it .u-mid by where the cards actually are, so the lift
   travels with the slow glide instead of jumping ahead of it. Only when three
   cards are in view — with one or two there is no middle. */
@media (min-width: 1024px) {
  .elementskit-testimonial-slider .swiper-slide.u-mid {
    z-index: 2;
  }

  .elementskit-testimonial-slider .u-mid .elementskit-single-testimonial-slider {
    transform: translateY(-8px) scale(1.035);
    border-color: var(--u-gold-soft) !important;
    box-shadow: var(--u-shadow-lift) !important;
  }
}

/* Arrows: two small round buttons, centred below the row. */
.elementskit-testimonial-slider .swiper-navigation-button {
  top: auto !important;
  bottom: 24px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  transform: none !important;
  display: grid !important;
  place-items: center;
  border: 1px solid var(--u-line) !important;
  border-radius: 50% !important;
  background: #fffdf9 !important;
  color: var(--u-gold-text) !important;
  box-shadow: 0 8px 18px -12px rgba(156, 111, 47, 0.55) !important;
  transition: background-color 0.35s var(--u-ease), border-color 0.35s var(--u-ease),
              color 0.35s var(--u-ease) !important;
}

.elementskit-testimonial-slider .swiper-button-prev {
  left: calc(50% - 54px) !important;
  right: auto !important;
}

.elementskit-testimonial-slider .swiper-button-next {
  left: calc(50% + 10px) !important;
  right: auto !important;
}

.elementskit-testimonial-slider .swiper-navigation-button i,
.elementskit-testimonial-slider .swiper-navigation-button svg,
.elementskit-testimonial-slider .swiper-navigation-button::after {
  display: none !important;
}

/* ElementsKit hides this pseudo-element with a more specific rule, hence
   the extra class in the selector and !important. */
.ekit-wid-con .elementskit-testimonial-slider .swiper-navigation-button::before {
  content: "" !important;
  display: block !important;
  width: 8px;
  height: 8px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.elementskit-testimonial-slider .swiper-button-prev::before {
  transform: translateX(2px) rotate(45deg);
}

.elementskit-testimonial-slider .swiper-button-next::before {
  transform: translateX(-2px) rotate(-135deg);
}

.elementskit-testimonial-slider .swiper-navigation-button:hover {
  background: var(--u-ink) !important;
  border-color: var(--u-ink) !important;
  color: var(--u-on-ink) !important;
}

/* Tablets and phones show one or two cards with only 10px between them: the
   carousel's side padding must stay below that, or the neighbouring cards
   show as slivers at the edges. */
@media (max-width: 1023px) {
  .elementskit-testimonial-slider .ekit-main-swiper {
    padding-inline: 8px !important;
  }
}

/* On tablets the section runs edge to edge; give the row a gutter. */
@media (min-width: 768px) and (max-width: 1023px) {
  .elementskit-testimonial-slider {
    padding-inline: 12px;
  }
}

@media (max-width: 767px) {
  .elementskit-testimonial-slider .elementskit-single-testimonial-slider {
    padding: 24px 22px 20px !important;
  }

  /* No arrows on a phone (a swipe instead): keep room for the card's
     shadow, not the 92px the arrows take. */
  .elementskit-testimonial-slider .ekit-main-swiper {
    padding-bottom: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementskit-testimonial-slider .elementskit-single-testimonial-slider,
  .u-review-dialog[open] {
    transition: none !important;
    animation: none !important;
  }
}

/* The full review, opened from "Read full review". */
.u-review-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  border: 1px solid var(--u-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf9 0%, var(--u-card) 100%);
  color: var(--u-text);
  box-shadow: 0 50px 90px -40px rgba(39, 28, 8, 0.5);
  overflow: hidden;
}

.u-review-dialog[open] {
  animation: u-dialog-in 0.5s var(--u-ease);
}

@keyframes u-dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}

.u-review-dialog::backdrop {
  background: rgba(42, 33, 24, 0.34);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.u-review-dialog .u-review-inner {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  padding: 36px 36px 30px;
}

.u-review-dialog .u-review-mark {
  height: 0.38em;
  margin: 0 0 12px -4px;
  font-family: var(--v2-display);
  font-size: 5.6rem;
  line-height: 0.82;
  color: var(--u-gold);
  opacity: 0.5;
}

.u-review-dialog .u-review-text {
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--u-rule);
  font-family: var(--v2-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--u-text);
}

.u-review-dialog .u-review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.u-review-dialog .u-review-close,
.u-review-dialog .u-review-close:hover,
.u-review-dialog .u-review-close:focus {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.3s var(--u-ease), border-color 0.3s var(--u-ease);
}

.u-review-dialog .u-review-close:hover {
  background: rgba(216, 190, 138, 0.18) !important;
  border-color: var(--u-gold-soft) !important;
}

.u-review-dialog .u-review-close::before,
.u-review-dialog .u-review-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--u-head);
  translate: -50% -50%;
  rotate: 45deg;
}

.u-review-dialog .u-review-close::after {
  rotate: -45deg;
}

.u-review-dialog .u-review-close:focus-visible {
  outline: 2px solid var(--u-gold-deep) !important;
  outline-offset: 3px;
}

html:has(.u-review-dialog[open]) {
  overflow: hidden;
}

/* ---------------------------------------------------------- pricing tables */

.eael-pricing .eael-pricing-item {
  padding: clamp(26px, 2.6vw, 38px) clamp(20px, 2vw, 30px) !important;
}

.eael-pricing .eael-pricing-item .header::after,
.eael-pricing.eael-header-devider .header::after {
  background: var(--u-line) !important;
}

.eael-pricing .price-tag,
.eael-pricing .price-tag *,
.eael-pricing .price-period {
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  color: var(--u-gold-text) !important;
}

.eael-pricing .price-tag {
  font-size: clamp(2rem, 2.8vw, 2.6rem) !important;
}

.eael-pricing .body li,
.eael-pricing .body li span {
  color: var(--u-text) !important;
  font-size: var(--u-fs-body) !important;
}

/* "Limited offer" ribbon */
.eael-pricing-item.ribbon-4::before {
  background: var(--u-gold-deep) !important;
  color: var(--u-on-ink) !important;
  box-shadow: none !important;
  font-family: var(--v2-body) !important;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------- fun facts */

.elementskit-funfact {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.elementskit-funfact .number-percentage-wraper,
.elementskit-funfact .number-percentage-wraper * {
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  color: var(--u-gold-text) !important;
}

.elementskit-funfact .funfact-title {
  color: var(--u-text) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- carousel */

.elementor-widget-image-carousel .swiper-pagination-bullet {
  background: var(--u-gold) !important;
  opacity: 0.3;
}

.elementor-widget-image-carousel .swiper-pagination-bullet-active {
  opacity: 1;
}

.elementor-widget-image-carousel .elementor-swiper-button,
.elementor-widget-image-carousel .elementor-swiper-button svg {
  color: var(--u-gold-text) !important;
  fill: var(--u-gold-text) !important;
}

/* ------------------------------------------------------------------- blog  */

/* The archive card is the inner element (the article around it carries
   Astra's gutter): drawn with the other boxes, under "cards". */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
  border: 0 !important;
}

.entry-meta,
.entry-meta *,
.ast-blog-meta-container,
.ast-blog-meta-container *,
.ast-taxonomy-container a {
  color: var(--u-mute) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em;
}

.ast-excerpt-container,
.ast-excerpt-container p {
  color: var(--u-text) !important;
}

.read-more a,
.ast-read-more-container a {
  color: var(--u-gold-text) !important;
}

/* ------------------------------------------------------------- scroll top */

#ast-scroll-top {
  background-color: var(--u-card) !important;
  border: 1px solid var(--u-line);
  box-shadow: var(--u-shadow-card);
  color: var(--u-gold-text) !important;
}

#ast-scroll-top svg,
#ast-scroll-top .ast-icon {
  fill: var(--u-gold-text) !important;
}

/* ------------------------------------------------------------------- hero  */
/* The hero no longer paints its own ground — it IS the ground — so its glow
   has to fade out before the section ends, or it would draw an edge. */

.v2-hero {
  background: transparent !important;
}

.v2-hero::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
}

.v2-cta .v2-btn--gold:hover {
  box-shadow: var(--u-shadow-btn) !important;
}

/* The one flourish: the italic word in metallic gold — the hero's, and the
   same device on the method page title. */
.v2-hero__title em,
.mx-intro__title em {
  background: var(--u-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--u-gold-text);
  /* Italic overhang would be clipped by the text box without the padding;
     the matching negative margin gives the space back, so punctuation after
     the word ("chart.") still sits tight against it. */
  padding-right: 0.08em;
  margin-right: -0.08em;
}

/* On a short word the gradient's pale highlight lands on the last letters
   and washes them out. Stretching the gradient moves the highlight past the
   end of the word, leaving a gold that only warms towards the tail. */
.mx-intro__title em {
  background-size: 165% 100%;
}

/* Scroll progress: gold only, the lavender end is retired with the rest. */
#sys-progress {
  background: var(--u-metal) !important;
  height: 1px !important;
}

/* ------------------------------------------------------------- cut-outs  */
/* No photo of a person sits in a rectangle any more (2026-09-25). The
   cut-outs come from tools/cutout.py; where a photo was cropped by its frame
   (every bust is cut at the chest) the bottom fades into the page instead of
   ending in a hard edge. The zodiac wheel is the one from the client's
   original WordPress hero, redrawn (tools/zodiac_wheel.py); it turns once
   every two and a half minutes — slow enough to feel like a sky, not a
   spinner. */

@keyframes u-spin {
  to { rotate: 360deg; }
}

/* The figure: glow, turning wheel, then the person in front. */
.v2-figure {
  margin: 0;
}

.v2-figure__stage {
  position: relative;
  isolation: isolate;
  /* The wheel is larger than the portrait and centred on the face, so it
     reaches above the photo; this keeps its top inside the section. */
  margin-top: 22%;
}

/* Glow and wheel are centred on his head (50% across, 36% down the stage) by
   NEGATIVE MARGINS, never by a translate/transform. The entrance animation
   (GSAP) owns this element's transform: it folds a CSS translate into its own
   pixel values, and anything that later resets them knocks the wheel off
   centre — which once dropped it 294px, under his chin. A margin in % is
   measured against the stage's width, which is also what the width is
   measured against, so half the width as a negative margin centres it
   exactly, at every size, whatever the animation does.
   tools/wheelcheck.js checks this with the animation running. */
.v2-figure__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 36%;
  width: 96%;
  margin: -48% 0 0 -48%;
  aspect-ratio: 1;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle, var(--u-glow-2) 0%, var(--u-glow-1) 38%, transparent 70%);
}

.v2-figure__wheel {
  --u-wheel: 128%;
  position: absolute;
  left: 50%;
  top: 36%;
  width: var(--u-wheel);
  margin: calc(var(--u-wheel) / -2) 0 0 calc(var(--u-wheel) / -2);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  /* Fade the wheel's lower half on the same line as the portrait fades, so
     no wheel shows through the dissolving shoulders. The mask sits on this
     still container; the <img> inside is what turns. */
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 80%);
}

.v2-figure__wheel img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  animation: u-spin 150s linear infinite;
}

/* Two fades, intersected: the bottom, where the photo was cropped at the
   chest, and the far left and right, where it cut through the shoulders. */
.v2-figure__person {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 64%, transparent 96%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 64%, transparent 96%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

/* The hero figure is larger than the old plate: the wheel needs room. It
   stands in the middle of its column, sized so its ring (1.28x the
   portrait) stays on the page now that the column reaches the page edge. */
.v2-hero__plate.v2-figure {
  width: min(78%, 460px);
}

@media (min-width: 901px) {
  .v2-hero__plate.v2-figure {
    justify-self: center;
  }
}

.v2-figure figcaption {
  margin-top: -2%;
  position: relative;
}

/* Elementor photos swapped for cut-outs. */
.u-cutout img:not(.u-wheelbox img) {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: none !important;
  filter: none !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--u-fade, 74%), transparent 99%);
  mask-image: linear-gradient(to bottom, #000 var(--u-fade, 74%), transparent 99%);
}

/* A cut-out is not a card, whatever the original block had behind it. */
.u-cutout.u-card,
.u-cutout.u-card:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Page heroes: the same wheel behind the portrait. */
.elementor-widget-image.u-wheel {
  position: relative;
  isolation: isolate;
  /* Room above the photo for the top of the wheel. */
  margin-top: clamp(36px, 5vw, 76px) !important;
}

/* Centred by negative margins, like the home wheel (see .v2-figure__wheel). */
.u-wheel .u-wheelbox {
  position: absolute;
  left: 50%;
  top: var(--u-wheel-y, 40%);
  width: var(--u-wheel-size, 108%);
  margin: calc(var(--u-wheel-size, 108%) / -2) 0 0 calc(var(--u-wheel-size, 108%) / -2);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 80%);
}

/* !important: Elementor's per-widget image width (e.g. 72%) would otherwise
   apply to the wheel too, shrinking it off-centre. */
.u-wheel .u-wheelbox img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  opacity: 0.85;
  animation: u-spin 150s linear infinite;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.elementor-widget-image.u-wheel > img {
  position: relative;
}

/* Where each page's portrait has its head. */
.elementor-element-cdd92ba { --u-wheel-y: 47%; --u-wheel-size: 100%; }   /* lavender: head low in frame */
.elementor-element-7aab8e0,
.elementor-element-2a24e4a { --u-wheel-y: 36%; --u-wheel-size: 96%; --u-fade: 80%; }

/* ----------------------------------------------------------------- photos */
/* Every photo other than the hero portraits is the original, with crisp,
   defined edges (2026-09-26, the client: they "didn't like how these images
   are mixing with the background, they want it as it was"). Blended edges
   and cut-out team photos were both tried and rejected; tools/v2_cutouts.py
   restores the original images. The carousel's photos trade Elementor's dark
   grey border for the site's gold hairline. */
.elementor-widget-image-carousel .swiper-slide-image {
  border: 1px solid var(--u-line) !important;
}

@media (max-width: 900px) {
  /* Centred on a phone, so the wheel has room on both sides. */
  .v2-hero__plate.v2-figure { width: min(100%, 300px); justify-self: center; }
  .ab-portrait.v2-figure { justify-self: center; }
  .v2-hero__plate.v2-figure figcaption { margin-inline: auto; text-align: center; }
  .v2-figure__wheel { --u-wheel: 118%; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-figure__wheel img,
  .u-wheel .u-wheelbox img {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------- the mix */
/* A mocha section paints its own ground and meets the beige page at a crisp,
   well-defined edge (2026-09-26, the client: "the borders of all the colours
   should be well defined". Soft dissolves were tried the same day and
   rejected). tools/v2_mix.py marks the sections:
     .u-flat-top / .u-flat-bottom   that edge touches the header, the footer
                                    or more mocha, so it needs no room
     body.u-mocha-end               the page ends on mocha: the footer joins it */

.u-mocha:not(.u-mocha-title),
.ekit-template-content-footer {
  background-color: var(--u-mocha) !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  color: var(--u-text);
}

/* Two mocha boxes meeting on a fractional pixel each cover only part of the
   shared row, and the beige page shows through the blend as a hairline (seen
   at 125% display scaling). A flat bottom paints 2px of mocha past its edge
   to cover that row. */
.u-mocha.u-flat-bottom:not(.u-mocha-title) {
  box-shadow: 0 2px 0 var(--u-mocha) !important;
}

/* Room around each colour edge: see "rhythm & type scale" at the end. */

/* Sections are full-bleed. The mx sections were centred boxes (max-width on
   the section itself); their content keeps that width, the colour doesn't. */
.mx-intro.u-mocha {
  max-width: none;
  padding-inline: max(var(--u-side), calc((100% - var(--u-wrap)) / 2));
}

/* The footer: a crisp edge under the page above; joins a page that ends on
   mocha. */
.ekit-template-content-footer {
  padding-top: clamp(24px, 3vw, 40px);
}

body.u-mocha-end .ekit-template-content-footer {
  margin-top: 0 !important;
}

/* The header sits on the mocha hero as one surface: no rule, no shadow,
   until the page scrolls and it has beige under it. */
#masthead {
  background-color: var(--u-mocha) !important;
  transition: box-shadow 0.4s var(--u-ease), border-color 0.4s var(--u-ease);
}

html:not(.sys-header-scrolled) #masthead {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

#masthead .main-header-menu > li > a:hover,
#masthead .ast-builder-menu a:hover,
#masthead .menu-link:hover,
#masthead .current-menu-item > a {
  color: var(--u-gold-text) !important;
}

/* The home hero's glow: behind the portrait, as in the mockup, never under
   the header (it would draw an edge there) or under the text (contrast). */
.v2-hero.u-mocha::before {
  inset: 0;
  height: auto;
  background: radial-gradient(44% 46% at 74% 40%, var(--u-glow-2), transparent 72%);
}

/* Stacked on a phone, the percentages put that glow behind the text: there
   the portrait keeps only its own halo (.v2-figure__stage::before). */
@media (max-width: 900px) {
  .v2-hero.u-mocha::before {
    background: none;
  }
}

/* The portrait's caption sits at the edge of that glow: set it a step
   lighter than other small mocha text so it keeps 4.5:1 there. */
.u-mocha .v2-hero__plate figcaption {
  color: #f8eddd !important;
}

/* Page heroes: the same soft glow behind the wheel. */
.u-mocha .u-wheelbox {
  background: radial-gradient(circle at 50% 50%, var(--u-glow-2) 0%, var(--u-glow-1) 38%, transparent 66%);
  border-radius: 50%;
}

/* Page title bands (blog, posts): the heading is a boxed element, so the
   mocha is drawn full-bleed behind it, starting under the header. */
.u-mocha-title {
  position: relative;
  isolation: isolate;
}

.u-mocha-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -600px;                                 /* under the opaque header: never seen */
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
  background: var(--u-mocha);
}


/* Review arrows sit on the mocha band itself (not on a card). */
.u-mocha .elementskit-testimonial-slider .swiper-navigation-button {
  background: transparent !important;
  border-color: var(--u-rule-strong) !important;
  color: var(--u-head) !important;
  box-shadow: none !important;
}

.u-mocha .elementskit-testimonial-slider .swiper-navigation-button:hover {
  background: var(--u-head) !important;
  border-color: var(--u-head) !important;
  color: var(--u-on-ink) !important;
}


/* ------------------------------------------------------------ page heroes */
/* The service and course pages open on a portrait whose studio ground is
   baked into the photo. Loose on the page it reads as a coloured rectangle,
   so it is set as a plate: the same offset gold rule as the home portrait. */

.elementor[data-elementor-type="wp-page"] > .e-con.e-parent:first-child .elementor-widget-image:not(.u-cutout) img {
  border-radius: 2px !important;
  outline: none !important;
  filter: saturate(0.84) contrast(1.02);
  box-shadow:
    16px 16px 0 -1px var(--u-ground),
    16px 16px 0 0 var(--u-frame) !important;
}

/* ------------------------------------------------------------ eyebrows    */
/* On the workshop page, buttons that go nowhere (href="#") were only ever
   section labels. They take the hero's eyebrow form, so every section label
   on the site looks the same (whatever follows them: a heading, or a row of
   boxes). Labels that sit beside a real button (the price) become a quiet
   outlined tag instead of a second gold button.

   Scoped to that page on purpose: elsewhere, "#" buttons are real calls to
   action ("Book Session", "Enroll Now") that were simply never linked, and
   they must keep looking like buttons. */

.page-id-1977 .elementor-widget-button:not(:has(+ .elementor-widget-button)):not(.elementor-widget-button + .elementor-widget-button) .elementor-button[href="#"] {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--u-gold-text) !important;
  font-size: clamp(0.66rem, 0.76vw, 0.74rem) !important;
  letter-spacing: 0.32em !important;
  cursor: default;
  gap: 14px;
}

.page-id-1977 .elementor-widget-button:not(:has(+ .elementor-widget-button)):not(.elementor-widget-button + .elementor-widget-button) .elementor-button[href="#"]::after {
  content: "";
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, var(--u-gold), transparent);
}

.page-id-1977 .elementor-button[href="#"] {
  background: transparent !important;
  color: var(--u-gold-text) !important;
  border-color: var(--u-gold-soft) !important;
  cursor: default;
}

.page-id-1977 .elementor-button[href="#"]:hover {
  transform: none !important;
  background: transparent !important;
  color: var(--u-gold-text) !important;
}

/* Name correction: the one section title on the page set flush left while
   the others are centred. */
.elementor-element-f19df04 .elementor-heading-title {
  text-align: center !important;
}

/* Name correction: text set to a different alignment from the headings
   above it. The hero's paragraph sat flush left under two centred headings;
   on a phone, one paragraph in each closing column was centred under a
   flush-left heading and paragraph. One alignment per block. */
.elementor-element-d9afeac {
  text-align: center !important;
}

@media (max-width: 767px) {
  .elementor-element-9fab44c,
  .elementor-element-3c506d7 {
    text-align: left !important;
  }
}

/* --------------------------------------------------------- blog archive   */

.ast-article-post .post-content,
.ast-article-post .ast-blog-featured-section {
  background: transparent !important;
}

.ast-article-post .ast-article-inner {
  padding-bottom: 8px;
}


.ast-article-post .post-thumb-img-content img {
  border-radius: var(--u-radius) var(--u-radius) 0 0;
}

/* --------------------------------------------------------- masterclass    */

/* Countdown digits: hairline cells, gold figures. */
.eael-countdown-items .eael-countdown-item > div {
  background: transparent !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 2px !important;
}

.eael-countdown-items .eael-countdown-digits {
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  color: var(--u-gold-text) !important;
}

.eael-countdown-items .eael-countdown-label {
  color: var(--u-mute) !important;
}

/* The "Limited offer" ribbon crosses the top-right corner: the title keeps
   clear of it (on narrow cards it ran under the ribbon). */
.eael-pricing-item[class*="ribbon-"] .header .title {
  padding-inline: 48px !important;
}

/* The pricing card's top strip was the only green on the site. */
.eael-pricing-item[class*="ribbon-1"]::before {
  background: var(--u-metal) !important;
}

/* Three single-line icon lists stand in for section headings on this page.
   Set them as headings, so they match every other section title. */
[data-elementor-type="wp-page"] .u-t-section .elementor-icon-list-text {
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  color: var(--u-head) !important;
  letter-spacing: -0.01em;
}

[data-elementor-type="wp-page"] .u-t-section .elementor-icon-list-icon {
  display: none !important;
}

.profile-card .profile-body,
.profile-card .profile-content,
.profile-card .profile-content p {
  color: var(--u-text) !important;
}

.profile-card .profile-designation {
  color: var(--u-mute) !important;
}

.profile-card .profile-header,
.profile-card .profile-body {
  border-color: var(--u-rule) !important;
}

/* ------------------------------------------------------------ home: about */
/* The founder's quote, set the way the About page sets it: a serif
   pull-quote in gold rather than bold italic sans. */

.elementor-element-954b1ed em,
.elementor-element-954b1ed strong {
  font-family: var(--v2-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem) !important;
  line-height: 1.35 !important;
  color: var(--u-gold-text) !important;
}

/* The block, recomposed (2026-09-25, user: "the title and everything is just
   on the left side and it's looking odd"). Elementor stacked the name, roles,
   quote AND the photo in the left column, and pushed the bio 189px down the
   right one: a crowded left side against an empty top-right. Now the photo
   stands on the left, and the name, roles, quote and bio read as one block on
   the right, centred against the photo. Same widgets, same words, same order
   in the markup: layout only. */

@media (min-width: 900px) {
  .elementor-element-ec3d937 > .e-con-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    /* The photo stands exactly as tall as the words beside it: the name
       level with its top, the bio's last line with its bottom (2026-09-28,
       the user: "everything from his name at the top to everything about
       him should be at the same height as the image"). The words set the
       height; the photo fills it (below). */
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "photo name"
      "photo quote"
      "photo bio";
    column-gap: clamp(40px, 5.5vw, 96px);
    align-items: start;
  }

  /* The left column's own box steps aside, so its three widgets can be
     placed on the grid one by one. */
  .elementor-element-e1431c0 {
    display: contents !important;
  }

  .elementor-element-29767b4 {
    grid-area: photo;
    align-self: stretch;
    position: relative;
    min-height: 0;
  }

  /* Out of the flow, so it takes the words' height instead of setting its
     own; cropped to fit, his face kept in view. */
  .elementor-element-29767b4 img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: 46% 26%;
  }

  .elementor-element-e9b348a { grid-area: name; }
  .elementor-element-954b1ed { grid-area: quote; }
  .elementor-element-259c29e { grid-area: bio; }

  /* Level by the letters, not the line boxes: the name's capitals with the
     photo's top edge (a line keeps some room above its capitals), the bio's
     last line with its bottom edge (and some below its letters). */
  .elementor-element-ec3d937 .elementor-element-e9b348a h3.elementor-heading-title {
    margin-top: -0.18em !important;
  }

  .elementor-element-ec3d937 .elementor-element-259c29e {
    margin-bottom: -4px !important;
  }
}

/* "About the Founder" sits higher: nearer the line above it, with room of
   its own over the name and photo (they line up at the photo's top edge, so
   the title stood almost on them). 2026-09-28, the user: "place about the
   founder a little upward". */
[data-elementor-type="wp-page"] > .e-con.u-opens.elementor-element-cd5abe8 {
  --padding-top: clamp(12px, 1.3vw, 20px) !important;
}

[data-elementor-type="wp-page"] > .e-con.u-led.elementor-element-ec3d937 {
  --padding-top: clamp(22px, 2.3vw, 36px) !important;
}

/* What Elementor set for the old arrangement: the photo at 140% of its
   column, pulled up 30px; the bio 189px down with a 60px right gutter. */
.elementor-element-29767b4 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Narrower than the grid: one column, in reading order. (Placed after the
   resets above on purpose — same specificity, so the later rule wins.) */
@media (max-width: 899px) {
  .elementor-element-ec3d937 > .e-con-inner {
    flex-direction: column !important;
  }

  .elementor-element-e1431c0 {
    --width: 100%;
    width: 100% !important;
  }

  /* One left edge for name, quote and bio: Elementor padded the left column
     but not the right, so the bio sat 10px outside the text above it. */
  .elementor-element-ec3d937 {
    padding-inline: 20px !important;
  }

  .elementor-element-e1431c0,
  .elementor-element-259c29e {
    padding-inline: 0 !important;
  }

  .elementor-element-29767b4 {
    max-width: 520px !important;
    margin: clamp(8px, 3vw, 20px) auto !important;
  }
}

.elementor-element-259c29e {
  --width: 100%;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-element-bcdff0d {
  margin: 0 !important;
  padding: 0 !important;
}

/* The bio ran as one wall of text: its paragraphs had no space between. */
.elementor-element-bcdff0d p {
  margin-block-end: 0.9em !important;
}

.elementor-element-bcdff0d p:last-child {
  margin-block-end: 0 !important;
}

.elementor-element-e9b348a,
.elementor-element-954b1ed {
  text-align: left !important;
}

.elementor-element-954b1ed {
  margin: clamp(14px, 1.6vw, 22px) 0 clamp(18px, 2.2vw, 28px) !important;
}

/* Name, then roles: the name large in the display serif, the roles under it
   in the same small spaced caps as the About page. (They were one heading,
   the name styled through ::first-line, which Safari loses once the
   entrance animation splits the heading: the name came out small and gold.
   tools/v2_founder.py made them two elements.) */
.site-content .elementor-widget-heading.elementor-element-e9b348a h3.elementor-heading-title {
  font-family: var(--v2-display) !important;
  font-size: var(--u-fs-section) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  text-shadow: none !important;
  color: var(--u-head) !important;
}

.elementor-element-e9b348a .u-founder-roles {
  margin: clamp(10px, 1vw, 14px) 0 0 !important;
  font-family: var(--v2-body);
  font-size: clamp(0.72rem, 0.8vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--u-gold-text);
}

/* ------------------------------------------------ about + method pages   */
/* These pages were hand-built before this layer existed and painted their
   own ground. Now: the one ground, and the closing CTA sits on the same
   tinted band as the testimonials, between two rules. */

.mx {
  background: transparent !important;
}

.mx-cta-band:not(.u-mocha) {
  background: var(--u-band) !important;
  border-top: 1px solid var(--u-rule) !important;
  border-bottom: 1px solid var(--u-rule);
}

/* On a phone the method chart pins to the top of the screen — which is now
   where the sticky header lives. Pin it just below the header instead. */
@media (max-width: 960px) {
  /* A full-width strip, so the text scrolling underneath is hidden rather
     than peeking out either side of the chart. */
  .mx-chartcol {
    top: 81px !important;
    max-width: none !important;
    margin-inline: calc(-1 * var(--v2-gutter)) !important;
    padding-inline: var(--v2-gutter) !important;
    background: var(--u-ground) !important;
    border-bottom: 1px solid var(--u-rule);
  }

  .mx-chartcol > * {
    max-width: 260px;
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------- phones   */
/* Two blocks in the original were wider than a phone (an image fixed at
   481px, a container nudged 25px sideways), so the whole page could be
   dragged sideways — the opposite of smooth. Fix the blocks, and clip the
   page edge as a guarantee. `clip`, not `hidden`: hidden would turn the page
   into a scroll container and silently break the sticky header. */

html,
body {
  overflow-x: clip;
}

@media (max-width: 767px) {
  .elementor-widget-image,
  .elementor-widget-image img,
  .e-con {
    max-width: 100% !important;
  }

  /* Home founder bio: the column and its text carried sideways margins
     (15px and -14px) that pushed the first letters off-screen. */
  .elementor-element-259c29e {
    width: 100% !important;
    margin-inline: 0 !important;
  }

  .elementor-element-bcdff0d {
    margin-inline: 0 !important;
  }

  /* Plate offset is scaled down so the frame still fits beside the photo. */
  .elementor[data-elementor-type="wp-page"] > .e-con.e-parent:first-child .elementor-widget-image:not(.u-cutout) img {
    box-shadow:
      10px 10px 0 -1px var(--u-ground),
      10px 10px 0 0 var(--u-frame) !important;
  }
}

/* ------------------------------------------------------------------ lists */

.elementor-widget-text-editor li::marker,
.type-post .entry-content li::marker {
  color: var(--u-gold-text);
}

/* ======================================================= rhythm & type scale */
/* (2026-09-26, the client: "so many blank spaces around everywhere... find all
   those places and fix them all... make sure all the bodies have same font and
   headings have same font and size too".)

   SPACING. Elementor spaced every block by hand: a padding here, a margin
   there, a minimum height with the content centred inside it, a default 10px
   on every nested container. Measured, the gap between two sections ran from
   60px to 300px. Now containers and widgets carry no spacing of their own and
   the page has one rhythm, from the tokens at the top of this file:
     --u-sec-pad    each section's top and bottom (so blocks sit twice apart)
     --u-open-pad   the top of a section that opens a new topic (u-opens)
     --u-lead-gap   a title-only section to the section it introduces
     --u-edge       content to a mocha/beige colour edge (--u-edge-out is the
                    part of that room outside the mocha section)
     --u-stack      one widget to the next inside a section
   tools/v2_rhythm.js marks title-only sections (u-lead / u-led), rows of
   boxes and image-beside-text rows; tools/v2_mix.py marks mocha sections.

   TYPE. One scale by role rather than by tag (the same kind of heading had
   come in up to seven sizes): page title, section title, sub-heading, box
   title, list-item title, numeral, all Instrument Serif; every paragraph one
   size of Montserrat. tools/v2_rhythm.js records each heading's role in the
   markup (u-t-*). tools/rhythm.js and tools/typeaudit.js measure the result. */

/* Containers carry no spacing of their own... (zero specificity, so every
   deliberate rule in this file still wins) */
:where([data-elementor-type="wp-page"] .e-con) {
  --padding-top: 0px !important;
  --padding-bottom: 0px !important;
  --margin-top: 0px !important;
  --margin-bottom: 0px !important;
  --min-height: 0px !important;
}

:where([data-elementor-type="wp-page"] .e-con.e-child:not(.u-card)) {
  --padding-left: 0px !important;
  --padding-right: 0px !important;
}

/* ...nor do widgets: one gap between them instead. (A widget styled as a
   box keeps the padding inside it.) */
:where([data-elementor-type="wp-page"] .elementor-widget) {
  margin-block: 0 !important;
}

:where([data-elementor-type="wp-page"] .elementor-widget:not(.u-card)) {
  padding-block: 0 !important;
}

/* ...nor side margins: Elementor's hand-set offsets (a list pushed 100px
   in, section intros held to the left 60% by a 425px margin, boxes inset
   10-20px further than the rest of the page on a phone) all go, and the
   column sets the width. Hero blocks keep theirs: they place the portrait. */
:where([data-elementor-type="wp-page"] > .e-con:not(.u-flat-top), [data-elementor-type="wp-page"] .u-card) :where(.elementor-widget, .e-con) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

:where([data-elementor-type="wp-page"]) :is(.e-con-full, .e-con > .e-con-inner) {
  row-gap: var(--u-stack) !important;
}

/* Sections. */
[data-elementor-type="wp-page"] > .e-con {
  --padding-top: var(--u-sec-pad) !important;
  --padding-bottom: var(--u-sec-pad) !important;
}

/* A new topic gets a larger step before it than a block continuing one. */
[data-elementor-type="wp-page"] > .e-con.u-opens {
  --padding-top: var(--u-open-pad) !important;
}

[data-elementor-type="wp-page"] > .e-con.u-lead {
  --padding-bottom: 0px !important;
}

[data-elementor-type="wp-page"] > .e-con.u-led {
  --padding-top: var(--u-lead-gap) !important;
}

/* A mocha section: room inside each colour edge, and the rest of it outside. */
[data-elementor-type="wp-page"] > .e-con.u-mocha {
  --padding-top: var(--u-edge) !important;
  --padding-bottom: var(--u-edge) !important;
  --margin-top: var(--u-edge-out) !important;
  --margin-bottom: var(--u-edge-out) !important;
}

/* Under the header, or under more mocha: no edge to clear above. */
[data-elementor-type="wp-page"] > .e-con.u-mocha.u-flat-top {
  --padding-top: var(--u-hero-top) !important;
  --margin-top: 0px !important;
}

/* Above more mocha, or the footer. */
[data-elementor-type="wp-page"] > .e-con.u-mocha.u-flat-bottom {
  --padding-bottom: var(--u-sec-pad) !important;
  --margin-bottom: 0px !important;
}

/* A section with nothing in the flow (empty, or holding only the floating
   WhatsApp button) takes no room. */
[data-elementor-type="wp-page"] > .e-con:not(:has(.elementor-widget:not(.elementor-fixed))) {
  --padding-top: 0px !important;
  --padding-bottom: 0px !important;
  --margin-top: 0px !important;
  --margin-bottom: 0px !important;
}

/* A row of boxes continuing the row above it: one grid gap between. */
[data-elementor-type="wp-page"] > .e-con.u-joins {
  --padding-top: 0px !important;
}

/* Slim offer and countdown bars. */
[data-elementor-type="wp-page"] > .e-con.u-bar,
[data-elementor-type="wp-page"] > .e-con.u-mocha.u-bar {
  --padding-top: 10px !important;
  --padding-bottom: 10px !important;
}

/* The same rhythm on the hand-built sections. */
.v2-hero.u-mocha {
  padding-bottom: var(--u-edge) !important;
  margin-bottom: var(--u-edge-out) !important;
}

.mx-intro.u-mocha {
  padding-top: var(--u-hero-top) !important;
  padding-bottom: var(--u-edge) !important;
  margin-bottom: var(--u-edge-out) !important;
}

.mx-intro.u-mocha.u-flat-bottom {
  padding-bottom: var(--u-sec-pad) !important;
  margin-bottom: 0 !important;
}

.mx-cta-band.u-mocha {
  padding-top: var(--u-edge) !important;
  padding-bottom: var(--u-sec-pad) !important;
  margin-top: var(--u-edge-out) !important;
}

.ab-body {
  padding-top: var(--u-sec-pad) !important;
  padding-bottom: var(--u-sec-pad) !important;
}

.mx-stage {
  padding-bottom: var(--u-sec-pad) !important;
}

.mx-steps {
  gap: clamp(36px, 5vh, 56px) !important;
}

@media (max-width: 767px) {
  .mx-steps {
    gap: 32px !important;
  }
}

/* The outcome sits in the list of steps: one step below the last (the gap
   between steps), then its rule. */
.mx-outcome {
  margin-top: 0 !important;
  padding-top: clamp(20px, 2.6vh, 28px) !important;
}

.ab-bio p:last-child {
  margin-bottom: 0 !important;
}

/* Blog post: the comment form one step after the article, and the standard
   room before the footer (Astra stacked 164px of padding and margin there).
   Its width: "page width". */
.single-post .ast-article-single {
  padding-bottom: 0 !important;
}

.single-post #comments {
  margin-top: var(--u-open-pad) !important;
  padding-bottom: 0 !important;
}

.single-post .comment-respond {
  padding: 0 !important;
}

.single-post #comments {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.single-post #primary {
  margin-bottom: var(--u-sec-pad) !important;
}

/* Blog archive: the title on the cards' left edge, the standard room before
   the footer. Its width: "page width". */
.blog .v2-pagetitle {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.blog #primary {
  margin-bottom: 0 !important;
}

/* On a phone: the archive card inside no second gutter (Astra's 15px), and
   no extra padding before the footer. */
@media (max-width: 767px) {
  .blog .ast-row > .ast-article-post {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  :is(.blog, .single-post) #primary {
    padding-bottom: 0 !important;
  }
}

/* One post so far: a wide feature, picture beside the text, rather than
   one narrow card beside two empty columns. */
@media (min-width: 768px) {
  .blog .ast-row > .ast-article-post:only-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .blog .ast-article-post:only-child .ast-article-inner {
    padding: clamp(20px, 2vw, 28px) !important;
  }

  .blog .ast-article-post:only-child .post-content {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    grid-template-rows: 1fr repeat(4, auto) 1fr;
    column-gap: clamp(28px, 3.2vw, 48px);
  }

  .blog .ast-article-post:only-child .ast-blog-featured-section {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0 !important;
  }

  .blog .ast-article-post:only-child .post-thumb-img-content {
    margin: 0 !important;
  }

  .blog .ast-article-post:only-child .post-thumb-img-content img {
    border-radius: var(--u-radius);
  }

  .blog .ast-article-post:only-child .ast-taxonomy-container { grid-column: 2; grid-row: 2; }
  .blog .ast-article-post:only-child .entry-title { grid-column: 2; grid-row: 3; font-size: var(--u-fs-sub) !important; }
  .blog .ast-article-post:only-child .ast-blog-meta-container { grid-column: 2; grid-row: 4; }
  .blog .ast-article-post:only-child .ast-excerpt-container { grid-column: 2; grid-row: 5; }

  .blog .ast-article-post:only-child .entry-content {
    display: none;
  }
}

.u-mocha-title {
  padding-bottom: var(--u-edge) !important;
  margin-bottom: var(--u-edge-out) !important;
}

/* Paragraphs: one step between them, none after the last. */
[data-elementor-type="wp-page"] .elementor-widget-text-editor :is(p, ul, ol) {
  margin: 0 0 0.85em !important;
}

[data-elementor-type="wp-page"] .elementor-widget-text-editor :is(p, ul, ol):last-child {
  margin-bottom: 0 !important;
}

/* Reading columns use the full content width. */
.ab-bio,
.mx-step__b {
  max-width: none !important;
}

/* Rows of boxes: equal columns across the full width, one gap (tablet and
   up; a phone stacks them). On a tablet, four in a row go two by two. */
@media (min-width: 768px) {
  .u-card-row.e-con-full,
  .u-card-row > .e-con-inner {
    column-gap: var(--u-grid-gap) !important;
    row-gap: var(--u-grid-gap) !important;
    flex-wrap: nowrap !important;
  }

  .u-card-row.e-con-full > :is(.e-con, .elementor-widget):not(.elementor-absolute, .elementor-fixed),
  .u-card-row > .e-con-inner > :is(.e-con, .elementor-widget):not(.elementor-absolute, .elementor-fixed) {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :is(.u-card-row.e-con-full, .u-card-row > .e-con-inner):has(> :nth-child(4)) {
    flex-wrap: wrap !important;
  }

  :is(.u-card-row.e-con-full, .u-card-row > .e-con-inner):has(> :nth-child(4)) > :is(.e-con, .elementor-widget):not(.elementor-absolute, .elementor-fixed) {
    flex: 1 1 calc(50% - var(--u-grid-gap)) !important;
  }
}

/* Two buttons on a two-column grid sat a whole column apart: side by side
   instead, one gap between. */
:is(.e-grid.e-con-full, .e-grid > .e-con-inner):not(:has(> :not(.elementor-widget-button, .elementor-widget-elementskit-button))) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 16px !important;
}

/* Text beside its button in a box: the text takes the room, the button
   sits at the end (it sat centred in a half-width column). */
@media (min-width: 768px) {
  :is(.e-grid.e-con-full, .e-grid > .e-con-inner):has(> .elementor-widget-button:nth-child(2):last-child):has(> :first-child:not(.elementor-widget-button)) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
    column-gap: var(--u-grid-gap) !important;
  }
}

/* A grid with more preset rows than items (Elementor presets two equal
   rows): rows fit the items, instead of an empty row as tall as a full one. */
.u-grid-fit.e-con-full,
.u-grid-fit > .e-con-inner {
  grid-template-rows: none !important;
}

/* Empty columns the author used to centre a box: gone; what is left stays
   centred. A box left alone in its row takes the full width, its list in
   two columns so it does not read sparse. (tools/v2_rhythm.js marks both.) */
.u-spacer {
  display: none !important;
}

:is(.e-con-full, .e-con > .e-con-inner):has(> .u-spacer) {
  justify-content: center !important;
}

.u-solo.e-con {
  --width: 100% !important;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100% !important;
  margin-inline: 0 !important;
}

.u-solo > :is(.elementor-widget-button, .elementor-widget-elementskit-button) {
  align-self: center !important;
  width: min(100%, 340px) !important;
}

@media (min-width: 768px) {
  .u-solo .elementor-icon-list-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--u-grid-gap);
  }
}

/* Columns side by side: a real gutter between them, the columns keeping
   their proportions (Elementor's only gutter was 10px of padding inside each
   column). Desktop only: below that, Elementor stacks them. */
@media (min-width: 1025px) {
  .u-col-row.e-con-full,
  .u-col-row > .e-con-inner {
    column-gap: var(--u-col-gap) !important;
    flex-wrap: nowrap !important;
  }

  :is(.u-col-row.e-con-full, .u-col-row > .e-con-inner) > .e-con {
    flex: 0 1 var(--width, 50%) !important;
    min-width: 0 !important;
  }

  :is(.u-col-row.e-con-full, .u-col-row > .e-con-inner) > .u-col-rest {
    flex: 1 1 0% !important;
  }
}

/* Heroes on a tablet: the text column ran right up to (on the consultation
   page, under) the zodiac ring beside it. A gutter between the columns. */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-elementor-type="wp-page"] > .e-con.u-flat-top:not(.u-bar) > .e-con-inner {
    column-gap: 48px !important;
  }

  [data-elementor-type="wp-page"] > .e-con.u-flat-top:not(.u-bar) > .e-con-inner > .e-con {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* Offer bars on a tablet: their columns have fixed widths (950px on the
   workshop, 855px on the masterclass) wider than the screen, which pushed
   "Register Now" out of sight. They share the width instead. */
@media (min-width: 768px) and (max-width: 1024px) {
  .u-bar > .e-con-inner > .e-con,
  .u-bar.e-con-full > .e-con {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* The workshop hero on a tablet: beside the picture its three feature
   boxes had about 90px each, and words ran out of them. Stacked as on a
   phone, the picture kept to a sensible size. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-f387a3f > .e-con-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: var(--u-col-gap) !important;
  }

  .elementor-element-f387a3f > .e-con-inner > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-element-f387a3f > .e-con-inner > .elementor-element-464cf3a {
    max-width: 480px !important;
    align-self: center !important;
  }
}

/* Stacked (tablet, phone), two topics side by side become two blocks one
   under the other: the gutter between them, not the gap between lines of
   one block. Lists split over two columns (their items are u-t-item) stay
   one continuous list. */
@media (max-width: 1024px) {
  :is(.u-col-row.e-con-full, .u-col-row > .e-con-inner):not(:has(.u-t-item)) {
    row-gap: var(--u-col-gap) !important;
  }
}

/* Image beside text: the image takes 40%, the text column the rest (desktop;
   below that, Elementor stacks them). */
@media (min-width: 1025px) {
  .u-media-row.e-con-full,
  .u-media-row > .e-con-inner {
    column-gap: var(--u-col-gap) !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .u-media-row .u-media {
    flex: 0 0 40% !important;
    width: 40% !important;
    max-width: 40% !important;
    margin-inline: 0 !important;
  }

  .u-media-row .u-fill {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  .u-media-row .u-media img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Type scale, by role. */
[data-elementor-type="wp-page"] .u-t-title :is(.elementor-heading-title, .elementor-icon-box-title),
.v2-hero__title,
.mx-intro__title,
.v2-pagetitle,
.single-post .entry-header .entry-title {
  font-size: var(--u-fs-title) !important;
  line-height: 1.05 !important;
}

[data-elementor-type="wp-page"] .u-t-section :is(.elementor-heading-title, .elementor-icon-box-title, .elementor-icon-list-text),
.mx-cta-band h2 {
  font-size: var(--u-fs-section) !important;
  line-height: 1.12 !important;
}

[data-elementor-type="wp-page"] .u-t-sub :is(.elementor-heading-title, .elementor-icon-box-title, h1, h2, h3, h4, h5, h6),
.mx-step__h,
.type-post .entry-content :is(h2, h3, h4),
.comment-reply-title {
  font-size: var(--u-fs-sub) !important;
  line-height: 1.2 !important;
}

[data-elementor-type="wp-page"] .u-t-card :is(.elementor-heading-title, .elementor-icon-box-title, .title, .profile-title),
.ast-article-post .entry-title {
  font-size: var(--u-fs-card) !important;
  line-height: 1.2 !important;
}

[data-elementor-type="wp-page"] .u-t-item :is(.elementor-heading-title, .elementor-icon-box-title),
.elementskit-accordion .ekit-accordion-title {
  font-size: var(--u-fs-item) !important;
  line-height: 1.3 !important;
}

[data-elementor-type="wp-page"] .u-t-num .elementor-heading-title,
.mx-step__n {
  font-size: var(--u-fs-num) !important;
  line-height: 1 !important;
  color: var(--u-gold-text) !important;
}

/* A heading widget the author used as a paragraph: set as body text. */
[data-elementor-type="wp-page"] .u-t-para .elementor-heading-title {
  font-family: var(--v2-body) !important;
  font-size: var(--u-fs-body) !important;
  font-weight: 600 !important;
  line-height: var(--u-lh-body) !important;
  letter-spacing: 0 !important;
  color: var(--u-strong) !important;
}

/* Body text: one size everywhere. */
[data-elementor-type="wp-page"] :is(.elementor-widget-text-editor, .elementor-icon-box-description, .elementor-image-box-description, .elementor-icon-list-text, .profile-body, .profile-content),
.type-post .entry-content :is(p, li),
.ab-bio p,
.mx-step__b,
.ast-excerpt-container p {
  font-size: var(--u-fs-body) !important;
  line-height: var(--u-lh-body) !important;
}

/* A hero's paragraph is its lede: one step up. */
.v2-hero__lede,
.mx-intro__lede,
[data-elementor-type="wp-page"] > .e-con.u-mocha.u-flat-top:not(.u-bar) .elementor-widget-text-editor:not(.u-card .elementor-widget-text-editor) {
  font-size: var(--u-fs-lede) !important;
}

/* The blog's category link was the one piece of text still in the system
   font. */
.ast-taxonomy-container,
.ast-taxonomy-container a,
.ast-blog-meta-container,
.ast-blog-meta-container * {
  font-family: var(--v2-body) !important;
}

/* A box that only frames a picture is not a box (the picture has its own
   frame); a stretched empty frame beside tall text read as blank space. */
.u-plain {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
}

.u-plain::after {
  display: none !important;
}

/* Bordered blocks inside a box: soft corners and the gold hairline, not
   Elementor's square outline. */
.u-card .elementor-widget:not(.elementor-widget-button):not(.elementor-widget-divider) {
  border-color: var(--u-line) !important;
  border-radius: 12px !important;
}

/* Team / success-story cards: each fills its column, so a row is even, with
   tighter spacing inside. */
.e-con:has(> .elementor-widget-elementskit-team) {
  align-self: stretch !important;
}

/* Each layer grows to fill the one around it (a percentage height does not
   resolve inside a flexed parent, so it is flex all the way down). */
.elementor-widget-elementskit-team,
.elementor-widget-elementskit-team > .elementor-widget-container,
.elementor-widget-elementskit-team .ekit-wid-con {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column;
}

.elementor-widget-elementskit-team .profile-card {
  flex: 1 1 auto;
}

.profile-card {
  padding: clamp(22px, 2vw, 28px) !important;
}

.profile-card .profile-header {
  padding: 0 0 16px !important;
  margin: 0 0 16px !important;
}

.profile-card .profile-body {
  padding: 0 !important;
}

/* ================================================================ page width */
/* (2026-09-26, the client: "the words should go from end to end of the page",
   and of the blog post "there are so much space left on both the sides".)
   On a laptop the content sat in a 1140px column with ~190px empty either
   side (the blog post in 700px, with ~400px either side), and each Elementor
   block had a width of its own, 1017px to 1319px. Now every part of every
   page shares one width: the screen less a side margin (--u-side) at each
   edge, up to --u-wrap on very wide screens. */

/* Elementor blocks: the page and the footer. */
.e-con {
  --container-max-width: var(--u-wrap) !important;
  --content-width: min(100%, var(--u-wrap)) !important;
}

.elementor > .e-con {
  padding-left: var(--u-side) !important;
  padding-right: var(--u-side) !important;
}

/* Full-width blocks have no inner box to hold the width: their padding
   does. */
.elementor > .e-con.e-con-full {
  padding-left: max(var(--u-side), calc((100% - var(--u-wrap)) / 2)) !important;
  padding-right: max(var(--u-side), calc((100% - var(--u-wrap)) / 2)) !important;
}

/* The header (the desktop and the phone/tablet one), and the blog's pages
   (Astra's containers). */
#masthead .ast-container,
#ast-mobile-header .ast-primary-header-bar,
:is(.blog, .single-post) .site-content > .ast-container {
  max-width: calc(var(--u-wrap) + 2 * var(--u-side)) !important;
  padding-left: var(--u-side) !important;
  padding-right: var(--u-side) !important;
}

/* The logo on the content's left edge (the theme set it 50px in; 10px out
   on a phone). */
#masthead .site-branding {
  margin-left: 0 !important;
}

/* The article's text starts on the page's edge, like every other page's
   (Astra also held every paragraph to 750px, centred). */
.single-post .ast-article-single {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.single-post .entry-content[data-ast-blocks-layout] {
  --wp--custom--ast-content-width-size: 100%;
}

/* Its paragraphs one step apart, as on every other page (Astra's gap was
   1.6em); a heading a little more room above than below. */
.single-post .entry-content > :is(p, ul, ol, blockquote) {
  margin-bottom: 0.85em !important;
}

.single-post .entry-content > :is(h2, h3, h4) {
  margin-top: 1.4em !important;
  margin-bottom: 0.5em !important;
}

/* The article's picture sits beside its opening paragraphs, so the text runs
   the full width under it rather than the page keeping a narrow column. */
@media (min-width: 900px) {
  .single-post .entry-content > figure.wp-block-image:first-child {
    float: right;
    width: min(44%, 640px);
    margin: 6px 0 var(--u-stack) var(--u-col-gap) !important;
  }

  .single-post .entry-content > figure.wp-block-image:first-child img {
    width: 100%;
    height: auto;
  }
}

.single-post .entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* The workshop's top bar was fixed over the page, which only cleared it by a
   hand-set 95px (125px on a phone) that the rhythm removed: the Lo Shu
   picture sat under the bar, and on a phone the bar (134px there) hid the
   title. Sticky instead: it takes its own room at the top and still stays
   in view while reading. */
/* Since the page has the site's own header (2026-09-29,
   tools/v2_workshops.py), the bar sticks just under it on a computer (the
   header is 82px there); on a phone, where the bar is 134px, it scrolls
   away with the page rather than take a quarter of the screen. */
.page-id-1977 .elementor-element-f6d1d79 {
  position: sticky !important;
  top: 82px !important;
  z-index: 998 !important;
}

@media (max-width: 921px) {
  .page-id-1977 .elementor-element-f6d1d79 {
    position: relative !important;
    top: 0 !important;
  }
}

/* Seven items in the top menu since "Workshops" (2026-09-29): just above
   the phone menu (922-1000px) they fit on one line with a little less room
   around each. */
@media (min-width: 922px) and (max-width: 1000px) {
  #masthead #ast-hf-menu-1 > .menu-item > .menu-link {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Stacked columns (tools/v2_stack_cols.py): boxes in two columns, each as
   tall as its own content, so none is stretched into empty space. On a
   phone, one list in the original order (row by row). */
.u-stack-row > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--u-grid-gap) !important;
}

.u-stack-col {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--u-grid-gap);
}

.u-stack-col > .e-con {
  --width: 100% !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

@media (max-width: 767px) {
  .u-stack-row > .e-con-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .u-stack-col {
    display: contents;
  }

  .u-stack-col:first-child > :first-child { order: 1; }
  .u-stack-col:last-child > :first-child { order: 2; }
  .u-stack-col:first-child > :last-child { order: 3; }
  .u-stack-col:last-child > :last-child { order: 4; }
}

/* A box beside a column of text sits level with the text's middle, as tall
   as its own content (it was stretched to the text's height and left empty
   below). */
@media (min-width: 1025px) {
  :is(.u-col-row.e-con-full, .u-col-row > .e-con-inner) > .u-card {
    align-self: center !important;
  }
}

/* The masterclass profile box stands the full height of the hero beside it:
   its content sits in the middle rather than leaving the bottom empty. The
   success-story cards in a row keep theirs at the top, so photos line up. */
.elementor-widget-elementskit-team:not(.u-card-row *) .profile-card {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

/* The hand-built pages (home hero, About, How I read a chart, 404). */
.v2-hero__inner {
  max-width: var(--u-wrap) !important;
}

.mx-intro:not(.u-mocha),
.mx-stage,
.ab-body {
  max-width: calc(var(--u-wrap) + 2 * var(--u-side)) !important;
}

.v2-pagetitle {
  max-width: none !important;
}

/* Their paragraphs held to 30-78 characters: the column's full width. */
.v2-hero__lede,
.v2-cred,
.mx-intro__lede,
.mx-note,
.mx-cta-band p,
.ab-col p,
.ab-list li,
.ab-quote {
  max-width: none !important;
}

/* About: a larger portrait, so the short heading beside it doesn't leave the
   middle of the hero empty. */
@media (min-width: 901px) {
  .ab-portrait {
    width: min(78%, 400px) !important;   /* its ring (1.28x) fits the column */
    justify-self: center !important;
  }
}

/* ========================================================= scams to avoid */
/* Home page, between "Our services" and "Why Choose Us" (2026-09-26, the
   client asked for the scams people should avoid; markup by
   tools/v2_alert.py). A mocha band: a faint zodiac wheel turning behind,
   six red-flag cards (what you will hear, struck through; then the truth),
   and a beige "certificate" closing the band: we do none of this.

   The warning colour is a soft sindoor: mocha is a mid tone, so a strong red
   cannot pass contrast on it. Coral for the large word and the icons
   (3:1+), blush on oxblood for the small "Red flag" tags (9:1). */

.u-alert {
  --u-alert:       #ffb8a3;   /* large text, icons: 3.6:1 on mocha */
  --u-alert-text:  #ffd2c2;   /* small text on oxblood */
  --u-alert-deep:  #5e2b23;   /* oxblood tag ground */
  --u-alert-line:  rgba(255, 184, 163, 0.85);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: block;
  padding: var(--u-edge) max(var(--u-side), calc((100% - var(--u-wrap)) / 2)) !important;
  margin: var(--u-edge-out) 0 !important;
}

/* A low glow at the top, and the wheel turning slowly behind the corner. */
.u-alert::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(255, 236, 205, 0.07), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(94, 43, 35, 0.28), transparent 70%);
  pointer-events: none;
}

.u-alert__wheel {
  position: absolute;
  z-index: -1;
  width: min(980px, 78vw);
  aspect-ratio: 1;
  right: max(-26%, -300px);
  bottom: -38%;
  opacity: 0.07;
  pointer-events: none;
}

.u-alert__wheel img {
  width: 100%;
  height: 100%;
  display: block;
  animation: u-alert-turn 240s linear infinite;
}

@keyframes u-alert-turn {
  to { transform: rotate(-360deg); }
}

.u-alert__inner {
  position: relative;
}

/* --------------------------------------------------------------- the head */

.u-alert__head {
  text-align: center;
  margin: 0 auto clamp(28px, 3.2vw, 48px);
}

.u-alert__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 clamp(16px, 1.6vw, 22px) !important;
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
  background: var(--u-alert-deep);
  border: 1px solid rgba(255, 184, 163, 0.38);
  color: var(--u-alert-text);
  font-family: var(--v2-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.2;
}

.u-alert__eyebrow svg,
.u-alert__flag svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--u-alert);
}

.u-alert__title {
  margin: 0 !important;
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  font-size: var(--u-fs-section) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--u-head) !important;
}

.u-alert__title em {
  font-style: italic;
  color: var(--u-alert);
  padding-right: 0.06em;
}

.u-alert__lede,
.u-alert__verdict-text,
.u-alert__verdict-title,
.u-alert__title {
  text-wrap: balance;
}

.u-alert__lede {
  margin: clamp(10px, 1vw, 14px) auto 0 !important;
  font-family: var(--v2-body);
  font-size: var(--u-fs-lede);
  line-height: 1.65;
  color: var(--u-strong);   /* over the glow: 4.9:1 */
}

/* — ◆ — */
.u-alert__orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(16px, 1.6vw, 22px);
}

.u-alert__orn::before,
.u-alert__orn::after {
  content: "";
  width: clamp(40px, 5vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--u-gold));
}

.u-alert__orn::after {
  transform: scaleX(-1);
}

.u-alert__orn i {
  width: 7px;
  height: 7px;
  background: var(--u-gold);
  transform: rotate(45deg);
}

/* -------------------------------------------------------------- the cards */

.u-alert__grid {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--u-grid-gap);
}

.u-alert__card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: clamp(22px, 2.1vw, 30px) clamp(20px, 2vw, 28px) clamp(22px, 2vw, 28px);
  background: var(--u-card-bg);
  border: 1px solid var(--u-card-edge);
  border-radius: 16px;
  box-shadow: var(--u-card-shadow);
  transition: transform 0.6s var(--u-ease), box-shadow 0.6s var(--u-ease),
              border-color 0.45s var(--u-ease);
}

/* Across a row, each part of every card starts on the same line (flag row,
   name, quote, truth), whatever the length of the text above it. */
@supports (grid-template-rows: subgrid) {
  .u-alert__card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* The accent on the top edge, in sindoor rather than gold. */
.u-alert__card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 64px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--u-alert), transparent);
  transition: width 0.6s var(--u-ease);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .u-alert__card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 184, 163, 0.5);
    box-shadow: var(--u-card-shadow-hover);
  }

  .u-alert__card:hover::after {
    width: 132px;
  }
}

.u-alert__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(14px, 1.4vw, 18px);
}

.u-alert__num {
  font-family: var(--v2-display);
  font-size: clamp(1.9rem, 2.4vw, 2.3rem);
  line-height: 1;
  color: var(--u-gold-text);
  opacity: 0.9;
}

.u-alert__flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: var(--u-alert-deep);
  border: 1px solid rgba(255, 184, 163, 0.3);
  color: var(--u-alert-text);
  font-family: var(--v2-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
}

.u-alert__flag svg {
  width: 13px;
  height: 13px;
}

.u-alert__name {
  margin: 0 0 12px !important;
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  font-size: var(--u-fs-card) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
  color: var(--u-head) !important;
}

/* What you will hear: struck through, in sindoor, once the card is in view. */
.u-alert__claim {
  margin: 0 0 12px !important;
  font-family: var(--v2-display);
  font-style: italic;
  font-size: clamp(1.08rem, 1.2vw, 1.2rem);
  line-height: 1.45;
  color: var(--u-sub);
}

.u-alert__quote {
  background-image: linear-gradient(var(--u-alert-line), var(--u-alert-line));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 100% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.1s var(--u-ease) 0.45s;
}

html.sys-anim .u-alert__card[data-sys-reveal]:not([data-sys-done]) .u-alert__quote {
  background-size: 0% 1px;
}

.u-alert__truth {
  margin: 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--u-rule);
  font-family: var(--v2-body);
  font-size: var(--u-fs-body);
  line-height: 1.7;
  color: var(--u-text);
}

/* --------------------------------------------------------- the certificate */
/* Beige inside the mocha band (its tokens are re-scoped with the :root set at
   the top of this file), a double gold frame, a seal on the top edge. */

.u-alert__verdict {
  --u-btn-border:  #6b4f27;
  --u-shadow-btn:  0 14px 30px -12px rgba(107, 79, 39, 0.45);
  position: relative;
  max-width: 980px;
  margin: calc(clamp(44px, 4.6vw, 64px) + 36px) auto 0;
  padding: clamp(52px, 5vw, 64px) clamp(24px, 4vw, 64px) clamp(30px, 3vw, 42px);
  text-align: center;
  background: var(--u-card-bg);
  border: 1px solid var(--u-card-edge);
  border-radius: 18px;
  outline: 1px solid var(--u-frame);
  outline-offset: -9px;
  box-shadow: 0 2px 4px rgba(20, 12, 4, 0.12), 0 36px 70px -34px rgba(20, 12, 4, 0.6);
  color: var(--u-text);
}

.u-alert__seal {
  position: absolute;
  top: 0;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #7d5a22 0%, #b08435 45%, #d9bf8a 72%, #b08435 100%);
  color: #fffaf0;
  box-shadow: 0 0 0 5px var(--u-mocha), 0 10px 24px -8px rgba(20, 12, 4, 0.55);
}

.u-alert__seal svg {
  width: 46px;
  height: 46px;
}

.u-alert__tick {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--u-ease) 0.35s;
}

html.sys-anim .u-alert__verdict[data-sys-reveal]:not([data-sys-done]) .u-alert__tick {
  stroke-dashoffset: 1;
}

.u-alert__verdict-title {
  margin: 0 !important;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--u-fs-sub);
  line-height: 1.2;
  color: var(--u-head);
}

.u-alert__verdict-title em {
  font-style: italic;
  color: var(--u-gold-text);
}

.u-alert__verdict-text {
  margin: 12px auto 0 !important;
  max-width: 62ch;
  font-family: var(--v2-body);
  font-size: var(--u-fs-body);
  line-height: 1.75;
  color: var(--u-text);
}

/* The theme underlines every link inside page content. */
.u-alert a.v2-btn {
  text-decoration: none !important;
}

.u-alert__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin-top: clamp(20px, 2vw, 28px);
}

/* ----------------------------------------------------------------- sizes */

@media (max-width: 1024px) {
  .u-alert__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .u-alert__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .u-alert__eyebrow {
    letter-spacing: 0.16em;
  }

  .u-alert__wheel {
    width: 130vw;
    right: -60%;
    bottom: -12%;
  }

  .u-alert__verdict {
    padding-top: 50px;
  }

  .u-alert__seal {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
  }

  .u-alert__seal svg {
    width: 38px;
    height: 38px;
  }

  .u-alert__cta .v2-btn {
    width: 100%;
    justify-content: center;
    padding-inline: 16px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-alert__wheel img {
    animation: none;
  }

  .u-alert__card,
  .u-alert__card::after,
  .u-alert__quote,
  .u-alert__tick {
    transition: none;
  }
}

/* ================================================= consultation hero scene */
/* (2026-09-26, the user: "remove the animation and picture. and instead paste
   this picture in the background".) The client's picture — a man on a rock
   above a valley at sunset, planets and the zodiac across the sky — fills
   the hero; a mocha veil darkens the side the words sit on, so they read,
   and clears towards the man on the right. tools/v2_scene.py marks the hero
   u-scene and removed its portrait column. The mocha ground stays underneath:
   it is what shows while the picture loads. */

.u-scene.e-con {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(540px, 78vh, 760px) !important;
  justify-content: center !important;
}

/* The picture, then the veil over it. */
.u-scene::before,
.u-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* (!important: the rule that clears Elementor's overlays from every
   container's ::before would otherwise take the picture away too.) */
.u-scene.e-con::before {
  z-index: -2;
  background: url("/premium/img/consultation-hero.webp") 62% 50% / cover no-repeat !important;
}

.u-scene::after {
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(52, 38, 25, 0.9) 0%,
      rgba(52, 38, 25, 0.78) 30%,
      rgba(52, 38, 25, 0.42) 52%,
      rgba(52, 38, 25, 0.08) 72%,
      rgba(52, 38, 25, 0) 100%),
    linear-gradient(0deg, rgba(52, 38, 25, 0.35) 0%, rgba(52, 38, 25, 0) 30%);
}

/* The words keep to the left, leaving the view and the man to the right. */
.u-scene > .e-con-inner > .e-con {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  flex: 0 1 auto !important;
}

@media (max-width: 1024px) {
  /* A tall tablet screen crops the wide picture: keep the man in view. */
  .u-scene.e-con::before {
    background-position: 94% 50% !important;
  }

  /* The headline runs across most of the width here, over the bright sun:
     a darker band behind the words as well as down the left. */
  .u-scene::after {
    background:
      linear-gradient(180deg,
        rgba(52, 38, 25, 0) 18%,
        rgba(52, 38, 25, 0.5) 34%,
        rgba(52, 38, 25, 0.5) 62%,
        rgba(52, 38, 25, 0) 80%),
      linear-gradient(90deg,
        rgba(52, 38, 25, 0.88) 0%,
        rgba(52, 38, 25, 0.74) 45%,
        rgba(52, 38, 25, 0.3) 75%,
        rgba(52, 38, 25, 0.1) 100%);
  }
}

/* A phone: the words on top, the man on his rock in view beneath them. */
@media (max-width: 767px) {
  .u-scene.e-con {
    min-height: 0 !important;
    justify-content: flex-start !important;
    padding-bottom: clamp(200px, 58vw, 260px) !important;
  }

  .u-scene.e-con::before {
    background-position: 90% 60% !important;
  }

  .u-scene::after {
    background: linear-gradient(180deg,
      rgba(52, 38, 25, 0.9) 0%,
      rgba(52, 38, 25, 0.8) 48%,
      rgba(52, 38, 25, 0.35) 70%,
      rgba(52, 38, 25, 0) 88%);
  }
}

/* ===================================================== consultation stats */
/* (2026-09-27, the user: the counters looked "very basic and outdated";
   "make the logo and counter modern, sleek and elegant".) One paper panel
   with the gold accent on its top edge; three figures, fine gold hairlines
   between them. Each icon (drawn for the site, tools/v2_stats.py) sits in a
   medallion with a dashed orbit turning slowly round it, a gold point on
   the orbit. The figures count up as they come into view (premium.js,
   buildCounters). */

.u-stats {
  display: block;
  padding: var(--u-sec-pad) max(var(--u-side), calc((100% - var(--u-wrap)) / 2)) !important;
}

.u-stats__list {
  position: relative;
  list-style: none;
  margin: 0 !important;
  padding: clamp(24px, 2.6vw, 36px) clamp(12px, 2vw, 32px) !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--u-card-bg);
  border: 1px solid var(--u-card-edge);
  border-radius: 20px;
  box-shadow: var(--u-card-shadow);
}

/* The accent on the top edge, as on every box. */
.u-stats__list::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 96px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--u-gold), transparent);
  pointer-events: none;
}

.u-stat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.6vw, 24px);
  margin: 0 !important;
  padding: 8px clamp(10px, 1.6vw, 24px);
}

/* A fine hairline between two figures, fading out at both ends. */
.u-stat + .u-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--u-gold-soft) 30%, var(--u-gold-soft) 70%, transparent);
}

/* ------------------------------------------------------------ the medallion */

.u-stat__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(64px, 5.4vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--u-gold-text);
  background: radial-gradient(circle at 32% 26%, #fffdf8 0%, #f6ebd4 62%, #eedcb8 100%);
  border: 1px solid rgba(176, 132, 53, 0.42);
  box-shadow: inset 0 0 0 5px rgba(255, 253, 248, 0.75),
              inset 0 0 0 6px rgba(176, 132, 53, 0.22),
              0 10px 22px -14px rgba(120, 84, 34, 0.55);
}

.u-stat__icon svg {
  width: 62%;
  height: 62%;
}

/* The orbit: a dashed ring just outside the medallion, a gold point on it,
   going round once a minute. */
.u-stat__orbit {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px dashed rgba(176, 132, 53, 0.45);
  animation: u-stat-orbit 60s linear infinite;
}

.u-stat:nth-child(2) .u-stat__orbit { animation-duration: 75s; animation-direction: reverse; }
.u-stat:nth-child(3) .u-stat__orbit { animation-duration: 90s; }

.u-stat__orbit::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--u-gold);
  box-shadow: 0 0 0 3px rgba(176, 132, 53, 0.16);
}

@keyframes u-stat-orbit {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------- figures */

.u-stat__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.u-stat__num {
  display: flex;
  align-items: flex-start;
  font-family: var(--v2-display);
  font-size: clamp(2.6rem, 3.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--u-head);
  font-variant-numeric: lining-nums tabular-nums;
}

.u-stat__plus {
  margin-left: 0.06em;
  font-size: 0.56em;
  line-height: 1.1;
  color: var(--u-gold-text);
}

.u-stat__label {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--u-rule);
  font-family: var(--v2-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--u-mute);
}

/* ------------------------------------------------------------------ sizes */

/* Tablet: each figure stands under its medallion. */
@media (max-width: 1100px) {
  .u-stat {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }

  .u-stat__num {
    justify-content: center;
  }
}

/* Phone: one figure per row, medallion beside it, hairlines between rows. */
@media (max-width: 640px) {
  .u-stats__list {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 22px !important;
  }

  .u-stat {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 22px;
    padding: 20px 4px;
  }

  .u-stat + .u-stat::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--u-gold-soft) 25%, var(--u-gold-soft) 75%, transparent);
  }

  .u-stat__num {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-stat__orbit {
    animation: none;
  }
}

/* ==================================================== consultation journey */
/* Consultation page, under the hero: "From Confusion to Clarity" (markup:
   tools/v2_journey.py). A heading row — the title on the left, its line on
   the right, a gold hairline between — then the client's three-scene
   illustration across the full width of the screen (2026-09-27, the user:
   "extend the image ... so there is no white space left on the borders"),
   then the booking button. */

.u-journey {
  display: block;
  padding: var(--u-open-pad) 0 var(--u-sec-pad) !important;
}

.u-journey__head {
  padding-inline: max(var(--u-side), calc((100% - var(--u-wrap)) / 2));
}

.u-journey__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.4vw, 56px);
  margin: 0 0 clamp(24px, 2.6vw, 36px);
}

.u-journey__heading {
  flex: none;
}

.u-journey__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(8px, 0.8vw, 12px) !important;
  font-family: var(--v2-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--u-gold-text);
}

.u-journey__eyebrow::after {
  content: "";
  width: clamp(28px, 3.4vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, var(--u-gold), transparent);
}

.u-journey__title {
  margin: 0 !important;
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  font-size: var(--u-fs-section) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--u-head) !important;
  white-space: nowrap;
}

.u-journey__title em {
  font-style: italic;
  color: var(--u-gold-text);
  padding-right: 0.04em;
}

/* The line, beside the title, behind a fine gold hairline. */
.u-journey__lede {
  margin: 0 !important;
  max-width: 60ch;
  padding-left: clamp(28px, 3.4vw, 56px);
  border-left: 1px solid var(--u-gold-soft);
  font-family: var(--v2-body);
  font-size: var(--u-fs-lede);
  line-height: 1.65;
  color: var(--u-text);
}

/* ------------------------------------------------------------- the picture */

.u-journey__art {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.u-journey__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1944 / 809;
}

/* Tablet and phone: the title above its line, both centred. */
@media (max-width: 900px) {
  .u-journey__head {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .u-journey__eyebrow {
    justify-content: center;
  }

  .u-journey__eyebrow::before {
    content: "";
    width: clamp(28px, 3.4vw, 52px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--u-gold));
  }

  .u-journey__title {
    white-space: normal;
  }

  .u-journey__lede {
    padding-left: 0;
    border-left: 0;
    text-wrap: balance;
  }
}

/* ======================================================== consultation why */
/* Consultation page: "Why Choose Our Consultation" (markup: tools/v2_why.py).
   Left, a cut-out of Sanidhya with his tablet standing in front of the
   zodiac wheel, which turns slowly behind him (deepened to read on the
   beige ground), a credential card on its corner. Right, the six reasons as
   boxes with a gold star. The wheel and card are placed with left/top and
   negative margins, never transforms: the reveal animation owns transforms
   (see the note on .v2-figure__wheel). */

.u-why {
  display: block;
  padding: var(--u-open-pad) max(var(--u-side), calc((100% - var(--u-wrap)) / 2)) var(--u-sec-pad) !important;
}

.u-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--u-col-gap);
  align-items: center;
}

/* ------------------------------------------------------------- the picture */

.u-why__art {
  position: relative;
  isolation: isolate;
  padding: 6% 6% 0;
}

/* A low gold glow behind him. */
.u-why__art::before {
  content: "";
  position: absolute;
  inset: 4% 0;
  z-index: -2;
  background: radial-gradient(closest-side, rgba(214, 178, 110, 0.32), transparent 72%);
  pointer-events: none;
}

.u-why__wheel {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 104%;
  aspect-ratio: 1;
  margin: -52% 0 0 -52%;
  pointer-events: none;
}

.u-why__wheel img {
  display: block;
  width: 100%;
  height: 100%;
  /* The wheel's pale gold (drawn for mocha) deepened for the beige ground. */
  filter: brightness(0.62) saturate(1.35);
  opacity: 0.72;          /* on the image: the reveal animates the box's own opacity */
  animation: u-why-turn 160s linear infinite;
}

@keyframes u-why-turn {
  to { transform: rotate(360deg); }
}

/* Just him, no frame: his head inside the wheel's upper half, as the
   reference's people stand. A soft shadow lifts the pale kurta off the
   beige ground. */
.u-why__person {
  position: relative;
  margin: 0;
  filter: drop-shadow(0 26px 34px rgba(60, 38, 12, 0.22));
}

/* The picture was cropped at the waist and through the left arm (and the
   tablet's corner at the right): those edges fade out rather than stop,
   only at the very edge, so his hands and the tablet stay solid. */
.u-why__person img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1177 / 1337;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 88%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 7%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 88%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 7%, #000 96%, transparent 100%);
  mask-composite: intersect;
}

/* The credential card on the picture's corner. */
.u-why__badge {
  position: absolute;
  left: 0;
  bottom: 9%;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px 14px 18px;
  border-radius: 14px;
  background: var(--u-card-bg);
  border: 1px solid var(--u-card-edge);
  border-left: 3px solid var(--u-gold);
  box-shadow: 0 18px 40px -22px rgba(60, 38, 12, 0.6);
  font-family: var(--v2-body);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--u-text);
  line-height: 1.3;
}

.u-why__badge b {
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--u-gold-text);
}

.u-why__badge span {
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--u-mute);
}

/* ---------------------------------------------------------------- the copy */

.u-why__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(10px, 1vw, 14px) !important;
  font-family: var(--v2-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--u-gold-text);
}

.u-why__eyebrow::after {
  content: "";
  width: clamp(32px, 4vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, var(--u-gold), transparent);
}

.u-why__title {
  margin: 0 0 clamp(20px, 2.2vw, 30px) !important;
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  font-size: var(--u-fs-section) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--u-head) !important;
}

.u-why__title em {
  font-style: italic;
  color: var(--u-gold-text);
  padding-right: 0.04em;
}

.u-why__list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.u-why__item {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  align-content: start;
  margin: 0 !important;
  padding: 18px 20px 18px 16px;
  border-radius: 14px;
  background: var(--u-card-bg);
  border: 1px solid var(--u-card-edge);
  box-shadow: 0 1px 2px rgba(39, 28, 8, 0.04), 0 14px 30px -24px rgba(120, 84, 34, 0.4);
  transition: transform 0.5s var(--u-ease), border-color 0.4s var(--u-ease), box-shadow 0.5s var(--u-ease);
}

.u-why__star {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--u-gold);
  transition: transform 0.6s var(--u-ease);
}

.u-why__star svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .u-why__item:hover {
    transform: translateY(-3px);
    border-color: var(--u-card-edge-hover);
    box-shadow: 0 2px 4px rgba(39, 28, 8, 0.05), 0 22px 40px -24px rgba(120, 84, 34, 0.5);
  }

  .u-why__item:hover .u-why__star {
    transform: rotate(90deg) scale(1.1);
  }
}

.u-why__name {
  margin: 0 0 6px !important;
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  font-size: var(--u-fs-item) !important;
  line-height: 1.2 !important;
  color: var(--u-head) !important;
}

.u-why__text {
  margin: 0 !important;
  font-family: var(--v2-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--u-text);
}

/* ------------------------------------------------------------------- sizes */

/* Tablet and phone: the picture above, the reasons under it. */
@media (max-width: 1024px) {
  .u-why__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .u-why__art {
    width: min(100%, 640px);
    margin: 0 auto;
  }

  .u-why__copy {
    text-align: center;
  }

  .u-why__eyebrow {
    justify-content: center;
  }

  .u-why__eyebrow::before {
    content: "";
    width: clamp(32px, 4vw, 60px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--u-gold));
  }

  .u-why__item {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .u-why__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A phone: the card small and low, so he shows. */
  .u-why__badge {
    bottom: 7%;
    padding: 7px 12px 8px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
  }

  .u-why__badge b {
    font-size: 1.25rem;
  }

  .u-why__badge span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-why__wheel img {
    animation: none;
  }

  .u-why__item,
  .u-why__star {
    transition: none;
  }
}

/* ========================================================= footer, compact */
/* (2026-09-27, the user: "this is too much blank space in here. minimize and
   simplify everything possible".) The footer was 480px of mostly empty room:
   a 200px logo, 41px link rows, 10px padding on every column, and a form of
   one stacked field per row, its "2+9?" and Submit each on a row of their
   own. Now: a small logo, tight lists, the form in two rows (name | mobile,
   then 2+9? | Submit), and a fine gold rule where the footer begins, in
   place of the empty room above it. */

.ekit-template-content-footer {
  padding-top: 0 !important;
}

.ekit-template-content-footer .elementor-element-0125af7 {
  padding-top: clamp(22px, 2.4vw, 32px) !important;
  padding-bottom: clamp(18px, 2vw, 26px) !important;
}

/* Where the page above ends on mocha too, a fine gold rule marks where the
   footer begins (on beige, the colour edge does). */
body.u-mocha-end .ekit-template-content-footer .elementor-element-0125af7 {
  /* 14px under the seam itself, which tools/seamcheck.js keeps watching
     for accidental hairlines. */
  padding-top: calc(clamp(22px, 2.4vw, 32px) + 14px) !important;
  background-image: linear-gradient(90deg, transparent, var(--u-gold-soft), transparent) !important;
  background-size: calc(100% - 2 * max(var(--u-side), calc((100% - var(--u-wrap)) / 2))) 1px !important;
  background-position: center 14px !important;
  background-repeat: no-repeat !important;
}

.ekit-template-content-footer .elementor-element-0125af7 > .e-con-inner {
  padding: 0 !important;
  column-gap: var(--u-col-gap) !important;
  row-gap: 24px !important;
}

.ekit-template-content-footer .elementor-element-0125af7 > .e-con-inner > .e-con {
  padding: 0 !important;
  row-gap: 12px !important;
}

/* Brand column: the logo small, the contact lines under it. */
.ekit-template-content-footer .elementor-element-0c18331 img {
  width: clamp(104px, 9vw, 128px) !important;
  height: auto !important;
}

.ekit-template-content-footer .elementor-heading-title {
  font-size: clamp(1.15rem, 1.35vw, 1.3rem) !important;
  line-height: 1.2 !important;
}

.ekit-template-content-footer .elementor-icon-list-items {
  display: grid;
  gap: 8px;
}

.ekit-template-content-footer .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0 !important;
}

.ekit-template-content-footer .elementor-icon-list-item::after {
  display: none !important;
}

/* The icons' font line-height (33px) set each row's height. */
.ekit-template-content-footer .elementor-icon-list-icon,
.ekit-template-content-footer .elementor-icon-list-icon i {
  line-height: 1 !important;
}

.ekit-template-content-footer .elementor-icon-list-item > a,
.ekit-template-content-footer .elementor-icon-list-item {
  align-items: center !important;
}

/* The form: two rows. */
.ekit-template-content-footer .elementor-element-6d92f8f {
  padding: 16px 18px 18px !important;
}

.ekit-template-content-footer .wpcf7-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
}

.ekit-template-content-footer .wpcf7-form .hidden-fields-container {
  display: none;
}

.ekit-template-content-footer .wpcf7-form > p {
  margin: 0 !important;
  min-width: 0;
}

.ekit-template-content-footer .wpcf7-form br {
  display: none;
}

.ekit-template-content-footer .wpcf7-form label {
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  margin: 0 !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.ekit-template-content-footer .wpcf7-form :is(input[type="text"], input[type="tel"]) {
  height: 42px !important;
  min-height: 0 !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

/* The check and the button share the last row. */
.ekit-template-content-footer .wpcf7-form > p:has(.wpcf7-submit) {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.ekit-template-content-footer .wpcf7-form > p:has(.wpcf7-submit) .wpcf7-form-control-wrap {
  flex: 1 1 auto;
}

.ekit-template-content-footer .wpcf7-form .wpcf7-quiz-label {
  margin: 0 !important;
  font-size: 0.7rem !important;
}

.ekit-template-content-footer .wpcf7-form .wpcf7-submit {
  flex: none;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 26px !important;
}

.ekit-template-content-footer .wpcf7-form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0 !important;
}

.ekit-template-content-footer .wpcf7-form .wpcf7-response-output:empty {
  display: none;
}

/* Copyright: one slim line. */
.elementor-element-d9eac65 > .e-con-inner {
  padding-block: 10px !important;
}

@media (max-width: 480px) {
  .ekit-template-content-footer .wpcf7-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========================================================= home hero title */
/* "India's Trusted Astrologer & Numerologist" (2026-09-27, the user asked for
   "trusted astrologer and numerologist"): the gold italic phrase keeps to one
   line of its own where the column is wide enough; on narrower screens it
   wraps like any heading. */
.v2-hero__title {
  max-width: none !important;
}

@media (min-width: 1200px) {
  .v2-hero__title em {
    white-space: nowrap;
  }
}

/* ======================================================== home hero, beyond */
/* Under the title, "Beyond Fear. Beyond Superstition. Beyond Myths." (markup:
   tools/v2_beyond.py; 2026-09-28, the user, after sanskritisethi.com's
   rotating gold phrase). One line in the title's gold italic where the three
   phrases take turns: each rises in, holds, and fades out as the next comes.
   The three sit in one grid cell, so the line never changes height or width.
   The turning starts once the hero has arrived (the first delay). The whole
   sentence is there for screen readers, and shown whole with reduced motion. */

.v2-hero__title:has(+ .v2-hero__beyond) {
  margin-bottom: clamp(6px, 0.9vw, 14px);
}

.v2-hero__beyond {
  margin: 0 0 clamp(16px, 2vw, 26px) !important;   /* the theme gives every <p> 1.6em below */
  font-family: var(--v2-display);
  font-style: italic;
  font-size: clamp(1.6rem, 2.9vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
}

/* The client's words under it (the same day): two short paragraphs, the
   first leading in a step brighter. */
.v2-hero__lede p {
  margin: 0 !important;
}

.v2-hero__lede p + p {
  margin-top: 0.7em !important;
}

.v2-hero__lede p:first-child {
  color: var(--u-head);
}

.v2-beyond__all {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.v2-beyond__turn {
  display: grid;
}

.v2-beyond__turn > span {
  grid-area: 1 / 1;
  justify-self: start;
  padding-right: 0.08em;      /* room for the italic overhang */
  background: var(--u-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--u-gold-text);
  opacity: 0;
  animation: v2-beyond 10.2s var(--u-ease) infinite both;
  animation-delay: 1.3s;
}

.v2-beyond__turn > span:nth-child(2) {
  animation-delay: 4.7s;
}

.v2-beyond__turn > span:nth-child(3) {
  animation-delay: 8.1s;
}

/* A third of the cycle each (3.4s): in 0.6s, held 2.2s, out 0.6s. */
@keyframes v2-beyond {
  0% {
    opacity: 0;
    transform: translateY(0.45em);
  }
  5.9% {
    opacity: 1;
    transform: none;
  }
  27.4% {
    opacity: 1;
    transform: none;
  }
  33.3%,
  100% {
    opacity: 0;
    transform: translateY(-0.3em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-beyond__turn {
    display: none;
  }

  .v2-beyond__all {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    color: var(--u-gold-text);
  }
}

/* =================================================== consultation parallax */
/* Consultation page, before the packages: a band that is a window onto a
   still picture (markup: tools/v2_parallax.py; motion: premium.js,
   buildParallax). A golden sunrise over a sea of clouds, a lone figure on
   the ridge; the words on the left over a mocha veil, which clears towards
   the figure. The band takes the mocha text tokens (listed with .u-mocha at
   the top of this file). Crisp top and bottom edges against the beige. */

.u-para {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 62vh, 580px);
  margin: var(--u-open-pad) 0 0 !important;
  padding: clamp(56px, 7vw, 96px) max(var(--u-side), calc((100% - var(--u-wrap)) / 2)) !important;
  background: var(--u-mocha);
}

.u-para__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* Without the motion (no JS, reduced motion) the picture fills the band. */
.u-para__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
  max-width: none !important;
  border-radius: 0 !important;
}

/* With it, the picture is one screen tall and holds still as the band
   passes (premium.js moves it by as much as the band scrolls). */
.u-para.is-parallax .u-para__img {
  height: 100vh;
  height: 100lvh;
  will-change: transform;
}

/* The veil: deep on the words' side, clearing towards the figure. */
.u-para::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(46, 33, 21, 0.9) 0%,
      rgba(46, 33, 21, 0.82) 32%,
      rgba(46, 33, 21, 0.45) 56%,
      rgba(46, 33, 21, 0.1) 78%,
      rgba(46, 33, 21, 0) 100%);
}

.u-para__inner {
  position: relative;
  max-width: 640px;
}

.u-para__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(12px, 1.2vw, 16px) !important;
  font-family: var(--v2-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--u-gold-text);
}

.u-para__eyebrow::after {
  content: "";
  width: clamp(32px, 4vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, var(--u-gold), transparent);
}

.u-para__title {
  margin: 0 !important;
  font-family: var(--v2-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.6rem, 4.8vw, 4.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  color: var(--u-head) !important;
}

.u-para__title em {
  display: block;
  font-style: italic;
  background: var(--u-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--u-gold-text);
  padding-right: 0.06em;
}

.u-para__text {
  margin: clamp(16px, 1.6vw, 22px) 0 0 !important;
  max-width: 54ch;
  font-family: var(--v2-body);
  font-size: var(--u-fs-lede);
  line-height: 1.7;
  color: var(--u-text);
}

.u-para__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: clamp(24px, 2.6vw, 34px);
}

.u-para a.v2-btn {
  text-decoration: none !important;
}

/* Narrower screens: the words run further across, so the veil holds deep
   further across too (the sun sits behind them in the picture's top left). */
@media (min-width: 768px) and (max-width: 1180px) {
  .u-para::after {
    background:
      linear-gradient(90deg,
        rgba(46, 33, 21, 0.9) 0%,
        rgba(46, 33, 21, 0.84) 50%,
        rgba(46, 33, 21, 0.6) 72%,
        rgba(46, 33, 21, 0.25) 100%);
  }
}

/* A phone: the words over the whole picture, the veil deeper, the figure
   kept in the frame. */
@media (max-width: 767px) {
  .u-para {
    min-height: 0;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .u-para__img {
    object-position: 67% 55%;   /* the figure to the right of the words */
  }

  .u-para::after {
    background: linear-gradient(180deg,
      rgba(46, 33, 21, 0.82) 0%,
      rgba(46, 33, 21, 0.7) 55%,
      rgba(46, 33, 21, 0.4) 100%);
  }

  .u-para__cta .v2-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------ paired boxes */
/* 2026-09-27, the user: "the right side has a box but the left side
   doesn't. make same size box for both of them. find similar kind of
   inconsistencies in the whole website and fix them."

   A text column beside a box is drawn as a box too (u-paired, marked by
   tools/v2_rhythm.js), so the row is a row of boxes: equal width, one
   height. tools/consistency.js finds the rest of this kind of thing. */

/* Inside the pair, everything starts at one left edge. The original box
   centred its blocks, each at its own width, so its title and list sat in
   the middle while the text beside them was flush left. */
:is(.u-card-row.e-con-full, .u-card-row > .e-con-inner):has(> .u-paired) > .u-card.e-con {
  align-items: stretch !important;
}

/* The paired column's call to action keeps its weight: filled, not the
   quieter outline a box gives its buttons. */
.u-paired .elementor-button:not([href="#"]) {
  background: var(--u-btn) !important;
  color: var(--u-btn-text) !important;
  fill: var(--u-btn-text) !important;
  border-color: var(--u-btn-border) !important;
}

/* Workshop labels (buttons that go nowhere) take no arrow inside a box: an
   arrow promises a link. */
.page-id-1977 .u-card .elementor-button[href="#"] .elementor-button-text::after {
  content: none !important;
}

/* Workshop: bordered blocks inside boxes (the three in the hero, the two
   under "Included with your registration") had their words on the top and
   bottom border, with room only at the sides: the rule that takes widgets'
   own vertical padding away took theirs too. Room all round. */
.elementor-element-b25cc67,
.elementor-element-76b99f9,
.elementor-element-9d28192,
.elementor-element-55bbd7b,
.elementor-element-1495fc0 {
  padding-block: 16px !important;
}

/* A phone keeps the paired boxes' titles as on a desktop, the icon beside
   the title and both flush left (Elementor stacked the icon over a centred
   title, above flush-left text). */
@media (max-width: 767px) {
  :is(.u-card-row.e-con-full, .u-card-row > .e-con-inner):has(> .u-paired) > .u-card .elementor-icon-box-wrapper {
    flex-direction: row !important;
    align-items: center !important;
    text-align: start !important;
  }
}

/* Name correction: "Book Your Consultation" sat centred under a flush-left
   title and text, in both columns. Flush left with them. */
.elementor-element-2768feb,
.elementor-element-345a657 {
  text-align: start !important;
}

/* Workshop section labels on a phone: flush left like the heading and text
   under them. Elementor centred them on phones, and the hero's label, two
   lines there, centred each line. (Not labels in a box: a box on a phone
   keeps its own alignment.) */
@media (max-width: 767px) {
  .page-id-1977 .elementor-widget-button:not(.u-card *):not(:has(+ .elementor-widget-button)):not(.elementor-widget-button + .elementor-widget-button):has(.elementor-button[href="#"]) {
    text-align: start !important;
  }

  .page-id-1977 .elementor-widget-button:not(.u-card *):not(:has(+ .elementor-widget-button)):not(.elementor-widget-button + .elementor-widget-button) .elementor-button[href="#"] {
    justify-content: flex-start !important;
  }

  .page-id-1977 .elementor-widget-button:not(.u-card *):not(:has(+ .elementor-widget-button)):not(.elementor-widget-button + .elementor-widget-button) .elementor-button[href="#"] .elementor-button-text {
    text-align: start !important;
  }
}

/* -------------------------------------------------------------- phone menu */
/* 2026-09-27, the user (a phone screenshot of the open menu: white and
   pale-blue rows, the words invisible): "fix it please".

   The theme painted the phone menu's rows white (the current page and a
   touched row pale blue) while the header's cream words carried on into it.
   It opens as part of the header now: mocha, cream words, a gold hairline
   between rows, the current page in gold, the course list a step deeper.
   ("Courses" opens its list when tapped: premium.js buildMenuParents.) */

#masthead .ast-mobile-header-content {
  background: var(--u-ground) !important;
  border-top: 1px solid var(--u-header-line) !important;
  box-shadow: 0 28px 44px -26px rgba(20, 12, 4, 0.65) !important;
}

#masthead #ast-hf-mobile-menu,
#masthead #ast-hf-mobile-menu .sub-menu {
  background: transparent !important;
  border: 0 !important;
}

#masthead #ast-hf-mobile-menu .menu-item {
  border: 0 !important;
  border-bottom: 1px solid var(--u-rule) !important;
}

#masthead #ast-hf-mobile-menu > .menu-item:last-child {
  border-bottom: 0 !important;
}

#masthead #ast-hf-mobile-menu .menu-link,
#masthead #ast-hf-mobile-menu .menu-item:hover > .menu-link {
  background: transparent !important;
  color: var(--u-nav) !important;
  border: 0 !important;
  padding: 17px var(--u-side) !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em;
}

/* The page you are on: gold, with a short gold bar at the edge. */
#masthead #ast-hf-mobile-menu .current-menu-item > .menu-link {
  color: var(--u-gold-text) !important;
  box-shadow: inset 3px 0 0 var(--u-gold) !important;
}

/* The course list: a step deeper, indented under "Courses". */
#masthead #ast-hf-mobile-menu .sub-menu {
  background: var(--u-card) !important;
  border-top: 1px solid var(--u-rule) !important;
}

#masthead #ast-hf-mobile-menu .sub-menu .menu-link {
  padding-left: calc(var(--u-side) + 20px) !important;
  font-size: 0.94rem !important;
  color: var(--u-text) !important;
}

#masthead #ast-hf-mobile-menu .sub-menu .menu-item:last-child {
  border-bottom: 0 !important;
}

/* The arrow that opens it: cream, no box, pointing up while the list is
   open. */
#masthead #ast-hf-mobile-menu .ast-menu-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--u-head) !important;
}

#masthead #ast-hf-mobile-menu .ast-menu-toggle .ast-arrow-svg {
  transition: transform 0.35s var(--u-ease);
}

#masthead #ast-hf-mobile-menu .ast-submenu-expanded > .ast-menu-toggle .ast-arrow-svg {
  transform: rotate(180deg);
}

/* "Courses" only ever links to the home page, so on the home page the theme
   marked it as the page you are on, beside "Home". It is not. */
#masthead .menu-item-has-children.menu-item-home.current-menu-item:not(:hover) > .menu-link,
#masthead #ast-hf-mobile-menu .menu-item-has-children.menu-item-home.current-menu-item > .menu-link {
  color: var(--u-nav) !important;
  box-shadow: none !important;
}

/* The open/close button: no dotted box after a tap (the theme draws one on
   focus); a keyboard still gets a gold ring. */
#masthead .menu-toggle:focus {
  border-color: transparent !important;
}

#masthead .menu-toggle:focus:not(:focus-visible) {
  outline: 0 !important;
}

#masthead .menu-toggle:focus-visible {
  outline: 1px solid var(--u-gold-soft) !important;
  outline-offset: 4px;
}

/* ------------------------------------------------------------ reason marks */
/* 2026-09-28, the user (the home "Why Choose Us" list): "this tick emoji is
   looking too basic and common. make it look elegant, classy and modern".

   The theme's tick (ElementsKit's icon-checked / icon-checked1) beside
   reasons and offers, wherever it is used (home, the astrology course, name
   correction, the workshop), is drawn instead as a gold four-point star in
   a fine gold ring: the same star as the consultation page's reasons, a
   small companion spark at its shoulder. It turns a quarter when the reason
   is pointed at. (Then the same day, the user: "find all the places in the
   whole website and change all the tick marks with this": the lists and the
   masterclass price card too, below; the booking form's chips in book.css.) */

:root {
  --u-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C12.55 8.4 15.1 11.45 21.5 12C15.1 12.55 12.55 15.1 12 21.5C11.45 15.1 8.9 12.55 2.5 12C8.9 11.45 11.45 8.4 12 2.5Z'/%3E%3Ccircle cx='19.4' cy='4.6' r='1.35'/%3E%3C/svg%3E");
}

.elementor-icon-box-icon .elementor-icon:has(> i.icon-checked1, > i.icon-checked) {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  width: 46px !important;
  height: 46px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  /* !important: Elementor's "framed" icon view draws its own ring. */
  border: 1px solid var(--u-card-edge-hover) !important;
  background: var(--u-card-bg) !important;
  box-shadow: 0 0 0 5px var(--u-medal), 0 12px 22px -14px rgba(60, 38, 12, 0.55) !important;
}

.elementor-icon-box-icon .elementor-icon:has(> i.icon-checked1, > i.icon-checked) > i {
  display: none !important;
}

.elementor-icon-box-icon .elementor-icon:has(> i.icon-checked1, > i.icon-checked)::before {
  content: "";
  width: 26px;
  height: 26px;
  background: var(--u-metal);
  -webkit-mask: var(--u-star-mask) center / contain no-repeat;
  mask: var(--u-star-mask) center / contain no-repeat;
  transition: transform 0.8s var(--u-ease);
}

@media (hover: hover) and (pointer: fine) {
  .elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon:has(> i.icon-checked1, > i.icon-checked)::before {
    transform: rotate(90deg);
  }
}

@media (max-width: 767px) {
  .elementor-icon-box-icon .elementor-icon:has(> i.icon-checked1, > i.icon-checked) {
    width: 40px !important;
    height: 40px !important;
  }

  .elementor-icon-box-icon .elementor-icon:has(> i.icon-checked1, > i.icon-checked)::before {
    width: 21px;
    height: 21px;
  }
}

/* Ticks in lists (package cards, "Who should join", course benefits, the
   masterclass modules): the same star, in a smaller ring. Icon fonts
   (ElementsKit icon-checked) and Elementor's inline SVG ticks (fa check,
   check-circle, check-square) alike. Also the bare circles used as bullets
   ("What Makes This Course Special?" on both courses, the name-correction
   lists; 2026-09-28, the user: "these round symbols are looking really odd"). */
.elementor-icon-list-icon:has(> i.icon-checked1, > i.icon-checked, > svg[class*="e-fas-check"], > svg.e-far-circle, > svg.e-fas-dot-circle) {
  flex: 0 0 38px !important;
  box-sizing: border-box;
  width: 38px !important;
  height: 38px !important;
  display: inline-grid !important;
  place-items: center;
  margin-right: 14px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--u-card-edge-hover) !important;
  background: var(--u-card-bg) !important;
  box-shadow: 0 0 0 4px var(--u-medal), 0 8px 16px -12px rgba(60, 38, 12, 0.5) !important;
}

.elementor-icon-list-icon:has(> i.icon-checked1, > i.icon-checked, > svg[class*="e-fas-check"], > svg.e-far-circle, > svg.e-fas-dot-circle) > :is(i, svg) {
  display: none !important;
}

.elementor-icon-list-icon:has(> i.icon-checked1, > i.icon-checked, > svg[class*="e-fas-check"], > svg.e-far-circle, > svg.e-fas-dot-circle)::before {
  content: "";
  width: 19px;
  height: 19px;
  background: var(--u-metal);
  -webkit-mask: var(--u-star-mask) center / contain no-repeat;
  mask: var(--u-star-mask) center / contain no-repeat;
}

/* The masterclass price card's features. */
.eael-pricing .li-icon:has(> svg[class*="e-fas-check"]) {
  display: inline-grid !important;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid var(--u-card-edge-hover);
  background: var(--u-card-bg);
  box-shadow: 0 0 0 3px var(--u-medal);
}

.eael-pricing .li-icon:has(> svg[class*="e-fas-check"]) > svg {
  display: none !important;
}

.eael-pricing .li-icon:has(> svg[class*="e-fas-check"])::before {
  content: "";
  width: 15px;
  height: 15px;
  background: var(--u-metal);
  -webkit-mask: var(--u-star-mask) center / contain no-repeat;
  mask: var(--u-star-mask) center / contain no-repeat;
}

/* Ticks inside buttons (the masterclass hero's badges, "5000+ Students" and
   "8+ Years Exp."): the icon itself takes the star's shape. */
.elementskit-btn > svg[class*="e-fas-check"],
.elementor-button svg[class*="e-fas-check"] {
  background: var(--u-metal);
  -webkit-mask: var(--u-star-mask) center / contain no-repeat;
  mask: var(--u-star-mask) center / contain no-repeat;
}

.elementskit-btn > svg[class*="e-fas-check"] path,
.elementor-button svg[class*="e-fas-check"] path {
  display: none;
}

/* ------------------------------------------------------------------- FAQs */
/* (2026-09-28, with the user's "why this first faq stays open": they now
   all start closed, tools/v2_faq_closed.py.) An open question showed a thin
   "91" arrow of another style in place of the chevron: now it is the same
   chevron, turned up. */
.elementskit-accordion .ekit_accordion_active_icon {
  display: none !important;
}

.elementskit-accordion .ekit_accordion_normal_icon {
  display: block !important;
  transition: transform 0.45s var(--u-ease);
}

.elementskit-accordion .ekit-accordion--toggler[aria-expanded="true"] .ekit_accordion_normal_icon {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------- videos */
/* A testimonial video that started by itself without sound (the browser
   allows sound only after the visitor has clicked or tapped the page):
   "Turn on sound" over its top edge, clear of the video's own controls
   (premium.js buildVideos). */
.elementor-widget-video .e-hosted-video {
  position: relative;
}

.sys-sound {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: -78px;                         /* centred without a transform */
  width: 156px;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(244, 223, 184, 0.55);
  border-radius: 999px;
  background: rgba(46, 33, 21, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff6e6;
  font: 600 0.78rem/1 var(--v2-body);
  letter-spacing: 0.04em;
  cursor: pointer;
  animation: sys-sound-in 0.5s var(--u-ease) both;
}

.sys-sound svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.sys-sound:hover,
.sys-sound:focus-visible {
  background: rgba(46, 33, 21, 0.88);
  outline: none;
  box-shadow: 0 0 0 2px var(--u-gold-soft);
}

@keyframes sys-sound-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The masterclass price: the struck-out old price was so small in the
   display serif that "1111" read as "llll" (2026-09-28 audit). In the body
   font, a step larger, beside "Free" (tools/v2_audit_fixes.py). */
.eael-pricing .price-tag .original-price {
  font-family: var(--v2-body) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em;
  opacity: 0.75;
  margin-right: 10px;
}

.eael-pricing .price-tag .original-price .price-currency {
  font-size: inherit !important;
  margin-right: 2px;
}

/* ---------------------------------------------------------------- privacy */
/* 2026-09-28: the Privacy Policy page (tools/v2_privacy.py), the line under
   each form (forms.js), the footer link, and the cookie choice (premium.js
   buildConsent). */

.pp-body {
  display: grid;
  gap: clamp(22px, 2.4vw, 34px);
  padding: var(--u-open-pad) max(var(--u-side), calc((100% - var(--u-wrap)) / 2)) var(--u-edge);
}

.pp-sec {
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--u-rule);
}

.pp-sec:first-child {
  border-top: 0;
  padding-top: 0;
}

.pp-h {
  margin: 0 0 12px !important;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--u-fs-sub) !important;
  line-height: 1.15;
  color: var(--u-head);
}

.pp-body p,
.pp-body li {
  font-family: var(--v2-body);
  font-size: var(--u-fs-body);
  line-height: 1.75;
  color: var(--u-text);
}

.pp-body p {
  margin: 0 0 0.8em !important;
}

.pp-body ul {
  margin: 0 0 0.8em !important;
  padding-left: 1.3em;
}

.pp-body li {
  margin-bottom: 0.45em;
}

.pp-body li::marker {
  color: var(--u-gold);
}

.pp-body b {
  color: var(--u-head);
  font-weight: 600;
}

.pp-body a:not(.v2-btn) {
  color: var(--u-gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pp-cookies {
  margin-top: 4px;
  cursor: pointer;
}

/* The line under each form. */
.sys-form-note {
  grid-column: 1 / -1;
  margin: 6px 0 0 !important;
  font-family: var(--v2-body);
  font-size: 0.78rem !important;
  line-height: 1.5;
  opacity: 0.85;
}

.sys-form-note a,
.sys-privacy-link {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The cookie choice: a small card at the foot of the screen, above the
   floating buttons, asked once. */
.sys-consent {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 10000;
  width: min(760px, calc(100% - 24px));
  margin-left: calc(min(760px, calc(100% - 24px)) / -2);   /* centred without a transform */
  display: flex;
  align-items: center;
  gap: 14px 20px;
  padding: 14px 16px 14px 20px;
  border: 1px solid rgba(240, 214, 166, 0.35);
  border-radius: 14px;
  background: rgba(58, 45, 32, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -16px rgba(20, 12, 4, 0.6);
  color: #f2e4d4;
  font-family: var(--v2-body);
  animation: sys-consent-in 0.45s var(--u-ease) both;
}

.sys-consent.is-leaving {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes sys-consent-in {
  from { opacity: 0; bottom: 4px; }
  to { opacity: 1; bottom: 16px; }
}

.sys-consent__text {
  flex: 1 1 auto;
  margin: 0 !important;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #f2e4d4;
}

.sys-consent__text a {
  color: #f4dfb8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sys-consent__acts {
  display: flex;
  gap: 8px;
  flex: none;
}

.sys-consent__btn {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(240, 214, 166, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #fffaf0;
  font: 600 0.82rem/1 var(--v2-body);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.sys-consent__btn--yes {
  border-color: transparent;
  background: linear-gradient(135deg, #d8b573, #f0d6a2);
  color: #2a1f15;
}

.sys-consent__btn:focus-visible {
  outline: 2px solid #f4dfb8;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .sys-consent {
    flex-direction: column;
    align-items: stretch;
    bottom: 10px;
  }

  .sys-consent__acts .sys-consent__btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sys-consent {
    animation: none;
  }
}

/* ----------------------------------------------------- reduced motion etc */

@media (prefers-reduced-motion: reduce) {
  .u-card,
  .elementor-button,
  .elementskit-btn {
    transition: none !important;
  }
}