/* ==========================================================
   SERVICES — Professional editorial service system
   ========================================================== */

.services-page{
    min-height:100vh;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 84% 10%, rgba(245,164,0,.055), transparent 28rem),
        linear-gradient(180deg,#07101d 0%,#05080f 42%,#07101b 100%);
    color:var(--text-main);
}

.services-page .navbar{position:fixed;z-index:10000}
.services-page .mobile-bottom-nav{position:fixed;z-index:10001}

.services-intro{
    position:relative;
    padding:136px 0 76px;
    border-bottom:1px solid rgba(255,255,255,.075);
}
.services-intro .container,
.services-work .container{max-width:1180px}

.services-intro::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:150px;
    height:1px;
    background:var(--accent);
    opacity:.85;
}

.services-intro-copy{max-width:820px}
.services-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:rgba(241,243,246,.5);
    font-size:.64rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
}
.services-eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)}
.services-intro h1{
    margin:15px 0 20px;
    max-width:850px;
    font-family:var(--font-display);
    font-size:clamp(2.65rem,5.4vw,4.85rem);
    font-weight:500;
    line-height:.98;
    letter-spacing:-.045em;
}
.services-intro p{
    max-width:720px;
    margin:0;
    color:rgba(241,243,246,.66);
    font-size:.94rem;
    line-height:1.82;
}
.services-intro-meta{
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    margin-top:36px;
}
.services-intro-meta span{
    padding-left:12px;
    border-left:1px solid rgba(245,164,0,.48);
    color:rgba(241,243,246,.46);
    font-size:.62rem;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.services-work{padding:78px 0 112px}
.services-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:48px;
    margin-bottom:28px;
}
.services-section-head h2{
    margin:8px 0 0;
    font-family:var(--font-display);
    font-size:clamp(1.7rem,3vw,2.45rem);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.03em;
}
.services-section-head>p{
    max-width:390px;
    margin:0;
    color:rgba(241,243,246,.48);
    font-size:.77rem;
    line-height:1.7;
    text-align:right;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.service-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:316px;
    padding:24px 25px 22px;
    border:1px solid rgba(255,255,255,.085);
    background:
        linear-gradient(145deg,rgba(255,255,255,.027),rgba(255,255,255,.012));
    box-shadow:0 18px 48px rgba(0,0,0,.12);
    overflow:hidden;
    transition:transform .24s ease,border-color .24s ease,background-color .24s ease,box-shadow .24s ease;
}
.service-card-primary-link{
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    border-radius:inherit;
}
.service-card-primary-link:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:-6px;
}
.service-card-header,
.service-card-content{
    position:relative;
    z-index:2;
    pointer-events:none;
}
.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:58px;
    height:2px;
    background:var(--accent);
}
.service-card::after{
    pointer-events:none;
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-95px;
    bottom:-100px;
    border:1px solid rgba(245,164,0,.08);
    border-radius:50%;
}
.service-card:hover{
    transform:translateY(-4px);
    border-color:rgba(245,164,0,.34);
    background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
    box-shadow:0 24px 58px rgba(0,0,0,.2);
}

.service-card-header{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding-bottom:17px;
    border-bottom:1px solid rgba(255,255,255,.065);
}
.service-number{
    color:var(--accent);
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.15em;
}
.service-type{
    color:rgba(241,243,246,.42);
    font-size:.6rem;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.service-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid rgba(245,164,0,.25);
    color:var(--accent);
    background:rgba(245,164,0,.045);
    font-size:.9rem;
}
.service-card-content{padding-top:20px}
.service-card-content h3{
    margin:0 0 11px;
    max-width:420px;
    font-family:var(--font-display);
    font-size:clamp(1.35rem,2.2vw,1.7rem);
    font-weight:500;
    line-height:1.12;
    letter-spacing:-.025em;
}
.service-card-content p{
    margin:0;
    max-width:510px;
    color:rgba(241,243,246,.61);
    font-size:.77rem;
    line-height:1.72;
}
.service-capabilities{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:19px;
}
.service-capabilities span{
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.015);
    color:rgba(241,243,246,.48);
    font-size:.55rem;
    letter-spacing:.03em;
}
.service-link{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    width:100%;
    margin-top:auto;
    padding-top:19px;
    color:var(--accent);
    font-size:.65rem;
    font-weight:500;
    letter-spacing:.04em;
    text-decoration:none;
}
.service-link span:last-child{font-size:.9rem;transition:transform .2s ease}
.service-link:hover{text-decoration:none}
.service-link:hover span:first-child{text-decoration:underline;text-underline-offset:4px}
.service-link:hover span:last-child{transform:translate(2px,-2px)}
.service-links{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:auto;
}
.service-links .service-link{
    flex:1 1 150px;
    width:auto;
}

@media(max-width:900px){
    .services-intro{padding-top:116px}
    .services-grid{grid-template-columns:1fr}
    .service-card{min-height:300px}
}
@media(max-width:620px){
    .services-intro{padding:100px 0 55px}
    .services-intro h1{font-size:clamp(2.2rem,10vw,3rem)}
    .services-intro-meta{gap:14px}
    .services-work{padding:58px 0 95px}
    .services-section-head{display:block}
    .services-section-head>p{margin-top:12px;text-align:left}
    .service-card{min-height:290px;padding:21px 18px 20px}
}
@media(max-width:480px){
    .service-card-header{grid-template-columns:auto 1fr}
    .service-icon{grid-column:2;grid-row:1;justify-self:end}
    .service-type{grid-column:1 / -1;grid-row:2}
    .service-card-content h3{font-size:1.28rem}
    .service-card-content p{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){
    .service-card,
    .service-link span:last-child{transition:none}
    .service-card:hover{transform:none}
}


/* Service detail pages: compact editorial rhythm and aligned two-up content. */
main.service-page > .container {
    width: min(100% - 3rem, 1120px);
    max-width: 1120px !important;
    padding-top: clamp(6.5rem, 10vw, 8.25rem) !important;
    padding-bottom: clamp(3rem, 5vw, 4.5rem) !important;
}
main.service-page > .container > div:first-child,
main.service-page > .container > header {
    max-width: 860px !important;
}
main.service-page .section-title {
    font-size: clamp(2.15rem, 4.5vw, 3.65rem) !important;
    line-height: 1.06;
    letter-spacing: -.035em;
    margin: .35rem 0 .8rem !important;
}
main.service-page > .container > div:first-child > p,
main.service-page > .container > header > p,
main.service-page > .container > section > p {
    font-size: .91rem !important;
    line-height: 1.72 !important;
}
main.service-page h2 {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    line-height: 1.25;
    letter-spacing: -.018em;
}
main.service-page h3 {
    font-size: 1rem;
    line-height: 1.35;
}
main.service-page p,
main.service-page li {
    font-size: .84rem;
    line-height: 1.72;
}
main.service-page ul,
main.service-page ol {
    line-height: 1.75 !important;
}
main.service-page > .container > div[style*="display:grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.6vw, 18px) !important;
    margin-top: clamp(26px, 3.5vw, 38px) !important;
}
main.service-page > .container > div[style*="display:grid"] > section {
    min-width: 0;
    padding: clamp(18px, 2.2vw, 24px) !important;
    border-radius: 10px !important;
}
main.service-page > .container > section {
    margin-top: clamp(28px, 3.5vw, 40px) !important;
    padding-top: 22px !important;
}
main.service-page .btn {
    font-size: .82rem;
}
@media (max-width: 680px) {
    main.service-page > .container {
        width: calc(100% - 2rem);
        padding-top: 6rem !important;
        padding-bottom: 3rem !important;
    }
    main.service-page > .container > div[style*="display:grid"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    main.service-page .section-title {
        font-size: clamp(2rem, 8.5vw, 2.8rem) !important;
    }
}

/* Technical SEO detail: compact editorial panels and newspaper-style two-up layout. */
.technical-seo-page .technical-seo-container { width:min(100% - 3rem,1120px); }
.technical-seo-page .technical-seo-intro { max-width:900px !important; margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.technical-seo-page .technical-seo-intro > p { max-width:790px; }
.technical-seo-page .seo-editorial-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    align-items:stretch;
}
.technical-seo-page .seo-panel {
    min-width:0;
    padding:clamp(18px,2.2vw,25px);
    border:1px solid rgba(255,255,255,.09);
    border-radius:10px;
    background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.012));
}
.technical-seo-page .seo-panel-wide { grid-column:1 / -1; }
.technical-seo-page .seo-panel-heading {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.075);
}
.technical-seo-page .seo-panel-heading .service-hub-number { flex:0 0 auto; padding-top:.2rem; }
.technical-seo-page .seo-panel h2 { margin:0; font-size:clamp(1.15rem,1.8vw,1.45rem); }
.technical-seo-page .seo-panel h3 { margin:0 0 6px; font-size:.94rem; }
.technical-seo-page .seo-panel p,
.technical-seo-page .seo-panel li { color:var(--text-secondary); font-size:.82rem; line-height:1.68; }
.technical-seo-page .seo-panel p { margin:0; }
.technical-seo-page .seo-capability-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 18px;
}
.technical-seo-page .seo-capability-grid article { min-width:0; padding:8px 0 4px; }
.technical-seo-page .seo-capability-grid article + article { border-left:1px solid rgba(255,255,255,.07); padding-left:16px; }
.technical-seo-page .seo-steps { display:grid; gap:11px; margin:0; padding-left:1.1rem; }
.technical-seo-page .seo-steps li { padding-left:2px; }
.technical-seo-page .seo-steps strong { color:var(--text-main); }
.technical-seo-page .seo-related-links { margin:0; padding-left:1.1rem; display:grid; gap:9px; }
.technical-seo-page .seo-related-links a { color:var(--text-secondary); text-decoration-thickness:1px; text-underline-offset:3px; }
.technical-seo-page .seo-related-links a:hover { color:var(--accent); }
.technical-seo-page .seo-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.technical-seo-page .seo-contact-panel { display:flex; flex-direction:column; align-items:flex-start; }
.technical-seo-page .seo-contact-panel .seo-panel-heading { width:100%; }
.technical-seo-page .seo-contact-panel .seo-actions { margin-top:auto; padding-top:16px; }
@media(max-width:850px) {
    .technical-seo-page .seo-capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .technical-seo-page .seo-capability-grid article:nth-child(3) { border-left:0; padding-left:0; }
    .technical-seo-page .seo-capability-grid article:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.07); margin-top:8px; padding-top:14px; }
}
@media(max-width:640px) {
    .technical-seo-page .technical-seo-container { width:calc(100% - 2rem); }
    .technical-seo-page .seo-editorial-grid { grid-template-columns:minmax(0,1fr); gap:11px; }
    .technical-seo-page .seo-panel-wide { grid-column:auto; }
    .technical-seo-page .seo-capability-grid { grid-template-columns:minmax(0,1fr); }
    .technical-seo-page .seo-capability-grid article + article,
    .technical-seo-page .seo-capability-grid article:nth-child(3) { border-left:0; padding-left:0; }
    .technical-seo-page .seo-capability-grid article + article { border-top:1px solid rgba(255,255,255,.07); margin-top:8px; padding-top:14px; }
}


/* Shared editorial layout for every service detail page except the custom SEO page. */
main.service-page:not(.technical-seo-page) > .container {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(14px,2vw,22px);
    row-gap:clamp(18px,2.4vw,28px);
    align-items:stretch;
}
main.service-page:not(.technical-seo-page) > .container > div:first-child,
main.service-page:not(.technical-seo-page) > .container > div[style*="display:grid"] {
    grid-column:1 / -1;
    min-width:0;
}
main.service-page:not(.technical-seo-page) > .container > div:first-child {
    max-width:860px !important;
    margin-bottom:0;
}
main.service-page:not(.technical-seo-page) > .container > div:first-child > p {
    max-width:740px;
    font-size:.91rem !important;
    line-height:1.72 !important;
}
main.service-page:not(.technical-seo-page) > .container > div[style*="display:grid"] {
    margin-top:clamp(20px,2.8vw,30px) !important;
    column-gap:clamp(12px,1.6vw,18px) !important;
    row-gap:clamp(12px,1.6vw,18px) !important;
    align-items:stretch;
}
main.service-page:not(.technical-seo-page) > .container > div[style*="display:grid"] > section {
    min-width:0;
    height:100%;
    padding:clamp(18px,2.2vw,24px) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:10px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.012)) !important;
}
main.service-page:not(.technical-seo-page) > .container > div[style*="display:grid"] h2 {
    margin:.45rem 0 .8rem !important;
    font-size:clamp(1.12rem,1.7vw,1.4rem) !important;
    line-height:1.28;
}
main.service-page:not(.technical-seo-page) > .container > div[style*="display:grid"] ul {
    padding-left:1.05rem !important;
    color:var(--text-secondary);
    font-size:.82rem;
    line-height:1.68 !important;
}
main.service-page:not(.technical-seo-page) > .container > div[style*="display:grid"] li + li {
    margin-top:.35rem;
}
main.service-page:not(.technical-seo-page) > .container > section {
    min-width:0;
    display:flex;
    flex-direction:column;
    margin:0 !important;
    padding:clamp(18px,2.2vw,24px) !important;
    border:1px solid rgba(255,255,255,.085);
    border-radius:10px;
    background:linear-gradient(145deg,rgba(255,255,255,.023),rgba(255,255,255,.01));
}
main.service-page:not(.technical-seo-page) > .container > section h2 {
    margin:0 0 10px !important;
    font-size:clamp(1.1rem,1.65vw,1.35rem) !important;
    line-height:1.28;
}
main.service-page:not(.technical-seo-page) > .container > section p,
main.service-page:not(.technical-seo-page) > .container > section li {
    font-size:.81rem !important;
    line-height:1.7 !important;
}
main.service-page:not(.technical-seo-page) > .container > section p {
    margin:0 0 12px;
}
main.service-page:not(.technical-seo-page) > .container > section ul {
    margin:0;
    padding-left:1.05rem;
}
main.service-page:not(.technical-seo-page) > .container > section li + li {
    margin-top:.28rem;
}
main.service-page:not(.technical-seo-page) > .container > section a:not(.btn) {
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}
main.service-page:not(.technical-seo-page) > .container > section .btn {
    align-self:flex-start;
    margin-top:auto;
}
main.service-page:not(.technical-seo-page) > .container > section > div[style*="display:flex"] {
    gap:10px !important;
    margin-top:auto !important;
    padding-top:12px;
}
@media(max-width:700px) {
    main.service-page:not(.technical-seo-page) > .container {
        grid-template-columns:minmax(0,1fr);
        row-gap:14px;
    }
    main.service-page:not(.technical-seo-page) > .container > div:first-child,
    main.service-page:not(.technical-seo-page) > .container > div[style*="display:grid"] {
        grid-column:1;
    }
    main.service-page:not(.technical-seo-page) > .container > div[style*="display:grid"] {
        grid-template-columns:minmax(0,1fr) !important;
    }
    main.service-page:not(.technical-seo-page) > .container > section {
        padding:19px !important;
    }
}