/* Namokro: local product narrative, shared portfolio typography and navigation. */
.namokro{--nam-sand:#e8e1d5;--nam-stone:#eeebe4}
.namokro figure{margin:0;min-width:0}
.namokro img{display:block;width:100%;height:auto}
.namokro figcaption,.namokro .nam-small{font-size:12px;line-height:1.7;color:var(--muted)}
.namokro figcaption{margin-top:14px}
.namokro .nam-hero{display:grid;grid-template-columns:1fr 1.45fr;gap:6vw;align-items:center;padding:65px 0 90px}
.namokro .case-header{padding:0}
.namokro .case-header h1{font-size:clamp(55px,7.5vw,130px)}
.namokro .intro-text{font-size:16px;line-height:1.75;max-width:400px}
.namokro .case-meta{justify-content:flex-start;gap:24px;margin-top:30px;font-size:12px}
.namokro .case-meta a{border-bottom:1px solid var(--line);padding-bottom:4px}
.namokro .nam-band{margin:0 -4vw;padding:75px 4vw 85px;background:var(--nam-stone)}
.namokro .nam-section{padding:85px 0}
.namokro .section-heading{grid-template-columns:1fr 1fr;gap:6vw;margin-bottom:45px}
.namokro .section-heading h2{font-size:clamp(28px,3.2vw,46px);line-height:1.15}
.namokro .nam-journey{display:flex;justify-content:space-between;align-items:center;max-width:850px;margin:0 auto 32px;font-size:12px;letter-spacing:.16em}
.namokro .nam-journey span[aria-hidden]{color:var(--muted);font-size:22px}
.namokro .nam-transformation{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:6vw;align-items:center}
.namokro .nam-soap-outline,.namokro .nam-jewel-outline{justify-self:center;width:100%;max-width:140px}
.namokro .nam-jewel-outline{max-width:85px}
.namokro .nam-forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.namokro .nam-forms figure:nth-child(2){margin-top:65px}
.namokro .nam-forms figure:nth-child(3){margin-top:130px}
.namokro .nam-system{display:grid;grid-template-columns:1fr 1.1fr;gap:6vw;background:var(--nam-sand);align-items:center}
.namokro .nam-system .section-heading{display:block}
.namokro .nam-system h2{margin-bottom:25px}
.namokro .nam-diagram{position:relative;min-height:620px}
.namokro .nam-cord{position:absolute;left:22%;top:0;height:620px;width:auto}
.namokro .nam-callout{position:absolute;left:43%;right:0;font-size:12px;line-height:1.6}
.namokro .nam-callout span{letter-spacing:.09em}
.namokro .nam-callout p{color:var(--muted);margin-top:5px}
.namokro .nam-loop{top:70px}
.namokro .nam-soap{top:265px}
.namokro .nam-soap img{height:160px;width:auto;margin-top:20px}
.namokro .nam-stopper{bottom:0}
.namokro .nam-material-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:8vw;align-items:center}
.namokro .nam-material-labels{font-size:14px;line-height:2;margin:0 0 45px}
.namokro .nam-material-side figure{width:85%;margin-left:auto}
.namokro .nam-package-composition{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;isolation:isolate;padding-top:25px}
.namokro .nam-pattern{position:absolute;width:68%;right:-2%;top:0;z-index:-1;opacity:.48;clip-path:inset(0 5% 8% 0);mix-blend-mode:multiply}
.namokro .nam-package-photo{grid-column:1/7}
.namokro .nam-package-detail{grid-column:9/13;margin-top:90%}
.namokro .nam-final{padding-bottom:90px}
.namokro .nam-campaign-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;align-items:start;padding-bottom:60px}
.namokro .nam-campaign-grid figure:nth-child(1){grid-column:1/8;grid-row:1/3}
.namokro .nam-campaign-grid figure:nth-child(2){grid-column:9/13;grid-row:1}
.namokro .nam-campaign-grid figure:nth-child(3){grid-column:9/13;grid-row:2}
.namokro .nam-campaign-grid figure:nth-child(4){grid-column:1/13;margin:40px 0}
.namokro .nam-campaign-grid figure:nth-child(4) img{max-height:1000px;object-fit:contain;background:var(--nam-stone)}
.namokro .nam-campaign-grid figure:nth-child(5){grid-column:1/7}
.namokro .nam-campaign-grid figure:nth-child(6){grid-column:8/13;margin-top:100px}
@media(max-width:700px){.namokro .nam-hero{grid-template-columns:1fr;gap:30px;padding:45px 0 55px}.namokro .case-header h1{font-size:clamp(55px,12vw,80px)}.namokro .nam-band{margin:0 -5vw;padding:45px 5vw}.namokro .nam-section{padding:55px 0}.namokro .section-heading{grid-template-columns:1fr;gap:20px;margin-bottom:30px}.namokro .nam-transformation{gap:6vw;grid-template-columns:1fr 2fr 1fr}.namokro .nam-soap-outline{max-width:65px}.namokro .nam-jewel-outline{max-width:35px}.namokro .nam-journey{font-size:10px;letter-spacing:.07em;margin-bottom:25px}.namokro .nam-forms{grid-template-columns:1fr;gap:30px}.namokro .nam-forms figure{width:85%}.namokro .nam-forms figure:nth-child(2){margin:0 0 0 auto}.namokro .nam-forms figure:nth-child(3){margin:0}.namokro .nam-system{grid-template-columns:1fr;gap:30px}.namokro .nam-diagram{min-height:520px}.namokro .nam-cord{height:520px;left:18%}.namokro .nam-callout{left:40%;font-size:11px}.namokro .nam-soap{top:215px}.namokro .nam-soap img{height:130px}.namokro .nam-material-grid{grid-template-columns:1fr;gap:30px}.namokro .nam-material-side{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;align-items:center}.namokro .nam-material-labels{font-size:12px;margin:0}.namokro .nam-material-side figure{width:100%}.namokro .nam-package-composition{gap:15px;padding-top:70px}.namokro .nam-pattern{width:90%;right:-2%;opacity:.45}.namokro .nam-package-photo{grid-column:1/9}.namokro .nam-package-detail{grid-column:7/13;margin-top:0}.namokro .nam-campaign-grid{grid-template-columns:1fr;gap:30px;padding-bottom:40px}.namokro .nam-campaign-grid figure:nth-child(n){grid-column:1;grid-row:auto;margin:0}.namokro .nam-campaign-grid figure:nth-child(4) img{max-height:none}.namokro .case-bottom{flex-wrap:wrap}}