/*
 * Readability layer (UX audit, stage 1). Loaded after every theme stylesheet.
 * Sets floors only on text people read or tap: labels 12px, small print 13px,
 * card copy 14px, running text 15px (16px on phones), controls 44px on phones.
 * Mock-up art (hero stage, card previews) and the logo lockup are intentionally untouched.
 */

/* Labels and meta: uppercase labels stay small, but never below 12px. */
.eyebrow,.service-number,.process-number,.knowledge-number,.mega-index,.price-card-kicker span,.brand-card-top span,
.folio-tags span,.case-scope span,.journal-card .eyebrow,.growth-card .eyebrow,.form-intro span,.studio-rail-count,
.portfolio-filters button span,.hero-bottom span,.hero-bottom a{font-size:12px!important;letter-spacing:.08em}
.breadcrumbs,.breadcrumbs a,.breadcrumbs span{font-size:13px!important}

/* Small print: prices, hours, legal lines, form hints. */
.price-amount small,.price-gross,.contact-hours,.contact-availability span,.field-help,.mcweb-captcha small,
.footer-bottom,.footer-bottom span,.footer-bottom a,.footer-bottom button,.footer-top a,.text-button,
.mega-links small,.mega-footer,.mega-footer a,.reviews-note,.growth-hero-note,.stage-project-caption small{font-size:13px!important}
.consent-label,.consent-label span,.lead-form .consent-label,.contact-standalone .consent-label{font-size:13px!important;line-height:1.6!important}

/* Card and list copy. */
.service-row>p:not(.service-title),.folio-info>p:not(.folio-title),.price-description,.price-row-excluded,.price-exclusions p,.price-group-title p,
.price-row-detail li,.price-card li,.studio-capability p,.process-panel p,.growth-project p,.landing-form-intro,
.contact-form-heading p,.contact-location-heading p,.pricing-footnote,.case-gallery-heading p,.pricing-cost-grid p,
.site-footer p,.site-footer li,.site-footer a:not(.button):not(.footer-email),.mega-specialist a,.studio-brand-card .brand-card-name{font-size:14px!important;line-height:1.6}

/* Running text and section intros. */
.prose:not(.case-story) p:not(.knowledge-label),.prose:not(.case-story) li,.article-toc li,.hero-copy>p:not(.hero-signature),.studio-hero-copy>p,.section-heading p,.pricing-heading p,
.growth-intro,.growth-lead,.growth-card p,.growth-process p,.growth-faq p,.studio-grid p,.studio-approach-copy p,
.contact-copy>p,.knowledge-item .prose p:not(.knowledge-label),.price-summary p{font-size:15px!important;line-height:1.7!important}

/* Form labels and the controls people press. */
.lead-form label,.contact-standalone .lead-form label,.lead-form-compact label{font-size:13px!important}
.button,.button-small,.form-submit,.text-link:not(.contact-form-jump),.folio-preview,.folio-visit,.review-expand,.portfolio-filters button,
.exhibition-index button,.case-section-nav a{font-size:14px!important}
.site-header .button-small{font-size:13px!important}

/* Editor (Gutenberg) buttons inside content look like the site's own buttons and keep full contrast. */
.prose .wp-block-button__link,.wp-block-button__link{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;background:var(--accent,#ed6137)!important;color:var(--ink,#20221f)!important;font-size:15px!important;font-weight:700;text-decoration:none!important;transition:background .2s,transform .2s}
.prose .wp-block-button__link:hover,.wp-block-button__link:hover{background:#d4512a!important;color:#fff!important}
.prose .wp-block-button__link:after,.wp-block-button__link:after{content:"↗";font-weight:400}
.prose .wp-block-button__link:focus-visible,.wp-block-button__link:focus-visible{outline:2px solid var(--ink,#20221f);outline-offset:3px}

/* Second pass: labels and hints found on contact, pricing, portfolio and studio pages. */
.contact-quote-link small,.contact-direct-card small,.exhibition-counter,.exhibition-index span,
.portfolio-hero-bottom a,.process-heading>span,.process-current,.reviews-navigation>span,
.studio-approach-copy>span,.growth-section-nav>span,.studio-quote>span{font-size:12px!important}
.price-row>small,.contact-availability strong,.contact-company p,.portfolio-results>p,
.studio-rail-hint,.studio-carousel-controls button,.process-next,.studio-quote-expand{font-size:13px!important}
.review-card figcaption span,.hero-note{font-size:12px!important}
.primary-nav .language-link,.exhibition-hint{font-size:13px!important}
.price-row summary small,.price-row .price-amount small{font-size:13px!important}
/* portfolio.css is injected later by its loader, so these two need the stronger flag. */
.folio-preview{min-height:44px!important;font-size:13px!important}
.process-next,.studio-quote-expand,.studio-carousel-controls button{min-height:44px}

/* Menu: contact item and phone (phone shows only in the mobile menu). */
.primary-nav .nav-contact-mobile{display:none}

@media (max-width:900px){
  /* Running text a step larger on phones. */
  .prose:not(.case-story) p:not(.knowledge-label),.prose:not(.case-story) li,.article-toc li,.hero-copy>p:not(.hero-signature),.studio-hero-copy>p,.section-heading p,.pricing-heading p,
  .growth-intro,.growth-lead,.growth-card p,.growth-process p,.growth-faq p,.studio-grid p,.studio-approach-copy p,
  .contact-copy>p,.knowledge-item .prose p:not(.knowledge-label){font-size:16px!important}
  .hero-buttons .button,.hero-buttons .text-link{font-size:15px!important}
  .button svg,.button .arrow,.button>span:last-child{flex:none}

  /* 16px fields: iOS stops zooming in on focus. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
  .consent-label input[type=checkbox],input[type=checkbox]{width:22px;height:22px;flex:none}

  /* Touch targets: at least 44px for primary controls without changing how they look. */
  .menu-toggle{min-width:44px;min-height:44px;justify-content:flex-end;padding:10px 0 10px 12px!important}
  .menu-toggle>span:first-child{font-size:13px!important}
  .mobile-contact{min-height:44px;min-width:44px}
  .button,.button-small,.form-submit,.portfolio-filters button,.folio-preview,.review-expand,.text-button{min-height:44px}
  .text-link,.hero-buttons .text-link,.footer-top a{display:inline-flex;align-items:center;min-height:44px}
  .breadcrumbs a{display:inline-block;padding-block:6px}
  .site-footer li a,.site-footer nav a,.footer-bottom a,.footer-bottom button{display:inline-block;padding-block:9px}
  .primary-nav .language-link{min-height:44px;display:flex;align-items:center;font-size:15px!important}

  /* Header: the round arrow says what it does. */
  .mobile-contact{display:inline-flex!important;align-items:center;width:auto!important;height:44px!important;padding:0 6px 0 16px!important;border-radius:999px!important;gap:10px;font-size:14px!important;font-weight:700;color:var(--ink,#20221f)!important;text-decoration:none}
  .mobile-contact .mobile-contact-label{display:inline}
  .mobile-contact>span:not(.mobile-contact-label){display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink,#20221f);color:#fff;font-size:16px;flex:none}

  /* Mobile menu: phone and email under the links. */
  .primary-nav .nav-contact-mobile{display:flex;flex-direction:column;gap:6px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line,#dedfd7)}
  .nav-contact-mobile small{font-size:12px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#7b7d77)}
  .nav-contact-mobile a{display:flex!important;align-items:center;min-height:48px;font-size:20px!important;font-weight:600;border:0!important;padding:0!important}
}

/* Narrow phones: the main hero action takes the full width, the secondary link sits under it. */
@media (max-width:480px){
  .hero-buttons{flex-wrap:wrap;row-gap:6px}
  .hero-buttons .button{flex:1 1 100%;justify-content:space-between}
}
/* Very narrow phones: the logo leaves ~90px, so the header pill keeps the word and drops the arrow. */
@media (max-width:400px){
  .mobile-contact{padding:0 16px!important;font-size:14px!important}
  .mobile-contact>span:not(.mobile-contact-label){display:none!important}
  .menu-toggle{padding-left:8px!important;gap:8px}
}