/* ==========================================================================
   Cedar Street Auto - theme4
   Layout for the native Divi 5 modules built by cedar-street-pages.php.
   Selectors are written against Divi's rendered DOM:
     group   -> div.et_pb_group.csa-*
     text    -> div.et_pb_text.csa-* > .et_pb_text_inner > p
     heading -> div.et_pb_heading.csa-* > .et_pb_heading_container > h2
     button  -> a.et_pb_button.csa-btn
   ========================================================================== */

:root {
  --csa-navy: #1E3A5F;
  --csa-navy-deep: #16273f;
  --csa-orange: #F2A33C;
  --csa-green: #2E7D5B;
  --csa-green-light: #5bbd8f;
  --csa-ink: #24282E;
  --csa-body: #3c4553;
  --csa-muted: #5a6473;
  --csa-muted-2: #6b7684;
  --csa-surface: #F6F7F9;
  --csa-panel: #eef2f7;
  --csa-line: #e7ebf0;
  --csa-line-2: #eaedf1;
  --csa-shell: clamp(1.25rem, 4vw, 2.5rem);
  --csa-block: clamp(3.5rem, 7vw, 6rem);
  --csa-radius: 14px;
}

/* -- base ---------------------------------------------------------------- */

body.et-db,
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--csa-ink);
  background: var(--csa-surface);
  -webkit-font-smoothing: antialiased;
}

.csa-h1 .et_pb_module_header,
.csa-h2 .et_pb_module_header,
.csa-card__title .et_pb_module_header,
.csa-step__title .et_pb_module_header,
.csa-fhead .et_pb_module_header {
  font-family: 'Poppins', sans-serif;
  color: var(--csa-navy);
}

/* Divi puts padding on every section and row; the prototype controls spacing
   at the section level, so both are zeroed and re-applied here. */
/* Zero Divi's default section padding only. Setting background here would
   outrank the per-section .csa-* background rules and flatten every dark band. */
.et-l--body .et_pb_section,
.et-l--header .et_pb_section,
.et-l--footer .et_pb_section { padding: 0; }

.et-l--body .et_pb_row,
.et-l--header .et_pb_row,
.et-l--footer .et_pb_row {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--csa-shell);
}

/* Divi's gutter rule is .et_pb_gutters3 .et_pb_column_4_4.et_block_column
   .et_pb_module { margin-bottom: 2.75% } - specificity 0,4,0, and the percentage
   is of the container width, so it inflated every stack by a different amount.
   Matched at 0,5,0 here; the explicit per-module margins below use !important. */
.et-l .et_pb_module { margin-bottom: 0; }
/* et_pb_gutters3 sits on <body>, an ancestor of .et-l, so an .et-l-prefixed
   copy of Divi's selector can never match. The class is repeated on the module
   itself instead, which outranks 0,4,0 without resorting to !important. */
.et_pb_gutters3 .et_pb_column_4_4.et_block_column .et_pb_module.et_pb_module,
.et_pb_gutters3 > .et_pb_column_4_4.et_block_column .et_pb_module.et_pb_module { margin-bottom: 0; }
.et-l .et_pb_group > .et_pb_module { margin-bottom: 0; }

/* Body font restated at module level: Divi tags every module and any theme-level
   font declaration loses to a plain .et_pb_module rule. */
.et-l .et_pb_module,
.et-l .et_pb_module .et_pb_text_inner,
.et-l .et_pb_module p,
.et-l .et_pb_module span,
.et-l .et_pb_module a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.et-l .csa-h1 .et_pb_module_header,
.et-l .csa-h2 .et_pb_module_header,
.et-l .csa-card__title .et_pb_module_header,
.et-l .csa-step__title .et_pb_module_header,
.et-l .csa-fhead .et_pb_module_header,
.et-l .csa-logo__name, .et-l .csa-logo__sub, .et-l .csa-flogo__name,
.et-l .csa-hphone, .et-l .csa-bigphone, .et-l .csa-fphone,
.et-l .csa-eyebrow .et_pb_text_inner p, .et-l .csa-eyebrow .et_pb_text_inner span,
.et-l a.et_pb_button.csa-btn { font-family: 'Poppins', sans-serif; }
.et-l .et_pb_text_inner > p:last-child { margin-bottom: 0; }
.et-l .et_pb_text_inner > p { margin: 0; padding: 0; line-height: inherit; }

/* Divi pads every heading module 10px at the bottom and defaults body copy to
   weight 500. The prototype has neither: headings sit flush and body text is 400. */
.et-l .et_pb_heading .et_pb_module_header { padding-bottom: 0; }
.et-l .et_pb_module p { font-weight: 400; }

/* Divi wraps the submit in .et_pb_button_wrapper, which shrink-wraps, so a
   width:100% button was still only as wide as its wrapper. */
.et-l .csa-form .et_pb_button_wrapper,
.et-l .csa-form .et_contact_bottom_container { width: 100%; display: block; }
.et-l .et_pb_column { margin-bottom: 0; }

/* -- buttons ------------------------------------------------------------- */

.et-l a.et_pb_button.csa-btn,
.et-l a.et_pb_button.csa-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  padding: 15px 28px;
  border: none;
  border-radius: 9px;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.et-l a.et_pb_button.csa-btn::before { display: none; }
/* Divi's own ::after glyph is suppressed only on buttons that do not carry a
   Lucide icon; the icon buttons use ::after themselves. */
.et-l a.et_pb_button.csa-btn:not(.csa-btn--call):not(.csa-btn--cal):not(.csa-btn--nav):not(.csa-btn--down)::after { display: none; }

.et-l a.et_pb_button.csa-btn--navy,
.et-l a.et_pb_button.csa-btn--navy:hover { background: var(--csa-navy); color: #fff; }
.et-l a.et_pb_button.csa-btn--navy:hover { background: #17304e; }

.et-l a.et_pb_button.csa-btn--orange,
.et-l a.et_pb_button.csa-btn--orange:hover {
  background: var(--csa-orange);
  color: var(--csa-navy);
  box-shadow: 0 4px 12px rgba(242,163,60,.3);
}
.et-l a.et_pb_button.csa-btn--orange:hover { background: #e6942c; }

.et-l a.et_pb_button.csa-btn--head { font-size: 15px; padding: 13px 22px; }

/* Lucide glyphs on Button modules, which cannot hold inline SVG. */
/* Setting icon.enable=off on a Button module makes Divi emit a per-module rule
   `body #page-container .et_pb_section .et_pb_button_N:after{display:none!important}`
   - an ID plus !important. These selectors are prefixed to outrank it. */
body #page-container .et-l a.et_pb_button.csa-btn--call::after,
body #page-container .et-l a.et_pb_button.csa-btn--cal::after,
body #page-container .et-l a.et_pb_button.csa-btn--nav::after {
  content: "";
  display: inline-block !important;
  /* Divi absolutely positions button pseudo-elements; the Lucide glyph has to
     sit in flow so the flex gap spaces it off the label instead of overlapping. */
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto;
  transform: none !important;
  width: 19px;
  height: 19px;
  margin:0 9px 0 0 !important;
  order: -1;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: 1;
  line-height: 1;
  font-size: 0;
  transition: none;
}
body #page-container .et-l a.et_pb_button.csa-btn--call::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
body #page-container .et-l a.et_pb_button.csa-btn--cal::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18m-9 6 2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18m-9 6 2 2 4-4'/%3E%3C/svg%3E");
}
body #page-container .et-l a.et_pb_button.csa-btn--nav::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 11 22 2 13 21 11 13 3 11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 11 22 2 13 21 11 13 3 11'/%3E%3C/svg%3E");
}

/* -- shared type --------------------------------------------------------- */

.csa-eyebrow .et_pb_text_inner p,
.csa-eyebrow .et_pb_text_inner span {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--csa-orange);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.csa-eyebrow { margin-bottom:10px !important; }

.csa-h1 .et_pb_module_header {
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.07;
  margin:0 0 18px !important;
}
.csa-h2 .et_pb_module_header {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  line-height: 1.12;
  margin:0 0 12px !important;
}
.csa-h2--onDark .et_pb_module_header { color: #fff; margin-bottom:20px !important; }

.csa-lede .et_pb_text_inner p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #4a5462;
}
.csa-lede--onDark .et_pb_text_inner p { color: #c9d4e0; }

.csa-textlink .csa-i, .csa-textlink { vertical-align: middle; }
.et-l .csa-svc__more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--csa-navy);
  text-decoration: none;
}
.et-l .csa-svc__more a:hover { color: var(--csa-orange); }

.csa-stars { color: var(--csa-orange); letter-spacing: 1px; }
.csa-stars--lg { font-size: 16px; letter-spacing: 2px; }

.csa-pill .et_pb_text_inner p,
.et-l .csa-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--csa-panel);
  color: var(--csa-navy);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
}
.et-l .csa-pill--orange { background: rgba(242,163,60,.16); color: var(--csa-orange); font-family: 'Poppins', sans-serif; padding: 6px 13px; }
.csa-hero__pill, .csa-book__pill { margin-bottom:20px !important; }
.csa-book__pill { margin-bottom:18px !important; }

/* -- header -------------------------------------------------------------- */

/* The demo-bar plugin ships:
     .et-l--header .et_pb_section { top: calc(--tsc-demobar-top + --tsc-demobar-h) !important }
   which assumes each demo pins the header SECTION. This build makes the wrapper
   sticky (per the build standards), so that rule instead shoves the relatively
   positioned sections down 46px, over the hero. Reset the sections and move the
   offset onto the wrapper, reusing the plugin's variables so the two stay in
   sync and it degrades to 0 if the bar is ever removed. */
.et-l--header {
  position: sticky;
  top: calc(var(--tsc-demobar-top, 0px) + var(--tsc-demobar-h, 0px));
  z-index: 500;
  background: #fff;
  box-shadow: 0 2px 12px rgba(30,58,95,0.08);
}
.et-l--header .et_pb_section.csa-topbar,
.et-l--header .et_pb_section.csa-headbar { top: auto !important; }

.et-l .et_pb_section.csa-topbar { background: var(--csa-navy); color: #c9d4e0; }
.csa-topbar .et_pb_row { padding-top: 8px; padding-bottom: 8px; }
.csa-tb__inner {
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
}
/* Divi tags these modules et_pb_bg_layout_light, which forces dark body text.
   The topbar sits on navy, so the color is restated at matching specificity. */
.et-l .csa-tb__left .et_pb_text_inner,
.et-l .csa-tb__right .et_pb_text_inner,
.et-l .csa-tb__left .et_pb_text_inner p,
.et-l .csa-tb__right .et_pb_text_inner p { color: #c9d4e0; }
.csa-tb__left .et_pb_text_inner p,
.csa-tb__right .et_pb_text_inner p { display: flex; align-items: center; gap: 22px; }
.csa-tb__right .et_pb_text_inner p { gap: 18px; }
.et-l .csa-tb__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.et-l .csa-tb__item--strong { font-weight: 600; color: #eaf0f6; }
.et-l a.csa-tb__rating { color: #c9d4e0; text-decoration: none; }
.et-l a.csa-tb__rating:hover { color: #fff; }

.et-l .et_pb_section.csa-headbar { background: #fff; }
.csa-headbar .et_pb_row { padding-top: 16px; padding-bottom: 16px; }
.csa-headbar__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.et-l .csa-logo { display: flex; align-items: center; gap: 13px; text-decoration: none; flex: none; }
.et-l .csa-logo__mark {
  width: 46px; height: 46px; border-radius: 11px;
  background: var(--csa-navy); color: var(--csa-orange);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px;
  flex: none;
}
.et-l .csa-logo__txt { display: flex; flex-direction: column; line-height: 1.05; }
.et-l .csa-logo__name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: var(--csa-navy); letter-spacing: -.01em; }
.et-l .csa-logo__sub { font-size: 11.5px; color: #8791a0; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.csa-logo-mod { flex: none; }

.csa-nav { margin-left: auto; flex: 0 1 auto; }
.csa-nav { flex: none; }
.csa-nav .et_pb_menu__wrap { justify-content: flex-end; flex-wrap: nowrap; }
.csa-nav .et_pb_menu__menu { max-width: none; }
.csa-nav ul.et-menu { flex-wrap: nowrap; white-space: nowrap; }
.csa-nav ul.et-menu > li {
  white-space: nowrap;
  padding-right: 0;
  margin-right: clamp(18px, 2vw, 32px);
}
.csa-nav ul.et-menu > li:last-child { margin-right: 0; }
.csa-nav .et_pb_menu__logo-wrap { display: none; }
.csa-nav ul.et-menu > li > a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #2c3746;
  padding-bottom: 4px;
  position: relative;
  opacity: 1;
}
.csa-nav ul.et-menu > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--csa-orange); transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.csa-nav ul.et-menu > li > a:hover::after { transform: scaleX(1); }
.csa-nav ul.et-menu > li > a:hover { color: var(--csa-navy); }

.csa-head-actions { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 20px); flex: none; margin-left: clamp(8px, 2vw, 20px); }
.et-l .csa-hphone { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--csa-navy); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(17px, 2.2vw, 21px); white-space: nowrap; }
.et-l .csa-hphone__ico { width: 38px; height: 38px; border-radius: 999px; background: var(--csa-panel); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* -- hero (overlay variant) --------------------------------------------- */

/* Section carries the photo + gradient scrim via Divi's Background settings;
   only the geometry lives here. */
.et-l .et_pb_section.csa-hero {
  position: relative;
  min-height: clamp(460px, 62vw, 620px);
  display: flex;
  align-items: center;
}
.csa-hero .et_pb_row {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.csa-hero__copy { max-width: 640px; color: #fff; }

.et-l .csa-pill--glass { background: rgba(255,255,255,.14); color: #fff; }
.csa-hero__pill { margin-bottom: 22px !important; }
.csa-h1--onDark .et_pb_module_header { color: #fff; }
.csa-hero__lede .et_pb_text_inner p {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: #e7edf4;
  max-width: 38ch;
}
.csa-hero__lede { margin-bottom: 32px !important; }
.csa-hero__btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px !important; }
.et-l .csa-hero__btns a.et_pb_button.csa-btn { padding: 14px 28px; }
.et-l a.et_pb_button.csa-btn--ghost,
.et-l a.et_pb_button.csa-btn--ghost:hover {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.7);
  color: #fff;
  box-shadow: none;
}
.et-l a.et_pb_button.csa-btn--ghost:hover { background: rgba(255,255,255,.1); }

.csa-hbadges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 16px;
  max-width: 760px;
}
.csa-hbadge .et_pb_text_inner p { display: flex; align-items: center; gap: 10px; }
.csa-hbadge .csa-i { flex: 0 0 auto; }
.et-l .csa-hbadge__label { font-weight: 600; font-size: 14px; color: #fff; line-height: 1.25; }

/* -- services ------------------------------------------------------------ */

.et-l .et_pb_section.csa-services { background: var(--csa-surface); }
.csa-services .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-svc__head { max-width: 640px; margin-bottom:clamp(2rem, 4vw, 3rem) !important; }
.csa-svc__head .csa-lede { margin-bottom:18px !important; }

.csa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; }
.csa-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--csa-line);
  border-radius: var(--csa-radius);
  padding: 26px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.csa-card:hover { box-shadow: 0 12px 28px rgba(30,58,95,.1); transform: translateY(-3px); border-color: #d4dce6; }
.et-l .csa-card__ico { width: 46px; height: 46px; border-radius: 11px; background: var(--csa-panel); display: inline-flex; align-items: center; justify-content: center; }
.csa-card__ico-mod { margin-bottom:18px !important; }
.csa-card__title .et_pb_module_header { font-weight: 600; font-size: 18px; margin:0 0 6px !important; line-height: normal; }
.et-l .csa-card__link { color: var(--csa-navy); text-decoration: none; }
/* whole card clickable, keyboard focus stays on the real link */
.et-l .csa-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--csa-radius); }
.csa-card__desc .et_pb_text_inner p { font-size: 14.5px; line-height: 1.5; color: var(--csa-muted); }

/* -- trust / pricing ----------------------------------------------------- */

.et-l .et_pb_section.csa-trust { background: var(--csa-navy); }
.csa-trust .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.csa-trust__copy .csa-lede { margin-bottom:26px !important; }
.csa-promises { display: flex; flex-direction: column; gap: 16px; }
.csa-promise .et_pb_text_inner p { display: flex; align-items: flex-start; gap: 13px; }
.et-l .csa-check { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--csa-green); display: inline-flex; align-items: center; justify-content: center; margin-top:1px !important; }
.et-l .csa-promise__txt { font-size: 1rem; line-height: 1.55; color: #eaf0f6; }
/* aspect-ratio + max-height re-derives the width, collapsing the column;
   the prototype just sets a min-height on a full-width box. */
.csa-portrait img { width: 100%; border-radius: 16px; display: block; height: clamp(320px, 40vw, 460px); object-fit: cover; object-position: center top; }
.csa-person { margin-top:16px !important; }
.csa-person .et_pb_text_inner p { display: flex; flex-direction: column; gap: 2px; }
.et-l .csa-person__name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 17px; color: #fff; }
.et-l .csa-person__role { font-size: 14px; color: #9fb0c4; }

/* -- reviews ------------------------------------------------------------- */

.et-l .et_pb_section.csa-reviews { background: var(--csa-surface); }
.csa-reviews .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-rev__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom:clamp(2rem, 4vw, 2.5rem) !important; }
.csa-rev__headtext .csa-h2 .et_pb_module_header { margin-bottom:0 !important; }
.csa-gbadge .et_pb_text_inner p { display: flex; align-items: center; gap: 14px; }
.csa-gbadge { background: #fff; border: 1px solid var(--csa-line); border-radius: 12px; padding: 14px 18px; }
.et-l .csa-gbadge__mark { width: 36px; height: 36px; border-radius: 999px; background: var(--csa-panel); display: inline-flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--csa-navy); flex: none; }
.et-l .csa-gbadge__body { display: flex; flex-direction: column; line-height: 1.15; }
.et-l .csa-gbadge__top { display: flex; align-items: center; gap: 8px; }
.et-l .csa-gbadge__score { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: var(--csa-ink); }
.et-l .csa-gbadge__count { font-size: 12.5px; color: var(--csa-muted-2); }

.csa-rev__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 18px; }
.csa-review { background: #fff; border: 1px solid var(--csa-line-2); border-radius: var(--csa-radius); padding: 24px; }
.csa-review__stars { margin-bottom:14px !important; }
.csa-review__quote .et_pb_text_inner p { font-size: 1rem; line-height: 1.6; color: var(--csa-body); }
.csa-review__quote { margin-bottom:18px !important; }
.csa-review__person .et_pb_text_inner p { display: flex; align-items: center; gap: 10px; }
.et-l .csa-avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--csa-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; flex: none; }
.et-l .csa-review__who { display: flex; flex-direction: column; line-height: 1.2; }
.et-l .csa-review__name { font-weight: 600; font-size: 14.5px; color: var(--csa-ink); }
.et-l .csa-review__car { font-size: 12.5px; color: #7a8493; }

/* -- how it works -------------------------------------------------------- */

.et-l .et_pb_section.csa-how { background: var(--csa-panel); }
.csa-how .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-how__head { text-align: center; max-width: 620px; margin:0 auto clamp(2.5rem, 5vw, 3.5rem) !important; }
.csa-how__head .csa-lede .et_pb_text_inner p { text-align: center; }
.csa-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 22px; }
.csa-step { background: #fff; border: 1px solid #e2e8ef; border-radius: var(--csa-radius); padding: 26px; }
.et-l .csa-step__n { width: 44px; height: 44px; border-radius: 11px; background: var(--csa-navy); color: var(--csa-orange); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; }
.csa-step__n-mod { margin-bottom:18px !important; }
.csa-step__title .et_pb_module_header { font-weight: 600; font-size: 17px; margin:0 0 8px !important; line-height: 1.2; }
.csa-step__desc .et_pb_text_inner p { font-size: 14.5px; line-height: 1.55; color: var(--csa-muted); }

/* -- booking ------------------------------------------------------------- */

.et-l .et_pb_section.csa-book { background-color: var(--csa-navy); background-image: radial-gradient(circle at 85% 0%, rgba(242,163,60,.16), transparent 45%); }
.csa-book .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-book__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.csa-book__copy { padding-top: 8px; }
.csa-book__copy .csa-lede { margin-bottom:28px !important; }
.csa-book__checks { display: flex; flex-direction: column; gap: 14px; margin-bottom:30px !important; }
.csa-book__check .et_pb_text_inner p { display: flex; align-items: center; gap: 11px; font-size: 1rem; color: #eaf0f6; }
.csa-book__check .csa-i { flex: none; }
.et-l .csa-bigphone { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); }
.et-l .csa-bigphone__ico { width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; flex: none; }

.csa-form__card { background: #fff; border: 1px solid var(--csa-line); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 10px 30px rgba(30,58,95,.06); }
/* Divi 5 lays fields out with its own flex column classes
   (et_flex_column_12_24 = half, 24_24 = full) and gives each field
   display:flex/column with gap:30px between label and input. The prototype has
   a 6px label margin and 16px between rows, so the gap is zeroed here and the
   rhythm comes from the form's own gap. */
/* Divi's half-width fields size with flex-basis calculated against its own
   15px column gap, so that gap is left alone - overriding it made the pairs
   overflow and wrap to full width. Only the label/input gap is zeroed. */
.et-l .csa-form .et_pb_contact_field.et_pb_module { row-gap: 0; }
.csa-form .et_pb_contact_form_label {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  line-height: normal;
  color: var(--csa-body);
  margin-bottom: 6px !important;
  font-family: 'Inter', sans-serif;
}
.csa-form .et_pb_contact_field .input,
.csa-form .et_pb_contact_field select.et_pb_contact_select,
.csa-form .et_pb_contact_field textarea.et_pb_contact_message {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d6dde5;
  border-radius: 9px;
  font-size: 15px;
  line-height: normal;
  font-family: 'Inter', sans-serif;
  color: var(--csa-ink);
  background: #fbfcfd;
}
.csa-form .et_pb_contact_field .input:focus,
.csa-form .et_pb_contact_field select:focus { outline: 2px solid rgba(242,163,60,.55); outline-offset: 1px; border-color: var(--csa-orange); }
.et-l .csa-form .et_pb_button_wrapper,
.et-l .csa-form .et_contact_bottom_container { width: 100%; display: block; }
.et-l .csa-form .et_pb_contact_submit.et_pb_button {
  width: 100%;
  display: block;
  text-align: center;
  background: var(--csa-orange);
  color: var(--csa-navy);
  border: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: normal;
  padding: 17px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(242,163,60,.35);
  margin-top: 6px !important;
}
.et-l .csa-form .et_pb_contact_submit.et_pb_button::after { display: none; }
.csa-form__note-mod { margin-top:14px !important; }
.csa-form__note-mod .et_pb_text_inner p { text-align: center; font-size: 13.5px; color: var(--csa-muted-2); }

/* -- location ------------------------------------------------------------ */

.et-l .et_pb_section.csa-location { background: #fff; border-top: 1px solid var(--csa-line-2); }
.csa-location .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-loc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(2rem, 4vw, 3rem); align-items: stretch; }

.csa-map { position: relative; border-radius: 16px; overflow: hidden; min-height: clamp(280px, 34vw, 380px); height: 100%; background: #eef1ea; display: block; }
.csa-map__park { position: absolute; left: -4%; top: 8%; width: 34%; height: 38%; background: #d9e6cf; border-radius: 40% 55% 50% 45%; }
.csa-map__water { position: absolute; right: 6%; bottom: -6%; width: 42%; height: 40%; background: #cfe0ea; }
.csa-map__road { position: absolute; background: #fff; box-shadow: 0 0 0 1px #dfe4dd; }
.csa-map__road--h1 { left: 0; right: 0; top: 33%; height: 16px; }
.csa-map__road--h2 { left: 0; right: 0; top: 68%; height: 9px; }
.csa-map__road--v1 { top: 0; bottom: 0; left: 40%; width: 9px; }
.csa-map__road--v2 { top: 0; bottom: 0; left: 74%; width: 9px; }
.csa-map__hwy { position: absolute; background: #F2C88C; }
.csa-map__hwy--h { left: 0; right: 0; top: calc(33% + 4px); height: 8px; }
.csa-map__hwy--v { top: 0; bottom: 0; left: calc(40% + 2px); width: 6px; }
.csa-map__pin { position: absolute; left: 52%; top: 42%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.csa-map__label { background: var(--csa-navy); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; padding: 5px 10px; border-radius: 7px; white-space: nowrap; box-shadow: 0 4px 12px rgba(30,58,95,.25); margin-bottom:8px !important; }
.csa-map__dot { width: 26px; height: 26px; border-radius: 999px 999px 999px 0; transform: rotate(-45deg); background: var(--csa-orange); border: 3px solid #fff; box-shadow: 0 5px 12px rgba(30,58,95,.3); }

.csa-loc__info { display: flex; flex-direction: column; justify-content: center; }
.csa-loc__info .csa-h2 .et_pb_module_header { margin-bottom:20px !important; }
.csa-loc__line .et_pb_text_inner p { display: flex; align-items: flex-start; gap: 11px; }
.csa-loc__line .csa-i { flex: none; margin-top:2px !important; }
.csa-loc__line { margin-bottom:20px !important; }
.csa-loc__line--hours { margin-bottom:22px !important; }
.et-l .csa-loc__addr { font-size: 1rem; line-height: 1.55; color: var(--csa-body); }
.et-l .csa-hours { display: flex; flex-direction: column; font-size: 15px; line-height: 1.7; color: var(--csa-body); }
.et-l .csa-hours__row { display: flex; justify-content: space-between; gap: 24px; min-width: 220px; }
.et-l .csa-hours__t { font-weight: 600; }
.et-l .csa-hours__t--closed { color: #7a8493; font-weight: 600; }
.csa-afterhours { background: #eaf4ee; border: 1px solid #cfe6da; border-radius: 11px; padding: 14px 16px; margin-bottom:24px !important; }
.csa-afterhours .et_pb_text_inner p { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.55; color: #245e46; }
.csa-afterhours .csa-i { flex: none; margin-top:2px !important; }
.csa-loc__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.et-l .csa-loc__btns a.et_pb_button.csa-btn { padding: 14px 24px; }

/* -- footer -------------------------------------------------------------- */

.et-l .et_pb_section.csa-footer { background: var(--csa-navy-deep); color: #c9d4e0; }
.csa-footer .et_pb_row { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.csa-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: clamp(2rem, 4vw, 3rem); }
.et-l .csa-flogo { display: flex; align-items: center; gap: 12px; }
.et-l .csa-flogo__mark { width: 40px; height: 40px; border-radius: 10px; background: var(--csa-navy); display: inline-flex; align-items: center; justify-content: center; color: var(--csa-orange); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 19px; flex: none; }
.et-l .csa-flogo__name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: #fff; }
.csa-flogo-mod { margin-bottom:16px !important; }
.csa-fblurb-mod .et_pb_text_inner p { font-size: 14.5px; line-height: 1.6; max-width: 30ch; color: #c9d4e0; }
.csa-fblurb-mod { margin-bottom:18px !important; }
.et-l .csa-socials { display: flex; gap: 12px; }
.et-l a.csa-soc { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background-color .18s ease; }
.et-l a.csa-soc:hover { background: rgba(255,255,255,.16); }
.csa-fhead .et_pb_module_header { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: #fff; margin:0 0 16px !important; }
.et-l .csa-flinks { display: flex; flex-direction: column; gap: 10px; }
/* Divi's 23.8px module line-height inflates these stacks; prototype is normal */
.et-l a.csa-flink { font-size: 14.5px; color: #c9d4e0; text-decoration: none; line-height: normal; }
.et-l a.csa-flink:hover { color: var(--csa-orange); }
.et-l .csa-faddr { font-size: 14.5px; line-height: 1.7; color: #c9d4e0; }
.et-l a.csa-fphone { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; color: var(--csa-orange); text-decoration: none; margin:14px 0 !important; }
.et-l .csa-fhours { font-size: 14px; line-height: 1.7; color: #a9b6c6; }
.csa-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top:clamp(2rem, 4vw, 3rem) !important;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.csa-footer__bottom .et_pb_text_inner p { font-size: 13px; color: #8b99ab; line-height: normal; }

/* -- responsive ---------------------------------------------------------- */

@media (max-width: 980px) {
  .csa-headbar__inner { flex-wrap: nowrap; gap: 14px; }
  /* Divi swaps the Menu module to its hamburger at 980. The prototype puts the
     burger last, after the phone, so the flex order is reversed here. */
  .csa-nav { order: 3; margin-left: 0; flex: none; }
  .csa-head-actions { order: 2; margin-left: auto; }
  .csa-logo-mod { order: 1; }
  .csa-rev__head { align-items: flex-start; }
  .csa-loc__grid { align-items: stretch; }
  .csa-map { min-height: 300px; }
  .csa-portrait img { aspect-ratio: 3 / 2; max-height: 380px; object-position: center 20%; }
}

@media (max-width: 760px) {
  .csa-topbar { display: none; }
}

@media (max-width: 640px) {
  /* the prototype keeps the phone number visible all the way down; only the
     Schedule Service button drops out (below 520px) */
  .csa-headbar__inner { gap: 10px; }
  .et-l a.et_pb_button.csa-btn--head { padding: 11px 16px; font-size: 14px; }
}

@media (max-width: 520px) {
  .et-l a.et_pb_button.csa-btn--head { display: none; }
}

@media (max-width: 480px) {
  .csa-hero__btns,
  .csa-loc__btns { flex-direction: column; align-items: stretch; }
  .csa-hero__btns .et_pb_button_module_wrapper,
  .csa-loc__btns .et_pb_button_module_wrapper { width: 100%; }
  .et-l .csa-hero__btns a.et_pb_button.csa-btn,
  .et-l .csa-loc__btns a.et_pb_button.csa-btn { width: 100%; justify-content: center; }
  .csa-logo__name { font-size: 17px; }
  .csa-logo__mark { width: 40px; height: 40px; font-size: 19px; }
  .csa-card, .csa-step, .csa-review { padding: 20px; }
  .csa-form__card { padding: 20px; }
  .csa-footer__bottom { flex-direction: column; gap: 8px; }
  .csa-rev__head { gap: 16px; }
  .et-l .csa-hours__row { min-width: 0; }
  .csa-hero__img img { min-height: 220px; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* -- inner hero banner --------------------------------------------------- */

.et-l .et_pb_section.csa-shero {
  background-color: var(--csa-navy);
  background-image: radial-gradient(circle at 88% 10%, rgba(242,163,60,.18), transparent 48%);
}
.csa-shero .et_pb_row {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.csa-crumb .et_pb_text_inner p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: normal;
  color: #9fb0c4;
}
.csa-crumb { margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important; }
.et-l .csa-crumb a { color: #9fb0c4; text-decoration: none; }
.et-l .csa-crumb a:hover { color: #fff; }
.et-l .csa-crumb__here { color: #eaf0f6; }

.csa-shero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.et-l .csa-shero__pill .csa-pill { padding: 8px 14px; font-family: 'Poppins', sans-serif; line-height: normal; }
.csa-shero__pill { margin-bottom: 18px !important; }
.csa-shero__lede .et_pb_text_inner p {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: #c9d4e0;
  max-width: 44ch;
}
.csa-shero__lede { margin-bottom: 30px !important; }
.csa-shero .csa-hero__btns { margin-bottom: 30px !important; }
.csa-smeta { display: flex; gap: 24px; flex-wrap: wrap; }
.csa-smeta__item .et_pb_text_inner p { display: flex; align-items: center; gap: 9px; font-size: 14.5px; line-height: normal; color: #eaf0f6; }
.csa-smeta__item .csa-i { flex: 0 0 auto; }

/* Styled stand-in for artwork the prototype leaves as a placeholder. */
.csa-ph {
  border-radius: 16px;
  background-image: repeating-linear-gradient(45deg, #e6eaf0, #e6eaf0 14px, #eef1f5 14px, #eef1f5 28px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
}
.csa-ph--hero { min-height: clamp(260px, 32vw, 380px); }
.et-l .csa-ph__cap {
  font-family: 'SFMono-Regular', ui-monospace, monospace;
  font-size: 13px;
  color: #7a8699;
  background: rgba(255,255,255,.8);
  padding: 6px 12px;
  border-radius: 6px;
  text-align: center;
}
.csa-ph__cap-mod .et_pb_text_inner p { text-align: center; }

/* -- two column blocks --------------------------------------------------- */

.csa-sincl .et_pb_row,
.csa-sfaq .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-sincl { background: var(--csa-surface); }
.csa-sfaq { background: var(--csa-surface); }
.csa-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.csa-two--start { align-items: start; }
.csa-h2--tight .et_pb_module_header { margin-bottom: 22px !important; }
.csa-h2--wide .et_pb_module_header { margin-bottom: 24px !important; }

.csa-checkrows { display: flex; flex-direction: column; gap: 14px; }
.csa-checkrow {
  background: #fff;
  border: 1px solid var(--csa-line);
  border-radius: 11px;
  padding: 15px 17px;
}
.csa-checkrow .et_pb_text_inner p { display: flex; align-items: flex-start; gap: 12px; }
.et-l .csa-checkrow__ico {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px;
  background: var(--csa-green); display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.et-l .csa-checkrow__txt { font-size: 1rem; line-height: 1.5; color: var(--csa-body); }

.csa-signrows { background: #fff; border: 1px solid var(--csa-line); border-radius: 14px; padding: 8px 4px; }
.csa-signrow .et_pb_text_inner p { display: flex; align-items: flex-start; gap: 12px; }
.csa-signrow { padding: 15px 18px; border-bottom: 1px solid #f1f3f6; }
.csa-signrows .csa-signrow:last-child { border-bottom: none; }
.csa-signrow .csa-i { flex: 0 0 auto; margin-top: 1px; }
.et-l .csa-signrow__txt { font-size: 1rem; line-height: 1.5; color: var(--csa-body); }

.csa-warranty {
  background: #eaf4ee;
  border: 1px solid #cfe6da;
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 20px !important;
}
.csa-warranty .et_pb_text_inner p { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.55; color: #245e46; }
.csa-warranty .csa-i { flex: 0 0 auto; margin-top: 2px; }

/* -- three promise strip ------------------------------------------------- */

.et-l .et_pb_section.csa-strip {
  background: #fff;
  border-top: 1px solid var(--csa-line-2);
  border-bottom: 1px solid var(--csa-line-2);
}
.csa-strip .et_pb_row { padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.csa-strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 28px; }
.csa-strip__item { display: flex; align-items: flex-start; gap: 13px; }
.et-l .csa-strip__ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  background: var(--csa-panel); display: inline-flex; align-items: center; justify-content: center;
}
.csa-strip__ico-mod { flex: 0 0 auto; }
.csa-strip__title .et_pb_module_header { font-weight: 600; font-size: 17px; margin: 0 0 5px !important; line-height: normal; }
.csa-strip__desc .et_pb_text_inner p { font-size: 14.5px; line-height: 1.55; color: var(--csa-muted); }

/* -- FAQ + customer ------------------------------------------------------ */

.csa-faqs { display: flex; flex-direction: column; gap: 14px; }
.csa-faq { background: #fff; border: 1px solid var(--csa-line); border-radius: 13px; padding: 20px 22px; }
.csa-faq__q .et_pb_module_header { font-weight: 600; font-size: 17px; margin: 0 0 8px !important; line-height: 1.3; }
.csa-faq__a .et_pb_text_inner p { font-size: 14.5px; line-height: 1.6; color: #4a5462; }
.csa-review--solo { margin-bottom: 26px !important; }
.csa-others .et_pb_text_inner p { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: var(--csa-navy); }
.csa-others { margin-bottom: 14px !important; }
.et-l .csa-spills { display: flex; flex-wrap: wrap; gap: 10px; }
.et-l a.csa-spill {
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #2c3746;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.et-l a.csa-spill:hover { border-color: var(--csa-orange); color: var(--csa-navy); }

@media (max-width: 480px) {
  .csa-ph--hero { min-height: 200px; }
  .csa-smeta { gap: 12px; }
  .csa-checkrow, .csa-faq { padding: 16px; }
}

/* -- services page ------------------------------------------------------- */

.csa-shero--photo { min-height: clamp(420px, 52vw, 560px); display: flex; align-items: center; }
.csa-shero--photo .et_pb_row {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  width: 100%;
}
.csa-shero__copy--wide { max-width: 640px; color: #fff; }
.csa-shero__lede--42 .et_pb_text_inner p { max-width: 42ch; color: #e7edf4; }
.csa-hero__btns--flush { margin-bottom: 0 !important; }
.csa-shero--photo .csa-crumb { margin-bottom: clamp(1.5rem, 3vw, 2rem) !important; }

.et-l .et_pb_section.csa-svctrust { background: #fff; border-bottom: 1px solid var(--csa-line-2); }
.csa-svctrust .et_pb_row { padding-top: clamp(1.5rem, 3vw, 2rem); padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.csa-svctrust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 20px; }
/* Icon chip + label row. Lived in the old split-hero trust bar; that block was
   replaced when the hero became the overlay variant, so it is restated here. */
.csa-trust__item .et_pb_text_inner p { display: flex; align-items: center; gap: 11px; }
.et-l .csa-trust__ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
  background: var(--csa-panel); display: inline-flex; align-items: center; justify-content: center;
}
.et-l .csa-trust__label { font-weight: 600; font-size: 14.5px; color: var(--csa-ink); line-height: 1.25; }

.csa-sall { background: var(--csa-surface); }
.csa-sall .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-sall__head { max-width: 660px; margin-bottom: clamp(2rem, 4vw, 3rem) !important; }
.csa-scards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.csa-scard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--csa-line);
  border-radius: 14px;
  padding: 28px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.csa-scard:hover { box-shadow: 0 12px 28px rgba(30,58,95,.1); transform: translateY(-3px); border-color: #d4dce6; }
.et-l .csa-scard__ico {
  width: 48px; height: 48px; border-radius: 11px; background: var(--csa-panel);
  display: inline-flex; align-items: center; justify-content: center;
}
.csa-scard__ico-mod { margin-bottom: 18px !important; }
.csa-scard__title .et_pb_module_header { font-weight: 600; font-size: 18px; margin: 0 0 8px !important; line-height: normal; }
.et-l .csa-scard__link { color: var(--csa-navy); text-decoration: none; }
.et-l .csa-scard__link::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.csa-scard__desc .et_pb_text_inner p { font-size: 14.5px; line-height: 1.55; color: var(--csa-muted); }
.csa-scard__desc { margin-bottom: 16px !important; }
.csa-scard__foot { margin-top: auto !important; padding-top: 14px; border-top: 1px solid #f1f3f6; }
.csa-scard__foot .et_pb_text_inner p { display: flex; align-items: center; gap: 10px; }
.et-l .csa-scard__price { font-size: 13.5px; font-weight: 600; color: var(--csa-green); }
.et-l .csa-scard__more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: var(--csa-navy);
}

.et-l .et_pb_section.csa-rules { background: var(--csa-navy); }
.csa-rules .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-rules__head { max-width: 620px; margin-bottom: clamp(2rem, 4vw, 2.75rem) !important; }
.csa-rules__head .csa-eyebrow { margin-bottom: 12px !important; }
.csa-rules__head .csa-h2--onDark .et_pb_module_header { margin-bottom: 16px !important; }
.csa-rules__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 24px; }
.csa-rule { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 26px; }
.et-l .csa-rule__ico {
  width: 42px; height: 42px; border-radius: 10px; background: var(--csa-green);
  display: inline-flex; align-items: center; justify-content: center;
}
.csa-rule__ico-mod { margin-bottom: 18px !important; }
.csa-rule__title .et_pb_module_header { font-weight: 600; font-size: 17px; color: #fff; margin: 0 0 8px !important; line-height: normal; }
.csa-rule__desc .et_pb_text_inner p { font-size: 14.5px; line-height: 1.6; color: #c9d4e0; }

/* light booking band (services page) */
.et-l .et_pb_section.csa-book--light { background-color: var(--csa-surface); background-image: none; }
.csa-book--light .csa-pill--orange { background: var(--csa-panel); color: var(--csa-navy); }
.csa-book--light .csa-h2--onDark .et_pb_module_header { color: var(--csa-navy); }
.csa-book--light .csa-lede--onDark .et_pb_text_inner p { color: #4a5462; }
.csa-book--light .csa-book__check .et_pb_text_inner p { color: var(--csa-ink); }
.et-l .csa-book--light .csa-bigphone { color: var(--csa-navy); }
.et-l .csa-book--light .csa-bigphone__ico { background: var(--csa-panel); }
/* Icons are emitted with a stroke attribute; CSS stroke wins over the
   presentation attribute, so the light band recolors them without new markup. */
.et-l .csa-book--light .csa-bigphone .csa-i { stroke: var(--csa-navy); }
.et-l .csa-book--light .csa-book__check .csa-i { stroke: var(--csa-green); }
.et-l .csa-book--light .csa-pill--orange .csa-i { stroke: var(--csa-navy); }

/* -- reviews page -------------------------------------------------------- */

.csa-shero__copy--680 { max-width: 680px; color: #fff; }
.csa-hero__proof { display: flex; align-items: center; gap: 20px; margin-top: 32px !important; flex-wrap: wrap; }
.csa-gbadge--glass { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 14px 18px; }
.et-l .csa-gbadge__mark--solid { background: #fff; }
.et-l .csa-gbadge__score--lg { font-size: 22px; color: #fff; }
.et-l .csa-gbadge__count--light { color: #c9d4e0; }
.csa-proof__note .et_pb_text_inner p { font-size: 14.5px; line-height: 1.6; color: #c9d4e0; max-width: 32ch; }

.et-l .et_pb_section.csa-stats { background: #fff; border-bottom: 1px solid var(--csa-line-2); }
.csa-stats .et_pb_row { padding-top: clamp(1.5rem, 3vw, 2rem); padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.csa-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 20px; }
.et-l .csa-stat__n { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 28px; color: var(--csa-navy); line-height: 1.1; }
.csa-stat__label { margin-top: 4px !important; }
.csa-stat__label .et_pb_text_inner p { font-size: 14.5px; line-height: 1.55; color: var(--csa-muted); }

.csa-rlist { background: var(--csa-surface); }
.csa-rlist .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-rlist__head { max-width: 660px; margin-bottom: clamp(2rem, 4vw, 3rem) !important; }
.csa-rcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.csa-rcard { background: #fff; border: 1px solid var(--csa-line-2); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; }
.csa-rcard__top .et_pb_text_inner p { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.csa-rcard__top { margin-bottom: 14px !important; }
.et-l .csa-rcard__ago { font-size: 12.5px; color: #8791a0; }
.csa-rcard__quote .et_pb_text_inner p { font-size: 1rem; line-height: 1.6; color: var(--csa-body); }
.csa-rcard__quote { margin-bottom: 20px !important; }
.csa-rcard__foot { margin-top: auto !important; padding-top: 16px; border-top: 1px solid #f1f3f6; }
.csa-rcard__foot .et_pb_text_inner p { display: flex; align-items: center; gap: 10px; }
.et-l .csa-rcard__src { margin-left: auto; font-size: 12px; color: #8791a0; }

/* -- closing CTA band ---------------------------------------------------- */

.et-l .et_pb_section.csa-cta { background: var(--csa-navy); }
.csa-cta .et_pb_row { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.csa-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; }
.csa-cta__copy { max-width: 44ch; }
.csa-h2--cta .et_pb_module_header { margin-bottom: 12px !important; }
.csa-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* -- how it works page --------------------------------------------------- */

.csa-bigsteps { background: var(--csa-surface); }
.csa-bigsteps .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-bigsteps__stack { display: flex; flex-direction: column; gap: 20px; }
.csa-bigstep {
  background: #fff;
  border: 1px solid var(--csa-line);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.csa-bigstep__left { display: flex; align-items: flex-start; gap: 18px; }
.et-l .csa-bigstep__n {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px;
  background: var(--csa-navy); color: var(--csa-orange);
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.csa-bigstep__n-mod { flex: 0 0 auto; }
.csa-bigstep__title .et_pb_module_header { font-weight: 600; font-size: 18px; margin: 0 0 8px !important; line-height: 1.2; }
.csa-bigstep__desc .et_pb_text_inner p { font-size: 14.5px; line-height: 1.6; color: #4a5462; }
.csa-bigstep__checks { display: flex; flex-direction: column; gap: 11px; }
.csa-bigstep__check .et_pb_text_inner p { display: flex; align-items: flex-start; gap: 11px; }
.csa-bigstep__check .csa-i { flex: 0 0 auto; margin-top: 2px; }
.et-l .csa-bigstep__c { font-size: 14.5px; line-height: 1.55; color: var(--csa-body); }

.et-l .et_pb_section.csa-howdetail { background: #fff; border-top: 1px solid var(--csa-line-2); border-bottom: 1px solid var(--csa-line-2); }
.csa-howdetail .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-brings { display: flex; flex-direction: column; gap: 14px; }
.csa-bring__row {
  background: var(--csa-surface);
  border: 1px solid var(--csa-line);
  border-radius: 11px;
  padding: 15px 17px;
}
.csa-bring__row .et_pb_text_inner p { display: flex; align-items: flex-start; gap: 12px; }
.csa-bring__row .csa-i { flex: 0 0 auto; margin-top: 2px; }
.et-l .csa-bring__txt { font-size: 1rem; line-height: 1.55; color: var(--csa-body); }

.csa-times { background: var(--csa-surface); border: 1px solid var(--csa-line); border-radius: 14px; padding: 8px 4px; }
.csa-time__row { padding: 15px 18px; border-bottom: 1px solid var(--csa-line-2); }
.csa-times .csa-time__row:last-child { border-bottom: none; }
.csa-time__row .et_pb_text_inner p { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.et-l .csa-time__label { font-size: 1rem; line-height: 1.5; color: var(--csa-body); }
.et-l .csa-time__value { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--csa-navy); white-space: nowrap; }

/* -- location page ------------------------------------------------------- */

.csa-locmap { background: var(--csa-surface); }
.csa-locmap .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-map--tall { min-height: clamp(320px, 40vw, 440px); }
.csa-loc__line--lg .et_pb_text_inner p { font-size: 1.05rem; }
.et-l .csa-loc__line--lg .csa-loc__addr { font-size: 1.05rem; line-height: 1.5; }

.et-l .et_pb_section.csa-visits { background: #fff; border-top: 1px solid var(--csa-line-2); }
.csa-visits .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-visits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 24px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem) !important;
}
.csa-visit { background: var(--csa-surface); border: 1px solid var(--csa-line); border-radius: 14px; padding: 26px; }
.et-l .csa-visit__ico {
  width: 42px; height: 42px; border-radius: 10px; background: var(--csa-panel);
  display: inline-flex; align-items: center; justify-content: center;
}
.csa-visit__ico-mod { margin-bottom: 18px !important; }
.csa-visit__title .et_pb_module_header { font-weight: 600; font-size: 17px; margin: 0 0 8px !important; line-height: normal; }
.csa-visit__desc .et_pb_text_inner p { font-size: 14.5px; line-height: 1.6; color: #4a5462; }
.csa-h2--hoods .et_pb_module_header { margin-bottom: 16px !important; }
.csa-hoods__lede { margin-bottom: 22px !important; }
.csa-hoods__lede .et_pb_text_inner p { max-width: 52ch; }
.et-l .csa-hoods { display: flex; flex-wrap: wrap; gap: 10px; }
.et-l .csa-hood {
  background: var(--csa-surface);
  border: 1px solid var(--csa-line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--csa-body);
}

/* -- book page ----------------------------------------------------------- */

.csa-bookform { background: var(--csa-surface); }
.csa-bookform .et_pb_row { padding-top: var(--csa-block); padding-bottom: var(--csa-block); }
.csa-bookform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.csa-nexts { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px !important; }
.csa-next { display: flex; align-items: flex-start; gap: 14px; }
.et-l .csa-next__n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
  background: var(--csa-navy); color: var(--csa-orange);
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.csa-next__n-mod { flex: 0 0 auto; }
.csa-next__title .et_pb_module_header { font-weight: 600; font-size: 17px; margin: 0 0 5px !important; line-height: normal; }
.csa-next__desc .et_pb_text_inner p { font-size: 14.5px; line-height: 1.6; color: #4a5462; }
.csa-callcard { background: #fff; border: 1px solid var(--csa-line); border-radius: 14px; padding: 24px; margin-bottom: 20px !important; }
.csa-callcard__title .et_pb_text_inner p { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 17px; color: var(--csa-navy); }
.csa-callcard__title { margin-bottom: 14px !important; }
.et-l .csa-bigphone--light { color: var(--csa-navy); }
.et-l .csa-bigphone--light .csa-bigphone__ico { background: var(--csa-panel); }
.csa-callcard__hours .et_pb_text_inner p { font-size: 14px; line-height: 1.7; color: var(--csa-muted); }
.csa-callcard .csa-bigphone-mod { margin-bottom: 12px !important; }

/* Divi renders a radio field as:
     label.et_pb_contact_form_label + span.et_pb_contact_field_options_wrapper
       > span.et_pb_contact_field_options_title  (duplicate of the label)
       > span.et_pb_contact_field_options_list > span.et_pb_contact_field_radio > input + label
   The duplicate title is hidden and the items become the prototype's pill toggles. */
.csa-form--book .et_pb_contact_field_options_title { display: none; }
.csa-form--book .et_pb_contact_field_options_wrapper { display: block; }
.csa-form--book .et_pb_contact_field_options_list { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; }
/* the items are flex children and stretch to the row width unless pinned */
.csa-form--book .et_pb_contact_field_radio { display: inline-flex; flex: 0 0 auto; width: auto; margin: 0; }
.csa-form--book .et_pb_contact_field_radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.csa-form--book .et_pb_contact_field_radio label i,
.csa-form--book .et_pb_contact_field_radio label::before { display: none !important; }
.et-l .csa-form--book .et_pb_contact_field_radio label {
  display: inline-block;
  width: auto;
  background: #fbfcfd;
  color: var(--csa-body);
  border: 1px solid #d6dde5;
  border-radius: 9px;
  padding: 11px 18px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: normal;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.et-l .csa-form--book .et_pb_contact_field_radio input:checked + label {
  background: var(--csa-navy);
  border-color: var(--csa-navy);
  color: #fff;
}
.et-l .csa-form--book .et_pb_contact_field_radio label:hover { border-color: var(--csa-navy); }
.csa-form--book .et_pb_contact_field_options_wrapper { margin-top: 2px; }

body #page-container .et-l a.et_pb_button.csa-btn--down::after {
  content: "";
  display: inline-block !important;
  position: static !important;
  /* Divi hides button icons with opacity:0 until hover */
  opacity: 1 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 19px; height: 19px; margin: 0 9px 0 0; order: -1;
  background-color: currentColor; font-size: 0; line-height: 1;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
}

/* -- mobile menu --------------------------------------------------------- */

/* Divi's hamburger dropdown is width:100% of the Menu module. This build
   shrinks that module to the burger itself (flex:none), so the panel collapsed
   to ~26px. The positioning context is moved to the header row so the panel
   spans the full bar, matching the prototype's drop panel. */
@media (max-width: 980px) {
  .csa-headbar .et_pb_row { position: relative; }
  /* Every wrapper between the panel and the row must be static, otherwise the
     panel anchors to .et_pb_menu_inner_container - only as wide as the burger. */
  .csa-headbar .et_pb_column,
  .csa-headbar__inner,
  .csa-nav,
  .csa-nav .et_pb_menu_inner_container,
  .csa-nav .et_pb_menu__wrap,
  .csa-nav .et_mobile_nav_menu { position: static !important; }
  .csa-nav .et_pb_menu__menu { display: none; }

  .csa-nav ul.et_mobile_menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    display: none;
    flex-direction: column;
    padding: 8px var(--csa-shell) 16px;
    margin: 0;
    background: #fff;
    border-top: 1px solid #eaedf1;
    border-bottom: 1px solid #eaedf1;
    box-shadow: 0 12px 24px rgba(30,58,95,.10);
    z-index: 9999;
    list-style: none;
  }
  .csa-nav .et_mobile_nav_menu .opened + ul.et_mobile_menu,
  .csa-nav ul.et_mobile_menu.opened { display: flex; }

  .csa-nav ul.et_mobile_menu > li { width: 100%; padding: 0; margin: 0; border: none; }
  .et-l .csa-nav ul.et_mobile_menu > li > a {
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid #f1f3f6;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #2c3746;
    opacity: 1;
  }
  .csa-nav ul.et_mobile_menu > li:last-child > a { border-bottom: none; }
  .et-l .csa-nav ul.et_mobile_menu > li > a::after { display: none; }

  /* burger styled as the prototype's bordered button */
  .csa-nav .et_mobile_nav_menu { display: flex; align-items: center; }
  .et-l .csa-nav .mobile_menu_bar {
    width: 46px;
    height: 46px;
    border: 1px solid #dfe4ea;
    background: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .et-l .csa-nav .mobile_menu_bar::before {
    /* Divi colors the burger with its default link blue */
    color: var(--csa-navy) !important;
    font-size: 22px;
    line-height: 1;
    top: auto;
    position: static;
  }
}

/* -- hero badges on one line (desktop) ----------------------------------- */

/* Requested change from the prototype, which wrapped these 3 + 1: the four
   badges sit on a single row on desktop. They are a sibling of the 640px copy
   block so they can use the full 1180px content width. */
.csa-hbadges { margin-top: 36px !important; max-width: none; }
@media (min-width: 981px) {
  .csa-hbadges {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(16px, 2.4vw, 34px);
    align-items: center;
  }
  .csa-hbadge { flex: 0 1 auto; min-width: 0; }
  .et-l .csa-hbadge__label { white-space: nowrap; }
}

/* -- mobile header fit --------------------------------------------------- */

@media (max-width: 780px) {
  .csa-headbar__inner { gap: 10px; }
  .csa-head-actions { gap: 10px; }
}
@media (max-width: 560px) {
  /* the logo lockup and phone shrink so the burger always stays on screen */
  .et-l .csa-logo__sub { display: none; }
  .et-l .csa-logo__name { font-size: 17px; }
  .et-l .csa-logo__mark { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }
  .et-l .csa-logo { gap: 10px; }
  .et-l .csa-hphone { font-size: 17px; }
  .et-l .csa-hphone__ico { width: 34px; height: 34px; }
}
@media (max-width: 430px) {
  .et-l .csa-hphone__num { display: none; }
  .et-l .csa-hphone { gap: 0; }
}
@media (max-width: 380px) {
  /* 320px phones: the logo, phone chip and burger have to share ~280px */
  .csa-headbar__inner { gap: 8px; }
  .csa-head-actions { gap: 8px; }
  .et-l .csa-logo__name { font-size: 15.5px; }
  .et-l .csa-logo__mark { width: 36px; height: 36px; font-size: 16px; }
  .et-l .csa-logo { gap: 8px; }
  .et-l .csa-hphone__ico { width: 32px; height: 32px; }
  .et-l .csa-nav .mobile_menu_bar { width: 40px; height: 40px; }
}