/* MYTRIPPOR v4 — readability-first Quiet Luxury + Strategy Studio */
:root{
  --mp4-paper:#F6F2EA;
  --mp4-paper-2:#FFFDF8;
  --mp4-ink:#171714;
  --mp4-muted:#5B5A54;
  --mp4-green:#1E3D35;
  --mp4-green-dark:#172D28;
  --mp4-sage:#DDE9E3;
  --mp4-rust:#9A5437;
  --mp4-line:rgba(23,23,20,.15);
  --mp4-light:#F8F5EE;
}

body.home{background:var(--mp4-paper);color:var(--mp4-ink)}
.mp-shell{width:min(1240px,calc(100% - 112px))}

/* Navigation: calm, high contrast */
.mp-nav{background:rgba(246,242,234,.96);border-bottom:1px solid rgba(23,23,20,.10)}
.mp-brand,.mp-navlinks a{color:var(--mp4-ink)}
.mp-nav-cta{background:var(--mp4-green);color:#fff!important;border-color:var(--mp4-green)}

/* Hero: text never sits on the image. Image carries atmosphere, solid panel carries meaning. */
.mp-hero{background:var(--mp4-paper);grid-template-columns:58% 42%;min-height:790px}
.mp-hero-bg{width:42%;filter:saturate(.82) contrast(.98)}
.mp-hero-overlay{width:42%;background:linear-gradient(90deg,rgba(30,61,53,.04),rgba(23,23,20,.12))}
.mp-hero-inner{padding-right:7vw}
.mp-kicker{color:#6A675F}
.mp-hero h1{font-family:'Noto Serif KR',serif;font-size:clamp(46px,4.8vw,70px);line-height:1.24;letter-spacing:-.045em;font-weight:500;max-width:760px;color:var(--mp4-ink)}
.mp-hero-bottom p{font-size:17px;line-height:1.85;color:var(--mp4-muted);max-width:590px}
.mp-arrow-link{color:var(--mp4-green);font-weight:600;border-bottom-color:rgba(30,61,53,.38)}

/* Recognition: no alarm-red wall. Warm paper keeps visitor open; rust is only a small signal. */
.mp-intro{background:var(--mp4-paper-2)}
.mp-section-label{color:#706D65}
.mp-serif-lead{font-family:'Noto Serif KR',serif;font-size:clamp(32px,3.3vw,48px);line-height:1.5;color:var(--mp4-ink)}
.mp-intro-body{font-size:17px;line-height:2;color:var(--mp4-muted);max-width:760px}
.mp-question-stack{border-top-color:var(--mp4-line)}
.mp-question{grid-template-columns:78px minmax(0,850px);padding:40px 0;border-bottom-color:var(--mp4-line)}
.mp-question>span{color:var(--mp4-rust);font-weight:700}
.mp-question p{font-size:clamp(22px,2.1vw,30px);line-height:1.62;max-width:850px;color:var(--mp4-ink)}
.mp-question strong{font-weight:650;color:var(--mp4-ink)}

/* Reframe: deep evergreen = trust + forward movement; ivory type for maximum separation. */
.mp-reframe{background:var(--mp4-green-dark);color:var(--mp4-light)}
.mp-reframe h2{font-family:'Noto Serif KR',serif;color:var(--mp4-light);font-size:clamp(36px,3.8vw,54px);line-height:1.45;max-width:900px}
.mp-reframe h2 span{color:#BFD3CB}
.mp-reframe-note{font-size:18px;line-height:1.95;color:#E0E8E4;max-width:760px}
.mp-three-words>div{border-right-color:rgba(248,245,238,.18)}
.mp-three-words strong{font-size:26px;color:#fff}
.mp-three-words span{color:#D7E0DC;font-size:15px}

/* Selected work: image first, then a full-width readable explanation. No narrow vertical copy, no decorative black bar. */
.mp-work{background:var(--mp4-paper)}
.mp-section-head{grid-template-columns:170px minmax(420px,1fr) minmax(300px,.65fr);gap:64px}
.mp-section-head h2{font-family:'Noto Serif KR',serif;font-size:clamp(38px,4vw,56px);line-height:1.38;color:var(--mp4-ink)}
.mp-section-head p{font-size:16px;line-height:1.9;color:var(--mp4-muted);max-width:430px}
.mp-case{display:block;min-height:0;background:transparent;border-top:1px solid var(--mp4-line)}
.mp-case-image{min-height:620px;width:100%;background-position:center 52%;filter:saturate(.86) contrast(1.02)}
.mp-case-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:88px;background:var(--mp4-paper-2);color:var(--mp4-ink);padding:58px 64px 62px;align-items:start}
.mp-case-copy-primary,.mp-case-copy-secondary{min-width:0}
.mp-case-meta{justify-content:flex-start;gap:20px;margin-bottom:28px;color:#68645C;font-size:10px}
.mp-case-panel h3{font-family:'Noto Serif KR',serif;font-size:clamp(31px,3vw,46px);line-height:1.55;letter-spacing:-.035em;margin:0;color:var(--mp4-ink)}
.mp-case-panel p{font-size:17px;line-height:2;color:var(--mp4-muted);margin:4px 0 0;max-width:620px}
.mp-journey{margin:30px 0 28px;color:var(--mp4-green);font-weight:600;gap:11px}
.mp-journey i{background:#A7B8B0}
.mp-text-link{color:var(--mp4-green);border-bottom-color:#7A968B;font-weight:700}
.mp-case-panel small{display:block;color:#747068;margin-top:26px;max-width:580px;line-height:1.75}

/* Industry application: a soft growth field, not a noisy card wall. */
.mp-industries{background:var(--mp4-sage)}
.mp-industries-head h2{font-family:'Noto Serif KR',serif;color:var(--mp4-ink);font-size:clamp(36px,3.7vw,52px);line-height:1.45}
.mp-industries-head p{color:#4F5B56;font-size:17px;line-height:1.9;max-width:720px}
.mp-industry-row{border-top-color:rgba(23,23,20,.16)}
.mp-industry-row:last-child{border-bottom-color:rgba(23,23,20,.16)}
.mp-industry-row h3{color:var(--mp4-ink)}
.mp-industry-row p{color:#46534E;font-weight:600;letter-spacing:.02em}

/* Method: same growth green, but body remains easy to read. */
.mp-method{background:var(--mp4-green);color:var(--mp4-light)}
.mp-method h2{font-family:'Noto Serif KR',serif;color:#fff}
.mp-method h2 em{color:#C9DAD3}
.mp-method-item{border-top-color:rgba(255,255,255,.18)}
.mp-method-item h3{color:#fff}
.mp-method-item p{color:#DCE6E1;font-size:15px;line-height:1.85;max-width:650px}

.mp-proof{background:var(--mp4-paper-2)}
.mp-proof-quote{color:var(--mp4-ink);line-height:1.72;max-width:900px}
.mp-proof-quote.muted{color:var(--mp4-muted)}

/* Final CTA: image may create atmosphere, but a dark evergreen overlay owns the contrast. */
.mp-contact{color:#fff}
.mp-contact-overlay{background:linear-gradient(90deg,rgba(23,45,40,.94) 0%,rgba(23,45,40,.88) 52%,rgba(23,45,40,.62) 100%)}
.mp-contact h2{font-family:'Noto Serif KR',serif;color:#fff;max-width:920px}
.mp-contact p{color:#E2EAE6;font-size:17px;line-height:1.9;max-width:700px}
.mp-contact-primary{background:#fff!important;color:var(--mp4-green-dark)!important;border-color:#fff!important}
.mp-contact-secondary{color:#fff!important;border-color:rgba(255,255,255,.55)!important}

@media(max-width:900px){
  .mp-shell{width:min(100% - 40px,1240px)}
  .mp-hero{display:block;min-height:0}
  .mp-hero-bg{width:100%;height:48vh;min-height:360px}
  .mp-hero-inner{padding:112px 0 72px}
  .mp-hero h1{font-size:42px;line-height:1.32}
  .mp-question{grid-template-columns:38px 1fr;padding:31px 0}
  .mp-section-head{grid-template-columns:1fr;gap:24px}
  .mp-case-image{min-height:52vh}
  .mp-case-panel{grid-template-columns:1fr;gap:30px;padding:40px 26px 44px}
  .mp-case-panel h3{font-size:32px;line-height:1.5}
  .mp-case-panel p{font-size:16px;line-height:1.9}
}