/* ============================================================
   Sherman Group — shared mobile enhancements for sub-pages.
   Mirrors the homepage mobile guidelines (contact + footer).
   Loaded from every page in /pages/.
   ============================================================ */

/* ——— contact section: mobile-only quick-action cards (injected by JS) ——— */
.contact-quick{display:none}

@media (max-width:760px){
  /* ——— Legacy contact section (.contact-info as <section>) ——— */
  section.contact-info{padding:46px 16px 50px !important}
  section.contact-info h2{font-size:1.6rem;line-height:1.2;margin-bottom:14px}
  section.contact-info > .contact-info-inner > p,
  section.contact-info > .contact-info-inner > .lede{font-size:.95rem;line-height:1.65;margin-bottom:20px}
  section.contact-info .contact-grid{grid-template-columns:1fr !important;gap:28px !important;margin-top:24px !important}
  section.contact-info .contact-block h3{font-size:1.02rem;margin-bottom:14px}
  /* duplicate contact-detail list is replaced by .contact-quick — hide originals */
  section.contact-info .contact-block .contact-detail{display:none}
  section.contact-info .form-card{padding:22px 18px !important;border-radius:14px}
  section.contact-info .form-card h3{font-size:1.15rem !important;margin-bottom:4px}
  section.contact-info .form-card > p{font-size:.82rem !important;margin-bottom:18px !important}
  section.contact-info .form-grid{gap:12px}
  section.contact-info .form-row{grid-template-columns:1fr !important;gap:12px}
  section.contact-info .fg input,
  section.contact-info .fg select,
  section.contact-info .fg textarea{padding:13px 14px !important;font-size:.95rem !important;border-radius:10px}
  section.contact-info .fg label{font-size:.78rem !important}
  section.contact-info .fg textarea{min-height:90px !important}
  section.contact-info .form-card button{padding:14px !important;font-size:.92rem !important;border-radius:10px;margin-top:4px}

  /* ——— Homepage-style #contact section (used on index + about) ——— */
  #contact{padding:14px 16px 44px !important}
  #contact .contact-grid{grid-template-columns:1fr !important;gap:18px !important}
  #contact .contact-info .title{margin-bottom:10px !important}
  #contact .contact-info p.lede{margin-bottom:16px !important;font-size:.95rem !important;line-height:1.65 !important}
  #contact .form-card{padding:22px 18px !important;border-radius:14px}
  #contact .form-card h3{font-size:1.15rem !important;margin-bottom:4px !important}
  #contact .form-card > p{font-size:.82rem !important;margin-bottom:18px !important}
  #contact .form-grid{gap:12px !important}
  #contact .form-row{grid-template-columns:1fr !important;gap:12px !important}
  #contact .fg input,
  #contact .fg select,
  #contact .fg textarea{padding:13px 14px !important;font-size:.95rem !important;border-radius:10px}
  #contact .fg label{font-size:.78rem !important}
  #contact .fg textarea{min-height:90px !important}
  #contact .form-card button{padding:14px !important;font-size:.92rem !important;border-radius:10px;margin-top:4px}
  /* hide editorial .cd rows on mobile — replaced by .contact-quick cards */
  #contact .contact-info .contact-details{display:none}

  /* quick-action cards — same look as homepage */
  .contact-quick{
    display:flex;flex-direction:column;
    margin:6px 0 0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(15,29,46,.04);
  }
  .cq{
    display:flex;align-items:center;gap:16px;
    padding:16px 18px;
    text-decoration:none;color:var(--ink);
    border-bottom:1px solid var(--line-soft);
    position:relative;
    transition:background .15s ease;
    -webkit-tap-highlight-color:transparent;
    min-height:68px;
  }
  .cq:last-child{border-bottom:none}
  .cq:active{background:var(--off)}
  .cq-icon{
    width:42px;height:42px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--accent-soft);color:var(--brand);
    position:relative;
  }
  .cq-icon svg{width:18px;height:18px}
  .cq-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
  .cq-body strong{
    font-size:.66rem;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--mute);
  }
  .cq-body span{
    font-size:.95rem;font-weight:500;color:var(--ink-2);
    overflow:hidden;letter-spacing:0;
    overflow-wrap:anywhere;word-break:break-word;
    line-height:1.3;
  }
  /* email line — slightly smaller to fit on one row */
  .cq-mail .cq-body span:last-child{font-size:.85rem;letter-spacing:-.01em}
  .cq-body span[dir="ltr"]{font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .cq-arrow{
    width:20px;height:20px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);opacity:.85;
    transition:transform .2s ease;
  }
  .cq-arrow svg{width:14px;height:14px}
  [dir="rtl"] .cq-arrow svg{transform:scaleX(-1)}
  .cq:active .cq-arrow{transform:translateX(-3px);opacity:1}

  /* WhatsApp — small online dot, not loud */
  .cq-wa .cq-icon::after{
    content:"";position:absolute;top:-1px;right:-1px;
    width:10px;height:10px;border-radius:50%;
    background:#25D366;border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(37,211,102,.25);
  }
}

/* ——— footer: bigger logo, social row, mobile accordions ——— */
.footer-brand img,
.footer-brand-logo img{
  height:66px !important;margin-bottom:20px !important;
  filter:invert(1) brightness(1.6);mix-blend-mode:lighten;
}

.footer-social{display:flex;gap:10px;margin-top:6px}
.footer-social a{
  width:36px;height:36px;border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.65);transition:all .2s;border-radius:50%;
  text-decoration:none;
}
.footer-social a:hover{
  border-color:var(--accent,#c69a4d);
  color:var(--accent,#c69a4d);
  background:rgba(198,154,77,.08);
}

/* details-based mobile accordions — invisible on desktop */
.footer-col > summary{list-style:none;cursor:default;display:block}
.footer-col > summary::-webkit-details-marker{display:none}
.footer-col > summary::marker{content:""}

@media (max-width:760px){
  footer{padding:40px 18px 18px !important}
  .footer-top{
    display:flex !important;flex-direction:column !important;gap:0 !important;
    grid-template-columns:none !important;
    padding-bottom:18px !important;margin-bottom:18px !important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .footer-brand{
    padding-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.06);
    margin-bottom:6px;
  }
  .footer-brand img,
  .footer-brand-logo img{height:54px !important;margin-bottom:14px !important}
  .footer-brand p{
    font-size:.82rem !important;line-height:1.65 !important;
    max-width:none !important;margin-bottom:16px !important;
    color:rgba(255,255,255,.55) !important;
  }
  .footer-social a{width:32px;height:32px}

  /* accordion rows */
  .footer-col{border-bottom:1px solid rgba(255,255,255,.06)}
  .footer-col:last-of-type{border-bottom:none}
  .footer-col > summary{
    display:flex !important;align-items:center;justify-content:space-between;
    padding:14px 0;cursor:pointer;user-select:none;
    position:relative;
  }
  .footer-col > summary h5{margin:0 !important;font-size:.78rem;letter-spacing:.14em}
  .footer-col > summary::after{
    content:"";width:9px;height:9px;
    border-right:1.5px solid rgba(255,255,255,.55);
    border-bottom:1.5px solid rgba(255,255,255,.55);
    transform:rotate(45deg);
    transition:transform .2s;margin-bottom:3px;
  }
  .footer-col[open] > summary::after{transform:rotate(-135deg);margin-bottom:-3px}
  .footer-col[open] > summary h5{color:var(--accent,#c69a4d)}
  .footer-col ul{padding:2px 0 16px}
  .footer-col ul li a{font-size:.85rem}

  .footer-bottom{
    flex-direction:column !important;gap:6px !important;
    align-items:flex-start !important;
    font-size:.7rem !important;line-height:1.5 !important;
  }
}


/* ============================================================
   Sub-page content blocks — mobile sizing & rhythm.
   Mirrors homepage section pacing (tight padding, smaller heads,
   line treatments preserved at smaller scale).
   ============================================================ */
@media (max-width:760px){
  /* page hero — image on top (homepage-style), dark text panel below */
  .page-hero{
    min-height:auto !important;
    position:relative !important;
    display:flex !important;flex-direction:column !important;
    background:#0a1524 !important;
    overflow:hidden;
    border-bottom:0 !important;
  }
  .hero-image-wrap{
    position:relative !important;inset:auto !important;
    height:200px !important;width:100% !important;
    z-index:0 !important;order:-1 !important;
  }
  .hero-image-wrap img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:none;
  }
  .hero-image-wrap::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(10,21,36,.55) 100%);
    pointer-events:none;
  }
  .page-hero-inner{
    position:relative;z-index:2;
    padding:22px 18px 30px !important;
    display:block !important;
    width:100%;min-height:0 !important;
    background:#0a1524;
  }
  .hero-text{
    padding:0 !important;max-width:none !important;
    background:transparent !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    border:0 !important;box-shadow:none !important;border-radius:0 !important;
    color:#fff;
  }
  .page-hero .breadcrumb{
    font-size:.66rem !important;color:rgba(255,255,255,.55) !important;
    margin-bottom:12px !important;
  }
  .page-hero .breadcrumb a{color:var(--accent) !important;font-weight:500}
  .page-hero .breadcrumb span{margin:0 6px;opacity:.4}
  .page-hero .hero-eyebrow{
    display:inline-flex !important;align-items:center !important;
    font-size:.58rem !important;letter-spacing:.18em !important;
    color:var(--accent) !important;
    margin-bottom:10px !important;gap:8px !important;
  }
  .page-hero .hero-eyebrow::before{
    content:"" !important;display:block !important;
    width:20px !important;height:1px !important;
    background:var(--accent) !important;
  }
  .page-hero h1{
    font-family:var(--display);font-weight:300 !important;
    font-size:1.55rem !important;line-height:1.2 !important;
    color:#fff !important;letter-spacing:-.015em;
    margin-bottom:10px !important;
    text-shadow:none;
  }
  .page-hero h1 em{
    font-style:italic;color:var(--accent) !important;font-weight:500;
  }
  .page-hero .lead{
    font-size:.86rem !important;line-height:1.6 !important;
    color:rgba(255,255,255,.75) !important;
    margin-bottom:18px !important;font-weight:400;
    text-shadow:none;
  }
  .page-hero .hero-cta-row{
    display:flex !important;flex-direction:column !important;align-items:stretch !important;
    gap:10px !important;
  }
  .page-hero .btn-primary{
    background:#fff !important;color:var(--ink) !important;
    padding:12px 22px !important;font-size:.78rem !important;
    text-align:center;border:0;border-radius:var(--r,2px);
    font-weight:700;letter-spacing:.04em;
    transition:background .2s,color .2s;
  }
  .page-hero .btn-primary:hover{background:var(--accent) !important;color:#fff !important}
  .page-hero .btn-ghost{
    color:rgba(255,255,255,.85) !important;font-size:.82rem !important;
    text-align:center;padding:6px;
    text-decoration:none;
  }
  .page-hero .btn-ghost:hover{color:var(--accent) !important}

  /* generic content sections */
  section{padding:32px 16px !important}
  .section-divider{padding:32px 16px !important}
  .content-inner{max-width:none}
  .content-inner h2{
    font-size:1.55rem !important;line-height:1.22 !important;
    margin-bottom:18px !important;
    padding-top:18px !important;
  }
  .content-inner h2::before{width:32px !important;height:2px}
  .content-inner h2 em{
    font-size:.62em !important;line-height:1.4 !important;
    margin-top:8px !important;
  }
  .content-inner h3{
    font-size:1.05rem !important;margin:24px 0 12px !important;
  }
  .content-inner p{
    font-size:.94rem !important;line-height:1.7 !important;
    margin-bottom:14px !important;
  }
  .content-inner ul{margin:18px 0 22px !important;gap:10px !important}
  .content-inner ul li{
    font-size:.92rem !important;line-height:1.65 !important;
    padding-right:18px !important;
  }
  .content-inner ul li::before{width:6px !important;height:6px !important;top:.7em !important}

  /* image block inside content */
  .image-section{margin:24px auto !important}
  .image-section .caption{font-size:.72rem !important;margin-top:8px}

  /* highlight box (gold-tinted) */
  .highlight-box{
    padding:18px 18px !important;margin:24px 0 !important;
    border-radius:8px;border-right-width:3px !important;
  }
  .highlight-box p{font-size:.92rem !important;line-height:1.65 !important}

  /* services-grid inside about-style sections — single column */
  .services-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;margin:24px 0 !important;
  }
  .service-card{padding:20px 18px !important;border-radius:8px}
  .service-card h4{font-size:1.02rem !important;margin-bottom:10px !important}
  .service-card p,
  .service-card li{font-size:.9rem !important;line-height:1.6 !important}

  /* mid-page CTA section — much tighter */
  .cta-section{padding:56px 18px !important}
  .cta-section .cta-eyebrow{
    font-size:.62rem !important;letter-spacing:.18em !important;
    margin-bottom:14px !important;gap:8px !important;
  }
  .cta-section .cta-eyebrow::before,
  .cta-section .cta-eyebrow::after{width:16px !important}
  .cta-section h2{
    font-size:1.65rem !important;line-height:1.2 !important;
    margin-bottom:14px !important;max-width:none !important;
  }
  .cta-section p{
    font-size:.94rem !important;line-height:1.65 !important;
    margin-bottom:24px !important;max-width:none !important;
  }
  .cta-row{flex-direction:column;gap:10px !important;align-items:stretch !important}
  .cta-row .btn-primary,
  .cta-row .btn-outline{
    width:100%;text-align:center;
    padding:13px 22px !important;font-size:.82rem !important;
  }
}