/* ============================================================
   About Us page — ported from storefront-mockup/about-us-final-v2.html.
   Loaded ONLY on the about-us CMS page via cms_page_view_id_about-us.xml.
   Magento's default header/footer are kept; this styles the page body.
   ============================================================ */

:root { --maxw: 1320px; }

/* Full-bleed main so the hero spans edge-to-edge; strip Magento's default
   column padding / max-width on this page only. */
body.cms-about-us .columns,
body.cms-about-us .column.main {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
    float: none;
}
body.cms-about-us .page-main { max-width: none; padding: 0; }
body.cms-about-us #maincontent { padding-top: 0; }
body.cms-about-us .page.messages { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* No page-level separator here — the site header already provides the
   single header separator. (Removed the mockup's <main> gold hairline so
   it doesn't render a second line below the header.) */
.about-page {
    padding-top: 0;
}

.about-shell { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ===== Hero ===== */
.about-hero{position:relative;width:100%;margin:0 0 36px;overflow:hidden;aspect-ratio:48/7;min-height:100px;display:flex;align-items:center;background:#14296b}
.about-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95}
.about-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(20,41,107,.78) 0%, rgba(20,41,107,.55) 35%, rgba(20,41,107,.10) 65%, transparent 100%)}
.about-hero .copy{position:relative;z-index:2;padding:0 max(28px, calc((100% - var(--maxw, 1320px)) / 2));color:#fff;max-width:62%}
.about-hero h1{margin:0 0 10px;font-size:clamp(28px,4.2vw,52px);font-weight:800;line-height:1.05;letter-spacing:.3px}
.about-hero p{margin:0;font-size:clamp(15px,1.8vw,22px);font-weight:500;opacity:.96;letter-spacing:.2px}

/* ===== Founder's Message ===== */
.founder-row{max-width:1180px;margin:0 auto 56px;background:#fff;padding:36px 40px;border:1px solid #e6e9ef;border-radius:8px;display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:flex-start}
.founder-row .lead-col .lead{display:block;color:#1344b1;font-size:12.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:6px;line-height:1.2}
.founder-row .lead-col .name{margin:0;color:#bc1212;font-size:22px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.founder-row .body p{margin:0 0 16px;font-style:italic;color:#6b7280;font-size:15px;line-height:1.7}
.founder-row .body p:last-child{margin-bottom:0}

/* ===== About / Team / Catalogs 2-col rows ===== */
.about-row{max-width:1180px;margin:0 auto 48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about-row .text h2{margin:0 0 16px;font-size:22px;color:#1344b1;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;line-height:1}
.about-row .text p{margin:0 0 16px;color:#000;font-size:15px;line-height:1.65}
.about-row .text .cta-link{display:inline-flex;align-items:center;gap:8px;color:#14296b;font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;margin-top:4px;transition:color .15s}
.about-row .text .cta-link:hover{color:#1344b1}
.about-row .text .cta-link svg{width:14px;height:14px}
.about-row .img-wrap{overflow:hidden;aspect-ratio:5/4;background:#f3f6fc}
.about-row .img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.about-row .img-wrap:hover img{transform:scale(1.03)}
.about-row .order-first{order:-1}

/* ===== Catalog covers (2 catalog images side-by-side) ===== */
.cats-mock{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cats-mock .cov{display:block;overflow:hidden;border-radius:4px;box-shadow:0 8px 18px rgba(20,41,107,.10);transition:transform .2s,box-shadow .2s;line-height:0}
.cats-mock .cov:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(20,41,107,.18)}
.cats-mock .cov img{width:100%;height:auto;display:block;object-fit:cover}

/* ===== SEO band ===== */
.seo-band{max-width:var(--maxw);margin:32px auto 40px;padding:0 22px}
.seo-card{background:#fff;border:1px solid #e6e9ef;border-radius:14px;padding:32px 36px;box-shadow:0 6px 20px rgba(20,41,107,.05)}
.seo-head{margin-bottom:14px}
.seo-eyebrow{display:block;color:#bc1212;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.seo-title{font-size:clamp(24px,2.6vw,30px);font-weight:800;display:inline-block;position:relative;padding-bottom:10px;margin:0;line-height:1.1}
.seo-title .a{color:#14296b}
.seo-title .b{color:#1344b1}
.seo-title::after{content:"";position:absolute;left:0;bottom:0;width:62px;height:3px;background:#fdc700;border-radius:2px}
.seo-text{color:#1f2a44;font-size:15px;line-height:1.7;margin:0}
.seo-text.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.seo-btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #0f9447;color:#0f9447;background:transparent;font-weight:700;font-size:14px;padding:10px 22px;border-radius:6px;margin-top:16px;cursor:pointer;transition:background .15s,color .15s;font-family:inherit}
.seo-btn:hover{background:#0f9447;color:#fff}

/* ===== Responsive ===== */
@media(max-width:880px){
  .founder-row{grid-template-columns:1fr;padding:28px 26px;gap:18px}
  .about-row{grid-template-columns:1fr;gap:22px;margin-bottom:36px}
  .about-row .order-first{order:0}
  .about-hero{aspect-ratio:32/9;min-height:120px}
  .about-hero .copy{max-width:100%}
}