:root {
  --about-red: #e21d36;
  --about-red-dark: #861126;
  --about-ink: #2d1015;
  --about-muted: #76545b;
  --about-cream: #fff8f9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--about-ink); font-family: "DM Sans", sans-serif; }
.about-page { overflow: hidden; }
.about-page a { text-decoration: none; }

.about-hero {
  position: relative;
  isolation: isolate;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(38,5,11,.94) 0%, rgba(68,8,18,.86) 48%, rgba(68,8,18,.38) 100%),
    url("public/gallery/15.jpeg") center 42% / cover no-repeat;
  color: #fff;
}

.about-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8rem;
  bottom: -18rem;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}

.about-hero-pattern {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .13;
  background-image: radial-gradient(rgba(255,255,255,.7) .7px, transparent .7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg,#000,transparent 68%);
}

.about-hero-inner { padding-top: 4rem; padding-bottom: 4rem; }
.about-breadcrumb { display: flex; gap: .55rem; margin: 0 0 2.2rem; padding: 0; list-style: none; color: rgba(255,255,255,.58); font-size: .72rem; font-weight: 600; }
.about-breadcrumb li + li::before { content: "/"; margin-right: .55rem; color: rgba(255,255,255,.3); }
.about-breadcrumb a { color: #fff; }
.about-kicker, .section-eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--about-red); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.about-kicker { color: #ff9eac; }
.about-hero h1 {
  max-width: 720px;
  margin: .9rem 0 1.15rem;
  font-size: clamp(2.25rem, 4.2vw, 3.7rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.045em;
}
.about-hero h1 em { color: #ff8fa0; font-style: normal; }
.about-hero > .container > p, .about-hero-inner > p {
  max-width: 570px;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: clamp(.88rem, 1.2vw, 1rem);
  line-height: 1.65;
}
.about-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.about-primary-btn, .about-secondary-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .75rem 1.1rem; border-radius: 12px; font-size: .82rem; font-weight: 700; transition: .2s ease; }
.about-primary-btn { background: var(--about-red); color: #fff; box-shadow: 0 12px 26px rgba(226,29,54,.25); }
.about-primary-btn:hover { background: #bd1228; color: #fff; transform: translateY(-2px); }
.about-secondary-btn { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(8px); }
.about-secondary-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

.about-intro { padding: clamp(4.5rem,8vw,7rem) 0; }
.about-intro-grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: clamp(2.5rem,7vw,6rem); }
.about-image-wrap { position: relative; }
.about-image-wrap > img { width: 100%; min-height: 520px; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 60px rgba(61,12,20,.15); }
.about-image-wrap::before { content: ""; position: absolute; z-index: -1; top: -1.1rem; left: -1.1rem; width: 45%; height: 45%; border-radius: 22px; background: #fff0f2; }
.about-image-badge { position: absolute; right: -1.5rem; bottom: 2rem; display: flex; align-items: center; gap: .85rem; max-width: 250px; padding: 1rem 1.15rem; border: 1px solid #f0dce0; border-radius: 15px; background: #fff; box-shadow: 0 18px 40px rgba(52,9,16,.15); }
.about-image-badge i { color: var(--about-red); font-size: 1.55rem; }
.about-image-badge strong, .about-image-badge span { display: block; }
.about-image-badge strong { color: var(--about-ink); font-size: .84rem; }
.about-image-badge span { color: #89666d; font-size: .68rem; }

.about-intro-copy h2, .section-heading h2, .licence-copy h2 { margin: .7rem 0 1.15rem; color: var(--about-ink); font-size: clamp(2rem,4vw,3.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; }
.about-intro-copy > p { margin: 0 0 1rem; color: var(--about-muted); font-size: .94rem; line-height: 1.8; }
.recognition-card { display: flex; gap: 1rem; margin-top: 1.6rem; padding: 1.15rem; border: 1px solid #f1dce0; border-radius: 16px; background: var(--about-cream); }
.recognition-icon { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: #fff; color: var(--about-red); box-shadow: 0 7px 18px rgba(89,12,24,.08); font-size: 1.15rem; }
.recognition-card small, .recognition-card strong { display: block; }
.recognition-card small { margin-bottom: .2rem; color: #a05a66; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.recognition-card strong { color: var(--about-ink); font-size: .9rem; }
.recognition-card p { margin: .25rem 0 0; color: #86636a; font-size: .75rem; }

.licence-section { padding: 1rem 0 6rem; scroll-margin-top: 130px; }
.licence-panel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 2rem; border: 1px solid #efdce0; border-radius: 20px; background: linear-gradient(135deg,#fff 20%,#fff5f6); box-shadow: 0 16px 45px rgba(59,10,18,.07); }
.licence-icon { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 17px; background: var(--about-red); color: #fff; box-shadow: 0 12px 24px rgba(226,29,54,.2); font-size: 1.7rem; }
.licence-copy h2 { margin-bottom: .7rem; font-size: clamp(1.6rem,3vw,2.35rem); }
.licence-copy p { max-width: 720px; margin: 0; color: var(--about-muted); font-size: .84rem; line-height: 1.7; }
.licence-number { min-width: 275px; padding: 1.15rem; border-left: 1px solid #ead2d7; }
.licence-number small, .licence-number strong, .licence-number span { display: block; }
.licence-number small { color: #9b6b74; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.licence-number strong { margin: .35rem 0 .55rem; color: var(--about-ink); font-size: 1.05rem; }
.licence-number span { color: #278455; font-size: .7rem; font-weight: 700; }

.components-section { padding: clamp(4.5rem,7vw,6rem) 0; background: #fff8f9; }
.section-heading { max-width: 680px; margin: 0 auto 2.5rem; text-align: center; }
.section-heading > p { margin: 0 auto; color: var(--about-muted); font-size: .88rem; line-height: 1.7; }
.components-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.component-card { display: flex; align-items: flex-start; gap: .9rem; min-height: 142px; padding: 1.2rem; border: 1px solid #f0dce0; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(62,12,20,.045); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.component-card:hover { transform: translateY(-4px); border-color: #e8b9c1; box-shadow: 0 16px 34px rgba(62,12,20,.09); }
.component-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #fff0f2; color: var(--about-red); font-size: 1rem; }
.component-card h3 { margin: .18rem 0 .38rem; color: var(--about-ink); font-size: .9rem; font-weight: 700; }
.component-card p { margin: 0; color: #8a6870; font-size: .7rem; line-height: 1.55; }

.beyond-section { position: relative; padding: clamp(4.5rem,7vw,6.5rem) 0; background: linear-gradient(145deg,#2a080f,#16070a); color: #fff; }
.beyond-section::after { content: ""; position: absolute; right: 0; bottom: 0; width: 40%; height: 100%; opacity: .12; background-image: radial-gradient(#fff .7px,transparent .7px); background-size: 18px 18px; }
.section-heading-light { position: relative; z-index: 1; }
.section-heading-light h2 { color: #fff; }
.section-heading-light > p { color: rgba(255,255,255,.58); }
.beyond-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; max-width: 980px; margin: 0 auto; }
.beyond-card { position: relative; overflow: hidden; padding: 2rem; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.beyond-number { position: absolute; top: 1rem; right: 1.2rem; color: rgba(255,255,255,.08); font-size: 3.5rem; font-weight: 700; }
.beyond-icon { display: grid; width: 50px; height: 50px; place-items: center; margin-bottom: 1.2rem; border-radius: 14px; background: rgba(226,29,54,.16); color: #ff7186; font-size: 1.2rem; }
.beyond-card h3 { margin: 0 0 .75rem; color: #fff; font-size: 1.15rem; }
.beyond-card p { margin: 0 0 1.25rem; color: rgba(255,255,255,.62); font-size: .82rem; line-height: 1.75; }
.beyond-card a { display: inline-flex; align-items: center; gap: .4rem; color: #ff94a3; font-size: .75rem; font-weight: 700; }
.beyond-card a:hover { color: #fff; }

.about-cta { padding: 4rem 0; background: #fff; }
.about-cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 2.2rem; border-radius: 20px; background: linear-gradient(100deg,#bc1730,#df2944); color: #fff; box-shadow: 0 20px 44px rgba(157,17,38,.2); }
.about-cta-panel span { color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.about-cta-panel h2 { margin: .3rem 0 0; color: #fff; font-size: clamp(1.4rem,3vw,2rem); font-weight: 700; }
.about-cta-panel a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .5rem; padding: .78rem 1rem; border-radius: 12px; background: #fff; color: #ad142a; font-size: .8rem; font-weight: 700; }
.about-cta-panel a:hover { color: #861126; transform: translateY(-2px); }

@media (max-width: 991.98px) {
  .about-hero { min-height: 460px; }
  .about-intro-grid { grid-template-columns: 1fr; }
  .about-image-wrap { max-width: 720px; }
  .about-image-wrap > img { min-height: 420px; }
  .about-image-badge { right: 1rem; }
  .licence-panel { grid-template-columns: auto 1fr; }
  .licence-number { grid-column: 1 / -1; padding: 1rem 0 0; border-top: 1px solid #ead2d7; border-left: 0; }
  .components-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767.98px) {
  .about-hero h1 { max-width: 600px; font-size: clamp(2rem, 8.5vw, 2.85rem); line-height: 1.08; }
  .about-intro { padding-top: 4rem; }
  .about-image-wrap > img { min-height: 350px; }
  .licence-panel { grid-template-columns: 1fr; }
  .licence-icon { width: 56px; height: 56px; }
  .beyond-grid { grid-template-columns: 1fr; }
  .about-cta-panel { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 575.98px) {
  .about-hero {
    min-height: 500px;
    align-items: flex-end;
    background:
      linear-gradient(180deg, rgba(24,4,8,.34) 0%, rgba(24,4,8,.72) 42%, rgba(38,5,11,.96) 100%),
      url("public/gallery/15.jpeg") center top / cover no-repeat;
  }

  .about-hero::after {
    right: -9rem;
    bottom: -12rem;
    width: 22rem;
    height: 22rem;
    opacity: .55;
  }

  .about-hero-pattern {
    opacity: .08;
    background-size: 16px 16px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 42%, transparent 100%);
  }

  .about-hero-inner {
    padding: 3.75rem 1rem 2rem;
  }

  .about-breadcrumb {
    gap: .42rem;
    margin-bottom: 1rem;
    padding: .42rem .58rem;
    width: fit-content;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: .6rem;
    backdrop-filter: blur(10px);
  }

  .about-breadcrumb li + li::before {
    margin-right: .42rem;
  }

  .about-kicker {
    padding: .42rem .62rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: .58rem;
    letter-spacing: .08em;
    backdrop-filter: blur(10px);
  }

  .about-hero h1 {
    max-width: 22rem;
    margin: .8rem 0 .8rem;
    font-size: clamp(2rem, 10vw, 2.55rem);
    letter-spacing: 0;
    line-height: 1.08;
  }

  .about-hero > .container > p,
  .about-hero-inner > p {
    max-width: 21rem;
    font-size: .84rem;
    line-height: 1.55;
  }

  .about-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: 1.15rem;
  }

  .about-primary-btn,
  .about-secondary-btn {
    width: 100%;
    min-height: 44px;
    padding: .62rem .45rem;
    border-radius: 12px;
    font-size: .68rem;
    white-space: nowrap;
  }

  .about-primary-btn:hover {
    transform: none;
  }

  .about-intro {
    padding: 2.75rem 0;
    background: linear-gradient(180deg, #fff 0%, #fff8f9 100%);
  }

  .about-intro .container {
    padding-inline: 1rem;
  }

  .about-intro-grid {
    gap: 1.35rem;
  }

  .about-image-wrap {
    max-width: none;
  }

  .about-image-wrap::before {
    top: -.55rem;
    left: -.55rem;
    width: 42%;
    height: 42%;
    border-radius: 16px;
  }

  .about-image-wrap > img {
    min-height: 0;
    height: 300px;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(61,12,20,.14);
  }

  .about-image-badge {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 1.25rem);
    max-width: none;
    margin: -2.1rem auto 0;
    gap: .65rem;
    padding: .75rem;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(52,9,16,.13);
  }

  .about-image-badge i {
    font-size: 1.25rem;
  }

  .about-image-badge strong {
    font-size: .76rem;
  }

  .about-image-badge span {
    font-size: .62rem;
    line-height: 1.35;
  }

  .about-intro-copy {
    text-align: left;
  }

  .about-intro-copy .section-eyebrow {
    padding: .42rem .62rem;
    border: 1px solid #f0d3d8;
    border-radius: 999px;
    background: #fff;
    font-size: .58rem;
    letter-spacing: .08em;
  }

  .about-intro-copy h2 {
    margin: .75rem 0 .8rem;
    font-size: clamp(1.75rem, 8.5vw, 2.25rem);
    letter-spacing: 0;
    line-height: 1.12;
  }

  .about-intro-copy > p {
    margin-bottom: .8rem;
    font-size: .82rem;
    line-height: 1.62;
  }

  .recognition-card {
    gap: .7rem;
    margin-top: 1rem;
    padding: .8rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(57, 15, 22, .07);
  }

  .recognition-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 11px;
    font-size: .98rem;
  }

  .recognition-card small {
    font-size: .55rem;
    letter-spacing: .08em;
  }

  .recognition-card strong {
    font-size: .78rem;
    line-height: 1.3;
  }

  .recognition-card p {
    font-size: .64rem;
    line-height: 1.45;
  }
  .licence-section {
    padding: .75rem 0 2.75rem;
    background: #fff8f9;
    scroll-margin-top: 90px;
  }

  .licence-section .container {
    padding-inline: 1rem;
  }

  .licence-panel {
    position: relative;
    gap: .85rem;
    padding: .95rem;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(59,10,18,.08);
  }

  .licence-panel::before {
    content: "";
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: rgba(226,29,54,.07);
    pointer-events: none;
  }

  .licence-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 1.22rem;
  }

  .licence-copy {
    position: relative;
    z-index: 1;
  }

  .licence-copy .section-eyebrow {
    padding: .42rem .62rem;
    border: 1px solid #f0d3d8;
    border-radius: 999px;
    background: #fff8f9;
    font-size: .56rem;
    letter-spacing: .08em;
  }

  .licence-copy h2 {
    margin: .75rem 0 .65rem;
    font-size: clamp(1.45rem, 7.5vw, 2rem);
    letter-spacing: 0;
    line-height: 1.12;
  }

  .licence-copy p {
    font-size: .78rem;
    line-height: 1.58;
  }

  .licence-number {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: .8rem;
    border: 1px solid #f0dce0;
    border-top: 1px solid #f0dce0;
    border-left: 1px solid #f0dce0;
    border-radius: 13px;
    background: #fff8f9;
  }

  .licence-number small {
    font-size: .54rem;
    letter-spacing: .07em;
  }

  .licence-number strong {
    margin: .35rem 0 .5rem;
    font-size: .88rem;
    overflow-wrap: anywhere;
  }

  .licence-number span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .55rem;
    border-radius: 999px;
    background: rgba(39,132,85,.09);
    font-size: .62rem;
    line-height: 1.25;
  }

  .components-section {
    padding: 2.75rem 0;
    background: linear-gradient(180deg, #fff8f9 0%, #fff 100%);
  }

  .components-section .container {
    padding-inline: 1rem;
  }

  .components-section .section-heading {
    margin: 0 0 1.15rem;
    text-align: left;
  }

  .components-section .section-eyebrow {
    padding: .42rem .62rem;
    border: 1px solid #f0d3d8;
    border-radius: 999px;
    background: #fff;
    font-size: .56rem;
    letter-spacing: .08em;
  }

  .components-section .section-heading h2 {
    margin: .75rem 0 .65rem;
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    letter-spacing: 0;
    line-height: 1.12;
  }

  .components-section .section-heading > p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
  }

  .components-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }

  .component-card {
    min-height: 0;
    flex-direction: column;
    gap: .55rem;
    padding: .75rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(62,12,20,.055);
    transform: none;
  }

  .component-card:hover {
    transform: none;
  }

  .component-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 11px;
    font-size: .84rem;
  }

  .component-card h3 {
    margin: 0 0 .24rem;
    font-size: .72rem;
    line-height: 1.25;
  }

  .component-card p {
    font-size: .56rem;
    line-height: 1.35;
  }

  .beyond-section {
    padding: 2.75rem 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 100% 0%, rgba(226,29,54,.2), transparent 10rem),
      linear-gradient(180deg, #2a080f 0%, #16070a 100%);
  }

  .beyond-section::after {
    width: 100%;
    height: 45%;
    opacity: .08;
    background-size: 16px 16px;
  }

  .beyond-section .container {
    padding-inline: 1rem;
  }

  .beyond-section .section-heading {
    margin: 0 0 1.15rem;
    text-align: left;
  }

  .beyond-section .section-eyebrow {
    padding: .42rem .62rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #ff9eac;
    font-size: .56rem;
    letter-spacing: .08em;
  }

  .beyond-section .section-heading h2 {
    margin: .75rem 0 .65rem;
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    letter-spacing: 0;
    line-height: 1.12;
  }

  .beyond-section .section-heading > p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
  }

  .beyond-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .beyond-card {
    padding: .95rem;
    border-radius: 16px;
    background: rgba(255,255,255,.075);
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
  }

  .beyond-number {
    top: .7rem;
    right: .9rem;
    font-size: 2.4rem;
  }

  .beyond-icon {
    width: 40px;
    height: 40px;
    margin-bottom: .85rem;
    border-radius: 12px;
    font-size: .98rem;
  }

  .beyond-card h3 {
    margin-bottom: .5rem;
    padding-right: 2.6rem;
    font-size: .95rem;
    line-height: 1.25;
  }

  .beyond-card p {
    margin-bottom: .9rem;
    font-size: .7rem;
    line-height: 1.55;
  }

  .beyond-card a {
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: .58rem .7rem;
    border-radius: 11px;
    background: rgba(255,255,255,.09);
    font-size: .68rem;
  }

  .about-cta {
    padding: 2.75rem 0;
    background: linear-gradient(180deg, #fff 0%, #fff8f9 100%);
  }

  .about-cta .container {
    padding-inline: 1rem;
  }

  .about-cta-panel {
    position: relative;
    gap: 1rem;
    padding: 1rem;
    overflow: hidden;
    border-radius: 16px;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,.22), transparent 9rem),
      linear-gradient(145deg, #9f1328 0%, #e21d36 100%);
    box-shadow: 0 16px 38px rgba(157,17,38,.18);
  }

  .about-cta-panel::after {
    content: "";
    position: absolute;
    right: -3.5rem;
    bottom: -3.5rem;
    width: 9rem;
    height: 9rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    pointer-events: none;
  }

  .about-cta-panel > div,
  .about-cta-panel a {
    position: relative;
    z-index: 1;
  }

  .about-cta-panel span {
    font-size: .58rem;
    letter-spacing: .08em;
    line-height: 1.35;
  }

  .about-cta-panel h2 {
    margin-top: .45rem;
    font-size: clamp(1.35rem, 7vw, 1.85rem);
    line-height: 1.12;
  }

  .about-cta-panel a {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: .7rem .9rem;
    border-radius: 12px;
    font-size: .74rem;
  }

  .about-cta-panel a:hover {
    transform: none;
  }
}