/* Editorial refinement: hierarchy, open surfaces and useful navigation. */
.mvp h2 { font-size: clamp(34px, 3.85vw, 56px); line-height: 1.15; }
.desktop-nav a { position: relative; }
.header .wordmark { display: flex; min-height: 44px; flex-direction: column; justify-content: center; }
.desktop-nav a::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.desktop-nav a:hover { text-decoration: none; }
.desktop-nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.opening-layout .work-section { background: var(--white); border-block: 1px solid var(--line); }
.opening-layout .work-opening { padding-block: 80px 56px; border: 0; }
.opening-layout .services-surface { border: 0; }
.opening-layout .work-intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; }
.work-intro p { font-size: 19px; line-height: 1.65; max-width: 64ch; }
.work-intro p + p { margin-top: 24px; }
.opening-layout .company-section { padding-block: 36px 48px; border-top: 1px solid var(--line); }
.opening-layout .company-logos { margin-top: 24px; row-gap: 24px; }
.opening-services { padding-block: 0 80px; }
.services-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px 40px; margin-bottom: 36px; }
.mvp .services-heading h2 { font-size: clamp(30px, 3vw, 42px); }
.opening-instruction { font-size: 16px; margin: 0; flex-shrink: 0; }
.opening-card-list { gap: 0; border-top: 1px solid var(--ink); }
.opening-card { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.opening-card > summary { grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 32px; min-height: 144px; padding: 36px 0; }
.opening-graphic { width: 64px; height: 56px; }
.opening-card h3 { font-size: clamp(25px, 2.4vw, 34px); max-width: 850px; }
.opening-body { margin: 0 76px 0 96px; padding: 32px 0 40px; gap: 40px; }
.opening-body p { line-height: 1.65; }
.opening-contact { margin-top: 36px; }
.opening-layout .open-about { padding-block: 80px; }
.open-about .open-about-top { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
.open-about-identity > p, .open-background > p { max-width: 64ch; font-size: 19px; line-height: 1.65; }
.open-about-identity > p { margin-top: 28px; }
.open-background { margin-top: 28px; }
.open-background > summary { padding-block: 16px; }
.open-principle { background: transparent; border: 0; border-top: 1px solid var(--line); grid-template-columns: 32px minmax(0,1fr); gap: 24px; padding: 32px 0 0; margin-top: 40px; }
.open-principle-mark { font-size: 56px; line-height: 1; }
.open-principle p { font-size: clamp(22px, 2vw, 26px); line-height: 1.5; max-width: 68ch; }
.open-about-bottom { margin-top: 32px; }
.opening-layout .recommendations { padding-block: 80px; }
.recommendations-heading { margin-bottom: 48px; }
.recommendation-card { padding-block: 40px; }
.recommendation-card:first-child { padding-top: 0; }
.recommendation-card:last-child { padding-bottom: 0; }
.opening-layout .surface-white > #questions { padding-block: 80px; }
.opening-layout .faq-layout > h2 { margin-bottom: 40px; }
.opening-layout .question summary { padding-block: 24px; }
.opening-layout .question p { max-width: 72ch; font-size: 19px; line-height: 1.65; padding-bottom: 32px; }
.opening-layout .contact-section { padding-block: 80px; }
.mvp .contact-copy h2 { font-size: clamp(40px, 4vw, 56px); }
.contact-copy h2 + p { margin-top: 20px; }
.contact-paper { border: 0; padding: 16px 28px; }
.direct-contact { min-height: 84px; }
@media (max-width: 1180px) {
  .desktop-nav { gap: 20px; }
  .opening-body { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 1020px) {
  .opening-layout .work-intro { grid-template-columns: 1fr; gap: 32px; }
  .work-intro h2 { max-width: 650px; }
  .open-about .open-about-top { grid-template-columns: 190px minmax(0,1fr); gap: 36px; }
}
@media (max-width: 740px) {
  .opening-layout .work-opening { padding-block: 56px 40px; }
  .work-intro p { font-size: 18px; }
  .opening-layout .company-section { padding-block: 36px; }
  .opening-services { padding-block: 0 56px; }
  .services-heading { display: block; margin-bottom: 28px; }
  .opening-instruction { margin-top: 12px; }
  .opening-card > summary { grid-template-columns: minmax(0,1fr) 36px; gap: 16px; padding: 28px 0; min-height: 0; }
  .opening-card h3 { grid-column: 1; grid-row: 1; font-size: clamp(23px, 5.8vw, 28px); }
  .opening-graphic { display: none; }
  .opening-card .opening-control { grid-column: 2; grid-row: 1; align-self: center; }
  .opening-body { margin-inline: 0; padding: 24px 0 32px; }
  .opening-contact { margin-top: 32px; }
  .opening-layout .open-about, .opening-layout .recommendations { padding-block: 56px; }
  .open-about .open-about-top { grid-template-columns: 112px minmax(0,1fr); gap: 24px; }
  .mvp .open-about h2 { font-size: clamp(28px, 6.5vw, 40px); }
  .open-about-identity > p, .open-background > p { font-size: 18px; }
  .open-about-identity > p, .open-background { margin-top: 0; }
  .open-background > summary { padding-block: 12px; }
  .open-principle { grid-template-columns: 24px minmax(0,1fr); gap: 12px; border-top: 0; margin-top: 32px; padding-top: 0; }
  .open-principle-mark { font-size: 44px; height: auto; }
  .open-principle p { font-size: 21px; }
  .recommendations-heading { margin-bottom: 36px; }
  .recommendation-card { padding-block: 32px; }
  .recommendation-card blockquote p { font-size: 22px; }
  .opening-layout .surface-white > #questions, .opening-layout .contact-section { padding-block: 56px; }
  .opening-layout .faq-layout > h2 { margin-bottom: 32px; }
  .opening-layout .question summary { padding-block: 20px; }
  .opening-layout .question p { font-size: 18px; padding-bottom: 28px; }
  .contact-paper { padding: 12px 20px; }
  .direct-contact { min-height: 80px; }
}
@media (max-width: 370px) {
  .contact-paper { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-nav a::after { transition: none; }
}
.motion-off .desktop-nav a::after { transition: none; }
@media print {
  .open-principle { break-inside: avoid; }
}

/* Selected work: three anonymised engagements between Approach and About (approved 5 Oct 2026). */
.opening-layout .selected-work { padding-block: 80px; }
.selected-work-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px 40px; margin-bottom: 36px; }
.selected-work-heading p { color: var(--muted); font-size: 19px; line-height: 1.65; margin: 0; }
.selected-work-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.selected-work-list li { padding: 28px 28px 8px 0; display: grid; gap: 12px; align-content: start; }
@media (min-width: 741px) {
  .selected-work-list { grid-template-rows: repeat(3, auto); column-gap: 0; }
  .selected-work-list li { grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; }
}
.selected-work-list li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.sw-sector { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.sw-change { font: 400 22px/1.35 var(--display); letter-spacing: -.015em; }
.sw-result { font-size: 17px; line-height: 1.6; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 1020px) {
  .sw-change { font-size: 20px; }
}
@media (min-width: 741px) and (max-width: 1020px) {
  .selected-work-list { grid-template-columns: 1fr; grid-template-rows: none; }
  .selected-work-list li, .selected-work-list li + li { grid-row: auto; grid-template-rows: none; grid-template-columns: 220px minmax(0, 1fr); column-gap: 36px; padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .selected-work-list li:last-child { border-bottom: 0; padding-bottom: 0; }
  .sw-sector { grid-row: span 2; }
  .sw-change, .sw-result { grid-column: 2; }
}
@media (max-width: 740px) {
  .opening-layout .selected-work { padding-block: 64px; }
  .selected-work-heading { display: block; margin-bottom: 28px; }
  .selected-work-heading p { margin-top: 12px; font-size: 18px; }
  .selected-work-list { grid-template-columns: 1fr; }
  .selected-work-list li, .selected-work-list li + li { padding: 32px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .selected-work-list li:first-child { padding-top: 24px; }
  .selected-work-list li:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* About: workshop photo with the working principle as an overlapping quote card (approved 5 Oct 2026). */
.about-quote-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.about-photo { margin: 0; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); }
.about-photo > img { grid-column: 1 / 18; grid-row: 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; mask-image: none; -webkit-mask-image: none; }
.about-principle { position: relative; z-index: 1; grid-column: 5 / 21; grid-row: 2; margin: -160px 0 0; padding: 68px 32px 30px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--lime); box-shadow: 0 1px 2px rgb(22 21 19 / 5%); }
.about-principle p { font: 400 21px/1.45 var(--display); letter-spacing: -.015em; color: var(--ink); }
.about-principle p::before { content: '“'; position: absolute; top: 10px; left: 32px; font-size: 88px; font-weight: 350; line-height: 1; color: var(--pine); }
.about-text > h2 { margin-top: 0; }
.about-text > p { margin-top: 24px; font-size: 19px; line-height: 1.65; max-width: 60ch; }
.about-facts { margin: 28px 0 0; display: grid; border-top: 1px solid var(--ink); }
.about-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.about-facts > div:last-child { border-bottom: 0; }
.about-facts dt { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.about-facts dd { margin: 0; font-size: 17px; line-height: 1.5; }
.about-text .open-background { margin-top: 0; }
.about-text > .text-link { margin-top: 32px; }
@media (min-width: 1021px) and (max-width: 1240px) {
  .about-principle { grid-column: 3 / 21; padding: 68px 28px 28px; }
  .about-principle p { font-size: 19px; }
}
@media (max-width: 1020px) {
  .about-quote-layout { grid-template-columns: 1fr; gap: 40px; }
  .about-photo { max-width: 440px; }
}
@media (max-width: 740px) {
  .about-photo { max-width: none; }
  .about-photo > img { grid-column: 1 / 21; }
  .about-principle { grid-column: 4 / 21; margin: -56px 0 0; padding: 60px 24px 24px; }
  .about-principle p { font-size: 19px; }
  .about-principle p::before { left: 24px; }
  .about-facts > div { grid-template-columns: 1fr; gap: 4px; }
}


/* UI/UX audit refinements, approved for production 5 Oct 2026 (generated from review/audit-proposal-2026-10-04/proposal.css, proposal scope replaced by .mvp). */
/* 1: Proof above the fold: portrait + credential replace the paper card */
.mvp .hero { padding-bottom: 36px; }
.mvp .hero-topline { margin-bottom: 20px; }
.mvp .hero-bottom { margin-top: 28px; align-items: end; }
.mvp .hero-photo { margin: 0; justify-self: end; }
/* 1: Circle portrait with overlapping circles (the site's circle language).
   Lime disc sits low-left, outline circle high-left, so the right side stays clear for the caption. */
.mvp .hero-circle { --d: 236px; display: flex; align-items: center; gap: 40px; align-self: center; }
.mvp .hero-circle-frame { position: relative; flex: 0 0 auto; width: var(--d); height: var(--d); margin: 30px 0 18px 40px; }
.mvp .hero-circle-frame img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; display: block; }
.mvp .hero-circle-frame::before { content: ''; position: absolute; inset: 0; transform: translate(-26px, 18px); border-radius: 50%; background: var(--lime); }
.mvp .hero-circle-frame::after { content: ''; position: absolute; inset: 0; transform: translate(-40px, -30px); border-radius: 50%; border: 1px solid var(--ink); }
.mvp .hero-circle figcaption { display: grid; gap: 6px; max-width: 200px; font: 500 17px/1.35 var(--display); color: var(--ink); }
.mvp .hero-circle figcaption span { font: 400 14px/1.5 var(--sans); color: var(--muted); }
@media (max-width: 1180px) {
  .mvp .hero-circle { --d: 200px; flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 1020px) {
  .mvp .hero-circle { --d: 176px; }
  .mvp .hero-circle-frame { margin: 30px 0 14px 40px; }
}
.mvp.opening-layout .company-section, .mvp.opening-layout .company-section, .mvp .company-section { padding-block: 28px 44px; }

/* 2: arrows, contact prompt and booking row */
.mvp .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.mvp .contact-prompt { margin-top: 12px; color: var(--ink); font-size: 18px; }
.mvp .direct-book .direct-contact-label { font-weight: 500; }

/* 3: Calm logo strip */
.mvp .company-logo { filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
.mvp .company-logos li:hover .company-logo { filter: none; opacity: 1; }

/* 4: Softer scroll fades */
.motion-ready:not(.motion-off) .is-arriving { animation-name: passage-in-soft; }
.mvp #approach .stage-track.is-enhanced .process-stage.stage-enter { animation-name: stage-read-in-soft; }
@keyframes passage-in-soft { from { opacity: .85; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes stage-read-in-soft { from { opacity: .85; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* s1: Small text floor: 13px uppercase labels, 14px everything else */
.mvp .eyebrow { font-size: 13px; }
.mvp .wordmark span { font-size: 13px; }
.mvp .company-logo-name, .mvp .recommendation-card time, .mvp .privacy-pending,
.mvp .footer-identity p, .mvp .footer-legal p, .mvp .motion-toggle { font-size: 14px; }
.mvp .recommendation-role { font-size: 15px; }

/* s2: Drop the first-word highlight; give section headings more presence */
.mvp .service-keyword { background: none; }
.mvp h2, .mvp h2, .mvp h2 { font-weight: 500; }

/* s3: The problem paragraph is the strongest copy: lead size, ink colour */
.mvp .work-intro p.problem-lead { font: 400 clamp(22px, 2vw, 26px)/1.5 var(--display); letter-spacing: -.015em; color: var(--ink); }

/* s4: Tighter testimonials */
.mvp .recommendations { padding-block: 64px ; }
.mvp .recommendations-heading { margin-bottom: 32px; }
.mvp .recommendation-card { padding-block: 24px; }
@media (max-width: 740px) {
  .mvp .hero-photo { justify-self: stretch; }
  .mvp .hero-circle { --d: 128px; flex-direction: row; align-items: center; gap: 24px; }
  .mvp .hero-circle-frame { margin: 24px 0 12px 32px; }
  .mvp .hero-circle-frame::before { transform: translate(-18px, 12px); }
  .mvp .hero-circle-frame::after { transform: translate(-28px, -22px); }
  .mvp .eyebrow, .mvp .hero-topline .eyebrow { font-size: 12px; }
  .mvp .wordmark span { font-size: 12px; }
  .mvp.opening-layout .company-logos li, .mvp .company-logos li { flex-basis: calc((100% - 40px) / 3); min-height: 48px; }
  .mvp.opening-layout .company-logos, .mvp .company-logos { column-gap: 20px; }
  .mvp .company-logo-name { font-size: 12px; }
  .mvp .method-index, .mvp .method-index, .mvp #approach .stage-track.is-enhanced .method-index { display: flex; flex-direction: column; gap: 0; }
  .mvp #approach .stage-track.is-enhanced .method-index a { flex-direction: row; align-items: center; min-height: 52px; font-size: 16px; gap: 14px; }
  .mvp .work-intro p.problem-lead { font-size: 21px; }
}

/* Testimonials: three scannable quote cards instead of stacked rows */
.mvp .recommendation-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.mvp .recommendation-card, .mvp .recommendation-card:first-child, .mvp .recommendation-card:last-child { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 32px 28px 28px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--lime); }
.mvp .recommendation-card + .recommendation-card { border-top: 3px solid var(--lime); }
.mvp .recommendation-card blockquote p { font-size: 21px; line-height: 1.45; }
.mvp .recommendation-card figcaption { padding-top: 16px; border-top: 1px solid var(--line); }

/* FAQ: heading column + questions column, all closed */
.mvp.opening-layout .faq-layout, .mvp .faq-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.mvp .faq-side { position: sticky; top: 32px; }
.mvp .faq-side h2 { margin: 0; }
.mvp .faq-nudge { margin-top: 20px; font-size: 17px; color: var(--muted); }
.mvp .faq-nudge a { color: var(--ink); text-underline-offset: 4px; }
.mvp.opening-layout .question p { font-size: 18px; }

@media (max-width: 1020px) {
  .mvp .about-v2 { grid-template-columns: 1fr; gap: 32px; }
  .mvp .recommendation-grid { grid-template-columns: 1fr; gap: 16px; }
  .mvp.opening-layout .faq-layout, .mvp .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .mvp .faq-side { position: static; }
}
@media (max-width: 740px) {
  .mvp .about-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .mvp .recommendation-card, .mvp .recommendation-card:first-child, .mvp .recommendation-card:last-child { padding: 24px 20px; }
  .mvp .recommendation-card blockquote p { font-size: 19px; }
}

/* Language switch with flags, always in the header (5 Oct 2026). No section links: the menu returns only for subpages. */
.header .lang-switch { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.lang-switch a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-decoration: none; transition: background-color .2s, color .2s; }
.lang-switch a:hover { color: var(--ink); background: rgb(22 21 19 / 5%); }
.lang-switch a[aria-current="true"] { color: var(--ink); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.lang-switch .flag { display: block; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(22 21 19 / 18%); }
.lang-switch a:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
@media (max-width: 1020px) { .header { justify-content: space-between; } }
@media (max-width: 480px) {
  .header .lang-switch { gap: 2px; flex-shrink: 0; }
  .lang-switch a { min-width: 44px; justify-content: center; padding: 0 8px; }
  .lang-switch a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lang-switch .flag { width: 24px; height: 16px; }
}
@media (max-width: 480px) { .header { gap: 12px; } }
@media (max-width: 360px) { .lang-switch a { min-width: 38px; padding: 0 6px; } }
@media (max-width: 340px) {
  .header { gap: 8px; }
  .header .lang-switch { gap: 0; }
  .lang-switch a { min-width: 32px; padding: 0 4px; }
  .lang-switch .flag { width: 22px; height: 15px; }
  .header .wordmark { font-size: 19px; }
  .header .wordmark span { font-size: 11px; }
}
@media (max-width: 480px) { .lang-switch a { min-height: 34px; } }
@media (max-width: 340px) { .lang-switch a { min-width: 36px; padding: 0 6px; } .lang-switch .flag { width: 20px; height: 14px; } }
@media (max-width: 340px) { .lang-switch a { min-width: 34px; padding: 0 5px; } }

/* QA fixes, 5 Oct 2026 */
.faq-nudge a { display: inline-block; padding-block: 3px; }
@media print { .lang-switch { display: none; } }
/* Visual QA, 5 Oct 2026: balanced heading wraps and a wider facts label column for long PL/ES labels */
.mvp h2, .opening-card h3, .selected-work .sw-change { text-wrap: balance; }
.about-facts > div { grid-template-columns: 150px minmax(0, 1fr); }
.about-facts dt { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
@media (max-width: 740px) { .about-facts > div { grid-template-columns: 1fr; } }


/* Privacy notice pages (/privacy/, /es/privacidad/, /pl/prywatnosc/), 5 Oct 2026 */
.legal { max-width: 760px; padding-block: 56px 96px; margin-inline: auto; }
.legal-page .header { width: min(100% - 40px, 1280px); }
.legal-back { margin-bottom: 40px; font-size: 16px; }
.legal h1 { font: 400 clamp(40px, 5vw, 64px)/1.08 var(--display); letter-spacing: -.035em; }
.legal-updated { margin-top: 16px; color: var(--muted); font-size: 15px; }
.legal-lead { margin-top: 28px; font: 400 clamp(20px, 2vw, 23px)/1.5 var(--display); letter-spacing: -.01em; }
.legal-section { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-section h2 { font: 500 clamp(24px, 2.4vw, 30px)/1.2 var(--display); letter-spacing: -.02em; }
.legal-section h3 { margin-top: 24px; font: 500 18px/1.4 var(--sans); }
.legal-section p, .legal-section li { margin-top: 12px; font-size: 18px; line-height: 1.65; }
.legal-section ul { padding-left: 1.2em; }
.legal-section a, .booking-note a { text-underline-offset: 3px; }
.legal-footer { padding-block: 24px 40px; }
.legal-footer .footer-legal a { color: var(--muted); font-size: 14px; }
.privacy-link { color: var(--muted); font-size: 14px; text-underline-offset: 3px; }
@media (max-width: 740px) { .legal { padding-block: 40px 72px; } .legal-section p, .legal-section li { font-size: 17px; } }

/* About quote card, round-3 review fixes (5 Oct 2026): lime disc holds the quote mark, label names it as her principle */
.about-principle { margin-top: -200px; padding: 48px 32px 28px; border: 1px solid var(--line); border-top: 1px solid var(--line); }
.about-principle p::before { content: '“'; position: absolute; top: -24px; left: 32px; width: 48px; height: 48px; border-radius: 50%; background: var(--lime); color: var(--pine); font: 350 64px/1 var(--display); text-align: center; padding-top: 10px; box-sizing: border-box; overflow: hidden; }
.about-principle-by { margin-top: 20px; font: 500 13px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 1021px) and (max-width: 1240px) { .about-principle { padding: 48px 28px 26px; } }
@media (max-width: 1020px) { .about-principle { margin-top: -120px; } }
@media (max-width: 740px) {
  .about-photo > img { aspect-ratio: 1 / 1; object-position: 50% 0; }
  .about-principle { grid-column: 2 / 21; margin-top: -56px; padding: 40px 20px 20px; }
  .about-principle p { font-size: 18px; }
  .about-principle p::before { left: 20px; }
}

/* About review round 2 (5 Oct 2026) */
@media (max-width: 740px) { .about-principle { grid-column: 1 / 21; } }
@media (min-width: 1021px) { .about-text > h2 { margin-top: -12px; } }
@media (min-width: 1021px) and (max-width: 1240px) { .about-principle { margin-top: -160px; grid-column: 4 / 21; } }
/* About review round 2 must-fix + polish (5 Oct 2026) */
@media (max-width: 740px) { .mvp .about-text > h2 { font-size: clamp(32px, 8.2vw, 40px); } .about-text { margin-top: 8px; } .about-photo > img { object-position: 50% 8%; } }
.about-text > p { text-wrap: pretty; }