/* =========================================================
   KRISHNA SOLAR ENERGY
   ABOUT PAGE
   Premium Solar Company UI
   ========================================================= */


/* =========================================================
   PAGE FOUNDATION
   ========================================================= */

.about-page {
    --about-blue: #0868c9;
    --about-blue-dark: #07539f;
    --about-navy: #071a2b;
    --about-green: #55b948;
    --about-amber: #f5a623;

    --about-text: #101820;
    --about-muted: #64748b;

    --about-border: #e2e8f0;
    --about-soft: #f5f8fb;
    --about-warm: #f7f8f6;

    --about-radius-sm: 8px;
    --about-radius-md: 14px;
    --about-radius-lg: 22px;
    --about-radius-xl: 30px;

    color: var(--about-text);
}


/* =========================================================
   COMMON ABOUT ELEMENTS
   ========================================================= */

.about-page .section-kicker,
.about-eyebrow,
.about-cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 16px;

    color: var(--about-blue);

    font-size: 12px;
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.about-page .section-kicker::before,
.about-eyebrow::before,
.about-cta-kicker::before {
    content: "";

    width: 25px;
    height: 2px;

    flex: 0 0 25px;

    border-radius: 20px;

    background: var(--about-green);
}


.about-page p {
    color: var(--about-muted);
}


.about-page .section-heading {
    max-width: 760px;
}


.about-page .section-heading h2 {
    margin-bottom: 16px;
}


.about-page .section-heading p {
    max-width: 690px;

    margin-bottom: 0;
}


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-hero {
    position: relative;

    overflow: hidden;

    padding: 78px 0 86px;

    background:
        linear-gradient(
            110deg,
            #f7fafc 0%,
            #f7fafc 54%,
            #edf5f9 100%
        );
}


.about-hero::after {
    content: "";

    position: absolute;

    right: -160px;
    bottom: -190px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(85, 185, 72, 0.07);

    pointer-events: none;
}


.about-hero-inner {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 72px;

    min-height: 570px;
}


.about-hero-content {
    min-width: 0;

    max-width: 650px;
}


.about-eyebrow {
    color: var(--about-green);

    margin-bottom: 19px;
}


.about-eyebrow::before {
    background: var(--about-blue);
}


.about-hero h1 {
    max-width: 650px;

    margin: 0 0 23px;

    color: var(--about-navy);

    font-size: clamp(48px, 5vw, 72px);

    font-weight: 750;

    line-height: 1.06;

    letter-spacing: -0.045em;
}


.about-hero-text {
    max-width: 590px;

    margin: 0;

    color: #536475;

    font-size: 18px;

    line-height: 1.75;
}


.about-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}


.about-hero-actions .btn {
    min-height: 50px;

    padding-left: 21px;
    padding-right: 21px;
}


.about-hero-visual {
    position: relative;

    min-width: 0;

    padding: 18px 0 34px 18px;
}


.about-hero-image-wrap {
    position: relative;

    overflow: hidden;

    width: 100%;

    aspect-ratio: 1.16 / 0.9;

    border-radius: var(--about-radius-xl);

    background: #dce8ee;

    box-shadow:
        0 28px 65px rgba(7, 26, 43, 0.14),
        0 5px 18px rgba(7, 26, 43, 0.06);
}


.about-hero-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(7, 26, 43, 0.04),
            transparent 45%,
            rgba(7, 26, 43, 0.08)
        );

    pointer-events: none;
}


.about-hero-image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


.about-hero-note {
    position: absolute;

    left: -2px;
    bottom: 0;

    display: flex;
    flex-direction: column;

    min-width: 190px;

    padding: 18px 21px;

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 16px 38px rgba(7, 26, 43, 0.13);

    backdrop-filter: blur(10px);
}


.about-hero-note strong {
    margin-bottom: 4px;

    color: var(--about-navy);

    font-size: 19px;
    font-weight: 800;

    line-height: 1.2;
}


.about-hero-note span {
    color: var(--about-muted);

    font-size: 12px;
    font-weight: 600;

    line-height: 1.45;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.about-introduction {
    background: #ffffff;
}


.about-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap: 90px;

    align-items: start;
}


.about-intro-heading {
    min-width: 0;
}


.about-intro-heading h2 {
    max-width: 520px;

    margin: 0;

    color: var(--about-navy);

    font-size: clamp(34px, 3.4vw, 49px);

    line-height: 1.13;

    letter-spacing: -0.035em;
}


.about-intro-content {
    min-width: 0;

    padding-top: 4px;
}


.about-intro-content p {
    max-width: 700px;

    margin: 0 0 20px;

    font-size: 16px;

    line-height: 1.8;
}


.about-intro-content p:last-child {
    margin-bottom: 0;
}


.about-intro-content .lead {
    margin-bottom: 22px;

    color: #33485a;

    font-size: 19px;

    line-height: 1.75;
}


/* =========================================================
   OUR APPROACH
   ========================================================= */

.about-approach {
    background: var(--about-warm);
}


.about-approach-heading {
    margin-bottom: 52px;
}


.about-approach-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;

    border-top: 1px solid var(--about-border);
}


.about-approach-item {
    min-width: 0;

    display: flex;
    flex-direction: column;

    min-height: 245px;

    padding: 30px 30px 25px;

    border-right: 1px solid var(--about-border);
}


.about-approach-item:first-child {
    padding-left: 0;
}


.about-approach-item:last-child {
    padding-right: 0;

    border-right: 0;
}


.about-approach-number {
    display: block;

    margin-bottom: 48px;

    color: var(--about-blue);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.08em;
}


.about-approach-item h3 {
    margin: 0 0 10px;

    color: var(--about-navy);

    font-size: 22px;
    line-height: 1.25;
}


.about-approach-item p {
    max-width: 255px;

    margin: 0;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   SERVICES
   ========================================================= */

.about-services {
    background: #ffffff;
}


.about-services-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap: 90px;
}


.about-services-content {
    min-width: 0;

    max-width: 530px;
}


.about-services-content h2 {
    margin: 0 0 18px;

    color: var(--about-navy);

    font-size: clamp(34px, 3.3vw, 48px);

    line-height: 1.12;

    letter-spacing: -0.035em;
}


.about-services-content p {
    max-width: 510px;

    margin: 0 0 28px;

    font-size: 16px;

    line-height: 1.8;
}


.about-services-list {
    min-width: 0;

    border-top: 1px solid var(--about-border);
}


.about-service-row {
    display: grid;

    grid-template-columns: 56px minmax(0, 1fr) 32px;

    align-items: center;

    gap: 18px;

    min-height: 118px;

    padding: 20px 0;

    border-bottom: 1px solid var(--about-border);

    color: inherit;

    text-decoration: none;

    transition:
        padding 180ms ease,
        background-color 180ms ease;
}


.about-service-row:hover {
    padding-left: 12px;
    padding-right: 12px;

    background: #f8fafc;
}


.about-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 1px solid #d9e4ec;
    border-radius: 50%;

    color: var(--about-blue);

    background: #f8fbfd;

    font-size: 12px;
    font-weight: 800;
}


.about-service-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.about-service-copy strong {
    color: var(--about-navy);

    font-size: 18px;
    font-weight: 750;

    line-height: 1.35;
}


.about-service-copy small {
    color: var(--about-muted);

    font-size: 14px;

    line-height: 1.55;
}


.about-service-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--about-blue);

    font-size: 23px;

    transition: transform 180ms ease;
}


.about-service-row:hover .about-service-arrow {
    transform: translateX(4px);
}


/* =========================================================
   DIFFERENCE / COMMITMENT
   ========================================================= */

.about-difference {
    background: var(--about-soft);
}


.about-difference-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(0, 0.88fr);

    gap: 80px;

    align-items: stretch;
}


.about-difference-content {
    min-width: 0;
}


.about-difference-content h2 {
    max-width: 700px;

    margin: 0 0 18px;

    color: var(--about-navy);

    font-size: clamp(34px, 3.5vw, 50px);

    line-height: 1.12;

    letter-spacing: -0.035em;
}


.about-difference-content > p {
    max-width: 670px;

    margin: 0 0 28px;

    font-size: 16px;

    line-height: 1.8;
}


.about-check-list {
    display: flex;
    flex-direction: column;

    gap: 13px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.about-check-list li {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    color: #34495a;

    font-size: 15px;

    line-height: 1.55;
}


.about-check-list li > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    margin-top: 1px;

    border-radius: 50%;

    color: #ffffff;

    background: var(--about-green);

    font-size: 12px;
    font-weight: 800;
}


.about-difference-panel {
    position: relative;

    overflow: hidden;

    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-height: 390px;

    padding: 42px;

    border-radius: var(--about-radius-xl);

    background: var(--about-navy);

    box-shadow: 0 24px 55px rgba(7, 26, 43, 0.14);
}


.about-difference-panel::before {
    content: "";

    position: absolute;

    top: -120px;
    right: -120px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.09);

    pointer-events: none;
}


.about-difference-panel::after {
    content: "";

    position: absolute;

    right: 55px;
    bottom: -150px;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: rgba(85, 185, 72, 0.09);

    pointer-events: none;
}


.about-difference-panel-top {
    position: relative;

    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 50px;
}


.about-panel-label {
    color: #8ea4b7;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.about-panel-year {
    color: var(--about-green);

    font-size: 14px;
    font-weight: 800;
}


.about-difference-panel h3 {
    position: relative;

    z-index: 1;

    max-width: 440px;

    margin: 0 0 15px;

    color: #ffffff;

    font-size: clamp(27px, 3vw, 38px);

    line-height: 1.16;

    letter-spacing: -0.025em;
}


.about-difference-panel > p {
    position: relative;

    z-index: 1;

    max-width: 470px;

    margin: 0;

    color: #b8c7d3;

    font-size: 15px;

    line-height: 1.75;
}


.about-panel-line {
    position: relative;

    z-index: 1;

    width: 50px;
    height: 2px;

    margin: 27px 0;

    border-radius: 20px;

    background: var(--about-green);
}


.about-difference-panel .about-panel-location {
    font-size: 13px;

    line-height: 1.7;
}


.about-panel-location strong {
    color: #ffffff;
    font-weight: 700;
}


/* =========================================================
   SERVICE AREAS
   ========================================================= */

.about-service-areas {
    background: #ffffff;
}


.about-area-list {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;

    border-top: 1px solid var(--about-border);
    border-bottom: 1px solid var(--about-border);
}


.about-area-item {
    display: flex;
    align-items: center;

    gap: 20px;

    min-width: 0;

    min-height: 118px;

    padding: 22px 25px;

    border-right: 1px solid var(--about-border);
}


.about-area-item:first-child {
    padding-left: 0;
}


.about-area-item:last-child {
    padding-right: 0;

    border-right: 0;
}


.about-area-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 50%;

    background: #edf6fc;

    color: var(--about-blue);

    font-size: 11px;
    font-weight: 800;
}


.about-area-item div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.about-area-item strong {
    color: var(--about-navy);

    font-size: 16px;
    font-weight: 750;

    line-height: 1.35;
}


.about-area-item span:last-child {
    color: var(--about-muted);

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.about-cta {
    padding: 30px 0 100px;

    background: #ffffff;
}


.about-cta-inner {
    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;

    padding: 54px 60px;

    border-radius: var(--about-radius-xl);

    background:
        linear-gradient(
            110deg,
            #071a2b 0%,
            #0b2a42 100%
        );

    box-shadow: 0 22px 55px rgba(7, 26, 43, 0.13);
}


.about-cta-inner::after {
    content: "";

    position: absolute;

    right: -100px;
    top: -180px;

    width: 380px;
    height: 380px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


.about-cta-content {
    position: relative;

    z-index: 1;

    min-width: 0;
}


.about-cta-kicker {
    margin-bottom: 13px;

    color: #8fd685;
}


.about-cta-kicker::before {
    background: var(--about-amber);
}


.about-cta h2 {
    max-width: 700px;

    margin: 0 0 13px;

    color: #ffffff;

    font-size: clamp(30px, 3.5vw, 47px);

    line-height: 1.12;

    letter-spacing: -0.035em;
}


.about-cta p {
    margin: 0;

    color: #b9c9d5;

    font-size: 16px;

    line-height: 1.65;
}


.about-cta-actions {
    position: relative;

    z-index: 1;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

    flex: 0 0 auto;
}


.about-cta-actions .btn {
    min-height: 50px;

    white-space: nowrap;
}


.about-cta-actions .btn-primary {
    background: var(--about-green);

    border-color: var(--about-green);

    box-shadow: 0 10px 24px rgba(85, 185, 72, 0.18);
}


.about-cta-actions .btn-primary:hover {
    background: #479f3c;

    border-color: #479f3c;
}


.about-cta-actions .btn-secondary {
    color: #ffffff;

    background: transparent;

    border-color: rgba(255, 255, 255, 0.28);
}


.about-cta-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.5);
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1600px) {

    .about-hero {
        padding-top: 92px;
        padding-bottom: 98px;
    }

    .about-hero-inner {
        gap: 95px;

        min-height: 600px;
    }

    .about-intro-grid,
    .about-services-layout {
        gap: 110px;
    }

    .about-difference-grid {
        gap: 100px;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (max-width: 1399px) {

    .about-hero-inner {
        gap: 55px;
    }

    .about-intro-grid,
    .about-services-layout {
        gap: 65px;
    }

    .about-difference-grid {
        gap: 60px;
    }

    .about-cta-inner {
        padding: 50px 52px;
    }

}


/* =========================================================
   SMALL DESKTOP / LARGE TABLET
   ========================================================= */

@media (max-width: 1199px) {

    .about-hero {
        padding-top: 68px;
        padding-bottom: 76px;
    }

    .about-hero-inner {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        gap: 42px;

        min-height: 520px;
    }

    .about-hero h1 {
        font-size: clamp(44px, 5vw, 60px);
    }

    .about-hero-text {
        font-size: 17px;
    }

    .about-intro-grid,
    .about-services-layout {
        gap: 50px;
    }

    .about-approach-item {
        padding-left: 22px;
        padding-right: 22px;
    }

    .about-approach-item:first-child {
        padding-left: 0;
    }

    .about-approach-item:last-child {
        padding-right: 0;
    }

    .about-difference-grid {
        gap: 45px;
    }

    .about-difference-panel {
        padding: 35px;
    }

    .about-area-item {
        padding-left: 18px;
        padding-right: 18px;
    }

    .about-area-item:first-child {
        padding-left: 0;
    }

    .about-area-item:last-child {
        padding-right: 0;
    }

    .about-cta-inner {
        padding: 46px 44px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .about-hero {
        padding: 62px 0 70px;
    }

    .about-hero-inner {
        grid-template-columns: 1fr;

        gap: 48px;

        min-height: 0;
    }

    .about-hero-content {
        max-width: 720px;
    }

    .about-hero h1 {
        max-width: 700px;

        font-size: clamp(44px, 7vw, 60px);
    }

    .about-hero-text {
        max-width: 650px;
    }

    .about-hero-visual {
        max-width: 760px;

        width: 100%;

        margin: 0 auto;

        padding-left: 18px;
    }

    .about-hero-image-wrap {
        aspect-ratio: 1.4 / 0.82;
    }

    .about-intro-grid,
    .about-services-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-intro-heading h2,
    .about-services-content h2 {
        max-width: 700px;
    }

    .about-intro-content {
        padding-top: 0;
    }

    .about-approach-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .about-approach-item {
        min-height: 220px;

        border-bottom: 1px solid var(--about-border);
    }

    .about-approach-item:nth-child(2) {
        border-right: 0;
    }

    .about-approach-item:nth-child(3) {
        padding-left: 0;
    }

    .about-approach-item:nth-child(4) {
        padding-right: 0;

        border-right: 0;
    }

    .about-difference-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-difference-panel {
        max-width: 760px;

        min-height: 350px;
    }

    .about-area-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .about-area-item {
        border-bottom: 1px solid var(--about-border);
    }

    .about-area-item:nth-child(2) {
        border-right: 0;
    }

    .about-area-item:nth-child(3) {
        padding-left: 0;

        border-bottom: 0;
    }

    .about-area-item:nth-child(4) {
        padding-right: 0;

        border-right: 0;

        border-bottom: 0;
    }

    .about-cta-inner {
        align-items: flex-start;

        flex-direction: column;

        gap: 28px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .about-hero {
        padding: 48px 0 55px;
    }

    .about-hero-inner {
        gap: 36px;
    }

    .about-page .section-kicker,
    .about-eyebrow,
    .about-cta-kicker {
        margin-bottom: 13px;

        font-size: 11px;

        letter-spacing: 0.11em;
    }

    .about-hero h1 {
        margin-bottom: 18px;

        font-size: clamp(35px, 9vw, 48px);

        letter-spacing: -0.035em;
    }

    .about-hero-text {
        font-size: 16px;

        line-height: 1.7;
    }

    .about-hero-actions {
        width: 100%;

        flex-direction: column;

        align-items: stretch;

        margin-top: 25px;
    }

    .about-hero-actions .btn {
        width: 100%;
    }

    .about-hero-visual {
        padding: 8px 0 34px 8px;
    }

    .about-hero-image-wrap {
        aspect-ratio: 1.08 / 0.88;

        border-radius: 21px;
    }

    .about-hero-note {
        left: 0;

        min-width: 170px;

        padding: 15px 17px;

        border-radius: 11px;
    }

    .about-hero-note strong {
        font-size: 17px;
    }

    .about-hero-note span {
        font-size: 11px;
    }

    .about-intro-content .lead {
        font-size: 17px;

        line-height: 1.7;
    }

    .about-intro-content p {
        font-size: 15px;

        line-height: 1.75;
    }

    .about-approach-heading {
        margin-bottom: 34px;
    }

    .about-approach-grid {
        grid-template-columns: 1fr;
    }

    .about-approach-item,
    .about-approach-item:first-child,
    .about-approach-item:nth-child(3),
    .about-approach-item:last-child {
        min-height: 0;

        padding: 25px 0;

        border-right: 0;
        border-bottom: 1px solid var(--about-border);
    }

    .about-approach-item:last-child {
        border-bottom: 0;
    }

    .about-approach-number {
        margin-bottom: 27px;
    }

    .about-approach-item p {
        max-width: 100%;
    }

    .about-services-content p {
        font-size: 15px;

        line-height: 1.75;
    }

    .about-service-row {
        grid-template-columns: 47px minmax(0, 1fr) 25px;

        gap: 13px;

        min-height: 105px;

        padding: 16px 0;
    }

    .about-service-row:hover {
        padding-left: 0;
        padding-right: 0;

        background: transparent;
    }

    .about-service-icon {
        width: 42px;
        height: 42px;

        font-size: 10px;
    }

    .about-service-copy strong {
        font-size: 16px;
    }

    .about-service-copy small {
        font-size: 12px;

        line-height: 1.5;
    }

    .about-service-arrow {
        font-size: 20px;
    }

    .about-difference-grid {
        gap: 35px;
    }

    .about-difference-content > p {
        font-size: 15px;

        line-height: 1.75;
    }

    .about-check-list {
        gap: 12px;
    }

    .about-check-list li {
        font-size: 14px;
    }

    .about-difference-panel {
        min-height: 0;

        padding: 31px 25px;

        border-radius: 20px;
    }

    .about-difference-panel-top {
        margin-bottom: 37px;
    }

    .about-difference-panel h3 {
        font-size: 29px;
    }

    .about-difference-panel > p {
        font-size: 14px;

        line-height: 1.7;
    }

    .about-area-list {
        grid-template-columns: 1fr;
    }

    .about-area-item,
    .about-area-item:first-child,
    .about-area-item:nth-child(3),
    .about-area-item:last-child {
        min-height: 88px;

        padding: 17px 0;

        border-right: 0;

        border-bottom: 1px solid var(--about-border);
    }

    .about-area-item:last-child {
        border-bottom: 0;
    }

    .about-cta {
        padding: 12px 0 58px;
    }

    .about-cta-inner {
        gap: 26px;

        padding: 34px 23px;

        border-radius: 20px;
    }

    .about-cta h2 {
        font-size: clamp(29px, 8vw, 39px);
    }

    .about-cta p {
        font-size: 14px;
    }

    .about-cta-actions {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }

    .about-cta-actions .btn {
        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .about-hero {
        padding-top: 42px;
        padding-bottom: 48px;
    }

    .about-hero-inner {
        gap: 31px;
    }

    .about-hero h1 {
        font-size: clamp(33px, 9.5vw, 43px);
    }

    .about-hero-text {
        font-size: 15px;
    }

    .about-hero-visual {
        padding-left: 5px;
        padding-bottom: 31px;
    }

    .about-hero-image-wrap {
        aspect-ratio: 1 / 0.94;

        border-radius: 18px;
    }

    .about-hero-note {
        min-width: 155px;

        padding: 13px 15px;
    }

    .about-hero-note strong {
        font-size: 16px;
    }

    .about-hero-note span {
        font-size: 10px;
    }

    .about-intro-content .lead {
        font-size: 16px;
    }

    .about-service-row {
        grid-template-columns: 42px minmax(0, 1fr) 22px;

        gap: 11px;
    }

    .about-service-icon {
        width: 39px;
        height: 39px;
    }

    .about-service-copy strong {
        font-size: 15px;
    }

    .about-service-copy small {
        font-size: 11px;
    }

    .about-difference-panel {
        padding: 27px 20px;

        border-radius: 17px;
    }

    .about-difference-panel-top {
        margin-bottom: 31px;
    }

    .about-difference-panel h3 {
        font-size: 27px;
    }

    .about-cta-inner {
        padding: 30px 19px;
    }

}


/* =========================================================
   414px
   ========================================================= */

@media (max-width: 414px) {

    .about-hero {
        padding-top: 38px;
    }

    .about-hero h1 {
        font-size: 34px;

        line-height: 1.12;
    }

    .about-hero-actions {
        gap: 9px;
    }

    .about-hero-actions .btn {
        min-height: 47px;

        padding-left: 15px;
        padding-right: 15px;
    }

    .about-hero-note {
        min-width: 146px;
    }

    .about-service-row {
        grid-template-columns: 39px minmax(0, 1fr) 19px;

        gap: 9px;
    }

    .about-service-copy small {
        max-width: 220px;
    }

    .about-area-item {
        gap: 15px;
    }

    .about-area-number {
        width: 39px;
        height: 39px;

        flex-basis: 39px;
    }

}


/* =========================================================
   390px
   ========================================================= */

@media (max-width: 390px) {

    .about-hero h1 {
        font-size: 32px;
    }

    .about-hero-text {
        font-size: 14px;
    }

    .about-hero-note {
        min-width: 140px;

        padding: 12px 13px;
    }

    .about-hero-note strong {
        font-size: 15px;
    }

    .about-hero-note span {
        font-size: 9.5px;
    }

    .about-service-copy strong {
        font-size: 14px;
    }

    .about-service-copy small {
        font-size: 10.5px;
    }

    .about-difference-panel {
        padding: 25px 18px;
    }

}


/* =========================================================
   375px
   ========================================================= */

@media (max-width: 375px) {

    .about-hero h1 {
        font-size: 31px;
    }

    .about-hero-image-wrap {
        border-radius: 16px;
    }

    .about-hero-note {
        min-width: 134px;
    }

    .about-hero-note strong {
        font-size: 14px;
    }

    .about-service-row {
        grid-template-columns: 36px minmax(0, 1fr) 17px;

        gap: 8px;
    }

    .about-service-icon {
        width: 36px;
        height: 36px;
    }

    .about-service-copy strong {
        font-size: 13.5px;
    }

    .about-service-copy small {
        font-size: 10px;
    }

}


/* =========================================================
   359px
   ========================================================= */

@media (max-width: 359px) {

    .about-hero h1 {
        font-size: 30px;
    }

    .about-hero-text {
        font-size: 13.5px;
    }

    .about-hero-visual {
        padding-left: 2px;
    }

    .about-hero-note {
        min-width: 128px;

        padding: 11px 12px;
    }

    .about-hero-note strong {
        font-size: 13px;
    }

    .about-hero-note span {
        font-size: 9px;
    }

    .about-difference-panel {
        padding: 23px 16px;
    }

    .about-difference-panel h3 {
        font-size: 25px;
    }

    .about-cta-inner {
        padding: 27px 16px;
    }

}


/* =========================================================
   LANDSCAPE MOBILE / TABLET
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

    .about-hero {
        padding-top: 42px;
        padding-bottom: 48px;
    }

    .about-hero-inner {
        gap: 30px;
    }

    .about-hero-image-wrap {
        aspect-ratio: 1.65 / 0.8;
    }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about-page *,
    .about-page *::before,
    .about-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}