.elementor-kit-7{--e-global-color-primary:#EED6D5;--e-global-color-secondary:#16100F;--e-global-color-text:#6B5B5C;--e-global-color-accent:#9A5F5B;--e-global-color-jroselt:#E3B4B0;--e-global-color-jinksoft:#241C1B;--e-global-color-jcream:#FBF6F5;--e-global-color-jcreamdim:#EBDDDB;--e-global-color-jtint:#F6E9E8;--e-global-color-jcard:#FFFFFF;--e-global-color-jblushdp:#D9B0AC;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.06em;--e-global-typography-primary-letter-spacing:-0.012em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:0.72rem;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.22em;background-color:#FBF6F5;color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-size:1rem;font-weight:400;line-height:1.65em;letter-spacing:-0.005em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{color:var( --e-global-color-secondary );font-family:"Playfair Display", Sans-serif;font-size:3.9rem;font-weight:700;line-height:1.08em;letter-spacing:-0.014em;}.elementor-kit-7 h2{color:var( --e-global-color-secondary );font-family:"Playfair Display", Sans-serif;font-size:3.05rem;font-weight:700;line-height:1.08em;letter-spacing:-0.014em;}.elementor-kit-7 h3{color:var( --e-global-color-secondary );font-family:"Playfair Display", Sans-serif;font-size:1.4rem;font-weight:700;line-height:1.08em;letter-spacing:-0.014em;}.elementor-kit-7 h4{color:var( --e-global-color-secondary );font-family:"Playfair Display", Sans-serif;font-size:1.15rem;font-weight:700;line-height:1.08em;letter-spacing:-0.014em;}.elementor-kit-7 h5{color:var( --e-global-color-secondary );font-family:"Playfair Display", Sans-serif;font-size:1rem;font-weight:700;line-height:1.08em;letter-spacing:-0.014em;}.elementor-kit-7 h6{color:var( --e-global-color-secondary );font-family:"Playfair Display", Sans-serif;font-size:0.9rem;font-weight:700;line-height:1.08em;letter-spacing:-0.014em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===== Julie's Hair Braiding — global helpers =====
   Only the visual details Elementor's native controls cannot express.
   Everything else is set on the containers/widgets themselves. */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Keep anchor targets clear of the sticky header */
:root { --j-nav-h: 96px; }
.elementor-element[id] { scroll-margin-top: calc(var(--j-nav-h) + 14px); }

/* --- Sticky header ---------------------------------------------------
   Glass bar. The shadow only appears once the header has stuck, so the
   hero reads as one uninterrupted surface at the top of the page. */
.j-header {
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.j-header.elementor-sticky--effects {
  box-shadow: 0 10px 30px -22px rgba(22,16,15,.55);
  background-color: rgba(251,246,245,.96) !important;
}

/* Mobile dropdown: Elementor already stretches and positions the panel
   under the bar (the nav widget's Full Width option). Only the shadow is
   added here — overriding max-height would pin the panel permanently open,
   because that is the property Elementor animates to open and close it. */
@media (max-width: 1024px) {
  .j-header .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    box-shadow: 0 18px 34px -26px rgba(22,16,15,.6);
  }
}

/* --- Photo cards -----------------------------------------------------
   Slow zoom on hover for the hero tiles and gallery slides. */
.j-shot {
  background-size: cover;
  transition: background-size .6s ease, transform .35s ease;
}
.j-shot:hover { background-size: 112% auto; }

/* Portrait ratio for gallery slides (Elementor has no aspect-ratio control) */
.j-ratio { aspect-ratio: 4 / 5; }

/* --- Showcase band ---------------------------------------------------
   The scrim keeps the copy readable over the photo; swap the photo on the
   container's Style > Background > Image control and this still holds. */
.j-showcase { position: relative; isolation: isolate; }
.j-showcase::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(22,16,15,.93) 0%,
    rgba(22,16,15,.80) 34%,
    rgba(36,28,27,.46) 66%,
    rgba(154,95,91,.24) 100%);
}
.j-showcase > * { position: relative; z-index: 1; }

/* --- Pill lists ------------------------------------------------------
   Applied to Icon List widgets set to Layout: Inline. Add, remove or
   reorder pills in the widget's Items repeater.

   Elementor spaces inline items with horizontal margins only, so wrapped
   rows collide. Switch to a real flex gap and zero the margins for even
   spacing in both directions. */
.j-chips .elementor-icon-list-items.elementor-inline-items,
.j-tags  .elementor-icon-list-items.elementor-inline-items,
.j-facts .elementor-icon-list-items.elementor-inline-items {
  display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 0;
}
.j-chips .elementor-icon-list-items.elementor-inline-items > li,
.j-tags  .elementor-icon-list-items.elementor-inline-items > li,
.j-facts .elementor-icon-list-items.elementor-inline-items > li { margin: 0; }

.j-chips .elementor-icon-list-icon,
.j-tags  .elementor-icon-list-icon { display: none; }
.j-chips .elementor-icon-list-item,
.j-tags  .elementor-icon-list-item { line-height: 1.5; }

/* Service tags: quiet by default, blush on hover */
.j-tags .elementor-icon-list-item {
  background: rgba(22,16,15,.055);
  border-radius: 999px; padding: .32rem .7rem;
  transition: background-color .18s ease, color .18s ease;
}
.j-tags .elementor-icon-list-item:hover { background: rgba(238,214,213,.75); }

/* --- "Everything we offer" chips: interactive ------------------------
   Each chip lifts, fills blush and casts a soft shadow on hover, so the
   list reads as something you can scan rather than a flat block of text. */
.j-chips .elementor-icon-list-item {
  border: 1px solid rgba(22,16,15,.13);
  border-radius: 999px; padding: .34rem .78rem;
  background: rgba(255,255,255,.55);
  cursor: default;
  transition: transform .2s cubic-bezier(.2,.7,.3,1),
              background-color .2s ease, border-color .2s ease,
              color .2s ease, box-shadow .2s ease;
}
.j-chips .elementor-icon-list-item:hover {
  transform: translateY(-3px);
  background: #EED6D5; border-color: #D9B0AC;
  box-shadow: 0 10px 20px -12px rgba(22,16,15,.5);
}
.j-chips .elementor-icon-list-item:hover .elementor-icon-list-text {
  color: #16100F;
}

/* Staggered entrance as the block scrolls into view; falls back to fully
   visible where reduced motion is preferred. */
@media (prefers-reduced-motion: no-preference) {
  .j-chips .elementor-icon-list-item {
    opacity: 0; transform: translateY(8px);
    animation: j-chip-in .5s ease forwards;
  }
  .j-chips .elementor-icon-list-item:nth-child(n+1)  { animation-delay: .02s; }
  .j-chips .elementor-icon-list-item:nth-child(n+10) { animation-delay: .08s; }
  .j-chips .elementor-icon-list-item:nth-child(n+20) { animation-delay: .14s; }
  .j-chips .elementor-icon-list-item:nth-child(n+30) { animation-delay: .20s; }
  .j-chips .elementor-icon-list-item:hover { animation: none; opacity: 1; }
}
@keyframes j-chip-in { to { opacity: 1; transform: translateY(0); } }

/* --- Hero facts strip ------------------------------------------------ */
.j-facts .elementor-icon-list-item { font-variant-numeric: tabular-nums; }

/* --- Service cards --------------------------------------------------- */
.j-card { transition: transform .25s ease, box-shadow .25s ease; }
.j-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -26px rgba(22,16,15,.34);
}

/* --- Opening-hours table (inside a Text Editor widget) --------------- */
.j-hours table {
  width: 100%; border-collapse: collapse; font-size: .93rem;
  border: 0; margin: 0;
}
.j-hours table, .j-hours tr, .j-hours th, .j-hours td { background: none; }
.j-hours th, .j-hours td {
  text-align: left; padding: .42rem 0; font-weight: 500;
  border: 0; border-bottom: 1px dashed rgba(22,16,15,.16);
}
.j-hours th { font-weight: 700; }
.j-hours tr:last-child th, .j-hours tr:last-child td { border-bottom: 0; }

/* --- Underlined contact links ---------------------------------------- */
.j-link a {
  text-decoration: none; font-weight: 700; color: inherit;
  border-bottom: 2px solid rgba(238,214,213,.9);
  transition: border-color .18s ease;
}
.j-link a:hover { border-color: #9A5F5B; }

/* --- Footer link lists ----------------------------------------------- */
.j-flinks .elementor-icon-list-icon { display: none; }
.j-flinks .elementor-icon-list-text { transition: color .18s ease; }

/* --- Gallery carousel ------------------------------------------------
   Arrows sit outside the track on desktop. On phones that side margin
   costs too much width, so overlay the arrows on the slide instead. */
@media (max-width: 767px) {
  #gallery .elementor-element.elementor-arrows-position-outside .swiper {
    width: 100%; margin-left: 0; margin-right: 0;
  }
  #gallery .elementor-swiper-button { z-index: 5; }
  #gallery .elementor-swiper-button-prev { left: 8px; }
  #gallery .elementor-swiper-button-next { right: 8px; }
}

/* --- Centre a width-limited block that sits in a stretch column ------ */
.j-center { margin-inline: auto; }

/* --- "Call" item inside the mobile menu ------------------------------
   The header already shows a dark call button on desktop, so this menu
   item is desktop-hidden and appears only in the burger dropdown, styled
   as a blush pill. Edit its label/link under Appearance > Menus. */
.elementor-nav-menu--main .elementor-nav-menu > li.j-nav-call {
  display: none !important;
}
.elementor-nav-menu--dropdown .j-nav-call { margin-top: 1rem; }
.elementor-nav-menu--dropdown .j-nav-call a.elementor-item {
  background: #EED6D5; color: #16100F !important;
  border-radius: 999px; justify-content: center; text-align: center;
  font-weight: 700; border-bottom: 0;
}
.elementor-nav-menu--dropdown .j-nav-call a.elementor-item:hover {
  background: #D9B0AC; color: #16100F !important;
}

/* --- FAQ accordion ---------------------------------------------------
   Elementor renders the summary marker on some browsers; hide it so the
   plus/minus icon is the only affordance. The heading inside <summary>
   also inherits the theme's h3 block margins, which collapse the row. */
.elementor-widget-n-accordion summary::-webkit-details-marker { display: none; }
.elementor-widget-n-accordion details > summary { list-style: none; }
.elementor-widget-n-accordion .e-n-accordion-item-title-header,
.elementor-widget-n-accordion .e-n-accordion-item-title-header > * {
  margin: 0;
}

/* The question is an <h3> for FAQ semantics, but Elementor styles it through
   a zero-specificity :where() rule, so the kit's global H3 typography wins
   and the title renders in the display serif at the heading colour. Re-assert
   the body face here; `color: inherit` keeps the summary's colour, which
   Elementor still drives from the widget's normal/hover/active controls. */
.elementor-widget-n-accordion .e-n-accordion-item-title-text {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.008em;
  color: inherit;
}/* End custom CSS */