/* CASE2CASE_ABOUT_REDESIGN_V1_0_4 — desktop hero centered; canonical header/footer intentionally excluded. */

.c2c-about {
  --c2c-ink: #111215;
  --c2c-muted: #7f8795;
  --c2c-line: #e8ebef;
  --c2c-soft: #f6f7f8;
  --c2c-radius: 26px;
  --c2c-max: 1440px;
  color: var(--c2c-ink);
  background: #fff;
  font-family: "Circe", "Arial", sans-serif;
  font-weight: 400;
  overflow: hidden;
}

.c2c-about *, .c2c-about *::before, .c2c-about *::after { box-sizing: border-box; }
.c2c-about img { display: block; max-width: 100%; }
.c2c-about a { color: inherit; }

.c2c-shell {
  width: min(var(--c2c-max), calc(100% - 96px));
  margin-inline: auto;
}

.c2c-kicker {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 38px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.c2c-kicker i { width: 60px; height: 1px; background: currentColor; opacity: .55; }

.c2c-about__breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  color: #7b8391;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}
.c2c-about__breadcrumbs a {
  color: #596273;
  text-decoration: none;
  transition: color .18s ease;
}
.c2c-about__breadcrumbs a:hover { color: var(--c2c-ink); }
.c2c-about__breadcrumbs-sep { color: #a1a7b1; }

/* HERO */
.c2c-about__hero {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
  gap: 72px;
  padding-top: 18px;
  padding-bottom: 78px;
}

.c2c-about__hero-copy { padding: 4px 0 18px; }
.c2c-about__hero h1 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(58px, 5.8vw, 92px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 700;
}
.c2c-about__lead {
  max-width: 560px;
  margin: 34px 0 0;
  color: var(--c2c-muted);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.35;
}

.c2c-about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 76px;
  max-width: 610px;
}
.c2c-stat { min-height: 94px; padding: 2px 26px 0 0; }
.c2c-stat + .c2c-stat { padding-left: 30px; border-left: 1px solid var(--c2c-line); }
.c2c-stat b { display: block; margin-bottom: 9px; font-size: 31px; line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.c2c-stat span { display: block; max-width: 150px; font-size: 11px; line-height: 1.45; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #5d6470; }

.c2c-about__hero-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  gap: 34px;
  min-width: 0;
}
.c2c-facade-card {
  min-height: 650px;
  margin: 0;
  overflow: hidden;
  background: var(--c2c-soft);
}
.c2c-facade-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

.c2c-about__place { padding-top: 170px; }
.c2c-place__title { font-size: 11px; line-height: 1.7; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.c2c-place__line { display: block; width: 30px; height: 1px; margin: 28px 0 34px; background: #5b6069; }
.c2c-place__location { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.c2c-place__location svg { width: 16px; height: 16px; fill: currentColor; }
.c2c-about__place p { margin: 126px 0 0; color: var(--c2c-muted); font-size: 13px; line-height: 1.6; }

/* STORY + TRADEMARK */
.c2c-about__story {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
  padding-top: 30px;
  padding-bottom: 88px;
}
.c2c-story-copy { padding: 14px 0 0; }
.c2c-prose { max-width: 620px; }
.c2c-prose p { margin: 0 0 23px; color: #656d79; font-size: 17px; line-height: 1.65; }

.c2c-trademark {
  min-width: 0;
  padding: 36px 42px 42px;
  border-radius: var(--c2c-radius);
  background: linear-gradient(145deg, #fbfbfb 0%, #f3f4f5 100%);
}
.c2c-kicker--tm { margin-bottom: 26px; }
.c2c-trademark__gallery {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 26px;
  min-height: 510px;
}
.c2c-doc {
  position: relative;
  display: block;
  filter: drop-shadow(0 18px 24px rgba(26, 29, 34, .10));
  margin: 0;
}
.c2c-doc--certificate { transform: rotate(-1deg); }
.c2c-doc--register { transform: translateY(10px) rotate(1.25deg); }
.c2c-doc img { width: 100%; height: auto; background: #fff; }
.c2c-trademark__caption { margin: 26px 0 0; color: #7a818b; font-size: 13px; line-height: 1.5; }

/* VALUES */
.c2c-values { padding-bottom: 96px; }
.c2c-values__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  background: #111214;
}
.c2c-values__copy { padding: 58px 54px 46px; }
.c2c-kicker--light { margin-bottom: 28px; color: #fff; }
.c2c-values h2 { margin: 0; font-size: clamp(47px, 4.2vw, 72px); line-height: .98; letter-spacing: -.04em; font-weight: 700; }
.c2c-values__copy > p { max-width: 590px; margin: 28px 0 0; color: #dadde1; font-size: 18px; line-height: 1.55; }
.c2c-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 46px; }
.c2c-value { min-height: 92px; padding-right: 18px; }
.c2c-value + .c2c-value { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.18); }
.c2c-value svg { width: 31px; height: 31px; margin-bottom: 15px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.c2c-value span { display: block; font-size: 10px; line-height: 1.55; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

.c2c-values__visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,9,10,.28), rgba(8,9,10,.16)),
    url("/images/case2case-native-v1/home/kevlar-protection-case-1280.webp") center center / cover no-repeat,
    #111214;
}
.c2c-values__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34));
}
.c2c-values__visual::before {
  content: "";
  position: absolute;
  inset: 12% -18% -22% 5%;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 46% 54% 42% 58% / 54% 35% 65% 46%;
  transform: rotate(-14deg);
  box-shadow: inset 0 0 90px rgba(255,255,255,.03), 0 0 100px rgba(0,0,0,.25);
}
.c2c-values__grain {
  position: absolute; inset: 0;
  opacity: .18;
  background-image: repeating-radial-gradient(circle at 0 0, transparent 0 1px, rgba(255,255,255,.17) 1px 2px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}
.c2c-values__wordmark {
  position: absolute;
  left: 10%; bottom: 24%;
  transform: rotate(-5deg);
  font-size: clamp(42px, 4.6vw, 78px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.08em;
  color: rgba(255,255,255,.16);
  text-shadow: 0 3px 0 rgba(0,0,0,.75), 0 -1px 0 rgba(255,255,255,.08);
}
.c2c-values__wordmark span { display: inline-block; font-size: 1.35em; transform: translateY(.06em); }
.c2c-values__sidecopy { position: absolute; top: 48px; right: 42px; font-size: 10px; line-height: 1.75; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.c2c-values__sidecopy::after { content: ""; display: block; width: 38px; height: 1px; margin-top: 20px; background: currentColor; opacity: .55; }


/* Desktop hero balance V1.0.4:
   true 3-column composition: copy | centered facade | place.
   The middle image stays 430x600 and is spaced evenly between left/right content. */
@media (min-width: 1181px) {
  .c2c-about__hero {
    grid-template-columns: minmax(500px, 600px) 430px 142px;
    column-gap: 0;
    justify-content: space-between;
    align-items: start;
  }
  .c2c-about__hero-copy {
    grid-column: 1;
  }
  .c2c-about__hero-media {
    display: contents;
  }
  .c2c-facade-card {
    grid-column: 2;
    width: 430px;
    height: 600px;
    min-height: 0;
    justify-self: center;
  }
  .c2c-facade-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
  }
  .c2c-about__place {
    grid-column: 3;
  }
}

/* TABLET */
@media (max-width: 1180px) {
  .c2c-shell { width: min(var(--c2c-max), calc(100% - 56px)); }
  .c2c-about__hero { grid-template-columns: .9fr 1.1fr; gap: 42px; }
  .c2c-about__hero-media { grid-template-columns: 1fr; }
  .c2c-about__place { display: none; }
  .c2c-about__story { gap: 54px; }
  .c2c-trademark { padding: 30px; }
  .c2c-values__copy { padding: 48px 38px 40px; }
  .c2c-values__grid { grid-template-columns: repeat(2,1fr); gap: 26px 0; }
  .c2c-value:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* MOBILE / NARROW TABLET */
@media (max-width: 820px) {
  .c2c-about { --c2c-radius: 18px; }
  .c2c-shell { width: calc(100% - 32px); }
  .c2c-kicker { gap: 16px; margin-bottom: 24px; font-size: 10px; }
  .c2c-kicker i { width: 42px; }

  .c2c-about__hero { grid-template-columns: 1fr; gap: 38px; padding-top: 30px; padding-bottom: 56px; }
  .c2c-about__hero-copy { padding: 0; }
  .c2c-about__hero h1 { font-size: clamp(52px, 14.8vw, 74px); }
  .c2c-about__lead { margin-top: 24px; font-size: 20px; }
  .c2c-about__stats { margin-top: 40px; max-width: none; }
  .c2c-stat { min-height: 76px; padding-right: 14px; }
  .c2c-stat + .c2c-stat { padding-left: 15px; }
  .c2c-stat b { font-size: 25px; }
  .c2c-stat span { font-size: 9px; letter-spacing: .11em; }
  .c2c-facade-card { min-height: 560px; border-radius: 18px; }
  .c2c-facade-card img { object-position: 50% 54%; }

  .c2c-about__story { grid-template-columns: 1fr; gap: 52px; padding-top: 0; padding-bottom: 58px; }
  .c2c-prose p { font-size: 16px; line-height: 1.6; }
  .c2c-trademark { padding: 24px 18px 24px; }
  .c2c-trademark__gallery { gap: 12px; min-height: auto; }
  .c2c-doc--register { transform: translateY(7px) rotate(1deg); }

  .c2c-values { padding-bottom: 40px; }
  .c2c-values__panel { grid-template-columns: 1fr; border-radius: 18px; }
  .c2c-values__copy { padding: 26px 20px 22px; }
  .c2c-values .c2c-kicker--light { margin-bottom: 18px; }
  .c2c-values h2 { font-size: clamp(38px, 10.8vw, 50px); line-height: .98; }
  .c2c-values__copy > p { max-width: none; margin-top: 18px; font-size: 15px; line-height: 1.45; }
  .c2c-values__grid { margin-top: 24px; gap: 16px 0; }
  .c2c-value { min-height: 66px; padding-right: 12px; }
  .c2c-value + .c2c-value { padding-left: 16px; }
  .c2c-value svg { width: 27px; height: 27px; margin-bottom: 9px; }
  .c2c-value span { font-size: 9px; line-height: 1.42; }
  .c2c-values__visual { min-height: 215px; }
  .c2c-values__wordmark { left: 7%; bottom: 22%; font-size: clamp(38px, 11vw, 54px); }
  .c2c-values__sidecopy { top: 28px; right: 24px; font-size: 9px; line-height: 1.6; }
  .c2c-values__sidecopy::after { margin-top: 12px; }
}

@media (max-width: 480px) {
  .c2c-shell { width: calc(100% - 24px); }
  .c2c-about__hero { padding-top: 20px; }
  .c2c-about__breadcrumbs { margin-bottom: 16px; font-size: 12px; }
  .c2c-about__hero h1 { font-size: 48px; }
  .c2c-about__lead { font-size: 18px; }
  .c2c-about__stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .c2c-stat b { font-size: 22px; }
  .c2c-stat span { font-size: 8px; }
  .c2c-facade-card { min-height: 480px; }
  .c2c-trademark__gallery { grid-template-columns: 1fr 1fr; align-items: start; }
  .c2c-trademark__caption { font-size: 12px; }
  .c2c-values__copy { padding: 22px 18px 18px; }
  .c2c-values h2 { font-size: 38px; }
  .c2c-values__copy > p { margin-top: 14px; font-size: 14px; }
  .c2c-values__grid { grid-template-columns: 1fr 1fr; margin-top: 20px; gap: 12px 0; }
  .c2c-value { min-height: 60px; }
  .c2c-value:nth-child(odd) { padding-left: 0; border-left: 0; }
  .c2c-value:nth-child(even) { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); }
  .c2c-values__visual { min-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .c2c-doc { transition: none; }
}

/* Live CASE2CASE integration refinements */
.c2c-about-page { margin: 0; background: #fff; }
.c2c-about { min-height: 100vh; }
.c2c-facade-card { border-radius: 0; }
.c2c-trademark__gallery img { image-rendering: auto; }
.c2c-values__visual { background-position: 50% 46%; }
@media (min-width: 1480px) {
  .c2c-about__hero { grid-template-columns: minmax(0,.86fr) minmax(560px,1.14fr); }
}
@media (max-width: 820px) {
  .c2c-facade-card { min-height: 0; aspect-ratio: 592 / 880; }
  .c2c-facade-card img { height: 100%; }
}