/* ============ WEB DEV SERVICE PAGE ============ */
.crumbs{display:flex;gap:10px;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--primary)}
.crumbs [aria-current]{color:var(--text)}
.svc-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.svc-hero .hero-text{max-width:none}
.svc-hero h1{font-size:clamp(2.5rem,4.6vw,4rem)}
.svc-visual{position:relative}
.browser{margin-top:0}
.browser img{width:100%;height:auto;display:block}
.vital-card{
  position:absolute;display:flex;align-items:center;gap:12px;
  background:rgba(13,19,32,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-hi);border-radius:var(--radius-sm);
  padding:14px 18px;box-shadow:var(--shadow);
}
.vital-card b{font-family:var(--ff-display);font-size:1.375rem;font-weight:750;display:block;line-height:1}
.vital-card small{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;color:var(--success);display:block;margin-top:4px}
.vital-card .ring{width:34px;height:34px;border-radius:50%;border:3px solid var(--success);flex:none;position:relative}
.vital-card .ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(52,211,153,.18)}
.vital-a{top:-22px;right:-14px}
.vital-b{bottom:-22px;left:-14px}
.svc-stats{margin-top:clamp(48px,6vw,72px)}
.svc-stats .dash-stats{border-top:none}

.phase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(32px,4vw,56px)}
.phase + .phase{border-top:1px solid var(--border)}
.phase.flip .phase-text{order:2}
.phase.flip .phase-img{order:1}
.phase-text h3{font-size:clamp(1.375rem,2.4vw,1.875rem);margin-bottom:14px}
.phase-text p{color:var(--muted)}
.phase-text .process-num{margin-bottom:22px}
.phase-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:20px}
.phase-list li{display:flex;gap:10px;font-size:.9rem;color:var(--muted)}
.phase-list li svg{flex:none;margin-top:4px;color:var(--primary)}
.phase-text .service-cta{margin-top:26px;padding-top:0}
.phase-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.phase-img img{width:100%;height:auto;display:block;transition:transform .5s ease}
.phase:hover .phase-img img{transform:scale(1.02)}

.deliver-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
.deliver-list{list-style:none;display:flex;flex-direction:column;gap:16px}
.deliver-list .card{display:flex;gap:18px;align-items:flex-start;padding:24px 26px}
.deliver-list .check{
  width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(47,224,191,.12);border:1px solid var(--border-hi);color:var(--primary);
}
.deliver-list b{font-family:var(--ff-display);font-size:1.0625rem;display:block;margin-bottom:4px}
.deliver-list p{color:var(--muted);font-size:.875rem}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.work-card{padding:16px 16px 20px;display:flex;flex-direction:column;gap:16px}
.work-card .browser{border-radius:var(--radius-sm)}
.work-card .dash-bar{padding:10px 16px}
.work-meta{display:flex;flex-direction:column;gap:10px;padding-inline:6px}
.work-meta b{font-family:var(--ff-display);font-size:1rem;font-weight:650}

@media (max-width:1024px){
  .svc-hero-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .phase{grid-template-columns:1fr}
  .phase.flip .phase-text{order:1}
  .phase.flip .phase-img{order:2}
  .deliver-grid{grid-template-columns:1fr}
  .vital-a{top:-16px;right:8px}
  .vital-b{bottom:-16px;left:8px}
}
@media (max-width:640px){
  .work-grid{grid-template-columns:1fr}
}

/* ============ INDUSTRY PAGE TEMPLATE ============ */
.crumbs{display:flex;gap:10px;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}
.crumbs a{transition:color .2s}.crumbs a:hover{color:var(--primary)}.crumbs [aria-current]{color:var(--text)}

/* Hero */
.ind-hero{padding-bottom:var(--sp-8)}
.ind-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,64px);align-items:center}
.ind-hero h1{font-size:clamp(2.5rem,4.8vw,4.1rem);font-weight:750;line-height:1.05;margin-bottom:16px}
.ind-sub{font-family:var(--ff-display);font-weight:650;font-size:clamp(1.1875rem,2vw,1.5rem);line-height:1.4;letter-spacing:-.01em;color:var(--text);margin-bottom:20px;max-width:600px}
.ind-hero .lead{color:var(--muted);max-width:600px;margin-bottom:32px}

/* Frameworks */
.fw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fw-card{display:flex;flex-direction:column;gap:18px}
.fw-card h3{font-size:1.25rem;display:flex;align-items:center;gap:14px}
.fw-card h3 .service-icon{width:44px;height:44px;flex:none}
.fw-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.fw-list li{font-size:.875rem;line-height:1.6;color:var(--muted);padding-left:18px;position:relative}
.fw-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.fw-list b{color:var(--text);font-weight:700}

/* Blueprint */
.blueprint-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,5vw,90px);align-items:start}
.blueprint-head{position:sticky;top:110px}
.pull{
  font-family:var(--ff-display);font-weight:650;font-size:clamp(1.375rem,2.4vw,1.875rem);
  line-height:1.35;letter-spacing:-.01em;margin-bottom:24px;
  padding-left:24px;border-left:3px solid var(--primary);
}
.blueprint-body p:not(.pull){color:var(--muted);margin-bottom:16px;max-width:62ch}
.segment-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* Operational standards */
.std-list{list-style:none;counter-reset:std}
.std-list li{display:flex;gap:22px;padding-block:26px;border-bottom:1px solid var(--border);align-items:flex-start;transition:padding-left .3s ease}
.std-list li:first-child{border-top:1px solid var(--border)}
.std-list li:hover{padding-left:12px}
.std-num{font-family:var(--ff-mono);font-size:.78rem;color:var(--primary);border:1px solid var(--border-hi);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;flex:none;margin-top:2px}
.std-list b{font-family:var(--ff-display);font-size:1.1875rem;font-weight:650;display:block;margin-bottom:6px}
.std-list p{color:var(--muted);font-size:.9rem;max-width:64ch}

/* Results band & CTA */
.res-band{
  position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border-hi);
  padding:clamp(32px,5vw,72px) clamp(20px,4vw,56px);
  background:radial-gradient(ellipse 70% 90% at 15% 110%,rgba(47,224,191,.14),transparent 60%),
             radial-gradient(ellipse 50% 70% at 90% -10%,rgba(123,108,255,.12),transparent 60%),var(--surface);
}
.res-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative}
.res-grid h2{font-size:var(--fs-h2);margin-bottom:16px;word-break:break-word}
.res-grid>div>p{color:var(--muted);margin-bottom:28px}
.res-grid .btn{max-width:100%}
.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.res-stats>div{
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px 16px;
  background:rgba(7,10,18,.5);display:flex;flex-direction:column;gap:6px;
}
.res-stats .num{font-family:var(--ff-display);font-weight:750;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1;color:var(--primary)}
.res-stats .lbl{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.35;word-break:normal}

/* Capabilities */
.cap-grid{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cap-card{display:flex;align-items:center;gap:12px;padding:18px 20px;font-family:var(--ff-mono);font-size:.8125rem;letter-spacing:.02em;color:rgba(242,245,250,.8);line-height:1.4}
.cap-card .dot{width:7px;height:7px;border-radius:50%;background:var(--primary);flex:none}

/* SEO vs PPC — neutral comparison */
.vs-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.vs-badge{align-self:center;font-family:var(--ff-display);font-weight:750;font-size:1.125rem;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border-hi);color:var(--primary)}
.vs-col{padding:40px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:16px}
.vs-col .chip{align-self:flex-start}
.vs-col h3{font-size:1.375rem}
.vs-col p{color:var(--muted);font-size:.9375rem}
.vs-verdict{
  margin-top:28px;text-align:center;font-family:var(--ff-display);font-weight:650;
  font-size:clamp(1.125rem,1.8vw,1.375rem);color:var(--text);
  padding:24px 28px;border:1px dashed var(--border-hi);border-radius:var(--radius);
}
.vs-verdict em{font-style:normal;color:var(--primary)}

/* Responsive fixes for industry template */
.ind-stats{grid-template-columns:repeat(3,1fr)}
.ind-stats .dash-stat{padding:20px 18px}
.ind-stats .num{font-size:clamp(1.5rem,1.9vw,2rem)}
.ind-stats .lbl{font-size:.62rem}
.ind-hero .dash-chart{padding:22px 20px 6px}

@media (max-width:1024px){
  .ind-hero-grid{grid-template-columns:1fr;gap:40px}
  .fw-grid{grid-template-columns:repeat(2,1fr)}
  .blueprint-grid{grid-template-columns:1fr}
  .blueprint-head{position:static}
  .cap-grid{grid-template-columns:repeat(3,1fr)}
  .res-grid{grid-template-columns:1fr;gap:40px}
  .ind-stats .num{font-size:clamp(1.75rem,4.5vw,2.5rem)}
}
@media (max-width:820px){
  .vs-wrap{grid-template-columns:1fr}
  .vs-badge{justify-self:center}
  .ind-stats{grid-template-columns:1fr}
  .ind-stats .dash-stat{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    border-left:none;border-top:1px solid var(--border);padding:16px 20px;
  }
  .ind-stats .dash-stat:first-child{border-top:none}
  .ind-stats .lbl{margin-top:0;text-align:right}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .std-list li{gap:14px;padding-block:20px}
  .blueprint-head h2{margin-bottom:8px}
  .vs-verdict{font-size:1.0625rem;padding:20px}
}
@media (max-width:768px){
  .res-band{padding:28px 20px}
  .res-stats{grid-template-columns:1fr;gap:12px}
  .res-stats>div{
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;
    padding:16px 20px;text-align:left;
  }
  .res-stats .lbl{margin-top:0;text-align:right}
  .res-grid .btn{width:100%;justify-content:center;white-space:normal;height:auto;padding-block:14px}
}
@media (max-width:640px){
  .fw-grid,.cap-grid{grid-template-columns:1fr}
  .ind-hero .hero-ctas .btn{width:100%;justify-content:center;white-space:normal;height:auto;padding-block:14px}
  .segment-chips .chip{font-size:.68rem}
  .fw-card h3{font-size:1.125rem}
  .crumbs{font-size:.65rem}
  .field input, .field select, .field textarea{font-size:16px}
}