/* =========================================================
   Motion & layout system (all Geosystems pages)
   - full-screen information sections, alternating colours
   - wedge edge that flattens as a section scrolls in
   - cards that drop in and settle ("falling into place")
   - word-by-word headings, image parallax, card tilt
   ========================================================= */

/* ---------- Full-screen sections, content centred ---------- */
@media (min-width:960px) and (min-height:640px){
  .fs{min-height:100svh;display:flex;align-items:center}
  .fs > .wrap{width:100%}
}
/* colour roles so neighbours always contrast */
.bg-white{background:var(--white)}
.bg-cream{background:var(--cream)}
.bg-dark{background:var(--green);color:#D9E2DC}
.bg-deep{background:var(--green-deep);color:#C9D4CE}
.bg-dark h2,.bg-deep h2,.bg-dark h3,.bg-deep h3{color:var(--white)}
.bg-dark .eyebrow,.bg-deep .eyebrow{color:var(--bronze)}
.bg-dark .lead,.bg-deep .lead,.bg-dark p,.bg-deep p{color:#C2CEC7}

/* ---------- Wedge edge ---------- */
.wedge{position:relative}
/* Section edges are straight and fixed: the diagonal wedge is switched off */
.wedge::before{content:none}

/* ---------- Gentle section snapping (desktop, mouse only) ---------- */
@media (hover:hover) and (pointer:fine) and (min-width:960px) and (min-height:640px){
  html.snap{scroll-snap-type:y proximity;scroll-padding-top:0}
  html.snap .fs,html.snap .pbanner,html.snap .hero{scroll-snap-align:start}
}

/* ---------- Pieces falling into place ---------- */
.fall{opacity:0;transform:translateY(-90px) rotate(var(--rot,-5deg));transform-origin:50% 0;transition:opacity .6s ease,transform 1.25s cubic-bezier(.3,1.45,.5,1);transition-delay:calc(var(--i,0) * 120ms)}
.fall:nth-child(even){--rot:4deg}
.fall:nth-child(3n){--rot:-2deg}
.fall.in{opacity:1;transform:none}

/* ---------- Word-by-word headings ---------- */
.words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.words .w > span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--out);transition-delay:calc(var(--wi,0) * 55ms + 80ms)}
.words.in .w > span{transform:none}

/* ---------- Parallax images and tilt cards ---------- */
[data-par]{will-change:transform}
.tilt{transform-style:preserve-3d}
/* image layer inside a frame, so parallax can move it without moving the frame */
.pimg{position:relative;overflow:hidden}
.pimg > span{position:absolute;inset:-10%;background:var(--green-soft) center/cover}

/* ---------- Catalogue band: bronze, with a living badge ---------- */
.catband{background:var(--bronze);color:var(--green-deep);padding:100px 0;position:relative;overflow:hidden}
.catband::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;background:radial-gradient(circle at center,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.catband .wrap{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap;position:relative;z-index:1}
.catband h2{color:var(--green-deep)}
.catband p{color:rgba(19,40,31,.82)}
.dl-badge{position:relative;flex:none;width:168px;height:168px;border-radius:50%;background:none;color:var(--white);display:block;font-size:0}
.dl-badge .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.dl-badge:hover .ring{animation-duration:5s}
.dl-badge .core{position:absolute;inset:34px;border-radius:50%;background:var(--green-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--cream);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;overflow:hidden;isolation:isolate}
.dl-badge .core::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--white);transform:scale(0);transition:transform .6s var(--spring);z-index:-1}
.dl-badge:hover .core::before{transform:scale(1)}
.dl-badge:hover .core{color:var(--green-deep)}
.dl-badge .core svg{transition:transform .6s var(--spring)}
.dl-badge:hover .core svg{transform:translateY(4px)}
.dl-badge:hover{color:var(--white)}

/* ---------- About: intro with stats ---------- */
.istats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--line)}
.istats div{padding:26px 18px 0 0}
.istats strong{display:block;font-family:var(--serif);font-size:clamp(40px,4.4vw,60px);line-height:1;color:var(--green);font-weight:600}
.istats span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted)}
@media (max-width:760px){.istats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}}

/* ---------- Analytical edge ---------- */
.cap-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:64px;align-items:center}
.cap-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cap-card{background:var(--white);padding:24px 22px;border-radius:4px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 0 rgba(19,40,31,.06)}
.cap-card .k{font-family:var(--serif);font-size:30px;line-height:1;color:var(--bronze-text)}
.cap-card h3{font-size:17px;color:var(--green)}
.cap-card p{font-size:14.5px;color:var(--muted)}
.econ{background:var(--green-deep);border-radius:6px;padding:30px 28px;color:#C9D4CE;margin-top:26px}
.econ small{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin-bottom:16px}
.econ .bar{display:flex;height:44px;border-radius:3px;overflow:hidden}
.econ .bar i{display:block;height:100%;width:0;transition:width 1.4s var(--out);transition-delay:calc(var(--n) * 160ms)}
.econ.in .bar i{width:var(--v)}
.econ .bar i:nth-child(1){background:#7FA884}
.econ .bar i:nth-child(2){background:#5E8A6B}
.econ .bar i:nth-child(3){background:#B08550}
.econ .bar i:nth-child(4){background:#8A5F2E}
.econ .bar i:nth-child(5){background:#D9CDB4}
.econ ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px}
.econ li{display:flex;align-items:center;gap:7px}
.econ li::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--c)}
.econ p{font-size:12.5px;margin-top:14px;color:#9FB2A7}
@media (max-width:960px){.cap-grid{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (max-width:560px){.cap-cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- Why: index of reasons ---------- */
.rindex{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;counter-reset:r}
.rindex a{display:flex;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--green);font-weight:600;font-size:17px;transition:padding .5s var(--spring),color .4s}
.rindex a:hover{padding-left:10px;color:var(--bronze-text)}
.rindex a b{font-family:var(--serif);font-size:26px;color:var(--bronze-text);font-weight:600;min-width:38px}
@media (max-width:760px){.rindex{grid-template-columns:minmax(0,1fr)}}
.reason{min-height:100svh}
@media (max-width:860px){.reason{min-height:0}}

@media (prefers-reduced-motion:reduce){
  .fall{opacity:1;transform:none}
  .words .w > span{transform:none}
  .wedge::before{display:none}
  .dl-badge .ring{animation:none}
}

/* tilted pieces must never cause sideways scrolling */
main{overflow-x:clip}

/* ---------- Section rail (added by ng-pager.js) ---------- */
.rail{position:fixed;right:22px;top:50%;transform:translate(14px,-50%);z-index:95;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .5s var(--out),transform .6s var(--spring)}
.rail.show{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.rail li button{position:relative;width:26px;height:22px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.rail li button::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(30,59,47,.35);transition:transform .45s var(--spring),background .3s}
.rail li button.on::before{background:var(--bronze);transform:scale(1.9)}
.rail li button:hover::before{transform:scale(1.6);background:var(--bronze)}
.rail li button span{position:absolute;right:30px;top:50%;transform:translate(8px,-50%);white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.04em;background:var(--green-deep);color:var(--cream);padding:5px 10px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--out)}
.rail li button:hover span,.rail li button:focus-visible span{opacity:1;transform:translate(0,-50%)}
.rail-end{width:34px;height:34px;border-radius:50%;border:1px solid rgba(30,59,47,.3);background:rgba(255,255,255,.7);color:var(--green);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,color .3s,transform .4s var(--spring)}
.rail-end:hover{background:var(--bronze);color:var(--green-deep);border-color:var(--bronze);transform:scale(1.12)}
.rail.on-dark li button::before{background:rgba(255,255,255,.4)}
.rail.on-dark li button.on::before,.rail.on-dark li button:hover::before{background:var(--bronze)}
.rail.on-dark .rail-end{background:rgba(19,40,31,.5);border-color:rgba(255,255,255,.35);color:var(--white)}
.rail.on-dark .rail-end:hover{background:var(--bronze);color:var(--green-deep)}

/* ---------- Stacked colour cards (Why Vazdor) ---------- */
.stack-cards{background:var(--green-deep);padding:56px 0 12vh;position:relative}
.scard{position:sticky;top:calc(100px + var(--k,0) * 12px);height:calc(100svh - 150px);min-height:460px;width:min(1200px,calc(100% - 40px));margin:0 auto 48px;border-radius:14px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--cb);color:var(--cf);box-shadow:0 -14px 40px rgba(0,0,0,.28);transform-origin:50% 0;will-change:transform}
.scard .sc-txt{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(28px,5vw,72px)}
.scard .sc-n{font-family:var(--serif);font-size:clamp(80px,10vw,150px);line-height:.8;font-weight:600;color:var(--ca);opacity:.9}
.scard small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ca)}
.scard h2{font-family:var(--sans);font-size:clamp(28px,3.2vw,44px);font-weight:700;line-height:1.08;color:var(--cf)}
.scard p{font-size:17px;line-height:1.75;max-width:520px;color:var(--cf);opacity:.86}
.scard .sc-img{position:relative;overflow:hidden;margin:18px 18px 18px 0;border-radius:10px}
.scard .sc-img span{position:absolute;inset:-6%;background:var(--green-soft) center/cover}
.sc1{--cb:#1E3B2F;--cf:#F5F0E6;--ca:#B08550}
.sc2{--cb:#B08550;--cf:#13281F;--ca:#13281F}
.sc3{--cb:#F5F0E6;--cf:#1E3B2F;--ca:#8A5F2E}
.sc4{--cb:#2C4F40;--cf:#FFFFFF;--ca:#D9B98A}
.sc5{--cb:#7FA884;--cf:#13281F;--ca:#13281F}
.sc6{--cb:#FFFFFF;--cf:#1E3B2F;--ca:#B08550}
.sc7{--cb:#8A5F2E;--cf:#F5F0E6;--ca:#F5D9AE}
.sc8{--cb:#13281F;--cf:#F5F0E6;--ca:#7FA884;border:1px solid #2A4437}
@media (max-width:860px){
  .stack-cards{padding:24px 0 40px}
  .scard{position:relative;top:auto;height:auto;min-height:0;grid-template-columns:minmax(0,1fr);margin-bottom:18px}
  .scard .sc-img{order:-1;height:220px;margin:12px 12px 0}
  .scard .sc-n{font-size:72px}
}
.scard .sc-img{background:rgba(0,0,0,.14)}

/* Paged desktop: sections sized to one screen */
html.paged .about2-title{margin-bottom:34px}
html.paged .about2-img{min-height:320px}
html.paged .grow{min-height:calc(100vh - 140px)}

/* Vision / mission cards: dark text on the white cards, even inside dark sections */
.bg-deep .vcard h3,.bg-dark .vcard h3{color:var(--green-deep)}
.bg-deep .vcard p,.bg-deep .vcard li,.bg-dark .vcard p,.bg-dark .vcard li{color:#1C1F1D}
@media (max-height:980px){
  html.paged .sec-head{margin-bottom:28px}
  html.paged .pcards{height:clamp(360px,calc(100vh - 380px),540px)}
  html.paged .finder form{padding:24px 28px;gap:14px}
  html.paged .finder legend{margin-bottom:6px}
  html.paged .result{padding:24px 28px;gap:10px}
  html.paged .result .grade{font-size:clamp(48px,5.4vw,72px)}
  html.paged .about2-copy{gap:12px;font-size:15.5px;line-height:1.65}
  html.paged .about2-title{font-size:clamp(34px,4.4vw,56px)}
  html.paged .steps{margin-top:40px}
}

/* Statement word: set in the brand serif with wide tracking, like the VAZDOR wordmark */
.bigword h2{font-family:var(--serif);font-weight:700;letter-spacing:.12em;padding-left:.12em;font-size:clamp(28px,5.8vw,92px);line-height:1.05}

/* About: the problem in numbers, under the photo */
.about2-side{display:flex;flex-direction:column;gap:26px}
.pstrip{display:flex;flex-direction:column;gap:0;border-top:1px solid #2A4437}
.pstrip-k{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--bronze);padding:14px 0 6px}
.pstrip div{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid #2A4437}
.pstrip strong{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--white);line-height:1;white-space:nowrap}
.pstrip strong b{font-weight:inherit}
.pstrip span{font-size:13.5px;line-height:1.45;color:#AFC0B6}
.pstrip .src,.wc-grid .src{font-size:11.5px;line-height:1.5;color:#8FA398;margin:10px 0 0}
.pstrip .src a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Why Coir: data and an honest comparison */
#why .sec-head{max-width:760px}
.wc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.wc-stats{display:flex;flex-direction:column}
.wc-stat{padding:18px 0;border-top:1px solid var(--line)}
.wc-stat:last-child{border-bottom:1px solid var(--line)}
.wc-stat strong{display:block;font-family:var(--serif);font-size:clamp(38px,3.6vw,52px);font-weight:600;line-height:1;color:var(--green)}
.wc-stat strong b{font-weight:inherit}
.wc-stat p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.wc-grid .src{display:inline-block;color:var(--muted);text-decoration:underline;text-underline-offset:2px;margin-top:6px}
.wc-grid .src:hover{color:var(--bronze-text)}
.wc-table{background:var(--white);border-top:3px solid var(--bronze);padding:8px 28px 22px;box-shadow:0 18px 40px rgba(19,40,31,.07)}
.wc-table table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.wc-table th,.wc-table td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.wc-table thead th{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:16px}
.wc-table thead th:nth-child(2){color:var(--green)}
.wc-table tbody th{font-weight:600;color:var(--green);width:22%}
.wc-table tbody td:nth-child(2){color:var(--ink);font-weight:500;background:rgba(176,133,80,.07)}
.wc-table tbody td:nth-child(3){color:var(--muted)}
.wc-table .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wc-note{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.wc-note b{color:var(--green)}
@media (max-width:900px){
  .wc-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .wc-table{padding:4px 14px 18px;overflow-x:auto}
  .wc-table th,.wc-table td{padding:11px 8px;font-size:13.5px}
  .pstrip div{grid-template-columns:112px 1fr}
  .pstrip strong{font-size:25px}
}
@media (max-height:980px){
  html.paged #why .sec-head{margin-bottom:22px}
  html.paged .wc-stat{padding:12px 0}
  html.paged .wc-table th,html.paged .wc-table td{padding:10px 12px}
}
@media (max-height:980px){
  html.paged .about2-img{min-height:clamp(150px,calc(100vh - 660px),300px)}
  html.paged .about2-side{gap:16px}
  html.paged .pstrip div{padding:7px 0}
  html.paged .pstrip strong{font-size:26px}
}
.wc-table table{min-width:0}
.wc-table th{background:none;letter-spacing:normal}
.wc-table tbody tr::after{display:none}

/* Touch: no blue tap flash; keyboard users still get the bronze focus ring */
html{-webkit-tap-highlight-color:transparent}
a,button,label,input,select,textarea,[role="button"],[tabindex]{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
@media (pointer:coarse){
  .btn:active,.circle-btn:active,.nav-arrow:active,.arrow:active,.pcard:active,.hero-pause:active,.dl-badge:active,.rail button:active{opacity:.82;transition:opacity .1s}
}

/* Products mega menu: product list with a photo preview */
.nav .dd-mega{min-width:0;width:560px;flex-direction:row;padding:0;left:50%;margin-left:-180px}
.mega-list{display:flex;flex-direction:column;padding:16px 0;flex:0 0 250px}
.mega-k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--bronze-text);padding:4px 20px 10px}
.nav .dd-mega .mega-all{margin-top:6px;border-top:1px solid var(--line);color:var(--bronze-text)}
.mega-img{flex:1;min-height:250px;background:var(--green-soft) center/cover;background-image:repeating-linear-gradient(0deg,rgba(176,133,80,.18) 0 2px,transparent 2px 16px),repeating-linear-gradient(90deg,rgba(176,133,80,.18) 0 2px,transparent 2px 16px);transition:opacity .35s var(--out)}
.mega-img.swap{opacity:.25}

/* Word-by-word headings: leave room for descenders (g, p, y) so they are never clipped */
.words .w{padding-bottom:.24em;margin-bottom:-.24em}