/*
Theme Name: Canyon Kitchen and Bath — Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Child theme for the Canyon Kitchen and Bath build. Only holds the few things Divi can't do natively — everything else lives in Divi's global settings and module attributes.
Author: Joe Petty
Template: Divi
Version: 1.1.0
Text Domain: divi-child
*/

/* ===========================================================================
   Design tokens — mirrors of the Divi global colors.
   ======================================================================== */
:root{
  --ckb-navy:#1D1D52;
  --ckb-navy-2:#2C2C78;
  --ckb-navy-line:#3B3B72;
  --ckb-accent:#24246C;
  --ckb-sand:#CABF9F;
  --ckb-paper:#F6F5F0;
  --ckb-surface:#ECEBE3;
  --ckb-ink:#1B1B22;
  --ckb-ink-soft:#61616E;
  --ckb-line:#DEDCE0;
}

/* ===========================================================================
   1. EYEBROW — uppercase label with the leading hairline.
   Written as markup inside a Text module:
     <span class="ckb-eb">What We Do</span>
   Modifiers: ckb-eb--light (on navy), ckb-eb--nolead (no rule)
   The span keeps the module wrapper a normal block, so the label stays
   aligned with the heading beneath it instead of centring itself.
   ======================================================================== */
.ckb-eb{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11.5px; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ckb-accent); line-height:1.2;
}
.ckb-eb::before{content:'';width:34px;height:1px;background:currentColor;opacity:.6;flex:none}
.ckb-eb--nolead::before{display:none}
.ckb-eb--light{color:var(--ckb-sand)}

/* ===========================================================================
   2. BUTTONS — square, hairline, uppercase. Divi's own arrow is suppressed.
   Module CSS Class: ckb-btn | ckb-btn-light | ckb-btn-ghost | ckb-tlink
                     (+ ckb-tlink--light on navy)
   Divi puts the class on the <a> itself, so every rule carries both the
   descendant and the self selector.
   ======================================================================== */
.ckb-btn .et_pb_button, .ckb-btn.et_pb_button,
.ckb-btn-light .et_pb_button, .ckb-btn-light.et_pb_button,
.ckb-btn-ghost .et_pb_button, .ckb-btn-ghost.et_pb_button,
.ckb-tlink .et_pb_button, .ckb-tlink.et_pb_button{
  font-family:'Manrope',sans-serif !important;
  font-size:12px !important; font-weight:600 !important;
  letter-spacing:.18em !important; text-transform:uppercase;
  border-radius:0 !important; transition:.35s;
}
.ckb-btn .et_pb_button::after, .ckb-btn.et_pb_button::after,
.ckb-btn-light .et_pb_button::after, .ckb-btn-light.et_pb_button::after,
.ckb-btn-ghost .et_pb_button::after, .ckb-btn-ghost.et_pb_button::after,
.ckb-tlink .et_pb_button::after, .ckb-tlink.et_pb_button::after{display:none !important}

/* Solid — on paper */
.ckb-btn .et_pb_button, .ckb-btn.et_pb_button{
  background:var(--ckb-navy) !important; color:var(--ckb-paper) !important;
  border:1px solid var(--ckb-navy) !important; padding:17px 32px !important;
}
.ckb-btn .et_pb_button:hover, .ckb-btn.et_pb_button:hover{
  background:var(--ckb-navy-2) !important; border-color:var(--ckb-navy-2) !important;
}

/* Solid — on navy. Paper fill, navy type, so it reads on a dark band. */
.ckb-btn-light .et_pb_button, .ckb-btn-light.et_pb_button{
  background:var(--ckb-paper) !important; color:var(--ckb-navy) !important;
  border:1px solid var(--ckb-paper) !important; padding:17px 32px !important;
}
.ckb-btn-light .et_pb_button:hover, .ckb-btn-light.et_pb_button:hover{
  background:#fff !important; border-color:#fff !important;
}

/* Ghost */
.ckb-btn-ghost .et_pb_button, .ckb-btn-ghost.et_pb_button{
  background:transparent !important; color:var(--ckb-navy) !important;
  border:1px solid var(--ckb-navy) !important; padding:17px 32px !important;
}
.ckb-btn-ghost .et_pb_button:hover, .ckb-btn-ghost.et_pb_button:hover{
  background:var(--ckb-navy) !important; color:var(--ckb-paper) !important;
}

/* Text link */
.ckb-tlink .et_pb_button, .ckb-tlink.et_pb_button{
  background:none !important; border:0 !important;
  border-bottom:1px solid var(--ckb-ink) !important;
  color:var(--ckb-ink) !important; padding:0 0 6px !important;
}
.ckb-tlink .et_pb_button:hover, .ckb-tlink.et_pb_button:hover{
  color:var(--ckb-accent) !important; border-bottom-color:var(--ckb-accent) !important;
}
.ckb-tlink--light .et_pb_button, .ckb-tlink--light.et_pb_button{
  color:#fff !important; border-bottom-color:rgba(255,255,255,.5) !important;
}
.ckb-tlink--light .et_pb_button:hover, .ckb-tlink--light.et_pb_button:hover{
  border-bottom-color:#fff !important;
}

/* ===========================================================================
   2b. BUTTON ROW — two CTAs side by side instead of stacked.
   Module CSS Class: ckb-btnrow on the COLUMN holding them.
   ======================================================================== */
.ckb-btnrow .et_pb_button_module_wrapper{
  display:inline-block; vertical-align:middle; margin:0;
}
.ckb-btnrow .et_pb_button_module_wrapper + .et_pb_button_module_wrapper{
  margin-left:34px;
}
@media (max-width:600px){
  .ckb-btnrow .et_pb_button_module_wrapper{display:block;margin:0 0 20px}
  .ckb-btnrow .et_pb_button_module_wrapper + .et_pb_button_module_wrapper{margin-left:0}
}

/* ===========================================================================
   3. SERVICE CARDS — auto-numbered 01…06.
   Module CSS Class: ckb-svc-grid on the SECTION, ckb-svc-cap on each title.
   Numbering spans both rows and renumbers if you reorder the cards.
   ======================================================================== */
.ckb-svc-grid{counter-reset:ckb-svc}
.ckb-svc-cap{
  counter-increment:ckb-svc;
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:18px; border-bottom:1px solid var(--ckb-line); transition:.3s;
}
.ckb-svc-cap h3{
  font-size:20px !important; font-weight:500 !important;
  letter-spacing:.02em; text-transform:uppercase; margin:0; padding:0;
}
.ckb-svc-cap::after{
  content:counter(ckb-svc,decimal-leading-zero);
  font-size:12px; font-weight:600; letter-spacing:.1em;
  color:var(--ckb-ink-soft); flex:none;
}

/* ===========================================================================
   4. STAT BAR — hairline between cells, none after the last.
   Module CSS Class: ckb-stat on each stat column.
   ======================================================================== */
.ckb-stat .ckb-n{
  font-size:44px; font-weight:200; letter-spacing:-.02em;
  color:var(--ckb-navy); line-height:1.1;
}
.ckb-stat .ckb-l{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ckb-ink-soft); margin-top:10px; font-weight:600;
}

/* ===========================================================================
   5. NUMBERED CHECKLIST — used in "The Canyon Difference".
   Written as markup inside a Text module, no module class needed.
   ======================================================================== */
.ckb-checklist{list-style:none;margin:0;padding:0}
.ckb-checklist li{
  display:flex; gap:18px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--ckb-line);
  font-size:15px; color:var(--ckb-ink);
}
.ckb-checklist li:last-child{border-bottom:0}
.ckb-checklist .ckb-num{
  font-size:12px; font-weight:600; letter-spacing:.1em;
  color:var(--ckb-accent); flex:none;
}

/* ===========================================================================
   6. TESTIMONIALS — plain markup, hairline rule per column.
   Module CSS Class: ckb-quote on the COLUMN.
   ======================================================================== */
.ckb-quote{border-left:1px solid var(--ckb-line);padding-left:40px !important}
.ckb-stars{color:var(--ckb-accent);letter-spacing:4px;font-size:13px}
.ckb-who{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ckb-loc{font-size:12px;color:var(--ckb-ink-soft);letter-spacing:.06em}
@media (max-width:980px){
  .ckb-quote{border-left:0;padding-left:0 !important}
}

/* ===========================================================================
   7. PROCESS STEPS — the "01 / Consult" label above each step.
   ======================================================================== */
.ckb-step-no{
  font-size:12px; color:var(--ckb-sand);
  letter-spacing:.16em; font-weight:600; text-transform:uppercase;
}

/* ===========================================================================
   8. GALLERY FILTER PILLS — square, hairline, uppercase.
   Module CSS Class: ckb-filter on a Filterable Portfolio module.
   ======================================================================== */
.ckb-filter .et_pb_portfolio_filters ul{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.ckb-filter .et_pb_portfolio_filters li{margin:0}
.ckb-filter .et_pb_portfolio_filters a{
  display:block; padding:11px 18px; border:1px solid var(--ckb-line);
  border-radius:0; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ckb-ink); background:transparent; transition:.3s;
}
.ckb-filter .et_pb_portfolio_filters a:hover{border-color:var(--ckb-navy)}
.ckb-filter .et_pb_portfolio_filters a.active{
  background:var(--ckb-navy); border-color:var(--ckb-navy); color:var(--ckb-paper);
}

/* ===========================================================================
   9. Utilities
   ======================================================================== */
.ckb-center, .ckb-center p, .ckb-center h1, .ckb-center h2{text-align:center}
/* A module with a max-width still sits left unless told otherwise. */
.et_pb_module.ckb-center{margin-left:auto !important;margin-right:auto !important}
/* CAUTION: Divi 5 columns are flex containers, so on a child with no explicit
   width these auto margins shrink it to its content rather than centring it.
   Give any embed or iframe inside .ckb-center an explicit width — see
   .ckb-give-formwrap in section 28. */
.ckb-center > .et_pb_module{margin-left:auto !important;margin-right:auto !important}

/* Square corners, belt-and-braces. */
.et_pb_button, .et_pb_contact_form input, .et_pb_contact_form textarea,
.et_pb_contact_form select, .et_pb_image img, .et_pb_blurb img{border-radius:0 !important}

/* ===========================================================================
   10. HERO — the scrim over the photo.
   Module CSS Class: ckb-hero on the SECTION.
   Divi's own gradient-over-image did not paint, and the photo is bright
   enough that white type needs a real scrim, so it lives here.
   ======================================================================== */
.ckb-hero{position:relative;overflow:hidden}
.ckb-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(90deg,
    rgba(14,14,38,.82) 0%,
    rgba(14,14,38,.62) 38%,
    rgba(14,14,38,.30) 62%,
    rgba(14,14,38,.14) 100%);
}
.ckb-hero > *{position:relative;z-index:1}

/* ===========================================================================
   11. TICK LIST — the feature list on service pages.
   Same numbered rows as ckb-checklist, but ruled on top to match the design.
   Written as markup inside a Text module.
   ======================================================================== */
.ckb-ticklist{list-style:none;margin:0;padding:0}
.ckb-ticklist li{
  display:flex; gap:16px; align-items:baseline;
  padding:16px 0; border-top:1px solid var(--ckb-line);
  font-size:15px; color:var(--ckb-ink);
}
.ckb-ticklist .ckb-num{
  font-size:12px; font-weight:600; letter-spacing:.1em;
  color:var(--ckb-accent); flex:none;
}

/* ===========================================================================
   12. LIST SPACING RESET
   Divi's content styles give <ul> its own top and bottom margin, which stacks
   on top of the module's margin — roughly 90px of dead space under a list
   instead of the 34px the design calls for. Zero the list's own margins and
   let the module's spacing be the only spacing.
   ======================================================================== */
.ckb-ticklist, .ckb-checklist{margin:0 !important;padding:0 !important}
.ckb-ticklist li, .ckb-checklist li{margin:0 !important}
.ckb-ticklist li:first-child{border-top:1px solid var(--ckb-line)}

/* ===========================================================================
   13. SERVICE CARD LINKS — the whole card reads as clickable in the design.
   The title is the link; the rule under it picks up the accent on hover.
   ======================================================================== */
.ckb-svc-cap h3 a{color:inherit;text-decoration:none;transition:.3s}
.ckb-svc-cap:hover{border-bottom-color:var(--ckb-accent)}
.ckb-svc-cap:hover h3 a{color:var(--ckb-accent)}

/* ===========================================================================
   14. FLUENT FORMS — dragged into the Canyon design.
   The form carries the class ckb-form (set in its Fluent Forms layout
   settings), and sits inside .ckb-formcard on the page.
   ======================================================================== */
.ckb-formcard{
  background:var(--ckb-paper);
  padding:44px 40px;
}

.ckb-form .ff-el-group{margin-bottom:22px}

/* Labels: the same tracked uppercase as everything else on the site */
.ckb-form .ff-el-input--label label{
  font-family:'Manrope',sans-serif;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ckb-ink-soft) !important;
  margin-bottom:9px;
}
.ckb-form .ff-el-is-required.asterisk-right label:after{color:var(--ckb-accent)}

/* Inputs: square, hairline, no rounded corners anywhere */
.ckb-form .ff-el-form-control{
  font-family:'Manrope',sans-serif;
  font-size:15px;
  color:var(--ckb-ink);
  background:#fff;
  border:1px solid var(--ckb-line);
  border-radius:0 !important;
  padding:14px 16px;
  box-shadow:none;
  transition:border-color .25s;
  width:100%;
}
.ckb-form .ff-el-form-control:focus{
  border-color:var(--ckb-navy);
  outline:none;
  box-shadow:none;
}
.ckb-form .ff-el-form-control::placeholder{color:#a4a4b0}
.ckb-form textarea.ff-el-form-control{min-height:130px;resize:vertical}
.ckb-form select.ff-el-form-control{appearance:none;-webkit-appearance:none;background-image:none}

/* Name fields side by side */
.ckb-form .ff-name-field-wrapper{display:flex;gap:18px}
.ckb-form .ff-name-field-wrapper > div{flex:1}
@media (max-width:600px){
  .ckb-form .ff-name-field-wrapper{display:block}
}

/* Submit: the site's solid button, not Fluent's blue pill */
.ckb-form .ff-btn-submit{
  font-family:'Manrope',sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  background:var(--ckb-navy) !important;
  color:var(--ckb-paper) !important;
  border:1px solid var(--ckb-navy) !important;
  border-radius:0 !important;
  padding:17px 32px !important;
  width:100%;
  transition:.35s;
}
.ckb-form .ff-btn-submit:hover{
  background:var(--ckb-navy-2) !important;
  border-color:var(--ckb-navy-2) !important;
}

/* Errors and the success message */
.ckb-form .error-text, .ckb-form .text-danger{
  font-size:12.5px; color:#9B2C2C; letter-spacing:.02em;
}
.ff-message-success{
  background:var(--ckb-paper);
  border:1px solid var(--ckb-line);
  border-left:2px solid var(--ckb-accent);
  padding:26px 28px;
  font-size:16px;
  color:var(--ckb-ink);
}

/* ===========================================================================
   15. PORTFOLIO GRID — squared off and quieted down to match the design.
   Filter pill styling lives in section 8 (ckb-filter).
   ======================================================================== */
.ckb-filter .et_pb_portfolio_filters{margin-bottom:44px}
.ckb-filter .et_pb_portfolio_item{margin-bottom:34px}
.ckb-filter .et_pb_portfolio_item .et_portfolio_image,
.ckb-filter .et_pb_portfolio_item img{border-radius:0 !important}
.ckb-filter .et_pb_portfolio_item h2,
.ckb-filter .et_pb_portfolio_item h3{
  font-family:'Manrope',sans-serif;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ckb-ink);
  margin-top:18px;
  padding-bottom:0;
}
/* Hover overlay in brand navy rather than Divi's default */
.ckb-filter .et_overlay{
  background:rgba(29,29,82,.62) !important;
  border:0 !important;
  border-radius:0 !important;
}
.ckb-filter .et_overlay:before{color:#fff !important}

/* ===========================================================================
   16. FINANCING CARDS
   Module CSS Class: ckb-card on the COLUMN. Inner bits are markup.
   ======================================================================== */
.ckb-card{
  border:1px solid var(--ckb-line);
  padding:52px 40px !important;
  background:#fff;
}
.ckb-tag{
  display:inline-block;
  font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ckb-ink-soft);
}
.ckb-per{
  font-size:14px; color:var(--ckb-ink-soft); letter-spacing:.02em;
}
.ckb-planlist{list-style:none;margin:0 !important;padding:0 !important}
.ckb-planlist li{
  padding:13px 0;
  border-top:1px solid var(--ckb-line);
  font-size:14px;
  color:var(--ckb-ink);
  margin:0 !important;
}
.ckb-disclaimer{
  font-size:13px; color:var(--ckb-ink-soft); line-height:1.7;
}

/* ===========================================================================
   17. CONTACT DETAILS + MAP
   ======================================================================== */
.ckb-inforow{
  display:flex; gap:28px; align-items:baseline;
  padding:18px 0; border-top:1px solid var(--ckb-line);
}
.ckb-inforow .ckb-k{
  flex:none; width:110px;
  font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ckb-ink-soft);
}
.ckb-inforow .ckb-v{font-size:15.5px;color:var(--ckb-ink);line-height:1.6}
.ckb-inforow .ckb-v a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ckb-line)}
.ckb-inforow .ckb-v a:hover{color:var(--ckb-accent);border-bottom-color:var(--ckb-accent)}

/* Google's embed iframe, squared off and sized like the design's map block */
.ckb-map iframe{
  display:block; width:100%; height:420px;
  border:1px solid var(--ckb-line) !important;
  border-radius:0 !important;
  filter:grayscale(.35) contrast(1.02);
}

/* ===========================================================================
   18. LEGAL PAGES — privacy policy and anything like it.
   Module CSS Class: ckb-legal on the Text module holding the body.
   Long-form prose at a readable measure, quieter than marketing pages.
   ======================================================================== */
.ckb-legal{max-width:760px}
.ckb-legal h2{
  font-family:'Manrope',sans-serif;
  font-size:22px !important; font-weight:500 !important;
  letter-spacing:-.01em; line-height:1.3;
  color:var(--ckb-ink); margin:52px 0 16px; padding:0;
}
.ckb-legal h2:first-child{margin-top:0}
.ckb-legal p{font-size:15.5px; line-height:1.75; color:var(--ckb-ink-soft); margin:0 0 18px}
.ckb-legal ul{margin:0 0 18px; padding-left:22px}
.ckb-legal li{font-size:15.5px; line-height:1.75; color:var(--ckb-ink-soft); margin-bottom:8px}
.ckb-legal a{color:var(--ckb-accent); text-decoration:none; border-bottom:1px solid var(--ckb-line)}
.ckb-legal a:hover{border-bottom-color:var(--ckb-accent)}
.ckb-legal .ckb-rights p{margin-bottom:14px}
.ckb-legal .ckb-rights strong{color:var(--ckb-ink); font-weight:600}

/* ===========================================================================
   19. RELATED SERVICES — cross-links at the foot of each service page.
   ======================================================================== */
.ckb-related{border-top:1px solid var(--ckb-line);padding-top:26px}
.ckb-related a{
  display:block;
  font-size:15px; font-weight:500; letter-spacing:.01em;
  color:var(--ckb-ink); text-decoration:none;
  padding:14px 0; border-bottom:1px solid var(--ckb-line);
  transition:.25s;
}
.ckb-related a:hover{color:var(--ckb-accent);padding-left:8px}
.ckb-related a span{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ckb-ink-soft); display:block; margin-bottom:3px;
}

/* ===========================================================================
   21. GLOBAL FOOTER
   ======================================================================== */
.ckb-foot-logo img{max-width:210px;height:auto}
.ckb-foot-h{
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ckb-sand) !important; margin:0 0 20px !important;
}
.ckb-footlinks{list-style:none;margin:0 !important;padding:0 !important}
.ckb-footlinks li{margin:0 !important}
.ckb-footlinks a{
  display:block; padding:7px 0;
  font-size:14.5px; color:rgba(246,245,240,.78);
  text-decoration:none; transition:.25s;
}
.ckb-footlinks a:hover{color:#fff;padding-left:5px}
.ckb-footinfo{font-size:14.5px;color:rgba(246,245,240,.78);line-height:1.9}
.ckb-footinfo a{color:inherit;text-decoration:none}
.ckb-footinfo a:hover{color:#fff}
.ckb-footbar{
  border-top:1px solid var(--ckb-navy-line);
  padding-top:26px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12.5px; color:rgba(246,245,240,.55);
}
.ckb-footbar a{color:inherit;text-decoration:none}
.ckb-footbar a:hover{color:#fff}

/* ===========================================================================
   22. SITE NAVIGATION — output by [ckb_menu], styled entirely here.
   No dependency on Divi's Menu module or its stylesheet.
   ======================================================================== */
.ckb-nav{position:relative}
.ckb-nav__list{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:flex; align-items:center; justify-content:flex-end; gap:30px;
}
.ckb-nav__list li{margin:0 !important;position:relative}
.ckb-nav__list > li > a{
  display:block; padding:10px 0;
  font-family:'Manrope',sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ckb-ink); text-decoration:none; white-space:nowrap; transition:.25s;
}
.ckb-nav__list > li > a:hover,
.ckb-nav__list > li.current-menu-item > a,
.ckb-nav__list > li.current-menu-ancestor > a{color:var(--ckb-accent)}

/* Submenu */
.ckb-nav__list .sub-menu{
  list-style:none !important; margin:0 !important; padding:10px 0 !important;
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  min-width:264px; background:var(--ckb-paper);
  border:1px solid var(--ckb-line); border-top:1px solid var(--ckb-accent);
  opacity:0; visibility:hidden; transition:.25s; z-index:100;
}
.ckb-nav__list > li:hover > .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ckb-nav__list .sub-menu a{
  display:block; padding:10px 22px;
  font-family:'Manrope',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ckb-ink); text-decoration:none; white-space:nowrap; transition:.2s;
}
.ckb-nav__list .sub-menu a:hover{color:var(--ckb-accent);background:var(--ckb-surface)}

/* Hamburger */
.ckb-nav__toggle{
  display:none; background:none; border:0; cursor:pointer;
  padding:10px; margin-left:auto; width:44px; height:44px;
}
.ckb-nav__toggle span{
  display:block; width:22px; height:1px; background:var(--ckb-ink); margin:5px 0;
  transition:.25s;
}
.ckb-nav.is-open .ckb-nav__toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ckb-nav.is-open .ckb-nav__toggle span:nth-child(2){opacity:0}
.ckb-nav.is-open .ckb-nav__toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:980px){
  .ckb-nav__toggle{display:block}
  .ckb-nav__list{
    display:none; position:absolute; top:100%; right:0; left:auto;
    flex-direction:column; align-items:flex-start; gap:0;
    min-width:262px; background:var(--ckb-paper);
    border:1px solid var(--ckb-line); padding:8px 0 !important;
  }
  .ckb-nav.is-open .ckb-nav__list{display:flex}
  .ckb-nav__list > li{width:100%}
  .ckb-nav__list > li > a{padding:13px 22px}
  .ckb-nav__list .sub-menu{
    position:static; transform:none; opacity:1; visibility:visible;
    border:0; border-left:1px solid var(--ckb-line);
    margin:0 0 6px 22px !important; min-width:0; display:none;
  }
  .ckb-nav__list > li.is-open > .sub-menu{display:block}
}

/* ===========================================================================
   20. GLOBAL HEADER
   One flex bar rather than Divi columns. Divi's column widths, margins and
   block stacking kept colliding here; a single container is deterministic.
   Module CSS Class: ckb-header on the SECTION.
   ======================================================================== */
.ckb-header{
  position:sticky; top:0; z-index:9999;
  background:var(--ckb-paper);
  border-bottom:1px solid var(--ckb-line);
}
.admin-bar .ckb-header{top:32px}
@media (max-width:782px){.admin-bar .ckb-header{top:46px}}

/* Kill Divi's spacing inside the header only */
.ckb-header.et_pb_section{padding:0 !important}
.ckb-header .et_pb_row{
  padding:0 !important;
  width:90%; max-width:1300px; margin:0 auto;
}
.ckb-header .et_pb_column{margin:0 !important;width:100% !important}
.ckb-header .et_pb_module{margin:0 !important}

/* The bar */
.ckb-navbar{
  display:flex; align-items:center; gap:44px;
  min-height:88px;
}
.ckb-navbar__logo{flex:none;display:block;line-height:0}
.ckb-navbar__logo img{height:42px;width:auto;display:block}
.ckb-navbar .ckb-nav{flex:1 1 auto;min-width:0}
.ckb-navbar__right{
  flex:none; margin-left:auto;
  display:flex; align-items:center; gap:28px;
}
.ckb-navbar__phone{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  color:var(--ckb-ink); text-decoration:none; white-space:nowrap;
}
.ckb-navbar__phone:hover{color:var(--ckb-accent)}
.ckb-navbar__cta{
  display:inline-block;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  background:var(--ckb-navy); color:var(--ckb-paper);
  border:1px solid var(--ckb-navy);
  padding:15px 28px; text-decoration:none; white-space:nowrap;
  transition:.3s;
}
.ckb-navbar__cta:hover{background:var(--ckb-navy-2);border-color:var(--ckb-navy-2);color:#fff}

/* The phone used to be the first thing dropped as the header narrowed, and
   below 600px both it and the CTA went, leaving no action in the header at all.
   On a phone a tap-to-call is the highest-intent thing on the page — worth more
   than a button that opens a form — so the priority is inverted: the phone
   stays all the way down, and it takes over the button's appearance once the
   CTA is dropped. */
@media (max-width:1100px){
  .ckb-navbar{gap:28px}
  .ckb-navbar__right{gap:18px}
}
@media (max-width:980px){
  .ckb-navbar{min-height:72px;gap:16px}
  .ckb-navbar .ckb-nav{flex:none;margin-left:auto;order:3}
  .ckb-navbar__right{gap:14px;order:2;margin-left:auto}
  .ckb-navbar__cta{padding:12px 18px;letter-spacing:.12em}
  .ckb-navbar__phone{font-size:11px;letter-spacing:.08em}
}
@media (max-width:600px){
  /* CTA goes; the phone becomes the button. */
  .ckb-navbar__cta{display:none}
  .ckb-navbar__logo img{height:34px}
  .ckb-navbar__phone{
    display:inline-block;
    background:var(--ckb-navy); color:var(--ckb-paper) !important;
    border:1px solid var(--ckb-navy);
    padding:11px 15px; font-size:12px; letter-spacing:.05em;
    line-height:1;
  }
}
@media (max-width:380px){
  .ckb-navbar{gap:10px}
  .ckb-navbar__phone{padding:10px 11px;font-size:11px}
  .ckb-navbar__logo img{height:30px}
}

/* ===========================================================================
   24. MOBILE
   The generated layouts carry desktop spacing with no phone override, so this
   is where the site is made to breathe on a small screen. Targets match the
   reference design: 88px section padding on tablet and phone, H1 at 40px,
   H2 at 32px.
   ======================================================================== */
@media (max-width:980px){

  /* Section rhythm — the header is exempt, it sets its own */
  .et_pb_section{padding-top:88px !important;padding-bottom:88px !important}
  .ckb-header.et_pb_section{padding:0 !important}

  /* Hero: the desktop version pushes content down with 300px of padding,
     which on a phone leaves the headline below the fold. */
  .ckb-hero.et_pb_section{
    padding-top:150px !important;
    padding-bottom:80px !important;
    min-height:0 !important;
  }
  .ckb-hero::before{
    background:linear-gradient(180deg,
      rgba(14,14,38,.55) 0%,
      rgba(14,14,38,.72) 55%,
      rgba(14,14,38,.86) 100%);
  }

  /* Stat bar: the divider must move from the right edge to the bottom
     once the cells stack, or it draws a line down the side of nothing. */
  .ckb-stat.et_pb_column{
    border-right:0 !important;
    border-bottom:1px solid var(--ckb-line) !important;
    padding-top:34px !important;
    padding-bottom:34px !important;
  }
  .ckb-stat.et_pb_column:last-child{border-bottom:0 !important}
  .ckb-stat .ckb-n{font-size:38px}

  /* Cards and panels lose their generous desktop padding */
  .ckb-card{padding:38px 28px !important}
  .ckb-formcard{padding:32px 24px !important}

  /* Columns need air between them once stacked */
  .et_pb_column{margin-bottom:38px}
  .et_pb_column:last-child{margin-bottom:0}
  .ckb-header .et_pb_column{margin-bottom:0}

  /* Long measures collapse to full width */
  .et_pb_module[class*="ckb-"]{max-width:100% !important}
}

@media (max-width:600px){
  .et_pb_section{padding-top:72px !important;padding-bottom:72px !important}
  .ckb-hero.et_pb_section{padding-top:130px !important;padding-bottom:64px !important}

  /* Contact details stack label above value */
  .ckb-inforow{display:block;padding:16px 0}
  .ckb-inforow .ckb-k{width:auto;margin-bottom:5px}

  /* Numbered rows tighten up */
  .ckb-checklist li,.ckb-ticklist li{gap:12px;font-size:14.5px;padding:14px 0}
  .ckb-related a{font-size:14.5px}

  /* Service card numbers stay on the title line */
  .ckb-svc-cap h3{font-size:17px !important}

  /* Map doesn't need to be half the screen */
  .ckb-map iframe{height:280px}

  /* Gallery filters wrap tighter */
  .ckb-filter .et_pb_portfolio_filters a{padding:9px 13px;font-size:10px;letter-spacing:.12em}

  /* Footer */
  .ckb-foot-logo img{max-width:180px}
  .ckb-footbar{flex-direction:column;gap:8px}

  /* Forms: full-width tap targets */
  .ckb-form .ff-el-form-control{font-size:16px;padding:13px 14px}
  .ckb-form .ff-btn-submit{width:100%}
}

/* Nothing may push the page sideways. */
html,body{overflow-x:hidden}
img,iframe,video{max-width:100%}
.et_pb_row{max-width:100%}

/* ===========================================================================
   25. REVIEWS
   A rating line, three full reviews, then a drifting strip of many more.
   The strip exists to communicate volume — 90 reviews is the signal, and a
   paged carousel would hide it behind a click nobody makes.
   ======================================================================== */
.ckb-rating{
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:14px; color:var(--ckb-ink-soft);
}
.ckb-rating .ckb-rating__score{
  font-size:30px; font-weight:200; color:var(--ckb-ink); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ckb-rating .ckb-stars{color:var(--ckb-accent);letter-spacing:3px;font-size:14px}
.ckb-rating a{color:var(--ckb-accent);text-decoration:none;border-bottom:1px solid var(--ckb-line)}
.ckb-rating a:hover{border-bottom-color:var(--ckb-accent)}

/* --- the drifting strip --------------------------------------------------- */
.ckb-marquee{
  position:relative; overflow:hidden;
  margin-left:calc(50% - 50vw); width:100vw;   /* break the container */
  padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ckb-marquee__row{display:flex;width:max-content;gap:20px;padding:10px 0}
.ckb-marquee__row--a{animation:ckb-drift-left 96s linear infinite}
.ckb-marquee__row--b{animation:ckb-drift-right 112s linear infinite}
.ckb-marquee:hover .ckb-marquee__row{animation-play-state:paused}

@keyframes ckb-drift-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes ckb-drift-right{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

.ckb-rcard{
  flex:0 0 380px; max-width:380px;
  background:#fff; border:1px solid var(--ckb-line);
  padding:26px 28px;
}
.ckb-rcard__stars{color:var(--ckb-accent);letter-spacing:3px;font-size:12px;margin-bottom:12px}
.ckb-rcard__text{
  font-size:14.5px; line-height:1.7; color:var(--ckb-ink);
  margin:0 0 16px;
}
.ckb-rcard__who{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ckb-ink);
}
.ckb-rcard__src{font-size:11px;color:var(--ckb-ink-soft);letter-spacing:.06em;margin-top:2px}

@media (max-width:600px){
  .ckb-rcard{flex:0 0 290px;max-width:290px;padding:22px 22px}
  .ckb-rcard__text{font-size:14px}
}

/* Anyone who has asked for less motion gets a static, scrollable strip. */
@media (prefers-reduced-motion: reduce){
  .ckb-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ckb-marquee__row{animation:none !important;width:auto}
}

/* ===========================================================================
   26. DARK SECTIONS
   Theme Options set a global heading colour (ink) and body colour (ink), and
   those rules out-specify a module's own colour once Divi regenerates its CSS.
   On a navy band that turns the copy almost invisible. Sections with a dark
   background carry ckb-dark and force light text back.
   ======================================================================== */
.ckb-dark h1, .ckb-dark h2, .ckb-dark h3, .ckb-dark h5, .ckb-dark h6,
.ckb-dark .et_pb_module h1, .ckb-dark .et_pb_module h2,
.ckb-dark .et_pb_module h3, .ckb-dark .et_pb_module h5{
  color:#ffffff !important;
}
.ckb-dark h4, .ckb-dark .et_pb_module h4{color:#ffffff !important}
.ckb-dark p, .ckb-dark li, .ckb-dark span,
.ckb-dark .et_pb_text, .ckb-dark .et_pb_text p{
  color:var(--ckb-paper) !important;
}
/* Elements that set their own colour deliberately keep it */
.ckb-dark .ckb-eb--light{color:var(--ckb-sand) !important}
.ckb-dark .ckb-foot-h{color:var(--ckb-sand) !important}
.ckb-dark .ckb-step-no{color:var(--ckb-sand) !important}
.ckb-dark .ckb-btn-light .et_pb_button,
.ckb-dark .ckb-btn-light.et_pb_button{color:var(--ckb-navy) !important}
.ckb-dark .ckb-footlinks a{color:rgba(246,245,240,.78) !important}
.ckb-dark .ckb-footlinks a:hover{color:#fff !important}
.ckb-dark .ckb-footinfo, .ckb-dark .ckb-footinfo a{color:rgba(246,245,240,.78) !important}
.ckb-dark .ckb-footbar, .ckb-dark .ckb-footbar a{color:rgba(246,245,240,.55) !important}

/* ===========================================================================
   27. SISTER COMPANY NOTE
   A framed aside, so an outbound link reads as a credential rather than the
   page giving up and sending you elsewhere.
   ======================================================================== */
.ckb-sister{
  background:var(--ckb-surface);
  border-left:2px solid var(--ckb-accent);
  padding:22px 26px;
}
.ckb-sister p{
  margin:0; font-size:14.5px; line-height:1.7; color:var(--ckb-ink);
}
.ckb-sister strong{font-weight:600}

/* ===========================================================================
   28. GIVEAWAY CAMPAIGN PAGE
   /enter-to-win-a-5000-bathroom-remodel/ — a live campaign rebuilt at the old
   slug. The Google Form is an iframe in a Code module; it cannot be styled
   from here, so the frame just gets room to breathe and a matching border.
   ======================================================================== */
.ckb-give-np{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,245,240,.6) !important; margin:0;
}
/* Divi 5 columns are flex containers. The .ckb-center utility sets
   `margin-left/right:auto` on every direct child module — which, on a flex
   item with no explicit width, does not centre it, it SHRINKS it to its
   content width. Text modules do not notice. An iframe does: its width="100%"
   then resolves against a collapsed parent and the form renders a few hundred
   pixels wide. Any module inside .ckb-center whose content has no natural
   width needs an explicit width. */
.ckb-give-formwrap{
  width:100% !important;
  max-width:860px;
  align-self:center;
}
.ckb-give-form{
  width:100%;
  background:#fff; border:1px solid var(--ckb-line); padding:8px;
}
.ckb-give-form iframe{display:block;width:100%;min-width:100%;border:0}

/* The rules run long. Smaller, tighter, and clearly secondary to the entry. */
.ckb-give-rules{max-width:820px}
.ckb-give-rules h3{
  font-size:15px !important; font-weight:600; letter-spacing:.01em;
  color:var(--ckb-ink) !important; margin:34px 0 10px;
}
.ckb-give-rules p, .ckb-give-rules li{
  font-size:13.5px; line-height:1.75; color:var(--ckb-ink-soft);
}
.ckb-give-rules ul{margin:0 0 14px; padding-left:20px}
.ckb-give-rules li{margin-bottom:5px}
.ckb-legal-lede{
  font-size:12.5px !important; font-weight:600; letter-spacing:.04em;
  color:var(--ckb-ink) !important; margin-bottom:24px;
}
@media (max-width:980px){
  .ckb-give-form{padding:4px}
  .ckb-give-rules h3{margin-top:26px}
}