@import "https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;600;700&display=swap";@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}}:root{--green:#328264;--green-dark:#1d5b46;--deep:#152e27;--ink:#1b1918;--gray:#f2f3f2;--white:#fff;--pink:#b33b78;--line:#1b19182b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:#fff;margin:0;font-family:Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,textarea,select{font:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.04em;font-family:Comfortaa,Arial,sans-serif;font-weight:600}p{line-height:1.65}.eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.69rem;font-weight:700;line-height:1.4;display:block}.eyebrow.light{color:#ffffffb8}.site-header{z-index:100;border-bottom:1px solid var(--line);background:#fff;align-items:center;gap:30px;width:100%;height:88px;padding:0 clamp(22px,4vw,70px);transition:all .35s;display:flex;position:fixed;top:0;left:0}.site-header.on-dark{color:#fff;background:0 0;border-color:#fff3}.site-header.scrolled{height:72px;color:var(--ink);background:#fffffff7;box-shadow:0 4px 30px #0000000d}.brand{flex:none;width:145px}.brand img{object-fit:contain;width:100%;height:54px}.desktop-nav{align-items:center;gap:clamp(13px,1.5vw,26px);margin-left:auto;font-size:.77rem;display:flex}.desktop-nav a{white-space:nowrap;padding:10px 0;position:relative}.desktop-nav a:after{content:"";background:currentColor;width:0;height:1px;transition:all .25s;position:absolute;bottom:4px;left:0}.desktop-nav a:hover:after,.desktop-nav a.active:after{width:100%}.header-cta{text-transform:uppercase;letter-spacing:.08em;border:1px solid;align-items:center;gap:24px;padding:14px 17px;font-size:.73rem;font-weight:700;display:flex}.menu-button{background:0 0;border:0;width:42px;height:42px;margin-left:auto;padding:9px;display:none}.menu-button i{background:currentColor;height:1px;margin:7px 0;display:block}.mobile-nav{width:100%;color:var(--ink);border-top:1px solid var(--line);background:#fff;padding:20px 24px 30px;position:absolute;top:100%;left:0}.mobile-nav>a{border-bottom:1px solid var(--line);justify-content:space-between;padding:15px 0;font-family:Comfortaa;font-size:1.15rem;display:flex}.mobile-nav .mobile-cta{background:var(--green);color:#fff;justify-content:center;margin-top:18px;padding:17px}.button{letter-spacing:.08em;text-transform:uppercase;border:1px solid;justify-content:space-between;align-items:center;gap:42px;min-height:54px;padding:0 20px;font-size:.74rem;font-weight:700;transition:all .25s;display:inline-flex}.button:hover{transform:translateY(-2px)}.button.light{color:#fff}.button.primary{border-color:var(--green);background:var(--green);color:#fff}.text-link{text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid;align-items:center;padding:15px 0;font-size:.77rem;font-weight:700;display:inline-flex}.arrow-link{letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid;justify-content:space-between;width:min(100%,390px);padding:17px 0;font-size:.75rem;font-weight:700;display:inline-flex}.arrow-link span{transition:all .25s}.arrow-link:hover span{transform:translate(4px,-4px)}.hero{background:var(--deep);color:#fff;grid-template-columns:1.02fr .98fr;min-height:100vh;padding:150px clamp(24px,6vw,110px) 72px;display:grid;position:relative;overflow:hidden}.hero:before{content:"";pointer-events:none;background:radial-gradient(circle at 15% 18%,#32826470,#0000 35%);position:absolute;inset:0}.hero-copy{z-index:2;align-self:center;padding-right:clamp(20px,5vw,86px)}.hero-copy h1{max-width:850px;margin:34px 0;font-size:clamp(3.1rem,5.6vw,6.7rem);line-height:.98}.hero-copy>p{color:#ffffffb8;max-width:660px;font-size:1.02rem}.hero-actions{align-items:center;gap:35px;margin-top:40px;display:flex}.hero-visual{align-self:center;height:calc(100vh - 222px);min-height:510px;position:relative;overflow:hidden}.hero-visual:after{content:"";background:linear-gradient(90deg,#152e2759,#0000 42%);position:absolute;inset:0}.hero-visual img{object-fit:cover;width:100%;height:100%}.image-note{z-index:2;letter-spacing:.2em;font-size:.58rem;position:absolute;bottom:18px;right:18px}.hero-number{color:#ffffff0d;font-family:Comfortaa;font-size:clamp(11rem,24vw,28rem);line-height:1;position:absolute;bottom:-.18em;right:3vw}.statement{text-align:center;padding:clamp(100px,14vw,210px) clamp(24px,8vw,150px)}.statement h2{margin:35px 0;font-size:clamp(3rem,7vw,8rem)}.statement h2 em,.catalog-intro em{color:var(--green);font-style:normal}.statement p{color:#666;max-width:520px;margin:auto}.section{padding:clamp(90px,10vw,160px) clamp(24px,7vw,120px)}.section-head{grid-template-columns:1fr 2fr 1fr;align-items:start;gap:30px;margin-bottom:80px;display:grid}.section-head h2{margin:0}.section-head>p{color:#666;margin-top:2.4rem}.solutions{background:var(--gray)}.solution-list{border-top:1px solid var(--line)}.solution-card{border-bottom:1px solid var(--line);grid-template-columns:160px 70px 1fr 30px;align-items:center;gap:35px;padding:30px 10px;transition:all .3s;display:grid}.solution-image{height:105px;overflow:hidden}.solution-image img{object-fit:cover;filter:saturate(.75);width:100%;height:100%}.solution-card .number{letter-spacing:.18em;font-size:.65rem}.solution-card h3{margin:0 0 8px;font-size:clamp(1.5rem,2.5vw,2.7rem)}.solution-card p{color:#666;max-width:700px;margin:0}.solution-card>b{font-size:1.3rem;transition:all .25s}.solution-card:hover{background:#fff;padding-left:20px;padding-right:20px}.solution-card:hover>b{transform:translate(4px,-4px)}.journey{background:var(--green);color:#fff;padding:clamp(90px,11vw,170px) clamp(24px,7vw,120px)}.journey .section-head{grid-template-columns:1fr 3fr}.journey ol{border-top:1px solid #ffffff4d;margin:70px 0 40px;padding:0;list-style:none}.journey li{border-bottom:1px solid #ffffff4d;grid-template-columns:100px 1fr;padding:26px 0;display:grid}.journey li span{letter-spacing:.16em;font-size:.7rem}.journey li p{margin:0;font-family:Comfortaa;font-size:clamp(1.25rem,2vw,2rem)}.why{grid-template-columns:1fr 1.2fr;gap:10vw;display:grid}.split-title h2{margin:34px 0}.feature-grid{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;display:grid}.feature-grid>div{border-bottom:1px solid var(--line);min-height:130px;padding:28px 20px}.feature-grid>div:nth-child(odd){border-right:1px solid var(--line)}.feature-grid span{letter-spacing:.15em;color:var(--green);font-size:.65rem}.feature-grid p{margin:24px 0 0;font-family:Comfortaa;font-size:1.1rem}.catalog-preview{background:#f8f8f6;grid-template-columns:.8fr 1.2fr;min-height:950px;display:grid}.catalog-intro{flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(80px,9vw,140px) clamp(24px,7vw,120px);display:flex}.catalog-intro h2{margin:45px 0;font-size:clamp(2.8rem,5vw,5.5rem)}.chapters{grid-template-rows:repeat(3,1fr);display:grid}.chapter{color:#fff;position:relative;overflow:hidden}.chapter>img{object-fit:cover;width:100%;height:100%;transition:all .6s;position:absolute;inset:0}.chapter:after{content:"";background:linear-gradient(90deg,#152e27e6,#152e270d);position:absolute;inset:0}.chapter.day:after{background:linear-gradient(90deg,#6c1845e6,#b33b780d)}.chapter.night:after{background:linear-gradient(90deg,#091915f0,#152e271f)}.chapter>div{z-index:2;max-width:520px;padding:45px;position:relative}.chapter span{letter-spacing:.2em;font-size:.65rem}.chapter h3{margin:20px 0 5px;font-size:clamp(2rem,3vw,3.5rem)}.chapter p{color:#fffc}.chapter b{position:absolute;top:48px;right:45px}.chapter:hover img{transform:scale(1.035)}.quality-band{background:var(--deep);color:#fff;grid-template-columns:1fr 1fr;display:grid}.quality-band>div:first-child{padding:clamp(80px,10vw,150px) clamp(24px,7vw,110px)}.quality-band h2{margin:42px 0}.quality-band p{color:#ffffffb3;max-width:650px}.quality-image{min-height:700px;position:relative;overflow:hidden}.quality-image img{object-fit:cover;width:100%;height:100%}.quality-image:after{content:"";background:linear-gradient(90deg,#152e2766,#0000);position:absolute;inset:0}.quality-image span{z-index:2;letter-spacing:.2em;font-size:.58rem;position:absolute;bottom:25px;right:25px}.knowledge .section-head{grid-template-columns:1fr 3fr}.article-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.article-grid>a{border-top:1px solid var(--line);padding-top:20px}.article-visual{background:var(--green);height:320px;margin:24px 0;position:relative}.article-visual span{color:#ffffff40;font-family:Comfortaa;font-size:8rem;position:absolute;bottom:8px;right:20px}.visual-2{background:var(--pink)}.visual-3{background:var(--deep)}.article-grid h3{min-height:90px;font-size:1.45rem;line-height:1.25}.article-grid b{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}.founder{background:var(--gray);grid-template-columns:1.25fr .75fr;align-items:center;gap:7vw;padding:clamp(90px,10vw,160px) clamp(24px,7vw,120px);display:grid}.video-placeholder{aspect-ratio:16/10;background:linear-gradient(130deg, var(--deep), var(--green));color:#fff;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.video-placeholder>span{letter-spacing:.2em;font-size:.6rem;position:absolute;top:22px;left:24px}.video-placeholder button{color:#fff;background:0 0;border:1px solid #fff9;border-radius:50%;width:86px;height:86px;font-size:1.3rem}.video-placeholder small{letter-spacing:.15em;position:absolute;bottom:22px;right:24px}.founder h2{margin:35px 0;font-size:clamp(2.3rem,4vw,4.5rem)}.founder>div:last-child>p{color:#666}.signature{border-top:1px solid var(--line);padding-top:25px;font-family:Comfortaa;color:var(--ink)!important}.signature small{letter-spacing:.14em;text-transform:uppercase;font-family:Arial;font-size:.66rem}.final-cta{background:var(--green);color:#fff;padding:clamp(90px,12vw,180px) clamp(24px,10vw,180px)}.final-cta h2{margin:38px 0}.final-cta>p{color:#ffffffbf;max-width:680px}.final-cta>div{align-items:center;gap:35px;margin-top:42px;display:flex}.inner-hero{background:var(--deep);color:#fff;min-height:72vh;padding:200px clamp(24px,9vw,170px) 100px;position:relative;overflow:hidden}.inner-hero:before{content:"";border:1px solid #ffffff1f;border-radius:50%;width:45vw;height:45vw;position:absolute;bottom:-35%;right:-5%}.inner-hero h1{max-width:1200px;margin:45px 0;font-size:clamp(3.3rem,7vw,8.3rem);line-height:.98}.inner-hero>p{color:#ffffffb3;max-width:680px;font-size:1.08rem}.inner-mark{color:#ffffff0a;font-family:Comfortaa;font-size:25vw;position:absolute;bottom:-.25em;right:4vw}.content-hero{background:#214b3d}.contact-hero{background:var(--green)}.catalog-hero{background:var(--green-dark)}.editorial-sections{padding:30px clamp(24px,8vw,150px) 120px}.editorial-sections article{border-bottom:1px solid var(--line);grid-template-columns:100px .8fr 1.2fr;align-items:start;gap:30px;padding:65px 0;display:grid}.editorial-sections article>span{letter-spacing:.18em;color:var(--green);font-size:.65rem}.editorial-sections h2{margin:0;font-size:clamp(2rem,3.5vw,4rem)}.editorial-sections p{color:#5f5f5f;max-width:700px;font-size:1.05rem}.quote-section{background:var(--gray);text-align:center;padding:130px 7vw}.quote-section p{color:var(--green);font-family:Comfortaa;font-size:clamp(2.4rem,5vw,5.5rem);line-height:1.15}.article-index{grid-template-columns:1fr 1fr;gap:0 5vw;display:grid}.article-index article{border-bottom:1px solid var(--line);padding:50px 0}.article-index h2{margin:30px 0 18px;font-size:clamp(1.7rem,2.5vw,2.7rem)}.article-index p{color:#666}.article-index a{text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:700}.contact-layout{grid-template-columns:.75fr 1.25fr;gap:8vw;padding:clamp(90px,10vw,150px) clamp(24px,8vw,150px);display:grid}.contact-layout h2{margin:38px 0}.contact-layout>div:first-child>p{color:#666}.contact-direct{border-top:1px solid var(--line);margin-top:60px;padding-top:25px;font-size:.8rem}.project-form{flex-direction:column;gap:24px;display:flex}.form-row{grid-template-columns:1fr 1fr;gap:22px;display:grid}.project-form label{text-transform:uppercase;letter-spacing:.1em;flex-direction:column;gap:9px;font-size:.67rem;font-weight:700;display:flex}.project-form input,.project-form select,.project-form textarea{width:100%;color:inherit;background:0 0;border:0;border-bottom:1px solid #999;border-radius:0;outline:none;padding:12px 2px}.project-form input:focus,.project-form select:focus,.project-form textarea:focus{border-color:var(--green);box-shadow:0 2px 0 var(--green)}.project-form .consent{text-transform:none;letter-spacing:0;grid-template-columns:18px 1fr;align-items:start;font-weight:400;line-height:1.5;display:grid}.project-form .consent input{width:16px;height:16px;margin:2px 0}.project-form .button{align-self:flex-start}.form-status{color:var(--green);font-size:.83rem}.sample-band{background:var(--deep);color:#fff;grid-template-columns:.8fr 1.2fr;gap:8vw;padding:clamp(80px,10vw,140px) clamp(24px,8vw,150px);display:grid}.sample-band h2{margin:35px 0;font-size:clamp(2.5rem,4vw,4.5rem)}.sample-band .project-form input{border-color:#ffffff73}.validation-note{text-align:center}.validation-note h2{max-width:900px;margin:30px auto}.validation-note p{color:#666;margin-bottom:35px}footer{color:#fff;background:#10241e;padding:90px clamp(24px,7vw,120px) 30px}.footer-top{border-bottom:1px solid #ffffff2e;justify-content:space-between;align-items:end;padding-bottom:55px;display:flex}.footer-top img{width:190px}.footer-top p{max-width:430px;margin:0;font-family:Comfortaa;font-size:1.35rem}.footer-grid{grid-template-columns:repeat(3,1fr);gap:60px;padding:60px 0;display:grid}.footer-grid>div{flex-direction:column;gap:12px;display:flex}.footer-grid .eyebrow{color:#ffffff73;margin-bottom:16px}.footer-grid a,.footer-grid p{color:#ffffffc7;margin:0;font-size:.85rem}.footer-bottom{letter-spacing:.1em;text-transform:uppercase;color:#ffffff80;border-top:1px solid #ffffff2e;justify-content:space-between;padding-top:24px;font-size:.68rem;display:flex}@media (width<=1180px){.desktop-nav{display:none}.menu-button{display:block}.header-cta{margin-left:auto}.hero{grid-template-columns:1fr 1fr;padding-left:40px;padding-right:40px}.hero-copy h1{font-size:4.6rem}.section-head{grid-template-columns:1fr 2.2fr}.section-head>p{grid-column:2}.catalog-preview{grid-template-columns:1fr}.catalog-intro{min-height:650px}.chapters{min-height:900px}.why{grid-template-columns:1fr}.feature-grid{margin-top:30px}}@media (width<=767px){h2{font-size:2.7rem}.site-header{height:72px;padding:0 20px}.brand{width:118px}.header-cta{display:none}.hero{min-height:auto;padding:135px 22px 60px;display:block}.hero-copy{padding:0}.hero-copy h1{margin:30px 0;font-size:clamp(3rem,13vw,4.4rem)}.hero-actions{flex-direction:column;align-items:stretch}.hero-visual{height:390px;min-height:0;margin-top:55px}.hero-number{font-size:15rem}.statement{text-align:left}.statement h2{font-size:3.2rem}.section-head,.journey .section-head{display:block}.section-head h2{margin:30px 0}.section-head>p{margin-top:0}.solution-card{grid-template-columns:70px 1fr 25px;gap:15px;padding:25px 0}.solution-image{grid-column:1/4;width:100%;height:200px}.solution-card .number{align-self:start}.solution-card p{font-size:.9rem}.journey li{grid-template-columns:55px 1fr}.why{display:block}.split-title h2{font-size:2.6rem}.feature-grid{grid-template-columns:1fr}.feature-grid>div:nth-child(odd){border-right:0}.catalog-intro{min-height:auto}.catalog-intro h2{font-size:3rem}.chapters{min-height:1050px}.chapter>div{padding:32px 24px}.chapter b{top:34px;right:24px}.quality-band{grid-template-columns:1fr}.quality-image{min-height:420px}.article-grid{grid-template-columns:1fr}.article-grid>a{margin-bottom:50px}.article-visual{height:280px}.founder{grid-template-columns:1fr}.founder>div:last-child{order:-1}.final-cta>div{flex-direction:column;align-items:stretch}.inner-hero{min-height:75vh;padding:155px 24px 80px}.inner-hero h1{font-size:3.8rem}.editorial-sections article{grid-template-columns:45px 1fr;padding:45px 0}.editorial-sections h2{font-size:2rem}.editorial-sections p{grid-column:2}.article-index,.contact-layout,.sample-band,.form-row{grid-template-columns:1fr}.footer-top{display:block}.footer-top p{margin-top:35px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:12px}}.quote-section p{text-wrap:balance;max-width:1220px;margin:0 auto;font-size:clamp(2.1rem,3.35vw,3.8rem)}.quote-section p span{white-space:nowrap;display:block}.inner-hero-copy{z-index:2;position:relative}.inner-hero-copy>p{color:#ffffffb3;max-width:680px;font-size:1.08rem}.inner-hero.has-image{grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);align-items:center;gap:clamp(45px,7vw,120px);min-height:88vh;padding-right:clamp(24px,6vw,110px);display:grid}.inner-hero.has-image h1{max-width:880px;font-size:clamp(2.8rem,4.4vw,5.35rem)}.inner-hero-visual{z-index:2;border-radius:var(--image-radius);height:min(62vh,680px);min-height:430px;margin:0;position:relative;overflow:hidden}.inner-hero-visual img,.article-visual img,.article-index-image img,.quality-gallery img,.article-hero-image img{object-fit:cover;width:100%;height:100%}.inner-hero-visual:after,.article-index-image:after,.quality-gallery figure:after,.article-hero-image:after{content:"";background:linear-gradient(#0000 66%,#0a191580);position:absolute;inset:0}.inner-hero-visual figcaption,.article-hero-image figcaption,.article-index-image>span,.quality-gallery figcaption{z-index:2;color:#fff;letter-spacing:.18em;text-transform:uppercase;font-size:.56rem;position:absolute;bottom:16px;right:18px}.article-visual{border-radius:var(--image-radius);overflow:hidden}.article-visual img,.article-index-image img{transition:transform .55s}.article-grid>a:hover .article-visual img,.article-index article:hover .article-index-image img{transform:scale(1.035)}.article-index-image{border-radius:var(--image-radius);height:clamp(250px,30vw,420px);margin-bottom:28px;display:block;position:relative;overflow:hidden}.quality-gallery{grid-template-columns:1.2fr .8fr;gap:18px;padding:0 clamp(24px,8vw,150px) clamp(90px,10vw,150px);display:grid}.quality-gallery figure{border-radius:var(--image-radius);height:clamp(380px,48vw,700px);margin:0;position:relative;overflow:hidden}.article-hero-image{border-radius:var(--image-radius);max-width:1220px;height:clamp(380px,52vw,720px);margin:75px 0 -220px;position:relative;overflow:hidden}.article-page:has(.article-hero-image) .article-body{padding-top:320px}@media (width<=980px){.inner-hero.has-image{grid-template-columns:1fr;gap:50px;padding-right:clamp(24px,9vw,170px)}.inner-hero-visual{width:100%;height:min(60vw,560px);min-height:360px}.quality-gallery{grid-template-columns:1fr 1fr}}@media (width<=767px){.quote-section{padding:85px 24px}.quote-section p{font-size:clamp(1.75rem,8.2vw,2.45rem)}.quote-section p span{white-space:normal}.inner-hero.has-image{padding-bottom:42px}.inner-hero.has-image h1{font-size:clamp(2.55rem,11vw,3.45rem)}.inner-hero-visual{height:360px;min-height:0}.quality-gallery{grid-template-columns:1fr}.quality-gallery figure{height:380px}.article-hero-image{height:340px;margin:55px 0 -150px}.article-page:has(.article-hero-image) .article-body{padding-top:230px}}@media (width<=390px){.hero-copy h1{font-size:2.85rem}.inner-hero h1{font-size:3rem}.feature-grid p{font-size:1rem}.chapter h3{font-size:2rem}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}:root{--image-radius:22px}main img{border-radius:var(--image-radius)}.brand{width:158px}.brand img{border-radius:0;height:58px}h2{font-size:clamp(2.15rem,4.2vw,4.35rem);line-height:1.08}.hero-copy h1{letter-spacing:-.035em;font-size:clamp(3rem,4.8vw,5.65rem);line-height:1.01}.statement h2{font-size:clamp(2.8rem,5.8vw,6.45rem);line-height:1.06}.inner-hero h1{max-width:1120px;font-size:clamp(3rem,5.7vw,6.45rem);line-height:1.01}.solution-card h3{font-size:clamp(1.45rem,2.1vw,2.35rem)}.catalog-intro h2{font-size:clamp(2.6rem,4.4vw,4.75rem)}.chapter h3{font-size:clamp(1.85rem,2.6vw,3rem)}.founder h2{font-size:clamp(2.15rem,3.5vw,3.85rem)}.quote-section p{font-size:clamp(2.2rem,4.3vw,4.7rem)}.sample-band h2{font-size:clamp(2.25rem,3.6vw,3.85rem)}.hero-visual,.solution-image,.chapter,.video-placeholder,.service-index img{border-radius:var(--image-radius)}.chapters{gap:14px;padding:14px 14px 14px 0}.quality-image{border-radius:var(--image-radius) 0 0 var(--image-radius)}.green-hero{background:var(--green-dark)}.deep-hero{background:var(--deep)}.story-copy{grid-template-columns:.7fr 1.3fr;gap:8vw;padding:clamp(90px,10vw,155px) clamp(24px,8vw,150px);display:grid}.story-copy>div{max-width:820px}.story-copy p{color:#555;margin-bottom:28px;font-size:clamp(1.05rem,1.4vw,1.25rem)}.principles{background:#fff}.principles>.eyebrow{margin-bottom:50px}.principle-grid{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;display:grid}.principle-grid article{border-bottom:1px solid var(--line);padding:38px 28px}.principle-grid article:nth-child(odd){border-right:1px solid var(--line)}.principle-grid h2{font-size:clamp(1.7rem,2.5vw,2.6rem)}.principle-grid p{color:#666}.service-index>a{border-bottom:1px solid var(--line);grid-template-columns:60px 280px 1fr;align-items:center;gap:38px;padding:34px 0;display:grid}.service-index>a>span{letter-spacing:.18em;color:var(--green);font-size:.67rem}.service-index img{object-fit:cover;width:100%;height:170px}.service-index h2{margin-bottom:12px;font-size:clamp(1.8rem,3vw,3.2rem)}.service-index p{color:#666;max-width:720px}.service-index b{text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}.decision-band,.next-step{background:var(--green);color:#fff;padding:clamp(85px,10vw,150px) clamp(24px,10vw,180px)}.decision-band h2,.next-step h2{max-width:980px;margin:36px 0}.decision-band p{color:#ffffffbf;max-width:720px;margin-bottom:36px}.service-two{grid-template-columns:1fr 1fr;gap:0;padding:clamp(90px,10vw,150px) clamp(24px,8vw,150px);display:grid}.service-two article{padding-right:7vw}.service-two article+article{border-left:1px solid var(--line);padding-left:7vw;padding-right:0}.service-two h2{margin:38px 0;font-size:clamp(2rem,3.2vw,3.35rem)}.service-two p{color:#5d5d5d;font-size:1.05rem}.included{background:var(--gray);grid-template-columns:.9fr 1.1fr;gap:9vw;display:grid}.included h2,.attention h2{margin:38px 0;font-size:clamp(2.2rem,3.7vw,3.9rem)}.included>div>p{color:#666}.included ul,.attention ul{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}.included li,.attention li{border-bottom:1px solid var(--line);padding:20px 10px 20px 38px;line-height:1.5;position:relative}.included li:before,.attention li:before{content:"↗";color:var(--green);position:absolute;left:4px}.process-detail{background:var(--deep);color:#fff;padding:clamp(90px,10vw,150px) clamp(24px,7vw,120px)}.process-detail>.eyebrow{margin-bottom:55px}.process-detail>div{border-top:1px solid #ffffff40;grid-template-columns:repeat(4,1fr);display:grid}.process-detail article{padding:35px 30px 20px 0}.process-detail article+article{border-left:1px solid #ffffff40;padding-left:30px}.process-detail article>span{letter-spacing:.18em;color:#ffffff8c;font-size:.66rem}.process-detail h3{margin:45px 0 18px;font-size:clamp(1.3rem,1.8vw,1.8rem)}.process-detail p{color:#ffffffad;font-size:.9rem}.attention{grid-template-columns:.8fr 1.2fr;gap:9vw;display:grid}.next-step h2{font-size:clamp(2.2rem,4vw,4.25rem);line-height:1.12}.next-step .button{margin-top:25px}.journey-page{padding:40px clamp(24px,8vw,150px) 120px}.journey-page article{border-bottom:1px solid var(--line);grid-template-columns:110px 1fr;padding:52px 0;display:grid}.journey-page article>span{letter-spacing:.18em;color:var(--green);font-size:.67rem}.journey-page article>div{grid-template-columns:.8fr 1.2fr;gap:6vw;display:grid}.journey-page h2{margin:0;font-size:clamp(1.9rem,3vw,3.1rem)}.journey-page p{color:#666;max-width:690px;margin:0}.quality-principle{background:var(--green-dark);color:#fff;grid-template-columns:1fr 1fr;gap:8vw;padding:clamp(85px,10vw,150px) clamp(24px,8vw,150px);display:grid}.quality-principle h2{margin:38px 0}.quality-principle>p{color:#ffffffbd;align-self:end;font-size:1.08rem}.catalog-copy{grid-template-columns:1fr 1fr;gap:8vw;display:grid}.catalog-copy h2{margin:35px 0}.catalog-copy>div:last-child p{color:#666}.catalog-copy .button{margin-top:20px}.article-page{padding-top:88px}.article-page>header{background:var(--deep);color:#fff;padding:110px clamp(24px,11vw,200px) 100px}.article-page>header>a{text-transform:uppercase;letter-spacing:.1em;margin-bottom:70px;font-size:.72rem;display:inline-block}.article-page h1{max-width:1150px;margin:35px 0;font-size:clamp(2.8rem,5vw,5.5rem);line-height:1.06}.article-page>header>p{color:#ffffffb8;max-width:780px;font-size:1.15rem}.article-body{max-width:900px;margin:auto;padding:100px 24px}.article-body>section{margin-bottom:70px}.article-body h2{font-size:clamp(1.8rem,3vw,2.8rem)}.article-body p{color:#555;font-size:1.08rem}.article-body aside{background:var(--gray);border-radius:22px;margin-top:100px;padding:55px}.article-body aside h2{margin:30px 0}.article-body aside a{color:var(--green);font-weight:700}.legal-page{max-width:980px;margin:auto;padding:100px 24px}.legal-page section{border-bottom:1px solid var(--line);padding:40px 0}.legal-page h2{font-size:clamp(1.7rem,2.6vw,2.5rem)}.legal-page p{color:#5d5d5d}.legal-page a{color:var(--green);font-weight:700}.form-status a{font-weight:700;text-decoration:underline}.light-status{color:#fff}.sample-form textarea{border-color:#ffffff73}.not-found{min-height:80vh;padding:200px 8vw 100px}.not-found h1{margin:40px 0;font-size:clamp(3rem,6vw,6rem)}.not-found p{color:#666;margin-bottom:35px}@media (width<=980px){.story-copy,.service-two,.included,.attention,.quality-principle,.catalog-copy{grid-template-columns:1fr}.story-copy{gap:45px}.service-two article{padding:0}.service-two article+article{border-left:0;border-top:1px solid var(--line);margin-top:55px;padding:55px 0 0}.process-detail>div{grid-template-columns:1fr 1fr}.process-detail article:nth-child(3){border-left:0}.service-index>a{grid-template-columns:50px 210px 1fr}.journey-page article>div{grid-template-columns:1fr}.quality-principle>p{align-self:start}.chapters{padding:14px}}@media (width<=1000px){.journey .section-head{display:block}.journey .section-head h2{max-width:760px;margin:28px 0 0;font-size:clamp(2.7rem,6.7vw,4rem)}.journey ol{margin-top:55px}}@media (width<=767px){.brand{width:130px}.hero-copy h1{font-size:clamp(2.65rem,11.5vw,3.75rem)}.statement h2{font-size:clamp(2.65rem,11vw,3.6rem)}.inner-hero h1{font-size:clamp(2.7rem,12vw,3.65rem)}.story-copy{padding-left:24px;padding-right:24px}.principle-grid{grid-template-columns:1fr}.principle-grid article:nth-child(odd){border-right:0}.service-index>a{grid-template-columns:40px 1fr;gap:20px}.service-index img{grid-column:1/3;height:220px}.service-index>a>div{grid-column:2}.process-detail>div{grid-template-columns:1fr}.process-detail article+article{border-top:1px solid #ffffff40;border-left:0;padding-left:0}.journey li,.journey-page article{grid-template-columns:84px 1fr}.article-page{padding-top:72px}.article-page>header{padding-top:80px}.article-page>header>a{margin-bottom:45px}.article-body aside{padding:32px 24px}.quality-image{border-radius:var(--image-radius) var(--image-radius) 0 0}.chapters{padding:14px}}


/* Regras que a conversão para site estático exige.
   Vão anexadas ao fim do CSS original, sem alterá-lo. */

/* ---- Cabeçalho da home ----
   No topo ele era transparente: parecia verde por estar sobre o hero,
   mas ao rolar o conteúdo passava por baixo e os textos se sobrepunham.
   Agora é verde sólido no topo e branco sólido ao rolar.

   Os dois estados são opacos de propósito. O branco original tinha 97%
   de opacidade e, durante a transição de 0,35s, dava para ver o texto
   atravessando — que é justamente o defeito a eliminar.

   O verde é o --deep, o mesmo do hero, para que no topo o cabeçalho e a
   primeira dobra pareçam uma peça só. */
.site-header.on-dark {
  background: var(--deep);
  border-bottom-color: #ffffff26;
}
.site-header.scrolled {
  background: #fff;
}

/* ---- Grades que empurravam a página para os lados ----
   Duas páginas ficavam mais largas que a tela e rolavam de lado:
   /qualidade em qualquer largura (~7px a mais) e a home em 320px (21px).

   A causa é a mesma nas duas, e é uma armadilha do CSS Grid: "1fr"
   significa "minmax(auto, 1fr)", e esse "auto" impede a faixa de encolher
   abaixo do tamanho mínimo do conteúdo. Uma palavra comprida basta para
   a faixa passar do espaço disponível e arrastar a página junto.

   "minmax(0, 1fr)" permite encolher; o texto passa a quebrar, que é o
   comportamento esperado numa tela estreita. */
/* A grade do desktop fica como o original: ".8fr" nao encolhe abaixo do
   conteudo, entao a palavra longa alarga a coluna em vez de transbordar
   e cobrir a vizinha. Eu havia posto "minmax(0, ...)" aqui tambem, mas o
   transbordo que isso resolvia era o do celular, onde a regra e outra —
   e no desktop o efeito foi "Acompanhamento" por cima do paragrafo ao
   lado, na pagina Qualidade.
   Nada de hifenizacao: em titulo de marca, palavra partida fica pior
   que o problema. */

.catalog-preview > *,
.chapters > *,
.solutions > *,
.solutions .solution-image { min-width: 0; }
/* A foto da linha de Soluções não encolhia junto com a coluna e, em
   320px, empurrava a página 20px para o lado. */
.solutions .solution-image img { max-width: 100%; height: auto; }

/* Este bloco é do CELULAR, e por isso vale até 767px — o mesmo ponto de
   corte do original (o build move os 780px dele para cá, veja
   alinharPontoDeCorte em build.mjs).

   Ele valia até 900px, e essa diferença de 133px era a causa do defeito
   mais grave do site em tablet. Entre 768 e 900px acontecia isto:

     - o .solution-card recebia daqui a grade de CELULAR, de três colunas
       (70px para o número, o texto, 25px para a seta);
     - mas as regras que fazem essa grade funcionar — a foto ocupando a
       linha inteira com "grid-column: 1/4", o número alinhado ao topo —
       moram no bloco de 780px do original e NÃO valiam ali.

   O resultado, medido em 834px: a foto encolhia para 70px, o número
   tomava a coluna do meio inteira (517px) e o texto do cartão era
   espremido nos 25px reservados para a seta — 25px de caixa para uma
   palavra de 182px. Era o "Industria/para/terceiros" quebrado letra por
   letra dos prints, com o vazio enorme ao lado.

   Acima de 767px o cartão volta a usar a grade de quatro colunas do
   original (160px de foto, 70px de número, o texto, 30px de seta), que
   em 768px ainda deixa 295px para o texto. */
@media (width <= 767px) {
  /* No celular o numero sai de ao lado e vai para cima do titulo. A
     coluna dele ocupava 45px mais 30px de vao — 75px que faltavam
     exatamente para "Acompanhamento" caber, e a palavra era cortada na
     borda. Empilhado, o titulo recebe a largura inteira.
     Sem hifenizacao e sem mexer em tamanho de fonte. */
  /* Empilha com flex, e nao com grade de uma coluna: em grade o numero
     ficava colado no titulo, parecendo defeito. Aqui o espacamento
     entre os tres e explicito.
     O numero sai de ao lado e vai para cima porque a coluna dele
     ocupava 45px mais 30px de vao — 75px que faltavam exatamente para
     "Acompanhamento" caber, e a palavra era cortada na borda. */
  .editorial-sections article {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .editorial-sections article > span { margin-bottom: 14px; }
  .editorial-sections article > h2 { margin-bottom: 16px; }
  .chapters { grid-template-columns: minmax(0, 1fr); }
  .catalog-preview { grid-template-columns: minmax(0, 1fr); }

  /* A linha de Soluções no celular é "70px 1fr 25px" com dois vãos de
     15px: 125px já comprometidos. O 1fr restante não encolhe abaixo da
     palavra mais longa do bloco — "Industrialização" — e em 320px ela
     empurrava a página 17px para fora.
     Só a faixa do meio muda. O desktop usa outra regra, de quatro
     colunas, e não é tocado por esta.

     As colunas de fora também encolheram, e por medida: em 320px sobravam
     132px para o texto, e "Desenvolvimento" pedia 152px na menor letra
     aceitável. A coluna do número guardava 70px para escrever "01" com
     10px de corpo, e a da seta 25px para um sinal de 20px. Com 44px, 20px
     e vãos de 12px sobram 169px, e as duas palavras longas do bloco
     entram sem encolher mais a letra. */
  .solution-card {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    gap: 12px;
  }

  /* "1fr" é "minmax(auto, 1fr)": a faixa não encolhe abaixo da palavra
     mais longa que ela contém. Numa tela estreita isso não faz a palavra
     quebrar — faz a grade inteira passar da tela e a página rolar de
     lado. Era o que acontecia em 320px na Jornada (+15px de rolagem, em
     "Entendimento") e nas linhas de Soluções da página /solucoes.

     A troca por "minmax(0, 1fr)" vale só aqui no celular: no desktop as
     mesmas faixas têm largura de sobra, e deixar que a palavra alargue a
     coluna é o comportamento certo lá. */
  .journey li,
  .journey-page article        { grid-template-columns: 84px minmax(0, 1fr); }
  .service-index > a           { grid-template-columns: 40px minmax(0, 1fr); }
  .journey-page article > div,
  .process-detail > div,
  .principle-grid,
  .article-index,
  .contact-layout,
  .sample-band,
  .form-row,
  .article-grid,
  .feature-grid,
  .footer-grid,
  .why,
  .founder,
  .quality-band,
  .quality-gallery,
  .story-copy,
  .service-two,
  .included,
  .attention,
  .quality-principle,
  .inner-hero.has-image        { grid-template-columns: minmax(0, 1fr); }

  /* Os cartões de princípio guardavam 28px de recuo de cada lado dentro
     de uma seção que já tem os seus. Em 320px sobravam 216px para
     "Responsabilidade", que pede 237px. Empilhados numa coluna só, esses
     recuos não separam nada de nada — o que os justificava era a divisa
     entre as duas colunas do desktop. */
  .principle-grid article { padding-left: 0; padding-right: 0; }

  /* Altura de tela no celular: "vh" é a tela COM as barras do navegador
     escondidas. No navegador de dentro do Instagram, que abre com barra
     em cima e em baixo, uma seção de 75vh nasce mais alta do que o que
     se enxerga, e a primeira linha do conteúdo seguinte fica fora.
     "svh" é a medida da tela com as barras à mostra — o pior caso, que é
     o que interessa aqui. A linha em "vh" fica logo acima como reserva
     para navegador antigo que não conheça a unidade nova. */
  .inner-hero           { min-height: 75vh; min-height: 75svh; }
  .inner-hero.has-image { min-height: 88vh; min-height: 88svh; }
  .glutamina-case       { min-height: min(70vh, 560px); min-height: min(70svh, 560px); }
}

/* ---- Decoração que vazava para fora da tela ----
   Várias seções têm círculos decorativos em ::before, posicionados com
   deslocamento negativo (o do .inner-hero tem 45vw e fica em right:-5%).
   As seções que não declaram recorte deixam a decoração escapar, e a
   página inteira passa a rolar de lado — na Qualidade, em toda largura.

   "clip" e não "hidden": hidden cria área de rolagem e quebra
   posicionamento fixo dentro da seção; clip só recorta. */
.quality-gallery,
.quality-principle,
.editorial-sections,
.service-two,
.included,
.process-detail,
.attention,
.next-step,
.decision-band,
.service-index,
.story-copy,
.principles,
.quote-section,
.solutions,
.statement,
.journey,
.why,
.catalog-preview,
.quality-band,
.knowledge,
.founder,
.final-cta { overflow-x: clip; }

/* ---- Seção do fundador: imagem no lugar do vídeo ----
   Mantém o mesmo espaço e o mesmo canto arredondado da caixa que havia
   antes, então nada se desloca na página. Sem foto definida, fica o
   gradiente da marca — e não um aviso de conteúdo faltando. */
.founder-foto {
  aspect-ratio: 16 / 10;
  border-radius: var(--image-radius);
  background: linear-gradient(130deg, var(--deep), var(--green));
  overflow: hidden;
}
.founder-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Carrossel de fotos ----
   Só existe quando o bloco tem duas ou mais imagens. A moldura é a mesma
   da foto única, então a página não se desloca ao ligar ou desligar.

   O efeito é fusão com aproximação lenta, e não deslize lateral. Slide
   chama atenção para o movimento; aqui a imagem parece respirar e o olho
   fica na foto. Combina com o tom editorial do resto do site. */
.carrossel { position: relative; isolation: isolate; }

.carrossel-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.06);
  /* A saída é mais rápida que a entrada: as duas fotos se cruzam sem
     que o fundo apareça no meio da troca. */
  transition: opacity 1.1s ease-out;
  z-index: 0;
}
.carrossel-foto.ativa {
  opacity: 1;
  z-index: 1;
  animation: aproximar 7s ease-out forwards;
}

/* Nove por cento em sete segundos: perceptível como vida, não como
   movimento. Acima disso vira efeito de apresentação de slides. */
@keyframes aproximar {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}

/* Véu escuro só na base, para os pontos terem contraste sobre qualquer
   foto — inclusive uma clara. */
.carrossel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(transparent, #0b1f1980);
  pointer-events: none;
  z-index: 2;
}

.carrossel-pontos {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.carrossel-pontos button {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff73;
  cursor: pointer;
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
}
/* Alvo de toque de 28px em volta do ponto de 7px: no celular, acertar um
   alvo de 7px é frustrante. */
.carrossel-pontos button::after {
  content: "";
  position: absolute;
  inset: -11px;
}
.carrossel-pontos button[aria-selected="true"] {
  background: #fff;
  width: 26px;
  border-radius: 4px;
}
.carrossel-pontos button:hover { background: #ffffffc4; }
.carrossel-pontos button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Quem pediu menos animação no sistema recebe a troca sem movimento
   nenhum — nem fusão longa, nem aproximação. */
@media (prefers-reduced-motion: reduce) {
  .carrossel-foto { transition: opacity .2s linear; }
  .carrossel-foto.ativa { animation: none; transform: none; }
}

/* ---- Pedido de amostras recolhido ----
   A classe é posta pelo JavaScript. Sem ele, o formulário fica visível:
   nunca se esconde conteúdo pelo HTML sem garantir o caminho de volta. */
/* O !important existe por um motivo concreto: o formulário é o último
   filho da seção, e qualquer regra de layout que mire esse último filho
   vence esta por especificidade e reabre o formulário. Já aconteceu. */
.sample-form.form-recolhido { display: none !important; }

/* Recolhida, a seção tem duas colunas com uma só ocupada e sobra metade
   da faixa vazia. Vira uma coluna — mas a faixa verde continua de ponta
   a ponta: limitar a largura da própria seção encolheria o fundo junto,
   e o verde passaria a ser um retângulo solto no meio do branco. */
.sample-band:has(.form-recolhido) { grid-template-columns: minmax(0, 1fr); }
.sample-band:has(.form-recolhido) > div { max-width: 760px; }

/* "display: flex" põe o botão em linha própria — como inline, ele
   encostava no link "Ver catálogo 2026" e passava por cima do
   sublinhado. "fit-content" evita que ele estique de ponta a ponta. */
.sample-band .button {
  display: flex;
  width: fit-content;
  margin-top: 36px;
}

/* ---- Caso L-Glutamina na página White Label ----
   Faixa dividida, na mesma escala das outras faixas do site: fundo
   --gray (o cinza-papel institucional), tipografia da escala de h2 e
   recuos com o mesmo clamp de .section. Antes daqui o fundo era
   var(--paper), token que existe no catálogo e NÃO existe no CSS do
   site: a declaração era inválida e a seção saía sem fundo nenhum. */
.glutamina-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(70vh, 560px);
  background: var(--gray);
  overflow: clip;
}
.glutamina-case-copy {
  align-self: center;
  padding: clamp(72px, 9vw, 130px) clamp(24px, 7vw, 120px);
}
/* Mesma escala dos h2 do site (.included, .attention): clamp(2.2rem,
   3.7vw, 3.9rem). A versão anterior ia a 82px, acima do maior título de
   seção que existe no site, e a página parecia vir de outro lugar. */
/* O espaço entre o chapéu e o título vive AQUI, e não em uma regra por
   seção. Estava "margin: 0", e cada seção somava um "margin-top: 16px"
   por conta própria — 16px debaixo de um título de até 62px, o que
   colava as duas linhas. Duas seções não tinham nem isso e ficavam com
   zero: a faixa da White Label e a de qualidade.

   38px fixos, e não um clamp. Eu havia posto clamp(20px, 2.4vw, 38px), e
   estava errado: o site NÃO escala esse respiro por largura de tela. Ele
   usa número fixo em todo lugar — 38px em .included, .attention,
   .final-cta, .service-two e .quality-principle, 36px em .next-step,
   42px em .quality-band. O clamp só alcançava os 38px em 1583px de tela;
   em 1024px dava 25px e em 768px para baixo dava 20px, mais apertado que
   qualquer par de chapéu e título que existe no site. */
.glutamina-case-copy h2,
.glutamina-final h2,
.glutamina-section h2 {
  margin: 38px 0 0;
  color: var(--deep);
  font-family: Comfortaa, Arial, sans-serif;
  font-size: clamp(2.2rem, 3.7vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.02;
  text-wrap: pretty;
  text-wrap: balance;
}
.glutamina-case-copy h2 em,
.glutamina-final h2 em,
.glutamina-section h2 em { color: var(--green); font-style: normal; }
.glutamina-case-copy p {
  max-width: 560px;
  margin: 32px 0 0;
  color: #5e645f;
  font-size: 1.08rem;
  line-height: 1.6;
}
.glutamina-case-copy .button { margin-top: 36px; }
.glutamina-case-visual {
  min-height: 420px;
  overflow: hidden;
  position: relative;
  background: var(--deep);
}
.glutamina-case-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.glutamina-case-visual > span {
  position: absolute;
  right: 18px;
  bottom: 16px;
  color: #fff;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---- Página de produto L-Glutamina ----
   Mesmas medidas do resto do site: o hero repete a altura e a escala de
   título de .inner-hero.has-image, e as seções repetem o recuo de
   .section. Nada de identidade própria — é uma página do site, não um
   anexo com desenho separado. */
.glutamina-page { overflow-x: clip; }
/* A altura do hero é o "min-height" — nunca o texto.
 *
 *  Era o contrário, e escondia duas coisas de uma vez. Os recuos de cima
 *  e de baixo da coluna de texto somavam 260px, e com eles a coluna
 *  passava de 760px sozinha: o "min-height" deixava de mandar e o hero
 *  crescia atrás dele. Em 1366x768 o hero saía com 768px onde a tela
 *  oferece 680 abaixo do cabeçalho — a faixa de "200 g · 40 · 100 un."
 *  ficava 88px abaixo da dobra.
 *
 *  E, alto desse jeito, a moldura da foto ficava em pé (proporção 0,9)
 *  contra uma foto deitada (1,28): o "cover" enchia pela altura e jogava
 *  11% da largura fora de cada lado, comendo a tigela de frutas.
 *
 *  Com os recuos menores a coluna cabe dentro do min-height, o hero volta
 *  a ter altura previsível e a moldura fica levemente deitada — o corte
 *  cai para 6% de cada lado. Nada de mudar o tamanho da letra. */
.glutamina-hero {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: min(86vh, 740px);
  color: #fff;
  background: var(--deep);
  position: relative;
}
/* O recuo da direita é menor que o da esquerda de propósito: ali não é
   margem de página, é o vão até a foto. Igualando os dois, como estava,
   a linha de texto perdia 46px e o parágrafo ganhava uma linha. */
.glutamina-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(104px, 8vw, 124px) clamp(36px, 3.6vw, 64px) clamp(48px, 4.2vw, 68px) clamp(24px, 7vw, 120px);
}
/* Os 45px de cima são exatamente os de .inner-hero h1, o hero de todas
   as outras páginas internas — e lá eles são fixos, inclusive no
   celular. Aqui a margem era zero e o chapéu encostava na primeira linha
   do título, que com line-height .98 ainda sobe um pouco mais perto. */
.glutamina-hero h1 {
  max-width: 680px;
  margin: 45px 0 0;
  font-family: Comfortaa, Arial, sans-serif;
  font-size: clamp(2.8rem, 4.4vw, 5.35rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .98;
}
.glutamina-hero h1 em { color: #b9d2c9; font-style: normal; }
.glutamina-lead { max-width: 590px; margin: 26px 0 0; color: #ffffffb3; font-size: 1.08rem; line-height: 1.6; }
.glutamina-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 30px; }
.glutamina-actions .text-link { color: #fff; }
.glutamina-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: auto; padding-top: 30px; }
.glutamina-facts div { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid #ffffff2e; }
.glutamina-facts strong { font-size: 1.15rem; font-weight: 500; }
.glutamina-facts span { color: #ffffff8c; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; }
.glutamina-hero-visual { min-height: 430px; overflow: hidden; position: relative; background: #0c211b; }
.glutamina-hero-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Mesmas medidas das legendas de foto do site (.inner-hero-visual
   figcaption): é a mesma coisa, e antes tinha corpo e posição próprios. */
.glutamina-visual-label {
  position: absolute;
  right: 18px;
  bottom: 16px;
  color: #fff;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.glutamina-section { padding: clamp(90px, 10vw, 160px) clamp(24px, 7vw, 120px); background: var(--gray); }
.glutamina-section-heading { max-width: 860px; }
.glutamina-section-heading p,
.glutamina-format-copy > p,
.glutamina-process > div > p { max-width: 650px; margin: 30px 0 0; color: #5e645f; font-size: 1.08rem; line-height: 1.6; }
.glutamina-opportunity-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 6vw; margin-top: 68px; border-top: 1px solid #d9deda; }
.glutamina-opportunity-grid > div:first-child { padding-top: 50px; }
/* O nome do produto acompanha a escala dos h2. Maior que o título da
   seção, ele passava a ser lido como o título — e não é. */
.glutamina-opportunity-grid > div:first-child strong {
  display: block;
  color: var(--green);
  font-family: Comfortaa, Arial, sans-serif;
  font-size: clamp(2.2rem, 3.7vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
}
.glutamina-opportunity-grid > div:first-child span { display: block; max-width: 260px; margin-top: 22px; font-size: .95rem; line-height: 1.5; }
.glutamina-opportunity-grid ul { margin: 0; padding: 0; list-style: none; }
.glutamina-opportunity-grid li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid #d9deda; }
.glutamina-opportunity-grid li > span,
.glutamina-feature-grid article > span,
.glutamina-quality-grid article > span { color: var(--green); font-size: .6rem; font-weight: 800; letter-spacing: .18em; }
.glutamina-opportunity-grid li strong { display: block; font-size: 1.05rem; font-weight: 600; }
.glutamina-opportunity-grid li small { display: block; margin-top: 7px; color: #6e736f; font-size: .87rem; line-height: 1.55; }
.glutamina-differentials { color: #fff; background: var(--green); }
.glutamina-heading-light,
.glutamina-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 8vw; align-items: end; margin-bottom: 74px; }
.glutamina-heading-light h2 { color: #fff; }
.glutamina-heading-light h2 em { color: #c7eadb; }
.glutamina-heading-light > p { max-width: 490px; margin: 0 0 8px; color: #ffffffbf; font-size: 1.05rem; line-height: 1.6; }
.glutamina-feature-grid,
.glutamina-quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #ffffff52; }
.glutamina-feature-grid article { min-height: 320px; padding: 26px 34px 24px 0; border-right: 1px solid #ffffff52; display: flex; flex-direction: column; }
.glutamina-feature-grid article + article { padding-left: 34px; }
.glutamina-feature-grid article:last-child,
.glutamina-quality-grid article:last-child { border-right: 0; }
.glutamina-feature-grid article > span,
.glutamina-feature-grid small { color: #c7eadb; }
/* Título de cartão, e não de seção: fica na mesma faixa dos h3 das
   etapas e da qualidade, logo abaixo. Antes chegava a 52px e competia
   com o título da própria seção. */
.glutamina-feature-grid h3 { margin: auto 0 20px; color: #fff; font-family: Comfortaa, Arial, sans-serif; font-size: clamp(1.4rem, 1.8vw, 1.7rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.glutamina-feature-grid p { margin: 0; color: #ffffffbf; font-size: .95rem; line-height: 1.6; }
.glutamina-feature-grid small { margin-top: 30px; font-size: .56rem; font-weight: 800; letter-spacing: .18em; }
.glutamina-format { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.glutamina-format-visual { min-height: min(70vh, 640px); overflow: hidden; background: var(--deep); }
.glutamina-format-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.glutamina-format-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(80px, 9vw, 140px) clamp(24px, 7vw, 120px); }
.glutamina-dose-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 54px; padding: 24px 0; border-top: 1px solid #cfd5d1; border-bottom: 1px solid #cfd5d1; }
.glutamina-dose-line div { display: flex; flex-direction: column; gap: 8px; }
.glutamina-dose-line strong { color: var(--deep); font-size: 1.3rem; font-weight: 500; }
.glutamina-dose-line span { color: #7a827d; font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.glutamina-note { color: #6b726d !important; font-size: .82rem !important; }
.glutamina-specs { background: var(--white); }
.glutamina-heading > p { max-width: 490px; margin: 0 0 8px; color: #606660; font-size: 1.05rem; line-height: 1.6; }
.glutamina-spec-table { border-top: 1px solid #aeb7b1; overflow-x: auto; }
.glutamina-spec-row { min-height: 78px; padding: 21px 10px; border-bottom: 1px solid #d7ddd9; display: grid; grid-template-columns: .8fr 1.45fr 1.4fr; gap: 40px; align-items: center; }
.glutamina-spec-row strong { color: var(--deep); font-size: .94rem; font-weight: 600; }
.glutamina-spec-row span { color: #535a55; font-size: .88rem; line-height: 1.5; }
.glutamina-spec-header { min-height: 52px; color: #fff; background: var(--deep); }
.glutamina-spec-header span { color: #fff; font-size: .56rem; font-weight: 800; letter-spacing: .16em; }
.glutamina-process { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; }
.glutamina-process ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid #b9c2bc; }
.glutamina-process li { min-height: 240px; padding: 25px 28px 20px 0; border-right: 1px solid #b9c2bc; border-bottom: 1px solid #b9c2bc; display: flex; flex-direction: column; }
.glutamina-process li:nth-child(even) { padding-left: 28px; border-right: 0; }
.glutamina-process li > span { color: var(--green); font-size: .6rem; font-weight: 800; letter-spacing: .18em; }
.glutamina-process h3 { margin: auto 0 14px; color: var(--deep); font-family: Comfortaa, Arial, sans-serif; font-size: 1.45rem; font-weight: 600; letter-spacing: -.04em; }
.glutamina-process li p { margin: 0; color: #68706a; font-size: .88rem; line-height: 1.6; }
.glutamina-quality { color: #fff; background: var(--deep); }
.glutamina-quality h2 { color: #fff; }
.glutamina-quality h2 em { color: #b9d2c9; }
.glutamina-quality-statement { max-width: 1180px; }
.glutamina-quality-statement > p { max-width: 700px; margin: 30px 0 0; color: #ffffffad; font-size: 1.05rem; line-height: 1.6; }
.glutamina-quality-grid { margin-top: 80px; }
/* Coluna flexível com o h3 empurrado por "margin: auto", como nos
   cartões dos diferenciais. Antes o afastamento era um "margin-top:
   90px" fixo, que só ficava certo em uma largura de tela. */
.glutamina-quality-grid article { min-height: 250px; padding: 25px 34px 24px 0; border-right: 1px solid #ffffff40; display: flex; flex-direction: column; }
.glutamina-quality-grid article + article { padding-left: 34px; }
.glutamina-quality-grid article > span { color: #b9d2c9; }
.glutamina-quality-grid h3 { margin: auto 0 16px; color: #fff; font-family: Comfortaa, Arial, sans-serif; font-size: 1.45rem; font-weight: 600; letter-spacing: -.04em; }
.glutamina-quality-grid p { margin: 0; color: #ffffffad; font-size: .88rem; line-height: 1.6; }
.glutamina-regulatory { margin-top: 64px; border-top: 1px solid #ffffff47; border-bottom: 1px solid #ffffff47; }
.glutamina-regulatory summary { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-size: .6rem; font-weight: 800; letter-spacing: .18em; }
.glutamina-regulatory summary::-webkit-details-marker { display: none; }
/* Só o sinal de "+" ganha o corpo maior. Sem o [aria-hidden] a regra
   pegava também o rótulo, que agora é um <span> próprio para poder ser
   editado no painel sem levar o sinal junto. */
.glutamina-regulatory summary span[aria-hidden] { color: #b9d2c9; font-size: 1.25rem; line-height: 1; }
.glutamina-regulatory p { max-width: 940px; margin: 0; padding: 0 0 28px; color: #ffffffad; font-size: .88rem; line-height: 1.7; }
.glutamina-final { padding: clamp(90px, 10vw, 160px) clamp(24px, 7vw, 120px); color: #fff; text-align: center; background: var(--green); }
.glutamina-final .eyebrow { color: #c7eadb; }
.glutamina-final h2 { color: #fff; }
.glutamina-final h2 em { color: #c7eadb; }
.glutamina-final p { max-width: 680px; margin: 30px auto 0; color: #ffffffc7; font-size: 1.08rem; line-height: 1.6; }
.glutamina-final .button { margin-top: 36px; }

@media (width <= 900px) {
  .glutamina-case,
  .glutamina-hero,
  .glutamina-format,
  .glutamina-process { grid-template-columns: minmax(0, 1fr); }
  .glutamina-case-visual { min-height: 400px; }
  /* Texto primeiro, foto depois — a ordem de .inner-hero.has-image em
     todas as outras páginas internas. A versão anterior invertia os dois
     com "order", e isso custava duas coisas: a leitura deixava de seguir
     a marcação (quem usa teclado ou leitor de tela ouvia o título antes
     de uma foto que já tinha passado) e a foto nascia debaixo do
     cabeçalho fixo, que é opaco e comia os 72px de cima dela.
     O recuo de topo é o mesmo de .inner-hero no celular: 155px, o que
     sobra do cabeçalho mais o respiro da primeira linha. */
  /* Empilhado, o recuo volta a ser igual dos dois lados: aqui nao ha
     foto ao lado, e o menor da direita deixaria o texto torto. */
  .glutamina-hero-copy { padding: clamp(120px, 20vw, 155px) clamp(24px, 7vw, 60px) clamp(56px, 8vw, 72px); }
  .glutamina-hero-visual { min-height: 56svh; }
  .glutamina-hero { min-height: 0; }
  .glutamina-hero h1 { font-size: clamp(2.55rem, 11vw, 3.45rem); }
  .glutamina-opportunity-grid { grid-template-columns: minmax(0, 1fr); }
  .glutamina-heading-light,
  .glutamina-heading { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 30px; margin-bottom: 56px; }
  .glutamina-feature-grid,
  .glutamina-quality-grid { grid-template-columns: minmax(0, 1fr); }
  .glutamina-feature-grid article,
  .glutamina-feature-grid article + article,
  .glutamina-quality-grid article,
  .glutamina-quality-grid article + article { min-height: 0; padding: 26px 0; border-right: 0; border-bottom: 1px solid #ffffff52; }
  /* O número e o título do cartão.
     No desktop quem separa os dois é um "margin: auto" dentro de um
     cartão de 320px de altura: o espaço sobra e a margem o ocupa. Duas
     linhas acima o cartão perde a altura mínima, o "auto" fica sem
     espaço para distribuir e vale zero — eu tinha posto 18px no lugar,
     que é menos do que qualquer outro par de rótulo e título da página.
     24px é a mesma proporção que os 38px têm debaixo dos títulos de
     seção: um pouco mais que o corpo do próprio título. */
  .glutamina-feature-grid h3,
  .glutamina-quality-grid h3 { margin-top: 24px; }
  .glutamina-format-visual { min-height: 52svh; }
  .glutamina-process ol { margin-top: 30px; }
  /* A tabela guarda 700px para as três colunas não ficarem espremidas a
     ponto de o texto virar uma palavra por linha, e a moldura rola de
     lado quando esses 700px não cabem.

     O "min()" é o que impede a rolagem de virar corte. Estava só
     "700px", e entre 768 e 833px a moldura é menor que isso: em 768px —
     um iPad em pé, a largura de tablet mais comum — sobravam 661px e
     39px do fim da coluna de observações ficavam fora da moldura, sem
     nada dizendo que era preciso arrastar. De 834px para cima a moldura
     já passa de 700 e nada mudava.

     Com "min(700px, 100%)" a tabela nunca fica mais larga que a própria
     moldura: onde cabem os 700px, ela usa os 700px; onde não cabem, as
     colunas encolhem os 6% que faltam em vez de esconder o fim da
     última. Abaixo de 768px nada disso vale — ali ela é empilhada. */
  .glutamina-spec-row { min-width: min(700px, 100%); gap: 24px; }
}
@media (width <= 560px) {
  .glutamina-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .glutamina-facts div:last-child { grid-column: 1 / -1; }
  .glutamina-opportunity-grid { margin-top: 48px; }
  .glutamina-opportunity-grid > div:first-child { padding-top: 40px; padding-bottom: 10px; }
  .glutamina-dose-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glutamina-dose-line div:last-child { grid-column: 1 / -1; }
  .glutamina-process ol { grid-template-columns: minmax(0, 1fr); }
  .glutamina-process li,
  .glutamina-process li:nth-child(even) { min-height: 0; padding: 26px 0; border-right: 0; }
  /* Mesmo motivo dos cartões acima, e aqui o efeito era pior: sem a
     altura mínima o "margin: auto" do h3 vale zero, e o "01" ficava
     encostado em "Alinhamento", sem espaço nenhum. Só a partir daqui,
     porque entre 561 e 900px a etapa ainda tem os 240px de altura e o
     "auto" continua abrindo o espaço sozinho. */
  .glutamina-process h3 { margin-top: 24px; }
}
/* "L-Glutamina." é uma palavra só, de doze letras, e não tem onde
   quebrar. No mínimo do clamp acima ela mede mais que a largura útil de
   uma tela de 320px e era cortada na borda pelo recorte da página.
   Um degrau a menos de corpo devolve os pixels que faltam. */
@media (width <= 380px) {
  .glutamina-hero h1 { font-size: 2.15rem; }
  .glutamina-opportunity-grid > div:first-child strong { font-size: 1.9rem; }
}

/* ---- Resposta dos formulários ----
   O envio agora acontece sem recarregar a página, então a confirmação
   e o erro precisam aparecer junto do botão. */
.form-aviso {
  border-left: 3px solid;
  padding: 14px 16px;
  margin-top: 18px;
  font-size: .9rem;
  line-height: 1.55;
  display: none;
}
.form-aviso[data-tipo="ok"] {
  display: block;
  color: var(--deep);
  background: #eef6f2;
  border-color: var(--green);
}
.form-aviso[data-tipo="erro"] {
  display: block;
  color: #8a2c5c;
  background: #fdf2f7;
  border-color: #b33b78;
}

/* ---- Menu no celular ----
   O botão existia na marcação, mas quem o fazia funcionar era o React.

   A primeira versão que escrevi abria um painel com a mesma cor do hero:
   os itens pareciam flutuar sobre a página, dava para ver o texto por
   baixo, e o botão continuava duas listras — nada dizia que ali se
   fechava. O painel agora ocupa a tela inteira e o botão vira um X.

   O limite é 1180px, e não é um número escolhido aqui: é onde o original
   troca o menu de linha pelo botão de três listras. Enquanto este bloco
   parava em 900px havia uma faixa de 280px de largura — 901 a 1180, que
   inclui o iPad deitado em 1024 — onde o botão aparecia, o JavaScript
   marcava o cabeçalho com "menu-aberto" e nada acontecia na tela: o
   painel só existia dentro do @media de 900px. O menu simplesmente não
   abria, e não havia outro caminho para as páginas internas.

   A altura do painel acompanha a do cabeçalho, que muda no mesmo ponto
   de corte do celular: 88px acima dele, 72px abaixo. */
@media (width <= 1180px) {
  .site-header { --altura-cabecalho: 88px; }

  .site-header .desktop-nav { display: none; }

  .site-header.menu-aberto .desktop-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    position: fixed;
    top: var(--altura-cabecalho);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--deep);
    padding: 8px 26px 40px;
    margin: 0;
    overflow-y: auto;
    font-size: 1.1rem;
  }
  .site-header.menu-aberto .desktop-nav a {
    color: #fff;
    padding: 18px 2px;
    border-bottom: 1px solid #ffffff1f;
    white-space: normal;
  }
  .site-header.menu-aberto .desktop-nav a:last-child { border-bottom: 0; }
  /* O sublinhado que cresce no hover é gesto de mouse; no toque ele
     apenas pisca ao tocar e some. */
  .site-header.menu-aberto .desktop-nav a:after { display: none; }

  /* Com o menu aberto o cabeçalho fica sempre escuro, mesmo em página
     de fundo claro: o painel é escuro e o logo branco precisa aparecer. */
  .site-header.menu-aberto { background: var(--deep); color: #fff; }

  /* Duas listras viram X. É o único sinal de "toque aqui para fechar"
     que o visitante reconhece sem precisar aprender. */
  .menu-button i { transition: transform .25s, opacity .2s; }
  .site-header.menu-aberto .menu-button i:first-child {
    transform: translateY(4px) rotate(45deg);
  }
  .site-header.menu-aberto .menu-button i:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  /* A página não rola atrás do painel aberto. */
  body.menu-travado { overflow: hidden; }
}
@media (width <= 767px) {
  /* No celular o original baixa o cabeçalho para 72px. O painel desce
     junto, senão sobra uma faixa de página aparecendo por cima dele. */
  .site-header { --altura-cabecalho: 72px; }
}

/* ---- Telas de 320px ----
   Mesmo com o numero empilhado, "Acompanhamento" nao cabe nos 268px que
   sobram depois da margem lateral. Reduzir a margem devolve os pixels
   que faltam, sem tocar em tamanho de fonte nem partir a palavra.
   Vale so ate 340px: acima disso a margem original ja e confortavel. */
@media (width <= 340px) {
  .editorial-sections { padding-inline: 14px; }
}

/* ---- Quebra dos titulos ----
   O titulo da Qualidade e uma frase unica, sem quebra escrita: as linhas
   sao formadas pelo navegador. Ao encher uma linha e passar a proxima
   palavra adiante, ele deixava "Ela" sozinha numa linha inteira.

   "balance" distribui as palavras entre as linhas em vez de encher uma
   de cada vez, e e justamente para isso que existe. "pretty" atende os
   navegadores que ainda nao tem "balance" e ao menos evita a palavra
   orfa na ultima linha.

   Nada de tamanho de fonte muda: as mesmas palavras, repartidas melhor. */
.inner-hero h1 {
  text-wrap: pretty;
  text-wrap: balance;
}

/* ---------------------------------------------------------- assinatura
   "Desenvolvido por Moa Digital", no fim do rodapé. Gerada pelo build
   (rodape.mjs), depois de tudo, que é onde a CIBOS pediu.

   Mais discreta que a linha do copyright logo acima: é crédito, não
   informação que o visitante veio buscar. Mesmas medidas de letra e de
   espaçamento do .footer-bottom, para não parecer um pedaço solto. */
/* A assinatura é o item do meio da linha de fecho, entre o copyright e o
   link de privacidade. Herda tudo da linha — tamanho, espaçamento e cor —
   para ler como um dos três, e não como um pedaço colado depois. */
.footer-bottom .assinatura {
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  font-size: inherit;
  margin: 0;
  text-align: center;
}

/* "Voltar ao início" fecha o rodapé, embaixo de tudo. Sem barra acima: a
   linha separadora fazia o bloco de cima parecer encerrado e o de baixo,
   um pedaço solto. */
.voltar-topo {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .68rem;
  text-align: center;
  margin-top: 22px;
}
.voltar-topo a {
  color: #ffffff80;
  text-decoration: none;
  transition: color .18s;
}
.voltar-topo a:hover,
.voltar-topo a:focus-visible { color: #fff; }
.assinatura a {
  color: #ffffff8f;
  text-decoration: none;
  border-bottom: 1px solid #ffffff3d;
  padding-bottom: 1px;
  transition: color .18s, border-color .18s;
}
.assinatura a:hover,
.assinatura a:focus-visible { color: #fff; border-bottom-color: #fff9; }

/* ==========================================================================
   ALTURA DOS HEROS NO DESKTOP
   ==========================================================================

   PARA DESFAZER TUDO: apague este bloco inteiro, do comentário acima até a
   última chave antes da linha de fecho. O site volta exatamente ao que era.
   Nenhuma outra parte do CSS foi tocada — o site.css original continua
   intacto, como sempre.

   Valores originais, para conferência:

     .hero          padding: 150px ... 72px
     .hero-visual   height: calc(100vh - 222px)
     .inner-hero    padding: 200px ... 100px

   ---------------------------------------------------------------------
   O PROBLEMA, MEDIDO

   Cada página foi carregada no Chrome dentro de uma janela do tamanho
   exato, e o hero foi medido. Em 1366x768, que é o portátil mais comum:

     11 páginas com foto   hero de 776px numa tela de 768  ->  8px cortados
     home                  hero de 877px                   -> 109px cortados

   São duas causas diferentes, e por isso dois tratamentos diferentes.

   ---------------------------------------------------------------------
   AS PÁGINAS INTERNAS: o recuo É a causa

   Nelas o texto e a foto cabem — o que fica cortado é recuo vazio. Os
   200px de cima e 100px de baixo são fixos e não acompanham a tela.

   Com 160/84, medido:

     1280x720    -27px  ->  +29px
     1366x768     -8px  ->  +48px
     1536x864    +28px  ->  +84px

   Continua generoso: o cabeçalho fixo tem 88px, então sobram 72px de
   respiro antes do chapéu.

   ---------------------------------------------------------------------
   A HOME: o recuo NÃO é a causa

   Aqui corta conteúdo de verdade, e o culpado é o título — ele quebra em
   SEIS linhas e ocupa 465px dos 655px da coluna de texto. Recuo é
   minoria.

   A CIBOS pediu 11px a menos de cada lado, como teste. É o que está
   aqui, e é honesto dizer o que ele faz: devolve 22px, e o hero passa de
   877px para 855px em 1366x768. O conteúdo continua abaixo da dobra —
   eram 37px, passam a 15px.

   Enquanto o título quebrar em seis linhas, nenhum ajuste de recuo
   razoável fecha essa conta. O que fecharia, medido, é dar mais largura
   à coluna de texto: o título cai para cinco linhas e economiza 66px,
   mais do que todos os recuos somados e sem diminuir uma letra. Ficou
   fora por decisão da CIBOS.

   ---------------------------------------------------------------------
   SÓ DESKTOP

   O celular tem recuos próprios — 135/60 na home, 155/80 nas internas,
   155/42 nas internas com foto — e não entra nesta conta. O @media abaixo
   reproduz o ponto de corte do original, para não haver dois lugares
   dizendo onde começa o celular. Esse ponto é 767px: os 780px do arquivo
   capturado passam a 767 no build (alinharPontoDeCorte, em build.mjs), e
   este número acompanha. Enquanto ele dizia 780, as larguras de 768 a
   780px ficavam sem dono: nem o recuo de celular, nem este.
   ========================================================================== */
@media (width > 767px) {

  /* --- home --- */
  .hero {
    padding-top: 139px;
    padding-bottom: 61px;
  }
  /* O 222 do original era 150 + 72: o recuo da home escrito à mão uma
     segunda vez. Mudou lá em cima, muda aqui — 139 + 61 = 200. Sem isto
     a foto deixa de casar com a altura do texto, e em silêncio. */
  .hero-visual { height: calc(100vh - 200px); }

  /* --- as 12 páginas internas, com foto e sem --- */
  .inner-hero {
    padding-top: 160px;
    padding-bottom: 84px;
  }
}

/* ---- A faixa da Glutamina na home ----
   Mesmo componente da faixa que existe no White Label (.glutamina-case):
   fundo, grade, título e foto vêm de lá. O que muda aqui são duas coisas
   que só a home precisa — a linha de números e o par botão + link.

   Os números existem por um motivo: na home chega quem não conhece o
   modelo, e "200 g · 40 doses · 100 un." é o que separa "a CIBOS faz
   marca própria" de "existe um pote e você pode pedir cem". */
.glutamina-case-fatos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 46px);
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #d9deda;
}
.glutamina-case-fatos strong {
  display: block;
  color: var(--green-dark);
  font-family: Comfortaa, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
}
.glutamina-case-fatos span {
  display: block;
  margin-top: 6px;
  color: #7a827d;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* Empilhados sempre, e nao "lado a lado quando couber".
   Medido: o botao mais o link somam 544px, e a coluna de texto oferece
   461px em 1280, 518px em 1440 e 576px em 1600 — ou seja, o arranjo
   virava sozinho por volta de 1520px, bem no meio das larguras de
   desktop mais comuns. Um visitante em 1440 via uma coisa e outro em
   1600 via outra, sem que ninguem tivesse decidido isso.
   Empilhado tambem le melhor: o botao e a acao principal, e o link e a
   saida mais quieta logo abaixo. */
.glutamina-case-acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 32px;
}
/* O ".glutamina-case-copy .button" acima dá 36px de topo ao botão, que
   ali é o último elemento do bloco. Aqui ele é item de uma linha com o
   link ao lado, e esses 36px empurrariam só um dos dois. Mesma
   especificidade, então quem vale é esta, que vem depois. */
.glutamina-case-acoes .button { margin-top: 0; }

/* ==========================================================================
   ESCALA DE TÍTULOS E FAIXA DE TABLET
   ==========================================================================

   Duas coisas moram aqui, e são a mesma coisa vista de dois lados: como o
   texto encolhe e como o layout se reorganiza quando a tela estreita.

   ---------------------------------------------------------------------
   POR QUE OS TÍTULOS TINHAM TAMANHOS DIFERENTES NO CELULAR

   Todo título do site é um clamp(mínimo, Nvw, máximo). Em tela larga quem
   manda é o termo do meio — a largura da tela — e a escala fica coerente
   sozinha. Em tela estreita o termo do meio despenca (4,2vw em 360px são
   15px) e quem manda passa a ser o MÍNIMO de cada regra.

   E os mínimos foram escritos um a um, em momentos diferentes: 2,15rem
   aqui, 2,65rem ali, 2,7rem no título da Jornada. Medido em 360px, os
   títulos de seção da home apareciam a 34px, 35px e 43px — a mesma função
   na página, três corpos diferentes. É o que os prints mostram.

   A correção não inventa uma escala nova: mantém o termo em vw e o máximo
   de cada regra, exatamente como estão, e troca só o mínimo por um token
   compartilhado. Como o token é fluido, ele deixa de ser um degrau fixo e
   passa a acompanhar a tela até encontrar o vw da própria regra.

   Consequência que importa: onde o vw da regra já é maior que o teto do
   token, o token não vale nada e a regra fica exatamente como estava. Isso
   cobre o desktop inteiro. Conferido elemento a elemento nas 20 páginas,
   com a folha antiga e a nova carregadas lado a lado: em 1180, 1280, 1440
   e 1920px não há UMA diferença de corpo, de largura de caixa, de grade
   nem de display.

   Entre 1024 e ~1150px mudam 33 títulos de cartão, e pouco: 30 sobem
   1,3 a 1,6px (o teto de --titulo-bloco, 1,8rem, é um degrau acima do
   piso fixo de 1,7rem que eles tinham) e os 3 h3 da vitrine do catálogo
   descem 0,8px. Nenhuma grade e nenhuma caixa muda. É na direção da
   escala, e não contra ela: são os mesmos títulos que em 900px ficavam
   desalinhados.

   ---------------------------------------------------------------------
   OS CINCO DEGRAUS

   display  título da home e a frase de abertura — as duas peças de
            manifesto, as maiores do site
   pagina   o h1 das páginas internas, dos artigos e da L-Glutamina
   secao    todo título de seção: é o degrau que estava mais desalinhado
   bloco    título de etapa, de cartão de índice e de artigo
   cartao   título de linha na lista de Soluções, o menor da escala

   O teto de cada token é o valor que a própria regra já entregava em
   768px, para que a passagem de celular para tablet não tenha degrau.

   O piso é o que cabe em 320px sem cortar a palavra mais longa de cada
   página, medido com a Comfortaa carregada — "Transformamos" no título da
   home, "transformação" nas internas, "L-Glutamina." na página do produto,
   "Entendimento" na Jornada e "Desenvolvimento" na lista de Soluções.
   ========================================================================== */
:root {
  --titulo-display: clamp(1.95rem, 10.5vw, 2.7rem);
  --titulo-pagina:  clamp(1.85rem, 10.4vw, 2.6rem);
  --titulo-secao:   clamp(1.7rem,   8.6vw, 2.15rem);
  --titulo-bloco:   clamp(1.3rem,   7.2vw, 1.8rem);
  --titulo-cartao:  clamp(1.15rem,  5.4vw, 1.45rem);
}

/* --- display --- */
.hero-copy h1 { font-size: clamp(var(--titulo-display), 4.8vw, 5.65rem); }
.statement h2 { font-size: clamp(var(--titulo-display), 5.8vw, 6.45rem); }

/* --- h1 de página --- */
.inner-hero h1            { font-size: clamp(var(--titulo-pagina), 5.7vw, 6.45rem); }
.inner-hero.has-image h1  { font-size: clamp(var(--titulo-pagina), 4.4vw, 5.35rem); }
.article-page h1          { font-size: clamp(var(--titulo-pagina), 5vw,   5.5rem); }
.glutamina-hero h1        { font-size: clamp(var(--titulo-pagina), 4.4vw, 5.35rem); }

/* --- títulos de seção ---
   O termo em vw e o máximo são os de cada regra original; só o mínimo
   passou a ser o token. Os seletores repetem os do site.css porque é
   preciso empatar a especificidade: esta folha vem depois, e no empate
   quem vem depois vence. */
h2                                  { font-size: clamp(var(--titulo-secao), 4.2vw, 4.35rem); }
.split-title h2                     { font-size: clamp(var(--titulo-secao), 4.2vw, 4.35rem); }
.catalog-intro h2                   { font-size: clamp(var(--titulo-secao), 4.4vw, 4.75rem); }
.founder h2                         { font-size: clamp(var(--titulo-secao), 3.5vw, 3.85rem); }
.sample-band h2                     { font-size: clamp(var(--titulo-secao), 3.6vw, 3.85rem); }
.service-two h2                     { font-size: clamp(var(--titulo-secao), 3.2vw, 3.35rem); }
.included h2,
.attention h2                       { font-size: clamp(var(--titulo-secao), 3.7vw, 3.9rem); }
.next-step h2                       { font-size: clamp(var(--titulo-secao), 4vw,   4.25rem); }
.editorial-sections h2              { font-size: clamp(var(--titulo-secao), 3.5vw, 4rem); }
.glutamina-case-copy h2,
.glutamina-final h2,
.glutamina-section h2               { font-size: clamp(var(--titulo-secao), 3.7vw, 3.9rem); }
/* O título da Jornada era o mais fora da linha: o original lhe dá 6,7vw
   com piso de 2,7rem quando a tela desce de 1000px, e em 360px ele saía
   com 43px — nove a mais que os títulos vizinhos, e transbordando a
   coluna em 19px. Passa a usar a escala dos outros títulos de seção. */
@media (width <= 1000px) {
  .journey .section-head h2 { font-size: clamp(var(--titulo-secao), 4.2vw, 4.35rem); }
}

/* --- títulos de cartão ---
   Só o da lista de Soluções muda de escala, e por defeito medido: em
   360px "Industrialização" pedia 182px numa coluna de 170px e era cortada
   na borda. Os demais títulos de cartão do site não transbordam em
   nenhuma largura testada e ficam como estão — uniformizar por
   uniformizar mudaria o desenho aprovado sem corrigir nada. */
.solution-card h3 { font-size: clamp(var(--titulo-cartao), 2.1vw, 2.35rem); }

/* ==========================================================================
   TABLET — 768px a 1023px
   ==========================================================================

   O original tem três pontos de corte (1180, 1000/980 e o do celular) e
   nenhum deles cria uma composição de tablet: entre 768 e 1023px a página
   é o desktop apertado. É o que os prints em iPad mostram.

   Boa parte já se resolve pelo bloco de 980px do original, que empilha as
   seções de duas colunas, e pela correção do ponto de corte lá em cima.
   O que sobra é o que está aqui — e é pouco de propósito: em tablet o
   desenho aprovado ainda cabe, e trocá-lo por outro seria redesenhar.

   Uma faixa só, fechada dos dois lados, para não disputar com as do
   original nem com as do celular. */
@media (min-width: 768px) and (max-width: 1023px) {

  /* A primeira dobra continua com foto ao lado — é a composição aprovada
     — mas a coluna do texto passa a levar 60% em vez de metade.
     Medido em 768px: com meio a meio sobram 306px para o título, e
     "Transformamos" pede 334px na Comfortaa do corpo desta faixa. Com
     1,2fr sobram 374px, e a palavra cabe inteira com folga. A foto vive
     bem com o que resta: ela é recortada por "object-fit: cover" e o
     produto é vertical. */
  .hero { grid-template-columns: 1.2fr .8fr; }

  /* O formulário de contato ficava com rótulo e campo dividindo 0,75 e
     1,25 de uma tela de 768px: os dois campos lado a lado da .form-row
     caíam para 200px cada. Empilhado, o formulário usa a largura inteira
     e a .form-row volta a ter espaço para as duas colunas. */
  .contact-layout { grid-template-columns: minmax(0, 1fr); }

  /* Três cartões de artigo em 768px dão colunas de 200px para títulos de
     23px — cerca de oito caracteres por linha. Dois cartões por linha
     devolvem largura de leitura; o terceiro fica sozinho na segunda
     linha, que é o comportamento normal de uma grade. */
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A citação da página "A CIBOS" quebra em pedaços marcados com <span>,
     e cada um é "white-space: nowrap". O original só devolve a quebra
     livre no celular; aqui em cima a linha inteira tinha de caber ou
     transbordava. */
  .quote-section p span { white-space: normal; }

  /* A vitrine do catálogo reservava 650px de altura mínima para um
     título e um parágrafo, e mais 900px para as três fotos empilhadas:
     1550px de rolagem para uma seção de apresentação. As alturas passam
     a acompanhar o conteúdo, e as fotos guardam só o que precisam para
     não virar tarja. */
  .catalog-intro { min-height: 0; padding-block: clamp(64px, 9vw, 110px); }
  .chapters { min-height: 0; }
  .chapter { min-height: 260px; }
}

/* --- títulos de bloco ---
   Título de etapa, de cartão de índice e de artigo: nem seção, nem
   legenda. O piso de cada um era fixo — 1,7rem, 1,8rem, 1,9rem — e em
   320px estourava a coluna: "Entendimento" pedia 210px numa faixa de
   170px, na Jornada, e a página inteira passava a rolar de lado. */
.journey-page h2   { font-size: clamp(var(--titulo-bloco), 3vw,   3.1rem); }
.service-index h2  { font-size: clamp(var(--titulo-bloco), 3vw,   3.2rem); }
.principle-grid h2 { font-size: clamp(var(--titulo-bloco), 2.5vw, 2.6rem); }
.article-index h2  { font-size: clamp(var(--titulo-bloco), 2.5vw, 2.7rem); }
.legal-page h2     { font-size: clamp(var(--titulo-bloco), 2.6vw, 2.5rem); }
.article-body h2   { font-size: clamp(var(--titulo-bloco), 3vw,   2.8rem); }
.chapter h3        { font-size: clamp(var(--titulo-bloco), 2.6vw, 3rem); }

/* ---- Tabela de especificações da L-Glutamina no celular ----
   Ela é uma grade de três colunas com 700px de largura mínima dentro de
   uma moldura que rola de lado. Em 390px isso mostrava a primeira coluna
   inteira, a segunda cortada no meio de "Pó para preparo de bebida" e a
   terceira — a das observações — fora da tela por completo, sem barra,
   sem sombra, sem nada que dissesse que havia mais coisa à direita. Quem
   olha vê texto cortado, não conteúdo para deslizar.

   Empilhada, a linha vira o que ela é: um parâmetro e o que se sabe
   sobre ele. Nada sai da página — nem a faixa escura de cabeçalho, que
   deixa de ser cabeçalho de coluna e passa a ser a legenda dos três
   campos que vêm abaixo, em linha e com quebra livre.

   A moldura rolante continua valendo de 768 a 900px, onde as três
   colunas ainda fazem sentido mas não cabem folgadas. */
@media (width <= 767px) {
  .glutamina-spec-table { overflow-x: visible; }
  .glutamina-spec-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    padding: 20px 0;
  }
  .glutamina-spec-row strong { margin-bottom: 2px; }
  .glutamina-spec-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 14px 16px;
  }
}

/* ==========================================================================
   QUEBRAS ESCRITAS PARA TELA LARGA
   ==========================================================================

   Os títulos do site trazem quebras escritas à mão, e elas foram
   escolhidas olhando uma tela larga: "Um caminho para cada" numa linha,
   "momento da sua marca." na outra.

   Num celular de 360px a primeira metade já não cabe — quebra de novo — e
   a segunda começa obrigada numa linha nova. Medido:

     "Um caminho para" / "cada" / "momento da sua" / "marca."
                          ^ sozinha, com 233px vazios ao lado

     "Conhecimento para" / "um" / "mercado em" / "transformação."
                            ^ sozinha, com 262px vazios ao lado

   A CIBOS reparou nas duas e disse o essencial: "momento" cabe
   perfeitamente depois de "cada". Cabe mesmo — o que não cabia era a
   quebra.

   Aqui a quebra escrita é desfeita no celular e o navegador redistribui
   as palavras. O "balance" faz a distribuição olhando o parágrafo
   inteiro, em vez de encher linha por linha e largar o resto na última.

   ---------------------------------------------------------------------
   O QUE NÃO É DESFEITO, E POR QUÊ

   Em alguns títulos a quebra não é palpite de largura: é desenho. São os
   que têm uma linha inteira colorida com <em> — "O mercado mudou." em
   escuro e "A CIBOS evoluiu com ele." em verde, ou "Sua marca de" e
   "L-Glutamina." em verde-menta. Ali a linha é a unidade da cor, e juntar
   as duas faria a cor trocar no meio de uma frase corrida.

   O ":not(:has(em))" é exatamente essa distinção. Navegador que não
   conheça o ":has" simplesmente mantém todas as quebras — que é o que
   acontece hoje, e não quebra nada.

   O espaço que sobra no lugar do <br> vem do build e do site.js; sem ele,
   "cada<br>momento" viraria "cadamomento". Está explicado nos dois.
   ========================================================================== */
@media (width <= 767px) {
  h1:not(:has(em)) br,
  h2:not(:has(em)) br { display: none; }

  h1, h2 {
    text-wrap: pretty;
    text-wrap: balance;
  }
}

/* ---- A linha de fecho do rodapé, no celular ----
   Copyright, assinatura e "Privacidade e LGPD" são três itens de uma
   linha só que, no celular, viram três linhas empilhadas. Duas ficavam
   encostadas na esquerda e a do meio centrada — a assinatura tem
   "text-align: center" próprio, herdado de quando ela era o item do meio
   de uma linha horizontal. Empilhados, o resultado era um zigue-zague.

   Centrados, os três leem como o fecho que são, e acompanham o "Voltar
   ao início" logo abaixo, que já era centrado. */
@media (width <= 767px) {
  .footer-bottom {
    align-items: center;
    text-align: center;
  }
}

/* ---- A seção do fundador no tablet ----
   Ela é "1,25fr .75fr": foto larga à esquerda, texto estreito à direita.
   Em 768px isso deixa 228px para o texto — cerca de 28 caracteres por
   linha, metade do que uma leitura confortável pede. O resultado é o do
   print: duas colunas magras, a foto pequena demais para valer como foto
   e o texto picotado.

   Empilhada, a foto ocupa a largura inteira e o texto também. A ordem é a
   da marcação — carrossel primeiro, texto depois —, que é como a CIBOS
   pediu. No celular o original inverte os dois com "order: -1", e ali
   continua invertido: numa tela de 310px a foto abre com 194px de altura
   e é o texto que merece a primeira dobra. */
@media (min-width: 768px) and (max-width: 1023px) {
  .founder { grid-template-columns: minmax(0, 1fr); }
}

/* ---- As quatro etapas do processo, no notebook ----
   "repeat(4, 1fr)" até 1180px. Em 1023px isso dá colunas de 155px para
   texto corrido — 22 caracteres por linha, uma ou duas palavras em cada.
   Acontece em quatro páginas: Desenvolvimento, Full Service,
   Industrialização e White Label.

   O original já resolve isso abaixo de 980px, com duas colunas e a borda
   da terceira etapa removida por ser a primeira da segunda fila. A regra
   aqui é a mesma, estendida até onde o defeito vai.

   A faixa é fechada embaixo em 768px, e isso não é enfeite: escrita como
   "até 1180px" ela alcançava também o celular e desfazia a coluna única
   que o original monta lá. Medido antes de eu fechar a faixa: duas
   colunas de 96px em 320px, com "Desenvolvimento" transbordando 75px.
   Quem estende uma regra para cima precisa dizer onde ela começa. */
@media (min-width: 768px) and (max-width: 1180px) {
  .process-detail > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-detail article:nth-child(3) { border-left: 0; }
}