/* Gatespark v18 : mobile desktop-composition continuity
   Desktop is untouched. Narrow screens keep the same visual hierarchy,
   compressed rather than collapsed. */

@media (max-width: 899px) {
  html, body { overflow-x: clip; }

  /* Homepage hero: keep the exact desktop composition on phones.
     Only compress its vertical footprint so Services arrives sooner. */
  #hero.hero {
    height: clamp(430px, 62svh, 560px) !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  #hero .slides,
  #hero .slide,
  #hero .particles,
  #hero .overlay {
    inset: 0 !important;
  }
  #hero .content {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: clamp(62px, 9svh, 84px) 6vw 14px !important;
  }
  #hero .content-inner {
    width: min(640px, 94vw) !important;
    max-width: 640px !important;
    margin: 0 !important;
  }
  #hero h1.headline {
    font-size: clamp(1.95rem, 7.4vw, 2.75rem) !important;
    line-height: 1.04 !important;
    margin-bottom: .72rem !important;
  }
  #hero .rotator {
    justify-content: flex-start !important;
    height: 2em !important;
    margin-bottom: .72rem !important;
  }
  #hero .rotator-text {
    text-align: left !important;
    font-size: clamp(.84rem, 3.4vw, 1.05rem) !important;
  }
  #hero .sub {
    max-width: 600px !important;
    margin: 0 0 1rem !important;
    font-size: clamp(.72rem, 2.7vw, .88rem) !important;
    line-height: 1.48 !important;
  }
  #hero .cta-row {
    justify-content: flex-start !important;
    gap: .55rem !important;
    margin: 0 !important;
  }
  #hero .cta-row .btn {
    min-height: 36px !important;
    padding: 9px 13px !important;
    font-size: .68rem !important;
  }

  /* No transition spacer between the hero and Services. */
  #services {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #services > .service-hero:first-child {
    margin-top: 0 !important;
  }
  #services > .service-hero:first-child .service-sticky {
    padding-top: 6px !important;
  }

  /* Homepage service stories: desktop two-column composition, compact enough
     for approximately two service stories to share one phone viewport. */
  #services .service-hero {
    height: auto !important;
    min-height: 46svh;
  }
  #services .service-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 46svh;
    display: flex !important;
    align-items: center;
    padding: 14px 0 !important;
  }
  #services .service-grid,
  #services .service-grid.reversed {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: clamp(8px, 2.8vw, 16px) !important;
    padding-inline: clamp(10px, 3vw, 18px) !important;
  }
  #services .service-grid.reversed .service-media { order: 2 !important; }
  #services .service-grid.reversed .service-copy { order: 1 !important; }
  #services .service-media { min-width: 0; }
  #services .reveal-media {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    border-radius: 8px;
  }
  #services .service-copy {
    min-width: 0;
    max-width: none !important;
  }
  #services .service-copy h2 {
    font-size: clamp(.98rem, 4.8vw, 1.38rem) !important;
    line-height: .98;
    margin: 0 !important;
  }
  #services .service-copy p {
    margin-top: 6px !important;
    font-size: clamp(.58rem, 2.35vw, .75rem) !important;
    line-height: 1.38 !important;
  }
  #services .service-step { margin-top: 5px; }
  #services .service-tags { margin-top: 6px !important; gap: 4px !important; }
  #services .tag { padding: 3px 6px !important; font-size: 6.5px !important; }
  #services .service-copy .btn {
    margin-top: 8px !important;
    min-height: 30px;
    padding: 7px 10px !important;
    font-size: .62rem !important;
  }

  /* Homepage: keep the desktop-side-by-side relationships. */
  .about-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) !important;
    gap: clamp(12px, 4vw, 28px) !important;
  }
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(12px, 4vw, 28px) !important;
  }

  /* Why Gatespark: do not remove the visual column on phones. */
  .why-showcase { height: 300svh !important; }
  .why-showcase-sticky { min-height: 0 !important; height: 100svh !important; }
  .why-showcase-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr) !important;
  }
  .why-showcase-copy {
    border-right: 1px solid rgba(42, 3, 1, .14) !important;
    padding: 72px 12px 58px 14px !important;
  }
  .why-showcase-visual { display: flex !important; }
  .why-pagination { top: 52px !important; left: 14px !important; gap: 5px !important; }
  .why-page { width: 13px !important; height: 3px !important; }
  .why-page.is-active { width: 27px !important; }
  .why-copy-stage { min-height: 52vh !important; }
  .why-showcase .why-feature h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.75rem) !important;
    line-height: .93 !important;
  }
  .why-feature p {
    margin-top: 12px !important;
    font-size: clamp(.61rem, 2.35vw, .76rem) !important;
    line-height: 1.45 !important;
  }
  .why-showcase-cta {
    left: 14px !important;
    bottom: 18px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: .57rem !important;
  }
  .why-grid-pattern { background-size: 1.8rem 1.8rem !important; }
  .why-image-frame {
    width: min(82%, 250px) !important;
    height: 58vh !important;
    min-height: 300px !important;
    border-radius: 14px !important;
  }

  /* Shared Navigate pages: retain their desktop grids rather than reducing
     everything to one column. */
  .gst-page-wrap { width: min(100% - 20px, 1240px) !important; }
  .gst-page-section { padding: 46px 0 !important; }
  .gst-page-section-head {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
  }
  .gst-page-section-head h2 { font-size: clamp(1.65rem, 7vw, 2.7rem) !important; }
  .gst-page-section-head p { font-size: .72rem; line-height: 1.5; }
  .gst-page-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .gst-page-card {
    min-height: 178px !important;
    padding: 13px !important;
    border-radius: 8px !important;
  }
  .gst-page-card.wide { grid-column: span 2 !important; }
  .gst-page-card:before { right: 8px !important; top: 8px !important; font-size: 24px !important; }
  .gst-page-card small { font-size: 6px !important; }
  .gst-page-card h3 {
    max-width: 92% !important;
    margin: 30px 0 8px !important;
    font-size: clamp(.82rem, 3.6vw, 1.15rem) !important;
  }
  .gst-page-card p { font-size: .58rem !important; line-height: 1.42 !important; }
  .gst-page-card a { margin-top: 10px !important; font-size: 7px !important; }
  .gst-page-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .gst-page-project { min-height: 270px !important; }
  .gst-page-project-copy { left: 13px !important; right: 13px !important; bottom: 13px !important; }
  .gst-page-project-copy h3 { font-size: clamp(1rem, 4.5vw, 1.45rem) !important; }
  .gst-page-project-copy p { font-size: .58rem !important; }
  .gst-page-contact-grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    gap: 10px !important;
  }
  .gst-contact-panel { padding: 14px !important; }
  .gst-page-step {
    grid-template-columns: 42px minmax(0, .7fr) minmax(0, 1.4fr) !important;
    gap: 9px !important;
    padding: 18px 0 !important;
  }
  .gst-page-step p { grid-column: auto !important; font-size: .62rem !important; }
  .gst-page-step h3 { font-size: clamp(.88rem, 3.8vw, 1.25rem) !important; }

  /* About page hero: retain the desktop inline action relationship. */
  .gst-about-pulse-actions { width: auto !important; flex-wrap: nowrap !important; }
  .gst-about-pulse-btn { flex: 0 1 auto !important; max-width: none !important; }

  /* Process/Portfolio/Careers hero layouts keep their desktop geometry. */
  .gst-portfolio-bottom {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
    gap: 14px !important;
  }
  .gst-portfolio-bottom p { justify-self: end !important; }
  .gst-portfolio-search {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    border-radius: 999px !important;
    padding-right: 6px !important;
  }
  .gst-portfolio-search button {
    grid-column: auto !important;
    width: auto !important;
    padding-inline: 11px !important;
  }
  .gst-careers-tailark-shell {
    width: calc(100% - 20px) !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    min-height: 78svh !important;
    padding: 92px 0 42px !important;
  }
  .gst-careers-tailark-copy { padding-right: 8px !important; }
  .gst-careers-tailark-media {
    inset: 70px -12vw 36px 45% !important;
    height: auto !important;
    border-radius: 18px 0 0 18px !important;
  }
  .gst-careers-tailark-copy h1 { font-size: clamp(1.9rem, 8vw, 3rem) !important; }
  .gst-careers-email {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    margin-top: 18px !important;
  }
  .gst-careers-email button {
    grid-column: auto !important;
    width: auto !important;
    padding-inline: 10px !important;
  }
  .gst-careers-points { display: flex !important; gap: 9px !important; }

  /* Press hero keeps its desktop text/image split. */
  .press-diced-hero { min-height: 78svh !important; padding: 92px 12px 46px !important; }
  .press-diced-inner {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: 12px !important;
  }
  .press-diced-copy h1 { font-size: clamp(1.95rem, 8.3vw, 3.25rem) !important; }
  .press-diced-copy p { font-size: .67rem !important; line-height: 1.48 !important; }
  .press-diced-grid { gap: 6px !important; }

  /* Shared service/editorial pages: preserve desktop grid counts. */
  .intro { padding: 54px 0 !important; }
  .intro-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    gap: 12px !important;
  }
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .card-grid,
  .editorial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .card { min-height: 210px !important; padding: 13px !important; }
  .card h3 { font-size: clamp(.85rem, 3.7vw, 1.2rem) !important; }
  .card p { font-size: .58rem !important; line-height: 1.45 !important; }
  .feature-media { min-width: 0; }
  .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .metric { min-height: 118px !important; padding: 10px !important; border-bottom: 0 !important; }
  .metric:nth-child(2) { border-right: 1px solid var(--card-border) !important; }
  .metric b { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; }
  .metric span { font-size: 6px !important; }

  /* Website-development page: keep the desktop heading pairings and stats. */
  .anatomy-head,
  .projects-heading {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
    gap: 14px !important;
  }
  .performance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .performance-item { min-height: 130px !important; padding: 10px !important; border-bottom: 0 !important; }
  .performance-item:nth-child(2) { border-right: 1px solid rgba(58,3,1,.16) !important; }

  /* Legal-page content grids also remain multi-column when those classes exist. */
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .process:not(.process-sticky) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 430px) {
  /* Very narrow phones still keep the desktop hero composition; only scale it. */
  #hero.hero { height: clamp(410px, 60svh, 500px) !important; }
  #hero .content { padding-top: 58px !important; padding-bottom: 10px !important; }
  #hero h1.headline { font-size: clamp(1.8rem, 7.8vw, 2.35rem) !important; }
  #hero .sub { font-size: clamp(.68rem, 2.65vw, .8rem) !important; }

  /* Very narrow phones still keep the composition; only density is reduced. */
  #services .service-hero,
  #services .service-sticky { min-height: 45svh; }
  .gst-page-card { min-height: 166px !important; padding: 10px !important; }
  .card { min-height: 190px !important; padding: 10px !important; }
  .why-showcase-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .62fr) !important; }
  .why-image-frame { width: 88% !important; }
}

/* ================================================================
   v20 MOBILE-ONLY HOMEPAGE REFINEMENTS
   Keep desktop untouched. The Why Gatespark scroll story becomes the
   compact diagonal card sketched by the client, and About becomes copy-only.
   ================================================================ */
@media (max-width: 899px) {
  /* ABOUT GATESPARK: remove the side image on phones and let the original
     copy use the full card width. Desktop remains unchanged. */
  .about-flow .about-media {
    display: none !important;
  }
  .about-flow .about-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  .about-flow .about-copy {
    width: 100% !important;
    max-width: none !important;
  }

  /* WHY GATESPARK: mobile-only diagonal story card. The existing four
     reasons still change with page scroll, but the composition follows the
     supplied sketch instead of the desktop two-column panel. */
  .why-showcase {
    height: 260svh !important;
    padding: 0 !important;
    background: var(--maroon) !important;
  }
  .why-showcase-sticky {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(54px, 8svh, 76px) 12px 16px !important;
    background: var(--maroon) !important;
    overflow: hidden !important;
  }
  .why-showcase-grid {
    position: relative !important;
    display: block !important;
    width: min(92vw, 460px) !important;
    height: clamp(440px, 72svh, 620px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border: 1px solid rgba(78, 4, 1, .62) !important;
    border-radius: 14px !important;
    background: var(--white) !important;
    color: var(--ink) !important;
    box-shadow: 0 22px 60px rgba(18, 0, 0, .34) !important;
  }
  .why-showcase-copy {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: block !important;
    padding: 24px 20px 18px !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none;
  }
  .why-copy-stage {
    position: relative !important;
    width: 100% !important;
    height: 44% !important;
    min-height: 0 !important;
    display: block !important;
  }
  .why-feature {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    transform: translateY(18px) !important;
  }
  .why-feature.is-active {
    transform: translateY(0) !important;
  }
  .why-showcase .why-feature h2 {
    width: min(88%, 330px) !important;
    max-width: none !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: clamp(1.55rem, 7.4vw, 2.25rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
  }
  .why-feature p {
    width: min(82%, 310px) !important;
    max-width: none !important;
    margin: 12px 0 0 !important;
    color: rgba(58, 3, 1, .76) !important;
    font-size: clamp(.72rem, 3vw, .88rem) !important;
    line-height: 1.42 !important;
  }
  .why-pagination {
    top: auto !important;
    right: 18px !important;
    bottom: calc(56% + 8px) !important;
    left: auto !important;
    z-index: 8 !important;
    gap: 4px !important;
    pointer-events: auto;
  }
  .why-page {
    width: 14px !important;
    height: 3px !important;
    background: rgba(58, 3, 1, .24) !important;
  }
  .why-page.is-active {
    width: 30px !important;
    background: var(--maroon) !important;
  }
  .why-showcase-visual {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    overflow: hidden !important;
    pointer-events: none;
  }
  .why-grid-pattern {
    display: none !important;
  }
  .why-image-frame {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: 62% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--maroon) !important;
    box-shadow: none !important;
    clip-path: polygon(0 42%, 100% 8%, 100% 100%, 0 100%) !important;
    filter: saturate(.9) contrast(1.02);
  }
  .why-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(78,4,1,.04), rgba(78,4,1,.18));
  }
  .why-image-track,
  .why-image-track figure,
  .why-image-track img {
    width: 100% !important;
  }
  .why-image-track {
    height: 100% !important;
  }
  .why-image-track figure {
    height: 100% !important;
  }
  .why-image-track img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .why-showcase-cta {
    left: 50% !important;
    right: auto !important;
    bottom: 16px !important;
    z-index: 10 !important;
    min-height: 34px !important;
    padding: 0 17px !important;
    border: 1px solid rgba(254,251,243,.72) !important;
    background: rgba(58,3,1,.88) !important;
    color: var(--white) !important;
    font-size: .58rem !important;
    transform: translateX(-50%) !important;
    pointer-events: auto;
    backdrop-filter: blur(8px);
  }
  .why-showcase-cta:hover {
    transform: translate(-50%, -2px) !important;
  }
}

@media (max-width: 480px) {
  .why-showcase-grid {
    width: min(94vw, 430px) !important;
    height: clamp(420px, 70svh, 560px) !important;
  }
  .why-showcase-copy { padding: 20px 17px 16px !important; }
  .why-showcase .why-feature h2 { width: 92% !important; }
  .why-feature p { width: 86% !important; }
}