/* ============================================================
   about.css — "About Trident Renault" page
   Load AFTER css/style.css. Everything is scoped to .abt-* / body.abt-page
   (own prefix, so it can never collide with classes in style.css).
   Mobile-first; tablet >=768px; desktop >=1024px.
   No <header>/<section>/<footer> elements are used in the page (style.css styles those tags globally).
   ============================================================ */

body.abt-page{
  --abt-green:#18A76B;
  --abt-muted:#7F7F78;
  --abt-header-h:70px;
  background:#ECECEC;
  padding-bottom:0;
}
.abt-main{position:relative;padding:calc(var(--abt-header-h) + 26px) 16px 56px;}
.abt-main::before{content:'';position:absolute;top:0;left:0;right:0;height:var(--abt-header-h);background:var(--green-dark,#0A2318);}
.abt-wrap{max-width:1280px;margin:0 auto;}
.abt-title{margin:0;font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1.05;color:#16181B;}
.abt-sub{margin:10px 0 0;font-size:1rem;color:var(--abt-muted);}

/* ---------- Hero ---------- */
.abt-hero{
  position:relative;overflow:hidden;margin-top:26px;border-radius:22px;min-height:230px;
  background:#1B1F1D;color:#fff;display:flex;align-items:flex-end;
}
.abt-hero-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;}
.abt-hero::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(18,20,19,.94) 0%,rgba(18,20,19,.7) 42%,rgba(18,20,19,0) 85%);}
.abt-hero-copy{position:relative;z-index:2;padding:22px 20px;}
.abt-hero-copy h2{margin:0;font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.05;text-transform:uppercase;}
.abt-hero-copy p{margin:8px 0 0;font-size:.95rem;}

/* ---------- Stats ---------- */
.abt-stats{list-style:none;display:flex;flex-wrap:wrap;margin:20px -6px 0;padding:0;}
.abt-stat{flex:1 1 calc(50% - 12px);min-width:0;margin:0 6px 12px;padding:22px 22px 20px;border-radius:26px;background:#fff;}
.abt-stat strong{display:block;font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1.1;color:var(--abt-green);}
.abt-stat span{display:block;margin-top:8px;font-size:.95rem;color:var(--abt-muted);}

/* ---------- Story + journey ---------- */
.abt-duo{margin-top:4px;}
.abt-card{margin-bottom:16px;padding:24px 20px;border-radius:26px;background:#fff;}
.abt-card-title{margin:0 0 18px;font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1.2;color:#16181B;}
.abt-story p{margin:0 0 18px;font-size:1rem;line-height:1.85;color:#5C5C55;}
.abt-story p:last-child{margin-bottom:0;}
.abt-timeline{list-style:none;position:relative;margin:0;padding:0;}
.abt-timeline::before{content:'';position:absolute;left:6px;top:14px;bottom:30px;width:2px;background:#D5E9DE;}
.abt-timeline li{position:relative;display:flex;align-items:flex-start;margin-bottom:22px;}
.abt-timeline li:last-child{margin-bottom:0;}
.abt-dot{position:relative;z-index:1;flex:0 0 14px;width:14px;height:14px;margin:6px 18px 0 0;border-radius:50%;background:var(--abt-green);}
.abt-tl-head{display:flex;align-items:baseline;flex-wrap:wrap;}
.abt-year{margin-right:14px;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--abt-green);}
.abt-tl-head strong{font-family:var(--display);font-weight:700;font-size:1.1rem;color:#16181B;}
.abt-tl-desc{display:block;margin-top:4px;font-size:.92rem;line-height:1.5;color:var(--abt-muted);}

/* ---------- Values ---------- */
.abt-values-title{margin:24px 0 14px;font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1.2;color:#16181B;}
.abt-values{list-style:none;display:flex;flex-wrap:wrap;margin:0 -8px;padding:0;}
.abt-value{flex:1 1 260px;min-width:0;margin:0 8px 16px;padding:26px 24px 28px;border-radius:26px;background:#fff;}
.abt-vicon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:22px;border-radius:50%;background:#E3F3EA;color:var(--abt-green);}
.abt-value strong{display:block;font-family:var(--display);font-weight:700;font-size:1.4rem;color:#16181B;}
.abt-value-text{display:block;margin-top:8px;font-size:.98rem;line-height:1.55;color:var(--abt-muted);}

/* ---------- Call to action ---------- */
.abt-cta{display:flex;flex-direction:column;align-items:flex-start;margin-top:12px;padding:30px 24px;border-radius:26px;background:#14603B;color:#fff;}
.abt-cta h2{margin:0;font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1.2;}
.abt-cta p{margin:8px 0 0;font-size:1rem;color:#E2F0E8;}
.abt-btn{display:inline-block;margin-top:22px;padding:17px 34px;border-radius:14px;background:var(--yellow);font-weight:700;font-size:1rem;color:#16181B;}
.abt-btn:hover{filter:brightness(.97);}
.abt-btn:focus-visible{outline:2.5px solid #fff;outline-offset:3px;}

/* ============================================================
   TABLET (>=768px)
   ============================================================ */
@media (min-width:768px){
  .abt-main{padding-left:32px;padding-right:32px;}
  .abt-title{font-size:3rem;}
  .abt-sub{font-size:1.1rem;}
  .abt-hero{min-height:230px;border-radius:26px;align-items:center;}
  .abt-hero-img{left:auto;right:0;width:auto;height:100%;max-width:none;object-fit:fill;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%);}
  .abt-hero::after{background:linear-gradient(90deg,rgba(18,20,19,.94) 0%,rgba(18,20,19,.72) 38%,rgba(18,20,19,0) 78%);}
  .abt-hero-copy{padding:34px 44px;}
  .abt-hero-copy h2{font-size:2.4rem;}
  .abt-hero-copy p{font-size:1.1rem;}
  .abt-stat{flex:1 1 calc(25% - 12px);padding:26px 26px 24px;}
  .abt-card{padding:32px 32px;border-radius:30px;}
  .abt-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:36px 40px;border-radius:30px;}
  .abt-btn{margin-top:0;flex:0 0 auto;}
}

/* ============================================================
   DESKTOP (>=1024px)
   ============================================================ */
@media (min-width:1024px){
  body.abt-page{--abt-header-h:132px;}
  .abt-main{padding:calc(var(--abt-header-h) + 34px) 40px 80px;}
  .abt-title{font-size:3.5rem;}
  .abt-hero{min-height:297px;border-radius:28px;margin-top:40px;}
  .abt-hero-copy{padding:40px 48px;}
  .abt-hero-copy h2{font-size:3rem;max-width:560px;}
  .abt-hero-copy p{font-size:1.25rem;}
  .abt-stats{margin-top:26px;}
  .abt-stat strong{font-size:2.9rem;}
  .abt-duo{display:flex;align-items:stretch;margin:4px -8px 0;}
  .abt-duo .abt-card{flex:1 1 0;min-width:0;margin:0 8px 16px;padding:42px 44px;border-radius:34px;}
  .abt-values-title{margin:30px 0 16px;font-size:2rem;}
  .abt-value{flex:1 1 0;padding:34px 36px 38px;border-radius:30px;}
  .abt-cta{margin-top:14px;padding:44px 48px;border-radius:34px;}
  .abt-cta h2{font-size:2.2rem;}
}