/* ADI /about-us/ page styles
   Moved out of the document 2026-09-06. Loaded AFTER style.css, pages.css and
   blogs.css, which several rules here deliberately override, so the link must
   keep that position in the head. */
/* Modern About Us Styles */
.modern-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

@media (max-width: 768px) {
  /* Mobile section padding */
  .roof-surveying-section[style*="background: #2563eb"],
  .roof-surveying-section[style*="background: #1C2475"],
  .roof-surveying-section[style*="background: #1e3a8a"] {
    padding: 40px 15px !important;
  }

  div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}
@media (max-width: 768px) {
  .hero-curve-top-overlay {
    top: 0px;
    opacity: none;
  }
  .hero-curve-top-overlay-top-no-opacity {
    top: 0px;
  }
}
    
/* ADI About: hero key numbers, added 2026-09-06 */
.adi-hero-stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin:26px auto 0;padding:0;max-width:900px}
.adi-hs-item{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:11px;padding:15px 14px;text-align:center;backdrop-filter:blur(2px)}
.adi-hs-item a{display:block;text-decoration:none;color:inherit}
.adi-hs-item a:hover .adi-hs-n{color:#9bdcfb}
.adi-hs-n{display:block;color:#ffffff;font-size:30px;font-weight:800;line-height:1.1;
  letter-spacing:-.01em}
.adi-hs-l{display:block;color:#dbe7f5;font-size:13px;line-height:1.45;margin-top:6px}
@media (max-width:820px){
  .adi-hero-stats{grid-template-columns:repeat(2,1fr);gap:11px;max-width:520px}
  .adi-hs-n{font-size:26px}
}
@media (max-width:380px){ .adi-hs-l{font-size:12px} }
/* ADI About: accreditation cards, added 2026-09-04 */
.adi-accred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:18px;margin:0 0 26px}
.adi-accred{background:#ffffff;border:1px solid #e5e7eb;border-radius:10px}
.adi-accred>summary{list-style:none;cursor:pointer;padding:18px;display:flex;gap:14px;
  align-items:center}
.adi-accred>summary::-webkit-details-marker{display:none}
.adi-accred>summary:focus-visible{outline:3px solid #2563eb;outline-offset:-3px;
  border-radius:10px}
.adi-accred-logo{width:62px;height:62px;object-fit:contain;flex:0 0 auto}
.adi-accred-name{display:block;color:#1e3a8a;font-weight:700;font-size:16px;line-height:1.35}
.adi-accred-status{display:block;color:#6b7280;font-size:14px;margin-top:4px}
.adi-accred-more{display:block;color:#2563eb;font-size:14px;font-weight:600;margin-top:9px}
.adi-accred-more::after{content:" \25BE"}
.adi-accred[open] .adi-accred-more::after{content:" \25B4"}
.adi-accred-body{padding:14px 18px 18px;margin:0 18px 0 18px;border-top:1px solid #e5e7eb;
  color:#374151;font-size:15px;line-height:1.65;padding-left:0;padding-right:0}
.adi-accred-src{display:block;margin-top:10px;font-size:14px}
/* ⚠ A phone reader must get the meaning with NO interaction. Chrome does
   NOT hide a closed details' children with display:none, so
   `display:block !important` alone does nothing: it hides them via
   content-visibility on ::details-content. Measured 2026-09-04, Chrome
   146, against a control with no CSS at all. Both declarations are
   needed. */
@media (max-width:700px){
  .adi-accred-body{display:block !important}
  .adi-accred::details-content{content-visibility:visible}
}
/* ⚠ AND THE AFFORDANCE IS ONLY HIDDEN WHERE THE FORCE-SHOW PROVABLY WORKS.
   In a browser without ::details-content the content stays collapsed, so
   hiding "What this means" unconditionally would leave that reader with no
   meaning AND no way in. Gated so no browser can strand anyone. */
@supports selector(details::details-content){
  @media (max-width:700px){ .adi-accred-more{display:none} }
}
@media (prefers-reduced-motion:reduce){
  .adi-accred,.adi-accred *{transition:none !important;animation:none !important}
}

/* ADI About: logo timeline, added 2026-09-04 */
.adi-logos{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 26px;padding:0;list-style:none}
.adi-logo-tile{flex:1 1 220px;min-width:0;background:#ffffff;border:1px solid #e5e7eb;
  border-radius:10px;padding:20px 16px;text-align:center}
.adi-logo-tile img{height:96px;width:auto;max-width:100%;display:block;margin:0 auto;
  object-fit:contain}
.adi-logo-year{display:block;color:#1e3a8a;font-weight:700;font-size:17px;margin-top:14px}
.adi-logo-note{display:block;color:#6b7280;font-size:14px;line-height:1.5;margin-top:4px}
@media (max-width:520px){ .adi-logo-tile img{height:76px} }

/* ADI About: tables stack instead of scrolling below 700px, added 2026-09-04 */
@media (max-width:700px){
  /* The desktop scroller and its min-width must BOTH stop applying, or
     stacked cards end up inside a 980px horizontal scroller. */
  .adi-tw{overflow-x:visible !important}
  .adi-t{min-width:0 !important;display:block;border:0 !important;
    background:transparent !important;border-radius:0 !important;font-size:16px}
  .adi-t tbody{display:block}
  /* Header row is surfaced per-cell below via data-label, so it is
     visually removed here rather than left as three stray words. It stays
     in the DOM and in the accessibility tree — clipped, not display:none. */
  .adi-t--hdr thead{position:absolute !important;width:1px;height:1px;margin:-1px;
    padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
    white-space:nowrap;border:0}
  .adi-t tr{display:block;background:#ffffff !important;border:1px solid #e5e7eb;
    border-radius:10px;margin:0 0 14px;padding:10px 0}
  .adi-t tr:last-child{margin-bottom:0}
  .adi-t td{display:block;width:auto !important;border-bottom:0 !important;
    padding:3px 16px !important;vertical-align:baseline}
  /* The social table is 7 rows of link + deliberately empty second cell.
     Stacked, an empty cell would be a blank line inside every card. */
  .adi-t td:empty{display:none !important}
  /* Label/value: label line, then its value directly beneath it. */
  .adi-t--lv td:first-child{font-size:15px}
  /* Headed tables: first cell heads the card, the rest name their column. */
  .adi-t--hdr td{padding:8px 16px !important}
  .adi-t--hdr td:first-child{color:#1e3a8a !important;font-weight:700 !important;
    font-size:18px !important;line-height:1.35;padding-bottom:10px !important;
    border-bottom:1px solid #e5e7eb !important;margin-bottom:4px}
  .adi-t--hdr td[data-label]::before{content:attr(data-label);display:block;
    color:#6b7280;font-size:12px;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;margin-bottom:2px}
  /* A TWO-column headed table needs no kicker: the card is already headed
     by "2011" or "No Find No Fee", so a MILESTONE / TERMS line above the
     only other line is noise repeated once per card. Selected in CSS
     rather than by a generator flag — first-child that is also
     second-from-last means the row has exactly two cells — so the rule
     follows the table's real shape and cannot fall out of step with it.
     The attribute stays in the DOM either way; only the kicker is hidden. */
  .adi-t--hdr td:first-child:nth-last-child(2) ~ td[data-label]::before{display:none}
}