.dcx-brand-page{
  --navy:#071722;--navy2:#0b2330;--teal:#0bb7b3;--teal2:#37d1cc;
  --blue:#1478d1;--paper:#f7fafb;--soft:#edf6f8;--text:#45545f;--line:#dce8ec;
  color:var(--text);background:#fff
}
.dcx-brand-page *{box-sizing:border-box}
.dcx-brand-page .dcx-shell{width:min(1180px,calc(100% - 40px));margin:auto}
.dcx-brand-kicker{margin:0 0 14px;color:#049f9b;font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}

/* HERO */
.dcx-brand-hero{padding:92px 0;background:linear-gradient(140deg,#071722 0%,#092a31 100%);overflow:hidden}
.dcx-brand-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.dcx-brand-hero h1{margin:0;color:#fff;font:800 clamp(3rem,5vw,57px)/1.04 Manrope,sans-serif;letter-spacing:-.045em}
.dcx-brand-hero h1 span{color:#1478d1}
.dcx-brand-lead{max-width:650px;margin:25px 0 0;color:#d9e6ea;font-size:18px;line-height:1.72}
.dcx-brand-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.dcx-brand-btn{display:inline-flex;min-height:52px;padding:0 23px;align-items:center;justify-content:center;border-radius:8px;text-decoration:none;font-weight:800}
.dcx-brand-btn.primary{background:var(--blue);color:#fff}
.dcx-brand-btn.secondary{border:1px solid rgba(255,255,255,.28);color:#fff}
.dcx-brand-hero-system{position:relative;padding:38px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#fff;box-shadow:0 24px 55px rgba(0,0,0,.24)}
.dcx-brand-wordmark{color:#071722;font:800 clamp(32px,5vw,64px)/1 Manrope,sans-serif;letter-spacing:-.06em}
.dcx-brand-wordmark span{color:#0bb7b3}
.dcx-brand-line{height:1px;background:#dce8ec;margin:28px 0}
.dcx-brand-swatch-row{display:flex;gap:10px;margin-bottom:30px}
.dcx-brand-swatch-row i{width:62px;height:62px;border-radius:8px;border:1px solid #dce8ec}
.dcx-brand-swatch-row .navy{background:#071722}.dcx-brand-swatch-row .teal{background:#0bb7b3}.dcx-brand-swatch-row .blue{background:#1478d1}.dcx-brand-swatch-row .paper{background:#f7fafb}
.dcx-brand-type-demo{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;padding:15px 0;border-top:1px solid #e4ecef}
.dcx-brand-type-demo strong{color:#071722;font:800 44px Manrope,sans-serif}
.dcx-brand-type-demo b,.dcx-brand-type-demo span{display:block}.dcx-brand-type-demo b{color:#071722}.dcx-brand-type-demo span{font-size:12px;color:#6c7c84}

/* SHARED HEADINGS */
.dcx-brand-foundation h2,.dcx-brand-system h2,.dcx-brand-where h2,.dcx-brand-consistency h2,.dcx-brand-process h2,.dcx-brand-fit h2,.dcx-brand-faq h2,.dcx-brand-cta h2{
  margin:0;color:var(--navy);font:800 clamp(2.3rem,4vw,55px)/1.08 Manrope,sans-serif;letter-spacing:-.035em
}
.dcx-brand-page h2 span{color:#0bb7b3}

/* FOUNDATION */
.dcx-brand-foundation{padding:96px 0;background:#fff}
.dcx-brand-foundation-head{max-width:760px;margin-bottom:46px}
.dcx-brand-foundation-layout{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:auto auto;gap:16px}
.dcx-brand-foundation-layout article{padding:28px;border:1px solid var(--line);border-radius:11px;background:#fff}
.dcx-brand-foundation-layout article span{color:var(--teal);font-size:12px;font-weight:800}
.dcx-brand-foundation-layout h3{margin:20px 0 8px;color:var(--navy);font:800 21px Manrope,sans-serif}
.dcx-brand-foundation-layout p{margin:0;line-height:1.67;font-size:14px}
.dcx-brand-feature-large{grid-row:1/3;background:var(--soft)!important}
.dcx-brand-foundation-layout .wide{grid-column:2/4}
.dcx-brand-mini-system{margin-top:36px;display:flex;align-items:center;gap:22px}
.dcx-brand-mini-system .mark{display:grid;place-items:center;width:100px;height:100px;border-radius:18px;background:#071722;color:#37d1cc;font:800 45px Manrope,sans-serif}
.dcx-brand-mini-system .bars{flex:1;display:grid;gap:11px}
.dcx-brand-mini-system .bars i{display:block;height:16px;border-radius:4px;background:#0bb7b3}
.dcx-brand-mini-system .bars i:nth-child(2){width:74%;background:#1478d1}.dcx-brand-mini-system .bars i:nth-child(3){width:48%;background:#071722}

/* SYSTEM */
.dcx-brand-system{padding:96px 0;background:var(--paper)}
.dcx-brand-system-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:74px;align-items:start}
.dcx-brand-system-board{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff}
.dcx-brand-system-board>div{min-height:220px;padding:27px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.dcx-brand-system-board small{display:block;color:#078f8b;font-size:10px;font-weight:800;letter-spacing:.1em}
.dcx-brand-board-logo strong{display:block;margin-top:42px;color:#071722;font:800 48px Manrope,sans-serif}
.dcx-brand-board-colours span{display:inline-block;width:52px;height:90px;margin:30px 6px 0 0;border-radius:5px}
.dcx-brand-board-colours .c1{background:#071722}.dcx-brand-board-colours .c2{background:#0bb7b3}.dcx-brand-board-colours .c3{background:#1478d1}.dcx-brand-board-colours .c4{background:#edf6f8}
.dcx-brand-board-type strong,.dcx-brand-board-type b{display:block;color:#071722}.dcx-brand-board-type strong{margin-top:24px;font:800 32px Manrope,sans-serif}.dcx-brand-board-type b{margin-top:8px}.dcx-brand-board-type p{font-size:12px;line-height:1.55}
.dcx-brand-board-pattern i{display:block;height:18px;margin-top:20px;border-radius:99px;background:#0bb7b3}.dcx-brand-board-pattern i:nth-child(2){width:72%;background:#1478d1}.dcx-brand-board-pattern i:nth-child(3){width:45%;background:#071722}

/* WHERE */
.dcx-brand-where{padding:96px 0;background:#fff}
.dcx-brand-where-head{display:grid;grid-template-columns:1fr .7fr;gap:68px;align-items:end}
.dcx-brand-where-head>p{margin:0;line-height:1.72}
.dcx-brand-channel-track{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dcx-brand-channel-track article{padding:30px 24px;border-right:1px solid var(--line)}
.dcx-brand-channel-track article:last-child{border-right:0}
.dcx-brand-channel-track b,.dcx-brand-channel-track span{display:block}
.dcx-brand-channel-track b{color:var(--navy);font:800 18px Manrope,sans-serif}
.dcx-brand-channel-track span{margin-top:9px;font-size:13px;line-height:1.6}

/* CONSISTENCY */
.dcx-brand-consistency{padding:96px 0;background:var(--navy);color:#dbe6ea}
.dcx-brand-consistency-grid{display:grid;grid-template-columns:.76fr 1.24fr;gap:75px;align-items:center}
.dcx-brand-consistency h2{color:#fff}.dcx-brand-consistency h2 span{color:#37d1cc}.dcx-brand-consistency p{line-height:1.72}
.dcx-brand-rules{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.12)}
.dcx-brand-rules div{padding:24px;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.dcx-brand-rules span,.dcx-brand-rules b,.dcx-brand-rules small{display:block}.dcx-brand-rules span{color:#37d1cc;font-size:11px;font-weight:800}.dcx-brand-rules b{margin-top:16px;color:#fff;font:800 17px Manrope,sans-serif}.dcx-brand-rules small{margin-top:7px;color:#aebfc7;line-height:1.5}

/* PROCESS */
.dcx-brand-process{padding:96px 0;background:#fff}
.dcx-brand-process-intro{max-width:700px}
.dcx-brand-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:46px 0 0;padding:0;list-style:none}
.dcx-brand-steps li{position:relative;padding:32px 24px;border-top:3px solid var(--teal);background:var(--paper)}
.dcx-brand-steps li:nth-child(2){margin-top:22px}.dcx-brand-steps li:nth-child(3){margin-top:44px}.dcx-brand-steps li:nth-child(4){margin-top:66px}
.dcx-brand-steps b{color:var(--teal);font-size:12px}.dcx-brand-steps h3{margin:17px 0 8px;color:var(--navy);font:800 19px Manrope,sans-serif}.dcx-brand-steps p{margin:0;font-size:13px;line-height:1.62}

/* FIT */
.dcx-brand-fit{padding:96px 0;background:var(--soft)}
.dcx-brand-fit-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:76px}
.dcx-brand-fit-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #cfdee2;border-left:1px solid #cfdee2}
.dcx-brand-fit-list p{display:grid;grid-template-columns:36px 1fr;gap:10px;margin:0;padding:20px;border-right:1px solid #cfdee2;border-bottom:1px solid #cfdee2;font-size:13px;line-height:1.55}
.dcx-brand-fit-list span{color:var(--teal);font-weight:800}

/* FAQ */
.dcx-brand-faq{padding:96px 0;background:#fff}
.dcx-brand-faq-grid{display:grid;grid-template-columns:330px 1fr;gap:70px}
.dcx-brand-faq-list{display:grid;gap:12px}
.dcx-brand-faq-item{overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#fff}
.dcx-brand-faq-item summary{position:relative;padding:21px 58px 21px 22px;color:var(--navy);font-weight:800;cursor:pointer;list-style:none}
.dcx-brand-faq-item summary::-webkit-details-marker{display:none}
.dcx-brand-faq-item summary:after{content:"+";position:absolute;right:22px;color:var(--teal);font-size:24px}
.dcx-brand-faq-item[open] summary:after{content:"−"}
.dcx-brand-faq-item p{margin:0;padding:0 22px 22px;line-height:1.72}

/* CTA */
.dcx-brand-cta-wrap{padding:84px 0 100px;background:#fff}
.dcx-brand-cta{max-width:920px;margin:auto;padding:62px 58px;border-radius:16px;background:linear-gradient(135deg,#071722,#092a31);color:#dce7eb;text-align:center}
.dcx-brand-cta h2{color:#fff}.dcx-brand-cta h2 span{color:#37d1cc}
.dcx-brand-cta>p:not(.dcx-brand-kicker){max-width:650px;margin:20px auto;line-height:1.72}

/* RESPONSIVE */
@media(max-width:980px){
  .dcx-brand-hero-grid,.dcx-brand-system-grid,.dcx-brand-where-head,.dcx-brand-consistency-grid,.dcx-brand-fit-grid,.dcx-brand-faq-grid{grid-template-columns:1fr}
  .dcx-brand-foundation-layout{grid-template-columns:1fr 1fr}
  .dcx-brand-feature-large{grid-row:auto}.dcx-brand-foundation-layout .wide{grid-column:1/-1}
  .dcx-brand-channel-track{grid-template-columns:1fr 1fr}
  .dcx-brand-steps{grid-template-columns:1fr 1fr}.dcx-brand-steps li:nth-child(n){margin-top:0}
}
@media(max-width:640px){
  .dcx-brand-page .dcx-shell{width:min(100% - 28px,1180px)}
  .dcx-brand-hero{padding:70px 0 74px}.dcx-brand-actions{flex-direction:column}.dcx-brand-btn{width:100%}
  .dcx-brand-hero-system{padding:24px}.dcx-brand-swatch-row i{width:48px;height:48px}
  .dcx-brand-foundation,.dcx-brand-system,.dcx-brand-where,.dcx-brand-consistency,.dcx-brand-process,.dcx-brand-fit,.dcx-brand-faq{padding:70px 0}
  .dcx-brand-foundation-layout,.dcx-brand-system-board,.dcx-brand-channel-track,.dcx-brand-rules,.dcx-brand-steps,.dcx-brand-fit-list{grid-template-columns:1fr}
  .dcx-brand-foundation-layout .wide{grid-column:auto}.dcx-brand-channel-track article{border-right:0;border-bottom:1px solid var(--line)}
  .dcx-brand-cta{padding:44px 24px}
}