/* ==========================================================================
   Rigorous Responsive Overrides for Kshitij Swarup Portfolio
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --gutter: 24px;
    --font-scale: 0.8;
    --section-y: 80px;
  }

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

  /* ── 1. GLOBAL LAYOUT COLLAPSE ── */
  /* Any element that uses grid layout gets forced to a single column on mobile */
  [class*="grid"],
  [class*="split"],
  .hero-stage, 
  .hero-stats,
  .hero-d,
  .hero-foot,
  .hero-bottom,
  .stats,
  .about-content,
  .ft-grid,
  .services-grid,
  .svc-list,
  .work-grid,
  .b-grid,
  .blogs-grid,
  .bg-grid,
  .archive-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* ── 2. GENERAL FLEX ROWS ── */
  /* Force flex rows to stack, except specific UI rows that should stay horizontal */
  [class*="-row"]:not(.link-row):not(.c-meta-row):not(.cb-status-row):not(.ft-b-receipt-row):not(.cd-info-row) {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: auto !important;
    gap: 16px !important;
  }

  /* ── 3. NAV ── */
  .nav {
    padding: 12px 0;
  }
  .nav > .container {
    flex-direction: column !important;
    gap: 16px;
    align-items: center;
  }
  .nav-pill {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 20px;
    gap: 16px;
    width: 100%;
  }

  /* ── 4. TYPOGRAPHY ── */
  .h-display {
    font-size: clamp(40px, 10vw, 56px) !important;
    line-height: 1.1;
    text-align: center;
  }
  .h-section, .archive-title {
    font-size: clamp(32px, 8vw, 42px) !important;
    text-align: center;
  }
  .foot-tagline, .foot-caption, .d-left, .about-sub, .archive-sub {
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 auto 16px !important;
  }

  /* ── 5. HERO FIXES ── */
  .hero {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding-top: 140px;
    padding-bottom: 60px;
    text-align: center;
  }
  .hero-orbits, .hero-comet, .orbit, .hl-floor-grid, .ho-floor-grid, .hk-grid {
    display: none !important; /* Hide complicated decorative absolute elements that overflow */
  }
  .hero-portrait {
    margin: 0 auto;
  }

  /* Flank cards (Live tag, mini profile) */
  .flank-card {
    position: static !important;
    margin: 0 auto !important;
    animation: none !important;
    justify-self: center !important;
    width: auto !important;
  }
  .flank-card.icon-card {
    flex-direction: row !important;
    padding: 12px 24px !important;
    height: auto !important;
  }

  /* ── 6. STATS & MISC ── */
  .hstat:not(:first-child)::before, .vrule {
    display: none !important; /* Remove vertical separators */
  }
  .foot-ctas, .d-stats {
    justify-content: center !important;
    align-items: center !important;
  }

  /* ── Hero bottom: stack CTA button below stats on mobile ── */
  .h-bottom {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .h-ctas {
    justify-content: center !important;
    width: 100% !important;
  }

  /* ── Hero stats row: prevent overflow on small phones (390px) ── */
  .h-stats-big {
    gap: 24px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
  }
  .h-bigstat-num {
    font-size: clamp(32px, 10vw, 48px) !important;
  }
  .h-bigstat-lbl {
    font-size: 10px !important;
  }

  /* ── Role pill: allow wrapping & cap width on small screens ── */
  .h-pill-combo {
    white-space: normal !important;
    flex-wrap: wrap !important;
    padding: 14px 20px !important;
    font-size: clamp(13px, 3.8vw, 18px) !important;
    gap: 10px !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  /* ── Contact F: stack Send Brief button below email input ── */
  .cf-pill {
    flex-direction: column !important;
    border-radius: 20px !important;
    padding: 16px !important;
    align-items: stretch !important;
    max-width: 100% !important;
  }
  .cf-pill input {
    padding: 10px 0 10px 8px !important;
    width: 100% !important;
  }
  .cf-btn {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 12px !important;
    margin-top: 8px !important;
  }
  
  .aside-quote {
    text-align: center;
    padding-left: 0;
  }
  .aside-quote::before {
    display: none; /* Hide vertical quote line */
  }

  /* Marquee */
  .marquee-track {
    gap: 32px;
    font-size: 24px !important;
  }
  .marquee-track span {
    gap: 32px;
  }

  /* Archive Page */
  .archive-shell {
    padding: 40px 20px 80px !important;
  }
  .archive-head {
    margin-bottom: 32px !important;
  }
  .ar-arrow {
    display: none !important; /* Hide arrows on mobile archive */
  }

  /* ── 7. MOBILE OVERFLOW & LAYOUT SWIPE FIXES ── */
  .site-orbits {
    display: none !important; /* Hide massive site orbits on mobile */
  }

  /* ── 8. NAVBAR COMPACT GRID LAYOUT ── */
  .nav {
    position: fixed !important;
    background: rgba(10, 13, 23, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 0 !important;
    pointer-events: auto !important;
  }
  .nav > .container {
    display: grid !important;
    grid-template-areas: 
      "brand btn"
      "pill pill" !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 0 16px !important;
  }
  .brand {
    grid-area: brand !important;
    font-size: 15px !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .nav .btn {
    grid-area: btn !important;
    font-size: 12px !important;
    height: 32px !important;
    padding: 0 14px !important;
    margin: 0 !important;
  }
  .nav-pill {
    grid-area: pill !important;
    display: flex !important;
    justify-content: center !important;
    padding: 4px 0 !important;
    gap: 16px !important;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .nav-pill a {
    font-size: 12px !important;
    opacity: 0.8 !important;
  }
  .hero {
    padding-top: 160px !important; /* Extra room so fixed stacked header doesn't overlap title */
  }

  /* ── 9. ABOUT SECTION D COLUMN COLLAPSE ── */
  .about-d-section {
    padding: 60px 0 !important;
  }
  .about-d {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .about-d .d-left {
    order: 1 !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .about-d .d-center {
    order: 2 !important;
    margin: 0 auto !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 320px !important; /* Limit width for nice portrait look */
  }
  .about-d .d-right {
    display: none !important;
  }
  .about-d .d-body, .about-d .d-greet, .about-d .d-name {
    text-align: center !important;
    margin: 0 auto !important;
  }
  .about-d .d-greet {
    margin-bottom: 8px !important;
  }
  .about-d .d-name {
    font-size: clamp(38px, 9vw, 52px) !important;
    line-height: 1.0 !important;
  }
  .about-d .d-highlight {
    text-align: center !important;
    margin: 12px auto !important;
    display: flex !important;
    justify-content: center !important;
  }
  .about-d .d-mark {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
  .about-d .d-cta {
    align-self: center !important;
    margin: 16px auto 0 !important;
  }
  .about-d .d-photo-wrap {
    padding: 12px !important; /* Slightly more compact border frame */
  }
  .about-d .d-photo-tag {
    font-size: 10px !important;
    padding: 8px 16px !important;
    bottom: -12px !important;
  }
  .about-d .d-side-stack {
    display: none !important; /* Hide absolute icons on side of photo as they clutter */
  }
  .about-d .d-meta-line, .about-d .d-role, .about-d .d-clients-cap {
    text-align: center !important;
  }
  .about-d .d-role {
    font-size: 24px !important;
    margin: 8px 0 !important;
  }
  .about-d .d-clients {
    align-items: center !important;
    margin-top: 8px !important;
  }

  /* ── 10. CREATORS SECTION (CLIENTS A) VERTICAL STACK ── */
  .clients {
    padding: 60px 0 !important;
  }
  .clients .head {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
  }
  .clients .sub {
    text-align: center !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .clients-a {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 420px !important; /* Center single column */
    margin: 0 auto !important;
  }
  .client-card {
    width: 100% !important;
  }
  .client-card .photo {
    aspect-ratio: 1.2 / 1 !important; /* Nice landscape aspect ratio for mobile */
  }

  /* ── 11. SERVICES UNPINNING & STATIC LAYOUT ── */
  .services-pinned, .services-pinned-b, .services-pinned-c {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 60px 0 !important;
  }
  .svc-pin {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .svc-pin .container {
    padding: 0 !important;
  }
  .svc-pin .head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 40px !important;
  }
  .svc-list, .svc-list-b, .svc-list-c {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }
  .svc-item, .svc-item-b, .svc-item-c {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    display: block !important;
    padding: 24px !important;
    border-radius: var(--r-card) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-align: left !important;
  }

  /* ── 12. MOBILE SPACING & FOOTER OVERRIDES (MAX 900PX) ── */
  /* Remove excessive blank spaces between sections/subsections on mobile */
  section,
  .blogs,
  .blogs-a-section,
  .blogs-b-section,
  .blogs-c-section,
  .blogs-d-section,
  .blogs-e-section,
  .blogs-f-section,
  .blogs-g-section,
  .blogs-h-section,
  .playbooks,
  .pb-a-section,
  .pb-b-section,
  .pb-c-section,
  .contact-a-section,
  .contact-b-section,
  .contact-c-section,
  .contact-d-section,
  .contact-e-section,
  .contact-f-section,
  .contact-g-section,
  .contact-h-section,
  .about-a,
  .about-b,
  .about-c,
  .about-d,
  .about-e,
  .about-f,
  .featured-t,
  .testimonials-section,
  .explore-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Tighten section sub-element spacings */
  .pb-a-section .pb-a-head {
    margin-bottom: 24px !important;
  }
  .pb-a-head-l {
    flex: 1 1 auto !important;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .bg-foot {
    margin-top: 24px !important;
  }
  .bg-head, .pb-b-masthead, .pb-c-head, .bg-b-head, .bg-c-head, .bg-e-head, .bg-f-head, .bg-g-masthead, .bg-h-head {
    margin-bottom: 24px !important;
  }

  /* Footer wordmark text overflow & stacking on mobile */
  .footer-big {
    margin-top: 36px !important;
    padding: 28px 0 20px !important;
  }
  .ft-wordmark {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 0 !important;
    text-align: center !important;
  }
  .ft-word {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    display: inline-block !important;
    width: auto !important;
    letter-spacing: -0.03em !important;
  }

  /* Omit navigate and operating from columns on mobile viewports */
  .ft-cols .ft-col:nth-child(1),
  .ft-cols .ft-col:nth-child(4) {
    display: none !important;
  }

  /* Footer column grid & links stacking */
  .ft-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    text-align: center !important;
  }
  .ft-col {
    align-items: center !important;
    gap: 6px !important;
  }
  .ft-col-h {
    margin-bottom: 2px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
  }
  .ft-col a {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }
  .ft-meta {
    font-size: 13.5px !important;
  }

  /* Footer bottom text & versions stacking */
  .ft-bottom {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    text-align: center !important;
    justify-content: center !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .ft-legal {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
  }
  .ft-version {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }
  .ft-fine {
    justify-self: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 11px !important;
  }
}

/* ── EVEN SMALLER SCREENS ── */
@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --font-scale: 0.7;
  }
  .nav-pill {
    gap: 12px;
    padding: 8px 16px;
  }
  .nav-pill a {
    font-size: 14px;
  }
  .btn {
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
  }

  /* Extra compact section padding for true mobile screens */
  section,
  .blogs,
  .blogs-a-section,
  .blogs-b-section,
  .blogs-c-section,
  .blogs-d-section,
  .blogs-e-section,
  .blogs-f-section,
  .blogs-g-section,
  .blogs-h-section,
  .playbooks,
  .pb-a-section,
  .pb-b-section,
  .pb-c-section,
  .contact-a-section,
  .contact-b-section,
  .contact-c-section,
  .contact-d-section,
  .contact-e-section,
  .contact-f-section,
  .contact-g-section,
  .contact-h-section,
  .about-a,
  .about-b,
  .about-c,
  .about-d,
  .about-e,
  .about-f,
  .featured-t,
  .testimonials-section,
  .explore-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Extra compact footer for very small screen mobile viewports */
  .footer-big {
    margin-top: 24px !important;
    padding: 20px 0 16px !important;
  }
  .ft-wordmark {
    padding: 8px 0 !important;
    gap: 8px !important;
  }
  .ft-word {
    font-size: clamp(20px, 6.5vw, 28px) !important;
  }
  .ft-cols {
    gap: 16px !important;
    padding: 14px 0 !important;
  }
  .ft-col {
    gap: 4px !important;
  }
  .ft-col a, .ft-meta {
    font-size: 12.5px !important;
  }
  .ft-bottom {
    gap: 6px !important;
    padding-top: 10px !important;
  }
}

/* ==========================================================================
   13. ABOUT PAGE RESPONSIVE OVERRIDES (MAX-WIDTH: 900PX)
   ========================================================================== */
@media (max-width: 900px) {
  /* Spacing, Layout & Graceful Word Wrapping */
  .ab-hero {
    padding-top: 180px !important; /* Extra padding to prevent stacked navigation overlap */
    padding-bottom: 60px !important;
    height: auto !important;
    min-height: auto !important;
    text-align: center !important;
  }

  /* Universal Responsive Text Wrap and Graceful Word Wrap */
  .ab-name,
  .ab-name-c,
  .ab-greet,
  .ab-greet-c,
  .ab-aka,
  .ab-aka-c,
  .ab-hero-body,
  .ab-hero-body-c,
  .ab-honest-cursive,
  .ab-honest-quote,
  .ab-honest-lead,
  .ab-honest-cols,
  .ab-honest-c-lede,
  .ab-honest-c-body,
  .ab-cas-desc,
  .ab-cas-title-text,
  .ab-bento-b,
  .ab-stick-b {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-wrap: pretty !important;
    max-width: 100% !important;
  }

  .ab-hero-body,
  .ab-hero-body-c {
    max-width: min(520px, 92vw) !important;
    margin: 12px auto !important;
    padding: 0 16px !important;
    text-align: center !important;
    line-height: 1.65 !important;
  }

  /* Hero C — Centered Columns & Typography Clamping */
  .ab-hero-c-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    min-height: auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }
  .ab-hero-c-left {
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important; /* Perfect Center: remove custom padding to align exactly with grid center */
  }
  .ab-greet-c {
    font-size: clamp(24px, 5vw, 32px) !important;
    margin-bottom: 8px !important;
  }
  .ab-name-c {
    font-size: clamp(42px, 8.5vw, 68px) !important;
    align-items: center !important;
    text-align: center !important;
    line-height: 0.96 !important;
  }
  .ab-aka-c {
    font-size: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 12px 0 !important;
    line-height: 1.4 !important;
  }
  .ab-aka-tail {
    margin-left: 0 !important;
    display: block !important;
  }
  .ab-hero-c-meta {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: 100% !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .ab-hero-c-meta-row {
    align-items: center !important;
    text-align: center !important;
  }

  /* Orbital Portrait Dynamic Center-Alignment & Scale (Perfect Fitting) */
  .ab-hero-c-right {
    min-height: 420px !important;
    height: 420px !important;
    margin: 20px auto 68px !important; /* Raised to 68px to push the subsequent Honest section further down for a spacious look */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important; /* PERFECT FIX: clips layout footprint of 540px orbits, prevents stretching! */
    position: relative !important;
  }
  .ab-orb {
    width: 540px !important;
    height: 540px !important;
    transform: scale(min(0.68, calc((100vw - 32px) / 540))) !important;
    transform-origin: center center !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
  }
  .ab-orb-stat {
    padding: 8px 14px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  .ab-orb-stat-num {
    font-size: 18px !important;
  }

  /* Hide the "50k+ built with founders" orbital badge on mobile to keep the layout clean */
  .ab-orb-stat-br {
    display: none !important;
  }
  
  /* Outdoors Photo Scatter Stack (Fun Pics A) */
  .ab-fun-strip {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    padding-top: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: auto !important;
  }
  .ab-fun-card {
    margin: 0 !important;
    width: 250px !important;
    transform-origin: center center !important;
  }
  /* Restore tilted/organic rotate angles vertically down */
  .ab-fun-card-1 { transform: rotate(-8deg) !important; }
  .ab-fun-card-2 { transform: rotate(4deg) !important; }
  .ab-fun-card-3 { transform: rotate(-3deg) !important; }
  .ab-fun-card-4 { transform: rotate(6deg) !important; }
  
  /* Hide absolute decorative elements that overflow screen boundaries */
  .ab-fun-bird, 
  .ab-deco {
    display: none !important;
  }

  /* Calendar Staircase Cascade Collapse (Calendar C) */
  .ab-cal-c {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ab-cas {
    grid-column: auto !important;
  }
  .ab-cas-card {
    padding: 16px 20px 16px 12px !important;
  }
  .ab-cas-title {
    font-size: 18px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .ab-cas-desc {
    font-size: 13.5px !important;
  }
  .ab-cas-link {
    display: none !important; /* Hide dashed connector lines on mobile/tablet */
  }

  /* Calendar Sticky Cards & Bento Responsive Collapse (Calendar A & B) */
  .ab-cal-a {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }
  .ab-stick {
    min-height: auto !important;
  }
  .ab-cal-b {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
  }
  .ab-bento {
    grid-column: auto !important;
  }

  /* Instagram Frame Sizing & Text adjustments (Hero A) */
  .ab-insta {
    max-width: 100% !important;
    width: min(340px, 90vw) !important;
  }
  .ab-hero-stamp {
    transform: scale(0.85) !important;
    transform-origin: top right !important;
  }

  /* Honest Section Layout Collapse (Honest A, B & C) */
  .ab-honest-cursive {
    text-align: center !important;
    margin-bottom: 24px !important;
  }
  .ab-honest-quote p {
    font-size: 28px !important;
    text-align: center !important;
  }
  .ab-honest-split {
    gap: 32px !important;
  }
  
  /* Honest C Boxed Variant Overrides */
  .ab-honest-c-box {
    padding: 24px 20px 24px !important;
  }
  .ab-honest-c-lede {
    font-size: clamp(24px, 6vw, 36px) !important;
    line-height: 1.2 !important;
  }
  .ab-honest-c-meta {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .ab-honest-c-meta > div {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* ==========================================================================
     WORK PAGE RESPONSIVE OVERRIDES (MAX-WIDTH: 900PX)
     ========================================================================== */
  .wk-hero {
    padding-top: 150px !important;
    padding-bottom: 60px !important;
    text-align: center !important;
    min-height: auto !important;
  }
  .wk-hero-a {
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }
  .wk-hero-a-eyebrow {
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .wk-hero-a-title {
    font-size: clamp(38px, 9vw, 54px) !important;
    line-height: 1.1 !important;
    align-items: center !important;
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .wk-hero-a-line-2 {
    margin-left: 0 !important;
  }
  .wk-hero-a-body {
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.6 !important;
    margin: 16px auto 0 !important;
    padding: 0 16px !important;
    text-align: center !important;
    max-width: min(560px, 92vw) !important;
  }
  .wk-hero-a-meta {
    align-self: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 10px 18px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    margin: 20px auto 0 !important;
    width: auto !important;
    max-width: 90% !important;
    display: inline-flex !important;
  }
  .wk-hero-a-ctas {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 24px !important;
  }
  .wk-hero-a-ctas .btn {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    height: auto !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .wk-link-ghost {
    display: inline-block !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    margin-top: 4px !important;
  }

  /* Rooms / Polaroids vertical stack */
  .ab-pics-h {
    flex-direction: column !important;
    align-items: center !important;
    gap: 48px !important;
    padding: 32px 0 !important;
    min-height: auto !important;
  }
  .ab-php {
    margin: 0 auto !important;
    transform: none !important;
    transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease;
  }
  .ab-php-1 { transform: rotate(-3deg) !important; }
  .ab-php-2 { transform: rotate(2deg) !important; }
  .ab-php-3 { transform: rotate(-2deg) !important; }
  
  /* Disable sticky hover/focus flip rotations on mobile touch viewports */
  .ab-php:hover .ab-php-inner,
  .ab-php:focus-within .ab-php-inner {
    transform: none !important;
  }
  /* Rely strictly on tapped/clicked state */
  .ab-php.flipped .ab-php-inner {
    transform: rotateY(180deg) !important;
  }
  .ab-php.flipped {
    transform: rotate(0deg) !important;
  }
  .ab-php:hover {
    transform: translateY(-8px) rotate(0deg) scale(1.02) !important;
  }
  .ab-php-scribble {
    position: static !important;
    margin-top: 16px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }

  /* Right fit mobile centering */
  .wk-fit {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .wk-fit-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }
  .wk-fit-card {
    min-height: auto !important;
    padding: 24px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .wk-fit-card-ico {
    margin: 0 auto !important;
  }
  .wk-fit-card-foot {
    justify-content: center !important;
    width: 100% !important;
  }
  .wk-fit-thread-d {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 24px !important;
    gap: 12px !important;
    margin-top: 40px !important;
  }
  .wk-fit-thread-d-sign {
    justify-content: center !important;
    margin-top: 8px !important;
    width: 100% !important;
  }

  /* Pinned / animated elements static collapse */
  .wk-svc-mobile {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    height: auto !important;
  }
  .wk-svc-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-top: 32px;
  }
  .wk-svc-mobile-card {
    position: relative;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
  }
  .wk-svc-mobile-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .wk-svc-mobile-card-num {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-size: 32px;
    color: var(--accent);
  }
  .wk-svc-mobile-card-tag {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 4px 10px;
    border: 1px solid rgba(117,155,200,0.3);
    border-radius: 999px;
    background: rgba(117,155,200,0.06);
  }
  .wk-svc-mobile-card-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(117,155,200,0.12);
    color: var(--accent);
  }
  .wk-svc-mobile-card-ico svg {
    width: 24px;
    height: 24px;
  }
  .wk-svc-mobile-card-t {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.015em;
    color: var(--off-white);
    margin: 0;
    line-height: 1.2;
    text-wrap: pretty;
  }
  .wk-svc-mobile-card-b {
    font-family: "Afacad Flux", sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(245,245,245,0.75);
    margin: 0;
    text-wrap: pretty;
  }
  .wk-svc-mobile-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .wk-svc-mobile-card-list li {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: rgba(245,245,245,0.8);
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-wrap: pretty;
  }
  .wk-svc-mobile-card-bullet {
    color: var(--accent);
    font-weight: 500;
  }

  /* Process section vertical subway route styling */
  .wk-proc {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .wk-proc-route {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 24px 0 0 !important;
  }
  .wk-proc-route-svg {
    display: none !important; /* Hide horizontal subway svg line */
  }
  .wk-proc-stop {
    align-items: center !important;
    text-align: center !important;
    padding: 0 16px !important;
  }
  .wk-proc-stop-b {
    margin: 8px auto 0 !important;
    max-width: 100% !important;
    text-wrap: pretty;
  }

  /* Form & Deliverables J-Split styling */
  .wk-form-section-j {
    padding: 52px 0 !important;
  }
  .wk-form-section-j-card {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 32px 24px !important;
    border-radius: 20px !important;
  }
  .wk-form-section-j-l {
    align-items: center !important;
    text-align: center !important;
  }
  .wk-form-section-j-h {
    text-align: center !important;
    font-size: clamp(36px, 8vw, 48px) !important;
  }
  .wk-form-section-j-sub {
    text-align: center !important;
    margin: 0 auto !important;
  }
  .wk-form-section-j-meta {
    width: 100% !important;
  }
  .wk-form-section-j-meta > div {
    font-size: 12px !important;
  }
  .wk-form-section-j-handnote-outside {
    margin-top: 24px !important;
    margin-right: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .wk-form-section-j-handnote {
    transform: rotate(0deg) !important;
    justify-content: center !important;
  }

  /* ── HERO EMPTY SPACE FIX (mobile/tablet only) ── */
  /* Remove excessive gap between role pills and stats/CTA on mobile */
  .hero-h .h-bottom,
  .hero-h-section .h-bottom {
    margin-top: 28px !important;
    padding-top: 0 !important;
  }
  .hero-h .h-pills,
  .hero-h-section .h-pills {
    margin-top: 16px !important;
  }
  /* Collapse any extra height from background decorative layers that inflate hero height */
  .hero-l-section.hero-r-section,
  .hero-l-section {
    min-height: auto !important;
    height: auto !important;
    padding-top: 140px !important;
    padding-bottom: 48px !important;
  }
  .hero-h,
  .hero-i {
    gap: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Remove the big bottom gap caused by the grid floor element on mobile */
  .hl-floor,
  .hl-floor-grid,
  .hl-floor-fade {
    height: 0 !important;
    opacity: 0 !important;
  }

  /* ── CONTACT F (Drop your email) COMPACT MOBILE STYLE ── */
  /* Transform the tall email section into a compact attractive box */
  .contact-f-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .cf-wrap {
    max-width: min(480px, 92vw) !important;
    margin: 0 auto !important;
    padding: 28px 24px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    text-align: center !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25) !important;
  }
  .cf-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 10px !important;
    opacity: 0.6 !important;
  }
  .cf-headline {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    line-height: 1.35 !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
  }
  .cf-pill {
    gap: 8px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
  }
  .cf-pill input {
    font-size: 13px !important;
    padding: 6px 4px !important;
  }
  .cf-btn {
    font-size: 13px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    height: auto !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
  }
  .cf-reply {
    font-size: 11px !important;
    margin-top: 14px !important;
    opacity: 0.55 !important;
  }
  .cf-meta {
    font-size: 11px !important;
    margin-top: 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    opacity: 0.5 !important;
  }
}