/* =========================================================
   BenTreder.com shared fixes
   ========================================================= */

html, body{
  overflow-x:hidden;
}

body{
  min-height:100vh;
}

.wrap{
  position:relative;
  z-index:2;
  padding-bottom:140px;
}

main{
  position:relative;
  z-index:2;
}

/* =========================================================
   FORCE CONSISTENT MOBILE NAV / DRAWER
   ========================================================= */

.menuToggle{
  display:none;
  width:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(245,255,255,.96);
  cursor:pointer;
  flex:0 0 auto;
  z-index:91;
}

.menuToggle svg{
  width:18px;
  height:18px;
  display:block;
}

.mobileDrawer{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:none !important;
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

.mobileDrawer.open{
  display:block !important;
  pointer-events:auto !important;
  opacity:1 !important;
  visibility:visible !important;
}

.mobileDrawerBackdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(2,6,10,.66) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

.mobileDrawerPanel{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:min(90vw, 380px) !important;
  max-width:100% !important;
  height:100% !important;
  padding:18px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(var(--cyan,88,214,255),.13), transparent 60%),
    radial-gradient(520px 260px at 92% 20%, rgba(var(--iceblue,169,231,255),.12), transparent 62%),
    linear-gradient(180deg, rgba(7,20,31,.97), rgba(5,14,24,.99)) !important;
  border-left:1px solid rgba(210,245,255,.16) !important;
  box-shadow:
    -20px 0 60px rgba(0,0,0,.46),
    inset 1px 0 0 rgba(255,255,255,.05) !important;
  transform:translateX(105%) !important;
  transition:transform .28s cubic-bezier(.22,1,.36,1) !important;
  overflow-y:auto !important;
}

.mobileDrawer.open .mobileDrawerPanel{
  transform:translateX(0) !important;
}

.mobileDrawerHead{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding-bottom:2px !important;
}

.mobileDrawerBrand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  text-decoration:none !important;
}

.mobileDrawerBrandText{
  min-width:0 !important;
}

.mobileDrawerTitle{
  margin:0 !important;
  font-size:14px !important;
  font-weight:950 !important;
  line-height:1.1 !important;
  color:rgba(245,255,255,.94) !important;
}

.mobileDrawerSub{
  display:block !important;
  margin-top:3px !important;
  font-size:11px !important;
  font-weight:750 !important;
  color:var(--muted2, #88a0b4) !important;
  line-height:1.25 !important;
}

.mobileDrawerClose{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  border:1px solid rgba(210,245,255,.16) !important;
  background:rgba(255,255,255,.06) !important;
  color:rgba(245,255,255,.92) !important;
  cursor:pointer !important;
  flex:0 0 auto !important;
}

.mobileDrawerClose svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
}

.mobileDrawerNav{
  display:grid !important;
  gap:10px !important;
  margin-top:2px !important;
}

.mobileDrawerLink{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:14px 14px !important;
  border-radius:18px !important;
  border:1px solid rgba(210,245,255,.14) !important;
  background:
    radial-gradient(260px 120px at 18% 0%, rgba(var(--iceblue,169,231,255),.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  text-decoration:none !important;
  color:rgba(245,255,255,.92) !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:.15px !important;
  box-shadow:0 12px 26px rgba(0,0,0,.20) !important;
  opacity:0 !important;
  transform:translateX(16px) !important;
  transition:
    opacity .32s ease,
    transform .32s ease,
    filter .18s ease,
    border-color .18s ease !important;
}

.mobileDrawer.open .mobileDrawerLink{
  opacity:1 !important;
  transform:translateX(0) !important;
}

.mobileDrawer.open .mobileDrawerLink:nth-child(1){ transition-delay:.03s !important; }
.mobileDrawer.open .mobileDrawerLink:nth-child(2){ transition-delay:.06s !important; }
.mobileDrawer.open .mobileDrawerLink:nth-child(3){ transition-delay:.09s !important; }
.mobileDrawer.open .mobileDrawerLink:nth-child(4){ transition-delay:.12s !important; }
.mobileDrawer.open .mobileDrawerLink:nth-child(5){ transition-delay:.15s !important; }
.mobileDrawer.open .mobileDrawerLink:nth-child(6){ transition-delay:.18s !important; }
.mobileDrawer.open .mobileDrawerLink:nth-child(7){ transition-delay:.21s !important; }

.mobileDrawerLink.primary{
  border-color:rgba(var(--cyan,88,214,255),.52) !important;
}

.mobileDrawerMeta{
  margin-top:auto !important;
  padding-top:6px !important;
  display:grid !important;
  gap:10px !important;
}

.mobileDrawerMetaRow{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

.mobileDrawerMini{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:10px 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(210,245,255,.14) !important;
  background:rgba(255,255,255,.05) !important;
  text-decoration:none !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:rgba(245,255,255,.9) !important;
}

body.drawer-open{
  overflow:hidden !important;
}

@media (max-width:860px){
  nav[aria-label="Top menu"]{
    display:none !important;
  }

  .menuToggle{
    display:inline-flex !important;
  }

  footer{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
}

@media (min-width:861px){
  .mobileDrawer{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .menuToggle{
    display:none !important;
  }
}

/* =========================================================
   INTERNAL HERO IMAGE FIT
   Horizontal image in vertical hero panel
   ========================================================= */

.portrait-landscape,
.hero-landscape-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border-radius:24px !important;
  min-height:340px !important;
  background:
    radial-gradient(500px 220px at 50% 0%, rgba(var(--cyan,88,214,255),.14), transparent 72%),
    linear-gradient(180deg, rgba(8,20,32,.95), rgba(7,17,28,1)) !important;
}

.portrait-landscape img,
.hero-landscape-img{
  width:100% !important;
  height:100% !important;
  min-height:340px !important;
  object-fit:contain !important;
  object-position:center center !important;
  aspect-ratio:4 / 4.15 !important;
  padding:12px !important;
}

@media (max-width:860px){
  .portrait-landscape,
  .hero-landscape-wrap{
    min-height:300px !important;
  }

  .portrait-landscape img,
  .hero-landscape-img{
    min-height:300px !important;
    object-fit:contain !important;
    object-position:center center !important;
    aspect-ratio:4 / 4.9 !important;
    padding:10px !important;
  }
}

@media (max-width:560px){
  .portrait-landscape img,
  .hero-landscape-img{
    aspect-ratio:4 / 5.15 !important;
    padding:8px !important;
  }
}

/* Homepage stays separate */
.portrait-home img{
  object-fit:contain !important;
  object-position:center bottom !important;
}

/* =========================================================
   Broad fallback for older internal hero image layouts
   ========================================================= */

/* Common older wrapper names */
.heroSide,
.heroVisual,
.heroMedia,
.hero-image,
.heroImage,
.pageHero,
.page-hero,
.pageHeroMedia,
.page-hero-media,
.heroCard,
.heroPhoto,
.heroArt{
  position:relative;
}

/* Make hero images display more like a horizontal image in a vertical frame */
.heroSide img[src*="hero.jpg"],
.heroVisual img[src*="hero.jpg"],
.heroMedia img[src*="hero.jpg"],
.hero-image img[src*="hero.jpg"],
.heroImage img[src*="hero.jpg"],
.pageHero img[src*="hero.jpg"],
.page-hero img[src*="hero.jpg"],
.pageHeroMedia img[src*="hero.jpg"],
.page-hero-media img[src*="hero.jpg"],
.heroCard img[src*="hero.jpg"],
.heroPhoto img[src*="hero.jpg"],
.heroArt img[src*="hero.jpg"],
.heroSide img[src*="og.jpg"],
.heroVisual img[src*="og.jpg"],
.heroMedia img[src*="og.jpg"],
.hero-image img[src*="og.jpg"],
.heroImage img[src*="og.jpg"],
.pageHero img[src*="og.jpg"],
.page-hero img[src*="og.jpg"],
.pageHeroMedia img[src*="og.jpg"],
.page-hero-media img[src*="og.jpg"],
.heroCard img[src*="og.jpg"],
.heroPhoto img[src*="og.jpg"],
.heroArt img[src*="og.jpg"]{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:12px !important;
  background:transparent !important;
}

/* If older pages put the image directly in an aside/glass block */
aside img[src*="hero.jpg"],
aside img[src*="og.jpg"]{
  object-fit:contain !important;
  object-position:center center !important;
}

/* Mobile tweaks */
@media (max-width:860px){
  .heroSide img[src*="hero.jpg"],
  .heroVisual img[src*="hero.jpg"],
  .heroMedia img[src*="hero.jpg"],
  .hero-image img[src*="hero.jpg"],
  .heroImage img[src*="hero.jpg"],
  .pageHero img[src*="hero.jpg"],
  .page-hero img[src*="hero.jpg"],
  .pageHeroMedia img[src*="hero.jpg"],
  .page-hero-media img[src*="hero.jpg"],
  .heroCard img[src*="hero.jpg"],
  .heroPhoto img[src*="hero.jpg"],
  .heroArt img[src*="hero.jpg"],
  .heroSide img[src*="og.jpg"],
  .heroVisual img[src*="og.jpg"],
  .heroMedia img[src*="og.jpg"],
  .hero-image img[src*="og.jpg"],
  .heroImage img[src*="og.jpg"],
  .pageHero img[src*="og.jpg"],
  .page-hero img[src*="og.jpg"],
  .pageHeroMedia img[src*="og.jpg"],
  .page-hero-media img[src*="og.jpg"],
  .heroCard img[src*="og.jpg"],
  .heroPhoto img[src*="og.jpg"],
  .heroArt img[src*="og.jpg"]{
    padding:10px !important;
  }
}

/* =========================================================
   Services page components
   ========================================================= */

.services-hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:18px;
  align-items:stretch;
}

.services-main,
.services-side{
  padding:30px;
}

.services-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:620px;
}

.services-side{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:620px;
}

.services-title{
  margin:0;
  font-size:clamp(40px, 6vw, 68px);
  line-height:.96;
  letter-spacing:-.045em;
  font-weight:1000;
  max-width:11ch;
}

.services-lead{
  margin:18px 0 0;
  max-width:68ch;
  color:var(--muted, #b4c4d3);
  font-size:18px;
  line-height:1.74;
}

.services-jump,
.services-pill-list,
.services-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.services-jump{
  margin-top:24px;
}

.services-jump a,
.services-chip-link,
.services-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  color:rgba(244,251,255,.94);
  font-size:13px;
  font-weight:900;
  letter-spacing:.1px;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:transform .18s ease, filter .18s ease, border-color .18s ease;
}

.services-jump a:hover,
.services-chip-link:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  border-color:rgba(255,255,255,.18);
}

.services-jump a.primary{
  background:linear-gradient(135deg, rgba(var(--cyan,88,214,255),.95), rgba(var(--iceblue,169,231,255),.76));
  color:#04111a;
  border-color:rgba(var(--cyan,88,214,255),.8);
}

.services-mini{
  margin:0 0 10px;
  color:var(--muted2, #88a0b4);
  font-size:14px;
  line-height:1.65;
  font-weight:800;
}

.services-desc{
  margin:0;
  color:var(--muted, #b4c4d3);
  font-size:16px;
  line-height:1.78;
}

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

.services-kpi{
  display:grid;
  gap:12px;
}

.services-kpi-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  color:var(--muted, #b4c4d3);
  font-weight:800;
}

.services-kpi-row strong{
  color:var(--ink, #f4fbff);
  font-size:15px;
  font-weight:950;
}

.services-service-grid{
  display:grid;
  gap:16px;
}

.services-service-card{
  padding:24px;
}

.services-service-card h2{
  margin:0 0 8px;
}

.services-section-stack{
  display:grid;
  gap:18px;
}

@media (max-width:1100px){
  .services-hero{
    grid-template-columns:1fr;
  }

  .services-main,
  .services-side{
    min-height:auto;
  }
}

@media (max-width:860px){
  .services-main,
  .services-side,
  .services-service-card{
    padding:20px;
  }

  .services-title{
    max-width:12ch;
  }

  .services-lead{
    font-size:17px;
    line-height:1.72;
  }

  .services-jump,
  .services-pill-list,
  .services-cta-row{
    gap:8px;
  }

  .services-split{
    grid-template-columns:1fr;
  }

  .services-jump a,
  .services-chip-link,
  .services-chip{
    width:100%;
    justify-content:center;
  }

  .services-cta-row .btn{
    width:100%;
  }
}

/* =========================================================
   MOBILE OVERFLOW / ALIGNMENT SAFETY PATCH
   BenTreder.com
   ========================================================= */

html, body{
  max-width:100%;
  overflow-x:hidden;
}

*,
*::before,
*::after{
  box-sizing:border-box;
  min-width:0;
}

img,
svg,
video,
canvas,
iframe{
  max-width:100%;
  height:auto;
}

iframe{
  display:block;
}

table{
  width:100%;
  max-width:100%;
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

pre,
code{
  max-width:100%;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}

a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
strong,
small,
li,
summary,
label,
input,
select,
textarea,
button{
  overflow-wrap:anywhere;
  word-wrap:break-word;
}

.wrap,
.glass,
.section,
.card,
.subCard,
.hero,
.heroMain,
.heroSide,
.contentGrid,
.serviceGrid,
.grid,
.proofGrid,
.ctaPanel,
.statCard,
.ctaCard,
.quickPanel,
.note,
.notes,
.listCard,
.supportCard,
.cityCard,
.app,
.tile,
.proofCard,
.mobileDrawerPanel{
  max-width:100%;
  min-width:0;
}

.hero,
.grid,
.contentGrid,
.serviceGrid,
.proofGrid,
.ctaPanel,
.split,
.cards,
.cityGrid,
.supportGrid,
.miniGrid,
.scoreGrid{
  overflow:hidden;
}

.heroMain,
.heroSide,
.card,
.subCard,
.serviceCard,
.supportCard,
.proofCard,
.cityCard,
.tile,
.app,
.listCard{
  min-width:0;
}

.heroTitle,
.title,
.heroLead,
.lead,
.p,
.desc,
.mini,
.note p,
.notes p,
.subCard p,
.serviceCard p,
.cityCard p,
.tile p,
.app p,
.proofCard p{
  max-width:100%;
}

.chips,
.chipRow,
.pillList,
.heroLinks,
.heroProof,
.quick,
.quickPanel,
.jump,
.ctaRow,
.areas,
.mobileDrawerMetaRow{
  display:flex;
  flex-wrap:wrap;
  max-width:100%;
}

.chip,
.tag,
.pill,
.btn,
.qbtn,
.heroTag,
.proof,
.mobileDrawerLink,
.mobileDrawerMini,
.dock a{
  max-width:100%;
}

.dock{
  max-width:calc(100vw - 12px);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.portrait,
.portrait-home,
.portrait-landscape,
.hero-landscape-wrap,
.hero-landscape-img,
.brandLockup{
  max-width:100%;
}

.portrait img,
.portrait-home img,
.portrait-landscape img,
.hero-landscape-wrap img,
.hero-landscape-img img,
.brandLockup img{
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.mapWrap,
.shotWrap,
.shot,
.heroMedia,
.mediaWrap{
  max-width:100%;
  overflow:hidden;
}

.mapWrap iframe,
.shot img{
  max-width:100%;
}

input,
select,
textarea,
button{
  max-width:100%;
}

@media (max-width: 860px){
  .wrap{
    width:min(calc(100% - 16px), var(--max, 1160px));
    padding-left:8px;
    padding-right:8px;
  }

  .topbar{
    max-width:100%;
  }

  .brand{
    min-width:0;
    max-width:calc(100% - 56px);
  }

  .brand h1,
  .brand .sub,
  .brandText,
  .brandSub,
  .mobileDrawerTitle,
  .mobileDrawerSub{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .hero,
  .heroMain,
  .heroSide,
  .section,
  .card,
  .subCard,
  .serviceCard,
  .proofCard,
  .cityCard,
  .tile,
  .app,
  .note,
  .notes{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .heroTitle,
  .title{
    max-width:100% !important;
  }

  .heroLead,
  .lead,
  .p,
  .desc,
  .mini{
    max-width:100% !important;
  }

  .grid,
  .contentGrid,
  .serviceGrid,
  .proofGrid,
  .ctaPanel,
  .split,
  .cards,
  .cityGrid,
  .supportGrid,
  .heroGrid,
  .miniGrid,
  .scoreGrid{
    grid-template-columns:1fr !important;
  }

  .dock{
    left:6px;
    right:6px;
    bottom:10px;
    transform:none;
    width:auto;
    border-radius:18px;
    justify-content:flex-start;
  }

  .dock a{
    flex:0 0 auto;
  }
}

@media (max-width: 520px){
  .wrap{
    width:min(calc(100% - 12px), var(--max, 1160px));
    padding-left:6px;
    padding-right:6px;
  }

  .hero,
  .heroMain,
  .heroSide,
  .section,
  .card,
  .subCard,
  .serviceCard,
  .proofCard,
  .cityCard,
  .tile,
  .app,
  .note,
  .notes{
    padding-left:14px !important;
    padding-right:14px !important;
    border-radius:20px;
  }

  .topbar{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .chips,
  .chipRow,
  .pillList,
  .heroLinks,
  .heroProof,
  .quick,
  .jump,
  .ctaRow,
  .areas{
    gap:8px !important;
  }

  .btn,
  .qbtn,
  .pill,
  .chip,
  .tag,
  .heroTag{
    max-width:100%;
  }
}

/* =========================
   GLOBAL MOBILE SAFETY PASS
   ========================= */

html, body{
  max-width:100%;
  overflow-x:hidden;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

img,
svg,
video,
canvas,
iframe{
  max-width:100%;
  height:auto;
}

iframe{
  display:block;
  border:0;
}

pre,
code,
samp{
  max-width:100%;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}

p, h1, h2, h3, h4, h5, h6, li, a, span, strong{
  overflow-wrap:anywhere;
  word-wrap:break-word;
}

table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
}

input,
select,
textarea,
button{
  max-width:100%;
  font:inherit;
}

.chips,
.chipRow,
.areas,
.quick,
.heroActions,
.heroProof,
.ctaRow,
.btnRow,
.jump,
.pillList{
  max-width:100%;
}

.chip,
.tag,
.btn,
.pill,
.heroTag,
.mobileDrawerLink,
.mobileDrawerMini,
.dock a{
  min-width:0;
}

.glass,
.hero,
.heroMain,
.heroSide,
.section,
.card,
.subCard,
.serviceCard,
.proofCard,
.ctaBox,
.tile,
.app,
.cityCard,
.listCard{
  min-width:0;
}

@media (max-width: 860px){
  .wrap{
    width:min(calc(100% - 16px), var(--max, 1120px));
    padding-left:8px;
    padding-right:8px;
  }

  .topbar,
  .heroMain,
  .heroSide,
  .section,
  .card{
    max-width:100%;
  }

  .chips,
  .chipRow,
  .areas,
  .quick,
  .heroActions,
  .heroProof,
  .ctaRow,
  .btnRow,
  .jump{
    overflow-x:visible;
  }

  .dock{
    max-width:calc(100vw - 10px);
  }

  .dock a{
    min-width:0;
  }
}


/* ===== Internal page width rebalance ===== */
@media (min-width: 861px){
  body:not(:has(main[aria-label="Homepage content"])) .wrap{
    width:min(calc(100% - 28px), 1280px);
  }
}

/* ===== Premium polish pass: spacing, font sizing, internal hero balance ===== */

/* Slightly tighter readable defaults */
@media (min-width: 861px){
  main p,
  main li{
    font-size: 15.5px !important;
    line-height: 1.72 !important;
  }

  .sectionHead p,
  .heroLead,
  .network-lead,
  .projects-lead,
  .services-lead{
    font-size: 17px !important;
    line-height: 1.72 !important;
  }

  .app p,
  .subCard p,
  .proofCard p,
  .project-desc,
  .network-desc,
  .ctaBox p{
    font-size: 14.5px !important;
    line-height: 1.64 !important;
  }

  .section{
    padding: 24px !important;
  }

  .app,
  .subCard,
  .proofCard,
  .project-tile,
  .network-tile{
    padding: 20px !important;
  }

  .ctaBox{
    padding: 24px !important;
  }
}

/* Internal pages: tighten hero proportions a little */
@media (min-width: 861px){
  body:not(:has(main[aria-label="Homepage content"])) .heroMain,
  body:not(:has(main[aria-label="Homepage content"])) .heroSide,
  body:not(:has(main[aria-label="Homepage content"])) .services-main,
  body:not(:has(main[aria-label="Homepage content"])) .services-side,
  body:not(:has(main[aria-label="Homepage content"])) .projects-main,
  body:not(:has(main[aria-label="Homepage content"])) .projects-side,
  body:not(:has(main[aria-label="Homepage content"])) .network-main,
  body:not(:has(main[aria-label="Homepage content"])) .network-side{
    min-height: 560px !important;
    padding: 26px !important;
  }

  body:not(:has(main[aria-label="Homepage content"])) .heroTitle,
  body:not(:has(main[aria-label="Homepage content"])) .services-title,
  body:not(:has(main[aria-label="Homepage content"])) .projects-title,
  body:not(:has(main[aria-label="Homepage content"])) .network-title{
    font-size: clamp(38px, 5.2vw, 62px) !important;
    line-height: .98 !important;
    max-width: 10ch !important;
  }
}

/* Buttons and pills: slightly cleaner sizing */
@media (min-width: 861px){
  .pill{
    min-height: 40px !important;
    padding: 0 13px !important;
    font-size: 12.5px !important;
  }

  .btn{
    min-height: 48px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
  }

  .tag,
  .proof,
  .miniTag,
  .project-chips span,
  .network-chips span,
  .project-type,
  .network-type{
    font-size: 11.5px !important;
  }
}

/* Slightly calmer service section stacks */
@media (min-width: 861px){
  .services-service-card{
    padding: 22px !important;
  }

  .services-section-stack{
    gap: 16px !important;
  }
}

/* ===== Prevent ugly mid-word breaking on mobile ===== */
h1, h2, h3, h4, h5, h6,
.heroTitle,
.services-title,
.projects-title,
.network-title,
.project-name,
.network-name,
.brand h1,
.brandTitle,
.brand .sub,
.brandSub,
.kicker,
.pill,
.btn,
.tag,
.proof,
.project-type,
.network-type,
.project-chips span,
.network-chips span,
.mobileDrawerLink,
.mobileDrawerMini,
.dock a,
.statRow strong,
.sectionHead h2{
  overflow-wrap: normal !important;
  word-break: normal !important;
  word-wrap: normal !important;
  hyphens: manual !important;
}

/* Body copy should also prefer normal wrapping */
p, li, a, span, strong, small{
  word-break: normal !important;
}

/* Keep long hero titles readable without splitting words */
.heroTitle,
.services-title,
.projects-title,
.network-title{
  max-width: 12ch !important;
  line-height: .98 !important;
}

/* On very small screens, let titles use more width instead of splitting words */
@media (max-width: 640px){
  .heroTitle,
  .services-title,
  .projects-title,
  .network-title,
  main h1{
    max-width: 100% !important;
    font-size: clamp(40px, 10vw, 64px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
  }

  .heroMain,
  .services-main,
  .projects-main,
  .network-main{
    min-width: 0 !important;
  }
}