/* Variant C legal layer. Same tokens as inject.css: flat surfaces, 3 radii, blue for structure, gold only on the CTA. */
.c4l-skip { position: absolute; left: 8px; top: -60px; z-index: 100000; background: #fff; color: #111; padding: 12px 16px; border-radius: var(--r-sm, 4px); font: 700 14px/1 var(--sans, Epilogue, sans-serif); text-decoration: none; }
.c4l-skip:focus { top: 8px; }

/* pages */
.c4l-page .c4b-final { display: none !important; }
.c4l-root { background: var(--bg, #111010); color: var(--text, #fff); font-family: var(--sans, Epilogue, system-ui, sans-serif); padding: 168px var(--s3, 24px) var(--s7, 96px); min-height: 70vh; }
.c4l-in { max-width: 820px; margin: 0 auto; }
.c4l-kick { display: block; margin-bottom: var(--s1, 8px); font: 800 var(--fs-label, 12px)/1 var(--sans, Epilogue, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--blue, #2c87ff); }
html body .c4l-root h1 { font: 400 clamp(40px, 5.5vw, 68px)/1.02 var(--display, Anton, Impact, sans-serif); text-transform: uppercase; margin: var(--s2, 16px) 0 var(--s2, 16px); color: var(--text, #fff); }
.c4l-lede { margin: 0 0 var(--s3, 24px); font-size: var(--fs-lede, 18px); line-height: 1.55; color: var(--muted, #b9c0ca); }
.c4l-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
html body .c4l-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: var(--r-pill, 999px); color: var(--text, #fff) !important; font: 700 var(--fs-sm, 14px)/1 var(--sans, Epilogue, sans-serif); text-decoration: none; }
html body .c4l-tabs a:hover { border-color: var(--blue, #2c87ff); color: var(--blue, #2c87ff) !important; }
html body .c4l-tabs a[aria-current="page"] { background: #1a63c9; border-color: #1a63c9; color: #fff !important; }
.c4l-draft { margin: 0 0 var(--s4, 32px); padding: 12px 16px; border: 1px dashed var(--blue, #2c87ff); border-radius: var(--r-sm, 4px); font-size: var(--fs-sm, 14px); line-height: 1.5; color: var(--muted, #b9c0ca); }
.c4l-draft b { color: var(--text, #fff); }
.c4l-prose section { padding: var(--s3, 24px) 0; border-top: 1px solid var(--line, rgba(255,255,255,.14)); }
html body .c4l-root h2 { font: 800 22px/1.25 var(--sans, Epilogue, sans-serif); text-transform: none; letter-spacing: 0; margin: 0 0 var(--s1, 8px); color: var(--text, #fff); }
.c4l-prose p, .c4l-prose li { font-size: var(--fs-body, 16px); line-height: 1.75; color: #d5dae2; max-width: 70ch; }
.c4l-prose p { margin: 0 0 var(--s2, 16px); }
.c4l-prose ul { margin: 0 0 var(--s2, 16px); padding-left: 22px; }
html body .c4l-root a { color: var(--blue, #2c87ff) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html body .c4l-root .c4b-cta { color: var(--ink, #111) !important; text-decoration: none; }
.c4l-ph { display: inline; padding: 1px 6px; border: 1px dashed var(--blue, #2c87ff); border-radius: var(--r-sm, 4px); color: var(--text, #fff); background: rgba(44,135,255,.12); font-size: .92em; }
.c4l-note { font-size: var(--fs-sm, 14px); color: var(--blue, #2c87ff); }

/* customer checklist */
.c4l-scroll { overflow-x: auto; margin: var(--s3, 24px) 0 var(--s5, 48px); }
.c4l-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-sm, 14px); }
.c4l-table th, .c4l-table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.14)); line-height: 1.5; color: var(--muted, #b9c0ca); }
.c4l-table thead th { color: var(--text, #fff); font-weight: 800; }
.c4l-table tbody th { color: var(--text, #fff); font-weight: 700; width: 24%; }
.c4l-st { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill, 999px); font: 800 12px/1 var(--sans, Epilogue, sans-serif); letter-spacing: .04em; white-space: nowrap; }
.c4l-st-needed { border: 1px dashed var(--blue, #2c87ff); color: var(--text, #fff); }
.c4l-st-confirm { background: var(--navy, #0b1f3f); color: #fff; }
.c4l-copy { display: block; width: 100%; margin: var(--s2, 16px) 0; padding: 14px; background: var(--surface, #171717); color: var(--text, #fff); border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: var(--r-sm, 4px); font: 400 14px/1.6 var(--sans, Epilogue, sans-serif); resize: vertical; }
.c4l-copied { margin-left: var(--s2, 16px); font-size: var(--fs-sm, 14px); color: var(--muted, #b9c0ca); }
.c4l-fine { margin: var(--s2, 16px) 0 0; font-size: 13px; line-height: 1.5; color: var(--muted, #b9c0ca); }

/* footer row */
.c4l-foot { max-width: 1200px; margin: var(--s4, 32px) auto 0; padding: var(--s3, 24px) var(--s3, 24px) var(--s4, 32px); border-top: 1px solid var(--line, rgba(255,255,255,.14)); font-family: var(--sans, Epilogue, sans-serif); color: var(--muted, #b9c0ca); }
.c4l-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: var(--s2, 16px); }
html body .c4l-foot a { color: var(--text, #fff) !important; font: 700 var(--fs-sm, 14px)/1.4 var(--sans, Epilogue, sans-serif); text-decoration: underline; text-underline-offset: 3px; }
html body .c4l-foot a:hover { color: var(--blue, #2c87ff) !important; }
.c4l-foot p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; max-width: 90ch; }
.c4l-foot .c4l-ph { font-size: 12px; }

/* consent box inside the quote and booking forms */
.c4l-consent { margin: var(--s2, 16px) 0; }
.c4l-consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--muted, #b9c0ca); }
.c4l-consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--blue, #2c87ff); }
html body .c4l-consent label, html body .c4l-consent label span { text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: 13px !important; color: #d5dae2 !important; }
html body .c4l-consent a { color: var(--blue, #2c87ff) !important; text-decoration: underline; }
.c4l-consent .c4l-fine { margin: 8px 0 0 30px; font-size: 12px; }

/* tracking banner */
.c4l-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99990; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--surface, #171717); border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: var(--r, 12px); box-shadow: var(--elev, 0 12px 32px rgba(0,0,0,.45)); font-family: var(--sans, Epilogue, sans-serif); }
.c4l-banner p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.5; color: var(--text, #fff); }
.c4l-banner div { display: flex; gap: 8px; }
.c4l-banner button { min-height: 44px !important; padding: 10px 20px !important; }

/* reduced motion: stop the animated backgrounds, scribbles and transitions */
@media (prefers-reduced-motion: reduce) {
  .background-fx-canvas, canvas.background-fx-canvas, .c4m-fx canvas { display: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .c4m-scr-svg path { stroke-dashoffset: 0 !important; }
}
@media (max-width: 640px) { .c4l-root { padding-top: 140px; } .c4l-foot { padding-left: 16px; padding-right: 16px; } }
.c4l-consent label + label { margin-top: 10px; }
.c4l-prose p.c4l-note { color: var(--blue, #2c87ff); font-size: 14px; }

/* /thanks: email photos after the Urable form (Urable's confirmation redirect lands here) */
.c4t-card { margin: var(--s3, 24px) 0; padding: var(--s4, 32px); background: var(--surface, #1a1a1a); border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: var(--r, 8px); }
html body .c4t-card h2 { margin: 0 0 var(--s1, 8px); }
.c4t-card p { margin: 0 0 var(--s2, 16px); font-size: var(--fs-body, 16px); line-height: 1.6; color: #d5dae2; max-width: 62ch; }
.c4t-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2, 16px); margin: var(--s2, 16px) 0; }
.c4t-fields label { display: block; font: 700 var(--fs-label, 12px)/1.3 var(--sans, Epilogue, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--text, #fff); }
.c4t-fields input { display: block; width: 100%; box-sizing: border-box; height: 48px; margin-top: 6px; padding: 0 12px; background: var(--sunk, #0d0d0d); color: var(--text, #fff); border: 1px solid #3a3a3a; border-radius: var(--r-sm, 4px); font: 500 var(--fs-body, 16px) var(--sans, Epilogue, sans-serif); text-transform: none; letter-spacing: 0; }
.c4t-fields input:focus { outline: 2px solid var(--blue, #2c87ff); border-color: var(--blue, #2c87ff); }
.c4t-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 16px); margin: var(--s2, 16px) 0; }
html body .c4t-root a.c4t-mail { display: inline-flex; align-items: center; min-height: 52px; padding: 14px 24px; text-decoration: none; }
.c4t-fine { font-size: var(--fs-sm, 14px) !important; color: var(--muted, #b9c0ca) !important; }
.c4t-tips { margin: 0; padding-left: 22px; color: #d5dae2; font-size: var(--fs-body, 16px); line-height: 1.7; }
.c4t-in .c4l-fine { margin-top: var(--s3, 24px); font-size: var(--fs-sm, 14px); color: var(--muted, #b9c0ca); }
@media (max-width: 640px) { .c4t-fields { grid-template-columns: 1fr; } .c4t-card { padding: var(--s3, 24px) var(--s2, 16px); } }
html body .c4t-root button.c4t-copy { display: inline-flex; align-items: center; min-height: 52px; padding: 14px 24px; background: transparent; color: var(--text, #fff); border: 2px solid rgba(255,255,255,.5); border-radius: var(--r-sm, 4px); font: 700 var(--fs-sm, 14px)/1 var(--sans, Epilogue, sans-serif); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
html body .c4t-root button.c4t-copy:hover { background: rgba(255,255,255,.1); }
.c4t-actions .c4l-copied { font-size: var(--fs-sm, 14px); color: var(--muted, #b9c0ca); }