.about-reference{
    --about-gold:#f2ab00;
    --about-ink:#111516;
    --about-copy:#151817;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    width:100%;
    min-height:900px;
    padding-block:var(--section-space-y);
    background:#faf9f6;
    color:var(--about-copy);
}

.about-reference__inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(500px,.95fr);
    grid-template-areas:
        "copy media"
        "cta cta";
    align-items:center;
    column-gap:52px;
    row-gap:31px;
    width:min(100%,1400px);
    min-height:0;
    margin-inline:auto;
    padding:0 0 0 36px;
}

.about-reference__copy{grid-area:copy;min-width:0;max-width:930px}
.about-reference__heading{max-width:880px}
.about-reference__eyebrow{
    margin:0 0 25px;
    color:#dd9400;
    font-family:Poppins,Arial,sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.35px;
    text-transform:uppercase;
}

.about-reference__heading h2{
    margin:0;
    color:#0d1010;
    font-family:Sora,Poppins,sans-serif;
    font-size:var(--type-section-title);
    font-weight:760;
    line-height:1.12;
    letter-spacing:-1.7px;
    text-transform:none;
    text-wrap:balance;
}

.about-reference__heading h2 strong{color:var(--about-gold);font-weight:790}
.about-reference__signal{display:flex;align-items:center;gap:16px;width:142px;height:28px;margin:25px 0 20px}
.about-reference__signal::before{
    content:"";
    width:50px;
    height:26px;
    flex:0 0 50px;
    background:var(--about-gold);
    transform:skewX(-29deg);
}
.about-reference__signal i{display:block;width:72px;height:2px;background:var(--about-gold)}

.about-reference__body{max-width:735px}
.about-reference__body p{
    margin:0 0 19px;
    color:#202322;
    font-size:var(--type-section-copy);
    font-weight:500;
    line-height:1.48;
}
.about-reference__body p:last-child{margin-bottom:0}

.about-reference__benefits{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    width:100%;
    margin:25px 0 0;
    padding:0;
    list-style:none;
}

.about-reference__benefit{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
    min-height:144px;
    padding:18px 11px 14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius-ui);
    background:linear-gradient(145deg,#171b1c 0%,#090d0e 82%);
    box-shadow:0 7px 13px rgba(0,0,0,.2);
    color:#fff;
    text-align:center;
}
.about-reference__benefit::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at 50% 4%,rgba(242,171,0,.08),transparent 48%);
}
.about-reference__benefit-icon{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    margin-bottom:10px;
    color:var(--about-gold);
}
.about-reference__icon{display:block;width:38px;height:38px}
.about-reference__icon--custom [stroke="#000000"]{stroke:currentColor}
.about-reference__icon--custom [fill="#000000"][stroke="none"]{fill:currentColor}
.about-reference__benefit-title{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    min-height:40px;
    color:#fff;
    font-family:Poppins,Arial,sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:1.32;
    text-wrap:balance;
}
.about-reference__cta{
    grid-area:cta;
    position:relative;
    display:grid;
    grid-template-columns:240px minmax(280px,1fr) minmax(280px,320px);
    align-items:center;
    width:100%;
    min-height:var(--section-cta-height);
    margin-top:0;
    overflow:hidden;
    border:0;
    border-radius:var(--radius-ui);
    background:linear-gradient(105deg,#121617 0%,#080b0c 100%);
    color:#fff;
    transition:box-shadow .24s ease,transform .24s ease;
}
.about-reference__cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(29,24,12,.13)}
.about-reference__cta-mark{
    position:relative;
    align-self:stretch;
    display:grid;
    place-items:center;
    min-width:0;
    overflow:hidden;
}
.about-reference__cta-mark::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:128px;
    background:linear-gradient(135deg,#ffc11f,var(--about-gold));
    clip-path:polygon(0 0,100% 0,48% 100%,0 100%);
}
.about-reference__cta-mark::after{
    content:"";
    position:absolute;
    top:-43px;
    right:26px;
    width:2px;
    height:190px;
    background:var(--about-gold);
    transform:rotate(31deg);
    transform-origin:center;
}
.about-reference__cta-icon{position:absolute;z-index:1;top:50%;left:64px;display:grid;place-items:center;margin:0;color:#111516;transform:translate(-50%,-50%)}
.about-reference__zap{display:block;width:32px;height:32px}
.about-reference__cta-copy{display:flex;align-items:center;padding:18px 34px;color:#f2f2ed;font-size:16px;font-weight:500;line-height:1.45}
.about-reference__cta-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:54px;
    margin:16px 18px 16px 0;
    padding:12px 24px 12px 28px;
    border:0;
    border-radius:var(--radius-ui);
    background:linear-gradient(135deg,#ffc11f,var(--about-gold));
    color:#121514;
}
.about-reference__cta-button strong{font-family:Sora,Poppins,sans-serif;font-size:16px;font-weight:760;line-height:1.25}
.about-reference__cta-arrow{
    display:grid;
    place-items:center;
    flex:0 0 24px;
    color:#121514;
}
.about-reference__arrow{display:block;width:23px;height:23px;transition:transform .22s ease}
.about-reference__cta:hover .about-reference__arrow{transform:translateX(5px)}

.about-reference__media{
    grid-area:media;
    position:relative;
    align-self:center;
    width:100%;
    height:min(720px,74vw);
    min-height:660px;
    margin:0;
    background:var(--about-gold);
    clip-path:polygon(20% 0,100% 0,100% 100%,23% 100%,0 70%,0 27%);
}
.about-reference__media picture{
    position:absolute;
    inset:5px;
    display:block;
    overflow:hidden;
    background:#111;
    clip-path:polygon(20% 0,100% 0,100% 100%,23% 100%,0 70%,0 27%);
}
.about-reference__image{width:100%;height:100%;object-fit:cover;object-position:48% center}

.about-reference__ornament{
    position:absolute;
    z-index:1;
    overflow:visible;
    pointer-events:none;
    fill:none;
    stroke:rgba(230,156,0,.72);
    stroke-width:1.25;
    vector-effect:non-scaling-stroke;
}
.about-reference__ornament--top{top:-3px;left:59%;width:330px;height:300px}
.about-reference__ornament--bottom{right:25%;bottom:-9px;width:245px;height:275px}

@media (max-width:1450px){
    .about-reference__inner{grid-template-columns:minmax(0,1.48fr) minmax(455px,.92fr);gap:38px;padding-left:30px}
    .about-reference__copy{max-width:860px}
    .about-reference__heading h2{font-size:var(--type-section-title)}
    .about-reference__body{max-width:690px}
    .about-reference__body p{font-size:var(--type-section-copy)}
    .about-reference__benefits{gap:10px}
    .about-reference__benefit{min-height:140px;padding:17px 9px 13px}
    .about-reference__benefit-title{font-size:16px}
    .about-reference__cta{grid-template-columns:205px minmax(250px,1fr) minmax(250px,285px)}
    .about-reference__cta-mark::before{width:98px}
    .about-reference__cta-mark::after{right:28px}
    .about-reference__cta-icon{left:calc(50% + 22px)}
    .about-reference__cta-copy{padding-inline:24px;font-size:16px}
    .about-reference__cta-button{padding-inline:22px}
}

@media (max-width:1120px){
    .about-reference{min-height:0}
    .about-reference__inner{grid-template-columns:1fr;grid-template-areas:"copy" "media" "cta";min-height:0;padding:0 32px;column-gap:0;row-gap:31px}
    .about-reference__copy{max-width:none}
    .about-reference__heading,.about-reference__body{max-width:850px}
    .about-reference__body p{font-size:var(--type-section-copy)}
    .about-reference__benefits{grid-template-columns:repeat(5,minmax(130px,1fr));overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
    .about-reference__benefit{scroll-snap-align:start}
    .about-reference__media{width:min(100%,820px);height:auto;min-height:0;margin-top:17px;aspect-ratio:4/3;justify-self:center}
    .about-reference__ornament--top{top:auto;bottom:34%;left:auto;right:2%}
    .about-reference__ornament--bottom{display:none}
}

@media (max-width:760px){
    .about-reference__inner{padding:0 22px;row-gap:24px}
    .about-reference__heading{text-align:center}
    .about-reference__eyebrow{margin-bottom:19px;font-size:14px}
    .about-reference__heading h2{font-size:var(--type-section-title);line-height:1.15;letter-spacing:-1.1px}
    .about-reference__signal{justify-content:center;margin:22px auto 20px}
    .about-reference__body{text-align:center}
    .about-reference__body p{font-size:var(--type-section-copy);line-height:1.58}
    .about-reference__benefits{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:10px}
    .about-reference__benefit{min-height:138px}
    .about-reference__cta{grid-template-columns:84px 1fr;margin-top:0}
    .about-reference__cta-mark{grid-column:1;grid-row:1}
    .about-reference__cta-mark::before{width:47px}
    .about-reference__cta-mark::after{top:-28px;right:2px;height:150px}
    .about-reference__cta-icon{left:calc(50% + 16px)}
    .about-reference__cta-copy{grid-column:2;grid-row:1;padding:20px 18px;text-align:left}
    .about-reference__cta-button{grid-column:1/-1;grid-row:2;width:calc(100% - 28px);min-height:52px;margin:0 14px 14px;padding-inline:20px}
    .about-reference__media{margin-top:14px;aspect-ratio:3/4;clip-path:polygon(14% 0,100% 0,100% 100%,18% 100%,0 76%,0 20%)}
    .about-reference__media picture{clip-path:polygon(14% 0,100% 0,100% 100%,18% 100%,0 76%,0 20%)}
    .about-reference__image{object-position:50% center}
    .about-reference__ornament--top{display:none}
}

@media (max-width:430px){
    .about-reference__inner{padding-inline:17px}
    .about-reference__benefit{min-height:132px}
    .about-reference__benefit:last-child{grid-column:1/-1}
    .about-reference__cta-copy{font-size:16px}
}

@media print{
    .about-reference__ornament{display:none!important}
}