/* ==========================================
   WEB DESIGN PAGE — HERO
========================================== */

.wd-hero{

    position:relative;

    overflow:hidden;

    padding:140px 0 130px;

    background:
        linear-gradient(
            100deg,
            rgba(8,21,45,.94) 0%,
            rgba(8,21,45,.82) 35%,
            rgba(8,21,45,.35) 75%
        ),
        url("../assets/images/hero/web-design-mockup.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}
@media (max-width:900px){

    /* Fixed desktop padding-top (140px) leaves a big empty band
       above the heading on a narrow phone screen where there's no
       side-by-side content to balance it — pull the text up. */
    .wd-hero{

        padding:90px 0 80px;

    }

}
.wd-hero__content{

    max-width:620px;

    animation:wd-hero-slide-in 1.1s cubic-bezier(.16,.8,.3,1) both;

}
.wd-hero__content h1{

    font-family:"Times New Roman", serif;

    font-size:2.9rem;

    line-height:1.25;

    color:var(--color-white);

    letter-spacing:-1px;

    margin-bottom:24px;

    text-shadow:0 4px 24px rgba(0,0,0,.5);

}
.wd-hero__content p{

    font-size:1.15rem;

    line-height:1.8;

    color:var(--color-text);

    text-shadow:0 2px 12px rgba(0,0,0,.5);

}
@keyframes wd-hero-slide-in{

    from{

        transform:translateX(140px);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

/* ==========================================
   SECTION 2 — PROBLEM / COMPARISON VISUAL
========================================== */

.wd-problem{

    background:var(--color-background-alt);

    padding:var(--space-3xl) 0;

}
.wd-problem__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}
.wd-problem__content{

    max-width:520px;

    text-align:left;

}
.wd-problem__content h2{

    font-family:"Times New Roman", serif;

    font-size:2.4rem;

    line-height:1.3;

    color:var(--color-white);

    letter-spacing:-.5px;

    margin-bottom:24px;

}
.wd-problem__content p{

    font-size:1.15rem;

    line-height:1.8;

    color:var(--color-text);

    margin-bottom:0;

}
.compare-visual__image{

    width:100%;

    display:block;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-card);
}
.compare-visual__caption{

    text-align:center;

    color:var(--color-gold);

    font-weight:700;

    margin-top:24px;

}

@media (max-width:900px){

    /* Fixed 1fr 1fr forced two cramped ~160px columns on phones —
       stack the comparison image above the copy instead. */
    .wd-problem__grid{

        grid-template-columns:1fr;

    }

    .wd-problem__content{

        max-width:none;

    }

}

/* ==========================================
   SECTION 3 — DIGITAL EXTENSION PHILOSOPHY
========================================== */

.wd-philosophy{

    padding:var(--space-3xl) 0;

}
.wd-philosophy__content{

    max-width:720px;

    margin-inline:auto;

    text-align:center;

}
.wd-philosophy__icon{

    display:flex;

    justify-content:center;

    margin-bottom:20px;

}
.wd-philosophy__icon svg{

    width:38px;

    height:38px;

    color:var(--color-gold);

}
.wd-philosophy__content h2{

    font-family:"Times New Roman", serif;

    font-size:2.6rem;

    line-height:1.3;

    color:var(--color-white);

    letter-spacing:-.5px;

}
.wd-philosophy__divider{

    height:1px;

    background:rgba(255,255,255,.1);

    max-width:900px;

    margin:40px auto;

}
.wd-philosophy__grid{

    display:grid;

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

    gap:32px;

    max-width:1160px;

    margin-inline:auto;

}
@media (max-width:760px){

    .wd-philosophy__grid{

        grid-template-columns:1fr 1fr;

        gap:28px 24px;

    }

}
@media (max-width:460px){

    .wd-philosophy__grid{

        grid-template-columns:1fr;

    }

}
.wd-philosophy__example h3{

    font-family:var(--font-heading);

    font-size:1.4rem;

    color:var(--color-white);

    margin-bottom:10px;

}
.wd-philosophy__example p{

    font-size:.95rem;

    line-height:1.6;

    color:var(--color-text);
}
.wd-philosophy__quote{

    font-family:var(--font-heading);

    font-style:italic;

    font-size:1.7rem;

    line-height:1.5;

    color:var(--color-gold);

    text-align:center;

    max-width:720px;

    margin-inline:auto;

}

/* ==========================================
   SECTION 4 — DISCOVERY TIMELINE (alternating, scroll-reveal)
========================================== */

.wd-discovery{

    background:var(--color-background-alt);

    padding:var(--space-3xl) 0;

}
.wd-discovery__heading{

    max-width:700px;

    margin:0 auto var(--space-2xl);

    text-align:center;

}
.wd-discovery__heading h2{

    font-family:"Times New Roman", serif;

    font-size:2.6rem;

    line-height:1.3;

    color:var(--color-white);

    letter-spacing:-.5px;

    margin-bottom:24px;

}
.wd-discovery__heading p{

    font-size:1.2rem;

    line-height:1.7;

    color:var(--color-text);
}
.wd-gold{

    color:var(--color-gold);

}
.wd-timeline-v2{

    position:relative;

    max-width:900px;

    margin-inline:auto;

}
.wd-timeline-v2__line-base{

    position:absolute;

    top:20px;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:2px;

    background:rgba(216,177,75,.2);

    z-index:0;

}
.wd-timeline-v2__line-progress{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:2px;

    height:0;

    background:var(--color-gold);

    z-index:1;

    transition:height .5s ease;

}
.wd-timeline-v2__row{

    position:relative;

    display:grid;

    grid-template-columns:1fr 60px 1fr;

    align-items:center;

    min-height:96px;

}
.wd-timeline-v2__side--left{

    text-align:right;

    padding-right:28px;

}
.wd-timeline-v2__side--right{

    text-align:left;

    padding-left:28px;

}
.wd-timeline-v2__card{

    display:inline-block;

    background:var(--color-card);

    border-radius:var(--radius-md);

    padding:16px 22px;

    color:var(--color-white);

    font-weight:600;

    font-size:var(--fs-sm);

    box-shadow:var(--shadow-card);

    opacity:0;

    transition:opacity .6s ease, transform .6s ease;
}
.wd-timeline-v2__card--final{

    color:var(--color-gold);

}
.wd-timeline-v2__row--left .wd-timeline-v2__card{

    transform:translateX(36px);

}
.wd-timeline-v2__row--right .wd-timeline-v2__card{

    transform:translateX(-36px);

}
.wd-timeline-v2__row.is-visible .wd-timeline-v2__card{

    opacity:1;

    transform:translateX(0);

}
.wd-timeline-v2__center{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

}
.wd-timeline-v2__dot{

    width:32px;

    height:32px;

    border-radius:50%;

    background:var(--color-background-alt);

    border:2px solid var(--color-gold);

    color:var(--color-gold);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:.8rem;

    font-family:var(--font-heading);

}
.wd-timeline-v2__dot--final{

    background:var(--color-gold);

    color:var(--color-background);

}

/* ==========================================
   SECTION 6 — BUILD AROUND YOU (orbit diagram)
========================================== */

.wd-build-around{

    padding:var(--space-3xl) 0;

    overflow:hidden;

}
.hub-orbit{

    position:relative;

    width:820px;

    height:820px;

    max-width:100%;

    margin-inline:auto;

}
.hub-orbit__center{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:2;

    width:190px;

    height:130px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:12px;

    background:var(--color-card);

    border:2px solid var(--color-gold);

    border-radius:var(--radius-md);

    box-shadow:0 0 40px rgba(216,177,75,.15);
}
.hub-orbit__core-label{

    color:var(--color-gold);

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:6px;

}
.hub-orbit__core-title{

    font-family:var(--font-heading);

    font-size:1.4rem;

    font-weight:700;

    color:var(--color-white);

}
.hub-orbit__ring{

    position:absolute;

    inset:0;

    animation:hub-orbit-spin 100s linear infinite;

}
.hub-orbit__item{

    position:absolute;

    top:50%;

    left:50%;

    transform:rotate(var(--angle)) translateX(340px);

}
.hub-orbit__counter-static{

    position:absolute;

    top:0;

    left:0;

    transform:rotate(calc(var(--angle) * -1));
}
.hub-orbit__counter-spin{

    position:absolute;

    top:0;

    left:0;

    animation:hub-orbit-spin-reverse 100s linear infinite;

}
.hub-orbit__card{

    position:absolute;

    top:0;

    left:0;

    transform:translate(-50%,-50%);

    width:190px;

    background:var(--color-card);

    border:1px solid rgba(216,177,75,.3);

    border-radius:var(--radius-md);

    padding:14px 16px;

    text-align:left;

    box-shadow:var(--shadow-card);
}
.hub-orbit__card h4{

    font-family:var(--font-heading);

    font-size:1rem;

    color:var(--color-white);

    margin-bottom:4px;

}
.hub-orbit__card p{

    font-size:.8rem;

    line-height:1.5;

    color:var(--color-text);
}
@keyframes hub-orbit-spin{

    from{ transform:rotate(0deg); }

    to{ transform:rotate(360deg); }

}
@keyframes hub-orbit-spin-reverse{

    from{ transform:rotate(0deg); }

    to{ transform:rotate(-360deg); }

}

/* The orbit ring positions each card with a fixed 340px translateX
   from center — that radius doesn't scale down with the container,
   so on a narrow phone the cards land far outside the viewport on
   both sides no matter how small .hub-orbit itself is allowed to
   get. A circle of 7 cards doesn't have a smaller-but-still-circular
   form that fits a phone anyway, so drop the circular positioning
   and the (purely decorative) spin below 900px and lay the same
   center card + 7 cards out as a plain stack/grid instead. */
@media (max-width:900px){

    .hub-orbit{
        width:auto;
        height:auto;
    }
    .hub-orbit__center{
        position:static;
        transform:none;
        margin:0 auto 32px;
    }
    .hub-orbit__ring{
        position:static;
        inset:auto;
        animation:none;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px;
    }
    .hub-orbit__item{
        position:static;
        transform:none;
    }
    .hub-orbit__counter-static{
        position:static;
        transform:none;
    }
    .hub-orbit__counter-spin{
        position:static;
        animation:none;
    }
    .hub-orbit__card{
        position:static;
        transform:none;
        width:auto;
    }

}
@media (max-width:480px){

    .hub-orbit__ring{
        grid-template-columns:1fr;
    }

}

/* ==========================================
   SECTION 8 — DESIGNED TO FEEL FAMILIAR (stays dark)
========================================== */

.wd-familiar{

    background:var(--color-background-alt);

    padding:var(--space-3xl) 0;

}
.wd-familiar__content{

    max-width:720px;

    margin-inline:auto;

    text-align:center;

}
.wd-familiar__content h2{

    font-family:"Times New Roman", serif;

    font-size:2.6rem;

    line-height:1.3;

    color:var(--color-white);

    letter-spacing:-.5px;

    margin-bottom:32px;

}
.wd-familiar__text{

    font-size:1.35rem;

    line-height:1.7;

    color:var(--color-gold);

    max-width:760px;

    margin-inline:auto;

}
.wd-familiar__text--white{

    color:var(--color-white);

}
.wd-familiar__text em{

    font-style:italic;

    font-weight:700;

    white-space:nowrap;

}
.wd-familiar__content .wd-philosophy__divider{

    max-width:600px;

}

/* ==========================================
   LIGHT SECTIONS (alternating background rhythm)
========================================== */

.section-light{

    background:#ffffff !important;

}

/* Section 3 — Digital Extension */
.section-light .wd-philosophy__icon svg{

    color:var(--color-gold);

}
.section-light .wd-philosophy__content h2{

    color:#0B1D3A;

}
.section-light .wd-philosophy__divider{

    background:rgba(11,29,58,.12);

}
.section-light .wd-philosophy__example h3{

    color:#0B1D3A;

}
.section-light .wd-philosophy__example p{

    color:#5B6472;

}
.section-light .wd-philosophy__quote{

    color:var(--color-gold);

}

/* Section 6 — Build Around You (orbit) */
.section-light .wd-discovery__heading h2{

    color:#0B1D3A;

}
.section-light .wd-discovery__heading p{

    color:#5B6472;

}
.section-light .hub-orbit__center{

    background:#F1F2F4;

    border-color:var(--color-gold);

    box-shadow:none;

}
.section-light .hub-orbit__core-label{

    color:var(--color-gold);

}
.section-light .hub-orbit__core-title{

    color:#0B1D3A;

}
.section-light .hub-orbit__card{

    background:#F1F2F4;

    border-color:rgba(11,29,58,.12);

    box-shadow:0 6px 18px rgba(11,29,58,.08);
}
.section-light .hub-orbit__card h4{

    color:#0B1D3A;

}
.section-light .hub-orbit__card p{

    color:#5B6472;

}

/* Final CTA */
.section-light .final-cta__content h2{

    color:#0B1D3A;

}
.section-light .final-cta__content p{

    color:#5B6472;

}