/* =========================================================
   DEVSID.IN — SERVICES PAGE
   ========================================================= */

:root{
    --ds-black:#090909;
    --ds-ink:#111111;
    --ds-paper:#f3f3ef;
    --ds-white:#ffffff;
    --ds-orange:#ff4d19;
    --ds-grey:#777773;
    --ds-line:rgba(9,9,9,.16);
    --ds-dark-line:rgba(255,255,255,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.services-page{
    margin:0;
    background:var(--ds-paper);
    color:var(--ds-black);
    font-family:"Manrope",sans-serif;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}

.services-container{
    width:min(1400px, calc(100% - 80px));
    margin:0 auto;
}

.services-kicker,
.services-section-label,
.services-type,
.service-details span,
.services-cta-label,
.fit-row>b,
.process-grid span{
    font-family:"DM Mono",monospace;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.services-kicker{
    display:flex;
    justify-content:space-between;
    padding-top:132px;
    padding-bottom:25px;
    border-bottom:1px solid var(--ds-line);
    font-size: 10px;
    color: #777777;
}
.services-kicker b,
.services-section-label b,
.services-cta-label b{color:var(--ds-orange)}

.services-hero{
    min-height:760px;
    padding-bottom:100px;
}
.services-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    gap:70px;
    padding-top:70px;
}
.services-hero-heading h1{
    margin:0;
    font-size:clamp(62px,7.1vw,126px);
    line-height:.91;
    letter-spacing:-.065em;
    font-weight:800;
}
.services-hero-heading h1 span{
        background: linear-gradient(45deg, #ff914d 0%, #a02d37 50%, #383838 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.services-hero-copy{
    align-self:end;
    max-width:430px;
    padding-bottom:5px;
}
.services-hero-copy p{
    margin:0 0 42px;
    font-size:17px;
    line-height:1.65;
    color:#464642;
}
.services-scroll-link,
.text-link{
    display:inline-flex;
    gap:18px;
    align-items:center;
    font-family:"DM Mono",monospace;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    border-bottom:1px solid currentColor;
    padding-bottom:8px;
}
.services-scroll-link span:last-child,
.text-link span{transition:transform .25s ease}
.services-scroll-link:hover span:last-child,
.text-link:hover span{transform:translate(4px,-4px)}

.services-belief{
    background:#fff;
    padding:145px 0;
}
.services-section-label{
    font-size:10px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(17, 17, 17, .15);
    color: #777777;
}

.services-label-light{
    font-size:11px;
    padding-bottom:20px;
    border-bottom:1px solid rgb(255 255 255 / 15%);
}
.services-belief-grid{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);
    gap:90px;
    margin-top:55px;
}
.services-belief h2{
    margin:0;
    font-size:clamp(48px,5.7vw,90px);
    line-height:.96;
    letter-spacing:-.055em;
}
.services-belief h2 span{color:#a5a5a0}
.services-belief-copy{
    padding-top:10px;
    max-width:410px;
}
.services-belief-copy p{
    font-size:16px;
    line-height:1.7;
    color:#555551;
    margin:0 0 26px;
}

.service-stack{
    background:var(--ds-paper);
    padding:120px 0 150px;
}
.services-section-intro{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    border-bottom:1px solid var(--ds-line);
    padding-bottom:30px;
    margin-bottom:55px;
}
.services-section-intro .services-section-label{
    border:0;
    padding:0;
    display:flex;
    align-items: flex-end;
    color: #777777;
}
.services-section-intro p{
    margin:0;
    max-width:480px;
    justify-self:end;
    font-size:15px;
    line-height:1.65;
    color:#555551;
}

.service-item{
    position:relative;
    display:grid;
    grid-template-columns:70px minmax(0,1fr) 230px;
    gap:30px;
    padding:65px 55px;
    margin-bottom:22px;
    overflow:hidden;
}
.service-item-dark{
    background:var(--ds-black);
    color:#fff;
}
.service-item-paper{
    background:#fff;
    color:var(--ds-black);
}
.service-item-orange{
    background:var(--ds-orange);
    color:var(--ds-black);
}
.service-index{
    font:500 12px "DM Mono",monospace;
    opacity:.65;
}
.service-main{max-width:850px}
.service-title-row{
    display:flex;
    align-items:flex-start;
    gap:30px;
    flex-direction: column;
}
.service-type{
    font-size:10px;
    padding-top:10px;
    min-width:90px;
    opacity:.6;
}
.service-title-row h2{
    margin:0;
    font-size:clamp(38px,4.3vw,70px);
    line-height:.96;
    letter-spacing:-.055em;
}
.service-lead{
    max-width:700px;
    margin:35px 0 48px;
    font-size:17px;
    line-height:1.65;
    color:#a9a9a4;
}
.service-item-paper .service-lead,
.service-item-orange .service-lead{color:#4e4e49}
.service-details{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;
    padding-top:25px;
    border-top:1px solid var(--ds-dark-line);
}
.service-item-paper .service-details,
.service-item-orange .service-details{border-color:var(--ds-line)}
.service-details span{
    display:block;
    margin-bottom:12px;
    font-size:9px;
    opacity:.55;
}
.service-details p{
    margin:0;
    max-width:360px;
    font-size:12px;
    line-height:1.6;
    opacity:.78;
}
.service-mark{
    align-self:center;
    justify-self:end;
    width:190px;
    height:190px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.service-item-dark .service-mark{color:var(--ds-orange)}
.service-mark>span{
    position:absolute;
    font:10px "DM Mono",monospace;
    letter-spacing:.06em;
}
.service-mark>span:nth-child(1){top:0;left:0}
.service-mark>span:nth-child(2){right:0;bottom:0}
.service-mark i{
    position:absolute;
    width:150px;
    height:150px;
    border:1px solid currentColor;
    border-radius:50%;
}
.service-mark i:nth-child(2){width:110px;height:110px}
.service-mark i:nth-child(3){width:4px;height:4px;background:currentColor;border:0}

.identity-mark{
    border:1px solid #aaa;
    border-radius:50%;
    flex-direction:column;
}
.identity-mark strong{
    font-size:55px;
    letter-spacing:-.08em;
}
.identity-mark span{
    position:static;
    margin-top:8px;
    color:#777;
}
.browser-mark{
    border:1px solid rgba(9,9,9,.35);
    height:135px;
    width:205px;
    align-self:center;
    flex-direction:column;
    justify-content:flex-start;
}
.browser-dots{
    display:flex;
    gap:5px;
    width:100%;
    padding:10px;
    border-bottom:1px solid rgba(9,9,9,.25);
}
.browser-dots i{
    width:5px;height:5px;border-radius:50%;background:#111;
}
.browser-lines{
    width:70%;
    margin-top:28px;
}
.browser-lines span{
    display:block;
    height:5px;
    margin-bottom:10px;
    background:#111;
}
.browser-lines span:nth-child(2){width:65%}
.browser-lines span:nth-child(3){width:45%}
.launch-mark{
    border-left:1px solid currentColor;
    border-bottom:1px solid currentColor;
    padding:25px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
}
.launch-mark span{
    position:static;
    font:11px "DM Mono",monospace;
}
.launch-mark strong{
    font-size:48px;
    letter-spacing:-.06em;
    line-height:.9;
}
.launch-mark small{
    font:9px "DM Mono",monospace;
    margin-top:15px;
}
.experience-mark{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
    font:10px "DM Mono",monospace;
}
.experience-mark span{position:static}
.experience-mark span:nth-child(2){color:var(--ds-orange);font-size:16px}
.experience-mark span:nth-child(3){opacity:.5}

.service-journey{
    background:#fff;
    padding:140px 0;
}
.journey-heading h2{
    margin:45px 0 80px;
    font-size:clamp(48px,5.5vw,86px);
    line-height:.95;
    letter-spacing:-.06em;
}
.journey-heading span{color:#aaa}
.journey-line{
    display:grid;
    grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr 35px 1fr;
    align-items:center;
    gap:12px;
}
.journey-step{
    min-height:180px;
    padding:22px;
    border:1px solid var(--ds-line);
}
.journey-step span{
    display:block;
    font:10px "DM Mono",monospace;
    color:var(--ds-orange);
    margin-bottom:55px;
}
.journey-step strong{
    display:block;
    font:500 12px "DM Mono",monospace;
    letter-spacing:.04em;
}
.journey-step p{
    margin:10px 0 0;
    font-size:11px;
    line-height:1.5;
    color:#666;
}
.journey-arrow{
    font-size:20px;
    text-align:center;
    color:#aaa;
}

.service-fit{
    padding:140px 0;
    background:var(--ds-paper);
}
.fit-grid{
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:100px;
    margin-top:55px;
}
.fit-heading h2{
    margin:0;
    font-size:clamp(50px,5.4vw,82px);
    line-height:.94;
    letter-spacing:-.06em;
}
.fit-heading h2 span{
        background: linear-gradient(45deg, #ff914d 0%, #a02d37 50%, #383838 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.fit-heading p{
    max-width:330px;
    margin-top:30px;
    font-size:15px;
    line-height:1.6;
    color:#5c5c57;
}
.fit-list{border-top:1px solid var(--ds-line)}
.fit-row{
    display:grid;
    grid-template-columns:45px 1fr auto;
    gap:25px;
    align-items:start;
    padding:28px 0;
    border-bottom:1px solid var(--ds-line);
    transition:padding .25s ease;
}
.fit-row:hover{padding-left:12px}
.fit-row>span{
    font:10px "DM Mono",monospace;
    color:var(--ds-orange);
}
.fit-row strong{
    display:block;
    font-size:18px;
}
.fit-row p{
    margin:7px 0 0;
    font-size:12px;
    color:#686863;
}
.fit-row>b{
    font-size:9px;
    color:#666;
    text-align:right;
    max-width:180px;
}

.services-process{
    background:var(--ds-black);
    color:#fff;
    padding:140px 0 150px;
}
.services-label-light{color: #777777;}
.process-heading{
    display:grid;
    grid-template-columns:1fr .45fr;
    gap:80px;
    margin:55px 0 85px;
}
.process-heading h2{
    margin:0;
    font-size:clamp(52px,6vw,95px);
    line-height:.92;
    letter-spacing:-.065em;
}
.process-heading h2 span{
        background: linear-gradient(45deg, #ff914d 0%, #a02d37 50%, #383838 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.process-heading p{
    max-width:340px;
    align-self:end;
    color:#a5a5a0;
    line-height:1.6;
    font-size:14px;
}
.process-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--ds-dark-line);
}
.process-grid>div{
    min-height:230px;
    padding:25px;
    border-right:1px solid var(--ds-dark-line);
    border-bottom:1px solid var(--ds-dark-line);
}
.process-grid>div:nth-child(3n){border-right:0}
.process-grid span{
    font-size:10px;
    color:var(--ds-orange);
}
.process-grid h3{
    margin:65px 0 12px;
    font-size:25px;
    letter-spacing:-.03em;
}
.process-grid p{
    margin:0;
    max-width:300px;
    color:#999994;
    font-size:12px;
    line-height:1.55;
}

.services-cta{
    background:var(--ds-orange);
    color:var(--ds-black);
    padding:120px 0 130px;
}
.services-cta-label{
    font-size:11px;
}
.services-cta-content{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:50px;
    margin-top:70px;
}
.services-cta h2{
    margin:0;
    font-size:clamp(55px,7vw,112px);
    line-height:.88;
    letter-spacing:-.07em;
}
.services-cta h2 span{color:var(--ds-paper)}
.services-cta-button{
    flex:0 0 auto;
    display:inline-flex;
    gap:20px;
    align-items:center;
    background:var(--ds-black);
    color:#fff;
    padding:18px 22px;
    font:11px "DM Mono",monospace;
    text-transform:uppercase;
    transition:transform .25s ease, background .25s ease;
}
.services-cta-button:hover{
    transform:translateY(-4px);
    background:#222;
}

.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .8s ease, transform .8s ease;
}
.reveal.is-visible{
    opacity:1;
    transform:none;
}

@media(max-width:1000px){
    .services-container{width:min(100% - 48px, 1400px)}
    .services-hero-grid,
    .services-belief-grid,
    .fit-grid,
    .process-heading{grid-template-columns:1fr}
    .services-hero{min-height:auto}
    .services-hero-copy{justify-self:start}
    .journey-line{
        grid-template-columns:1fr;
    }
    .journey-arrow{display:none}
    .journey-step{min-height:auto}
    .journey-step span{margin-bottom:25px}
    .service-item{grid-template-columns:50px 1fr}
    .service-mark{display:none}
    .fit-list{margin-top:20px}
    .process-grid{grid-template-columns:repeat(2,1fr)}
    .process-grid>div:nth-child(3n){border-right:1px solid var(--ds-dark-line)}
    .process-grid>div:nth-child(2n){border-right:0}
    .services-cta-content{display:block}
    .services-cta-button{margin-top:45px}
}

@media(max-width:650px){
    .services-container{width:calc(100% - 36px)}
    .services-kicker{padding-top:105px;font-size:9px}
    .services-kicker span:last-child{display:none}
    .services-hero{padding-bottom:80px}
    .services-hero-grid{padding-top:45px;gap:45px}
    .services-hero-heading h1{font-size:clamp(50px,15vw,75px)}
    .services-hero-copy p{font-size:15px}
    .services-belief,
    .service-stack,
    .service-journey,
    .service-fit,
    .services-process{padding:85px 0}
    .services-belief-grid{margin-top:35px;gap:40px}
    .services-belief h2{font-size:clamp(42px,12vw,62px)}
    .services-section-intro{grid-template-columns:1fr;gap:25px}
    .services-section-intro p{justify-self:start}
    .service-item{grid-template-columns:32px 1fr;padding:38px 24px;gap:15px}
    .service-title-row{display:block}
    .service-type{display:block;margin-bottom:16px}
    .service-title-row h2{font-size:42px}
    .service-lead{font-size:15px;margin:28px 0 38px}
    .service-details{grid-template-columns:1fr;gap:25px}
    .journey-heading h2,
    .fit-heading h2{font-size:50px}
    .fit-grid{gap:45px}
    .fit-row{grid-template-columns:30px 1fr;gap:12px}
    .fit-row>b{grid-column:2;text-align:left;max-width:none}
    .process-heading{margin:40px 0 55px;gap:30px}
    .process-heading h2{font-size:52px}
    .process-grid{grid-template-columns:1fr}
    .process-grid>div,
    .process-grid>div:nth-child(3n){border-right:0}
    .process-grid>div{min-height:190px}
    .process-grid h3{margin-top:45px}
    .services-cta{padding:85px 0 95px}
    .services-cta h2{font-size:clamp(50px,14vw,72px)}
}
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
}