/* Company editorial: scoped, static artwork and exact approved copy. */
#company-editorial{padding-top:155px;--company-rule:#30353b}
.company-shell{width:calc(100% - 96px);max-width:1160px;margin-inline:auto}
#company-editorial .company-eyebrow{font:500 12px/1.5 'JetBrains Mono',monospace!important;letter-spacing:.16em;color:var(--ember);margin:0 0 28px}
.company-opening{max-width:970px}
#company-editorial h1{font-size:clamp(42px,5.6vw,78px);line-height:1.04;letter-spacing:-.055em;margin-bottom:24px;text-wrap:balance}
.company-hero-art{margin:0 0 36px;background:#000;line-height:0}
.company-hero-art img{width:100%;height:auto;display:block}
.company-narrative{max-width:740px;margin:0 auto 110px}
#company-editorial p{font-size:18px;line-height:1.85;color:#bfc5cd;margin-bottom:24px}
#company-editorial strong{font-weight:600;color:var(--text)}
#company-editorial .company-eyebrow strong{color:inherit}
.company-narrative>p:first-child{font-size:24px;line-height:1.55;font-weight:700;color:var(--text)}
.company-narrative h2{font-size:32px;margin:58px 0 22px;letter-spacing:-.035em}
@media(max-width:760px){#company-editorial{padding-top:125px}.company-shell{width:calc(100% - 40px)}#company-editorial .company-eyebrow{margin-bottom:20px}.company-hero-art{margin:0 -20px 28px}#company-editorial .company-opening h1{margin-bottom:20px}.company-narrative{margin-bottom:65px}#company-editorial p{font-size:17px;line-height:1.8}.company-narrative>p:first-child{font-size:21px!important}.company-narrative h2{font-size:28px;margin-top:42px}}

/* Vision, mission, strategy and values: ported from "Flotera Company Page.dc.html".
   The source switches layout on its own width (wide >=1000, rows >=620, else stack), so these use container queries. */
#company-editorial .company-principles{container-type:inline-size;display:flex;flex-direction:column;gap:32px;padding-bottom:0}
#company-editorial .company-purpose-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
#company-editorial .company-vision,#company-editorial .company-mission{min-width:0;display:flex}
#company-editorial .company-purpose{flex:1;display:flex;flex-direction:column;gap:22px;min-width:0;border:1px solid #23272d;border-radius:8px;padding:36px 40px}
#company-editorial .company-principles .company-eyebrow{margin:0;text-transform:uppercase}
#company-editorial .company-purpose h2{margin:0;font-size:34px;line-height:1.15;font-weight:800;color:var(--text);letter-spacing:-.035em;text-wrap:balance}
#company-editorial .company-purpose p:not(.company-eyebrow){margin:0;font-size:17px;line-height:1.7;color:#bfc5cd;text-wrap:pretty}
#company-editorial .company-panel{--ink:#180a03;--rule:rgba(24,10,3,.28);--inset:28px;--label-col:260px;background:#f4692e;color:var(--ink);border-radius:8px;padding:36px 40px;display:flex;flex-direction:column;gap:28px}
#company-editorial .company-values{--ink:#06202a;--rule:rgba(6,32,42,.28);--inset:18px;--label-col:220px;background:#3ecfe0}
#company-editorial .company-panel .company-eyebrow{color:var(--ink)}
#company-editorial .company-panel-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;list-style:none;padding:0;margin:0}
#company-editorial .company-values-list{grid-template-columns:repeat(5,minmax(0,1fr))}
#company-editorial .company-panel-list>li{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;align-content:start;min-width:0;padding:0 var(--inset)}
#company-editorial .company-panel-list>li:first-child{padding-left:0}
#company-editorial .company-panel-list>li+li{border-left:1px solid var(--rule)}
#company-editorial .company-values-list>li{gap:12px}
#company-editorial .company-panel-title{display:flex;align-items:center;gap:10px;min-width:0}
#company-editorial .company-values .company-panel-title{gap:8px}
#company-editorial .strategy-icon,#company-editorial .value-icon{display:block;width:24px;height:24px;flex:none;fill:currentColor;color:var(--ink)}
#company-editorial .company-panel h3{margin:0;font-size:21px;line-height:1.25;font-weight:700;color:var(--ink);letter-spacing:-.025em}
#company-editorial .company-values h3{font-size:17px}
/* The source sets titles nowrap in the wide layout; below ~1100px "Global Distribution" would overrun its column, so only hold one line where it fits. */
@container (min-width:1100px){#company-editorial .company-values h3{white-space:nowrap}}
#company-editorial .company-panel p{margin:0;font-size:15px;line-height:1.65;color:var(--ink);text-wrap:pretty}
@container (max-width:999.98px){
#company-editorial .company-purpose,#company-editorial .company-panel{padding:28px}
#company-editorial .company-panel-list{grid-template-columns:minmax(0,1fr)}
#company-editorial .company-panel-list>li{grid-template-columns:minmax(180px,var(--label-col)) minmax(0,1fr);gap:24px;padding:20px 0}
#company-editorial .company-panel-list>li:first-child{padding:0 0 20px}
#company-editorial .company-panel-list>li+li{border-left:0;border-top:1px solid var(--rule)}
}
@container (max-width:619.98px){
#company-editorial .company-purpose-row{grid-template-columns:minmax(0,1fr)}
#company-editorial .company-purpose,#company-editorial .company-panel{padding:24px 20px}
#company-editorial .company-panel-list>li{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* "What is Flotera" panel, ported from the Claude Design source
   "Flotera Company One-Pager.dc.html" (project 680675e9-2d24-4ded-a07b-80fecdcecc14).
   It closes the article in place of the old statement box. The source sizes Terry
   off its own inline-size with clamp() arithmetic; those become real container
   queries, the same way the principles panels below were ported. */
#company-editorial .company-product{container-type:inline-size;display:flex;flex-wrap:wrap;align-items:stretch;margin-bottom:32px;background:#10291f;border:1px solid #1d3a2c;border-radius:8px}
#company-editorial .company-product-copy{flex:1 1 420px;min-width:0;padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;align-items:flex-start}
#company-editorial .company-product-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
#company-editorial .company-product-logo:hover,#company-editorial .company-product-logo:focus-visible{color:var(--text)}
#company-editorial .company-product-logo svg{display:block;width:40px;height:40px;flex:none}
#company-editorial .company-product-logo .wordmark{font-family:'Bakbak One',Archivo,sans-serif;font-size:35px;letter-spacing:.03em;line-height:1}
#company-editorial .company-product .company-eyebrow{margin:clamp(40px,5vw,64px) 0 0;text-transform:uppercase}
#company-editorial .company-product h2{margin:22px 0 0;font-size:clamp(30px,3.4vw,42px);line-height:1.1;font-weight:800;letter-spacing:-.035em;color:var(--text);text-wrap:balance}
#company-editorial .company-product-description{margin:20px 0 0;max-width:620px;font-size:18px;line-height:1.7;color:#bfc5cd;text-wrap:pretty}
#company-editorial .company-product-art{flex:0 0 auto;align-self:flex-end;margin-left:auto;display:flex;align-items:flex-end;justify-content:center;padding:clamp(12px,2vw,28px) clamp(36px,5cqw,72px) clamp(20px,2.4vw,32px) 0}
#company-editorial .company-product-art img{display:block;height:clamp(230px,30cqw,356px);width:auto}
/* Below the source's 620px switch the art drops under the copy, full width. */
@container (max-width:619.98px){
#company-editorial .company-product-art{min-width:100%;margin-left:0;padding:clamp(12px,2vw,28px) 0 0}
#company-editorial .company-product-art img{height:min(460px,115cqw)}
}
@media(max-width:760px){#company-editorial .company-product-description{font-size:17px}}