/* ═══════════════════════════════════════════════════════
   AVORINO — RESPONSIVE OVERRIDES (v3)
   Comprehensive mobile/tablet breakpoints for all pages.
   Breakpoints: 991px (tablet), 767px (mobile-l), 478px (mobile-p)
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   TABLET  (≤ 991px)
   ═══════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {

  /* ── Section padding: 128/80 → 80/48 ── */
  .av-section-warm,
  .av-section-dark,
  .av-section-cream {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* ── Heroes: reduce top padding + min-height ── */
  .sv-hero, .adu-hero, .ct-hero, .est-hero,
  .rv-hero, .fin-hero, .inv-hero, .svsub-hero,
  .cy-hero, .pl-hero, .tl-hero, .about-hero,
  .blog-hero, .bt-hero, .sch-hero {
    padding-top: 120px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    min-height: 45vh !important;
  }

  /* ── Hero content containers: widen on tablet ── */
  .sv-hero-content,
  .adu-hero-content,
  .ct-hero-content,
  .est-hero-content,
  .inv-hero-content,
  .svsub-hero-content,
  .cy-hero-content,
  .pl-hero-content,
  .tl-hero-content,
  .blog-hero-content,
  .sch-hero-content {
    max-width: 100% !important;
  }

  /* ── Split layouts → single column ── */
  .av-split-60-40,
  .av-split-40-60,
  .fin-hero,
  .cy-hero,
  .adu-hero {
    grid-template-columns: 1fr !important;
    grid-column-gap: 48px !important;
  }

  /* ── Alternating image+text rows → single column ── */
  .adu-type-row,
  .svsub-narr-row {
    grid-template-columns: 1fr !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 32px !important;
  }

  /* ── 3-col grids → 2-col ── */
  .sv-grid,
  .av-grid-3col,
  .about-stats-grid,
  .pl-grid,
  .blog-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── 2-col grids: reduce gap ── */
  .av-grid-2col,
  .rv-grid,
  .av-form-grid-2,
  .tl-related-grid {
    grid-column-gap: 32px !important;
    grid-row-gap: 32px !important;
  }

  /* ── Definition rows: tighten label column ── */
  .cy-reg-row {
    grid-template-columns: 160px 1fr !important;
    grid-column-gap: 32px !important;
  }

  /* ── Step rows: keep layout but tighten ── */
  .adu-step-row,
  .cy-step-row {
    grid-column-gap: 16px !important;
  }

  /* ── Image placeholders: reduce heights ── */
  .av-img-tall {
    min-height: 400px !important;
  }

  /* ── CTA: tighten ── */
  .av-cta {
    padding: 32px !important;
  }
  .av-cta-container {
    padding: 64px 48px !important;
    min-height: 40vh !important;
  }

  /* ── Cards: tighter padding ── */
  .sv-card-content {
    padding: 36px 32px !important;
  }
  .about-process-card {
    max-width: 400px !important;
    padding: 40px 36px !important;
  }

  /* ── Contact / Estimate info column: unstick ── */
  .ct-info-col,
  .est-info-col {
    position: relative !important;
    top: auto !important;
  }

  /* ── Calendly widget: reduce height ── */
  .av-cal-widget {
    min-height: 900px !important;
  }

  /* ── Blog cards: tighter ── */
  .blog-card-body {
    padding: 28px !important;
  }
  .blog-card-img-wrap {
    height: 200px !important;
  }

  /* ── Blog template: tighter ── */
  .bt-img-wrap {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .bt-article {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* ── Spacing reductions ── */
  .av-mb-96, .sv-mb-96 {
    margin-bottom: 56px !important;
  }

  /* ── Overview paragraphs: allow full width ── */
  .cy-overview,
  .inv-overview {
    max-width: 100% !important;
  }

  /* ═══════════════════════════════════════════
     HOMEPAGE — tablet overrides
     ═══════════════════════════════════════════ */

  /* ── Hero: cream frame with reduced bottom ── */
  html body .hero,
  body .hero {
    padding: 0 24px 10px !important;
  }
  .hero-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
  .hero-content {
    position: relative;
    z-index: 2;
  }
  .hero-subtitle {
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
  }
  .hero .btn-pill {
    font-size: 14px !important;
    padding: 16px 32px !important;
  }

  /* ── About: contain heading + body within viewport ── */
  .about-grid {
    grid-template-columns: 1fr !important;
  }
  .about-heading {
    font-size: clamp(48px, 7vw, 72px) !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .about-body,
  .about-body-wrap,
  .about-link {
    max-width: 100% !important;
  }

  /* ── Services: horizontal scroll with snap ── */
  .services-track {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
  }
  .service-card {
    scroll-snap-align: start;
    flex-shrink: 0 !important;
    width: 75vw !important;
    max-width: 360px !important;
  }

  /* ── Stats: 2-column grid, scale flip cards, readable labels ── */
  .stats {
    padding: 80px 24px !important;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
  .flip-card {
    width: 52px !important;
    height: 72px !important;
  }
  .flip-card-top,
  .flip-card-bottom {
    font-size: 36px !important;
  }
  .stat-suffix {
    font-size: 28px !important;
  }
  .stat-separator {
    font-size: 28px !important;
  }
  .stat-label {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
  .stat-digits {
    gap: 4px !important;
  }

  /* ── Process: block layout + show progress bar below steps ── */
  .process {
    padding: 80px 24px 64px !important;
  }
  .process-header {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }
  .process-stage {
    display: block !important;
    min-height: auto !important;
  }
  .process-num {
    display: none !important;
  }
  .process-stage > .process-vis,
  section.process .process-vis,
  .process .process-vis {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    min-height: 200px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 24px !important;
    /* Reset grid positioning for block flow */
    grid-column: unset !important;
    grid-row: unset !important;
  }
  .process-vis .process-vis-illus {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .process-vis .process-vis-illus:not(.is-active) {
    display: none !important;
  }
  .process-vis .process-vis-svg {
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
  }
  .process-slides {
    width: 100% !important;
    position: relative !important;
    min-height: 160px !important;
  }
  .process-slide {
    position: relative !important;
    width: 100% !important;
  }
  .process-slide:not(.is-active) {
    display: none !important;
  }
  .process-slide-title {
    font-size: clamp(28px, 5vw, 40px) !important;
    margin-bottom: 16px !important;
  }
  .process-slide-body {
    font-size: 15px !important;
    max-width: 100% !important;
  }
  /* Show the progress bar below steps */
  .process-bar {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: 48px !important;
    margin-top: 32px !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* Reset grid properties for block context */
    grid-column: unset !important;
    grid-row: unset !important;
  }
  .process-bar-track {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    transform: translateY(-50%) !important;
  }
  .process-bar-fill {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
  }
  .process-bar-dot {
    position: relative !important;
    z-index: 1 !important;
  }

  /* ── Tools: stack panels vertically as tappable cards ── */
  .tools {
    padding: 80px 24px !important;
  }
  .tools-header {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 48px !important;
  }
  .tools-intro {
    max-width: 100% !important;
  }
  .tools-accordion {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    gap: 12px !important;
  }
  .tool-panel {
    flex: none !important;
    min-height: 120px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 24px 28px !important;
    text-align: left !important;
  }
  .tool-panel + .tool-panel {
    border-left: none !important;
    border-top: 1px solid rgba(201, 169, 110, 0.08) !important;
  }
  /* Hide hover-only elements */
  .tool-panel-num {
    display: none !important;
  }
  .tool-preview {
    display: none !important;
  }
  .tool-visual {
    display: none !important;
  }
  /* Re-orient the label — remove rotation, position static */
  .tool-panel-label {
    position: static !important;
    transform: none !important;
    white-space: normal !important;
    opacity: 1 !important;
    margin-bottom: 8px !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
  }
  .tool-panel-label-text {
    font-size: 22px !important;
    opacity: 1 !important;
  }
  /* Show content area directly (Webflow hides it on mobile) */
  .tool-panel-content {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }
  .tool-panel-content::before {
    display: none !important;
  }
  .tool-name {
    display: none !important;
  }
  .tool-desc {
    font-size: 14px !important;
    opacity: 0.55 !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }
  .tool-cta {
    opacity: 1 !important;
    font-size: 12px !important;
    color: rgba(201, 169, 110, 0.8) !important;
  }
  .tool-arrow {
    width: 16px !important;
    height: 16px !important;
  }
  /* Gold accent line always visible */
  .tool-panel::after {
    transform: scaleX(1) !important;
  }
}


/* ═══════════════════════════════════════════════════════
   MOBILE LANDSCAPE  (≤ 767px)
   ═══════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {

  /* ── Section padding: → 56/24 ── */
  .av-section-warm,
  .av-section-dark,
  .av-section-cream {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Heroes ── */
  .sv-hero, .adu-hero, .ct-hero, .est-hero,
  .rv-hero, .fin-hero, .inv-hero, .svsub-hero,
  .cy-hero, .pl-hero, .tl-hero, .about-hero,
  .blog-hero, .bt-hero, .sch-hero {
    padding-top: 100px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    min-height: 36vh !important;
  }

  /* ── ALL multi-col grids → 1-col ── */
  .sv-grid,
  .av-grid-3col,
  .av-grid-2col,
  .rv-grid,
  .pl-grid,
  .tl-related-grid,
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Form grids → 1-col ── */
  .av-form-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Definition rows → stacked ── */
  .cy-reg-row {
    grid-template-columns: 1fr !important;
    grid-row-gap: 8px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* ── Step rows → stacked ── */
  .adu-step-row,
  .cy-step-row {
    grid-template-columns: 1fr !important;
    grid-row-gap: 8px !important;
  }
  .adu-step-num-col,
  .cy-step-num-col {
    justify-content: flex-start !important;
  }

  /* ── CTA ── */
  .av-cta {
    padding: 20px !important;
  }
  .av-cta-container {
    padding: 48px 24px !important;
    min-height: 32vh !important;
  }
  .av-cta-heading {
    font-size: clamp(28px, 6vw, 40px) !important;
  }
  .av-cta-btns {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ── Service cards ── */
  .sv-card {
    min-height: 300px !important;
  }
  .sv-card-content {
    padding: 32px 24px !important;
  }

  /* ── Process cards ── */
  .about-process-card {
    max-width: 320px !important;
    padding: 32px 28px !important;
  }
  .about-process-card-title {
    font-size: 24px !important;
  }

  /* ── Image placeholders ── */
  .av-img-hero {
    min-height: 300px !important;
  }
  .av-img-tall {
    min-height: 300px !important;
  }
  .av-img-landscape {
    min-height: 250px !important;
  }
  .about-story-img {
    min-height: 220px !important;
  }

  /* ── Review cards ── */
  .rv-card {
    padding: 32px 24px !important;
  }

  /* ── Forms: prevent iOS zoom (16px minimum) ── */
  .av-input-clean,
  .av-textarea-clean,
  .av-select-clean {
    font-size: 16px !important;
  }

  /* ── Spacing reductions ── */
  .av-mb-96, .sv-mb-96 {
    margin-bottom: 40px !important;
  }
  .av-mb-64, .sv-mb-64 {
    margin-bottom: 28px !important;
  }

  /* ── Tool embed: reduce iframe height ── */
  .tl-embed {
    min-height: 400px !important;
  }

  /* ── About values zigzag: stack ── */
  .about-values-row {
    flex-direction: column !important;
  }
  .about-values-spacer {
    display: none !important;
  }

  /* ── Contact / Estimate: unstick info column, reduce spacing ── */
  .ct-info-col,
  .est-info-col {
    position: relative !important;
    top: auto !important;
  }
  .ct-info-phone {
    font-size: clamp(24px, 5vw, 32px) !important;
  }
  .est-step-item {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* ── Financing: hero content full-width ── */
  .fin-hero-content {
    max-width: 100% !important;
  }

  /* ── Investment: reduce stat size, centered layout ── */
  .inv-hero-stat {
    font-size: clamp(56px, 14vw, 96px) !important;
  }
  .inv-hero-stat-label {
    margin-bottom: 32px !important;
  }

  /* ── Calendly widget: reduce height for mobile ── */
  .av-cal-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .av-cal-widget {
    min-height: 700px !important;
  }

  /* ── Blog: card layout adjustments ── */
  .blog-card-body {
    padding: 24px !important;
  }
  .blog-card-img-wrap {
    height: 180px !important;
  }
  .blog-card-title {
    font-size: 19px !important;
  }
  .blog-grid-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Blog template ── */
  .bt-hero-inner {
    max-width: 100% !important;
  }
  .bt-title {
    font-size: clamp(28px, 5vw, 42px) !important;
  }
  .bt-meta {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .bt-img-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .bt-article {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .bt-rich-text {
    font-size: 16px !important;
    line-height: 2.2 !important;
  }
  .bt-featured-img {
    max-width: 100% !important;
  }

  /* ── City ADU: overview and permit meta ── */
  .cy-overview {
    max-width: 100% !important;
    margin-bottom: 40px !important;
  }
  .cy-permit-meta {
    font-size: 12px !important;
  }

  /* ── Heading size overrides for inner pages ── */
  .av-heading-xl {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
  .av-heading-lg {
    font-size: clamp(28px, 6vw, 40px) !important;
  }

  /* ── Flex column gap reduction ── */
  .av-flex-col {
    grid-row-gap: 16px !important;
  }

  /* ── Cards: reduce padding ── */
  .av-card-dark,
  .av-card-light {
    padding: 40px 32px !important;
  }

  /* ═══════════════════════════════════════════
     HOMEPAGE — mobile-landscape overrides
     ═══════════════════════════════════════════ */

  /* ── Hero: tighter frame, minimal bottom ── */
  html body .hero,
  body .hero {
    padding: 0 16px 6px !important;
  }
  .hero-subtitle {
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
  }
  .hero .btn-pill {
    font-size: 14px !important;
    padding: 14px 28px !important;
  }

  /* ── About: scale heading for mobile ── */
  .about-heading {
    font-size: clamp(36px, 9vw, 56px) !important;
  }

  /* ── Services: wider cards on smaller screens ── */
  .service-card {
    width: 82vw !important;
    max-width: 340px !important;
  }

  /* ── Stats: smaller flip cards for mobile ── */
  .stats {
    padding: 64px 16px !important;
  }
  .stats-grid {
    gap: 24px 16px !important;
  }
  .flip-card {
    width: 44px !important;
    height: 60px !important;
  }
  .flip-card-top,
  .flip-card-bottom {
    font-size: 30px !important;
  }
  .stat-suffix {
    font-size: 22px !important;
  }
  .stat-separator {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  .stat-item {
    gap: 16px !important;
  }

  /* ── Process: tighter mobile layout ── */
  .process {
    padding: 64px 16px 48px !important;
  }
  .process-vis {
    min-height: 180px !important;
    margin-top: 20px !important;
  }
  .process-vis-svg {
    max-width: 180px !important;
  }
  .process-slide-title {
    font-size: clamp(24px, 6vw, 34px) !important;
  }
  .process-slide-body {
    font-size: 14px !important;
  }

  /* ── Tools: compact cards ── */
  .tools {
    padding: 64px 16px !important;
  }
  .tools-heading > div {
    font-size: clamp(28px, 7vw, 48px) !important;
  }
  .tools-intro {
    font-size: 15px !important;
  }
  .tool-panel {
    min-height: 100px !important;
    padding: 20px 24px !important;
  }
  .tool-panel-label-text {
    font-size: 20px !important;
  }
  .tool-desc {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   MOBILE PORTRAIT  (≤ 478px)
   ═══════════════════════════════════════════════════════ */
@media screen and (max-width: 478px) {

  /* ── Section padding: minimum ── */
  .av-section-warm,
  .av-section-dark,
  .av-section-cream {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Heroes: compact ── */
  .sv-hero, .adu-hero, .ct-hero, .est-hero,
  .rv-hero, .fin-hero, .inv-hero, .svsub-hero,
  .cy-hero, .pl-hero, .tl-hero, .about-hero,
  .blog-hero, .bt-hero, .sch-hero {
    padding-top: 80px !important;
    padding-bottom: 32px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: auto !important;
  }

  /* ── Service-sub hero overlay: tighter ── */
  .svsub-hero-overlay {
    padding: 24px 16px !important;
  }

  /* ── CTA: minimal ── */
  .av-cta {
    padding: 12px !important;
  }
  .av-cta-container {
    padding: 36px 16px !important;
    min-height: auto !important;
  }
  .av-cta-heading {
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  /* ── Service cards ── */
  .sv-card {
    min-height: 260px !important;
  }
  .sv-card-content {
    padding: 24px 20px !important;
  }
  .sv-card-title {
    font-size: 22px !important;
  }

  /* ── Process cards ── */
  .about-process-card {
    max-width: calc(100vw - 32px) !important;
    padding: 24px 20px !important;
  }
  .about-process-card-title {
    font-size: 20px !important;
  }
  .about-process-card-desc {
    font-size: 13px !important;
  }

  /* ── Buttons: full width ── */
  .av-btn-primary,
  .av-btn-outline,
  .av-cta-btn,
  .av-submit-btn {
    padding: 14px 28px !important;
    font-size: 13px !important;
    width: 100%;
    justify-content: center !important;
  }

  /* ── Review cards ── */
  .rv-card {
    padding: 24px 20px !important;
  }

  /* ── Image placeholders: further reduce ── */
  .av-img-hero {
    min-height: 220px !important;
  }
  .av-img-tall {
    min-height: 220px !important;
  }
  .av-img-landscape {
    min-height: 180px !important;
  }

  /* ── Spacing: minimal ── */
  .av-mb-96, .sv-mb-96 {
    margin-bottom: 32px !important;
  }
  .av-mb-64, .sv-mb-64 {
    margin-bottom: 24px !important;
  }

  /* ── Label: smaller ── */
  .av-label {
    font-size: 9px !important;
    letter-spacing: 0.25em !important;
    gap: 0 16px !important;
  }

  /* ── Tool embed ── */
  .tl-embed {
    min-height: 300px !important;
  }
  .tl-iframe {
    min-height: 300px !important;
  }

  /* ── ADU plan cards ── */
  .pl-card {
    padding: 20px !important;
  }

  /* ── Investment hero stat: reduce ── */
  .inv-hero-stat {
    font-size: clamp(48px, 12vw, 80px) !important;
  }
  .inv-hero-stat-label {
    font-size: 14px !important;
    margin-bottom: 24px !important;
  }

  /* ── Dividers: tighten ── */
  .av-divider,
  .av-divider-light {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  /* ── Contact / Estimate: compact ── */
  .ct-hero-content,
  .est-hero-content {
    max-width: 100% !important;
  }
  .ct-info-phone {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
  .ct-info-heading,
  .est-info-heading {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .est-step-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .est-step-note {
    margin-left: 0 !important;
  }

  /* ── Financing: compact ── */
  .fin-hero-content {
    max-width: 100% !important;
  }

  /* ── Service-sub: compact narrative ── */
  .svsub-narr-heading {
    font-size: clamp(24px, 6vw, 32px) !important;
  }

  /* ── City ADU: compact ── */
  .cy-overview {
    max-width: 100% !important;
    margin-bottom: 32px !important;
    font-size: 15px !important;
  }
  .cy-step-num {
    font-size: clamp(32px, 8vw, 44px) !important;
  }
  .cy-permit-meta {
    font-size: 11px !important;
  }

  /* ── Calendly: minimal ── */
  .av-cal-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .av-cal-heading {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .av-cal-widget {
    min-height: 600px !important;
  }

  /* ── Blog: compact cards ── */
  .blog-card-body {
    padding: 20px !important;
  }
  .blog-card-img-wrap {
    height: 160px !important;
  }
  .blog-card-title {
    font-size: 17px !important;
  }
  .blog-card-summary {
    font-size: 13px !important;
  }
  .blog-card-date {
    font-size: 9px !important;
  }
  .blog-grid-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Blog template: compact ── */
  .bt-title {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  .bt-meta {
    gap: 8px !important;
    font-size: 12px !important;
  }
  .bt-img-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bt-article {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bt-rich-text {
    font-size: 15px !important;
    line-height: 2 !important;
  }
  .bt-divider {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .bt-back-link {
    width: 100% !important;
    text-align: center !important;
  }

  /* ── Heading sizes: tightest ── */
  .av-heading-xl {
    font-size: clamp(28px, 9vw, 42px) !important;
  }
  .av-heading-lg {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .av-heading-md {
    font-size: clamp(20px, 5vw, 28px) !important;
  }

  /* ── Cards: minimal padding ── */
  .av-card-dark,
  .av-card-light {
    padding: 32px 20px !important;
  }

  /* ── Flex column: tighter gap ── */
  .av-flex-col {
    grid-row-gap: 14px !important;
  }

  /* ═══════════════════════════════════════════
     HOMEPAGE — mobile-portrait overrides
     ═══════════════════════════════════════════ */

  /* ── Hero: balanced frame with minimal bottom ── */
  html body section.hero,
  body .hero {
    padding: 0 14px 4px !important;
  }
  .hero-subtitle {
    font-size: 11px !important;
  }
  .hero .btn-pill {
    font-size: 13px !important;
    padding: 14px 24px !important;
  }

  /* ── About: tightest heading ── */
  .about-heading {
    font-size: clamp(28px, 10vw, 44px) !important;
  }

  /* ── Services: near full-width cards ── */
  .service-card {
    width: 85vw !important;
    max-width: none !important;
  }

  /* ── Stats: compact for small screens ── */
  .stats {
    padding: 48px 16px !important;
  }
  .stats-grid {
    gap: 20px 12px !important;
  }
  .flip-card {
    width: 36px !important;
    height: 52px !important;
  }
  .flip-card-top,
  .flip-card-bottom {
    font-size: 26px !important;
    border-radius: 4px !important;
  }
  .flip-card {
    border-radius: 4px !important;
  }
  .stat-suffix {
    font-size: 18px !important;
    margin-left: 2px !important;
  }
  .stat-separator {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }
  .stat-label {
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
  }
  .stat-item {
    gap: 12px !important;
  }
  .stat-digits {
    gap: 3px !important;
  }

  /* ── Process: minimal portrait ── */
  .process {
    padding: 48px 16px 40px !important;
  }
  .process-header {
    margin-bottom: 28px !important;
  }
  .process-slide-title {
    font-size: clamp(22px, 6vw, 30px) !important;
    margin-bottom: 12px !important;
  }
  .process-slide-body {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .process-slides {
    min-height: 140px !important;
  }
  .process-vis {
    min-height: 160px !important;
    margin-top: 16px !important;
  }
  .process-vis-svg {
    max-width: 160px !important;
  }
  .process-bar {
    margin-top: 24px !important;
  }

  /* ── Tools: minimal portrait ── */
  .tools {
    padding: 48px 16px !important;
  }
  .tools-header {
    margin-bottom: 32px !important;
  }
  .tools-heading > div {
    font-size: clamp(24px, 8vw, 40px) !important;
  }
  .tools-intro {
    font-size: 14px !important;
  }
  .tools-accordion {
    gap: 8px !important;
  }
  .tool-panel {
    min-height: 90px !important;
    padding: 16px 20px !important;
    border-radius: 10px !important;
  }
  .tool-panel-label-text {
    font-size: 18px !important;
  }
  .tool-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }
  .tool-cta {
    font-size: 11px !important;
  }
}