/* CIDES two-column process hero — seamless with the consolidated header */
:root{
    --cides-hero-canvas:#f4f9f3;
    --cides-hero-card:#ffffff;
    --cides-hero-ink:#102619;
    --cides-hero-copy:#34463a;
    --cides-hero-green:#0c4b25;
    --cides-hero-green-2:#1f7d3f;
    --cides-hero-gold:#f7c52c;
    --cides-hero-line:#d7e7d9;
}

/* Make the header and hero read as one continuous composition. */
body.home .cides-site-header,
body.home .cides-topbar,
body.home .cides-df-hero{
    background:var(--cides-hero-canvas);
}
body.home .cides-topbar{border-bottom:0}
body.home .cides-site-header{box-shadow:none}
body.home .cides-df-header-shell{border-bottom:1px solid rgba(12,75,37,.09)}

body.home .cides-df-hero{
    position:relative;
    isolation:isolate;
    min-height:0;
    overflow:hidden;
    color:var(--cides-hero-ink);
    padding:58px 0 86px;
}
body.home .cides-df-hero::before,
body.home .cides-df-hero::after{display:none!important}
body.home .cides-df-hero::marker{display:none}

body.home .cides-df-hero__inner{
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(520px,.98fr);
    gap:68px;
    align-items:center;
    padding:0;
    text-align:left;
}
body.home .cides-df-hero__copy{max-width:690px;position:relative;z-index:4}
body.home .cides-df-hero .cides-df-kicker{
    color:var(--cides-hero-green-2);
    font-size:14px;
    font-weight:800;
    letter-spacing:.11em;
}
body.home .cides-df-hero .cides-df-kicker::before{background:var(--cides-hero-gold);width:34px;height:3px}
body.home .cides-df-hero h1{
    max-width:680px;
    margin:18px 0 22px;
    color:var(--cides-hero-ink);
    font-size:clamp(48px,5.5vw,76px);
    font-weight:700;
    line-height:1.02;
    letter-spacing:-.045em;
    text-shadow:none;
}
body.home .cides-df-hero__lead{
    max-width:650px;
    margin:0 0 28px;
    color:var(--cides-hero-copy);
    font-size:19px;
    font-weight:500;
    line-height:1.75;
}
body.home .cides-df-hero__actions{justify-content:flex-start;gap:12px;margin-bottom:30px}
body.home .cides-df-hero .cides-df-btn{
    min-height:52px;
    padding:12px 20px;
    font-size:15px;
    font-weight:700;
    box-shadow:0 10px 28px rgba(12,75,37,.10);
}
body.home .cides-df-hero .cides-df-btn--light{background:#fff;color:var(--cides-hero-green);border:1px solid var(--cides-hero-line)}
body.home .cides-df-hero .cides-df-btn--gold{background:var(--cides-hero-gold);color:var(--cides-hero-green)}

/* Proof/solution tiles live inside the text column rather than floating below the hero. */
.cides-hero-proof-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    max-width:680px;
}
.cides-hero-proof{
    min-height:118px;
    display:grid;
    grid-template-columns:44px 1fr;
    gap:13px;
    align-items:start;
    padding:17px 18px;
    border:1px solid var(--cides-hero-line);
    border-radius:18px;
    background:rgba(255,255,255,.82);
    box-shadow:0 10px 34px rgba(31,80,45,.055);
    backdrop-filter:blur(10px);
}
.cides-hero-proof__icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--cides-hero-gold);
    color:var(--cides-hero-green);
}
.cides-hero-proof__icon svg{width:21px;height:21px;fill:currentColor}
.cides-hero-proof h3{margin:1px 0 5px;color:var(--cides-hero-ink);font-size:16px;font-weight:700;line-height:1.25}
.cides-hero-proof p{margin:0;color:#46574b;font-size:14px;font-weight:550;line-height:1.55}

/* Four-square process chain: waste -> biogas -> cooking + bioslurry. */
.cides-process-chain{
    position:relative;
    width:min(100%,610px);
    min-height:610px;
    margin-left:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:34px;
    z-index:3;
}
.cides-process-card{
    position:relative;
    min-height:270px;
    overflow:hidden;
    border:8px solid rgba(255,255,255,.9);
    border-radius:34px;
    background:#d9e7dc;
    box-shadow:0 22px 52px rgba(20,68,35,.15);
}
.cides-process-card:nth-child(1){transform:translateY(20px) rotate(-2deg)}
.cides-process-card:nth-child(2){transform:translateY(-12px) rotate(2deg)}
.cides-process-card:nth-child(3){transform:translateX(18px) rotate(1.5deg)}
.cides-process-card:nth-child(4){transform:translate(-8px,-6px) rotate(-1.5deg)}
.cides-process-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.cides-process-card:hover img{transform:scale(1.045)}
.cides-process-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(4,28,13,.02) 28%,rgba(5,39,17,.82) 100%);
}
.cides-process-card__label{
    position:absolute;
    z-index:2;
    left:18px;
    right:18px;
    bottom:17px;
    display:flex;
    align-items:center;
    gap:11px;
    color:#fff;
}
.cides-process-card__icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cides-hero-gold);
    color:var(--cides-hero-green);
    box-shadow:0 7px 20px rgba(0,0,0,.18);
}
.cides-process-card__icon svg{width:20px;height:20px;fill:currentColor}
.cides-process-card__copy{display:grid;gap:1px}
.cides-process-card__copy small{color:#dcecdf;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cides-process-card__copy strong{color:#fff;font-size:17px;font-weight:700;line-height:1.18}

.cides-process-arrow{
    position:absolute;
    z-index:6;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:7px solid var(--cides-hero-canvas);
    border-radius:50%;
    background:var(--cides-hero-gold);
    color:var(--cides-hero-green);
    box-shadow:0 12px 30px rgba(12,75,37,.15);
}
.cides-process-arrow svg{width:24px;height:24px;fill:currentColor}
.cides-process-arrow--waste{top:23%;left:50%;transform:translate(-50%,-50%)}
.cides-process-arrow--cook{top:51%;left:64%;transform:translate(-50%,-50%) rotate(128deg)}
.cides-process-arrow--slurry{top:51%;left:87%;transform:translate(-50%,-50%) rotate(52deg)}

.cides-process-badge{
    position:absolute;
    z-index:7;
    left:50%;
    top:50%;
    width:92px;
    height:92px;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    text-align:center;
    border:8px solid var(--cides-hero-canvas);
    border-radius:50%;
    background:var(--cides-hero-green);
    color:#fff;
    box-shadow:0 18px 38px rgba(12,75,37,.24);
}
.cides-process-badge span{display:grid;place-items:center;gap:2px;font-size:11px;font-weight:800;line-height:1.05;letter-spacing:.04em;text-transform:uppercase}
.cides-process-badge svg{width:25px;height:25px;fill:var(--cides-hero-gold)}

/* Decorative icons are real theme SVGs, deliberately faint and non-interactive. */
.cides-hero-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cides-hero-float{position:absolute;display:grid;place-items:center;color:var(--cides-hero-green);opacity:.065;filter:saturate(.85)}
.cides-hero-float svg{width:100%;height:100%;fill:currentColor}
.cides-hero-float--1{width:82px;height:82px;left:3%;top:8%;transform:rotate(-18deg)}
.cides-hero-float--2{width:56px;height:56px;left:44%;top:9%;transform:rotate(22deg);color:#0077b6}
.cides-hero-float--3{width:72px;height:72px;right:2%;top:20%;transform:rotate(14deg)}
.cides-hero-float--4{width:96px;height:96px;left:35%;bottom:2%;transform:rotate(-28deg);color:#a0522d}
.cides-hero-float--5{width:62px;height:62px;right:36%;bottom:8%;transform:rotate(28deg);color:#0077b6}
.cides-hero-float--6{width:46px;height:46px;left:7%;bottom:14%;transform:rotate(14deg)}
.cides-df-hero::selection{background:var(--cides-hero-gold);color:var(--cides-hero-green)}

/* Soft organic field contour at the base rather than a detached dark band. */
.cides-df-hero__field-edge{
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:44px;
    background:#fff;
    clip-path:polygon(0 62%,6% 48%,12% 60%,18% 44%,25% 58%,32% 46%,39% 60%,46% 43%,54% 58%,62% 45%,70% 60%,78% 47%,86% 58%,93% 44%,100% 57%,100% 100%,0 100%);
}

@media(max-width:1180px){
    body.home .cides-df-hero__inner{grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);gap:38px}
    .cides-process-chain{min-height:540px;gap:26px}
    .cides-process-card{min-height:235px;border-radius:28px}
    body.home .cides-df-hero h1{font-size:clamp(44px,5.6vw,64px)}
}

@media(max-width:980px){
    body.home .cides-df-hero{padding:44px 0 78px}
    body.home .cides-df-hero__inner{grid-template-columns:1fr;gap:48px}
    body.home .cides-df-hero__copy{max-width:none}
    body.home .cides-df-hero h1{max-width:780px}
    body.home .cides-df-hero__lead{max-width:760px}
    .cides-process-chain{width:min(100%,650px);margin:0 auto;min-height:560px}
}

@media(max-width:700px){
    body.home .cides-df-hero{padding-top:32px}
    body.home .cides-df-hero h1{font-size:clamp(40px,12vw,56px)}
    body.home .cides-df-hero__lead{font-size:17px;line-height:1.68}
    .cides-hero-proof-grid{grid-template-columns:1fr}
    .cides-hero-proof{min-height:0}
    .cides-process-chain{min-height:460px;gap:18px}
    .cides-process-card{min-height:195px;border-width:5px;border-radius:24px}
    .cides-process-card__label{left:12px;right:12px;bottom:12px;gap:8px}
    .cides-process-card__icon{width:34px;height:34px;flex-basis:34px}
    .cides-process-card__copy small{font-size:9px}
    .cides-process-card__copy strong{font-size:13px}
    .cides-process-arrow{width:44px;height:44px;border-width:5px}
    .cides-process-arrow svg{width:18px;height:18px}
    .cides-process-badge{width:72px;height:72px;border-width:5px}
    .cides-process-badge span{font-size:9px}
    .cides-process-badge svg{width:20px;height:20px}
}

@media(max-width:480px){
    body.home .cides-df-hero__actions{display:grid;grid-template-columns:1fr}
    body.home .cides-df-hero .cides-df-btn{width:100%}
    .cides-process-chain{min-height:390px;gap:12px}
    .cides-process-card{min-height:165px;border-radius:20px}
    .cides-process-card:nth-child(n){transform:none}
    .cides-process-card__copy small{display:none}
    .cides-process-card__copy strong{font-size:12px}
    .cides-process-arrow--waste{top:25%}
    .cides-process-arrow--cook{top:52%;left:63%}
    .cides-process-arrow--slurry{top:52%;left:87%}
}

@media(prefers-reduced-motion:reduce){
    .cides-process-card,.cides-process-card img{transition:none!important;transform:none!important}
}