/* Inner pages, layered on top of uto.css */
.page-head{background:var(--paper); padding:150px 0 66px; position:relative; overflow:hidden;}
.page-head::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 85% 70% at 28% 0%, black, transparent 80%); -webkit-mask-image:radial-gradient(ellipse 85% 70% at 28% 0%, black, transparent 80%);}
.page-head::after{content:""; position:absolute; top:-160px; right:-120px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(143,168,46,.22), transparent 65%); pointer-events:none;}
.page-head .container{position:relative; z-index:2;}
.page-head h1{font-size:clamp(32px,4.4vw,54px); max-width:800px; text-wrap:pretty;}
.page-head p.lead{font-size:16.5px; color:var(--muted); max-width:600px; margin-top:16px; text-wrap:pretty;}
.page-head .hero-ctas{margin-top:28px; margin-bottom:0;}

/* services detail rows */
.svc-rows{padding:90px 0; background:var(--white); position:relative;}
.svc-rows::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(var(--grid-line) 1.4px, transparent 1.4px); background-size:26px 26px;}
.svc-rows .container{position:relative; z-index:2;}
.svc-row{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; padding:44px 0; border-top:1px solid var(--line); align-items:start;}
.svc-row:first-child{border-top:none; padding-top:0;}
.svc-row-head{position:sticky; top:104px;}
.svc-row-head .sc-icon{margin-bottom:18px;}
.svc-row-head h2{font-size:clamp(22px,2.6vw,30px); margin-bottom:10px;}
.svc-row-head .sc-desc{margin-bottom:18px;}
.svc-row-head .service-actions{display:flex; gap:10px; flex-wrap:wrap;}
.svc-row-num{font-family:var(--ff-mono); font-size:12px; font-weight:600; color:var(--accent-ink); letter-spacing:.08em; display:block; margin-bottom:14px;}
.svc-panels{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.svc-panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px;}
.svc-panel h4{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:600;}
.svc-panel ul{display:flex; flex-direction:column; gap:10px;}
.svc-panel li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted); line-height:1.5;}
.svc-panel li svg{flex-shrink:0; margin-top:2px; color:var(--accent-ink);}
.svc-panel li .n{font-family:var(--ff-mono); font-size:11px; font-weight:600; color:var(--accent-ink); flex-shrink:0; margin-top:2px;}
.svc-best{grid-column:1/-1; display:flex; align-items:flex-start; gap:11px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; font-size:14px; color:var(--muted);}
.svc-best b{display:block; font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:3px;}

/* single service page */
.service-head .breadcrumb{display:flex; align-items:center; gap:9px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; flex-wrap:wrap;}
.service-head .breadcrumb a:hover{color:var(--accent-ink);}
.service-head .breadcrumb .sep{opacity:.4;}
.service-head-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:44px; align-items:start;}
.service-head-icon{width:60px; height:60px; border-radius:17px; margin-bottom:22px;}
.service-summary{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--shadow-card);}
.service-summary h4{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px; font-weight:600;}
.service-summary p{font-size:15px; color:var(--muted); line-height:1.65;}
.service-summary-line{display:flex; gap:12px; align-items:flex-start; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.service-summary-line svg{color:var(--accent-ink); flex-shrink:0; margin-top:3px;}
.service-summary-line span{display:block; font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;}
.service-summary-line a{font-size:15px; font-weight:600; color:var(--ink);}
.service-summary-line a:hover{color:var(--accent-ink);}

.service-body{padding:80px 0; background:var(--white); position:relative;}
.service-body::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(var(--grid-line) 1.4px, transparent 1.4px); background-size:26px 26px;}
.service-body .container{position:relative; z-index:2;}
.service-intro{max-width:760px; margin-bottom:40px;}
.service-intro p{font-size:17px; line-height:1.8; color:var(--body-copy); margin-top:14px; text-wrap:pretty;}
.service-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.service-cols .svc-panel{padding:28px 26px;}
.service-cols .svc-panel li{font-size:14.5px;}

.service-faq{background:var(--paper);}
.other-services{padding:90px 0; background:var(--white);}
.other-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.other-card{display:flex; align-items:center; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; transition:transform .28s ease, box-shadow .28s ease;}
.other-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft);}
.other-card .sc-icon{width:44px; height:44px; border-radius:13px; flex-shrink:0;}
.other-card h3{font-size:16.5px; margin-bottom:4px;}
.other-card p{font-size:13.5px; color:var(--muted); line-height:1.5;}
.other-arrow{margin-left:auto; color:var(--muted); flex-shrink:0; transition:transform .28s ease, color .28s ease;}
.other-card:hover .other-arrow{transform:translateX(4px); color:var(--accent-ink);}

/* work listing */
.work-list{padding:80px 0 90px; background:var(--white); position:relative;}
.work-bar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--line);}
.work-count{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.pagination{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:48px; flex-wrap:wrap;}
.pagination a,.pagination span{min-width:42px; height:42px; padding:0 14px; border-radius:100px; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--ink); transition:all .25s ease;}
.pagination a:hover{background:var(--dark-fill); color:var(--on-fill); border-color:var(--dark-fill);}
.pagination .current{background:var(--lime); color:var(--on-accent); border-color:var(--lime);}
.pagination .disabled{opacity:.35; pointer-events:none;}
.empty-state{text-align:center; padding:70px 24px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); color:var(--muted);}
.empty-state h3{margin-bottom:8px;}

/* contact page */
.contact-page{padding:80px 0 90px; background:var(--white); position:relative;}
.contact-page::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(var(--grid-line) 1.4px, transparent 1.4px); background-size:26px 26px;}
.contact-page .container{position:relative; z-index:2;}
.next-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px;}
.next-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:24px 22px;}
.next-card .n{font-family:var(--ff-display); font-weight:700; font-size:30px; color:transparent; -webkit-text-stroke:1.3px var(--lime-deep); line-height:1; margin-bottom:14px;}
.next-card h4{font-size:16.5px; margin-bottom:8px;}
.next-card p{font-size:13.5px; color:var(--muted); line-height:1.6;}

@media (max-width:1080px){
  .service-head-grid{grid-template-columns:1fr; gap:28px;}
  .other-grid{grid-template-columns:1fr;}
  .svc-row{grid-template-columns:1fr; gap:26px;}
  .svc-row-head{position:static;}
  .next-steps{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .page-head{padding:126px 0 52px;}
  .service-cols{grid-template-columns:1fr;}
  .svc-panels{grid-template-columns:1fr;}
}

/* hero pattern, stronger (matches .hero) */
.page-head::before{
  background-image:
    linear-gradient(var(--grid-hero) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-hero) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 95% 90% at 26% 0%, black 25%, transparent 92%);
  -webkit-mask-image:radial-gradient(ellipse 95% 90% at 26% 0%, black 25%, transparent 92%);
}

/* ================= BLOG ================= */
.blog-list{padding:70px 0 90px; background:var(--white); position:relative;}
.blog-list::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(var(--grid-line) 1.4px, transparent 1.4px); background-size:26px 26px;}
.blog-list .container{position:relative; z-index:2;}

.blog-filters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px;}
.blog-chip{display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:9px 17px; font-size:13.5px; font-weight:600; color:var(--ink); transition:all .25s ease;}
.blog-chip span{font-family:var(--ff-mono); font-size:11px; color:var(--muted);}
.blog-chip:hover{border-color:var(--ink); transform:translateY(-2px);}
.blog-chip.active{background:var(--lime); border-color:var(--lime); color:var(--on-accent);}
.blog-chip.active span{color:rgba(20,22,8,.6);}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft);}
.blog-card-thumb{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2);}
.blog-card-thumb img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease, transform .5s ease;}
.blog-card-thumb img.loaded{opacity:1;}
.blog-card:hover .blog-card-thumb img{transform:scale(1.04);}
.blog-flag{position:absolute; top:14px; left:14px; background:var(--lime); color:var(--on-accent); font-family:var(--ff-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:100px;}
.blog-card-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:11px; flex-grow:1;}
.blog-card-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);}
.blog-cat{color:var(--accent-ink); font-weight:600;}
.blog-cat:hover{color:var(--ink);}
.blog-card-title{font-size:18px; line-height:1.3;}
.blog-card-title a:hover{color:var(--accent-ink);}
.blog-card-excerpt{font-size:14px; color:var(--muted); line-height:1.6; text-wrap:pretty;}
.blog-card .view-project-btn{margin-top:auto;}

/* ---- single post ---- */
.post-head{padding:140px 0 48px;}
.post-head h1{font-size:clamp(28px,3.9vw,46px); max-width:880px;}
.post-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px;}
.post-meta .blog-cat{background:var(--lime); color:var(--on-accent); border-radius:100px; padding:8px 16px; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;}

.post-body{padding:0 0 90px; background:var(--white);}
.post-cover{margin:-24px 0 44px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper-2);}
.post-cover img{width:100%; height:auto; max-height:520px; object-fit:cover; display:block;}
.post-layout{display:grid; grid-template-columns:1.4fr .6fr; gap:44px; align-items:start; padding-top:46px;}

.post-content{background:transparent; border:none; padding:0; font-size:17px; line-height:1.85; color:var(--body-copy);}
.post-content > *:first-child{margin-top:0;}
.post-content h2{font-size:27px; margin:38px 0 14px; color:var(--ink);}
.post-content h3{font-size:21px; margin:30px 0 12px; color:var(--ink);}
.post-content h4{font-size:18px; margin:26px 0 10px; color:var(--ink);}
.post-content p{margin-bottom:1.15em;}
.post-content ul,.post-content ol{margin:0 0 1.3em; padding-left:0; display:flex; flex-direction:column; gap:10px;}
.post-content ul li{position:relative; padding-left:26px; list-style:none;}
.post-content ul li::before{content:""; position:absolute; left:5px; top:12px; width:7px; height:7px; border-radius:50%; background:var(--lime-deep);}
.post-content ol{list-style:decimal; padding-left:24px;}
.post-content a{color:var(--ink); border-bottom:1.5px solid var(--lime);}
.post-content a:hover{color:var(--accent-ink);}
.post-content blockquote{margin:26px 0; padding:20px 24px; background:var(--paper); border-left:3px solid var(--lime); border-radius:0 var(--r-md) var(--r-md) 0; color:var(--ink); font-size:17.5px;}
.post-content img{border-radius:var(--r-md); margin:22px 0; width:100%; height:auto;}
.post-content figure{margin:22px 0;}
.post-content figcaption{font-size:13px; color:var(--muted); margin-top:8px; text-align:center;}
.post-content code{font-family:var(--ff-mono); font-size:14px; background:var(--paper); padding:2px 7px; border-radius:6px;}
.post-content pre{font-family:var(--ff-mono); font-size:13.5px; background:var(--paper); padding:18px; border-radius:var(--r-md); overflow-x:auto; margin-bottom:1.3em;}
.post-content table{width:100%; border-collapse:collapse; margin-bottom:1.3em; font-size:15px;}
.post-content th,.post-content td{border:1px solid var(--line); padding:11px 14px; text-align:left;}
.post-content th{background:var(--paper); font-weight:600;}
.post-content hr{border:none; border-top:1px solid var(--line); margin:34px 0;}

.post-aside{position:sticky; top:100px; display:flex; flex-direction:column; gap:16px;}
.share-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px;}
.share-card h4{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:600;}
.share-row{display:flex; flex-wrap:wrap; gap:9px;}
.share-row a,.share-row button{width:40px; height:40px; border-radius:50%; background:var(--white); border:1px solid var(--line); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:all .25s ease;}
.share-row a:hover,.share-row button:hover{background:var(--dark-fill); color:var(--lime); border-color:var(--dark-fill); transform:translateY(-2px);}
.share-copy.copied{background:var(--lime); color:var(--on-accent); border-color:var(--lime);}

.related-posts{padding:0 0 90px; background:var(--white);}

@media (max-width:1080px){
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .post-layout{grid-template-columns:1fr; gap:34px;}
  .post-aside{position:static;}
}
@media (max-width:680px){
  .blog-grid{grid-template-columns:1fr;}
  .post-head{padding:118px 0 40px;}
  .post-cover{margin:-14px 0 30px;}
  .post-content{font-size:16px;}
  .post-content h2{font-size:23px;}
}