/* ==========================================================================
   footer.css — contact band, footer and badge strip

   Split out of style.css. Load order in common/head.php is
   style.css -> header.css -> footer.css -> home.css, and it matters:
   these rules used to be interleaved in style.css, so anything that
   ties on specificity now resolves in this file's favour. Verified
   against a computed-style snapshot of every header/footer element at
   393, 900 and 1512 before and after the split.
   ========================================================================== */

.contact-se{padding:50px 0}.footer-sec{background:#2C023A;padding-bottom:32px}.footer-logo{display:flex;align-items:center;padding:0 0 20px}.certified-logo li{filter:grayscale(1);mix-blend-mode:luminosity;opacity:.4;padding:0 20px}.certified-logo li svg{width:100%;height:50px}.certified-logo li:hover{filter:none;mix-blend-mode:unset;opacity:1}.footer-social{margin-top:59px;padding-left:20px;justify-content:unset}.footer-logo a{display:flex}.footer-logo svg{width:100%}.footer-logo img{height:auto}ul.social-connect-top.footer-social{justify-content:unset}.small-form-box{margin:0 auto}

.copyright a{color:#fff;font-size:16px;line-height:22px;font-weight:bold}.extra-useful-links{display:flex;gap:10px;color:#fff;font-size:18px;line-height:23px;justify-content:end}.extra-useful-links a{color:#fff;font-size:16px;line-height:21px}.certified-logo img{height:50px}.copyright-sec{padding-top:22px} .certified-logo li:first-child{padding-left:0}.contact-footer .contact-detail a{color:#ffffff;font-size:16px;line-height:26px}.contact-footer .form{padding:31px;border:1px solid #F5F5F5;border-radius: 8px;}.contact-footer .contact-detail.phone{border-top:0}.extra-useful-links a:hover{color:#C2C904}.contact-footer .contact-detail a:hover{opacity:.8}.copyright a:hover{color:#C2C904}.contact-footer .contact-detail{color:#ffffff;font-size:18px;line-height:26px}@media(max-width:991px){.extra-useful-links a{font-size:15px;line-height:20px}.footer-social{margin-top:30px}}
@media(max-width:770px){.copyright{text-align:center}.extra-useful-links{justify-content:center}ul.social-connect-top.footer-social{padding-left:20px}.certified-logo li{padding:0 20px}.certified-logo li svg{width:100%;height:80px}}
@media(max-width:520px){.footer-logo svg{width:95%}}
@media(max-width:457px){.footer-logo img{width:174px}}
@media(max-width:432px){.footer-logo img{width:174px}}
@media(max-width:375px){.extra-useful-links{flex-wrap:wrap;margin-top:10px;font-size:14px}}
@media(max-width:325px){.extra-useful-links{flex-wrap:wrap;margin-top:10px;flex-direction:column;align-items:center;gap:6px}.extra-useful-links span{display:none}}
ul.footer_location {display: flex;gap: 15px;justify-content: center;margin:0;}ul.footer_location li {list-style: none;color: #fff;}ul.footer_location li a {color: #fff;}
.certified-logo li{filter:none;mix-blend-mode:normal;opacity:1;padding:0 20px;display:flex;align-items:center}
.certified-logo li:first-child{padding-left:20px}
.certified-logo li:hover{filter:none;mix-blend-mode:normal;opacity:1}
.certified-logo li img,.certified-logo img{width:auto;height:auto;max-width:100%}

/* --- Bottom bar ----------------------------------------------------------
   Figma: 1px white-60% rule above the row, 16px top padding, 24px footer base. */
.footer-sec{padding-bottom:24px}
.copyright-sec{border-top:1px solid rgba(255,255,255,.6);padding:16px 12px 0}@media(min-width:992px){
  /* zero the bootstrap gutter margins too — the columns below drop their
     compensating 12px padding, which would otherwise overflow the container */
  .copyright-sec .row{flex-wrap:nowrap;align-items:center;margin-left:0;margin-right:0}
  .copyright-sec .copyright{width:auto;flex:0 0 auto;padding-left:0;padding-right:0}
  .copyright-sec .extra-useful-links{width:auto;flex:0 0 auto;margin-left:32px;padding:0}
/* The copyright row comes in two shapes. footer.php puts the city list after
   these links, so they stay beside the copyright (the 32px above). In
   footer-contact.php they are the last cell, and then they take the right
   edge of the row. Keyed off the layout rather than the page so either
   footer lands correctly wherever it is used. */
.copyright-sec .row > .extra-useful-links:last-child{margin-left:auto}
  .copyright-sec .locations-city{width:auto;flex:1 1 auto;padding:0;display:flex;justify-content:flex-end}}


/* Copyright — Inter 14px, "Coding Sprint." bold */
.copyright p{font-family:'Inter',sans-serif;font-size:14px;line-height:24px;margin-bottom:0}
.copyright a{font-size:14px;line-height:24px;font-weight:700;color:#fff}

/* Terms / Privacy — Rubik 14px, separator Rubik 18px */
.extra-useful-links{gap:10px}
.extra-useful-links a{font-family:'Rubik',sans-serif;font-size:14px;line-height:21px}
.extra-useful-links span{font-family:'Rubik',sans-serif;font-size:18px;line-height:23px}

/* City list — Rubik 14px, 16px gap, flush right */
ul.footer_location{gap:16px;justify-content:flex-end}
ul.footer_location li{font-family:'Rubik',sans-serif;font-size:14px;line-height:1}

/* Contact block — Rubik for label and value */
.contact-footer .contact-detail a{font-family:'Rubik',sans-serif;font-size:16px;line-height:26px}
.contact-footer .form{padding:24px}@media(max-width:991px){
  .extra-useful-links a{font-size:14px;line-height:20px}}
@media(max-width:770px){
  ul.footer_location{justify-content:center;flex-wrap:wrap}
  .certified-logo li{padding:0 20px}}
@media(max-width:325px){
  .extra-useful-links{gap:6px}}


/* --- Badge carousel (<=1075px) -------------------------------------------
   The desktop strip lets each badge keep its own Figma size (204x50 .. 72x72),
   but in the carousel every slide gets an identical box so the row reads
   evenly. object-fit:contain scales each logo inside that box without
   distorting it. */
.footer-top.small-desktop .certified-logo li{padding:0 10px;display:flex;align-items:center;justify-content:center}
.footer-top.small-desktop .certified-logo li img{width:100%;height:72px;max-width:100%;object-fit:contain}@media(max-width:991px){
  .copyright-sec .row{row-gap:12px}}


/* The submit button also carries .g-recaptcha, which sets margin-bottom:20px
   for the (currently commented-out) reCAPTCHA widget. That margin collapses
   through the form and lands inside the box, giving 45px at the bottom against
   25px at the top. Figma has an even 24px inset on all four sides. */
.contact-footer .form .submit-btn{display:block;width:fit-content;margin-bottom:0}


/* ==========================================================================
   Contact band, badge strip and footer -- one treatment, every page.

   Same move as the shared sections block at the end of style.css.
   These rules were written for the home page and lived in home.css under
   .home_n, so every other page showed the same sections with the older
   styling. They are the home page rules, unchanged: :root stands in for
   .home_n so each rule keeps exactly the specificity it had. The few
   page-wide home rules these sections also relied on (the 16px paragraph,
   the heading weight, the page container) are mirrored for these sections
   only, with :where() so they add no specificity either.
   ========================================================================== */

:root :where(.contact-se,.footer-sec,.footer-top) h2.home_n_heading{font-weight:500}
:root :where(.contact-se,.footer-sec,.footer-top) h2.home_n_heading span{color:#5B0375}

@media (min-width:1441px) and (max-width:1549px){
  :root :where(.contact-se,.footer-sec,.footer-top) .container{width:calc(100% - 120px);max-width:1450px}
  /* Footer (2481:1747): a 1450px container with 32px padding; address 475px + 48px + form */
  :root .contact-footer .container{width:calc(100% - 62px);padding:0 32px}
  :root .contact-footer .mobile-width-footer{flex:0 0 34.295%;width:34.295%;max-width:34.295%}
  :root .contact-footer .small-form-box{flex:1 1 0;width:auto;max-width:none;margin:0 0 0 48px;padding:0}
  :root .footer-sec .container{width:calc(100% - 62px);padding:0}
  :root .footer-sec .copyright{padding-left:12px}
  /* In Figma the 2nd and 3rd badges carry no side padding, which sets the spacing */
  :root .footer-top.larg-desktop .certified-logo li:nth-child(2),
  :root .footer-top.larg-desktop .certified-logo li:nth-child(3){padding:0}
}

@media (min-width:1550px){
  :root :where(.contact-se,.footer-sec,.footer-top) .container{max-width:1392px}
}

@media (max-width:767px){
  :root :where(.contact-se,.footer-sec,.footer-top) .container{padding-left:15px;padding-right:15px}
  :root .footer-sec .footer_location{
    display:grid;grid-template-columns:repeat(3,auto);justify-content:center;
    justify-items:center;gap:12px 22px;margin-top:4px}
  :root .footer-sec .footer_location li{font-size:14px;line-height:1.3;white-space:nowrap}
}

/* --- 17. Contact form above the design width ---------------------------
   Figma's footer (2481:1747) is a 475px address block, a 48px gap and an
   863px form. The 1441-1549 band reproduces that with flex, and the form
   lands exactly on the content edge. Above 1549 those rules stop and
   bootstrap takes over -- but the markup is col-lg-4 + col-lg-7, which is
   11 of 12 columns, so roughly 8.33% is simply never allocated and the
   form stopped 57px short of the right edge at 1920. Same flex treatment
   here: the address keeps its share, the form takes whatever is left. */
@media (min-width:1550px){
  :root .contact-footer .mobile-width-footer{flex:0 0 34.295%;width:34.295%;max-width:34.295%}
  :root .contact-footer .small-form-box{flex:1 1 0;width:auto;max-width:none;margin:0 0 0 48px;padding:0}
}

/* ---- The footer on every page: the contact band and the strip below it (2026-10-15) ----
   "Footer make it like before, but design improve" (option 1 of three, picked): the dark photo band as
   before, under a deeper, even veil with rounded top corners; the details beside round lime-edged icon
   tiles with lime labels; the form on a dark glass panel with white fields, a lime focus ring and the lime
   pill button (the same as the AI pages' main buttons); the deep violet strip with the badges and one tidy
   copyright line, lime dots between the towns. One version for every page and the blog: it replaces the
   purple glass version only the AI pages had (ai-pages.css block 15). Same wording, details, links, icons,
   badges, form fields and button; the markup, the form and its scripts are untouched.
   ":root" keeps these ahead of the older footer rules above, which use it too. */
:root .contact-se,
:root .footer-sec { --ft-lime: #C2C904; --ft-deep: #2C023A; --ft-violet: #5B0375; --ft-ink: #14081C; }
:root .contact-se.contact-footer {
    padding: 100px 0;
    border-radius: 28px 28px 0 0;
    background-image: linear-gradient(180deg, rgba(11, 6, 18, .62) 0%, rgba(11, 6, 18, .74) 100%), url(../images/Group-68109@2x.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
:root .contact-se .footer-logo { padding-bottom: 26px; }
:root .contact-se .contact-detail {
    align-items: center;
    gap: 18px;
    padding: 22px 0;
    border-top-color: rgba(255, 255, 255, .12);
}
:root .contact-se .icon-contact {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(194, 201, 4, .45);
    border-radius: 50%;
    background: rgba(194, 201, 4, .06);
}
/* the shared .let-connect svg rule sizes the icons with !important and adds a right margin */
:root .contact-se .let-connect .icon-contact svg { width: 24px !important; height: 24px !important; margin: 0; }
:root .contact-se .contact-left-detail span {
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ft-lime);
}
:root .contact-se .contact-left-detail a,
:root .contact-se .contact-left-detail p {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
    transition: color .2s ease;
}
:root .contact-se .contact-left-detail a:hover { color: var(--ft-lime); }

/* the form */
:root .contact-se .small-form-box h2 {
    font-family: 'Rubik', sans-serif;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.8px;
    color: #FFFFFF;
}
:root .contact-se .small-form-box h2:before {   /* short lime mark above the heading (decorative) */
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 22px;
    border-radius: 2px;
    background: var(--ft-lime);
}
:root .contact-se .form {
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    background: rgba(11, 6, 18, .35);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}
:root .contact-se .form-filed input:not(.honeypot-field):not([type="file"]),
:root .contact-se .form-filed .form-text-area {
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--ft-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
:root .contact-se .form-filed input:not(.honeypot-field):not([type="file"]):focus,
:root .contact-se .form-filed .form-text-area:focus {
    border-color: var(--ft-lime);
    box-shadow: 0 0 0 3px rgba(194, 201, 4, .25);
    outline: none;
}
:root .contact-se .drop-zone {
    border: 1px dashed rgba(255, 255, 255, .35);
    border-radius: 10px;
    background: transparent;
    transition: border-color .2s ease;
}
:root .contact-se .drop-zone:hover { border-color: rgba(194, 201, 4, .6); }
:root .contact-se .drop-zone__prompt { color: rgba(255, 255, 255, .8); }
:root .contact-se .conttact-secure { font-size: 14px; color: rgba(255, 255, 255, .72); }
:root .contact-se .submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 32px;
    border: 1px solid var(--ft-lime);
    border-radius: 999px;
    background: var(--ft-lime);
    font-family: 'Rubik', sans-serif !important;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;
    color: #1B0A22;
    box-shadow: 0 10px 28px rgba(194, 201, 4, .26);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
:root .contact-se .submit-btn:hover {
    transform: translateY(-2px);
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--ft-deep) !important;
    box-shadow: 0 14px 34px rgba(11, 6, 18, .40);
}

/* the strip below */
:root .footer-sec { padding: 0 0 28px; background: var(--ft-deep); }
:root .footer-sec .footer-top { padding: 12px 0; }
:root .footer-sec .copyright-sec {
    padding: 22px 0 0;                             /* the words on the container edge */
    border-top-color: rgba(255, 255, 255, .12);
}
:root .footer-sec .copyright-sec .row { margin-left: 0; margin-right: 0; }
:root .footer-sec .copyright-sec .row > div { padding-left: 0; padding-right: 0; }
:root .footer-sec .copyright p,
:root .footer-sec .copyright p a,
:root .footer-sec .extra-useful-links a,
:root .footer-sec .footer_location li {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, .66);
    transition: color .2s ease;
}
:root .footer-sec .copyright p a { font-weight: 600; color: rgba(255, 255, 255, .88); }
:root .footer-sec .copyright p a:hover,
:root .footer-sec .extra-useful-links a:hover { color: var(--ft-lime); }
:root .footer-sec .extra-useful-links span { margin: 0 10px; color: rgba(255, 255, 255, .25); }
:root .footer-sec .footer_location { gap: 0; }
:root .footer-sec .footer_location li + li:before {   /* small lime dot between the towns (decorative) */
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 12px;
    border-radius: 50%;
    background: var(--ft-lime);
    vertical-align: middle;
}

/* the band's two columns on the container's edges; the form takes the rest */
@media (min-width: 768px) {
    :root .contact-se .row { justify-content: space-between; flex-wrap: nowrap; }
    :root .contact-se .mobile-width-footer { flex: 0 0 300px; width: 300px; max-width: none; padding-left: 0; padding-right: 0; }
    :root .contact-se .small-form-box { flex: 1 1 0; width: auto; max-width: none; min-width: 0; margin: 0 0 0 40px; padding-left: 0; padding-right: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
    /* beside the details the form is narrow here: one field per line */
    :root .contact-se .form-group { grid-template-columns: 1fr; gap: 0; }
    /* the copyright lines all start on the left */
    :root .footer-sec .copyright,
    :root .footer-sec .extra-useful-links,
    :root .footer-sec .locations-city { display: flex; justify-content: flex-start; text-align: left; }
    :root .footer-sec .footer_location { justify-content: flex-start; }
}
@media (min-width: 992px) {
    :root .contact-se .mobile-width-footer { flex-basis: 360px; width: 360px; }
    :root .contact-se .small-form-box { margin-left: 64px; }
    /* the copyright on one line: each part as wide as its words, the towns taking the rest */
    :root .footer-sec .copyright-sec .row { flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 10px; margin: 0; padding: 0; }
    :root .footer-sec .copyright-sec .row > div { flex: 0 0 auto; width: auto; max-width: none; }
    :root .footer-sec .copyright-sec .row > .locations-city { flex: 1 0 100%; }
    :root .footer-sec .copyright-sec .row > .locations-city,
    :root .footer-sec .footer_location { justify-content: flex-start; }
}
@media (min-width: 1440px) {
    :root .footer-sec .copyright-sec .row { flex-wrap: nowrap; }
    :root .footer-sec .copyright-sec .row > .locations-city { flex: 1 1 auto; min-width: 0; }
    :root .footer-sec .copyright-sec .row > .locations-city,
    :root .footer-sec .footer_location { justify-content: flex-end; }
}
@media (max-width: 1440px) {
    :root .contact-se.contact-footer { padding: 88px 0; }
    :root .contact-se .small-form-box h2 { font-size: 38px; }
}
@media (max-width: 991px) {
    :root .contact-se.contact-footer { padding: 64px 0; border-radius: 22px 22px 0 0; }
    :root .contact-se .small-form-box h2 { font-size: 32px; letter-spacing: -.5px; }
    /* the towns wrap here: no dots, so no line starts with one */
    :root .footer-sec .footer_location { gap: 8px 20px; }
    :root .footer-sec .footer_location li + li:before { display: none; }
}
@media (max-width: 575px) {
    :root .contact-se.contact-footer { padding: 48px 0; }
    :root .contact-se .form { padding: 22px 18px; }
    :root .contact-se .small-form-box h2 { font-size: 27px; line-height: 1.2; }
    :root .contact-se .submit-btn { min-height: 48px; padding: 0 26px; font-size: 16px; }
    :root .footer-sec .footer_location { flex-wrap: wrap; row-gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    :root .contact-se .submit-btn,
    :root .contact-se .submit-btn:hover { transition: none; transform: none; }
}