:root{
  --header-height:80px;
  --header-height-tablet:80px;
  --header-height-mobile:70px;
}

#header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9999;
  display:block;
  min-height:80px;
  height:80px;
}

.header-spacer{
  height:80px;
  width:100%;
}

@media (max-width:1024px){
  #header{min-height:80px;height:80px}
  .header-spacer{height:80px}
}

@media (max-width:768px){
  #header{min-height:70px;height:70px}
  .header-spacer{height:70px}
}

main{margin-top:0;padding-top:0}

/* Keep hero image fixed to requested file */
@media (min-width: 769px){
  body.page-website-dev .hero-section-inner{
    background-image:
      linear-gradient(105deg,rgba(15,23,42,.78) 0%,rgba(15,23,42,.55) 40%,rgba(15,23,42,.18) 62%,rgba(15,23,42,.08) 100%),
      url("../assets/images/Web%20(1).webp"),
      url("/assets/images/Web%20(1).webp") !important;
    background-repeat:no-repeat,no-repeat,no-repeat !important;
    background-position:0 0,center,center !important;
    background-size:auto,cover,cover !important;
  }
}

/* Lock hero against any inherited hover motion */
.page-website-dev .hero-section-inner,
.page-website-dev .hero-section-inner *,
.page-website-dev .hero-banner-frame,
.page-website-dev .hero-banner-frame img,
.page-website-dev .hero-image-side{
  transition:none !important;
  animation:none !important;
}

/* Force hero text block to stay fixed (override homepage translate) */
.page-website-dev .hero-content-side,
.page-website-dev .hero-desktop-copy,
.page-website-dev .hero-mobile-copy,
.page-website-dev .hero-content-side h1,
.page-website-dev .hero-content-side p,
.page-website-dev .hero-content-side .hero-ctas{
  transform:none !important;
  translate:none !important;
  scale:1 !important;
}

.page-website-dev .hero-section-inner:hover,
.page-website-dev .hero-section-inner *:hover,
.page-website-dev .hero-banner-frame:hover,
.page-website-dev .hero-banner-frame img:hover,
.page-website-dev .hero-image-side:hover,
.page-website-dev .hero-content-side:hover,
.page-website-dev .hero-desktop-copy:hover,
.page-website-dev .hero-mobile-copy:hover,
.page-website-dev .hero-content-side h1:hover,
.page-website-dev .hero-content-side p:hover,
.page-website-dev .hero-content-side .hero-ctas:hover,
.page-website-dev .hero-section-inner:focus,
.page-website-dev .hero-section-inner *:focus{
  transform:none !important;
  translate:none !important;
  scale:1 !important;
  box-shadow:none !important;
  filter:none !important;
}

.page-website-dev .page-section{
  padding:56px 0;
}

.page-website-dev .section-heading{
  margin:0 0 14px;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  line-height:var(--home-section-line-height,1.25);
  letter-spacing:var(--home-heading-tracking,-0.02em);
  font-family:var(--home-heading-font,"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  color:#0f172a;
  font-weight:800;
  text-align:center;
}

.page-website-dev .lp-table-subtitle{
  font-size:clamp(1.15rem,3vw,1.35rem);
  margin:8px 0 16px;
}

.page-website-dev .seo-metrics-lead{
  max-width:42rem;
  margin:12px auto 0;
  text-align:center;
  font-size:1rem;
  line-height:1.6;
  color:#475569;
}

.page-website-dev .consult-strip{
  margin-top:24px;
  background:linear-gradient(135deg,#1d4ed8,#2563eb,#0ea5e9);
  border-radius:16px;
  padding:22px 20px;
  color:#fff;
  text-align:center;
}

.page-website-dev .consult-strip h3{
  margin:0 0 10px;
  font-size:1.4rem;
}

.page-website-dev .consult-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:999px;
  background:#facc15;
  color:#0f172a;
  font-weight:700;
  text-decoration:none;
}

.page-website-dev .showcase-section-eyebrow{
  margin:0 0 10px;
  color:#64748b;
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:700;
}

.page-website-dev .shopify-metrics-intro{
  margin-bottom:28px;
}

.page-website-dev .shopify-metrics-section{
  padding:48px 0 56px;
}

/* Webflow “why Webflow” feature grid (6 cards) */
@media (min-width: 1024px) {
  .page-website-dev .webflow-why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-website-dev .webflow-why-grid .core-services-card p {
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .page-website-dev .webflow-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-website-dev .webflow-why-grid .core-services-card p {
    max-width: none;
  }
}

.page-website-dev .specialist-wrap{
  border:1px solid #dbe5f3;
  border-radius:16px;
  overflow:auto;
}

.page-website-dev .specialist-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}

.page-website-dev .specialist-table th{
  background:#0f172a;
  color:#fff;
  padding:14px;
  text-align:left;
}

.page-website-dev .specialist-table td{
  padding:14px;
  border-bottom:1px solid #e2e8f0;
}

.page-website-dev .specialist-table td:nth-child(1){
  background:#0b0f19;
  color:#f8fafc;
  font-weight:600;
}

.page-website-dev .specialist-table td:nth-child(2){
  background:#7f1d1d;
  color:#fee2e2;
}

.page-website-dev .specialist-table td:nth-child(3){
  background:#14532d;
  color:#dcfce7;
}

/* Two-column tables: second column is Flowrush solution (green), not “generalist” red */
.page-website-dev .specialist-wrap-dual .specialist-table td:nth-child(2){
  background:#14532d;
  color:#dcfce7;
}

/* HTML/CSS vs builders: col2 = strengths (green), col3 = limitations (red) */
.page-website-dev .specialist-wrap.compare-pro-con .specialist-table td:nth-child(2){
  background:#14532d;
  color:#dcfce7;
}
.page-website-dev .specialist-wrap.compare-pro-con .specialist-table td:nth-child(3){
  background:#7f1d1d;
  color:#fee2e2;
}

/* Mixed pro/con rows (+/–) — neutral columns, first column dark */
.page-website-dev .specialist-wrap.compare-tech-mixed .specialist-table td:nth-child(2),
.page-website-dev .specialist-wrap.compare-tech-mixed .specialist-table td:nth-child(3){
  background:#f1f5f9;
  color:#0f172a;
  font-weight:500;
}
.page-website-dev .specialist-wrap.compare-tech-mixed .specialist-table td:nth-child(1){
  background:#0b0f19;
  color:#f8fafc;
  font-weight:600;
}

@media (max-width:768px){
  .page-website-dev .page-section{padding:44px 0}
}

/* E-commerce: 4 cards in one row on desktop; text fills card (no 30ch gap) */
@media (min-width: 1024px) {
  .core-services-section.ecom-store-services .core-services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .core-services-section.ecom-store-services .core-services-card {
    padding: 20px 14px 18px;
  }

  .core-services-section.ecom-store-services .core-services-card h3 {
    font-size: 1.05rem;
    line-height: 1.12;
  }

  .core-services-section.ecom-store-services .core-services-card p {
    max-width: none;
    font-size: 0.9rem;
    line-height: 1.62;
  }
}

/* Web design agency: closing line under service cards */
.page-website-dev .core-services-section .specialist-closing.wd-services-closing {
  margin-top: 2.5rem;
  text-align: center;
}

@media (min-width: 769px) and (max-width: 1023px) {
  .core-services-section.ecom-store-services .core-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .core-services-section.ecom-store-services .core-services-card p {
    max-width: none;
  }
}

/* White label agency: service cards (9) and pricing (3); WordPress page platforms grid (9) */
@media (min-width: 1024px) {
  .page-website-dev .wl-agency-services-grid,
  .page-website-dev .wp-agency-platforms-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-website-dev .wl-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-website-dev .wl-agency-services-grid .core-services-card p,
  .page-website-dev .wp-agency-platforms-grid .core-services-card p {
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .page-website-dev .wl-agency-services-grid,
  .page-website-dev .wp-agency-platforms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-website-dev .wl-agency-services-grid .core-services-card p,
  .page-website-dev .wp-agency-platforms-grid .core-services-card p {
    max-width: none;
  }
}