/* Green Hydrogen content only. Layout spacing follows the homepage. */
/* a link to a section (Home's Integrated Water Solutions cards) lands with its
   heading clear of the fixed header, as on Digital Solutions (4 Nov 2026) */
.gh-page section[id]{scroll-margin-top:112px}
@media(max-width:640px){.gh-page section[id]{scroll-margin-top:82px}}
.gh-page .ie-container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.gh-page .section{padding:48px 0;border-top:1px solid #f1f5f9}
.gh-page .section .ds-eyebrow{margin:0 0 16px}
.gh-page .section .ds-h2{margin:0 0 16px;font-size:var(--type-heading-section-home)}
.gh-page .section .ds-body-large{margin:0;max-width:61ch}
.gh-page .gh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.gh-page .gh-card{padding:24px;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
.gh-page .gh-card .gh-title{margin:0 0 16px}
.gh-page .gh-card .gh-body{margin:0}
.gh-page .gh-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:56px}
.gh-page .gh-split .gh-body{margin:16px 0 0}
.gh-page .gh-split .gh-title{margin:0 0 16px}
.gh-page .gh-overview__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.84fr);gap:40px;align-items:center}
.gh-page .gh-overview .gh-body{margin:16px 0 0}
.gh-page .gh-figure{margin:0}
.gh-page .gh-figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.gh-page .gh-overview .gh-figure img{height:480px;aspect-ratio:auto}
.gh-page figcaption{color:#64748b;margin:8px 0 0}
.gh-page .gh-link{color:#007cc3;display:inline-block;margin-top:16px}
.gh-page .gh-product{text-decoration:none;display:flex;flex-direction:column}
.gh-page .gh-product:hover{border-color:#007cc3}
.gh-page .gh-placeholder{background:#f8fafc;padding:16px;border-left:3px solid #007cc3;margin-top:24px;color:#475569}
.gh-page .gh-space{margin-top:16px}
.gh-page .gh-pillar{margin-top:40px;padding-top:40px;border-top:1px solid #e2e8f0}
.gh-page .gh-pillar .gh-figure img,.gh-page .gh-support-intro .gh-figure img{aspect-ratio:16/9}
.gh-page .gh-support-intro{margin-bottom:0}
@media(min-width:768px){.gh-page .section .ds-h2{font-size:var(--type-heading-section-home-desktop)}}
@media(min-width:1024px){.gh-page .section{padding-top:64px;padding-bottom:64px}}
@media(max-width:1023px){.gh-page .gh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gh-page .gh-split,.gh-page .gh-overview__grid{grid-template-columns:1fr;gap:32px}.gh-page .gh-overview .gh-figure img{height:360px}.gh-page .gh-pillar>div{order:0}.gh-page .gh-pillar>figure{order:1}}
@media(max-width:639px){.gh-page .gh-grid{grid-template-columns:1fr}.gh-page .gh-card{padding:16px}.gh-page .gh-overview .gh-figure img{height:300px}}

.gh-page .gh-title{color:#0f172a}
.gh-page .gh-body{color:#64748b}
.gh-page .page-banner{position:relative}
.gh-page .gh-hero-caption{position:absolute;right:24px;bottom:12px;z-index:3;margin:0;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.gh-page .gh-pillars{margin-top:56px}
.gh-page .gh-pillars .gh-split{margin-top:0}
.gh-page .gh-pillars .gh-pillar{margin-top:40px}
.gh-page .gh-tbd{border:1px dashed #94a3b8;background:#f8fafc}
.gh-page .gh-tbd-box{background:#f8fafc;padding:16px;border-left:3px solid #94a3b8;margin-top:24px;color:#475569}
.gh-page .gh-tbd-box strong{color:#0f172a}
.gh-page .gh-subhead{margin:56px 0 0;color:#0f172a}
.gh-page .gh-subhead+.gh-grid{margin-top:24px}
.gh-page .gh-integ{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.gh-page .gh-integ .ds-body-large{margin-top:0}
.gh-page .gh-integ__cta{margin-top:32px}
#main-content.gh-page .gh-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gh-page .gh-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;padding-bottom:32px}
.gh-page .gh-step:last-child{padding-bottom:0}
.gh-page .gh-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:52px;bottom:4px;width:2px;background:#cbd5e1}
.gh-page .gh-step__icon{width:48px;height:48px;border-radius:14px;background:#007cc3;color:#fff;display:flex;align-items:center;justify-content:center}
.gh-page .gh-step--end .gh-step__icon{background:#fff;color:#007cc3;border:1px solid #cbd5e1}
.gh-page .gh-step .ds-eyebrow{margin:0 0 4px}
.gh-page .gh-step .gh-title{margin:0 0 8px}
.gh-page .gh-step .gh-body{margin:0}
.gh-page .gh-statgrid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:64px}
@media(max-width:1023px){.gh-page .gh-integ{grid-template-columns:1fr;gap:40px}.gh-page .gh-statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.gh-page .gh-statgrid{grid-template-columns:1fr}.gh-page .gh-step{gap:16px}}
.gh-page .gh-statgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1023px){.gh-page .gh-statgrid--3{grid-template-columns:1fr}}

.gh-page .gh-context{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px;padding-top:40px;border-top:1px solid #e2e8f0}
.gh-page .gh-context .gh-body{margin:0}
.gh-page .gh-figure--wide{margin-top:56px}
.gh-page .gh-figure--wide img{aspect-ratio:16/9;height:auto}
.gh-page .gh-dg{margin:48px 0 0}
.gh-page .gh-dg__scroll{overflow-x:auto;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
.gh-page .gh-dg__scroll img{display:block;width:100%;height:auto}
.gh-page .gh-markets__lead{margin-top:16px}
.gh-page .gh-markets__lead+.gh-grid{margin-top:32px}
.gh-page .gh-grid--regions,.gh-page .gh-grid--targets{grid-template-columns:repeat(3,minmax(0,1fr))}
.gh-page .gh-grid--approach{grid-template-columns:repeat(4,minmax(0,1fr))}
.gh-page .gh-approach__card{display:flex;flex-direction:column;gap:16px}
.gh-page .gh-approach__card .gh-title{margin:0}
.gh-page .gh-approach__close{display:flex;align-items:center;gap:16px;margin-top:24px;background:#f8fafc}
.gh-page .gh-approach__close .gh-title{margin:0}
.gh-page .gh-chip{flex:none}
@media(max-width:1023px){.gh-page .gh-context{grid-template-columns:1fr;gap:20px}.gh-page .gh-grid--regions,.gh-page .gh-grid--targets{grid-template-columns:1fr}.gh-page .gh-grid--approach{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:759px){.gh-page .gh-dg__scroll img{width:780px;max-width:none}}
@media(max-width:639px){.gh-page .gh-grid--approach{grid-template-columns:1fr}.gh-page .gh-figure--wide{margin-top:40px}}
.gh-page .section .gh-markets__lead{margin-top:16px;max-width:75ch}

.gh-page .gh-overview__grid--single{grid-template-columns:minmax(0,1fr)}
.gh-page .gh-overview__grid--single>div{max-width:100ch}
.gh-page .gh-statgrid--one{grid-template-columns:minmax(0,320px)}
.gh-page .gh-row{margin-top:56px}
.gh-page .gh-pillars .gh-row{margin-top:0;max-width:90ch}
.gh-page .gh-row .gh-body{margin:16px 0 0}
.gh-page .gh-approach__fig{max-width:420px;margin-top:32px}
.gh-page .gh-approach__fig img{aspect-ratio:auto;height:auto}
@media(max-width:1023px){.gh-page .gh-statgrid--one{grid-template-columns:1fr}}

/* Refinements: overview full width, sector cards, stepper highlight, pillar rows */
.gh-page .gh-overview__grid--single>div{max-width:none}
.gh-page .gh-overview .ds-body-large{max-width:none}
.gh-page .section .gh-subhead{margin:72px 0 0}
.gh-page .gh-subhead+.gh-grid{margin-top:32px}
.gh-page .svc-stat-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.gh-page .svc-stat-card:hover{transform:translateY(-4px);border-color:#007cc3;box-shadow:0 12px 28px rgba(0,124,195,.12)}

.gh-page .gh-card--sector{position:relative;display:flex;flex-direction:column;gap:20px;padding:28px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.gh-page .gh-card--sector::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#007cc3,#2db37a);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.gh-page .gh-card--sector:hover{transform:translateY(-4px);border-color:#b9dcf0;box-shadow:0 14px 32px rgba(15,23,42,.08)}
.gh-page .gh-card--sector:hover::before{transform:scaleX(1)}
.gh-page .gh-card__top{display:flex;align-items:center;justify-content:space-between}
.gh-page .section .gh-card__top .ds-eyebrow{margin:0;color:#94a3b8}
.gh-page .gh-card--sector .gh-step__icon{background:#eaf5fc;color:#007cc3;transition:background .25s ease,color .25s ease}
.gh-page .gh-card--sector:hover .gh-step__icon{background:#007cc3;color:#fff}
.gh-page .gh-card--sector .gh-title{margin:0}

/* Integrated solution: blue fills top to bottom as the section scrolls */
#main-content.gh-page .gh-steps{position:relative}
.gh-page .gh-step:not(:last-child)::before{content:none}
.gh-page .gh-steps::before,.gh-page .gh-steps::after{content:"";position:absolute;left:23px;top:24px;bottom:56px;width:2px;border-radius:2px}
.gh-page .gh-steps::before{background:#cbd5e1}
.gh-page .gh-steps::after{background:#007cc3;transform:scaleY(1);transform-origin:top}
.gh-page .gh-steps.is-live::after{transform:scaleY(var(--p,0));transition:transform .2s linear}
.gh-page .gh-steps.is-live .gh-step__icon{background:#fff;color:#007cc3;border:1px solid #cbd5e1;transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
.gh-page .gh-steps.is-live .gh-step.is-active .gh-step__icon{background:#007cc3;color:#fff;border-color:#007cc3;box-shadow:0 0 0 6px rgba(0,124,195,.14)}
.gh-page .gh-steps.is-live .gh-step .gh-title,.gh-page .gh-steps.is-live .gh-step .gh-body{opacity:.45;transition:opacity .35s ease}
.gh-page .gh-steps.is-live .gh-step.is-active .gh-title,.gh-page .gh-steps.is-live .gh-step.is-active .gh-body{opacity:1}

/* Water systems / pillars */
.gh-page .gh-pillars{margin-top:0;display:flex;flex-direction:column}
.gh-page .gh-pillars .gh-row--split{max-width:none;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;padding:48px 0;border-top:1px solid #e2e8f0}
.gh-page .gh-pillars .gh-row--split:first-child{border-top:0;padding-top:0}
.gh-page .gh-row__head .gh-step__icon{margin-bottom:20px;background:#eaf5fc;color:#007cc3}
.gh-page .gh-row__head .ds-eyebrow{margin:0 0 8px}
.gh-page .gh-row__head .gh-title{margin:0}
.gh-page .gh-row__body .gh-body{margin:0 0 16px;max-width:70ch}
.gh-page .gh-row__body .gh-body:last-child{margin-bottom:0}
.gh-page .gh-row__body .gh-callout{margin-top:24px;padding:20px 24px;background:#eaf5fc;border-left:3px solid #007cc3;border-radius:0 12px 12px 0;color:#334155}
.gh-page .gh-row__body .gh-callout strong{color:#0f172a}
.gh-page .gh-tbd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
/* The EPC figures arrived from the client on 28 Oct 2026, so this pair is no
   longer awaiting input: it takes the page's own card treatment instead of the
   dashed placeholder outline. */
.gh-page .gh-tbd-grid .gh-tbd-box{margin:0;background:#fff;border:1px solid #e2e8f0;border-left:1px solid #e2e8f0;border-radius:12px;color:#0f172a;display:flex;flex-direction:column;gap:4px}
@media(max-width:1023px){.gh-page .gh-pillars .gh-row--split{grid-template-columns:1fr;gap:24px}}
@media(max-width:639px){.gh-page .gh-tbd-grid{grid-template-columns:1fr}.gh-page .gh-card--sector{padding:20px}}
@media(prefers-reduced-motion:reduce){.gh-page *{transition:none!important}}
@media(min-width:1024px){.gh-page .gh-row__head{position:sticky;top:140px}}

/* Fix: line must pass behind the step icons, never over them */
.gh-page .gh-step__icon{position:relative;z-index:1}
.gh-page .gh-steps.is-live .gh-step.is-active .gh-step__icon{box-shadow:0 0 0 5px #fff,0 0 0 6px #b9dcf0}
.gh-page .gh-steps::before,.gh-page .gh-steps::after{z-index:0}

/* Water spec callout: no left bar, soft card with a badge */
.gh-page .gh-row__body .gh-callout{position:relative;padding:20px 24px 20px 80px;background:#f3f9fd;border:1px solid #cfe6f5;border-left:1px solid #cfe6f5;border-radius:16px}
.gh-page .gh-row__body .gh-callout::before{content:"";position:absolute;left:24px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;background-color:#007cc3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
@media(max-width:639px){.gh-page .gh-row__body .gh-callout{padding:16px 16px 16px 64px}.gh-page .gh-row__body .gh-callout::before{left:16px}}

/* Our approach: infographic plus plant photo side by side */
.gh-page .gh-approach__media{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px;margin-top:32px;align-items:stretch}
.gh-page .gh-approach__media .gh-approach__fig{max-width:none;margin-top:0}
.gh-page .gh-approach__photo{margin:0;min-height:0}
.gh-page .gh-approach__photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 50%}
@media(max-width:1023px){.gh-page .gh-approach__media{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
@media(max-width:639px){.gh-page .gh-approach__media{grid-template-columns:1fr}.gh-page .gh-approach__photo img{height:auto;aspect-ratio:16/9}}