.about-page {
  color: #fff1e1;
  background: #2b000b;
  font-family: var(--display);
}
.about-page :is(h1, h2, h3, h4, p, ul, figure) { margin: 0; }
.about-page :is(h1, h2, h3, h4) { color: #ffe28b; }
.about-page h2 { font-size: clamp(1.4rem, 2.35vw, 3rem); text-align: center; line-height: 1.25; }
.about-laurels::before, .about-laurels::after {
  content: ""; display: inline-block; vertical-align: -.08em; margin-inline: .35em;
  width: .61em; height: .84em; background: url('/assets/about/laurel.webp') center / contain no-repeat;
  mix-blend-mode: lighten;
}
.about-laurels::after { transform: scaleX(-1); }
.about-hero {
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: stretch;
  background: radial-gradient(ellipse at 60% 100%, #8c2444, transparent 55%), linear-gradient(160deg, #350014 25%, #260008 65%, #7d1234 98%);
  box-shadow: inset 0 2px #ff7492, inset 0 -2px #ff5277;
}
.about-hero img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; }
.about-hero > div { padding: .7vw 3vw 1.5vw; align-self: center; text-align: center; }
.about-hero h1 { font-size: clamp(1.8rem, 4.65vw, 6rem); line-height: 1.1; font-style: italic; }
.about-hero .about-brand { font-size: clamp(1rem, 2.55vw, 3rem); font-weight: bold; margin-block: .28em; }
.about-claim {
  display: inline-block;
  padding: .12em 1em;
  background: linear-gradient(#fff0c3, #edaf56);
  color: #3f070e;
  font-size: clamp(.95rem, 2.25vw, 2.7rem);
  font-weight: bold;
  font-style: italic;
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}
.petal-divider { width: 100%; aspect-ratio: 1920 / 91; min-height: 28px; background: #37111a url('/assets/about/petal.webp') center / cover; }
.about-panel {
  padding: .75% 5.5% 1.6%;
  background: radial-gradient(ellipse at 50% 90%, transparent 65%, #e7195a77 97%), radial-gradient(ellipse at 50% 0, #700b27, #310207 65%);
  box-shadow: inset 0 2px #e34877, inset 0 -2px #ea4278, inset 0 0 18px #ec266264;
}
.about-panel h2 { margin-bottom: .25em; }
.about-introduction > div, .about-team > div, .about-certification > div { display: grid; align-items: center; gap: 2.5%; }
.about-introduction > div { grid-template-columns: 1.57fr 1fr; }
.about-introduction h2 span { padding: .06em .75em; border-radius: 10px; color: #360500; background: linear-gradient(120deg, #ffecc0, #f6b13b); }
.about-introduction p { font-size: clamp(1rem, 1.4vw, 1.8rem); line-height: 1.55; text-indent: 2em; }
.about-framed { display: block; width: 100%; height: auto; border-radius: clamp(8px, 1.25vw, 24px); outline: 1px solid #ffce85; box-shadow: 0 0 10px #ffb16855; }
.about-team > div { grid-template-columns: 35% 1fr; }
.about-four { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2%; list-style: none; padding: 0; }
.about-four > li {
  padding: .28em .35em .45em;
  border: 1px solid #ed457c;
  border-bottom-color: #ffcfaa;
  border-radius: clamp(10px, 1.55vw, 30px);
  text-align: center;
  background: linear-gradient(#7b032a, #280305 70%, #450810);
  box-shadow: inset 0 1px 7px #ff5c9488;
}
.about-four .about-icon {
  display: block; width: clamp(25px, 4.12vw, 85px); height: clamp(24px, 3.45vw, 68px);
  object-fit: contain; margin: 0 auto; mix-blend-mode: lighten;
}
.about-four h3 { font-size: clamp(1rem, 1.7vw, 2rem); }
.about-four p { font-size: clamp(.85rem, 1.2vw, 1.5rem); line-height: 1.35; }
.about-certification > div { grid-template-columns: 23% 48% 1fr; }
.about-credentials { display: grid; gap: .2em; list-style: none; padding: 0; font-size: clamp(.85rem, 1.46vw, 1.75rem); }
.about-credentials li { border: 1px solid #d44668; border-radius: 999px; padding-inline: .25em; background: #3d070f; }
.about-credentials li::before {
  content: "✓"; display: inline-grid; place-content: center; margin-right: .35em;
  width: 1.23em; height: 1.23em; border-radius: 50%; font-family: system-ui,sans-serif;
  background: linear-gradient(#ff5795, #ed0042); color: #fff; box-shadow: 0 0 .25em #ff2477;
}
.about-trophy { text-align: center; }
.about-trophy img { display: block; width: 93%; height: auto; margin: auto; }
.about-trophy strong { display: block; padding: .2em; color: #5a2200; line-height: 1.05; font-size: clamp(.95rem, 2.25vw, 2.7rem); background: linear-gradient(100deg, #f8ae33, #ffe8ac 48%, #f8ae33); }
.about-field { position: relative; }
.about-field img { display: block; width: 100%; height: auto; }
.about-field figcaption {
  position: absolute; left: 28.4%; top: 63.5%; width: 45.3%; padding-block: .22em;
  text-align: center; color: #ffe178; font-family: system-ui,sans-serif;
  font-size: clamp(.55rem, 2.4vw, 2.9rem); font-weight: 800; line-height: 1.04;
  background: linear-gradient(125deg,#8f0d12,#dc241c 45%,#9b110f);
  transform: rotate(.6deg);
}
.about-advantages { padding-bottom: 2%; }
.about-advantages .about-four { gap: 3.1%; }
.about-guarantees {
  padding: 2.8% 4.7% 6%;
  font-family: system-ui, sans-serif;
  background: url('/assets/about/flower-left.webp') 6% 1% / 12% auto no-repeat, url('/assets/about/flower-right.webp') 94% 1% / 12% auto no-repeat,
    radial-gradient(ellipse at center, #5a1329, #300714);
  box-shadow: inset 0 1px 0 #a93758, inset 0 -5px 20px #fa2f7966;
}
.about-guarantees h2 { font-size: clamp(1.55rem, 3.1vw, 3.7rem); }
.about-subheading { text-align: center; font-weight: 700; color: #ffe2aa; font-size: clamp(1rem, 1.6vw, 1.9rem); padding-block: .75em 1.55em; }
.about-guarantee-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: clamp(.55rem, .95vw, 1.3rem) clamp(.75rem, 1.4vw, 1.8rem); }
.about-guarantee-grid > div {
  border: 1px solid #ea6996;
  border-bottom-color: #ffc98b;
  border-radius: clamp(.65rem, 1.35vw, 1.6rem);
  padding: clamp(.75rem, 1.5vw, 1.8rem);
  background: linear-gradient(#750724, #29060b 35%, #310608 80%, #480d1d);
}
.about-guarantee-grid h3 { font-size: clamp(1.02rem, 1.6vw, 2rem); }
.about-guarantee-grid h3 span { display: inline-block; font-size: 1.28em; margin-right: .7em; }
.about-guarantee-grid h4 { font-size: clamp(1.05rem, 1.85vw, 2.25rem); margin-block: .6em 1.45em; }
.about-guarantee-grid p { font-size: clamp(.87rem, 1.33vw, 1.55rem); line-height: 1.48; }
.about-video { grid-row: span 2; }
.about-video-cover { padding: 12% 0; }
.about-video-cover img { display: block; width: 100%; aspect-ratio: 2.55; height: auto; object-fit: cover; object-position: center 42%; border: 1px solid #fc7096; border-radius: .7em; }
.about-video-cover figcaption { font-size: .9rem; color: #ffe7d8; margin-top: .5em; }
.about-video h3:nth-of-type(2) { margin-bottom: .7em; }

@media (max-width: 760px) {
  .about-hero { grid-template-columns: 38% 62%; }
  .about-hero img { object-position: 56% center; }
  .about-hero > div { padding: .75rem .6rem; }
  .about-hero h1 { font-size: clamp(1.4rem, 5vw, 2.5rem); }
  .about-hero h1::before, .about-hero h1::after { margin-inline: .2em; }
  .about-claim { clip-path: none; font-style: normal; font-size: .86rem; }
  .about-panel { padding-block: .8rem 1rem; }
  .about-panel h2 { margin-bottom: .55em; }
  .about-introduction > div, .about-team > div, .about-certification > div { grid-template-columns: 1fr; gap: .85rem; }
  .about-team img, .about-introduction img, .about-certification img { max-width: 34rem; margin-inline: auto; }
  .about-four { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; }
  .about-trophy { max-width: 10rem; margin-inline: auto; }
  .about-guarantee-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about-video { grid-column: 1 / -1; grid-row: auto; }
  .about-video-cover { padding-block: .75rem; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .about-four > li { transition: transform .22s, box-shadow .22s; }
  .about-four > li:hover { transform: translateY(-4px); box-shadow: 0 0 20px #f95c8b66; }
}