/* ==========================================
   WEBSITE DEVELOPMENT — Dedicated Service Page
   Loaded after site.css
   ========================================== */
.page-website-development .site-header { position: sticky; top: 0; z-index: 1000; min-height: 94px; padding: .85rem clamp(1.25rem,3vw,3.5rem); box-shadow: 0 3px 16px #091c2412; }
.page-website-development .brand-logo { width: clamp(230px,25vw,370px); }
.page-website-development .site-nav { display: flex; flex-wrap: wrap; gap: .1rem; }
.page-website-development .site-nav a { padding-inline: clamp(.55rem,1vw,1rem); font-size: .74rem; }
.page-website-development .wd-mobile-menu { display: none; }
.page-website-development .wd-main { flex: 1; min-width: 0; }
.page-website-development .wd-wrap { width: min(100% - 3rem,1200px); margin-inline: auto; }
.page-website-development .wd-kicker { margin: 0 0 .9rem; color: #c6531b; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.page-website-development h2 { margin: 0; color: #17303a; font: 600 clamp(2rem,3vw,3.1rem)/1.25 'Noto Serif',Georgia,serif; }
.page-website-development .wd-lead { max-width: 850px; margin: 1rem 0 2.3rem; color: #445157; font-size: 1.08rem; line-height: 1.8; }
.page-website-development .wd-section { padding: clamp(3.5rem,5vw,5.5rem) 0; scroll-margin-top: 155px; }
.page-website-development .wd-muted { background: #f3f5f4; }

/* Hero */
.page-website-development .wd-hero { position: relative; isolation: isolate; color: #fff; background: radial-gradient(ellipse at 85% 10%, #20515a 0%, transparent 52%), linear-gradient(115deg, #0c1b26 0%, #183440 68%, #31383a 100%); }
.page-website-development .wd-hero-content { display: flex; flex-direction: column; justify-content: center; min-height: clamp(260px,27vw,350px); padding-block: 3rem; }
.page-website-development .wd-hero .wd-kicker { color: #ffae79; }
.page-website-development .wd-hero h1 { margin: 0; font: 600 clamp(2.35rem,4.2vw,4.5rem)/1.15 'Noto Serif',Georgia,serif; letter-spacing: -.025em; }
.page-website-development .wd-hero h1 em { color: #ffae79; font-style: normal; }
.page-website-development .wd-hero-content > p:last-child { max-width: 560px; color: #e3eaec; font-size: 1.07rem; line-height: 1.8; }
.page-website-development .wd-jump { position: sticky; top: 94px; z-index: 900; background: #fff; border-bottom: 1px solid #dce2e0; }
.page-website-development .wd-jump .wd-wrap { display: flex; gap: clamp(.8rem,2vw,2rem); overflow-x: auto; }
.page-website-development .wd-jump a { flex-shrink: 0; padding: 1rem .1rem; color: #29424a; font-size: .78rem; font-weight: 700; text-decoration: none; }
.page-website-development .wd-jump a:hover, .page-website-development .wd-jump a:focus-visible { color: #b84e19; text-decoration: underline; text-underline-offset: 5px; }

/* Examination */
.page-website-development .wd-feature { display: grid; grid-template-columns: 1.15fr .85fr; background: #fff; border: 1px solid #dce2e0; }
.page-website-development .wd-feature > img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: contain; background: #091a24; }
.page-website-development .wd-feature-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(1.5rem,3vw,3rem); border-left: 3px solid #159d9b; }
.page-website-development .wd-feature-copy h3 { margin: 0; color: #17303a; font: 600 clamp(1.5rem,2.25vw,2.35rem)/1.25 'Noto Serif',Georgia,serif; }
.page-website-development .wd-feature-copy h3 em { color: #b84e19; font-style: normal; }
.page-website-development .wd-feature-copy p { margin: 1rem 0 0; color: #445157; line-height: 1.8; }
.page-website-development .wd-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 1.5rem; padding: .85rem 1.3rem; background: #b84e19; color: #fff; font-size: .86rem; font-weight: 700; text-align: center; text-decoration: none; }
.page-website-development .wd-button:hover { background: #963e13; }
.page-website-development .wd-button:focus-visible { outline: 3px solid #159d9b; outline-offset: 3px; }
.page-website-development .wd-three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
.page-website-development .wd-three article, .page-website-development .wd-four article { padding: 1.6rem; background: #fff; border: 1px solid #dce2e0; border-top: 3px solid #159d9b; }
.page-website-development .wd-three span, .page-website-development .wd-four span, .page-website-development .wd-demos article > span { color: #bd501e; font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
.page-website-development .wd-three h3, .page-website-development .wd-four h3 { margin: .6rem 0; color: #17303a; font: 600 1.35rem/1.3 'Noto Serif',Georgia,serif; }
.page-website-development .wd-three p, .page-website-development .wd-four p { margin: 0; color: #445157; line-height: 1.75; }
.page-website-development .wd-note { margin: 1.5rem 0 0; color: #667176; font-size: .86rem; line-height: 1.75; }

/* Capabilities and demonstrations */
.page-website-development .wd-four { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.page-website-development .wd-four article { background: #f8faf9; }


/* Pricing */
.page-website-development .wd-price-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.3rem; align-items: stretch; }
.page-website-development .wd-price-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(2rem,3vw,3rem); background: #142934; color: #fff; }
.page-website-development .wd-price-card > span { color: #ffae79; font-size: .73rem; font-weight: 800; letter-spacing: .12em; }
.page-website-development .wd-price-card > strong { margin-top: 1rem; font: 600 clamp(3rem,5vw,4.5rem)/1.15 'Noto Serif',Georgia,serif; }
.page-website-development .wd-price-card > p { color: #d4dfe1; line-height: 1.8; }
.page-website-development .wd-includes { padding: clamp(1.6rem,3vw,3rem); border: 1px solid #dce2e0; background: #f8faf9; }
.page-website-development .wd-includes h3 { margin: 0 0 1rem; color: #17303a; font: 600 1.55rem 'Noto Serif',Georgia,serif; }
.page-website-development .wd-includes li { margin: .5rem 0; color: #445157; }
.page-website-development .wd-addon { margin-top: 1.5rem; padding: 1.2rem; border-left: 3px solid #e95c17; background: #fff; }
.page-website-development .wd-addon p { margin: .4rem 0 0; color: #445157; }

/* Responsive */
@media (max-width: 950px) {
    .page-website-development .wd-feature, .page-website-development .wd-price-grid { grid-template-columns: 1fr; }
    .page-website-development .wd-feature > img { height: auto; min-height: 0; }
    .page-website-development .wd-feature-copy { border-left: 0; border-top: 3px solid #159d9b; }
    .page-website-development .wd-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .page-website-development .site-header { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; min-height: 72px; padding: .65rem 1rem; }
    .page-website-development .brand { align-self: auto; }
    .page-website-development .brand-logo { width: clamp(170px,52vw,220px); }
    .page-website-development .site-header > .site-nav { display: none; }
    .page-website-development .wd-mobile-menu { display: block; position: relative; }
    .page-website-development .wd-mobile-menu summary { padding: .65rem; border: 1px solid #cbd7d9; cursor: pointer; list-style: none; }
    .page-website-development .wd-mobile-menu nav { position: absolute; right: 0; top: 100%; z-index: 1200; display: grid; min-width: 190px; padding: .5rem; background: #fff; border: 1px solid #dce2e0; box-shadow: 0 10px 18px #091c2420; }
    .page-website-development .wd-mobile-menu nav a { padding: .7rem; text-decoration: none; }
    .page-website-development .wd-wrap { width: min(100% - 2.5rem,1200px); }
    
    
    .page-website-development .wd-hero-content { min-height: 280px; }
    .page-website-development .wd-jump { top: 72px; }
    .page-website-development .wd-three, .page-website-development .wd-four, .page-website-development .wd-demos { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
    .page-website-development .wd-hero h1 { font-size: clamp(2rem,9vw,2.6rem); }
    .page-website-development .wd-button { width: 100%; }
}


/* ==========================================
   Demonstration cards — interactive logo reveal
   ========================================== */
.page-website-development .wd-demos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.page-website-development .wd-demo-card {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce2e0;
    border-top: 3px solid #159d9b;
}

.page-website-development .wd-demo-reveal {
    position: relative;
    display: block;
    width: 100%;
    min-height: 255px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    color: #17303a;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.page-website-development .wd-demo-reveal:focus-visible {
    outline: 3px solid #159d9b;
    outline-offset: -4px;
}

.page-website-development .wd-demo-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.3rem, 2.5vw, 2.2rem);
    transition: opacity .35s ease, transform .35s ease;
}

.page-website-development .wd-demo-front { opacity: 1; transform: translateY(0); }
.page-website-development .wd-demo-category {
    color: #bd501e;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
}
.page-website-development .wd-demo-title {
    margin: .65rem 0;
    color: #17303a;
    font: 600 clamp(1.4rem, 2vw, 1.85rem)/1.25 'Noto Serif', Georgia, serif;
}
.page-website-development .wd-demo-description { color: #445157; line-height: 1.7; }
.page-website-development .wd-demo-hint {
    margin-top: 1.2rem;
    color: #607078;
    font-size: .76rem;
    font-weight: 700;
}
.page-website-development .wd-demo-back {
    align-items: center;
    opacity: 0;
    transform: translateY(9px);
    pointer-events: none;
}
.page-website-development .wd-demo-back img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: contain;
}
.page-website-development .wd-demo-dark .wd-demo-back { background: #171310; }
.page-website-development .wd-demo-light .wd-demo-back { background: #f8f6f1; }

@media (hover: hover) and (pointer: fine) {
    .page-website-development .wd-demo-reveal:hover .wd-demo-front {
        opacity: 0;
        transform: translateY(-9px);
    }
    .page-website-development .wd-demo-reveal:hover .wd-demo-back {
        opacity: 1;
        transform: translateY(0);
    }
}
.page-website-development .wd-demo-reveal[aria-pressed="true"] .wd-demo-front {
    opacity: 0;
    transform: translateY(-9px);
}
.page-website-development .wd-demo-reveal[aria-pressed="true"] .wd-demo-back {
    opacity: 1;
    transform: translateY(0);
}
.page-website-development .wd-demo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .85rem 1.3rem;
    border-top: 1px solid #dce2e0;
}
.page-website-development .wd-demo-footer > span {
    color: #647276;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
}
.page-website-development .wd-demo-footer a {
    color: #205b6e;
    font-size: .85rem;
    font-weight: 800;
    text-decoration: none;
}
.page-website-development .wd-demo-footer a:hover,
.page-website-development .wd-demo-footer a:focus-visible {
    color: #b84e19;
    text-decoration: underline;
    text-underline-offset: 4px;
}
@media (max-width: 700px) {
    .page-website-development .wd-demos { grid-template-columns: 1fr; }
    .page-website-development .wd-demo-reveal { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-website-development .wd-demo-face { transition: none; }
}


/* ==========================================
   WEBSITE DEVELOPMENT — Pricing and Client Journey
   ========================================== */
.page-website-development .wd-price-assurance {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.22);
    font-size: .88rem;
}
.page-website-development .wd-business-section {
    margin-top: clamp(3rem,5vw,4.5rem);
}
.page-website-development .wd-business-section h3,
.page-website-development .wd-ownership h3 {
    margin: 0 0 1rem;
    font: 600 clamp(1.6rem,2.4vw,2.3rem)/1.3 'Noto Serif',Georgia,serif;
    color: #17303a;
}
.page-website-development .wd-business-lead,
.page-website-development .wd-business-section > p:not(.wd-kicker):not(.wd-note) {
    max-width: 940px;
    color: #445157;
    line-height: 1.85;
}
.page-website-development .wd-milestones {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.page-website-development .wd-milestones article {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.5rem;
    background: #f8faf9;
    border: 1px solid #dce2e0;
    border-top: 3px solid #159d9b;
}
.page-website-development .wd-milestones article > span {
    color: #bd501e;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
}
.page-website-development .wd-milestones h4 {
    margin: .75rem 0;
    color: #17303a;
    font: 600 1.3rem/1.3 'Noto Serif',Georgia,serif;
}
.page-website-development .wd-milestones p {
    margin: 0 0 1.4rem;
    color: #445157;
    line-height: 1.7;
}
.page-website-development .wd-milestones strong {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid #dce2e0;
    color: #17303a;
    font-size: 1.35rem;
}
.page-website-development .wd-ownership {
    margin-top: clamp(3rem,5vw,4.5rem);
    padding: clamp(1.75rem,4vw,3rem);
    background: #142934;
    border-top: 4px solid #e95c17;
}
.page-website-development .wd-ownership .wd-kicker { color: #ffae79; }
.page-website-development .wd-ownership h3 { color: #fff; }
.page-website-development .wd-ownership p:not(.wd-kicker) {
    max-width: 940px;
    color: #d4dfe1;
    line-height: 1.85;
}
.page-website-development .wd-support,
.page-website-development .wd-timeline {
    padding-top: 2rem;
    border-top: 1px solid #dce2e0;
}
@media (max-width: 1050px) {
    .page-website-development .wd-milestones {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
@media (max-width: 600px) {
    .page-website-development .wd-milestones {
        grid-template-columns: 1fr;
    }
}


/* Progressive disclosure and service transparency */
.page-website-development .wd-journey { margin-top: clamp(3rem,5vw,4.5rem); }
.page-website-development .wd-journey h3,.page-website-development .wd-final-cta h3 { margin:0 0 1rem; color:#17303a; font:600 clamp(1.6rem,2.4vw,2.3rem)/1.3 'Noto Serif',Georgia,serif; }
.page-website-development .wd-journey .wd-business-lead { color:#445157; line-height:1.8; }
.page-website-development .wd-journey .wd-milestones { margin-top:1.6rem; }
.page-website-development .wd-journey .wd-milestones article { padding:1.3rem; }
.page-website-development .wd-journey .wd-milestones p { margin-bottom:1rem; }
.page-website-development .wd-detail { margin-top:1rem; border:1px solid #dce2e0; background:#f8faf9; }
.page-website-development .wd-detail summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 1.25rem; cursor:pointer; color:#17303a; font-weight:750; line-height:1.5; list-style:none; }
.page-website-development .wd-detail summary::-webkit-details-marker { display:none; }
.page-website-development .wd-detail summary::after { content:'+'; flex:0 0 auto; color:#b84e19; font-size:1.4rem; font-weight:500; }
.page-website-development .wd-detail[open] summary::after { content:'−'; }
.page-website-development .wd-detail summary:focus-visible { outline:3px solid #159d9b; outline-offset:-3px; }
.page-website-development .wd-detail-body { padding:0 1.25rem 1.2rem; border-top:1px solid #dce2e0; color:#445157; line-height:1.8; }
.page-website-development .wd-detail-body p { margin:1rem 0 0; }
.page-website-development .wd-ownership-promise { font-weight:700; color:#fff !important; }
.page-website-development .wd-detail-dark { background:#203945; border-color:#44606a; }
.page-website-development .wd-detail-dark summary { color:#fff; }
.page-website-development .wd-detail-dark summary::after { color:#ffae79; }
.page-website-development .wd-detail-dark .wd-detail-body { color:#d4dfe1; border-color:#44606a; }
.page-website-development .wd-text-link { display:inline-block; margin-top:1.2rem; color:#205b6e; font-weight:750; text-underline-offset:4px; }
.page-website-development .wd-text-link:hover { color:#b84e19; }
.page-website-development .wd-final-cta { margin-top:clamp(3rem,5vw,4.5rem); padding:clamp(1.75rem,4vw,3rem); background:#f3f5f4; border-top:3px solid #159d9b; }
.page-website-development .wd-final-cta p:not(.wd-kicker) { max-width:780px; color:#445157; line-height:1.8; }
.page-website-development .wd-business-section { margin-top:clamp(2.5rem,4vw,3.5rem); }
.page-website-development .wd-hosting,.page-website-development .wd-updates { padding-top:2rem; border-top:1px solid #dce2e0; }
@media (max-width:700px) { .page-website-development .wd-detail summary { padding:1rem; } .page-website-development .wd-detail-body { padding:0 1rem 1rem; } }

/* Free examination — optional process explanation */
.page-website-development .wd-examination-detail {
    margin-top: 1.25rem;
}

/* Package inclusions — clear deliverables without another accordion */
.page-website-development .wd-inclusion-group { padding-block: 1.15rem; border-top: 1px solid #dce2e0; }
.page-website-development .wd-inclusion-group:first-of-type { border-top: 0; padding-top: .25rem; }
.page-website-development .wd-inclusion-group h4 { margin: 0 0 .7rem; color: #b84e19; font-size: .83rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.page-website-development .wd-inclusion-group ul { margin: 0; padding-left: 1.25rem; }
.page-website-development .wd-inclusion-group li { margin: .42rem 0; line-height: 1.6; }
.page-website-development .wd-includes .wd-addon { margin-top: .65rem; }

/* Standard package scope disclosure */
.page-website-development .wd-scope-detail { margin-top: 1.25rem; }

/* Link to dedicated Development Experience page */
.page-website-development .wd-experience-invite {margin-top:clamp(2.5rem,4vw,3.5rem);padding:clamp(1.5rem,3vw,2.5rem);background:#f3f5f4;border-top:3px solid #159d9b;}
.page-website-development .wd-experience-invite h3 {margin:0 0 .8rem;color:#17303a;font:600 clamp(1.5rem,2.3vw,2.1rem)/1.3 'Noto Serif',Georgia,serif;}
.page-website-development .wd-experience-invite p:not(.wd-kicker) {max-width:800px;color:#445157;line-height:1.8;}