/*
Theme Name: Hello Elementor Child — Advanced Res. & Construction Cleaning
Theme URI: https://advanced-cleaning.com
Description: Child theme for Hello Elementor, customized for Advanced Residential & Construction Cleaning. Native Elementor build — utility/component class library.
Author: Tuskr Media
Author URI: https://tuskrmedia.com
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
*/

/* ============================================================
   v2 — NATIVE ELEMENTOR BUILD
   Elementor owns STRUCTURE (containers, column ratios, gaps,
   padding, responsive stacking). This file owns LOOK (type,
   color, buttons, cards, lists, chrome).

   How classes get applied:
   - Put "arc-scope" on every top-level SECTION container.
   - Put utility classes (u-*) in a widget's Advanced > CSS Classes.
   - Button variants use a dual class so they beat Elementor's
     default WITHOUT !important (.elementor-button.u-btn-secondary).
   ============================================================ */

/* ============================================================
   DESIGN TOKENS — map each into Elementor Global Colors (same names)
   ============================================================ */
:root {
  --brand-primary: #87A646;
  --brand-primary-soft: #EEF3E1;
  --brand-primary-dark: #6E8A38;
  --brand-primary-deep: #56702A;

  --ink: #1A1A1A;
  --ink-soft: #5F5E5A;
  --ink-subtle: #9A9A95;

  --surface-bg: #FFFFFF;
  --surface-cream: #FBFAF6;
  --surface-alt: #F5F2EB;
  --border: #E3E0D6;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  --transition: 250ms ease;
}

/* ============================================================
   SCOPE / BASE — apply "arc-scope" to each top-level section
   container. Sets font + box-sizing safety. (Global Fonts also
   set Manrope; this is the belt-and-suspenders.)
   ============================================================ */
.arc-scope, .arc-scope *, .arc-scope *::before, .arc-scope *::after { box-sizing: border-box; }
.arc-scope {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   Headings (H1–H3) get their size/weight from Theme Style, so a
   native Heading widget needs NO class. These cover the rest.
   Selectors reach Elementor's inner text node so they work when
   applied to a Heading or Text widget's CSS Classes field.
   ============================================================ */
/* EYEBROW — apply to a Heading widget (tag = p) or Text widget */
.u-eyebrow,
.u-eyebrow .elementor-heading-title,
.u-eyebrow .elementor-widget-container {
  margin: 0 0 14px; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-soft); line-height: 1.4;
}
.u-eyebrow--accent, .u-eyebrow--accent .elementor-heading-title { color: var(--brand-primary-deep); }
.u-eyebrow--ondark, .u-eyebrow--ondark .elementor-heading-title { color: var(--brand-primary); }

/* LEAD + BODY paragraphs — apply to Text Editor widget */
.u-lead, .u-lead p { font-size: 17px; color: var(--ink-soft); line-height: 1.7; }
.u-body, .u-body p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; }
.u-muted, .u-muted p { color: var(--ink-subtle); }

/* light text on dark sections (headings/paragraphs) */
.u-text-light, .u-text-light .elementor-heading-title { color: #fff; }
.u-text-light.u-body p, .u-text-light .u-body p, .u-text-light p { color: rgba(255,255,255,0.72); }

/* ============================================================
   BUTTONS
   Primary = Elementor Theme Style default (no class needed on a
   native Button widget). Variants below use a dual class so they
   win specificity cleanly. Bare .u-btn-* also provided for plain
   <a> links (e.g. inside the header) that aren't Button widgets.
   ============================================================ */
.u-btn-primary, .u-btn-secondary, .u-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  padding: 15px 28px; border-radius: var(--radius-pill);
  transition: all var(--transition); border: 1px solid transparent; cursor: pointer; line-height: 1;
}
.u-btn-primary { background: var(--brand-primary); color: #fff; }
.u-btn-primary:hover { background: var(--brand-primary-dark); color: #fff; }
.u-btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.u-btn-secondary:hover { background: var(--ink); color: #fff; }
.u-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.u-btn-outline:hover { background: #fff; color: var(--ink); }

/* dual-class forms for native Button widgets (no !important needed) */
.elementor-button.u-btn-secondary {
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
}
.elementor-button.u-btn-secondary:hover { background: var(--ink); color: #fff; }
.elementor-button.u-btn-outline {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.45);
}
.elementor-button.u-btn-outline:hover { background: #fff; color: var(--ink); }

/* ghost text link with arrow — apply to a Button widget set to "text" or a link */
.u-btn-ghost, .elementor-button.u-btn-ghost {
  background: transparent; border: none; padding: 0;
  color: var(--brand-primary-deep); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.u-btn-ghost svg, .u-btn-ghost .elementor-button-icon { transition: transform var(--transition); }
.u-btn-ghost:hover svg { transform: translateX(4px); }

/* ============================================================
   SECTION BACKGROUNDS — apply to a section container.
   (You can also set bg via Global Color in the panel; these keep
   it in one source of truth and pair color rhythm with text color.)
   ============================================================ */
.u-bg-cream { background: var(--surface-cream); }
.u-bg-alt   { background: var(--surface-alt); }
.u-bg-soft  { background: var(--brand-primary-soft); }
.u-bg-ink   { background: var(--ink); }
/* dark-section text. The .arc-scope.u-bg-ink prefix (0-3-0) outranks
   Elementor's Theme Style global heading color on a specificity tie,
   so headings stay white without !important. */
.u-bg-ink { color: #fff; }
.arc-scope.u-bg-ink .elementor-heading-title,
.arc-scope.u-bg-ink h1, .arc-scope.u-bg-ink h2, .arc-scope.u-bg-ink h3,
.arc-scope.u-bg-ink h4, .arc-scope.u-bg-ink h5, .arc-scope.u-bg-ink h6 { color: #fff; }
.arc-scope.u-bg-ink p,
.arc-scope.u-bg-ink .elementor-widget-text-editor { color: rgba(255,255,255,0.72); }
/* eyebrows must beat the white rule above (0-4-0 > 0-3-0) */
.arc-scope .u-eyebrow--accent .elementor-heading-title { color: var(--brand-primary-deep); }
.arc-scope.u-bg-ink .u-eyebrow--ondark .elementor-heading-title,
.arc-scope .u-eyebrow--ondark .elementor-heading-title { color: var(--brand-primary); }

/* ============================================================
   CARD — apply to a CONTAINER acting as a card
   ============================================================ */
.u-card {
  background: var(--surface-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform var(--transition), border-color var(--transition);
}
.u-card:hover { border-color: var(--brand-primary); transform: translateY(-3px); }

/* icon badge — apply to an Icon widget (or its wrapping container) */
.u-icon-badge, .u-icon-badge .elementor-icon {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--brand-primary-soft); color: var(--brand-primary-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.u-icon-badge.sharp, .u-icon-badge.sharp .elementor-icon { border-radius: var(--radius-sm); }
.u-icon-badge svg, .u-icon-badge i { width: 22px; height: 22px; }

/* ============================================================
   SITE HEADER  (Theme Builder > Header, native)
   Container: flex row, align center, space-between. Class:
   "arc-header arc-scope". Sticky via CSS here (no JS).
   ============================================================ */
.arc-header {
  position: sticky; top: 0; z-index: 999;
  background: rgba(251,250,246,0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* logo lockup (placeholder text version; swap for Image widget) */
.arc-header__logo .elementor-heading-title { font-size: 13.5px; font-weight: 700; line-height: 1.18; letter-spacing: -0.2px; color: var(--ink); max-width: 220px; }
.arc-header__logo img { height: 42px; width: auto; }

/* Nav Menu widget — point its colors at Global Colors in the panel;
   these set type + active + hover so you don't fiddle further. */
.arc-header__nav .elementor-item { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); transition: color var(--transition); }
.arc-header__nav .elementor-item:hover,
.arc-header__nav .elementor-item.elementor-item-active { color: var(--ink); }
.arc-header__nav .elementor-item.elementor-item-active { font-weight: 600; }
/* mobile dropdown panel */
.arc-header__nav .elementor-nav-menu--dropdown { background: var(--surface-cream); border-top: 1px solid var(--border); }
.arc-header__nav .elementor-nav-menu--dropdown a.elementor-item { color: var(--ink); border-bottom: 1px solid var(--border); padding: 15px 24px; }
.arc-header__nav .elementor-menu-toggle { color: var(--ink); }

.arc-header__phone { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.arc-header__phone:hover { color: var(--brand-primary-deep); }
.arc-header__phone svg, .arc-header__phone i { color: var(--brand-primary-deep); }

/* ============================================================
   SITE FOOTER  (Theme Builder > Footer, native)
   Section container class: "arc-footer arc-scope". Columns are an
   Elementor grid/flex; these style the contents.
   ============================================================ */
.arc-footer { background: var(--ink); color: rgba(255,255,255,0.7); }
.arc-footer .elementor-heading-title { color: #fff; }
.arc-footer__brand .elementor-heading-title { font-size: 16px; font-weight: 700; }
.arc-footer__desc, .arc-footer__desc p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.6); }

/* column title — apply u-foot-title to the column's Heading widget */
.u-foot-title .elementor-heading-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; color: rgba(255,255,255,0.45); }

/* link lists — works for an Icon List widget OR a Text Editor list */
.arc-footer ul { list-style: none; margin: 0; padding: 0; }
.arc-footer li { margin-bottom: 12px; }
.arc-footer li:last-child { margin-bottom: 0; }
.arc-footer .elementor-icon-list-item a,
.arc-footer .elementor-icon-list-text,
.arc-footer ul li a,
.arc-footer p a { font-size: 14.5px; color: rgba(255,255,255,0.72); transition: color var(--transition); }
.arc-footer .elementor-icon-list-item a:hover,
.arc-footer ul li a:hover,
.arc-footer p a:hover { color: #fff; }

/* bottom bar — a thin container with border-top; class u-foot-bottom */
.u-foot-bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.u-foot-bottom, .u-foot-bottom p, .u-foot-bottom .elementor-heading-title { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 400; }
.u-foot-bottom a { color: rgba(255,255,255,0.6); }
.u-foot-bottom a:hover { color: #fff; }

/* ============================================================
   NATIVE FORM (Contact) — apply class "arc-form" to the Form widget.
   Field column widths (50/50 pairs) are set per field in the panel;
   everything visual lives here.
   ============================================================ */
.arc-form .elementor-field-group { margin-bottom: 18px; }
.arc-form .elementor-field-group > label,
.arc-form .elementor-field-label { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.arc-form .elementor-field-required .elementor-field-label:after,
.arc-form .elementor-mark-required .elementor-field-label:after { content: " *"; color: var(--brand-primary-deep); font-weight: 700; }
.arc-form input[type="text"], .arc-form input[type="tel"], .arc-form input[type="email"],
.arc-form select, .arc-form textarea {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-cream); transition: border-color var(--transition), box-shadow var(--transition);
}
.arc-form ::placeholder { color: var(--ink-subtle); opacity: 1; }
.arc-form select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F5E5A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px;
}
.arc-form input:focus, .arc-form select:focus, .arc-form textarea:focus {
  outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(135,166,70,0.14);
}
.arc-form textarea { resize: vertical; min-height: 96px; }
.arc-form .elementor-field.elementor-error,
.arc-form .elementor-error input, .arc-form .elementor-error textarea, .arc-form .elementor-error select { border-color: #C0492F; box-shadow: 0 0 0 3px rgba(192,73,47,0.12); }
.arc-form .elementor-message { font-size: 13.5px; line-height: 1.5; border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 6px; }
.arc-form .elementor-message.elementor-message-success { background: var(--brand-primary-soft); color: var(--brand-primary-deep); }
.arc-form .elementor-message.elementor-message-danger { background: #FBEAE5; color: #C0492F; }
.arc-form .elementor-button {
  background: var(--brand-primary); color: #fff; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 14px; letter-spacing: 0.2px; padding: 15px 28px; width: 100%;
  transition: background var(--transition);
}
.arc-form .elementor-button:hover { background: var(--brand-primary-dark); }

/* ============================================================
   RESPONSIVE — your two breakpoints (768 tablet, 390 mobile).
   Most stacking is Elementor's job per-container; these are the
   chrome bits CSS owns.
   ============================================================ */
@media (max-width: 980px) {
  .arc-header__phone { display: none; }
}
@media (max-width: 560px) {
  .arc-header__logo .elementor-heading-title { font-size: 12px; max-width: 170px; }
}

/* ============================================================
   PAGE-PATTERN COMPONENTS
   Elementor owns layout (grid cols, gaps, padding, stacking);
   these carry the LOOK. Each class notes the widget/container
   it lands on.
   ============================================================ */

/* ---- Interior hero band (Pattern 1): section container ----
   On a container with: u-bg-ink arc-scope arc-hero-band
   (Elementor: column dir, center-align, padding 100/24/104/24) */
.arc-hero-band { text-align: center; }
.arc-hero-band .elementor-widget { width: 100%; }
.arc-hero-band .arc-hero-sub, .arc-hero-band .arc-hero-sub p { max-width: 560px; margin-left: auto; margin-right: auto; font-size: 17px; color: rgba(255,255,255,0.7); line-height: 1.7; }

/* ---- Media frame (any Image widget / image container) ---- */
.u-media { border-radius: var(--radius-lg); overflow: hidden; }
.u-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Statement aside card (About): container ---- */
.arc-aside { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.arc-aside .elementor-divider-separator { border-top-color: var(--border); }

/* ---- Icon List: fact list / trust / scope / reassurance ----
   Apply to an Icon List widget. Modifiers tweak color + size. */
.arc-facts .elementor-icon-list-icon { color: var(--brand-primary-deep); }
.arc-facts .elementor-icon-list-text { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.arc-facts .elementor-icon-list-item { padding-top: 9px; padding-bottom: 9px; }

.arc-trust .elementor-icon-list-icon { color: var(--brand-primary-deep); }
.arc-trust .elementor-icon-list-text { font-size: 14px; color: var(--ink-soft); font-weight: 500; }

.arc-list .elementor-icon-list-icon { color: var(--brand-primary); }
.arc-list .elementor-icon-list-text { font-size: 14.5px; color: var(--ink-soft); }
.arc-list .elementor-icon-list-item { padding-top: 5px; padding-bottom: 5px; }
.arc-list.addons .elementor-icon-list-icon { color: var(--brand-primary); opacity: 0.65; }

.arc-reassure .elementor-icon-list-icon { color: var(--brand-primary); }
.arc-reassure .elementor-icon-list-text { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; }

/* ---- Scope sub-heading (Services "Standard scope" / "Add-ons") ----
   small Heading widget, tag p, class u-label */
.u-label, .u-label .elementor-heading-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); font-weight: 600; }

/* ---- Exclusions block (Services): container w/ class arc-exclusions ---- */
.arc-exclusions { border-top: 1px solid var(--border); }
.arc-exclusions .u-label .elementor-heading-title { color: var(--ink-subtle); }
.arc-exclusions p, .arc-exclusions .elementor-widget-text-editor { font-size: 13px; color: var(--ink-subtle); line-height: 1.55; }

/* ---- Card internals (Home services / About recap) ----
   .u-card already provides bg/border/radius (foundation). These
   style the bits inside. */
.u-card .u-card-body, .u-card .u-card-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
.u-card .card-tag .elementor-heading-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--ink-subtle); }

/* ---- Process strip (Pattern 5) ----
   Wrapper container: arc-process (Elementor grid, 4 cols, gap 0).
   Each step = child container: arc-step  (last one adds arc-step--hl).
   Step number = small Heading: arc-step-num */
.arc-process { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-bg); }
.arc-step { border-right: 1px solid var(--border); }
.arc-step:last-child { border-right: none; }
.arc-step-num, .arc-step-num .elementor-heading-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; color: var(--ink-subtle); }
.arc-step .arc-step-body, .arc-step .arc-step-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.arc-step--hl { background: var(--brand-primary); }
.arc-step--hl .elementor-heading-title { color: #fff; }
.arc-step--hl .arc-step-num .elementor-heading-title { color: rgba(255,255,255,0.7); }
.arc-step--hl .arc-step-body p, .arc-step--hl p { color: rgba(255,255,255,0.9); }
.arc-step--hl .elementor-icon-list-icon { color: rgba(255,255,255,0.85); }
.arc-step--hl .elementor-icon-list-text { color: rgba(255,255,255,0.9); }
.arc-process-note, .arc-process-note p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; max-width: 640px; }
/* stack: borders go horizontal when grid collapses */
@media (max-width: 980px) {
  .arc-step { border-right: none; border-bottom: 1px solid var(--border); }
  .arc-step:last-child { border-bottom: none; }
}

/* ---- Homepage hero (Pattern 2) ----
   Outer container: arc-hero  (set BACKGROUND IMAGE in Elementor:
   Background > Classic > Image, Size cover, Position center).
   Overlay child container: arc-hero__overlay (gradient + content). */
.arc-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 560px; display: flex; align-items: flex-end; }
.arc-hero__overlay { width: 100%; background: linear-gradient(to top, rgba(20,20,18,0.82) 0%, rgba(20,20,18,0.45) 45%, rgba(20,20,18,0) 100%); }
.arc-hero__overlay .elementor-heading-title { color: #fff; }
.arc-hero__overlay .arc-hero-text p { color: rgba(255,255,255,0.86); font-size: 16px; max-width: 460px; }
.arc-hero__phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; font-weight: 600; }
.arc-hero__phone:hover { color: #fff; }
.arc-hero__phone svg, .arc-hero__phone i { color: var(--brand-primary); }

/* ---- Contact info rows ----
   Each row = container: arc-info-item (flex row, gap 16).
   Icon = Icon widget with u-icon-badge. Label = Heading u-label.
   Value = Heading arc-info-value. */
.arc-info-item { border-top: 1px solid var(--border); }
.arc-info-item:first-of-type { border-top: none; }
.arc-info-value .elementor-heading-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.arc-info-value a:hover { color: var(--brand-primary-deep); }
.arc-info-sub, .arc-info-sub p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

/* ---- CTA band centering (Pattern 7): inner container arc-cta ---- */
.arc-cta { text-align: center; }
.arc-cta .arc-cta-sub, .arc-cta .arc-cta-sub p { color: rgba(255,255,255,0.7); font-size: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }
.arc-cta-reassure { border-top: 1px solid rgba(255,255,255,0.12); }

/* ---- Thank-you page: inner container arc-thanks ---- */
.arc-thanks { text-align: center; }
.arc-thanks-check .elementor-icon { width: 66px; height: 66px; border-radius: 50%; background: var(--brand-primary-soft); color: var(--brand-primary-deep); display: inline-flex; align-items: center; justify-content: center; }
.arc-thanks .arc-thanks-sub, .arc-thanks .arc-thanks-sub p { color: var(--ink-soft); font-size: 17px; line-height: 1.7; max-width: 470px; margin-left: auto; margin-right: auto; }

/* ---- 404 page: inner container arc-404 ---- */
.arc-404 { text-align: center; }
.arc-404 .arc-404-code .elementor-heading-title { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary-deep); }
.arc-404 .arc-404-sub, .arc-404 .arc-404-sub p { color: var(--ink-soft); font-size: 16px; max-width: 430px; margin-left: auto; margin-right: auto; }

/* ============================================================
   v2.0.2 — process strip + step rhythm hardening. End of file.
   ============================================================ */
.arc-scope .arc-process { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.arc-step .arc-step-num .elementor-heading-title { margin-bottom: 4px; }

/* ============================================================
   v2.0.3 — highlight step: force readable text at any nesting
   depth, and make the step fill its column. End of file.
   ============================================================ */
.arc-scope .arc-step--hl,
.arc-scope .arc-step--hl .elementor-heading-title,
.arc-scope .arc-step--hl .elementor-icon-list-text,
.arc-scope .arc-step--hl p { color: #fff; }
.arc-scope .arc-step--hl .arc-step-num .elementor-heading-title { color: rgba(255,255,255,0.72); }
.arc-scope .arc-step--hl .elementor-icon-list-icon,
.arc-scope .arc-step--hl .elementor-icon-list-icon svg { color: #fff; fill: #fff; }

/* ============================================================
   v2.0.4 — BUTTON VARIANT FIX
   Elementor puts a widget's CSS class on the WRAPPER, not the
   <a class="elementor-button">. So variants must be DESCENDANT
   selectors: .u-btn-x .elementor-button. The .arc-scope prefix
   (0-3-0) outranks Theme Style's .elementor-button. No !important.
   Append at end of file; the older .elementor-button.u-btn-*
   rules above are now inert and can stay.
   ============================================================ */

/* SECONDARY — outline on light: ink stroke, fills ink on hover */
.arc-scope .u-btn-secondary .elementor-button {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius-pill);
  transition: all var(--transition);
}
.arc-scope .u-btn-secondary .elementor-button:hover {
  background: var(--ink); color: #fff; border-color: var(--ink);
}

/* OUTLINE — for dark sections: white stroke on transparent, inverts on hover */
.arc-scope .u-btn-outline .elementor-button {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.45); border-radius: var(--radius-pill);
  transition: all var(--transition);
}
.arc-scope .u-btn-outline .elementor-button:hover {
  background: #fff; color: var(--ink); border-color: #fff;
}

/* GHOST — text link w/ arrow: no fill, no border, no padding */
.arc-scope .u-btn-ghost .elementor-button {
  background: transparent; color: var(--brand-primary-deep);
  border: none; padding: 0; border-radius: 0;
  font-weight: 600; font-size: 14px;
}
.arc-scope .u-btn-ghost .elementor-button:hover {
  background: transparent; color: var(--brand-primary-dark);
}
.arc-scope .u-btn-ghost .elementor-button .elementor-button-icon { transition: transform var(--transition); }
.arc-scope .u-btn-ghost .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ============================================================
   v2.0.5 — stop the bare .u-btn-* rules from drawing on the
   Elementor widget WRAPPER (the oversized outline). They remain
   valid only on a real <a>/button that IS .elementor-button.
   ============================================================ */
.elementor-widget-button.u-btn-secondary,
.elementor-widget-button.u-btn-outline,
.elementor-widget-button.u-btn-primary,
.u-btn-secondary > .elementor-widget-container,
.u-btn-outline > .elementor-widget-container,
.u-btn-primary  > .elementor-widget-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   v2.0.6 — LEGAL PAGES (Terms, Privacy)
   Apply class "arc-legal" to a single Text Editor widget that
   holds the full policy HTML. Caps the measure for readability
   and styles the raw h2/h3/p/ul/a inside it.
   ============================================================ */
.arc-legal { max-width: 760px; }
.arc-legal h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); line-height: 1.25; margin: 40px 0 12px; }
.arc-legal h2:first-child { margin-top: 0; }
.arc-legal h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 24px 0 8px; }
.arc-legal p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; margin: 0 0 16px; }
.arc-legal ul { margin: 0 0 16px; padding-left: 20px; }
.arc-legal li { font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 8px; }
.arc-legal li::marker { color: var(--brand-primary); }
.arc-legal a { color: var(--brand-primary-deep); text-decoration: underline; }
.arc-legal .legal-meta { font-size: 13.5px; color: var(--ink-subtle); margin-bottom: 32px; }