/* Website Specialist — mobile production pass v7.9 */
/* Drawn interface arrows: consistent across iOS/Android/desktop, never emoji. */
.icon-arrow{display:inline-block;width:16px;height:16px;position:relative;flex:0 0 16px;font-size:0!important;color:currentColor;vertical-align:middle}
.icon-arrow::before{content:"";position:absolute;width:10px;height:1.5px;background:currentColor;left:2px;top:7px;transform-origin:right center}
.icon-arrow::after{content:"";position:absolute;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;right:1px;top:1px}
.icon-arrow--ne::before{transform:rotate(-45deg)}
.icon-arrow--ne::after{transform:none}
.icon-arrow--se::before{transform:rotate(45deg)}
.icon-arrow--se::after{top:8px;transform:rotate(90deg)}
.icon-arrow--e::before{transform:none}
.icon-arrow--e::after{top:4px;transform:rotate(45deg)}

@media (max-width: 700px) {
  :root{--header-h:72px;--page-pad:20px}
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{font-size:16px}
  main,section,.chapter,.inner-hero,.home-hero,.hero-sticky{max-width:100vw}
  img,svg,video,canvas{max-width:100%;height:auto}

  /* Fixed, predictable mobile header. No blend-mode colour inversion. */
  .site-header,.inner-page .site-header{
    height:var(--header-h)!important;
    padding:0 var(--page-pad)!important;
    mix-blend-mode:normal!important;
    color:#fff!important;
    background:rgba(11,12,13,.94)!important;
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .brand{gap:0!important}.brand-copy{display:none!important}
  .brand-mark{width:42px!important;height:42px!important;flex:0 0 42px!important;color:var(--forge-orange)!important}
  .menu-trigger{color:#fff!important;grid-template-columns:auto 28px!important;font-size:.68rem!important;gap:.9rem!important}
  .menu-trigger i{width:28px!important}

  /* Menu itself must fit on one phone viewport and scroll cleanly. */
  .menu-overlay{padding:calc(var(--header-h) + 20px) var(--page-pad) 28px!important;overflow-y:auto!important;place-items:start!important}
  .menu-layout{width:100%!important;grid-template-columns:1fr!important;gap:2rem!important;align-content:start!important}
  .menu-overlay .menu-primary>a{grid-template-columns:2.25rem minmax(0,1fr)!important;font-size:clamp(2.6rem,11vw,4.3rem)!important;line-height:.92!important;letter-spacing:-.06em!important}
  .menu-services{grid-template-columns:1fr!important;gap:0!important;width:100%!important}
  .menu-services>a{font-size:1rem!important;padding:.72rem 0!important;grid-template-columns:2rem minmax(0,1fr) 24px!important}
  .menu-orbit{width:110vw!important;right:-65vw!important;bottom:-20vw!important;opacity:.55}
  .menu-overlay>p{font-size:.58rem!important;margin-top:1.25rem!important}

  /* Never let display type physically exceed the device. */
  h1,h2,h3,p,strong,span{min-width:0}
  .chapter{padding-left:var(--page-pad)!important;padding-right:var(--page-pad)!important}
  .chapter-head{grid-template-columns:1fr!important;gap:1rem!important;margin-bottom:3.5rem!important}
  .chapter-head p{max-width:100%!important;font-size:1rem!important;line-height:1.55!important}

  /* Homepage: mobile is a composed hero, not the desktop scroll stage squeezed down. */
  .home-hero{height:auto!important;min-height:auto!important}
  .hero-sticky{position:relative!important;top:auto!important;height:auto!important;min-height:100svh!important;overflow:hidden!important;padding:calc(var(--header-h) + 26px) var(--page-pad) 42px!important}
  .hero-system{position:relative!important;left:auto!important;right:auto!important;top:auto!important;margin:0 0 3.2rem!important;font-size:.55rem!important}
  .hero-system span:last-child{display:none!important}
  .hero-kicker-home{position:relative!important;left:auto!important;top:auto!important;margin:0 0 1rem!important;font-size:.55rem!important;line-height:1.5!important}
  .home-title{position:relative!important;left:auto!important;right:auto!important;top:auto!important;font-size:clamp(3.55rem,16.2vw,5.2rem)!important;line-height:.79!important;letter-spacing:-.075em!important;margin:0!important;max-width:100%!important}
  .home-title-line{display:block!important;padding-left:0!important;transform:none!important;opacity:1!important;white-space:normal!important}
  .home-title-line--four{font-size:.53em!important;line-height:1!important;margin-top:.15em!important}
  .hero-copy{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;display:block!important;opacity:1!important;margin-top:2.25rem!important}
  .hero-copy p{font-size:1.05rem!important;line-height:1.55!important;max-width:32rem!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:1rem!important;margin-top:1.5rem!important}
  .hero-actions .forge-button,.hero-actions .text-link{width:100%!important;min-width:0!important;justify-content:space-between!important}
  .build-browser,.build-steps,.hero-scroll{display:none!important}

  .manifesto{padding-top:5rem!important}
  .manifesto h2{font-size:clamp(3.4rem,16vw,5rem)!important;line-height:.8!important;letter-spacing:-.075em!important}
  .manifesto-lead{font-size:clamp(1.6rem,7.5vw,2.15rem)!important;line-height:1.12!important;margin-bottom:2rem!important}

  .project-intro{min-height:auto!important;padding-top:5rem!important;padding-bottom:5rem!important}
  .project-title{font-size:clamp(3.3rem,15vw,5.2rem)!important;line-height:.78!important;margin-top:3rem!important}
  .project-title span,.project-title span:nth-child(2),.project-title .accent{padding-left:0!important}
  .project-copy-block{width:100%!important;max-width:100%!important;margin:2.5rem 0!important}
  .project-device,.project-device--ms{position:relative!important;right:auto!important;top:auto!important;width:100%!important;margin:2rem 0!important;transform:none!important}
  .project-detail-shots{margin-bottom:3rem!important}
  .project-proof{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:2rem!important}
  .project-link{position:relative!important;right:auto!important;bottom:auto!important;display:inline-flex!important;margin-top:2rem!important;max-width:100%!important}

  .services-intro,.proof-heading{grid-template-columns:1fr!important;gap:2rem!important}
  .services-intro h2,.proof-heading h2{font-size:clamp(3.2rem,15vw,5rem)!important;line-height:.8!important}
  .capability-list .capability-card{grid-template-columns:34px minmax(0,1fr) 24px!important;gap:.8rem!important;padding:1.7rem 0!important}
  .capability-list .capability-card span{align-self:start;padding-top:.45rem}
  .capability-list .capability-card h3{font-size:clamp(2.25rem,11vw,3.35rem)!important;line-height:.9!important;word-break:normal!important}
  .capability-list .capability-card p{grid-column:2/4!important;font-size:1rem!important;line-height:1.5!important;margin-top:.4rem!important}
  .capability-list .capability-card i{grid-column:3!important;grid-row:1!important;font-size:0!important}

  /* Inner pages: eliminate desktop absolute-object collisions. */
  .inner-hero{min-height:auto!important;display:block!important;padding:calc(var(--header-h) + 3.5rem) var(--page-pad) 4rem!important;overflow:hidden!important}
  .inner-hero-meta{position:relative!important;left:auto!important;right:auto!important;top:auto!important;margin-bottom:3rem!important}
  .inner-hero-copy,.inner-hero--wordpress .inner-hero-copy,.inner-hero--magento .inner-hero-copy,.inner-hero--shopify .inner-hero-copy,.inner-hero--work .inner-hero-copy{max-width:100%!important;padding:0!important}
  .inner-hero h1,.inner-hero--wordpress h1{font-size:clamp(3.55rem,16vw,5.3rem)!important;line-height:.8!important;letter-spacing:-.07em!important}
  .inner-hero-lead{font-size:1.08rem!important;line-height:1.55!important;margin-top:2rem!important}
  .inner-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:1rem!important}
  .inner-hero-actions .forge-button,.inner-hero-actions .text-link{width:100%!important;justify-content:space-between!important}
  .design-object,.wp-object,.magento-object,.shopify-object,.commerce-object,.seo-object,.work-object{position:relative!important;right:auto!important;left:auto!important;top:auto!important;width:100%!important;min-height:0!important;opacity:1!important;margin:3rem 0 0!important;transform:none!important}
  .design-browser{width:100%!important;transform:none!important}
  .design-object-label{display:none!important}

  .statement-grid,.platform-intro,.seo-copy-grid,.project-feature-grid,.wp-control-grid,.magento-stack-grid,.magento-proof-heading,.shopify-commerce-grid{grid-template-columns:1fr!important;gap:2.5rem!important}
  .statement-grid h2,.platform-intro h2,.seo-copy-grid h2,.project-feature-copy h2,.magento-stack-copy h2,.magento-proof-heading h2,.wp-control-copy h2,.wp-rescue-intro h2{
    font-size:clamp(3rem,14vw,4.6rem)!important;line-height:.82!important;letter-spacing:-.07em!important;max-width:100%!important
  }
  /* Extra-long Magento heading needs a slightly tighter scale on phones. */
  .inner-statement .statement-grid h2{font-size:clamp(2.9rem,13.2vw,4.35rem)!important}
  .statement-copy,.statement-grid .statement-copy{margin-left:0!important;padding-top:0!important;max-width:100%!important}
  .statement-copy .statement-lead{font-size:clamp(1.45rem,6.4vw,2rem)!important;line-height:1.25!important}

  .design-takeover{min-height:auto!important;padding-top:5rem!important;padding-bottom:5rem!important}
  .takeover-type,.seo-takeover .takeover-type{font-size:clamp(3.55rem,17vw,5.6rem)!important;line-height:.78!important;letter-spacing:-.075em!important;max-width:100%!important}
  .takeover-type span{max-width:100%!important;margin-left:0!important;margin-right:0!important;align-self:flex-start!important}
  .takeover-copy,.seo-takeover .takeover-copy{width:100%!important;margin:3rem 0 0!important;grid-template-columns:1fr!important;gap:1.25rem!important}

  .deliverable-list article,.platform-rows article{grid-template-columns:32px minmax(0,1fr)!important;gap:1rem!important;padding:1.8rem 0!important}
  .deliverable-list h3,.platform-rows h3{font-size:clamp(1.65rem,8vw,2.5rem)!important;line-height:1!important}
  .deliverable-list p,.platform-rows p{grid-column:2!important;font-size:.98rem!important}
  .deliverable-list i,.platform-rows i{display:none!important}

  .web-process-grid,.proof-grid,.principle-strip,.about-era-grid,.about-proof-grid,.about-stack-grid,.about-work-grid,.wp-rescue-grid,.shopify-merch-grid{grid-template-columns:1fr!important}
  .web-process-grid article,.proof-grid article{min-height:auto!important;padding:2rem 0!important}

  .project-feature-device{margin-inline:0!important;width:100%!important;transform:none!important}
  .faq-list summary{grid-template-columns:32px minmax(0,1fr) 28px!important;gap:.8rem!important}
  .faq-list details div{padding:0 0 1.8rem 0!important}

  /* Contact/end sections */
  .contact-takeover{min-height:auto!important;padding:5rem var(--page-pad) 2rem!important}
  .contact-takeover h2{font-size:clamp(3.6rem,16vw,5.6rem)!important;line-height:.78!important;margin:3.5rem 0!important}
  .contact-copy{display:grid!important;gap:1.5rem!important}
  .contact-button{width:100%!important;justify-content:space-between!important;gap:1rem!important}


}

/* V8.0 — Contact page: compact, touch-friendly, Safari-safe mobile form */
@media (max-width: 700px) {
  body.contact-page{padding-bottom:0!important}
  .contact-page .site-header{position:fixed!important;top:0;left:0;right:0;z-index:1000}

  .contact-page-hero{
    display:block!important;
    min-height:0!important;
    padding:calc(var(--header-h) + 2.5rem) var(--page-pad) 3.5rem!important;
    overflow:visible!important;
  }
  .contact-page-intro{max-width:100%!important}
  .contact-page-intro h1{
    font-size:clamp(3.25rem,14.5vw,4.5rem)!important;
    line-height:.82!important;
    letter-spacing:-.075em!important;
    margin:1.5rem 0 2rem!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .contact-page-intro>p{
    font-size:1.05rem!important;
    line-height:1.55!important;
    max-width:100%!important;
  }
  .contact-direct{margin-top:2.5rem!important;padding-top:1.25rem!important}
  .contact-direct a{
    font-size:1rem!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
    max-width:100%!important;
  }

  .contact-form-panel{
    width:100%!important;
    max-width:100%!important;
    margin:3rem 0 0!important;
    overflow:visible!important;
    box-shadow:none!important;
  }
  .contact-form-head{
    height:auto!important;
    min-height:52px!important;
    padding:.9rem 1rem!important;
  }
  .project-form{padding:1rem!important}
  .field-row{display:block!important}
  .project-form label,.project-form fieldset{margin:0 0 1.15rem!important}
  .project-form label>span,.project-form legend{
    font-size:.68rem!important;
    line-height:1.35!important;
    margin-bottom:.55rem!important;
  }

  /* 16px prevents iOS Safari zooming the viewport on focus. */
  .project-form input:not([type="radio"]),
  .project-form select,
  .project-form textarea{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    min-height:56px!important;
    padding:.9rem 1rem!important;
    font-size:16px!important;
    line-height:1.35!important;
    border-radius:0!important;
    -webkit-appearance:none;
    appearance:none;
  }
  .project-form select{
    -webkit-appearance:auto!important;
    appearance:auto!important;
    padding-right:2rem!important;
  }
  .field-message textarea{
    min-height:170px!important;
    height:auto!important;
    resize:vertical!important;
  }

  .project-types{
    grid-template-columns:1fr 1fr!important;
    gap:.55rem!important;
  }
  .project-types label{margin:0!important}
  .project-types span{
    min-height:54px!important;
    padding:.75rem .45rem!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:.76rem!important;
    line-height:1.15!important;
  }

  .form-bottom{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:1.25rem!important;
    padding-top:1.25rem!important;
  }
  .form-bottom p{
    max-width:100%!important;
    font-size:.82rem!important;
    line-height:1.55!important;
  }
  .form-bottom .forge-button{
    width:100%!important;
    min-width:0!important;
    min-height:62px!important;
    padding:1rem 1.1rem!important;
    justify-content:space-between!important;
    white-space:normal!important;
    font-size:1rem!important;
    line-height:1.15!important;
  }

  .contact-page-strip{grid-template-columns:1fr 1fr!important}
  .contact-page-strip span{padding:1rem .45rem!important;font-size:.52rem!important}
  .contact-page-footer{
    padding:1.5rem var(--page-pad) calc(9rem + env(safe-area-inset-bottom))!important;
    gap:.8rem!important;
  }
  .contact-page-footer p,
  .contact-page-footer a{overflow-wrap:anywhere!important}
}

@media (max-width: 390px) {
  .contact-page-intro h1{font-size:clamp(3rem,13.6vw,4rem)!important}
  .project-types{grid-template-columns:1fr!important}
}