/* ==========================================================================
   Algenturo — phone readability & tap-target fixes
   Loaded last on every page. Applies to screens 600px wide and below only,
   so the desktop and tablet design is unchanged.
   Decorative text inside the hero illustrations is intentionally left small.
   ========================================================================== */

@media (max-width: 600px) {

  /* ---------- Labels & eyebrows (mono, uppercase) ---------- */
  .eyebrow { font-size: 11px; letter-spacing: 1.2px; }
  .eyebrow .section-number { font-size: 11px; }
  .hero-note span { font-size: 11px; }
  [class*="hero-bottom"] > span { font-size: 9px; }

  /* ---------- Main reading copy ---------- */
  .hero-description,
  .section-intro,
  .approach-description,
  .about-inner > p:not(.eyebrow),
  p[class$="-lead"],
  p[class$="-copy"],
  [class$="-section-heading"] > p {
    font-size: 15px;
    line-height: 1.65;
  }
  .metrics-disclaimer { font-size: 13px; }

  /* ---------- Buttons & text links (min 44px tap height) ---------- */
  .button { min-height: 50px; font-size: 14px; }
  .text-link { min-height: 44px; font-size: 14px; }

  /* ---------- Homepage: metrics ---------- */
  .metric-index { font-size: 10px; }
  .metric-card h3 { font-size: 14px; line-height: 1.35; }
  .metric-foot { font-size: 12px; line-height: 1.5; }

  /* ---------- Homepage: service cards (one per row on phones) ---------- */
  .services-grid { grid-template-columns: 1fr; }
  .services-grid > .service-card:last-child:nth-child(odd) { grid-column: auto; }
  .service-card, .service-card-inner { min-height: 210px; }
  .service-card h3 { font-size: 18px; }
  .service-card p { min-height: 0; font-size: 14px; line-height: 1.6; }
  .service-number { font-size: 11px; }
  .service-tags { font-size: 9px; }
  .service-face-back h3 { font-size: 18px; }
  .service-face-back p { font-size: 14px; }

  /* ---------- Homepage: "How we work" steps ---------- */
  .step-index { font-size: 11px; }
  .step h3 { font-size: 17px; }
  .step p { font-size: 14px; line-height: 1.6; }

  /* ---------- Homepage: hero carousel controls ---------- */
  .carousel-arrow { width: 44px; height: 44px; }
  .carousel-indicators { gap: 12px; }
  .carousel-indicator { position: relative; width: 9px; height: 9px; }
  .carousel-indicator.is-active { width: 26px; }
  /* invisible padding so each dot is a ~40px tap area */
  .carousel-indicator::after { position: absolute; inset: -16px -6px; content: ""; }

  /* ---------- Service pages: service cards ---------- */
  [class$="-services-grid"] article h3 { font-size: 18px; }
  [class$="-services-grid"] article > p { font-size: 14px; line-height: 1.6; }
  [class$="-service-number"] { font-size: 10px; }
  [class$="-service-tags"] { font-size: 9px; }

  /* ---------- Service pages: principles / capability lists ---------- */
  [class$="-principles-list"] article > span,
  [class$="-capability-list"] article > span { font-size: 11px; }
  [class$="-principles-list"] h3,
  [class$="-capability-list"] h3 { font-size: 16px; }
  [class$="-principles-list"] p,
  [class$="-capability-list"] p { font-size: 14px; line-height: 1.6; }

  /* ---------- Service pages: process steps ---------- */
  [class$="-process-grid"] article > span { font-size: 11px; }
  [class$="-process-grid"] h3 { font-size: 16px; }
  [class$="-process-grid"] p { font-size: 13px; line-height: 1.6; }

  /* ---------- Green call-to-action boxes ---------- */
  [class*="-cta-panel"] p:not(.eyebrow),
  .contact-content > p:not(.eyebrow) { max-width: none; font-size: 15px; line-height: 1.6; }
  .contact-aside { font-size: 10px; }

  /* ---------- Logo link (header & footer) ---------- */
  .brand { min-height: 44px; }

  /* ---------- Footer ---------- */
  .footer-main > div:first-child > p { font-size: 13px; }
  .footer-label, .footer-contact .footer-label { font-size: 10px; }
  .footer-links > div { gap: 0; }
  .footer-links a { display: flex; min-height: 40px; align-items: center; font-size: 14px; }
  .footer-contact p { font-size: 13px; line-height: 1.6; }
  .footer-contact-link span { font-size: 14px; }
  .footer-contact .footer-contact-link { min-height: 40px; align-items: center; }
  .footer-bottom { align-items: center; font-size: 10px; }
  .footer-bottom a { display: inline-flex; min-height: 40px; align-items: center; }
}

/* ==========================================================================
   Desktop & tablet readability (screens wider than 600px)
   Raises reading text to comfortable sizes; layout and design unchanged.
   ========================================================================== */

@media (min-width: 601px) {

  /* ---------- Header navigation ---------- */
  .site-nav > a { font-size: 14px; }

  /* ---------- Labels & eyebrows ---------- */
  .eyebrow { font-size: 11px; }
  .eyebrow .section-number { font-size: 11px; }
  .hero-note span { font-size: 11px; }
  [class*="hero-bottom"] > span { font-size: 10px; }

  /* ---------- Main reading copy ---------- */
  .hero-description,
  .approach-description,
  p[class$="-lead"] { font-size: 17px; line-height: 1.7; }

  .section-intro,
  .about-inner > p:not(.eyebrow),
  p[class$="-copy"],
  [class$="-section-heading"] > p { font-size: 16px; line-height: 1.7; }

  .metrics-disclaimer { font-size: 14px; }

  /* ---------- Buttons & text links ---------- */
  .button { font-size: 14px; }
  .text-link { font-size: 14px; }

  /* ---------- Homepage: metrics ---------- */
  .metric-index { font-size: 10px; }
  .metric-card h3 { font-size: 15px; line-height: 1.35; }
  .metric-foot { font-size: 13px; line-height: 1.5; }

  /* ---------- Homepage: service flip cards ---------- */
  .service-card, .service-card-inner { min-height: 265px; }
  .service-card h3 { font-size: 18px; }
  .service-card p { font-size: 14px; line-height: 1.6; }
  .service-number { font-size: 11px; }
  .service-tags { font-size: 9px; }
  .service-face-back h3 { font-size: 19px; }
  .service-face-back p { font-size: 14px; line-height: 1.65; }

  /* ---------- Homepage: "How we work" steps ---------- */
  .step-index { font-size: 11px; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 15px; line-height: 1.6; }

  /* ---------- Service pages: service cards ---------- */
  [class$="-services-grid"] article h3 { font-size: 19px; }
  [class$="-services-grid"] article > p { font-size: 15px; line-height: 1.6; }
  [class$="-service-number"] { font-size: 10px; }
  [class$="-service-tags"] { font-size: 9px; }

  /* ---------- Service pages: principles / capability lists ---------- */
  [class$="-principles-list"] article > span,
  [class$="-capability-list"] article > span { font-size: 11px; }
  [class$="-principles-list"] h3,
  [class$="-capability-list"] h3 { font-size: 18px; }
  [class$="-principles-list"] p,
  [class$="-capability-list"] p { font-size: 15px; line-height: 1.6; }

  /* ---------- Service pages: process steps ---------- */
  [class$="-process-grid"] article > span { font-size: 11px; }
  [class$="-process-grid"] h3 { font-size: 18px; }
  [class$="-process-grid"] p { font-size: 14px; line-height: 1.6; }

  /* ---------- Green call-to-action boxes ---------- */
  [class*="-cta-panel"] p:not(.eyebrow),
  .contact-content > p:not(.eyebrow) { font-size: 16px; line-height: 1.6; }
  .contact-aside { font-size: 10px; }

  /* ---------- Footer ---------- */
  .footer-label, .footer-contact .footer-label { font-size: 10px; }
  .footer-links a { font-size: 14px; }
  .footer-contact p { font-size: 14px; line-height: 1.65; }
  .footer-contact-link span { font-size: 14px; }
  .footer-main > div:first-child > p { font-size: 14px; }
  .footer-bottom { font-size: 10px; }
}

/* ==========================================================================
   Footer "Services" row — links every service page to every other one
   Wide screens: one line. Tablets/small laptops: 3 even columns. Phones: 2.
   ========================================================================== */
.footer-services { display: flex; align-items: baseline; gap: 28px; padding-bottom: 26px; }
.footer-services .footer-label { flex: none; margin: 0; color: #77747e; font: 10px var(--mono); letter-spacing: .7px; }
.footer-services ul { display: flex; flex-wrap: nowrap; justify-content: space-between; flex: 1; gap: 20px; margin: 0; padding: 0; list-style: none; }
.footer-services li { white-space: nowrap; }
.footer-services a { color: #c0bec5; font-size: 14px; transition: color .2s; }
.footer-services a:hover, .footer-services a:focus-visible { color: var(--lime); }
.footer-services a[aria-current="page"] { color: var(--lime); }

@media (max-width: 1179px) {
  .footer-services { flex-direction: column; gap: 14px; }
  .footer-services ul { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
}

@media (max-width: 600px) {
  .footer-services { gap: 4px; padding-bottom: 18px; }
  .footer-services ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 16px; }
  .footer-services li { white-space: normal; }
  .footer-services a { display: inline-flex; min-height: 40px; align-items: center; }
}

/* ==========================================================================
   Floating WhatsApp button (all pages)
   Round green button, bottom-right. On desktop hover, a label slides out.
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  border-radius: 28px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 28px rgb(0 0 0 / 38%), 0 2px 6px rgb(0 0 0 / 25%);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.whatsapp-float svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.whatsapp-float-label {
  max-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .3s ease, margin .3s ease, opacity .2s ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible { background: #1ebe5b; box-shadow: 0 12px 32px rgb(0 0 0 / 45%), 0 2px 6px rgb(0 0 0 / 25%); transform: translateY(-2px); }
.whatsapp-float:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover .whatsapp-float-label,
  .whatsapp-float:focus-visible .whatsapp-float-label { max-width: 160px; margin-left: 10px; opacity: 1; }
}

/* Phones: a little smaller and closer to the edge; keep the footer clear */
@media (max-width: 600px) {
  .whatsapp-float { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); height: 52px; padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float, .whatsapp-float-label { transition: none; }
  .whatsapp-float:hover, .whatsapp-float:focus-visible { transform: none; }
}

/* Leave room under the footer so the button never covers its links */
.site-footer { padding-bottom: 96px; }
@media (max-width: 600px) { .site-footer { padding-bottom: 84px; } }

@media print { .whatsapp-float { display: none; } }