/* Design reference: user-supplied B-MELO. battery presentation, 2023-11-28. */
:root {
  --ink:#151515; --navy:#151515; --blue:#00518f; --accent:#5cb8ff;
  --muted:#4b4b4b; --paper:#fff; --pale:#f5f5f5; --line:#d2d2d2;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.95;letter-spacing:.015em}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
button{font:inherit}
img,svg{max-width:100%;height:auto}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
p,h1,h2,h3,h4{margin-top:0}
p{margin-bottom:1em}
h1,h2,h3,h4{font-weight:600}
h2{font-size:clamp(28px,3vw,38px);line-height:1.65;letter-spacing:.025em;margin-bottom:0}
h3{font-size:22px;line-height:1.7}
ul,ol,dl{margin:0;padding:0}
dd{margin:0}
.wrap{width:min(1160px,calc(100% - 112px));margin-inline:auto}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.08em;color:var(--muted);margin-bottom:16px;border-left:1px solid currentColor;padding-left:9px;line-height:1.4}
.short-line{display:none}
.header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:28px}
.wordmark{display:inline-flex;align-items:center;flex-shrink:0;line-height:1}
.wordmark img{display:block;width:148px;height:auto}
.nav{display:flex;align-items:center;gap:26px;font-size:12px;line-height:1.6}
.nav a{padding-block:14px}
.nav .nav-contact{background:var(--ink);color:#fff;padding:15px 24px;display:flex;gap:28px}
.nav .nav-contact:hover,.button:hover{background:#333;color:#fff}
.menu-toggle{display:none}
.hero{padding-top:86px;padding-bottom:80px}
.hero h1{font-size:clamp(36px,3.8vw,48px);line-height:1.7;letter-spacing:.02em;margin:24px 0 26px}
.hero h1 span{color:var(--ink)}
.hero-description{color:var(--muted);font-size:15px;line-height:2.1;margin:0 0 30px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;background:var(--ink);color:#fff;padding:18px 25px;font-size:14px;line-height:1.6;min-height:52px;transition:background .2s}
.hero-small{font-size:11px;color:var(--muted);margin:14px 0 0;line-height:1.8}
.intro-strip{background:var(--pale);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.intro-strip-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-block:26px}
.intro-strip p{font-size:20px;font-weight:500;margin:0;letter-spacing:.03em}
.intro-strip span{font-size:12px;color:var(--muted)}
.mobile-only{display:none}
.section{padding-top:88px;padding-bottom:88px;scroll-margin-top:16px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:45px;padding-bottom:28px;border-bottom:1px solid #aaa;margin-bottom:40px}
.section-heading>p{max-width:495px;font-size:13px;line-height:2;color:var(--muted);margin-bottom:4px}
.service-feature{display:grid;grid-template-columns:35% 65%;border:1px solid var(--line)}
.service-feature-title{background:var(--ink);color:#fff;padding:35px 38px}
.service-number{display:block;font-family:Arial,sans-serif;font-size:22px;font-weight:400;letter-spacing:.015em}
.service-feature-title .service-number{color:var(--accent);margin-bottom:22px}
.service-feature-title .eyebrow{color:#d1d1d1;font-size:10px;margin-bottom:14px}
.service-feature-title h3{font-size:29px;line-height:1.7;margin-bottom:20px}
.service-feature-title>p:last-child{font-size:13px;line-height:2;color:#ddd;margin-bottom:0}
.service-feature-body{padding:40px 42px}
.service-lead{font-size:21px;font-weight:500;line-height:1.75}
.service-feature-body>p:not(.service-lead){color:var(--muted);font-size:14px}
.deliverables{border-top:1px solid var(--line);padding-top:22px;margin-top:25px;display:flex;gap:28px}
.deliverables>span{font-size:11px;white-space:nowrap;color:var(--muted)}
.deliverables ul{list-style:none;font-size:13px}
.deliverables li::before{content:"—";color:var(--blue);margin-right:10px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px}
.service{border-top:2px solid var(--ink);padding-top:25px}
.service-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}
.service-top .eyebrow{font-size:9px;margin:0}
.service h3{font-size:20px}
.service>p{font-size:13px;color:var(--muted);line-height:2}
.service-output{border-top:1px solid var(--line);padding-top:16px;margin-top:24px}
.service-output strong{color:var(--ink);font-size:12px;font-weight:500}
.cases-section{background:var(--pale);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cases-section .section-heading{margin-bottom:0}
.case-row{display:grid;grid-template-columns:42% 58%;padding:40px 0;border-bottom:1px solid #bbb}
.case-summary{padding-right:40px}
.case-category{display:inline-block;font-size:10px;border-left:3px solid var(--accent);padding-left:9px;color:var(--muted);margin:0 0 18px}
.case-index{display:block;font-size:10px;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.case-summary h3{font-size:23px;line-height:1.75;margin-bottom:20px}
.case-outcome{font-size:14px;line-height:1.7;margin:18px 0 0;color:var(--blue)}
.case-outcome span{display:inline-block;font-size:20px;margin-block:2px}
.case-details{border-left:1px solid var(--line);padding-left:38px;font-size:13px}
.case-details>div{display:grid;grid-template-columns:95px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}
.case-details>div:first-child{padding-top:0}
.case-details>div:last-child{border-bottom:0;padding-bottom:0}
.case-details dt{font-weight:600;color:var(--ink)}
.case-details dd{color:var(--muted);line-height:2}
.case-note{padding-top:23px;font-size:11px;line-height:1.9;color:var(--muted);margin-bottom:0}
.process-section{background:#fff;border-bottom:1px solid var(--line)}
.process-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.process-grid li{border-top:3px solid var(--ink);padding-top:22px;position:relative}
.step{font-size:11px;color:var(--blue);letter-spacing:.1em}
.process-grid h3{font-size:20px;margin:16px 0 12px}
.process-grid p{font-size:13px;color:var(--muted);line-height:2;min-height:106px}
.step-result{display:block;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:11px}
.company-section{display:grid;grid-template-columns:30% 1fr;gap:70px}
.company-table>div{display:grid;grid-template-columns:105px 1fr;gap:25px;padding:19px 14px;border-bottom:1px solid #aaa;font-size:14px}
.company-table>div:first-child{border-top:1px solid #aaa}
.company-table>div:nth-child(even){background:var(--pale)}
.company-table dt{font-size:12px;color:var(--muted)}
.contact-section{background:var(--ink);color:#fff;padding-block:78px;position:relative;isolation:isolate;overflow:hidden}
.contact-section::before{content:"";position:absolute;width:600px;height:600px;right:-120px;bottom:-200px;background:url("b-melo-symbol.png") center/contain no-repeat;filter:invert(1);opacity:.045;z-index:-1;pointer-events:none}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact-section .eyebrow{color:#ccc}
.contact-section h2{font-size:38px;line-height:1.7}
.contact-section p{font-size:13px;line-height:2;color:#ddd;margin:24px 0 0}
.contact-actions{padding-top:7px}
.contact-link{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #777;border-bottom:1px solid #777;padding:22px 4px;font-size:19px;line-height:1.6;min-height:64px}
.contact-link small{display:block;font-size:10px;letter-spacing:.1em;color:#ccc;margin-bottom:10px}
.contact-link>span:first-child{min-width:0}
.contact-link>span:last-child:not(.sr-only){font-size:24px}
.contact-link:hover{color:var(--accent)}
.contact-email{display:block;font-size:13px;letter-spacing:.01em;overflow-wrap:anywhere;color:#ddd;margin-top:8px}
.contact-secondary{font-size:12px!important;margin-top:22px!important}
.contact-secondary a,.privacy-link{text-decoration:underline;text-underline-offset:4px}
.contact-secondary a:hover,.privacy-link:hover{color:var(--accent)}
.contact-guidance{font-size:11px!important;margin-top:21px!important}
.privacy-link{font-size:11px;display:inline-block;margin-top:16px;color:#ddd}
.footer{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:35px}
.footer .wordmark img{width:120px}
.footer p{font-size:10px;color:var(--muted);margin:14px 0 0}
.footer-right{display:flex;align-items:center;gap:35px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.footer small{font-size:10px}
.preview-bar{text-align:center;background:#f2f2f2;color:var(--muted);padding:6px 20px;font-size:10px;letter-spacing:.04em}
.back-link{font-size:13px}
.policy{max-width:850px;padding-top:65px;padding-bottom:90px}
.policy h1{font-size:34px;line-height:1.6;margin-bottom:35px;border-bottom:1px solid #aaa;padding-bottom:25px}
.policy>p{font-size:14px;color:var(--muted)}
.policy section{margin-top:35px}
.policy h2{font-size:19px;line-height:1.7;margin-bottom:12px}
.policy section p{font-size:14px;color:var(--muted);line-height:2;overflow-wrap:anywhere}
.policy .button{margin-top:30px}
.skip{position:fixed;top:-80px;left:15px;z-index:30;background:white;color:var(--ink);padding:10px 20px;border:2px solid var(--blue)}
.skip:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
@media(max-width:1100px){
  .wrap{width:calc(100% - 72px)}
  .nav{gap:18px}.nav .nav-contact{padding-inline:18px;gap:15px}
  .hero h1{font-size:38px}
  .service-feature-title{padding:30px}.service-feature-body{padding:32px}
  .service-lead{font-size:20px}.deliverables{display:block}.deliverables ul{margin-top:12px}
  .case-details{padding-left:28px}.case-details>div{grid-template-columns:1fr;gap:5px}
  .company-section{gap:48px}.contact-grid{gap:50px}
}
@media(max-width:800px){
  html{scroll-padding-top:92px}.wrap{width:calc(100% - 40px)}
  .header-inner{min-height:72px;flex-wrap:wrap;padding-block:14px;gap:20px}
  .wordmark img{width:122px}
  .menu-toggle{display:none;gap:18px;background:none;color:var(--ink);border:1px solid var(--line);padding:9px 12px;font-size:12px;align-items:center;min-height:44px}
  .menu-toggle span{font-size:17px;line-height:1}
  .nav{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-start;font-size:13px;width:100%}
  .nav a{padding:11px 0}.nav .nav-contact{padding:12px 18px;margin:4px 0}
  .js .menu-toggle{display:flex}
  .js .nav{display:none;position:absolute;top:100%;left:0;background:#fff;border-bottom:1px solid var(--line);padding:16px 20px 22px}
  .js .nav.is-open{display:flex}.js .header-inner{flex-wrap:nowrap;padding-block:0}
  .hero{padding-top:44px;padding-bottom:42px}
  .hero h1{font-size:clamp(29px,5.5vw,42px);line-height:1.75;letter-spacing:.01em;margin:23px 0}
  .hero-description{font-size:14px;line-height:2.15}.hero .eyebrow{font-size:10px}
  .intro-strip-inner{display:block;padding-block:25px}.intro-strip p{font-size:19px;margin-bottom:13px}
  .intro-strip span{font-size:11px;line-height:1.8;display:block}.intro-strip span br{display:none}
  .mobile-only{display:inline}
  .section{padding-block:60px}.section-heading{display:block;margin-bottom:30px;padding-bottom:24px}
  .section-heading>p{margin-top:20px;font-size:13px}.section-heading>p br{display:none}
  .eyebrow{font-size:10px;margin-bottom:12px}h2{font-size:28px}
  .service-feature{grid-template-columns:1fr}.service-feature-title{padding:27px}
  .service-feature-title h3{font-size:26px}.service-feature-title h3 br{display:none}
  .service-feature-title .service-number{margin-bottom:10px;float:right}.service-feature-title>p:last-child br{display:none}
  .service-feature-title .eyebrow{margin-top:3px}.service-feature-body{padding:27px 25px}
  .service-lead{font-size:19px}.service-feature-body>p:not(.service-lead){font-size:13px}
  .service-grid{grid-template-columns:1fr;gap:25px}.service{padding-top:22px}
  .service-top{margin-bottom:12px}.service>p{font-size:14px}.service-output{margin-top:18px}
  .case-row{grid-template-columns:1fr;padding-block:30px;gap:24px}.case-summary{padding:0}
  .case-summary h3{font-size:22px}.case-details{border-left:0;padding:0;border-top:1px solid var(--line);padding-top:20px}
  .case-details>div{grid-template-columns:1fr;gap:6px;font-size:13px}
  .case-outcome br{display:none}.case-outcome span{margin-inline:12px;transform:rotate(-90deg)}
  .process-grid{grid-template-columns:1fr 1fr;gap:28px 22px}.process-grid h3{font-size:18px}
  .process-grid p{min-height:0;font-size:12px;line-height:1.95}.step-result{font-size:10px}
  .company-section{grid-template-columns:1fr;gap:25px}
  .company-table>div{grid-template-columns:65px 1fr;gap:18px;font-size:13px;padding-inline:10px}
  .contact-section{padding-block:55px}.contact-section::before{width:400px;height:400px;right:-130px;bottom:-130px}
  .contact-grid{grid-template-columns:1fr;gap:30px}.contact-section h2{font-size:31px}
  .contact-section p{font-size:13px}.contact-link{font-size:18px;padding-block:20px}
  .footer{align-items:flex-start;padding-block:30px;gap:20px}.footer .wordmark img{width:105px}
  .footer-right{flex-direction:column;align-items:flex-end;gap:12px;font-size:10px}
  .policy{padding-top:40px;padding-bottom:55px}.policy h1{font-size:26px}.policy h2{font-size:18px}
}
@media(max-width:380px){
  .hero h1{font-size:28px}.hero-description{font-size:12px}.hero-small{font-size:10px}
  .button{font-size:13px;gap:28px;padding:17px 20px}.process-grid{grid-template-columns:1fr}
  .service-top .eyebrow{font-size:8px}.footer{flex-wrap:wrap}.footer-right{align-items:flex-start}
}

.contact-section a:focus-visible{outline-color:var(--accent)}
/* Additional reference: B-MELO. corporate-account presentation. */
.intro-strip{background:#3c3b3a;color:#fff;position:relative;isolation:isolate;overflow:hidden;border-color:#3c3b3a}
.intro-strip-inner{padding-block:34px}
.intro-strip span{color:#e4e4e4}
.process-grid{gap:0}
.process-grid li{border-top:2px solid var(--blue);padding:30px 24px 24px;background:#f5f5f5;min-width:0}
.process-grid li:nth-child(even){background:#fafafa}
.process-grid li:last-child{background:#eaf5ff}
.process-grid li::before{content:"";position:absolute;left:24px;top:-7px;width:12px;height:12px;background:var(--blue);border:2px solid #fff;border-radius:50%}
.process-grid li::after{content:"";position:absolute;left:29px;top:8px;height:13px;border-left:1px dotted #aaa}
.process-grid h3{font-size:18px}
.process-grid p{min-height:132px}
.process-grid .step-result{font-size:10px}
.contact-section{background:#3c3b3a}
@media(max-width:1100px){
  .process-grid li{padding-inline:18px}
  .process-grid li::before{left:18px}.process-grid li::after{left:23px}
  .process-grid h3{font-size:17px}.process-grid p{font-size:12px;min-height:156px}
}
@media(max-width:800px){
  .intro-strip-inner{padding-block:28px}
  .process-grid{grid-template-columns:1fr;gap:0;margin-left:7px}
  .process-grid li{border-top:0;border-left:2px solid var(--blue);padding:24px 22px 24px 28px}
  .process-grid li::before{left:-7px;top:29px}
  .process-grid li::after{left:7px;top:34px;width:12px;height:0;border-left:0;border-top:1px dotted #aaa}
  .process-grid h3{font-size:20px;margin-top:10px}
  .process-grid p{font-size:13px;min-height:0}
  .process-grid .step-result{font-size:11px}
}
/* Original line-art logo paths from the supplied PowerPoint chapter layout. */
.contact-section{background:#2d2c2c}
.contact-section::before{inset:0;width:auto;height:auto;background:url("b-melo-outline.svg") right bottom/auto 100% no-repeat;filter:none;opacity:1}
.contact-grid{grid-template-columns:1fr;gap:28px}
.contact-grid>div{max-width:560px}
.contact-actions{width:100%;max-width:520px!important}
.contact-section h2 br{display:none}
@media(max-width:800px){
  .contact-section::before{background-size:auto 85%;background-position:right bottom;opacity:.6}
  .contact-section h2 br{display:initial}
  .contact-grid{gap:30px}
}