/*
 * Christmas Light Installation page (post 33).
 * Ported verbatim from the client-approved mockup
 * mockups/christmas-lights/variation-1.6.html. Loaded only on post 33.
 */


.cl-designer-section,.cl-invoices,.cl-gallery-section,.cl-who,.cl-commercial,.cl-areas{padding-top:var(--section-padding,clamp(3rem,8vw,5rem));padding-bottom:var(--section-padding,clamp(3rem,8vw,5rem))}
.cl-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:clamp(2rem,5vw,4rem);align-items:start;text-align:left;padding-bottom:var(--section-padding,clamp(3rem,8vw,5rem))}
.cl-hero-copy{padding-top:.75rem;min-width:0}
.cl-hero h1{display:block;max-width:20ch;margin:0 0 1.5rem;text-align:left}
.cl-hero h1::after{left:0;transform:none}
.cl-hero .cl-kicker{text-align:left;margin:0 0 .75rem}
.cl-hero-price{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:.55rem;color:#232426}
.cl-hero-price strong{font-family:Arvo,Georgia,serif;font-size:clamp(1.2rem,1.7vw,1.4rem);color:#df3b26}
.cl-hero-price span{font-size:.95rem;font-weight:700}
.cl-hero-included,.cl-hero-surcharge{margin:.25rem 0;color:#46474d;font-size:.95rem}
.cl-hero-surcharge{font-weight:600;color:#232426}
.cl-hero-actions{justify-content:flex-start!important;margin:1.5rem 0!important;gap:.75rem}
.cl-hero-actions .wp-block-button__link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.cl-hero-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;background:#e5e5e5;gap:1px;margin-top:1.5rem}
.cl-hero-stat{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:12px;background:#f9f9f9;color:#46474d;text-decoration:none;line-height:1.35}
.cl-hero-stat strong{display:block;color:#232426;font-size:.92rem}
.cl-hero-stat span{display:block;margin-top:.2rem;font-size:.76rem}
.cl-hero-review:hover{background:#fff;text-decoration:none}
.cl-hero-review:focus-visible{outline:2px solid #df3b26;outline-offset:-3px}
.cl-hero-form{box-sizing:border-box;min-width:0;background:#f9f9f9;border:1px solid #e5e5e5;border-radius:12px;padding:clamp(1.25rem,3vw,2rem);box-shadow:0 4px 18px rgba(35,36,38,.08)}
.cl-hero-form h2{text-align:left;margin:0 0 .45rem;font-size:1.4rem}
.cl-hero-form h2::after{content:none}
.cl-hero-form>p:first-of-type{margin:0 0 1.1rem;color:#46474d;font-size:.9rem}
.cl-hero-form label{display:block;margin:.8rem 0 .35rem;font-size:.875rem;font-weight:600;color:#232426}
.cl-hero-form label span{font-weight:400;color:#66686e}
.cl-hero-form input:not([type=submit]){display:block;width:100%;box-sizing:border-box;min-height:48px;padding:.875rem 1rem;border:1px solid #e5e5e5;border-radius:8px;background:#fff;color:#232426;font:inherit;font-size:1rem}
.cl-hero-form input[type=file]{height:auto;padding:.65rem .75rem}
.cl-hero-form input:focus-visible{outline:2px solid #df3b26;outline-offset:2px}
.cl-hero-form input::placeholder{color:#66686e;opacity:1}
.cl-hero-submit{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;box-sizing:border-box;margin-top:1.25rem;padding:.85rem 1.5rem;border-radius:9999px;background:#df3b26;color:#fff!important;font-weight:700;text-decoration:none}
.cl-hero-submit:hover{background:#c43520;text-decoration:none}
.cl-hero-submit:focus-visible{outline:2px solid #232426;outline-offset:2px}
.cl-hero-form-note{text-align:center;margin:.75rem 0 0!important;color:#66686e!important;font-size:.8rem!important}
.cl-hero-form-note a{font-weight:600;white-space:nowrap}
@media(max-width:1023px){.cl-hero{grid-template-columns:1fr}.cl-hero-copy{padding-top:0}.cl-hero h1{max-width:26ch}.cl-hero-trust{grid-template-columns:repeat(4,minmax(0,1fr))}.cl-hero-form{max-width:640px;width:100%;margin:0 auto}}
@media(max-width:599px){.cl-hero{text-align:center;gap:1.75rem}.cl-hero h1{margin-left:auto;margin-right:auto;text-align:center}.cl-hero h1::after{left:50%;transform:translateX(-50%)}.cl-hero .cl-kicker{text-align:center}.cl-hero-price{justify-content:center;display:grid;gap:.1rem}.cl-hero-actions{display:grid!important;grid-template-columns:1fr;margin:1.25rem 0!important}.cl-hero-actions .wp-block-button,.cl-hero-actions .wp-block-button__link{width:100%}.cl-hero-trust{grid-template-columns:repeat(2,minmax(0,1fr));text-align:left}.cl-hero-form{text-align:left}.cl-hero-form h2{text-align:left}.cl-hero-form-note{box-sizing:border-box;padding:0 60px 0 12px}}
.cl-designer-section{background:#f9f9f9;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.cl-lead{max-width:640px;margin-left:auto;margin-right:auto}
.service-benefits .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:1023px){.service-benefits .card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:599px){.service-benefits .card-grid{grid-template-columns:1fr}}
.cl-kicker{font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#c43520;margin-bottom:0}
.cl-steps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:1.25rem 0;font-size:.82rem}
.cl-step{border:1px solid #e5e5e5;border-radius:9999px;padding:5px 14px;color:#46474d;background:#fff}
.cl-step.on{border-color:#df3b26;color:#232426;background:rgba(223,59,38,.07);font-weight:600}
.cl-step.done{border-color:#2e7d32;color:#2e7d32;background:rgba(46,125,50,.07)}
.cl-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start;max-width:1060px;margin:0 auto}
@media(max-width:860px){.cl-grid{grid-template-columns:1fr}}
.cl-stage{background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;position:relative;min-height:280px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.cl-stage canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.cl-drop{display:block;padding:44px 24px;text-align:center;color:#46474d;font-size:.95rem;cursor:pointer;width:100%}
.cl-drop strong{color:#232426}
.cl-drop input{display:none}
.cl-drop .cl-choose{margin-top:14px;display:inline-block}
.cl-drop-hint{margin-top:10px;font-size:.82rem}
.cl-drop.over{outline:2px dashed #df3b26;outline-offset:-10px;border-radius:12px;color:#c43520}
.cl-hint{position:absolute;left:0;right:0;bottom:0;background:rgba(35,36,38,.92);color:#fff;font-size:.85rem;padding:9px 14px;text-align:center;pointer-events:none}
.cl-panel,.cl-est{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.cl-panel{margin-top:14px}
.cl-rowlabel{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#66686e;margin:12px 0 6px}
.cl-rowlabel:first-child{margin-top:0}
.cl-toolrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cl-tool{background:#f9f9f9;border:1px solid #e5e5e5;color:#232426;border-radius:9999px;padding:8px 15px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;min-height:44px}
.cl-tool.on{border-color:#df3b26;background:rgba(223,59,38,.08);color:#c43520}
.cl-tool:disabled{opacity:.4;cursor:not-allowed}
.cl-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cl-chip{display:flex;align-items:center;gap:7px;background:#f9f9f9;border:1px solid #e5e5e5;border-radius:9999px;padding:7px 14px;font-size:.85rem;cursor:pointer;color:#232426;font-family:inherit;min-height:44px}
.cl-chip.on{border-color:#df3b26;color:#c43520;background:rgba(223,59,38,.07)}
.cl-dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.cl-calib{display:none;margin-top:10px;background:#f9f9f9;border:1px solid #e5e5e5;border-radius:10px;padding:12px 14px}
.cl-calib.show{display:block}
.cl-calib h3{font-size:.92rem;margin:0 0 4px;color:#232426}
.cl-calib-step{font-size:.85rem;color:#46474d;margin:6px 0}
.cl-calib-step.dim{opacity:.45}
.cl-calib-step b{color:#232426}
.cl-calib-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(max-width:479px){.cl-calib-opts{grid-template-columns:1fr}}
.cl-calib-opts .cl-ref{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 14px;text-align:left;font-size:.88rem;width:100%;background:#fff;border-radius:12px}
.cl-ref span{font-weight:400;font-size:.78rem;color:#66686e}
.cl-ref.on span{color:#c43520}
.cl-custom-ft{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap;font-size:.85rem}
.cl-custom-ft input{width:80px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;color:#232426;padding:9px;font-size:.9rem;font-family:inherit;min-height:44px;box-sizing:border-box}
.cl-nophoto{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 2px;padding:11px 14px;background:rgba(223,59,38,.05);border:1px solid #e5e5e5;border-radius:10px;font-size:.9rem;color:#46474d}
.cl-nophoto b{color:#232426}
.cl-nophoto-input{display:flex;align-items:center;gap:6px;font-weight:600;color:#232426}
.cl-nophoto input{width:90px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;color:#232426;padding:9px;font-size:1rem;font-family:inherit;text-align:center;min-height:44px;box-sizing:border-box}
.cl-nophoto input:disabled{background:#f2f2f2;color:#66686e;cursor:not-allowed}
.cl-est{border-top:5px solid #2e7d32;padding:20px}
.cl-items{font-size:.86rem;color:#46474d;margin-bottom:4px}
.cl-li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed #e5e5e5}
.cl-li b{color:#232426;font-weight:600;white-space:nowrap}
.cl-total{font-family:Arvo,Georgia,serif;font-size:2.2rem;color:#df3b26;margin:6px 0 2px;font-weight:700}
.cl-per{font-size:.85rem;color:#46474d}
.cl-loyal{margin:14px 0;border-top:1px dashed #e5e5e5;padding-top:12px;font-size:.85rem;color:#46474d}
.cl-loyal b{color:#2e7d32}
.cl-incl{font-size:.8rem;color:#66686e;margin-bottom:14px}
.cl-ctas{display:flex;flex-direction:column;gap:8px}
.cl-ctas .wp-element-button{text-align:center}
.cl-ghost{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:600;text-decoration:none;border-radius:9999px;padding:9px 20px;font-size:.95rem;border:1.5px solid #df3b26;color:#c43520;background:transparent;min-height:44px;box-sizing:border-box}
.cl-note{font-size:.75rem;color:#66686e;margin-top:12px}
.cl-hygp{max-width:1060px;margin:2rem auto 0;background:#fff;border:1px solid #e5e5e5;border-left:4px solid #df3b26;border-radius:12px;padding:20px 24px}
.cl-hygp h3{color:#232426;margin-bottom:.5rem}
.cl-hygp p{margin:0}
.cl-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:1.25rem;max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:599px){.cl-gallery{grid-template-columns:1fr}}
.cl-photo{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);background:#fff;display:flex;flex-direction:column}
/* sources are pre-cropped to 16:9 in build.py, so this ratio never re-crops
   them; it just guarantees every tile in the row is identical. */
.cl-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.cl-photo figcaption{padding:12px 16px 14px;font-size:.85rem;line-height:1.5;color:#46474d}
/* Five tiles in a 2-column grid would leave the last one orphaned beside an
   empty cell. It spans the full width instead, which suits the La Grange shot
   since Mike asked for that frame uncropped. Same 16:9 as its siblings, so it
   scales up rather than balloons. */
.service-image{max-width:1060px}
.cl-midpair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;max-width:1060px;margin-left:auto;margin-right:auto}
@media(max-width:719px){.cl-midpair{grid-template-columns:1fr}}
.cl-midpair .cl-midphoto{margin:0}
.cl-midpair .cl-midphoto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px}
.cl-midphoto figcaption{padding:12px 16px 14px;font-size:.85rem;line-height:1.5;color:#46474d;text-align:center}
.cl-table-wrap{max-width:1060px;margin:2rem auto 0}
.cl-table-h{color:#232426;margin-bottom:.75rem;text-align:center}
.cl-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cl-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;font-size:.95rem}
.cl-table th{background:#f9f9f9;color:#232426;font-weight:700;text-align:left;padding:12px 16px;border-bottom:1px solid #e5e5e5;white-space:nowrap}
.cl-table td{padding:12px 16px;border-bottom:1px solid #f0f0f0;color:#46474d}
.cl-table tbody tr:last-child td{border-bottom:none}
.cl-table th:last-child,.cl-table td:last-child{font-weight:600;color:#232426;white-space:nowrap}
.cl-table-note{font-size:.85rem;color:#66686e;margin-top:.6rem;text-align:center}
@media(max-width:599px){.cl-table{font-size:.88rem}.cl-table th,.cl-table td{padding:10px 11px}}
.cl-invoices{background:#f9f9f9;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.cl-invoice-list{display:grid;gap:1.5rem;max-width:1060px;margin:1.75rem auto 0}
.cl-invoice-card{overflow:hidden;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.cl-invoice-with-photo{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);align-items:stretch}
.cl-invoice-photo{margin:0;min-height:100%}
.cl-invoice-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cl-invoice-body{padding:clamp(1.25rem,3vw,2rem)}
.cl-invoice-meta{margin:0 0 .4rem;color:#c43520;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cl-invoice-card h3{margin:0 0 .75rem;color:#232426}
.cl-invoice-card p{margin:.9rem 0;color:#46474d}
.cl-invoice-ledger{width:100%;margin:1.25rem 0;border-collapse:separate;border-spacing:0;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;table-layout:fixed;background:#fff}
.cl-invoice-ledger th,.cl-invoice-ledger td{padding:11px 14px;border-bottom:1px solid #e5e5e5;color:#46474d;font-size:.9rem;vertical-align:top}
.cl-invoice-ledger th{text-align:left;font-weight:400;overflow-wrap:anywhere}
.cl-invoice-ledger td{width:112px;text-align:right;font-weight:700;color:#232426;white-space:nowrap}
.cl-invoice-ledger tr:last-child th,.cl-invoice-ledger tr:last-child td{border-bottom:0}
.cl-invoice-total th,.cl-invoice-total td{background:#f9f9f9;font-weight:700;color:#232426}
@media(max-width:799px){.cl-invoice-with-photo{grid-template-columns:1fr}.cl-invoice-photo{aspect-ratio:16/9}.cl-invoice-photo img{aspect-ratio:16/9}.cl-invoice-ledger th,.cl-invoice-ledger td{padding:10px 11px}.cl-invoice-ledger td{width:96px}}
.cl-who{background:#fff}
.cl-who-grid{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;max-width:1060px;margin:0 auto}
.cl-who-photo{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.cl-who-photo img{display:block;width:100%;height:auto}
.cl-who-copy .cl-kicker{text-align:left;margin:0 0 .5rem}
.cl-who-copy h2{text-align:left;margin:0 0 1.25rem}
.cl-who-copy h2::after{left:0;transform:none}
.cl-who-copy p{margin:0 0 1rem;color:#46474d}
.cl-who-copy .cl-who-byline{margin:1.25rem 0 0;color:#232426}
@media(max-width:799px){.cl-who-grid{grid-template-columns:1fr}.cl-who-photo{max-width:640px}.cl-who-copy .cl-kicker,.cl-who-copy h2{text-align:center}.cl-who-copy h2::after{left:50%;transform:translateX(-50%)}}
/* This section is inserted before pre-footer-cta, which lives in .entry-content
   (no horizontal padding), not inside .page-content (16px padding). The theme's
   full-width-bg breakout assumes that padding exists to cancel, so here it
   spilled 16px past the right edge and caused horizontal scroll on mobile. The
   class is simply not needed at this depth, so it is not applied. Overriding it
   is not an option: base.css marks the mobile margins !important. */
.cl-commercial-p{max-width:640px;margin-left:auto;margin-right:auto}
.cl-area-tags{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:1.25rem}
.cl-area-tags a{text-decoration:none;border:1px solid #e5e5e5;border-radius:9999px;padding:8px 18px;font-size:.9rem;color:#232426;background:#fff;min-height:44px;display:inline-flex;align-items:center;transition:border-color .2s ease}
.cl-area-tags a:hover{border-color:#df3b26;color:#c43520}

/* --- Port-only additions (not in the preview) --- */

/* The utility bar is a sitewide template part. This page drops the Same-Day
   Service Available claim, so it is hidden here only, via this page-scoped
   stylesheet. */
.utility-same-day{display:none}

/* The preview hero form was a static, non-posting form. Live it is Contact
   Form 7, which wraps the form in .wpcf7 and autop-wraps its fields. */
.cl-hero>.wpcf7{min-width:0;box-sizing:border-box}
@media(max-width:1023px){.cl-hero>.wpcf7{max-width:640px;width:100%;margin:0 auto}}
.cl-hero-form p{margin:0}
.cl-hero-form>p:first-of-type{margin:0 0 1.1rem;color:#46474d;font-size:.9rem}
.cl-hero-form .wpcf7-form-control-wrap{display:block}
.cl-hero-form .wpcf7-not-valid-tip{margin-top:.35rem;color:#c43520;font-size:.8rem}
.cl-hero-form .wpcf7-response-output{margin:1rem 0 0;padding:.75rem 1rem;border-radius:8px;font-size:.85rem}
.cl-hero-form .wpcf7-spinner{display:block;margin:.5rem auto 0}
.cl-hero-form input[type=submit]{border:0;font-size:1rem;cursor:pointer}
.cl-hero-form .cf-turnstile{margin-top:1rem}