.elementor-kit-6{--e-global-color-primary:#9B5F2C;--e-global-color-secondary:#292621;--e-global-color-text:#625D56;--e-global-color-accent:#F1B46A;--e-global-color-8373d32:#75431E;--e-global-color-856d321:#FFFDF9;--e-global-color-2562dac:#F7F1E7;--e-global-color-9946893:#EFE5D7;--e-global-color-099d1ee:#DFD4C7;--e-global-color-fff85e9:#1E6B4E;--e-global-color-2963406:#201E1B;--e-global-color-bd74241:#FFFFFF;--e-global-typography-primary-font-family:"Georgia";--e-global-typography-primary-font-size:84.8px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.12em;--e-global-typography-primary-letter-spacing:-0.0255em;--e-global-typography-secondary-font-family:"Georgia";--e-global-typography-secondary-font-size:56px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.12em;--e-global-typography-secondary-letter-spacing:-0.025em;--e-global-typography-text-font-family:"Arial";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Arial";--e-global-typography-accent-font-size:12.2px;--e-global-typography-accent-font-weight:800;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.11em;--e-global-typography-2fff189-font-family:"Georgia";--e-global-typography-2fff189-font-size:28px;--e-global-typography-2fff189-font-weight:700;--e-global-typography-2fff189-line-height:1.12em;--e-global-typography-2fff189-letter-spacing:-0.02em;--e-global-typography-8cc5b40-font-family:"Arial";--e-global-typography-8cc5b40-font-size:20.3px;--e-global-typography-8cc5b40-font-weight:400;--e-global-typography-8cc5b40-line-height:1.65em;--e-global-typography-332efe4-font-family:"Georgia";--e-global-typography-332efe4-font-size:48px;--e-global-typography-332efe4-font-weight:700;--e-global-typography-332efe4-line-height:1.12em;--e-global-typography-332efe4-letter-spacing:-0.02em;--e-global-typography-a770fce-font-family:"Arial";--e-global-typography-a770fce-font-size:14.4px;--e-global-typography-a770fce-font-weight:400;--e-global-typography-a770fce-line-height:1.65em;font-family:"Arial", Times New Roman, serif;font-size:16px;font-weight:400;line-height:1.65em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{color:var( --e-global-color-secondary );font-family:"Georgia", Times New Roman, serif;font-size:84.8px;font-weight:700;line-height:1.12em;letter-spacing:-0.025em;}.elementor-kit-6 h2{color:var( --e-global-color-secondary );font-family:"Georgia", Times New Roman, serif;font-size:56px;font-weight:700;line-height:1.12em;letter-spacing:-0.025em;}.elementor-kit-6 h3{color:var( --e-global-color-secondary );font-family:"Georgia", Times New Roman, serif;font-size:28px;font-weight:700;line-height:1.12em;letter-spacing:-0.025em;}.elementor-kit-6 h4{color:var( --e-global-color-secondary );font-family:"Georgia", Times New Roman, serif;font-size:24px;font-weight:700;line-height:1.12em;letter-spacing:-0.02em;}.elementor-kit-6 h5{font-family:"Arial", Times New Roman, serif;font-size:16px;font-weight:700;line-height:1.12em;}.elementor-kit-6 h6{font-family:"Arial", Times New Roman, serif;font-size:14px;font-weight:700;line-height:1.3em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1160px;}.e-con{--container-max-width:1160px;}.elementor-widget:not(:last-child){margin-block-end:18px;}.elementor-element{--widgets-spacing:18px 18px;--widgets-spacing-row:18px;--widgets-spacing-column:18px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{background-color:#141210;--lightbox-ui-color:var( --e-global-color-bd74241 );}@media(max-width:1050px){.elementor-kit-6{--e-global-typography-primary-font-size:63px;--e-global-typography-secondary-font-size:42px;--e-global-typography-2fff189-font-size:23px;--e-global-typography-8cc5b40-font-size:18px;}.elementor-kit-6 h1{font-size:63px;}.elementor-kit-6 h2{font-size:42px;}.elementor-kit-6 h3{font-size:23px;}.elementor-kit-6 h4{font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:720px){.elementor-kit-6{--e-global-typography-primary-font-size:64px;--e-global-typography-secondary-font-size:32px;--e-global-typography-2fff189-font-size:20.8px;--e-global-typography-8cc5b40-font-size:17.1px;--e-global-typography-332efe4-font-size:30.4px;}.elementor-kit-6 h1{font-size:63px;}.elementor-kit-6 h2{font-size:32px;}.elementor-kit-6 h3{font-size:20.8px;}}@media(max-width:430px){.elementor-kit-6{--e-global-typography-primary-font-size:52px;}.elementor-kit-6 h1{font-size:41px;}.elementor-kit-6 h2{font-size:32px;}.elementor-kit-6 h3{font-size:21px;}.elementor-kit-6 h4{font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===========================================================================
   Polsterei Herne — Elementor Site Settings → Custom CSS
   Paste the whole file. Namespace: lilo-  (enter class names in Elementor's
   Advanced → CSS Classes field WITHOUT the leading dot).

   Scope rule: everything in here is a thing Elementor's UI cannot do natively.
   If a value can be set in a Style tab, it is NOT in this file — set it in the
   UI so the site stays editable by a non-developer.
   ========================================================================= */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --ink:#292621; --ink-soft:#625d56; --paper:#fffdf9;
  --cream:#f7f1e7; --cream-2:#efe5d7; --brand:#9b5f2c;
  --brand-dark:#75431e; --accent:#f1b46a; --line:#dfd4c7;
  --success:#1e6b4e; --radius:22px;
  --shadow:0 18px 60px rgba(54,42,28,.12);
  --shadow-card:0 12px 38px rgba(54,42,28,.07);
}

/* --- 2. Font stacks -------------------------------------------------------
   THE ONLY PLACE FONT FAMILY IS SET. Elementor's font picker cannot hold a
   fallback stack (it emits `Georgia, Sans-serif`), and only the four built-in
   global slots expose a CSS variable to patch — custom slots do not. So every
   Global Font slot's Family must be left on "Default" and the stacks live
   here. Sizes, weights, line-heights and letter-spacing stay in Global Fonts.

   If a heading ever renders as sans-serif, someone picked a family in a
   widget's Style tab — clear it, don't add CSS. */
body,
.elementor-widget-text-editor,
.elementor-field-textual,
.elementor-button{font-family:Arial,"Segoe UI",sans-serif}

/* Headings that deliberately use the body face: footer column titles.
   (.lilo-eyebrow and .lilo-num set their own family in §4 and §8.) */
.lilo-footer-title,.lilo-footer-title .elementor-heading-title{
  font-family:Arial,"Segoe UI",sans-serif;letter-spacing:normal;
}

/* --- 3. Base ------------------------------------------------------------- */
body{background:var(--paper)}
p{margin:0 0 18px}
.lilo-lead{max-width:68ch}

/* --- 4. Eyebrow -----------------------------------------------------------
   Class goes on a Heading widget (HTML tag: div). The 34x2 dash is drawn by
   ::before on the inner title so it sits on the text baseline row. */
.lilo-eyebrow,
.lilo-eyebrow .elementor-heading-title{
  display:inline-flex;align-items:center;gap:8px;color:var(--brand-dark);
  font-family:Arial,"Segoe UI",sans-serif;font-weight:800;font-size:.76rem;
  line-height:1.4;text-transform:uppercase;letter-spacing:.11em;
}
.lilo-eyebrow .elementor-heading-title::before{
  content:"";width:34px;height:2px;background:var(--accent);flex:0 0 auto;
}

/* --- 5. Section head ------------------------------------------------------
   Class on the container holding [text block] + [optional button]. */
.lilo-sechead{align-items:flex-end;margin-bottom:42px}
.lilo-sechead > *:first-child{max-width:760px}
@media(max-width:720px){
  .lilo-sechead{margin-bottom:30px}
}

/* --- 6. Buttons -----------------------------------------------------------
   Everything else (colours, padding, radius, typography) is native. */
.lilo-btn .elementor-button{
  min-height:48px;line-height:1.2;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;
}
.lilo-btn .elementor-button:hover{transform:translateY(-2px)}
.lilo-btn .elementor-button-icon{margin-inline-end:0}
.lilo-btn .elementor-button-content-wrapper{gap:9px;align-items:center}
@media(max-width:720px){
  .lilo-hero-actions .lilo-btn,
  .lilo-hero-actions .lilo-btn .elementor-button{width:100%}
}

/* --- 7. Card --------------------------------------------------------------
   lilo-card  → the card container (bg/border/radius/shadow set natively)
   lilo-media → the Image widget inside it (fixed 4:3 crop + hover zoom) */
.lilo-card{overflow:hidden}
.lilo-media{aspect-ratio:4/3;overflow:hidden;display:block}
.lilo-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s}
.lilo-card:hover .lilo-media img{transform:scale(1.06)}

/* --- 8. Steps (auto-numbered 01–04) --------------------------------------
   lilo-steps → parent container, lilo-step → each of the 4 child containers.
   Both classes are required; the counter lives on the parent. */
.lilo-steps{counter-reset:steps}
.lilo-step{counter-increment:steps}
.lilo-step::before{
  content:"0" counter(steps);display:grid;place-items:center;
  width:48px;height:48px;border-radius:15px;background:var(--ink);
  color:var(--accent);font-weight:900;margin-bottom:22px;flex:0 0 auto;
}

/* Service block number label (.num on a Heading/Text widget) */
.lilo-num,
.lilo-num .elementor-heading-title{
  font-family:Arial,"Segoe UI",sans-serif;font-size:12.5px;font-weight:900;
  color:var(--brand);letter-spacing:.1em;
}

/* --- 9. Split + floating note --------------------------------------------
   lilo-note-host → the media-side container (must be position:relative)
   lilo-note      → the note widget itself */
.lilo-note-host{position:relative}
.lilo-note{
  position:absolute;right:-22px;bottom:-24px;max-width:250px;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:18px;
  box-shadow:var(--shadow);font-weight:700;
}
@media(max-width:720px){
  .lilo-note{position:static;max-width:none;margin-top:18px}
}

/* --- 10. Project grid -----------------------------------------------------
   Asymmetric row/column spans are not expressible in flexbox, so this one
   container is switched to CSS Grid. !important is required because
   Elementor's `.e-con{display:flex}` loads with equal specificity.
   lilo-projects → parent; children are plain containers in DOM order. */
.lilo-projects{
  display:grid!important;grid-template-columns:1.2fr .8fr .8fr;
  grid-auto-rows:270px;gap:16px;
}
.lilo-projects > *{width:auto;max-width:none;min-width:0}
.lilo-projects > *:nth-child(1){grid-row:span 2}
.lilo-projects > *:nth-child(4){grid-column:span 2}
@media(max-width:1050px){
  .lilo-projects{grid-template-columns:1fr 1fr}
  .lilo-projects > *:nth-child(1),
  .lilo-projects > *:nth-child(4){grid-row:auto;grid-column:auto}
}
@media(max-width:720px){
  .lilo-projects{grid-template-columns:1fr;grid-auto-rows:260px}
}

/* Project tile + caption overlay */
.lilo-tile{position:relative;overflow:hidden;border-radius:20px}
.lilo-tile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s}
.lilo-tile:hover img{transform:scale(1.06)}
.lilo-tile .elementor-widget-image,
.lilo-tile .elementor-widget-image .elementor-widget-container{height:100%}
.lilo-tile-cap{
  position:absolute;inset:auto 0 0 0;padding:36px 20px 18px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
}
.lilo-tile-cap strong{display:block;font-size:17px;font-weight:700}
.lilo-tile-cap span{display:block;font-size:14px;color:#eee}

/* --- 11. Stats bar --------------------------------------------------------
   lilo-stats → the 4-cell container. Overlaps the hero by -30px, so the hero
   container's Advanced → Overflow must stay Default (visible). */
.lilo-stats{margin-top:-30px;position:relative;z-index:3}
.lilo-stats > *:not(:last-child){border-right:1px solid var(--line)}
@media(max-width:1050px){
  .lilo-stats > *:nth-child(2){border-right:0}
  .lilo-stats > *:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:720px){
  .lilo-stats > *{border-right:0!important}
  .lilo-stats > *:not(:last-child){border-bottom:1px solid var(--line)}
}

/* --- 12. FAQ (Accordion widget with nested elements) ---------------------
   NOTE: the legacy Accordion widget (.elementor-accordion-*) is deprecated.
   These .elementor-kit-6s target the current nested Accordion (<details>/<summary>).
   Colours, padding, icon and typography are set natively; this block only
   strips the default box and squares the corners. */
.lilo-faq .e-n-accordion-item{border:0;border-bottom:1px solid var(--line);
  border-radius:0}
.lilo-faq .e-n-accordion-item-title{border-radius:0}
.lilo-faq summary::-webkit-details-marker{display:none}
.lilo-faq summary{list-style:none}

/* --- 13. CTA band ---------------------------------------------------------
   lilo-cta → the gradient container inside the section container. */
.lilo-cta{position:relative;overflow:hidden}
.lilo-cta::after{
  content:"";position:absolute;width:300px;height:300px;pointer-events:none;
  border:70px solid rgba(241,180,106,.12);border-radius:50%;
  right:-120px;top:-110px;
}
.lilo-cta > *{position:relative;z-index:1}

/* --- 14. Check lists ------------------------------------------------------
   lilo-ticks → Icon List widget (hero trust row + in-copy check lists) */
.lilo-ticks .elementor-icon-list-icon{
  width:24px;height:24px;border-radius:50%;background:#e1eee7;
  display:grid;place-items:center;flex:0 0 auto;
}
.lilo-ticks .elementor-icon-list-icon svg{width:12px;height:12px;fill:var(--success)}

/* --- 15. City pills -------------------------------------------------------
   lilo-pills → Text Editor widget containing a <ul> */
.lilo-pills ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:0;padding:0}
.lilo-pills li{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 14px;font-weight:700}

/* --- 16. Notice box ------------------------------------------------------- */
.lilo-notice{border-left:4px solid var(--accent);background:var(--cream);
  padding:16px 18px;border-radius:0 12px 12px 0}

/* --- 17. Portfolio: Pro Gallery ---------------------------------------------
   lilo-gallery → Gallery (Pro) widget, Type: Multiple, Layout: Masonry.
   Set Filter Bar > Pointer: None natively FIRST, and leave the filter text
   colours unset in the Style tab — they are all specified here so the pills
   match .lilo-pills (§15). Two sources of truth = drift.
   Selector reference: portfolio-gallery-elementor-build.md §8.1.              */

/* Filter bar → pills.
   Corrected 2026-08-02 against the staging DOM. Two names were wrong:
     .elementor-gallery-titles-container  →  .elementor-gallery__titles-container
     .elementor-gallery-title--active     →  .elementor-item-active
   Pills are <a class="elementor-item elementor-gallery-title">. .elementor-item
   carries the theme's nav link colour, so the colour declarations are doubled
   up on .elementor-item to win on specificity without !important. */
.lilo-gallery .elementor-gallery-title,
.lilo-gallery .elementor-item.elementor-gallery-title{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;font-weight:800;color:var(--ink);cursor:pointer;
  text-decoration:none;
  transition:background .2s,border-color .2s,color .2s;
}
.lilo-gallery .elementor-item.elementor-gallery-title:hover{
  border-color:var(--brand);color:var(--ink);
}
.lilo-gallery .elementor-gallery-title.elementor-item-active,
.lilo-gallery .elementor-item.elementor-gallery-title.elementor-item-active{
  background:var(--ink);border-color:var(--ink);color:#fff;
}
.lilo-gallery .elementor-gallery-title:focus-visible{
  outline:3px solid rgba(241,180,106,.55);outline-offset:2px;
}

/* Elementor's own pointer markup. Set Pointer: None in the Style tab as well —
   this is belt and braces for the underline/overline pseudo-elements. */
.lilo-gallery .elementor-gallery-title::before,
.lilo-gallery .elementor-gallery-title::after{display:none}

/* Mobile: one scrolling row beats a wrapping one. */
@media(max-width:720px){
  .lilo-gallery .elementor-gallery__titles-container{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:-20px;padding-inline:20px;
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .lilo-gallery .elementor-gallery__titles-container::-webkit-scrollbar{display:none}
  .lilo-gallery .elementor-gallery-title{flex:0 0 auto}
}

/* Tile: clip, zoom on hover, badge.
   .e-gallery-image is the background-image div — there is no <img> to target. */
.lilo-gallery .elementor-gallery-item{
  border-radius:16px;overflow:hidden;position:relative;cursor:zoom-in;
}
.lilo-gallery .e-gallery-image{transition:transform .35s}
.lilo-gallery .elementor-gallery-item:hover .e-gallery-image{transform:scale(1.025)}
.lilo-gallery .elementor-gallery-item::after{
  content:"View";position:absolute;left:10px;bottom:10px;z-index:2;
  background:rgba(44,41,38,.84);color:#fff;padding:6px 10px;border-radius:10px;
  font-family:Arial,"Segoe UI",sans-serif;font-size:.78rem;font-weight:800;
  opacity:0;transform:translateY(6px);transition:.2s;pointer-events:none;
}
.lilo-gallery .elementor-gallery-item:hover::after{opacity:1;transform:none}

@media(hover:none){
  .lilo-gallery .elementor-gallery-item::after{opacity:1;transform:none}
  .lilo-gallery .elementor-gallery-item:hover .e-gallery-image{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .lilo-gallery .e-gallery-image,
  .lilo-gallery .elementor-gallery-item::after{transition:none}
  .lilo-gallery .elementor-gallery-item:hover .e-gallery-image{transform:none}
}

/* --- 18. Contact form -----------------------------------------------------
   lilo-form → the Form widget. Focus states have no native control. */
.lilo-form .elementor-field-textual:focus{
  outline:3px solid rgba(241,180,106,.38);outline-offset:0;
  border-color:var(--brand);
}
.lilo-form textarea.elementor-field-textual{min-height:150px;resize:vertical}
.lilo-form .elementor-field-label{display:block;font-weight:800;margin-bottom:7px}
.lilo-form .elementor-field-description{font-size:14px;color:var(--ink-soft);
  margin-top:5px}
.lilo-form .elementor-message-success{color:var(--success)}

/* --- 18b. Form — the three controls Elementor doesn't expose --------------
   1. Field padding: the Form widget's Style > Field group has no padding
      control. Native alternative: Site Settings > Theme Style > Form Fields >
      Padding (global, applies to every form on the site). Use ONE of the two —
      Theme Style outputs a higher-specificity .elementor-kit-6 and would win. */
.lilo-form .elementor-field-textual{padding:13px 14px}

/* 2. + 3. The Form widget exposes a Button *ID* field but no Button *Class*
      field, so .lilo-btn cannot be attached to the submit button, and the
      button has no box-shadow control either. Both mirrored here from §6. */
.lilo-form .elementor-button{
  min-height:48px;line-height:1.2;
  box-shadow:0 10px 28px rgba(155,95,44,.25);
  transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;
}
.lilo-form .elementor-button:hover{transform:translateY(-2px)}
.lilo-form .elementor-button-content-wrapper{gap:9px;align-items:center}

/* --- 19. Header -----------------------------------------------------------
   lilo-header → the nav container in the Header template (NOT the top bar).
   Uses real position:sticky rather than Elementor's fixed sticky effect, so
   nothing below it jumps. Requires no ancestor with overflow:hidden. */
.lilo-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,253,249,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(155,95,44,.14);
}

/* The Theme Builder wrapper is only as tall as the header itself, which is the
   sticky containing block — that leaves zero sticky travel and the bar scrolls
   away like a static one. Removing the wrapper's box makes <body> the
   containing block so the header sticks for the whole page. */
.elementor-location-header{display:contents}

/* Logged-in admin bar */
body.admin-bar .lilo-header{top:32px}
@media(max-width:600px){body.admin-bar .lilo-header{top:0}}

@media(max-width:1050px){
  /* `nav` tag is required: Elementor puts .elementor-nav-menu--dropdown on BOTH
     the mobile panel (a <nav>) and every desktop sub-menu (a <ul>). Without the
     tag this rule also fires on the Services sub-menu and throws it across the
     viewport as a fixed panel. */
  .lilo-nav nav.elementor-nav-menu--dropdown{
    position:fixed;inset:78px 16px auto;background:#fff;
    border:1px solid var(--line);border-radius:18px;padding:12px;
    box-shadow:var(--shadow);
  }
  /* Top bar is visible 721–1050, hidden ≤720, so the offset differs. */
  @media(min-width:721px){
    .lilo-nav nav.elementor-nav-menu--dropdown{top:137px}
  }
  .lilo-header-cta{display:none}
  .lilo-nav .elementor-menu-toggle{
    width:46px;height:46px;background:#fff;border:1px solid var(--line);
    border-radius:12px;
  }
}

/* --- 19b. Services dropdown ----------------------------------------------
   Everything Elementor's Nav Menu → Style → Dropdown CAN do (colours, type,
   padding, radius, shadow, divider, distance) is set natively. This block is
   only the four things it cannot: panel width, the entrance animation, the
   caret glyph, and collapsing the panel back to a flat list on mobile.

   Scoped to `ul.sub-menu` so none of it leaks onto the mobile nav panel.

   The extra `.elementor-nav-menu` in each .elementor-kit-6 is not decoration — it
   raises specificity to 0-3-x so these beat Elementor's own widget CSS, which
   sets `width:12em` on the panel and `display:flex` on the caret at 0-2-x and
   loads after the kit stylesheet. Drop it and nothing here applies. */

/* Width — Elementor sets `width:12em` (~184px) and SmartMenus writes an inline
   width when it initialises, so this needs both `width` (min-width will not
   override a declared width) and !important (nothing beats inline otherwise). */
.lilo-nav .elementor-nav-menu ul.sub-menu{
  width:262px!important;
  padding:8px!important;      /* native Vertical Padding styles the items, not the panel */
  overflow:hidden;            /* clip item hover to the panel radius */
  animation:lilo-dd .18s ease-out both;
  transform-origin:top center;
}

/* Entrance — Elementor's pointer animation applies to top-level items only;
   the sub-menu otherwise just pops in. */
@keyframes lilo-dd{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* Rounded hover on the individual rows. The native Dropdown border radius
   applies to the panel only. Sub-menu links are .elementor-sub-item, NOT
   .elementor-item.

   !important is needed because Elementor emits a per-widget rule that rounds
   the FIRST row's top corners to the panel radius (16px) so it can sit flush
   against a panel with no padding. This panel has 8px padding, so that row
   would otherwise be rounder than the rest. */
.lilo-nav .elementor-nav-menu ul.sub-menu .elementor-sub-item{border-radius:12px!important}

/* Caret — swap SmartMenus' text caret for a chevron that flips on open. */
.lilo-nav .elementor-nav-menu .sub-arrow{
  display:flex;align-items:center;justify-content:center;
  /* Elementor gives .sub-arrow `padding:10px 0 10px 10px` on a border-box, which
     silently floors it at 10x20 — the padding has to go before width/height mean
     anything. The gap is re-created with margin-left. */
  padding:0!important;
  width:9px!important;height:9px!important;
  margin-left:7px;border:0;background:none;
  font-size:0;line-height:0;flex:0 0 auto;transition:transform .2s;
}
.lilo-nav .elementor-nav-menu .sub-arrow::before{
  content:"";display:block;width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(0,-2px);
}
.lilo-nav .menu-item-has-children.highlighted > a .sub-arrow,
.lilo-nav .menu-item-has-children:hover > a .sub-arrow{transform:rotate(180deg)}

@media(max-width:1050px){
  /* Top-level rows inside the mobile panel. Elementor applies the Dropdown
     Border Radius to the FIRST row's top corners and the LAST row's bottom
     corners only — it assumes a panel with no padding — so rows in between
     hover as hard squares. Measured: [16 16 0 0], 0, 0, 0, [0 0 16 16].
     !important because that rule carries the per-widget id class. */
  .lilo-nav nav.elementor-nav-menu--dropdown .elementor-item{
    border-radius:12px!important;
  }

  /* Inside the mobile panel the sub-menu goes back to a flat static list —
     no card, no absolute positioning, no animation. */
  .lilo-nav .elementor-nav-menu ul.sub-menu{
    position:static!important;width:auto!important;box-shadow:none!important;
    border:0!important;border-radius:0!important;animation:none;
    padding:0 0 0 12px!important;background:transparent!important;
  }
}

/* --- 20. Footer ---------------------------------------------------------- */
.lilo-footer-bottom{border-top:1px solid rgba(255,255,255,.13);
  margin-top:48px;padding-top:22px}

/* --- 21. Floating action buttons ----------------------------------------- */
.lilo-fab{position:fixed;right:18px;bottom:18px;z-index:900;
  display:flex;flex-direction:column;gap:12px}
.lilo-fab .elementor-icon{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
}

/* --- 22. Legal pages ------------------------------------------------------ */
.lilo-legal{max-width:850px}
.lilo-legal h2{font-size:26.4px;margin-top:36px}
.lilo-legal h3{font-size:20px;margin-top:28px}

/* --- 23. Breadcrumbs ------------------------------------------------------ */
.lilo-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14.4px;
  color:var(--ink-soft);margin-bottom:24px}
.lilo-crumbs a{color:var(--brand-dark)}

/* --- 23b. Breadcrumbs — fix ------------------------------------------------
   .lilo-crumbs lands on .elementor-widget, whose only child is
   .elementor-widget-container, so flex + gap on the wrapper is a no-op.
   Move the flex context inward. Overrides §23 above. */
.lilo-crumbs{display:block}
.lilo-crumbs .elementor-widget-container{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}

/* --- 25. Contact panel links ----------------------------------------------
   lilo-panel → the Ink contact panel on the Contact page. */
.lilo-panel a{color:#d9d2ca;text-decoration:none}
.lilo-panel a:hover,
.lilo-panel a:focus-visible{color:#fff;text-decoration:underline}

/* --- 24. Accessibility ---------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ===========================================================================
   OPTIONAL — fluid type
   Elementor's responsive font sizes step at the breakpoint, so between
   1051px and ~1413px the H1 renders at the full 84.8px where the live site
   renders 6vw (~63–85px). If that stepping is visible enough to bother you,
   uncomment this block and CLEAR the font-size fields on the Primary and
   Secondary global fonts so there is only one source of truth.
   ---------------------------------------------------------------------------
.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.55rem,6vw,5.3rem)}
.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(2rem,4vw,3.5rem)}
.elementor-widget-heading h3.elementor-heading-title{font-size:clamp(1.3rem,2.2vw,1.75rem)}
.lilo-lead{font-size:clamp(1.07rem,1.6vw,1.27rem)}
.lilo-cta h2.elementor-heading-title{font-size:clamp(1.9rem,3vw,3rem)}
@media(max-width:720px){
  .elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.45rem,12vw,4rem)}
}
   ========================================================================= *//* End custom CSS */