/* ==========================================================================
   Second Chance Solutions — design tokens (lifted verbatim from source page)
   ========================================================================== */
:root {
  --scs-navy: #133353;
  --scs-navy-2: #1B4A5E;
  --scs-teal-dark: #2C6A72;
  --scs-teal: #3B838B;
  --scs-teal-light: #7FB9C0;
  --scs-bg: #F5F9FA;
  --scs-bg-2: #E3EEF0;
  --scs-font-heading: 'Playfair Display', serif;
  --scs-font-body: 'Roboto', sans-serif;
}

/* ==========================================================================
   Global reset (verbatim from source <style>)
   ========================================================================== */
html { scroll-behavior: smooth; }

/* In-page anchor targets (#top, #services, #contact, …) need clearance
   from the sticky header, or scroll-behavior:smooth lands their top edge
   right underneath it. The header grows taller at narrower breakpoints
   (two rows below 1023px), so the offset grows to match. */
section[id] { scroll-margin-top: 100px; }
@media (max-width: 1199px) {
  section[id] { scroll-margin-top: 85px; }
}
@media (max-width: 1023px) {
  section[id] { scroll-margin-top: 150px; }
}
@media (max-width: 767px) {
  section[id] { scroll-margin-top: 130px; }
}

/* The header is position:fixed (taken out of flow), so the page needs a
   matching top offset or content renders underneath it. Heights track the
   same breakpoints as the scroll-margin-top values above. */
body { padding-top: 100px; }
@media (max-width: 1199px) {
  body { padding-top: 85px; }
}
@media (max-width: 1023px) {
  body { padding-top: 150px; }
}
@media (max-width: 767px) {
  body { padding-top: 130px; }
}

/* ==========================================================================
   Thank You page — screen-fit hero. The hero fills the viewport height
   left over after the fixed header's offset above; the footer follows
   immediately after with its own (non-white) background, so there's never
   a bare gap regardless of viewport size. Content centers both axes.
   ========================================================================== */
.scs-thankyou-hero [data-scs-hero] {
  height: calc(100vh - 100px) !important;
}
.scs-thankyou-hero .scs-hero-controls { display: none !important; }
.scs-thankyou-hero [data-scs-hero] .scs-hero-content-row {
  display: flex !important;
  justify-content: center !important;
}
.scs-thankyou-hero [data-scs-hero] [data-hero-content] {
  align-items: center !important;
  text-align: center !important;
  max-width: 700px !important;
}
.scs-thankyou-hero .scs-hero-cta-row { justify-content: center !important; }

/* Unlike the main landing hero, the Thank You page never splits the image
   and content into stacked rows at <=1199px — it stays the desktop-style
   full-bleed image with overlaid, centered text at every width. These
   override the landing hero's <=1199px stacking rules (higher specificity
   via the .scs-thankyou-hero prefix wins regardless of breakpoint). */
.scs-thankyou-hero [data-scs-hero] [data-hero-slide] { position: absolute !important; }
.scs-thankyou-hero [data-scs-hero] .scs-hero-media { position: absolute !important; inset: 0 !important; height: 100% !important; }
.scs-thankyou-hero [data-scs-hero] .scs-hero-scrim { display: block !important; }
.scs-thankyou-hero [data-scs-hero] .scs-hero-content-row { position: relative !important; height: 100% !important; }

@media (max-width: 1199px) {
  .scs-thankyou-hero [data-scs-hero] { height: calc(100vh - 85px) !important; }
}
@media (max-width: 1023px) {
  .scs-thankyou-hero [data-scs-hero] { height: calc(100vh - 150px) !important; }
}
@media (max-width: 767px) {
  .scs-thankyou-hero [data-scs-hero] { height: calc(100vh - 130px) !important; }
}

/* Thank You subheading — h3/h4-sized instead of the marketing body copy
   size used on the main landing hero. */
.scs-thankyou-hero .scs-hero-subheading {
  font-size: 28px !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
}
@media (max-width: 1199px) {
  .scs-thankyou-hero .scs-hero-subheading { font-size: 22px !important; }
}
@media (max-width: 767px) {
  .scs-thankyou-hero .scs-hero-subheading { font-size: 20px !important; }
}

/* About section wrapper — fixed vertical padding regardless of viewport
   width. Vertical longhands only: the old `padding: 40px 15px` shorthand
   also pinned a 15px side gutter, which (winning on id specificity) made
   About render ~33px wider on each side than every other section and broke
   the shared left/right edge. Horizontal gutter now comes from the same
   places as every other section — the inline 48px, and the fixed-container
   block at the end of this file. */
#about > div { padding-top: 40px !important; padding-bottom: 40px !important; }

body { margin: 0; background: #F5F9FA; color: #133353; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #133353; text-decoration: none; transition: color .2s ease; }
a:hover { color: #2C6A72; }
::selection { background: #3B838B; color: #FFFFFF; }
input::placeholder, textarea::placeholder { color: rgba(19,51,83,.38); }
@keyframes scsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Tel links: no hover color change, default (non-pointer) cursor. */
a[href^="tel:"] { cursor: default; }
a[href^="tel:"]:hover { color: inherit !important; }

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto-variable.woff2') format('woff2');
}

/* ==========================================================================
   Theme isolation — every SCS widget resets to the design system instead of
   inheriting the active WordPress theme's typography/colors.
   ========================================================================== */
[class*="elementor-widget-scs_"] > .elementor-widget-container {
  font-family: var(--scs-font-body) !important;
  color: var(--scs-navy) !important;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
[class*="elementor-widget-scs_"] .elementor-widget-container * { box-sizing: border-box; }
[class*="elementor-widget-scs_"] .elementor-widget-container :is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol) { margin: 0; }
[class*="elementor-widget-scs_"] .elementor-widget-container a { text-decoration: none; }
[class*="elementor-widget-scs_"] .elementor-widget-container button,
[class*="elementor-widget-scs_"] .elementor-widget-container input,
[class*="elementor-widget-scs_"] .elementor-widget-container textarea { font-family: inherit; }
[class*="elementor-widget-scs_"] .elementor-widget-container :is(p,ul,ol) + :is(p,ul,ol) { margin-top: .9em; }
[class*="elementor-widget-scs_"] .elementor-widget-container ul,
[class*="elementor-widget-scs_"] .elementor-widget-container ol { padding-left: 1.4em; }

/* Many themes force img{height:auto!important;max-width:100%!important}; re-assert
   the sizing patterns this page's markup actually relies on. */
[class*="elementor-widget-scs_"] .elementor-widget-container img[style*="height:100%"] { height: 100% !important; }
[class*="elementor-widget-scs_"] .elementor-widget-container img[style*="object-fit:cover"] { object-fit: cover !important; }

/* About / why-us / FAQ photo boxes — fill the box at EVERY width.
   The box has a fixed height (560px / 300px / 280px); the image inside it is
   one of two things. The fallback-URL <img> carries inline
   width:100%;height:100%;display:block;object-fit:cover, so it fills. A real
   Media Library selection goes through Group_Control_Image_Size, which emits
   a bare <img> with none of that — it then falls back to the theme's
   img{height:auto}, takes its own natural height, and either leaves a white
   strip under the photo or overflows the box, depending on the aspect ratio
   at that width. This rule used to live inside the <=1599px pass, so above
   1600px the bare image was left to the theme. Unconditional now.
   display:block also matters: an inline <img> sits on the text baseline and
   reserves descender space beneath itself inside the box. */
.scs-media-fill img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Services card photos — force cover-fit regardless of whether the rendered
   <img> carries inline sizing (fallback-URL images do; real Media Library
   selections via Group_Control_Image_Size do not). */
.scs-svc-photo { width: 100%; height: 100%; }
/* Both source photos are wide landscape shots with the person's face in
   the upper-left, not center — object-fit:cover's default 50%/50% crop
   was centering horizontally too, missing the face entirely. */
.scs-svc-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 25% 15% !important; display: block !important; }

#services .scs-svc-detail.scs-svc-detail-services-yr { padding: 28px 32px 22px !important; }

/* ==========================================================================
   Component behavior hooks (structural only — colors/spacing stay inline
   per-widget so Style controls can override them)
   ========================================================================== */
.scs-hero-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.scs-hero-slide.is-active { opacity: 1; pointer-events: auto; }
.scs-marquee-track { display: flex; width: max-content; animation: scsMarquee 30s linear infinite; }
.scs-faq-answer { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.scs-faq-answer.is-open { max-height: max-content; }
.scs-modal-overlay { display: none; }
.scs-modal-overlay.is-open { display: flex; }

/* Process steps — always fully visible at desktop/tablet widths (the
   panel's own max-height:max-content ignores is-open there); the
   <=767px pass below turns it into a real accordion. */
.scs-process-step-panel { overflow: hidden; max-height: max-content; transition: max-height .3s ease; }
.scs-process-step-sign {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(245,249,250,.4);
  color: #F5F9FA;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
#process .scs-process-step-header > div:first-child {
  display: flex;
  align-items: start !important;
  flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
  .scs-hero-slide, .scs-marquee-track, .scs-faq-answer,
  [data-hero-slide], [data-hero-content], [data-tst-slide] { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Form card skin — ONE shared definition for both the Contact section and the
   Consultation modal. Both widgets previously carried their own near-identical
   inline <style> copy of this and the two drifted apart; keep it here only.

   Every value is lifted from the source page's form markup, so a live Contact
   Form 7 render matches the design 1:1. Applies to any card carrying
   .scs-form-card, and covers both the CF7 output and the static fallback form.
   ========================================================================== */
.scs-form-card .wpcf7 { width: 100%; }
.scs-form-card .wpcf7-form,
.scs-form-card .scs-fallback-form { display: flex; flex-direction: column; gap: 24px; margin: 0; }
/* CF7 wraps every field row in a <p>, so the editor-prose rule in the isolation
   block above — :is(p,ul,ol) + :is(p,ul,ol){margin-top:.9em} — matched all of
   them. At (0,2,2) it outranks a plain reset here, adding ~14px on top of the
   24px flex gap for every row and dropping Phone below Name inside the two-up
   grid. Hence !important: it is outranking a sibling rule in this same file. */
.scs-form-card .wpcf7-form p { margin: 0 !important; }

/* CF7's validation summary is screen-reader-only by design — re-assert that in
   case the theme or an optimizer drops CF7's own stylesheet, otherwise an empty
   bordered list appears above the first field. */
.scs-form-card .screen-reader-response {
  position: absolute; overflow: hidden; clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
}

.scs-form-card .wpcf7-form label { display: block; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(19,51,83,.6); }
/* Annotation spans inside a label (e.g. "(optional)") read better in
   sentence case than the label's own all-caps styling. */
.scs-form-card .wpcf7-form label span { text-transform: capitalize; }
/* The 8px label→field gap hangs off the control wrapper rather than the label's
   margin-bottom, so it lands correctly whether the CF7 template puts the field
   after the label or nests it inside. CF7 emits the wrapper as an inline
   <span>, which must be a block for the 100%-width field to sit on its own row. */
.scs-form-card .wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: 8px; }

/* .scs-cf7-grid is the current two-up field row; .scs-modal-2col is the class
   older pasted modal templates used. */
.scs-form-card .scs-cf7-grid,
.scs-form-card .scs-modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.scs-form-card .wpcf7-form input[type="text"],
.scs-form-card .wpcf7-form input[type="tel"],
.scs-form-card .wpcf7-form input[type="email"],
.scs-form-card .wpcf7-form textarea {
  width: 100%; box-sizing: border-box; padding: 16px 18px;
  border: 1px solid rgba(19,51,83,.14); border-radius: 12px; background: #FFFFFF;
  font-family: 'Roboto', sans-serif; font-size: 15.5px; font-weight: 400;
  letter-spacing: normal; text-transform: none; color: #133353; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* CF7 renders [textarea] at rows="10" (~2× the design). The design's textarea
   is 4 rows: 4 × 15.5px × 1.6 + 32px padding + 2px border = 133px. Pinned here
   so the height is right regardless of the rows the pasted template declares. */
.scs-form-card .wpcf7-form textarea { height: 133px; line-height: 1.6; }
.scs-form-card .wpcf7-form textarea { resize: none !important; }
.scs-form-card .wpcf7-form input:focus,
.scs-form-card .wpcf7-form textarea:focus,
.scs-form-card .scs-fallback-form input:focus,
.scs-form-card .scs-fallback-form textarea:focus { border-color: #3B838B; box-shadow: 0 0 0 3px rgba(59,131,139,.14); }

/* Submit — .scs-cf7-submit is the design-exact raw <button> from the pasted CF7
   template (it can hold the trailing arrow SVG); input[type=submit] is CF7's own
   [submit] tag, a void element that cannot, so older forms render arrow-less but
   otherwise identical. Both share the design's button box. */
.scs-form-card .wpcf7-form input[type="submit"],
.scs-form-card .wpcf7-form .scs-cf7-submit {
  width: 100%; background: #133353; color: #FFFFFF; border: none; cursor: pointer;
  padding: 19px 40px; border-radius: 12px; font-family: 'Roboto', sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: .02em;
  transition: background .2s ease, transform .15s ease;
}
.scs-form-card .wpcf7-form .scs-cf7-submit { display: flex; align-items: center; justify-content: center; gap: 12px; }
.scs-form-card .wpcf7-form input[type="submit"]:hover,
.scs-form-card .wpcf7-form .scs-cf7-submit:hover { background: #3B838B; transform: translateY(-1px); }

/* CF7 appends a spinner <span> after [submit]. Left inline it reserves 24px plus
   2×24px margin and wraps onto its own line beneath the full-width button —
   that is the phantom gap between the button and the trust badges. Park it over
   the button instead (it stays visibility:hidden until a submit is in flight).
   The submit row is the form's last <p>; the :has() rule below is the precise
   version and lives in its own block because an unsupported :has() would
   invalidate the whole selector list. */
.scs-form-card .wpcf7-form > p:last-of-type { position: relative; }
.scs-form-card .wpcf7-form .wpcf7-spinner { position: absolute; right: 20px; top: 50%; margin: 0 !important; transform: translateY(-50%); }
.scs-form-card .wpcf7-form p:has(> input[type="submit"]),
.scs-form-card .wpcf7-form p:has(> .scs-cf7-submit) { position: relative; }

/* Validation / response states — the source design has no error styling, so
   these stay minimal and inherit the form's type scale. */
.scs-form-card .wpcf7-not-valid-tip { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 400; letter-spacing: normal; text-transform: none; color: #B3261E; }
.scs-form-card .wpcf7-form input.wpcf7-not-valid,
.scs-form-card .wpcf7-form textarea.wpcf7-not-valid { border-color: #B3261E; }
.scs-form-card .wpcf7-response-output { margin: 0 !important; padding: 14px 18px; border-radius: 12px; font-size: 13px; line-height: 1.5; }

@media (max-width: 1199px) {
  /* The blanket [style*="display:flex"]{gap:15px!important} pass below tightens
     narrow-screen rhythm, but it can only match inline styles — so it catches
     the static fallback form and misses the CF7 form entirely. Mirror the row
     gap here so both paths tighten together. (Known divergence left alone: the
     blanket rule also collapses each fallback field group's own 8px label gap to
     15px, which CF7 rows keep at 8px. Worth revisiting in the next mobile pass.) */
  .scs-form-card .wpcf7-form { gap: 15px; margin-top: 20px; }
  .scs-form-card .wpcf7-form label { text-align: left; }
}

@media (max-width: 767px) {
  .scs-form-card .scs-cf7-grid,
  .scs-form-card .scs-modal-2col { grid-template-columns: 1fr; }

  /* Consultation popup heading shrinks to fit the narrower modal card. */
  .scs-form-card h3 { font-size: 18px !important; }

  .scs-form-card .wpcf7-form textarea {
    height: 100px;
    line-height: 1.6;
  }

  .scs-form-card .wpcf7-form input[type="submit"],
  .scs-form-card .wpcf7-form .scs-cf7-submit {
    padding: 15px 40px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Sticky header — Elementor sometimes puts an ancestor section/column/
   container in this chain into overflow:hidden (shape dividers, entrance
   animations, sticky-effects motion settings), which silently breaks
   position:sticky on the header widget below it. Force that chain open.
   ========================================================================== */
.elementor-section:has( .elementor-widget-scs_header ),
.elementor-container:has( .elementor-widget-scs_header ),
.elementor-column:has( .elementor-widget-scs_header ),
.e-con:has( .elementor-widget-scs_header ),
.e-con-inner:has( .elementor-widget-scs_header ),
.elementor-widget-scs_header { overflow: visible !important; }

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */
@media (max-width: 1599px) {
  /* Laptop-width tier, between full desktop and the 1199px pass below —
     a milder reduction of font sizes, gaps and section padding so the
     design doesn't stay full-desktop-scale on a 13"/14" laptop screen.
     The 1199px block further below always wins for anything at or under
     1199px (declared later, identical selectors, same specificity). */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="display:flex"] {
    gap: 16px !important;
  }

  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:110px 48px 118px"] { padding: 70px 40px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:110px 48px 128px"] { padding: 70px 40px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:118px 48px"]        { padding: 70px 40px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:56px 48px 60px"]    { padding: 44px 40px !important; }

  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:84px"]   { font-size: 60px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:58px"]   { font-size: 42px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:56px"]   { font-size: 42px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:42px"]   { font-size: 32px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:38px"]   { font-size: 30px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:32px"]   { font-size: 27px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:30px"]   { font-size: 26px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:27px"]   { font-size: 23px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:25px"]   { font-size: 22px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:24px"]   { font-size: 21px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:23px"]   { font-size: 20px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:22.5px"] { font-size: 20px !important; }

  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="border-radius:5px"] {
    font-size: 15px !important;
    padding: 16px 32px !important;
  }

  /* Banner — fit inside the viewport height on shorter laptop screens
     instead of a fixed 780px that could force a scroll to see it fully.
     Still the full desktop-style overlay (image + text on top), just
     shorter; the 1199px pass below switches to the stacked layout and
     always wins there since it's declared later. */
  [data-scs-hero] { height: calc(100vh - 100px) !important; }

  /* Why-us reason rows — the fixed 280px heading column and 32px gap
     leave a huge dead gap between the icon and the copy at this width;
     same fix as the 1199px pass (number+icon inline, heading+description
     span the rest), just starting a tier earlier. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-reason {
    grid-template-columns: 56px 1fr !important;
    gap: 14px 18px !important;
  }
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-reason > :nth-child(3),
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-reason > :nth-child(4) {
    grid-column: 1 / -1 !important;
  }

  /* Process intro row — the intro copy's fixed 110px right padding was
     pushing it (and the CTA after it) far from the heading, leaving a
     large empty gap across the row. justify-content:center was ALSO
     centering the (up to 640px) text block inside this flex:1 wrapper's
     full leftover width instead of starting it right after the heading —
     that's the big blank rectangle between the heading and the copy. */
  .scs-process-intro { padding-right: 20px !important; justify-content: flex-start !important; }
  .scs-process-heading { max-width: 450px !important; }

  /* Services checklist tick — align to the top of wrapped text instead
     of centering against the whole block (same fix the <=1199px pass
     already applies). */
  #services .scs-svc-check-row { align-items: start !important; }

  /* About/why-us/faq photo boxes: the .scs-media-fill img fill rule used to
     be declared here, which left bare Media Library images unstyled above
     1600px. It is unconditional now — see the base rule near the top of
     this file. */
}

@media (max-width: 1199px) {
  /* Blanket gap tightening for every flex layout. More specific overrides
     further down (e.g. hero content) win via source order. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="display:flex"] {
    gap: 10px !important;
    justify-content: start;
  }

  /* Section wrapper vertical rhythm — every max-width:1600px section
     wrapper (about/why-us/faq/contact/process/services) drops to a
     uniform 40px top/bottom at this breakpoint; horizontal gutter is
     untouched until the 767px pass below. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:110px 48px 118px"] { padding: 40px 48px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:110px 48px 128px"] { padding: 40px 48px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:118px 48px"]        { padding: 40px 48px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:56px 48px 60px"]    { padding: 40px 48px !important; }

  /* Marquee phrases. */
  .scs-marquee-track span { font-size: 17px !important; }

  /* Flex "layout rows" (header bar, process intro row) — stack, tighten gap. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-row-1199 {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-row-1199 > * {
    width: 100% !important;
  }

  /* Titles — scale down the large/medium heading sizes used across sections. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:84px"]   { font-size: 35px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:58px"]   { font-size: 26px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:56px"]   { font-size: 32px !important; text-align: center; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:42px"]   { font-size: 23px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:38px"]   { font-size: 25px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:32px"]   { font-size: 23px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:30px"]   { font-size: 22px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:27px"]   { font-size: 20px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:25px"]   { font-size: 19px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:24px"]   { font-size: 18px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:23px"]   { font-size: 18px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:22.5px"] { font-size: 18px !important; }

  /* Buttons — every CTA in this system shares the same border-radius:5px signature. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="border-radius:5px"] {
    font-size: 14px !important;
    padding: 14px 26px !important;
  }

  /* Header — keep phone + CTA inline and top-right aligned instead of
     stacking full-width like the generic .scs-row-1199 rule above does. */
  [class*="elementor-widget-scs_header"] .elementor-widget-container .scs-row-1199 {
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }
  [class*="elementor-widget-scs_header"] .elementor-widget-container .scs-row-1199 > * {
    width: auto !important;
  }

  /* Large two-column "hero split" sections (photo+content, cards row, etc.) —
     the 88–110px gaps and fixed-width columns force horizontal overflow well
     before mobile widths, so collapse these to a single column here. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-split {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    align-items: center !important;
  }
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-sticky-col {
    position: static !important;
    top: auto !important;
  }
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-split p {
    text-align: center !important;
  }

  /* FAQ answers stay left-aligned even though they sit inside a
     .scs-grid-split (the centering rule above would otherwise catch
     them too). Scoped to #faq — .scs-faq-answer is shared with the
     services detail panels, which aren't part of this ask. */
  #faq [class*="elementor-widget-scs_"] .elementor-widget-container .scs-faq-answer p {
    text-align: left !important;
  }
  #faq .scs-faq-answer.is-open div p {
    text-align: left !important;
  }

  /* Why-us "reason" rows — keep the number+icon inline, let the heading and
     description take the full row width instead of the fixed 280px column. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-reason {
    grid-template-columns: 56px 1fr !important;
    gap: 14px 18px !important;
  }
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-reason > :nth-child(3),
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-reason > :nth-child(4) {
    grid-column: 1 / -1 !important;
  }
  #why-us .scs-grid-reason:last-child { border-bottom: none !important; }

  /* Icon/tick + text rows shouldn't be centered by the blanket flex rule
     above — they should stay packed to the start like a normal list row.
     Services checklist tick also aligns to the top of wrapped text instead
     of centering against the whole block; toggle header (+/− circle) does
     the same once the title/summary wraps. */
  .scs-about-feature { justify-content: start !important; }
  #services .scs-svc-check-row { justify-content: start !important; align-items: start !important; }
  #services [data-scs-toggle] { align-items: start !important; }
  #services .scs-svc-card-link { justify-content: left !important; }
  .scs-svc-detail-services-yr .scs-svc-detail-content,
  .scs-svc-detail-services-fp .scs-svc-detail-content { align-items: start !important; }
  /* Every card but the last carries the extra separation, so the three sit
     evenly however many there are. */
  .scs-svc-detail.scs-svc-detail-services-fd,
  .scs-svc-detail.scs-svc-detail-services-yr { margin-bottom: 20px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-767 p {
    text-align: left !important;
  }

  /* Process steps — 4 up is too tight once fonts scale down; go 2 up. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-4up {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero (banner) — strictly separate image and content into two stacked
     rows instead of overlaying text on the image. Only the active slide
     stays in normal flow; the rest are hidden outright (no crossfade). */
  [data-scs-hero] { height: auto !important; overflow: visible !important; background-color: #255264 !important; }
  [data-scs-hero] [data-hero-slide] {
    position: static !important;
    display: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  [data-scs-hero] [data-hero-slide].is-active { display: block !important; }
  [data-scs-hero] .scs-hero-media { position: static !important; height: 430px !important; }
  [data-scs-hero] .scs-hero-scrim { display: none !important; }
  [data-scs-hero] .scs-hero-content-row {
    position: static !important;
    height: auto !important;
    display: block !important;
    padding: 35px 20px !important;
  }
  [data-scs-hero] [data-hero-content] {
    opacity: 1 !important;
    transform: none !important;
    max-width: 100% !important;
    gap: 0px !important;
  }
  /* Pagination dots and prev/next arrows don't work as touch-friendly
     controls at this width — drop them; slides still auto-advance. */
  [data-scs-hero] .scs-hero-controls { display: none !important; }

  /* FAQ — sticky sidebar centers its content and text; heading block's
     eyebrow-to-title gap collapses; toggle headers get a tighter click
     target. */
  #faq .scs-sticky-col { align-items: center !important; text-align: center !important; max-width: 100% !important; }
  /* :not() exempts the outer max-width:1600px section wrapper — its width
     is set by the fixed-container block at the end of this file, and an
     id selector here would otherwise outrank it. */
  #faq [style*="max-width"]:not([style*="max-width:1600px"]) { max-width: 100% !important; }
  .scs-faq-heading { gap: 0 !important; align-items: center !important; }
  .scs-faq-eyebrow { text-align: center !important; justify-content: center !important; }
  #faq [data-scs-toggle] { padding: 15px 0 !important; }

  /* Why-us — sticky sidebar centers its content and text; subheading
     tightens up like the hero's. */
  #why-us .scs-sticky-col { align-items: center !important; text-align: center !important; }
  .scs-whyus-subheading { line-height: 1.3 !important; margin-top: 5px !important; max-width: 100% !important; }

  /* Process — intro row stacks and centers instead of the 3-up layout;
     the intro copy no longer needs to leave room for the CTA on its
     right (nor the 44px top margin it had alongside that CTA), and the
     CTA centers under it. */
  #process .scs-row-1199 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }
  .scs-process-heading { gap: 0 !important; align-items: center !important; }
  .scs-process-eyebrow { text-align: center !important; justify-content: center !important; }
  #process .scs-process-intro {
    padding-right: 0 !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  #process .scs-process-intro > div { margin-top: 0 !important; max-width: 100% !important; }
  #process .scs-process-cta {
    align-self: center !important;
    width: auto !important;
    margin: 0 auto !important;
  }

  /* Testimonials wrapper vertical rhythm; prev/next arrows removed (dots
     pagination stays). */
  [data-scs-testimonials] { padding: 30px 40px 48px !important; }
  [data-screen-label="Testimonial"] [data-scs-tst-prev],
  [data-screen-label="Testimonial"] [data-scs-tst-next] { display: none !important; }

  /* Hero subheading — tighter line height and smaller size once stacked. */
  .scs-hero-subheading {
    line-height: 1.3 !important;
    font-size: 16px !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
    max-width: 100% !important;
  }

  /* Hero CTA row — more breathing room between the button and the
     secondary "Explore our services" link than the blanket 10px gap.
     Matches the blanket [style*="display:flex"] rule's specificity (3
     selectors) and wins on source order since it's declared after it. */
  [data-scs-hero] [data-hero-content] .scs-hero-cta-row { gap: 28px !important; }

  /* Contact — split becomes a centered flex column here already, instead
     of waiting for the 767px pass; all its content centers too. */
  #contact .scs-grid-split {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Eyebrow-to-title gap collapses in every section's heading block. These
     wrappers default to align-items:stretch (unset), which was letting the
     eyebrow row's own flex-start content show through as left-aligned even
     though the surrounding sidebar centers everything else — force center
     here too. About and Services stay left-aligned instead. */
  .scs-whyus-heading,
  .scs-contact-heading {
    gap: 0 !important;
    align-items: center !important;
  }
  .scs-about-heading,
  .scs-services-heading {
    gap: 0 !important;
    align-items: flex-start !important;
  }

  /* Services — "Start Here" / "Beyond the Paperwork" support boxes stack
     via flex instead of the generic grid collapse; intro copy's fixed
     max-width no longer fits once things start stacking here. */
  .scs-support-row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
    justify-content: start !important;
    align-items: start !important;
  }
  #services [style*="max-width"]:not([style*="max-width:1600px"]) { max-width: 100% !important; }

  /* Each support box's own content (eyebrow/title/paragraph) and link
     left-align, stacked full-width. */
  .scs-support-box {
    flex-direction: column !important;
    align-items: start !important;
    text-align: left !important;
    justify-content: start;
    width: 100%;
  }
  .scs-support-content {
    align-items: start !important;
    width: 100%;
  }

  /* Contact — the split's first column (heading + hours card etc.) also
     centers, not just the split itself. */
  #contact .scs-grid-split > div:first-child { align-items: center !important; }
  #contact [style*="max-width"]:not([style*="max-width:1600px"]) { max-width: 100% !important; }
}

@media (max-width: 1023px) {
  /* Hero — shorter image row once the tablet breakpoint above gives way
     to phone-ish widths. */
  [data-scs-hero] .scs-hero-media { height: 350px !important; }

  /* Header — logo takes its own full-width row; phone + CTA move to a
     second, centered row underneath. Sticky positioning (set inline on
     the <header>) is untouched by this, so it keeps sticking on scroll. */
  [class*="elementor-widget-scs_header"] .elementor-widget-container .scs-header-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
  }
  [class*="elementor-widget-scs_header"] .elementor-widget-container .scs-header-row > a {
    width: 100% !important;
    justify-content: center !important;
  }
  [class*="elementor-widget-scs_header"] .elementor-widget-container .scs-header-actions {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  /* Drop fixed max-width constraints so constrained blocks fill the viewport. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="max-width"] {
    max-width: 100% !important;
  }

  /* Why-us — last reason row's own bottom padding tightens up now that
     its border-bottom is gone. */
  #why-us .scs-grid-reason:last-child { padding-bottom: 10px !important; }

  /* Consultation modal card — tighter horizontal padding on phone widths. */
  .scs-modal-card { padding: 48px 20px !important; }

  /* About — photo overlay pill ("Canada-wide · Confidential · Judgment-
     free") top-aligns its dot against the text once it wraps to 2 lines;
     nudge the dot down slightly to sit level with the first text line. */
  .scs-about-pill { align-items: flex-start !important; top: 0px !important; }
  .scs-about-pill-dot { margin-top: 5px !important; }

  /* About — photo column loses its offset padding and gets a fixed,
     shorter height on phone widths. */
  .scs-about-photo-wrap { padding: 0px !important; }
  #about .scs-media-fill { height: 400px !important; }

  /* Why-us section background switches to white on phone widths. */
  #why-us { background: #FFFFFF !important; }

  /* Split-section paragraphs center here too. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-split p {
    text-align: center !important;
  }

  /* FAQ answers stay left-aligned even though they sit inside a
     .scs-grid-split (the centering rule above would otherwise catch
     them too, since scs_rich wraps the answer text in <p>). Scoped to
     #faq — .scs-faq-answer is shared with the services detail panels,
     which aren't part of this ask. */
  #faq [class*="elementor-widget-scs_"] .elementor-widget-container .scs-faq-answer p {
    text-align: left !important;
  }
  #faq .scs-faq-answer.is-open div p {
    text-align: left !important;
  }

  /* FAQ answer's content wrapper drops its 80px right padding here (it
     exists to keep the answer text clear of wider elements at desktop
     widths, which no longer apply once stacked at this breakpoint). */
  #faq .scs-faq-answer > div:first-child {
    padding-right: 0 !important;
  }

  /* Services detail toggles (File Destruction / Youth Record / etc.) —
     the header shows only its H3 here; the summary paragraph moves into
     the collapsible content, revealed only once its panel is open
     (:has() checks the sibling panel's is-open state, added by the same
     JS that already drives the +/- sign). Toggle icon shrinks to match. */
  #services .scs-svc-header-summary { display: none !important; width: 280px !important; }
  #services .scs-svc-detail:has([data-scs-panel].is-open) .scs-svc-header-summary {
    display: block !important;
  }
  /* Toggle sign pins to the row's right edge — needs the row itself
     positioned, since it has no positioned ancestor otherwise. */
  #services [data-scs-toggle] { position: relative !important; align-items: center !important; }
  #services .scs-svc-toggle-sign {
    width: 35px !important;
    height: 35px !important;
    position: absolute !important;
    top: -5px !important;
    right: 0px !important;
  }
  /* Content column now shares the row with an out-of-flow sign, so it
     needs its own clearance to keep the heading text from running
     under it. min-width:0 is required too: the header-summary child's
     fixed width:280px otherwise sets a 280px floor on this flex item's
     min-content size (flex items default to min-width:auto), forcing
     it wider than the padding-right clearance and letting the heading
     spill under the sign. */
  #services [data-scs-toggle] .scs-svc-detail-content {
    padding-right: 40px !important;
    min-width: 0 !important;
  }
  .scs-svc-detail.scs-svc-detail-services-fd,
  .scs-svc-detail.scs-svc-detail-services-yr {
    margin-bottom: 0 !important;
  }
  .scs-svc-detail.scs-svc-detail-services-fd {
    padding: 28px 32px 22px !important;
  }

  /* Services — card photo+content and who/why panel paragraphs
     left-align once stacked at this breakpoint. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-767 p {
    text-align: left !important;
  }

  /* Why-us reason rows — switch from the fixed grid columns to a
     wrapping flex row, and shrink the number/icon/heading to match. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-reason {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  #why-us .scs-grid-reason h3 { font-size: 18px !important; }
  .scs-grid-reason-number { font-size: 25px !important; }
  .scs-grid-reason-icon { width: 40px !important; height: 40px !important; }

  /* Process steps become a real accordion: header always visible, body
     collapsed until tapped (JS already toggles is-open generically via
     data-scs-toggle/data-scs-panel, same mechanism the FAQ uses). */
  .scs-process-step-header { cursor: pointer; }
  .scs-process-step-sign { display: flex; }
  .scs-process-step-panel { max-height: 0; }
  .scs-process-step-panel.is-open { max-height: max-content; }
  .scs-process-step-number { font-size: 30px !important; margin-top: -10px !important; }
  #process .scs-process-step-header > div:first-child {
    display: flex;
    align-items: center !important;
    flex-direction: row;
  }

  /* About feature pills all go white here — the highlighted pill's text
     (previously white-on-navy) is repointed to a dark color so it stays
     readable against the new white background. */
  .scs-about-feature { background: #FFFFFF !important; }
  .scs-about-feature-hl-text { color: #133353 !important; }

  /* Services — eyebrow "Our Services" title centers here (left-aligned
     at wider widths). */
  .scs-services-heading { align-items: center !important; }

  /* Services — "Your Next Step" box tightens up, its text column can use
     the full width, and the (often long) button label shrinks to fit.
     The #services prefix is needed: without it this loses to the generic
     [style*="border-radius:5px"] button rule below (13px), which won a
     specificity fight against a bare .scs-svc-next-step-btn selector and
     left the button at 13px + nowrap, overflowing the card. Dropping
     nowrap so it can never overflow regardless of label length. */
  .scs-svc-next-step {
    padding: 20px !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
    justify-content: start !important;
    align-items: stretch !important;
  }
  /* min-width:280px is inline on this element and wins over max-width in
     any conflict per the CSS sizing spec, so max-width alone wouldn't
     actually let it shrink on a narrow card — min-width must go too.
     The inline flex:1 shorthand sets flex-basis:0%, which combined with
     min-width:0 let this column collapse to a sliver in some cases
     (every word wrapping onto its own line) instead of growing to fill
     the row — flex-basis:100% forces it to start from full width. */
  .scs-svc-next-step-content {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
  }
  #services .scs-svc-next-step-btn {
    font-size: 11px !important;
    white-space: normal !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  /* Buttons — shrink further than the 1199px pass above. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="border-radius:5px"] {
    font-size: 15px !important;
    padding: 10px 15px !important;
  }

  /* Hero primary CTA ("Book Your Free Consultation") gets its own,
     slightly larger size than the blanket button rule above. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-hero-cta-btn {
    font-size: 15px !important;
    padding: 14px 20px !important;
  }

  /* Hero CTA row — the blanket justify-content:center pass above centers
     it like everything else, but the banner button belongs back on the
     left at true phone widths. */
  .scs-hero-cta-row { justify-content: flex-start !important; }
  .scs-hero-secondary-link { font-size: 12px !important; }

  /* Header phone number — 26px desktop size is too large next to a
     mobile-width CTA button; shrink so both fit on one row. */
  [class*="elementor-widget-scs_header"] .elementor-widget-container [style*="font-size: 26px"] {
    font-size: 16px !important;
    gap: 8px !important;
  }
  [class*="elementor-widget-scs_header"] .elementor-widget-container [style*="font-size: 26px"] svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Section gutters — the 48px desktop side padding used on every
     max-width:1600px section wrapper is too wide on a phone screen.
     Ordered shortest-substring-first so the longer, more specific
     matches below win the cascade at equal specificity. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:0 48px"]           { padding: 20px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:0 48px 40px"]       { padding: 0 20px 24px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:18px 48px"]         { padding: 18px 20px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:56px 48px 60px"]    { padding: 40px 20px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:110px 48px"]        { padding: 20px 20px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:110px 48px 118px"]  { padding: 40px 20px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:110px 48px 128px"]  { padding: 40px 20px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="padding:118px 48px"]        { padding: 40px 20px !important; }

  /* Titles — one more step down for the 56px section headings at true
     phone widths (the 1199px pass already took them to 32px). */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:56px"] { font-size: 30px !important; text-align: center; }

  /* Services header intro copy centers along with the eyebrow/title above it. */
  .scs-services-intro { text-align: center !important; }

  /* Contact — working hours rows shrink to fit tighter mobile widths. */
  .scs-hours-row { padding: 10px 10px !important; }
  .scs-hours-text { font-size: 12px !important; }

  /* Sub-heading / vertical-rhythm spacing — tighten the common
     eyebrow-to-heading and block-stacking gaps used across sections. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="gap:28px"] { gap: 16px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="gap:22px"] { gap: 14px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="gap:18px"] { gap: 12px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="gap:14px"] { gap: 10px !important; }

  /* Heading-block gap must stay 0 here too — some of these wrappers'
     inline gap (28px/22px/14px) would otherwise match the generic gap
     substring rules just above, which outrank a plain class selector. */
  .scs-about-heading, .scs-whyus-heading, .scs-contact-heading,
  .scs-services-heading, .scs-faq-heading, .scs-process-heading {
    gap: 0 !important;
  }

  /* Titles — one more size step down at true phone widths. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:38px"] { font-size: 18px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="font-size:30px"] { font-size: 18px !important; }

  /* Compact two-column grids (form fields, card photo+text, who/why lists) —
     stack fully on phone widths. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-767 {
    grid-template-columns: 1fr !important;
    justify-content: start !important;
  }
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-svc-photo {
    height: 220px !important;
    min-height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hero — shortest image row at true phone widths. */
  [data-scs-hero] .scs-hero-media { height: 230px !important; }

  /* Process steps — final stack to one column on phones. */
  [class*="elementor-widget-scs_"] .elementor-widget-container .scs-grid-4up {
    grid-template-columns: 1fr !important;
  }

  /* Contact form card — already flex/column/centered from the 1199px
     pass above; just tighten the card's own padding here. */
  .scs-contact-form-card { padding: 20px !important; }

  /* Logo — auto height on mobile only (never stretched/cropped to the
     fixed 52px desktop/tablet box), regardless of whether it's the
     fallback image or a real Media Library selection. */
  [class*="elementor-widget-scs_header"] .elementor-widget-container .scs-header-row > a img {
    height: auto !important;
    width: auto !important;
  }
}


/* ==========================================================================
   Fixed container widths (requested)
   Every section renders inside one `max-width:1600px;margin:0 auto` wrapper
   with 48px inline side padding, so at these tiers the content box width is
   viewport-driven and drifts between sections. Pin the wrapper to an exact
   width and zero its side padding so the content box IS the target width and
   every section lines up on the same left/right edge.

   Declared last on purpose: the padding shorthands in the 1599px/1199px
   passes above are !important, so only later source order can win. The
   `padding:` shorthand there still supplies the vertical rhythm — only the
   left/right longhands are overridden here.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1599px) {
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="max-width:1600px"] {
    max-width: 1180px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="max-width:1600px"] {
    max-width: 920px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  [class*="elementor-widget-scs_"] .elementor-widget-container [style*="max-width:1600px"] {
    max-width: 670px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ==========================================================================
   Mobile overflow containment — #about split + form card
   Grid items default to min-width:auto, which refuses to shrink a column
   below its content's min-content width. So an <input> (browser-default
   `size` gives it a ~180px min-content), the 300px quote card, or any long
   unbroken string forces the 1fr track wider than the wrapper and the whole
   row spills past the container edge. min-width:0 lets the track actually
   collapse to the available width; max-width:100% then keeps the child
   itself inside it.
   ========================================================================== */
@media (max-width: 767px) {
  #about .scs-grid-split,
  #about .scs-grid-split > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Long unbroken strings (emails, URLs, phone numbers) are the other way a
     child outgrows the track — break them instead of overflowing. Inherited,
     so it only ever affects text that genuinely cannot fit. */
  #about .scs-grid-split { overflow-wrap: break-word; }

  /* Same treatment for the form card, plus its fields: the inputs are already
     width:100%;box-sizing:border-box, but their intrinsic min-width is what
     was propagating up and widening the card's own grid track. */
  .scs-form-card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .scs-form-card input,
  .scs-form-card textarea,
  .scs-form-card select { min-width: 0 !important; max-width: 100% !important; }
}

/* Form card fills its column on tablet widths. */
@media (min-width: 992px) and (max-width: 1199px) {
  .scs-form-card { width: 100% !important; }
}

/* ==========================================================================
   Hero at 1200-1599px
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1599px) {
  /* The controls strip is position:absolute;bottom:0 and roughly 92px tall
     (52px buttons + 40px bottom padding), while the slide content is
     vertically centred in a section that drops to calc(100vh - 100px) at
     this tier. On a laptop that is a much shorter box than the 780px
     desktop one, so the centred block grows down into the controls and the
     dots/arrows land on top of the CTA row. Reserving the strip's height as
     bottom padding lifts the centred content clear of it — padding, not
     margin, so align-items:center recentres within what is left. */
  [data-scs-hero] .scs-hero-content-row { padding-bottom: 104px !important; }

  /* Last slide's heading ("Cross the border with confidence.") still fits on
     one line once 84px steps down to 60px here, unlike the other slides and
     unlike every other breakpoint. Force the accent onto its own line so the
     two-line break matches. .scs-hero-slide-last is set in PHP: the slides
     are followed by the controls div, so :last-child/:last-of-type cannot
     reach the final slide. */
  [data-scs-hero] .scs-hero-slide-last [style*="font-size:84px"] em {
    display: block;
  }

  /* Neither of the two rules above applies to the Thank You page's hero: it
     hides .scs-hero-controls entirely (nothing to clear, and the reservation
     would visibly push its vertically-centred content up), and its single
     slide is by definition "last" but has its own centred one-line heading.
     Declared after both, with the .scs-thankyou-hero prefix winning on
     specificity. */
  .scs-thankyou-hero [data-scs-hero] .scs-hero-content-row { padding-bottom: 0 !important; }
  .scs-thankyou-hero [data-scs-hero] .scs-hero-slide-last [style*="font-size:84px"] em { display: inline; }
}

/* ==========================================================================
   About eyebrow pill on mobile — "ABOUT SECOND CHANCE SOLUTIONS" at 12.5px
   with .2em letter-spacing runs ~370px wide, past the ~335px container on a
   375px screen. It sits two levels below .scs-grid-split, so the direct-child
   max-width containment above does not reach it. Shrink the type, tracking,
   gap and side padding until it fits, and let it wrap as a last resort on the
   narrowest screens.
   ========================================================================== */
@media (max-width: 767px) {
  #about .scs-about-eyebrow {
    gap: 8px !important;
    padding: 7px 12px 7px 8px !important;
    /* Inline width:max-content stays — capped at 100% it still hugs its text
       instead of stretching to the heading block's full width, but can no
       longer exceed the container. */
    max-width: 100% !important;
    flex-wrap: wrap;
  }
  #about .scs-about-eyebrow-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
  #about .scs-about-eyebrow-text {
    font-size: 10px !important;
    letter-spacing: .1em !important;
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   About feature cards — force the two-line wrap on desktop
   Measured against the real stylesheet in headless Chrome: the four card
   strings need 196 / 176 / 146 / 148px of text width to fit on two lines at
   15px. Card 1 ("Free, confidential assessments - no obligation") is the
   long one, and at a 1600px container it was getting 195.4px — missing two
   lines by 0.6px, which is why it alone wrapped to three. At the 1180px
   container it had only 125.6px and ALL FOUR cards ran to three lines.
   Fixed by giving the text column more of the split (and, in the narrower
   tier, trimming the card's own chrome), rather than by guessing at ratios.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1599px) {
  /* 1180px container: text width alone cannot reach 196px in a 2-up grid
     without collapsing the photo, so the card's fixed overhead (44px
     padding + 48px icon/gap) is trimmed and the type steps to 14px, where
     the worst card needs 183px. Photo column gives up ~9%. */
  #about .scs-grid-split {
    grid-template-columns: 1.05fr 1fr !important;
    gap: 56px !important;
  }
  #about .scs-about-feature {
    padding: 16px 18px !important;
    gap: 10px !important;
  }
  #about .scs-about-feature > span:first-child {
    width: 30px !important;
    height: 30px !important;
  }
  #about .scs-about-feature > span:last-child { font-size: 14px !important; }
}

@media (min-width: 1600px) {
  /* 1600px container: only 0.6px short, so a light nudge clears it with
     room to spare and the photo column gives up ~2%. Deliberately not
     capped at 1800px — the wrapper maxes out at 1600px, so every width
     above 1800 has this exact geometry and would otherwise keep the bug. */
  #about .scs-grid-split {
    grid-template-columns: 1.45fr 1.12fr !important;
    gap: 80px !important;
  }
}

/* ==========================================================================
   Vertical rhythm at 1200-1599px — why-us reason rows and FAQ items
   Both are repeated rows whose desktop top/bottom padding (38px and 28px)
   makes the section unnecessarily tall once the container is pinned to
   1180px at this tier. Vertical longhands only, so the row's horizontal
   layout and its border-bottom divider are untouched.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1599px) {
  #why-us .scs-grid-reason {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* The clickable question row... */
  #faq [data-scs-toggle] {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  /* ...and the answer panel's own bottom padding, which would otherwise
     stay at the desktop 28px and undo half the saving on every open item. */
  #faq .scs-faq-answer > div {
    padding-bottom: 18px !important;
  }
}

/* ==========================================================================
   FAQ list — remove the injected gap between items (all widths <=1599px)
   The list wrapper is <div style="display:flex;flex-direction:column"> with
   NO gap of its own, but the blanket responsive rules match on the
   style-attribute substring [style*="display:flex"] and force a gap onto
   every flex container they find — 16px at <=1599px, 10px at <=1199px. That
   landed as dead space under each question, and only under the last one it
   was absent (a flex gap sits BETWEEN items, so the final item has none) —
   exactly the asymmetry reported. Question-to-answer spacing is unaffected
   either way: each item is its own non-flex <div>, so the gap never applied
   between a question row and its panel.
   ========================================================================== */
#faq .scs-faq-list { gap: 0 !important; }

/* ==========================================================================
   Mobile-only refinements
   ========================================================================== */
@media (max-width: 767px) {
  /* 1. Why-us reason boxes — 38px of desktop top/bottom padding is a lot of
        dead space once each row is a narrow single column. */
  #why-us .scs-grid-reason {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* 2. Process steps — the 52px desktop grid gap was tuned for a 4-across
        row; stacked into one column it reads as a large blank band between
        each step. */
  #process .scs-grid-4up { gap: 22px !important; }

  /* 3. Working hours heading — #contact .scs-grid-split sets
        text-align:center from 1199px down so the section's copy centres,
        and the hours card's heading inherited it, leaving "Working / hours"
        centre-stacked against a left-aligned card. Realign to the card. */
  #contact .scs-hours-heading { text-align: left !important; }

  /* 4. Footer bottom row — space-between puts the copyright and the credit
        on opposite ends, which reads as left-aligned once they wrap onto
        their own lines. Centre both. */
  .scs-footer-bottom {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Testimonials — vertical padding at 1200-1599px
   Windows display scaling at 125% divides the CSS viewport by 1.25, so a
   1920px screen reports ~1536px and a 1600px screen ~1280px — both land in
   this tier. Every other section already steps its padding down here (the
   110px/118px shorthands are rewritten to 70px further up), but the
   testimonial wrapper's shorthand is `padding:110px 48px`, which none of
   those substring rules match: [style*="padding:110px 48px 118px"] and the
   rest are all longer strings. So it alone kept the full desktop 110px
   top/bottom. Matched to the 70px the neighbouring sections use.
   Scoped via [data-scs-testimonials] rather than a padding substring
   because [style*="padding:110px 48px"] would also match the 118px/128px
   variants used by About and FAQ.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1599px) {
  [data-scs-testimonials] {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
}

/* ==========================================================================
   Testimonials — stage height follows the content, not a fixed reserve
   The slides are position:absolute;inset:0, so they contribute no height and
   the stage carried an inline min-height:380px to hold the row open. Each
   slide is also justify-content:center, so whenever the tallest quote came
   in under 380px the surplus was split top and bottom — measured at 58.9px
   of dead space above the quote glyph at a 1382px viewport, where the
   <=1599px pass steps the quote from 38px to 30px and the copy gets shorter
   still. That is the gap under the section's top padding.

   Fixed by stacking the slides in a single grid cell instead of absolutely
   positioning them: every slide occupies grid-area 1/1, so they still
   overlay for the crossfade, but now they contribute height and the stage
   sizes to the tallest one. min-height:0 retires the 380px floor. Shorter
   slides still centre within the tallest slide's height, so the carousel
   never jumps height between slides.
   ========================================================================== */
[data-scs-testimonials] .scs-tst-stage {
  display: grid;
  min-height: 0 !important;
}
[data-scs-testimonials] .scs-tst-stage [data-tst-slide] {
  position: relative !important;
  grid-area: 1 / 1;
}




/* ==========================================================================
   Hero banner content — spacing, stated explicitly
   These target [data-hero-content] directly instead of leaning on the
   blanket [style*="display:flex"] rules. That matters: the carousel writes
   opacity/transform onto this exact element on init, and until the setStyle
   fix in scs-interactions.js that rewrote its style attribute in canonical
   form and unhooked it from every style-substring rule — so the <=1599px
   gap override silently never applied and the column kept its inline 28px.
   Naming the element leaves no room for that class of failure to return.

   The column is a flex column with ONE gap spanning eyebrow -> heading ->
   subheading -> CTA row, so the eyebrow pair is pulled in separately with a
   negative margin, stepped per tier to land on a consistent 8px.
   ========================================================================== */
@media (max-width: 1848px) {
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] .scs-hero-eyebrow { margin-bottom: -18px !important; } /* 28 -> 10 */
}

@media (max-width: 1599px) {
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] [data-hero-content] { gap: 14px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] .scs-hero-eyebrow { margin-bottom: -6px !important; }  /* 14 -> 8 */
  /* The CTA row carries its own inline gap:28px and a 10px top margin on
     top of the column gap, which reads as a double gap once everything
     above it has tightened. */
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] .scs-hero-cta-row { gap: 16px !important; margin-top: 0 !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] .scs-hero-subheading { margin-top: 0 !important; }
}

@media (max-width: 1199px) {
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] [data-hero-content] { gap: 12px !important; }
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] .scs-hero-eyebrow { margin-bottom: -4px !important; }  /* 12 -> 8 */
}

/* ==========================================================================
   Hero buttons at the 1200-1599px QA tier
   The generic [style*="border-radius:5px"] pass already steps every button
   down to 15px / 16px 32px here; the banner pair goes a step further so the
   CTA does not dominate the tightened content column.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1599px) {
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] .scs-hero-cta-row > a {
    font-size: 14px !important;
    padding: 13px 28px !important;
  }
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] .scs-hero-secondary-link {
    font-size: 14px !important;
    padding-bottom: 3px !important;
  }
  [class*="elementor-widget-scs_"] .elementor-widget-container [data-scs-hero] .scs-hero-secondary-link span { font-size: 15px !important; }
}