.cc-page { --cc-ink:#112b51; --cc-copy:#576b89; --cc-blue:#2d4fff; --cc-line:#dce4ef; color:var(--cc-ink); background:#fff; }
.cc-page * { min-width:0; }
.cc-shell { width:min(1320px,calc(100% - 80px)); margin-inline:auto; }
.cc-page h1,.cc-page h2,.cc-page h3,.cc-page p,.cc-page figure { margin:0; }
.cc-page h1,.cc-page h2,.cc-page h3 { font-family:"Sora",sans-serif; }
.cc-page h2 { font-size:clamp(1.9rem,3.1vw,2.7rem); line-height:1.2; letter-spacing:-.055em; font-weight:600; }
.cc-page h3 { font-size:1.32rem; line-height:1.35; letter-spacing:-.035em; font-weight:600; }
.cc-page p { line-height:1.75; }
.cc-kicker { color:#637c9e; font-family:"IBM Plex Mono",monospace; font-size:.67rem; font-weight:500; text-transform:uppercase; letter-spacing:.15em; }
.cc-page .cc-kicker + h2 { margin-top:16px; }
.cc-hero { padding:calc(var(--j-nav-h,78px) + 26px) 0 0; background:linear-gradient(180deg,#f7faff,#fff 88%); }
.cc-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:38px; font-size:.75rem; color:#7b8ba3; }
.cc-breadcrumb a { color:#375f9a; }
.cc-hero-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:28px; align-items:center; padding-bottom:44px; }
.cc-hero-copy { position:relative; z-index:1; padding:8px 0; }
.cc-page h1 { max-width:520px; margin:18px 0 22px; font-size:clamp(2.7rem,4.1vw,3.8rem); line-height:1.05; letter-spacing:-.06em; font-weight:600; }
.cc-page .cc-hero-lead { font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.45; font-weight:500; letter-spacing:-.02em; }
.cc-page .cc-copy { color:var(--cc-copy); font-size:1rem; margin-top:16px; }
.cc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:28px; }
.cc-button { display:inline-flex; gap:26px; align-items:center; justify-content:center; min-height:48px; padding:13px 20px; border-radius:7px; background:var(--cc-blue); color:#fff; font-size:.9rem; font-weight:600; line-height:1.4; transition:background .2s,transform .2s; }
.cc-button:hover { background:#193bcc; transform:translateY(-2px); }
.cc-text-link { display:inline-flex; align-items:center; gap:18px; color:var(--cc-blue); font-size:.92rem; font-weight:600; line-height:1.5; }
.cc-text-link span,.cc-button span { font-size:1.2em; }
.cc-text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.cc-system { align-self:center; }
.cc-system img { width:100%; height:auto; mix-blend-mode:multiply; }
.cc-system figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; color:#71819a; font-size:.69rem; line-height:1.6; margin-top:14px; }
.cc-system figcaption a { color:#466796; white-space:nowrap; }
.cc-system figcaption a span { margin-left:8px; }
.cc-applications { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border-block:1px solid var(--cc-line); }
.cc-applications > span { color:#7c8ba0; font-size:.75rem; }
.cc-applications ul { display:flex; flex-wrap:wrap; gap:16px 38px; margin:0; padding:0; list-style:none; font-size:.85rem; font-weight:500; }
.cc-section { padding:66px 0; scroll-margin-top:calc(var(--j-nav-h) + 18px); }
.cc-section-heading { display:flex; gap:56px; justify-content:space-between; align-items:flex-end; margin-bottom:34px; }
.cc-section-heading > p { max-width:440px; color:var(--cc-copy); font-size:1rem; }
/* The system image is followed by compact, expandable component explanations. */
.cc-number { display:block; color:#8195b2; font-family:"IBM Plex Mono",monospace; font-size:.78rem; }
.cc-overview { padding-bottom:56px; }
.cc-annotated { border:1px solid var(--cc-line); border-radius:10px; overflow:hidden; }
.cc-annotated > a { display:block; background:#fff; }
.cc-annotated img { display:block; width:100%; height:auto; }
.cc-annotated figcaption { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:16px 22px; border-top:1px solid var(--cc-line); color:#71819a; font-size:.75rem; line-height:1.6; }
.cc-annotated .cc-text-link { font-size:.8rem; }
.cc-component-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; margin-top:26px; align-items:start; }
.cc-components { border-block:1px solid var(--cc-line); }
.cc-components summary { display:grid; grid-template-columns:auto 1fr 16px; gap:12px; align-items:center; min-height:72px; padding:16px 0; cursor:pointer; list-style:none; font-size:.88rem; font-weight:600; line-height:1.5; }
.cc-components summary::-webkit-details-marker { display:none; }
.cc-components summary .cc-number { font-size:.67rem; white-space:nowrap; }
.cc-expand { text-align:center; color:var(--cc-blue); font-size:1.3rem; font-weight:400; }
.cc-components[open] .cc-expand { transform:rotate(45deg); }
.cc-component-content { padding-bottom:20px; color:var(--cc-copy); font-size:.85rem; }
.cc-component-content dl { margin:20px 0 0; }
.cc-component-content dl > div + div { margin-top:16px; }
.cc-component-content dt { display:flex; gap:10px; color:var(--cc-ink); font-weight:600; }
.cc-component-content dt span { color:#8195b2; font-family:"IBM Plex Mono",monospace; font-size:.7rem; padding-top:2px; }
.cc-component-content dd { margin:5px 0 0 27px; line-height:1.65; }
.cc-operation { background:#f3f6fb; }
.cc-operation .cc-section-heading > p { max-width:500px; font-size:.95rem; }
.cc-plant-media { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:22px; }
.cc-site-photo > img,.cc-video-frame { display:block; width:100%; height:480px; border-radius:8px; overflow:hidden; background:#e4eaf2; }
.cc-site-photo > img { object-fit:cover; object-position:50% 45%; }
.cc-video-frame { position:relative; background:#13243a; }
.cc-video-frame video { display:block; width:100%; height:100%; object-fit:contain; }
.cc-plant-media figcaption,.cc-water-photos figcaption { color:#6d809b; font-size:.76rem; padding-top:12px; line-height:1.6; }
.cc-playback { position:absolute; bottom:15px; right:14px; min-height:44px; padding:9px 14px; border:1px solid #ffffff66; border-radius:30px; color:#fff; background:#10223fd9; font:500 .74rem/1.4 "IBM Plex Sans",sans-serif; cursor:pointer; }
.cc-playback:hover { background:#173a69; }
.cc-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; padding:30px 0; }
.cc-feature-grid h3 { font-size:1.08rem; }
.cc-feature-grid p { color:var(--cc-copy); font-size:.9rem; margin-top:10px; }
.cc-delivery { margin-top:4px; padding:27px 0 28px; border-block:1px solid #d7e1ef; }
.cc-delivery > h3 { font-size:1.2rem; }
.cc-delivery-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; list-style:none; margin:24px 0 0; padding:0; }
.cc-delivery-steps li { position:relative; }
.cc-delivery-steps li:not(:last-child)::after { content:"→"; position:absolute; right:0; top:0; color:#8ca3c4; }
.cc-delivery-steps h4 { margin:10px 0 8px; font-size:.95rem; font-weight:600; }
.cc-delivery-steps p { color:var(--cc-copy); font-size:.84rem; line-height:1.65; }
.cc-product-links { display:flex; align-items:center; flex-wrap:wrap; gap:12px 26px; margin-top:24px; }
.cc-product-links > span { color:#71819a; font-size:.77rem; margin-right:6px; }
.cc-product-links a { display:inline-flex; align-items:center; gap:10px; font-size:.83rem; font-weight:600; color:var(--cc-blue); }
.cc-product-links a:hover { text-decoration:underline; text-underline-offset:4px; }
.cc-water-intro { max-width:500px; color:var(--cc-copy); font-size:.95rem; }
.cc-flow { display:flex; gap:10px; flex-wrap:wrap; align-items:center; list-style:none; margin:18px 0 0; padding:0; }
.cc-flow li { display:inline-flex; align-items:center; gap:10px; color:#294f85; font-size:.79rem; font-weight:500; }
.cc-flow li:not(:last-child)::after { content:"→"; color:#8da5c4; }
.cc-water-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.cc-water-photos img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:8px; }
.cc-water-footer { display:flex; justify-content:space-between; align-items:center; gap:30px; padding-top:24px; }
.cc-water-footer p { color:var(--cc-copy); font-size:.88rem; max-width:660px; }
.cc-water-footer .cc-text-link { white-space:nowrap; font-size:.85rem; }
.cc-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.cc-project { display:flex; flex-direction:column; border-bottom:1px solid var(--cc-line); }
.cc-project-image { overflow:hidden; border-radius:8px; background:#eaf0f7; aspect-ratio:16/10; }
.cc-project-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.cc-project-image:hover img { transform:scale(1.035); }
.cc-project-body { display:flex; flex-direction:column; flex:1; padding:24px 0; }
.cc-project .cc-kicker { font-size:.6rem; letter-spacing:.11em; }
.cc-page .cc-project-location { color:#6b7f9a; font-size:.76rem; margin-top:8px; }
.cc-project h3 { font-size:1.2rem; margin-top:14px; }
.cc-page .cc-project-capacity { color:#244e83; font-size:.83rem; font-weight:600; margin-top:14px; }
.cc-page .cc-project-description { color:var(--cc-copy); font-size:.91rem; margin:12px 0 22px; }
.cc-project-body > .cc-text-link { margin-top:auto; font-size:.85rem; }
.cc-inquiry { color:#fff; background:#102d51; padding-block:64px; }
.cc-inquiry-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:80px; }
.cc-inquiry .cc-kicker { color:#98afcf; }
.cc-inquiry h2 { margin-top:20px; }
.cc-inquiry-grid > div:first-child > p:not(.cc-kicker) { max-width:420px; color:#bccce1; margin-top:22px; }
.cc-inquiry .cc-button { margin-top:30px; }
.cc-selection h3 { font-size:1rem; margin:0 0 18px; font-family:"IBM Plex Sans",sans-serif; letter-spacing:0; }
.cc-selection dl { margin:0; }
.cc-selection dl > div { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:20px; border-top:1px solid #365070; padding:14px 0; font-size:.82rem; line-height:1.65; }
.cc-selection dt { color:#f0f5fc; font-weight:500; }
.cc-selection dd { margin:0; color:#afc3df; }
.cc-page a:focus-visible,.cc-page button:focus-visible,.cc-page summary:focus-visible { outline:3px solid #537bff; outline-offset:5px; }
@media(min-width:1600px) { .cc-shell { width:min(1440px,calc(100% - 120px)); } .cc-hero-grid { grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr); gap:48px; } }
@media(max-width:1050px) { .cc-shell { width:calc(100% - 48px); } .cc-hero-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:20px; } .cc-page h1 { font-size:2.8rem; } .cc-actions { gap:16px; } .cc-applications { align-items:flex-start; } .cc-applications ul { gap:12px 20px; } .cc-section-heading { gap:36px; } .cc-section-heading > p { max-width:380px; } .cc-inquiry-grid { gap:44px; } .cc-project-grid { gap:20px; } }
@media(max-width:760px) { .cc-shell { width:calc(100% - 40px); } .cc-hero { padding-top:calc(var(--j-nav-h,78px) + 20px); } .cc-breadcrumb { margin-bottom:24px; font-size:.68rem; } .cc-hero-grid { grid-template-columns:1fr; gap:26px; padding-bottom:24px; } .cc-hero-copy { max-width:600px; padding:0; } .cc-page h1 { max-width:510px; font-size:clamp(2.7rem,8vw,3.5rem); } .cc-hero-lead { max-width:500px; } .cc-hero .cc-copy { max-width:560px; } .cc-system img { width:100%; } .cc-system figcaption { font-size:.65rem; } .cc-applications { display:block; padding:20px 0; } .cc-applications ul { margin-top:12px; gap:8px 20px; font-size:.77rem; } .cc-section { padding:44px 0; } .cc-section-heading { display:block; margin-bottom:26px; } .cc-section-heading > p { max-width:560px; margin-top:18px; } .cc-section-heading > .cc-text-link { margin-top:18px; } .cc-page h2 { font-size:2rem; } .cc-inquiry-grid { grid-template-columns:1fr; gap:18px; } .cc-project-grid { grid-template-columns:1fr; gap:32px; } .cc-project-image { aspect-ratio:16/9; } .cc-project-body { padding:22px 0; } .cc-project h3 { font-size:1.3rem; } .cc-project-body > .cc-text-link { margin-top:0; } .cc-inquiry-grid { gap:38px; } .cc-inquiry { padding-block:46px; } .cc-selection dl > div { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:16px; } }
@media(max-width:1050px) { .cc-component-groups { gap:20px; } .cc-components summary { grid-template-columns:1fr 16px; gap:8px; } .cc-components summary .cc-number { grid-column:1/-1; } .cc-plant-media { grid-template-columns:minmax(0,1fr) 225px; gap:18px; } .cc-site-photo > img,.cc-video-frame { height:400px; } .cc-feature-grid { gap:26px; } .cc-delivery-steps { gap:24px; } }
@media(max-width:760px) { .cc-component-groups { grid-template-columns:1fr; gap:0; margin-top:20px; } .cc-components { border-bottom:0; } .cc-components:last-child { border-bottom:1px solid var(--cc-line); } .cc-components summary { grid-template-columns:92px 1fr 16px; gap:12px; min-height:66px; } .cc-components summary .cc-number { grid-column:auto; } .cc-annotated { border-radius:6px; } .cc-annotated figcaption { padding:14px 16px; font-size:.7rem; } .cc-plant-media { grid-template-columns:1fr; gap:24px; } .cc-site-photo > img { height:auto; aspect-ratio:4/3; } .cc-discharge { width:min(100%,280px); justify-self:center; } .cc-video-frame { height:auto; aspect-ratio:9/16; } .cc-feature-grid { grid-template-columns:1fr; gap:20px; padding:28px 0; } .cc-feature-grid article + article { padding-top:20px; border-top:1px solid var(--cc-line); } .cc-delivery-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 22px; } .cc-delivery-steps li:nth-child(2)::after { display:none; } .cc-delivery { padding-block:24px; } .cc-product-links { gap:14px 22px; } .cc-product-links > span { width:100%; } .cc-water-intro { margin-top:18px; } .cc-water-photos { grid-template-columns:1fr; gap:24px; } .cc-water-footer { display:block; padding-top:22px; } .cc-water-footer .cc-text-link { margin-top:18px; } }
@media(prefers-reduced-motion:reduce) { .cc-page *, .cc-page *::before, .cc-page *::after { transition:none!important; scroll-behavior:auto!important; } }