/* ── ABOUT PAGE ───────────────────────────────────────────────────────────
   Page-scoped only. Tokens, buttons, .split, .reviews, .areas-split and the
   header/footer all come from style.css — nothing is redefined here.

   Departs from .c-hero deliberately: the contact hero is built around the
   bear cutout (transparent PNG, bleeds past the section edge). This one is
   built around a real photograph, so it gets a proper framed media column
   instead of a background wash.
   ──────────────────────────────────────────────────────────────────────── */

.a-hero{
  background:var(--cream-2);
  position:relative;
  overflow:visible;
  z-index:2;
  padding:clamp(20px,2.4vw,32px) 0 clamp(28px,3.5vw,44px);
}

/* Van photo on the right, cream wash left-to-right — matches the homepage hero. */
.a-hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:url('/wc-assets/6931280ce8d9acda024b1e74_heroimg-p-2600.png') center 30%/cover no-repeat;
  opacity:.35;
}
.a-hero::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,
    rgba(243,226,218,.92) 0%,
    rgba(243,226,218,.85) 30%,
    rgba(243,226,218,.60) 52%,
    rgba(243,226,218,.30) 68%,
    rgba(243,226,218,0) 85%
  );
}
.a-hero .container{position:relative;z-index:1}

.a-hero__grid{
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(28px,4vw,56px);align-items:center;
}

/* breadcrumb */
.crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14.5px;color:var(--ink-faint);margin:0 0 18px;
}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--orange)}
.crumb span[aria-current]{color:var(--navy);font-weight:600}
.crumb .crumb__sep{color:var(--line-2)}

.a-hero h1{color:var(--navy);margin:0 0 14px}
.a-hero__sub{
  font-size:18px;color:var(--ink-soft);
  max-width:54ch;line-height:1.65;margin:0 0 24px;
}
.a-hero__actions{display:flex;gap:12px;flex-wrap:wrap}

/* media column — bg-removed cutout floating over the hero edge (matches contact bear) */
.a-hero__media{display:flex;justify-content:flex-end;align-items:flex-end;position:relative}
.a-hero__media img{
  width:110%;max-width:480px;height:auto;display:block;
  margin-bottom:-44px;position:relative;z-index:3;
  filter:drop-shadow(0 18px 34px rgba(17,19,51,.20));
  transition:transform .1s linear;will-change:transform;
}

/* "Since 1996" plate tucked over the photo's lower-left corner */
.a-hero__stamp{
  position:absolute;left:-14px;bottom:22px;
  background:var(--orange);color:var(--white);
  border-radius:var(--r);padding:12px 18px;
  box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;line-height:1.05;
}
.a-hero__stamp b{
  font-family:var(--font-display);font-size:30px;font-weight:700;
  letter-spacing:-.01em;
}
/* same fix for the story photo — about.css only loads on this page */
.split__media img{height:auto;aspect-ratio:2.18/1;object-fit:cover;object-position:center 40%}

.a-hero__stamp span{
  font-size:12.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;opacity:.92;margin-top:3px;
}

/* licence line under the story copy */
.a-licence{
  margin-top:22px;padding:14px 18px;
  background:var(--cream-2);border-left:3px solid var(--orange);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:15.5px;color:var(--ink-soft);
}
.a-licence strong{color:var(--navy)}

@media(max-width:980px){
  .a-hero__grid{grid-template-columns:1fr;gap:28px}
  .a-hero__media img{max-width:340px;margin-bottom:0}
  .a-hero__stamp{left:14px;bottom:14px;padding:10px 15px}
  .a-hero__stamp b{font-size:25px}
}
@media(max-width:620px){
  .a-hero__actions{flex-direction:column}
  .a-hero__actions .btn{width:100%;justify-content:center}
}
@media(max-width:480px){
  .a-hero h1{font-size:clamp(26px,8vw,32px)}
  .a-hero__sub{font-size:16.5px}
  .a-hero__media{display:none}
}

@media(max-width:700px){
  .a-hero::after{background:linear-gradient(90deg, rgba(243,226,218,.92) 0%, rgba(243,226,218,.88) 55%, rgba(243,226,218,.62) 100%);}
}