/* Below the grid on the home page: About, Recognition, Experience,
   Skills & Tools, FAQ and contact. Also shown in the style guide.
   The site's serif for reading text, Inter for small labels. */
.more { margin: 120px 0 40px; font-family: "Andada Pro", Georgia, serif; color: #222; }
.more-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2.4fr); gap: 32px 48px; padding: 56px 0; border-top: 1px solid #e4e6e5; }
.more-row > h2 { margin: 0; font: 500 1.75rem/1.2 "Andada Pro", Georgia, serif; letter-spacing: -.01em; }
.more-about p { max-width: 62ch; margin: 0; font-size: 1.1875rem; line-height: 1.65; color: #3d3d3d; }
.more-about p + p { margin-top: 1em; }
.more-about b { font-weight: 700; color: #111; }
.more-exp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.more-exp li { padding: 22px 24px 24px; border-radius: 12px; background: #f6f7f6; }
.more-exp .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 400 .8125rem/1.4 Inter, system-ui, sans-serif; color: #666; }
.more-exp .co { font-weight: 600; color: #222; letter-spacing: .02em; }
.more-exp h3 { margin: 14px 0 2px; font: 500 1.2rem/1.3 "Andada Pro", Georgia, serif; }
.more-exp .where { display: block; font: 400 .8125rem/1.5 Inter, system-ui, sans-serif; color: #666; }
.more-exp p { margin: 10px 0 0; font-size: 1rem; line-height: 1.55; }
.more-skills h3 { margin: 0 0 10px; font: 500 .75rem/1.4 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #666; }
.more-skills h3:not(:first-child) { margin-top: 28px; }
.more-skills ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.more-skills li { padding: 6px 14px; border: 1px solid #e4e6e5; border-radius: 999px; font: 400 .875rem/1.4 Inter, system-ui, sans-serif; color: #333; }
@media (max-width: 800px) {
  .more { margin-top: 72px; }
  .more-row { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .more-exp { grid-template-columns: 1fr; }
}
.more-about .avail { display: flex; align-items: center; gap: 8px; margin-bottom: 1.4em; font: 400 .875rem/1.4 Inter, system-ui, sans-serif; color: #555; }
.more-about .avail i { width: 8px; height: 8px; border-radius: 50%; background: #2f9e62; box-shadow: 0 0 0 4px #2f9e6222; }
.more-rec { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.more-rec li { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid #eef0ef; }
.more-rec img { max-width: none; }
.more-rec li div { display: grid; gap: 2px; }
.more-rec li:last-child { border: 0; padding-bottom: 0; }
.more-rec b { font-weight: 500; font-size: 1.0625rem; }
.more-rec span { font-size: 1rem; line-height: 1.55; color: #555; }
.more-faq details { border-bottom: 1px solid #e4e6e5; }
.more-faq details:first-child { border-top: 1px solid #e4e6e5; }
.more-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 1.125rem; font-weight: 500; cursor: pointer; list-style: none; }
.more-faq summary::-webkit-details-marker { display: none; }
.more-faq summary::after { content: "+"; flex: none; font: 300 1.5rem/1 Inter, system-ui, sans-serif; color: #888; transition: transform .25s; }
.more-faq details[open] summary::after { transform: rotate(45deg); }
.more-faq details p { max-width: 64ch; margin: 0 0 1em; font-size: 1.0625rem; line-height: 1.65; color: #333; }
.more-faq details p:last-child { margin-bottom: 22px; }
.more-faq .flow { display: block; font-weight: 500; }
.more-faq .flow-note { display: block; font: 400 .875rem/1.5 Inter, system-ui, sans-serif; color: #666; }
/* On phones each logo sits above its text, so it keeps a readable size. */
@media (max-width: 560px) { .more-rec li { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .more-faq summary::after { transition: none; } }

/* Contact */
.more-cta { display: grid; justify-items: center; gap: 14px; padding: 88px 0 24px; border-top: 1px solid #e4e6e5; text-align: center; }
.more-cta .avail { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 .875rem/1.4 Inter, system-ui, sans-serif; color: #555; }
.more-cta .avail i { width: 8px; height: 8px; border-radius: 50%; background: #2f9e62; box-shadow: 0 0 0 4px #2f9e6222; }
.more-cta h2 { margin: 0; font: 500 clamp(1.75rem, 3vw, 2.5rem)/1.2 "Andada Pro", Georgia, serif; }
.cta-row { display: flex; gap: 12px; margin-top: 8px; }
.more-btn { padding: 12px 22px; border: 1px solid #222; border-radius: 999px; font: 500 .9375rem/1 Inter, system-ui, sans-serif; transition: background .2s, color .2s; }
.more-btn:hover { background: #f1f3f2; }
.more-btn.primary { background: #222; color: #fff; }
.more-btn.primary:hover { background: #2b523b; border-color: #2b523b; }
@media (prefers-reduced-motion: reduce) { .more-btn { transition: none; } }