/* Luminous Ace Painting & Decorating */
html, body { margin: 0; padding: 0; background: #FFFFFF; overflow-anchor: none; }
/* Base family on the document itself, so no structural slip can leave a
   section falling back to the browser default serif. */
body { font-family: Inter, system-ui, Helvetica, Arial, sans-serif; color: #4A5060; }
* { box-sizing: border-box; }
a { color: #1B1E4B; text-decoration: none; }
a:hover { color: #F5821F; }
img { max-width: 100%; }
input, textarea, select, button { font-family: inherit; }
[hidden] { display: none !important; }
@keyframes laFaqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ---- tablet landscape and below: footer runs as two even columns ---- */
@media (max-width: 1269px) {
  .la-fcols { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: clamp(24px, 4vw, 64px) !important; row-gap: 44px !important; }
  .la-fsvc, .la-fsvc > div { display: contents !important; }
  .la-areas { margin-left: 0 !important; min-width: 0 !important; }
}

/* ---- tablet landscape: brand row settles into a centred 4 + 2 ---- */
@media (min-width: 1000px) and (max-width: 1269px) {
  .la-brands { justify-content: center !important; max-width: 780px !important; margin-left: auto !important; margin-right: auto !important; }
}

/* ---- Contact in portrait: form sits under the hours, areas last ---- */
@media (max-width: 999px) {
  .la-contact { grid-template-columns: 1fr !important; row-gap: 34px !important; }
  .la-cdetails, .la-cstack { display: contents !important; }
  .la-ch2 { order: 1; }
  .la-cstack > div:nth-child(1) { order: 2; }
  .la-cstack > div:nth-child(2) { order: 3; }
  .la-careas { order: 4; }
  .la-cform { order: 5; justify-self: stretch !important; max-width: none !important; }
  /* the map is the last thing before the reviews once the columns stack */
  .la-cmap { order: 6; min-height: 260px !important; }
}

/* ---- About: the four points run two across until the desktop row fits ---- */
@media (min-width: 560px) and (max-width: 1269px) {
  .la-work { grid-template-columns: 1fr 1fr !important; }
}
@media (min-width: 1270px) {
  .la-work { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ---- portrait hero: double the breathing room above and below ---- */
@media (max-width: 999px) {
  .la-hero { padding-top: 112px !important; padding-bottom: 128px !important; }
}

/* ---- About Us trust cards pair up once there is room for two ---- */
@media (min-width: 560px) and (max-width: 999px) {
  .la-trust { grid-template-columns: 1fr 1fr !important; }
}

/* ---- tablet portrait and below ---- */
@media (max-width: 999px) {
  /* paint brand row centres as it wraps instead of spreading to the edges */
  .la-brands { justify-content: center !important; }
  /* legal links sit above the copyright line */
  .la-fbottom { flex-direction: column-reverse !important; align-items: flex-start !important; row-gap: 18px !important; }
  /* About Us: the image takes its own proportion once the columns stack */
  .la-aboutmedia { aspect-ratio: 5 / 6; min-height: 0 !important; }
  /* About Us: text column fills the width once the section is stacked */
  .la-abouttext { max-width: none !important; }

  /* standard body copy steps up two pixels */
  [style*="font-size: 16px"] { font-size: 18px !important; }
  [style*="font-size: 15px"] { font-size: 17px !important; }
}

/* interaction states */
.x0:hover { color: #FFC220 !important; }
.x1:hover { color: #F5821F !important; }
.x2:hover { background: #D96F0F !important; color: #FFFFFF !important; }
.x3:hover { color: #F5821F !important; border-color: #F5821F !important; }
.x4:focus { border-color: #1B1E4B !important; }
.x5:hover { background: #FFFFFF !important; color: #1B1E4B !important; border-color: #FFFFFF !important; }
.x6:focus { border-color: #1B1E4B !important; background: #EDEFF3 !important; }
.x7:hover { background: #F5821F !important; color: #FFFFFF !important; }
.x8:hover { background: rgba(255,255,255,0.12) !important; }
.x9:hover { border-color: #F5821F !important; }
.x10:hover { color: #F5821F !important; text-decoration-color: #F5821F !important; }

/* Trustindex widget: let the section control its spacing */
.ti-widget { margin-top: 0 !important; margin-bottom: 0 !important; }
.ti-widget .ti-widget-container { margin-bottom: 0 !important; }

/* ---- review slider: whole cards only, four across ---- */
@media (max-width: 1269px) { .la-revcard { flex-basis: calc((100% - 80px) / 3) !important; } }
@media (max-width: 999px) { .la-revcard { flex-basis: calc((100% - 40px) / 2) !important; } }
@media (max-width: 640px) { .la-revcard { flex-basis: 100% !important; } }

/* ---- tablet portrait: lockup stays legible once the nav collapses ---- */
@media (min-width: 641px) and (max-width: 999px) {
  header > div:first-child > a:first-child { flex: 0 1 auto; min-width: 0; }
  .la-logo[src$="logo-navy.png"] { height: auto !important; width: 100% !important; max-width: 300px !important; }
}
/* ================= phone ================= */
@media (max-width: 640px) {
  /* the utility banner goes; its phone number becomes a tap target in the header */
  .la-topbar { display: none !important; }
  .la-phone { display: inline-flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; gap: 0 !important; border: 1px solid #E4E7EC; border-radius: 5px; }
  .la-phonetext { display: none !important; }
  /* the Google rating moves into the hero, under the standfirst */
  .la-herorating { display: flex !important; }
  /* buttons run the full width and centre their label */
  a[style*="border-radius: 5px"][style*="min-height"]:not(.la-phone) { width: 100% !important; justify-content: center !important; text-align: center; }
  /* more air between the two service cards */
  .la-services { row-gap: 64px !important; }
  /* trust cards: even heights and matching space above the title */
  .la-trust { grid-auto-rows: 1fr !important; }
  .la-trust > div { padding-top: 26px !important; }
  /* paint brands settle into two even rows of three */
  .la-brands { column-gap: 18px !important; row-gap: 26px !important; }
  .la-brands { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 24px !important; row-gap: 30px !important; place-items: center !important; }
/* Heights stay proportional to the desktop set so the blocky marks and the
   fine wordmarks keep their optical balance instead of all being flattened. */
.la-brands img { width: auto !important; min-width: 0 !important; max-width: 100% !important; object-fit: contain !important; }
.la-brands img:nth-child(1) { height: 42px !important; }
.la-brands img:nth-child(2) { height: 48px !important; }
.la-brands img:nth-child(3) { height: 37px !important; }
.la-brands img:nth-child(4) { height: 26px !important; }
.la-brands img:nth-child(5) { height: 37px !important; }
.la-brands img:nth-child(6) { height: 37px !important; }
/* The About link becomes a proper button at phone width. */
.la-aboutbtn { display: flex !important; width: 100% !important; min-height: 54px !important; padding: 0 26px !important; justify-content: center !important; background: #1B1E4B !important; color: #FFFFFF !important; border-radius: 5px !important; }
.la-aboutbtn span { display: none !important; }
  /* header: the lockup takes all the space the call icon and menu leave, so it
     is as large as legibility needs without ever pushing them off the edge */
  header > div:first-child { column-gap: 12px !important; }
  header > div:first-child > a:first-child { flex: 1 1 auto !important; min-width: 0 !important; }
  .la-logo[src$="logo-navy.png"] { height: auto !important; width: 100% !important; max-width: 240px !important; }
  .la-phone { width: 44px !important; height: 44px !important; }
  header button[aria-label] { width: 44px !important; height: 44px !important; }
  header > div:first-child { column-gap: 16px !important; min-height: 78px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  /* footer: one stacked column, legal links listed */
  .la-fcols { grid-template-columns: 1fr !important; row-gap: 40px !important; }
  .la-legal { flex-direction: column !important; align-items: flex-start !important; row-gap: 12px !important; }
  /* Footer links get a proper touch height on phones: the column gap is
     folded into per-link padding, so total row height barely changes. */
  footer .la-fcols a,
  footer .la-fbottom a { display: flex; align-items: center; min-height: 44px; }
  footer .la-fcols > div > div,
  footer .la-fsvc > div > div > div { gap: 0 !important; }
  footer .la-fbottom > div { column-gap: 20px !important; row-gap: 0 !important; }

}