:root{
    --tp-navy:#0C1927;
    --tp-gold:#B78C50;
    --tp-gold-light:#CAAA7D;
    --tp-cream:#f9f7f2;
    --tp-text:#333;
    --tp-muted:#666;
    --tp-white:#ffffff;
    --tp-radius:12px;
    --tp-shadow:0 12px 40px rgba(12, 25, 39, 0.08);
    --font-body:'Inter',system-ui,sans-serif;
    --font-heading:'Playfair Display',Georgia,serif;
}
.padding-section{
    padding:90px 0;
}
.about-eyebrow{
    font-family:var(--font-body);
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--tp-gold);
    margin-bottom:12px;
}
.about-section-title{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:clamp(1.75rem, 3.5vw, 2.4rem);
    color:var(--tp-navy);
    line-height:1.25;
    margin-bottom:18px;
}
.about-lead{
    font-size:1.1rem;
    color:var(--tp-muted);
    max-width:620px;
    line-height:1.65;
}
.about-text{
    font-size:1.05rem;
    color:var(--tp-text);
    line-height:1.75;
    margin-bottom:1rem;
}
.btn-about-primary{
    display:inline-block;
    background:var(--tp-gold);
    color:var(--tp-white)!important;
    font-weight:600;
    font-size:.95rem;
    padding:14px 28px;
    border-radius:8px;
    border:2px solid var(--tp-gold);
    text-decoration:none;
    transition:background .25s ease,transform .2s ease,box-shadow .25s ease;
}
.btn-about-primary:hover{
    background:#a67a42;
    border-color:#a67a42;
    color:var(--tp-white)!important;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(183,140,80,.35);
}
.btn-about-outline{
    display:inline-block;
    background:0 0;
    color:var(--tp-navy)!important;
    font-weight:600;
    font-size:.95rem;
    padding:14px 28px;
    border-radius:8px;
    border:2px solid var(--tp-navy);
    text-decoration:none;
    transition:all .25s ease;
}
.btn-about-outline:hover{
    background:var(--tp-navy);
    color:var(--tp-white)!important;
}
.btn-about-outline-light{
    display:inline-block;
    background:0 0;
    color: #0C1927 !important;
    font-weight:600;
    font-size:.95rem;
    padding:14px 28px;
    border-radius:8px;
    border:2px solid var(--tp-gold);
    text-decoration:none;
    transition:all .25s ease;
}
.btn-about-outline-light:hover{
    background: #0c1927;
    color:var(--tp-navy)!important;
    border-color:var(--tp-white);
}
.about-hero{
    background-image: linear-gradient(rgba(12,25,39,.5),rgba(12,25,39,.5)),url(/images/about-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding:110px 0 100px;
    position:relative;
    overflow:hidden;
}
.about-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 80% 20%,rgba(183,140,80,.18) 0,transparent 55%);
    pointer-events:none;
    }
    .about-hero-content{
        position:relative;
        text-align: center;
    }
    .about-hero .about-eyebrow{
        color:var(--tp-gold-light);
    }
    .about-hero-title{
        font-family:var(--font-heading);
        font-weight:700;
        font-size:clamp(2.2rem, 5vw, 3.4rem);
        color:var(--tp-white);
        line-height:1.15;
        margin-bottom:20px;
    }
    .about-hero-sub{
        font-size:1.15rem;
        color:rgba(255,255,255,.85);
        line-height:1.7;
        margin-bottom:32px;
        padding-left: 150px;
        padding-right: 150px;
    }
    .about-hero-actions{
        display:flex;
        flex-wrap:nowrap;
        justify-content: center;
        gap:14px;
    }
    .about-hero .btn-about-outline{
        border-color:rgba(255,255,255,.7);
        color:var(--tp-white)!important;
    }
    .about-hero .btn-about-outline:hover{
        background:var(--tp-white);
        color:var(--tp-navy)!important;
        border-color:var(--tp-white);
    }
    .about-story{
        background:var(--tp-white);
    }
    .about-story-img-wrap{
        position:relative;
    }
    .about-story-img{
        width:100%;
        border-radius:var(--tp-radius);
        box-shadow:var(--tp-shadow);
        display:block;
    }
    .about-story-accent{
        position:absolute;
        width:120px;
        height:120px;
        background:var(--tp-gold);
        opacity:.15;
        border-radius:50%;
        bottom:-24px;
        left:-24px;
        z-index:-1;
    }
    .about-stats{
        background:var(--tp-cream);
        padding:60px 0;
        border-top:1px solid rgba(183,140,80,.15);
        border-bottom:1px solid rgba(183,140,80,.15);
    }
    .stat-card{
        padding:12px 8px;
    }
    .stat-number,.stat-suffix{
        font-family:var(--font-heading);
        font-weight:700;
        font-size:clamp(2rem, 4vw, 2.8rem);
        color:var(--tp-gold);
        line-height:1;
    }
    .stat-label{
        font-size:.9rem;
        font-weight:500;
        color:var(--tp-navy);
        margin-top:8px;
        margin-bottom:0;
    }
    .about-values{
        background:var(--tp-white);
    }
    .value-card{
        background:var(--tp-cream);
        border-radius:var(--tp-radius);
        padding:36px 28px;
        height:100%;
        transition:transform .3s ease,box-shadow .3s ease;
        border:1px solid transparent;
    }
    .value-card:hover{
        transform:translateY(-6px);
        box-shadow:var(--tp-shadow);
        border-color:rgba(183,140,80,.25);
        border: 1px solid #B78C50;
        transition: 0.3s ease-in-out all;
    }
    .value-icon{
        width:56px;
        height:56px;
        border-radius:50%;
        background:rgba(183,140,80,.15);
        color:var(--tp-gold);
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:1.35rem;
        margin-bottom:20px;
    }
    .value-card h3{
        font-family:var(--font-heading);
        font-size:1.35rem;
        color:var(--tp-navy);
        margin-bottom:12px;
    }
    .value-card p{
        color:var(--tp-muted);
        line-height:1.65;
        margin:0;
        font-size:.98rem;
    }
    .about-services{
        background:var(--tp-cream);
    }
    .service-card{
        background:var(--tp-white);
        border-radius:var(--tp-radius);
        padding:28px 22px;
        height:100%;
        text-align:center;
        transition:transform .3s ease,box-shadow .3s ease;
        border:1px solid rgba(12,25,39,.06);
    }
    .service-card:hover{
        transform:translateY(-5px);
        box-shadow:var(--tp-shadow);
        border-radius: 15px;
        border-color: rgba(183, 140, 80, .25);
        border: 1px solid #B78C50;
        transition: 0.3s ease-in-out all;
    }
    .service-icon{
        width:52px;
        height:52px;
        margin:0 auto 16px;
        border-radius:12px;
        background:rgba(183,140,80,.12);
        color:var(--tp-gold);
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:1.25rem;
    }
    .service-card h4{
        font-family:var(--font-body);
        font-weight:600;
        font-size:1.05rem;
        color:var(--tp-navy);
        margin-bottom:8px;
    }
    .service-card p{
        font-size:.9rem;
        color:var(--tp-muted);
        line-height:1.55;
        margin:0;
    }
    .about-why{
        background:var(--tp-white);
    }
    .about-why-img{
        width:100%;
        border-radius:var(--tp-radius);
        display:block;
    }
    .about-why-list{
        list-style:none;
        padding:0;
        margin:20px 0 0;
    }
    .about-why-list li{
        display:flex;
        align-items:flex-start;
        gap:12px;
        font-size:1.05rem;
        color:var(--tp-text);
        margin-bottom:12px;
        line-height:1.5;
    }
    .about-why-list i{
        color:var(--tp-gold);
        margin-top:4px;
        flex-shrink:0;
    }
    .about-process{
        background:radial-gradient(circle at top, rgba(183,140,80,.14), transparent 38%), var(--tp-cream);
    }
    .process-timeline{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:28px;
        position:relative;
        perspective:1200px;
        isolation:isolate;
    }
    .process-timeline::before{
        content:'';
        position:absolute;
        top:42px;
        left:8%;
        right:8%;
        height:3px;
        background:linear-gradient(90deg,var(--tp-navy),var(--tp-gold),var(--tp-gold-light),var(--tp-navy));
        opacity:.28;
        z-index:0;
        filter:blur(.5px);
    }
    .process-step{
        --pointer-x:50%;
        --pointer-y:50%;
        --tilt-x:0deg;
        --tilt-y:0deg;
        text-align:center;
        position:relative;
        z-index:1;
        padding:28px 22px 24px;
        min-height:250px;
        border-radius:28px;
        background:rgba(255,255,255,.8);
        border:1px solid rgba(12,25,39,.06);
        box-shadow:0 22px 50px rgba(12,25,39,.08);
        backdrop-filter:blur(8px);
        transform-style:preserve-3d;
        transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
        overflow:hidden;
        cursor:pointer;
    }
    .process-step::before{
        content:'';
        position:absolute;
        inset:0;
        background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(183,140,80,.28), transparent 34%);
        opacity:0;
        transition:opacity .25s ease;
        pointer-events:none;
    }
    .process-step:hover,
    .process-step:focus-visible{
        transform:translateY(-10px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.02);
        box-shadow:0 30px 70px rgba(12,25,39,.14);
        border-color:rgba(183,140,80,.4);
    }
    .process-step:hover::before,
    .process-step:focus-visible::before{
        opacity:1;
    }
    .process-step > * {
        position:relative;
        z-index:1;
        transform:translateZ(20px);
    }
    .process-num{
        width:72px;
        height:72px;
        margin:0 auto 18px;
        border-radius:50%;
        background:linear-gradient(135deg,#0c1927,#22364a 58%,#3a526b);
        color:var(--tp-gold);
        font-family:var(--font-heading);
        font-weight:700;
        font-size:1.2rem;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 12px 22px rgba(12,25,39,.2), inset 0 1px 0 rgba(255,255,255,.15);
        border:1px solid rgba(183,140,80,.35);
    }
    .process-step h4{
        font-family:var(--font-body);
        font-weight:700;
        font-size:1.18rem;
        color:var(--tp-navy);
        margin-bottom:12px;
        letter-spacing:-.02em;
    }
    .process-step p{
        font-size:.94rem;
        color:var(--tp-muted);
        line-height:1.7;
        margin:0;
    }
    .about-cta{
        background:white;
        padding:80px 0;
    }
    .about-cta-title{
        font-family:var(--font-heading);
        font-weight:700;
        font-size:clamp(1.6rem, 3.5vw, 2.3rem);
        color: #0C1927;
        margin-bottom:12px;
    }
    .about-cta-sub{
        color: black;
        font-size:1.1rem;
        margin-bottom:28px;
    }
    .about-cta-actions{
        display:flex;
        flex-wrap:wrap;
        gap:14px;
        justify-content:center;
    }
    .fade-up{
        opacity:0;
        transform:translateY(28px);
        transition:opacity .7s ease,transform .7s ease;
    }
    .fade-up.is-visible{
        opacity:1;
        transform:translateY(0);
    }
    @media (max-width:991.98px){
        .padding-section
        {
            padding:70px 0;
        }
        .process-timeline
        {
            grid-template-columns:repeat(2,1fr);
        }
        .process-timeline::before
        {
            display:none
        }
        .about-hero
        {
            padding:90px 0 80px;
        }
    }
    @media (max-width:575.98px){
        .padding-section
        {
            padding:56px 0;
        }
        .process-timeline
        {
            grid-template-columns:1fr;
            gap:32px;
        }
        .about-cta-actions,.about-hero-actions
        {
            flex-direction:column;
            align-items:stretch;
        }
        .btn-about-outline,.btn-about-outline-light,.btn-about-primary
        {
            text-align:center;
        }
        .stat-number,.stat-suffix
        {
            font-size:1.8rem;
        }
    }

    /* CSS FOR BOOK SHELF */

    .bookshelf--frame {
      max-width: 1200px;
      margin: 0 auto;
      background: tan;
      background: url("https://static.tumblr.com/8x9m588/C8ho55ylx/bg-wood2.png"), linear-gradient(#323232, #373737 290px, #B78C50 290px, #B78C50 292px, #B78C50 292px, #B78C50 298px, #B78C50 298px, #B78C50 300px);
      background-size: auto, 10px 300px;
      border-left: 10px solid #B78C50;
      border-right: 10px solid #B78C50;
      text-align: center;
      margin-top: 30px;
      margin-bottom: 30px;
    }
    .bookshelf--frame:first-of-type {
      border-top: 10px solid #B78C50;
    }
    .bookshelf--frame .book-wrapper {
      display: inline-block;
      width: 290px;
      vertical-align: bottom;
      height: 280px;
      position: relative;
      margin: 10px 0;
      max-width: 100%;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s ease, transform .7s ease, filter .35s ease;
    }
    .bookshelf--frame .book-wrapper.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .bookshelf--frame .book-wrapper:hover {
      transform: translateY(-6px);
    }
    .bookshelf--frame .book-wrapper img {
      height: auto;
      width: auto;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      max-height: 100%;
      max-width: 100%;
      filter: none;
      box-shadow: none;
    }
    .book-shelf{
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .book-shelf p{
        font-family:var(--font-body);
        font-size:.85rem;
        font-weight:600;
        letter-spacing:.12em;
        text-transform:uppercase;
        color:var(--tp-gold);
        margin-bottom:12px;
    }
    .book-shelf h2{
        font-family:var(--font-heading);
        font-weight:700;
        font-size:clamp(1.75rem, 3.5vw, 2.4rem);
        color:var(--tp-navy);
        line-height:1.25;
        margin-bottom:18px;
    }

    [type=button]:not(:disabled) {
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px;
    }

    @media (max-width:768px) {
        .bookshelf--frame .book-wrapper {
            width: 220px;
            height: 240px;
        }
    }

    @media (max-width:480px) {
        .about-hero-sub{
            padding-left: 1px;
            padding-right: 1px;
        }
        .bookshelf--frame {
            padding-left: 8px;
            padding-right: 8px;
        }
    }