/* Homepage 2026-10 — premium sections in Guide Export colours */
:root{--hp-navy:#03264f;--hp-ink:#0d2a44;--hp-muted:#5d7488;--hp-line:#d9e6ef;--hp-blue:#0750AD;--hp-sky:#0AA8EF;--hp-aqua:#58C9DC}
.hp-link{color:var(--hp-blue);font-weight:700;text-decoration:none}
.hp-link:hover{text-decoration:underline}
/* header: all links on one baseline */
.site-header .desktop-nav{align-items:center}
.site-header .desktop-nav>a,.site-header .desktop-nav .nav-products,.site-header .desktop-nav .products-trigger{display:inline-flex;align-items:center;height:40px;margin:0;padding-top:0!important;padding-bottom:0!important;line-height:1;vertical-align:middle}
.site-header .desktop-nav .nav-products{position:relative}

/* about */
.hp-about{display:grid;grid-template-columns:1.1fr 1fr;gap:34px 48px;align-items:start}
.hp-about h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.15;margin:8px 0 14px}
.hp-lead{font-size:1.12rem;color:var(--hp-ink);line-height:1.75}
.hp-about-copy>p:not(.hp-lead):not(.section-tag){color:var(--hp-muted);line-height:1.8}
.hp-about-actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:18px}
.hp-pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp-pillars article{padding:20px;border:1px solid var(--hp-line);border-radius:20px;background:linear-gradient(180deg,#fff,#f5fafe);transition:transform .25s,box-shadow .25s}
.hp-pillars article:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(7,80,173,.12)}
.hp-pillars i{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--hp-blue),var(--hp-sky));color:#fff;font-style:normal;font-size:1.1rem}
.hp-pillars h3{margin:12px 0 6px;font-size:1.05rem}
.hp-pillars p{margin:0;color:var(--hp-muted);font-size:.92rem;line-height:1.65}
.hp-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:22px;overflow:hidden;background:linear-gradient(135deg,var(--hp-navy),var(--hp-blue))}
.hp-stats div{padding:22px 18px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.12)}
.hp-stats div:first-child{border:0}
.hp-stats b{display:block;font-size:clamp(1.6rem,3vw,2.3rem);color:#fff;font-variant-numeric:tabular-nums}
.hp-stats span{color:rgba(255,255,255,.75);font-size:.86rem}

/* markets on the map */
.hp-markets{position:absolute;inset-inline:18px;bottom:18px;padding:14px;border-radius:18px;background:rgba(3,22,48,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hp-markets-label{display:block;margin-bottom:10px;color:#9fd8f5;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hp-market-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hp-market-grid a{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:background .2s}
.hp-market-grid a:hover{background:rgba(10,168,239,.35)}
.hp-market-grid b{font-size:.95rem}.hp-market-grid small{color:rgba(255,255,255,.72);font-size:.74rem}
.hp-routes .trade-map{position:relative}
.hp-routes .market-explorer{display:none}
.hp-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.hp-flow article{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--hp-line)}
.hp-flow span{color:var(--hp-sky);font-weight:800}
.hp-flow h3{margin:6px 0}.hp-flow p{color:var(--hp-muted);line-height:1.7;font-size:.94rem}
.hp-flow a{color:var(--hp-blue);font-weight:700;text-decoration:none}

/* tabs (collections + process) */
.hp-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.hp-tabs button{flex:none;padding:10px 18px;border:1px solid var(--hp-line);border-radius:999px;background:#fff;color:var(--hp-ink);font:600 .92rem/1 inherit;cursor:pointer;transition:all .2s}
.hp-tabs button.active{background:linear-gradient(135deg,var(--hp-blue),var(--hp-sky));color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(7,80,173,.25)}

/* curated collections */
.hp-col-body{display:grid;grid-template-columns:280px 1fr;gap:18px;margin-top:6px}
.hp-col-intro{position:relative;overflow:hidden;border-radius:22px;min-height:320px;background:var(--hp-navy);color:#fff}
.hp-col-intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hp-col-intro div{position:absolute;inset-inline:0;bottom:0;padding:20px;background:linear-gradient(180deg,transparent,rgba(3,22,48,.92))}
.hp-col-intro h3{margin:0 0 4px;font-size:1.4rem}.hp-col-intro p{margin:0 0 10px;color:rgba(255,255,255,.8)}
.hp-col-intro a{color:#9fe3ff;font-weight:700;text-decoration:none}
.hp-col-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hp-col-card{display:flex;flex-direction:column;gap:4px;padding-bottom:12px;border:1px solid var(--hp-line);border-radius:18px;overflow:hidden;background:#fff;color:inherit;text-decoration:none;transition:transform .25s,box-shadow .25s}
.hp-col-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(3,48,84,.12)}
.hp-col-media{display:block;aspect-ratio:4/5;background:#eef3f6;overflow:hidden}
.hp-col-media img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;transition:transform 1s}
.hp-col-card:hover img{transform:scale(1.05)}
.hp-col-card b{padding:0 12px;font-size:.92rem;line-height:1.35}
.hp-col-card small{padding:0 12px;color:var(--hp-muted);font-size:.76rem}
.hp-col-card em{padding:0 12px;margin-top:auto;color:var(--hp-blue);font-style:normal;font-weight:700;font-size:.82rem}

/* sector mosaic */
.hp-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:14px}
.hp-tile{position:relative;overflow:hidden;border-radius:22px;color:#fff;text-decoration:none;background:var(--hp-navy);isolation:isolate}
.hp-tile.t0,.hp-tile.t5{grid-column:span 2;grid-row:span 2}
.hp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hp-tile:hover img{transform:scale(1.08)}
.hp-tile-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,22,48,.05) 25%,rgba(3,22,48,.88));transition:background .4s}
.hp-tile:hover .hp-tile-shade{background:linear-gradient(180deg,rgba(7,80,173,.25),rgba(3,22,48,.94))}
.hp-tile-body{position:absolute;inset-inline:0;bottom:0;padding:18px;display:flex;flex-direction:column;gap:6px}
.hp-tile-body small{color:#9fe3ff;font-size:.78rem;font-weight:700}
.hp-tile-body b{font-size:1.2rem;line-height:1.25}
.hp-tile.t0 .hp-tile-body b,.hp-tile.t5 .hp-tile-body b{font-size:1.7rem}
.hp-tile-more{max-height:0;overflow:hidden;opacity:0;color:rgba(255,255,255,.85);font-size:.88rem;line-height:1.55;transition:max-height .4s,opacity .4s}
.hp-tile:hover .hp-tile-more,.hp-tile.t0 .hp-tile-more,.hp-tile.t5 .hp-tile-more{max-height:6em;opacity:1}
.hp-tile em{font-style:normal;font-weight:700;color:#fff;font-size:.86rem}

/* demand board */
.hp-demand-live{display:inline-flex;align-items:center;gap:8px;margin:-4px 0 14px;padding:6px 12px;border-radius:999px;background:#e9f8f0;color:#1f7a4d;font-weight:700;font-size:.84rem}
.hp-pulse{width:9px;height:9px;border-radius:50%;background:#2fd08a;animation:gePulse 2s infinite}
.hp-demand-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hp-dem-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--hp-line);border-radius:20px;background:#fff;transition:transform .25s,box-shadow .25s;animation:hpIn .5s both}
.hp-dem-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(3,48,84,.1)}
@keyframes hpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hp-dem-top{display:flex;gap:12px;align-items:center}
.hp-dem-top img,.hp-dem-ph{flex:none;width:54px;height:54px;border-radius:14px;object-fit:cover;object-position:50% 15%;background:#eef3f6;display:grid;place-items:center;color:#9fb6c8;font-weight:800}
.hp-dem-top b{display:block;font-size:.95rem;line-height:1.35}
.hp-dem-top small{color:var(--hp-muted);font-size:.76rem}
.hp-dem-qty{padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,#f0f8ff,#e6f4fd)}
.hp-dem-qty strong{font-size:1.5rem;color:var(--hp-blue);font-variant-numeric:tabular-nums}
.hp-dem-qty span{color:var(--hp-muted);font-weight:700}
.hp-dem-card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.hp-dem-card dt{color:var(--hp-muted);font-size:.72rem}
.hp-dem-card dd{margin:2px 0 0;font-weight:700;font-size:.88rem}
.hp-dem-link{position:absolute;inset:0;border-radius:20px}
.hp-sample{position:absolute;top:12px;inset-inline-end:12px;padding:3px 9px;border-radius:999px;background:#fff6e0;color:#8a5a00;font-size:.7rem;font-weight:700}
.hp-demand-cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:20px}
.hp-empty{color:var(--hp-muted)}

/* trade intelligence */
.hp-intel{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:clamp(28px,5vw,56px)!important;border-radius:30px;background:radial-gradient(circle at 85% 20%,rgba(10,168,239,.35),transparent 45%),linear-gradient(135deg,#021a3d,#03305f);color:#fff;margin-inline:auto;max-width:1280px}
.hp-intel h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);margin:8px 0 12px}
.hp-intel p{color:rgba(255,255,255,.8);line-height:1.8}
.hp-intel-list{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:10px}
.hp-intel-list li{display:flex;gap:10px;color:rgba(255,255,255,.9)}
.hp-intel-list li::before{content:'✓';color:var(--hp-aqua);font-weight:800}
.hp-intel-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp-intel-card{padding:18px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.hp-intel-card.wide{grid-column:1/-1}
.hp-intel-card small{color:#9fe3ff;font-weight:700}.hp-intel-card b{display:block;margin:6px 0 12px;font-size:1.05rem}
.hp-bars{display:flex;align-items:flex-end;gap:6px;height:60px}
.hp-bars i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--hp-aqua),var(--hp-sky));animation:hpBar 3s ease-in-out infinite alternate}
.hp-bars i:nth-child(1){height:35%}.hp-bars i:nth-child(2){height:55%;animation-delay:.3s}.hp-bars i:nth-child(3){height:45%;animation-delay:.6s}.hp-bars i:nth-child(4){height:75%;animation-delay:.9s}.hp-bars i:nth-child(5){height:60%;animation-delay:1.2s}.hp-bars i:nth-child(6){height:90%;animation-delay:1.5s}
@keyframes hpBar{to{transform:scaleY(.75);transform-origin:bottom}}
.hp-line{display:block;height:60px;background:linear-gradient(135deg,transparent 48%,var(--hp-aqua) 49%,var(--hp-aqua) 51%,transparent 52%) 0 0/50% 100% repeat-x;opacity:.8}
.hp-dots{display:block;height:46px;background:radial-gradient(circle,var(--hp-sky) 2px,transparent 3px) 0 0/16px 16px;opacity:.6}

/* process */
.hp-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s}
.hp-steps li{position:relative;padding:20px 16px;border-radius:20px;background:#fff;border:1px solid var(--hp-line);animation:hpIn .45s both}
.hp-steps li:nth-child(2){animation-delay:.06s}.hp-steps li:nth-child(3){animation-delay:.12s}.hp-steps li:nth-child(4){animation-delay:.18s}.hp-steps li:nth-child(5){animation-delay:.24s}
.hp-steps li::after{content:'';position:absolute;top:36px;inset-inline-end:-12px;width:12px;height:2px;background:var(--hp-sky)}
.hp-steps li:last-child::after{display:none}
.hp-steps span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--hp-blue),var(--hp-sky));color:#fff;font-weight:800}
.hp-steps h3{margin:12px 0 6px;font-size:1.02rem}.hp-steps p{margin:0;color:var(--hp-muted);font-size:.88rem;line-height:1.65}
.hp-capabilities{margin-top:26px;padding:24px;border-radius:24px;background:linear-gradient(180deg,#f3f9fd,#fff);border:1px solid var(--hp-line)}
.hp-capabilities h3{margin:0 0 14px}
.hp-cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hp-cap-grid article{padding:14px 16px;border-inline-start:3px solid var(--hp-sky);background:#fff;border-radius:12px}
.hp-cap-grid b{display:block;margin-bottom:4px}.hp-cap-grid p{margin:0;color:var(--hp-muted);font-size:.88rem;line-height:1.6}

/* why */
.hp-why-head{max-width:820px}
.hp-why-head h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:8px 0 12px}
.hp-why-head p{color:var(--hp-muted);line-height:1.8;font-size:1.04rem}
.hp-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.hp-why-grid article{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--hp-line);transition:transform .25s,box-shadow .25s}
.hp-why-grid article:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(7,80,173,.12)}
.hp-why-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#eaf4fb;color:var(--hp-blue);font-size:1.2rem}
.hp-why-grid h3{margin:12px 0 6px}.hp-why-grid p{margin:0;color:var(--hp-muted);line-height:1.65;font-size:.92rem}
.hp-why-promise{margin:22px 0 0;padding:18px 22px;border-radius:18px;background:linear-gradient(135deg,var(--hp-blue),var(--hp-sky));color:#fff;font-weight:700;font-size:1.05rem;text-align:center}

/* start */
.hp-start{display:block!important}
.hp-start-head{max-width:760px}
.hp-start-head h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.hp-start-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.hp-path{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;transition:transform .25s,background .25s}
.hp-path:hover{transform:translateY(-4px);background:rgba(10,168,239,.22)}
.hp-path:first-child{background:linear-gradient(135deg,var(--hp-sky),var(--hp-blue));border-color:transparent}
.hp-path span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);font-weight:800}
.hp-path b{font-size:1.15rem}.hp-path small{color:rgba(255,255,255,.82);line-height:1.6}
.hp-path em{margin-top:auto;padding-top:8px;font-style:normal;font-weight:800}
.hp-start-quick{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:start;padding:24px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.hp-start-contact h3{margin:0 0 8px;color:#fff}.hp-start-contact p{color:rgba(255,255,255,.78)}
.hp-start #quote-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.hp-start #quote-form .wide{grid-column:1/-1}

@media(max-width:1100px){.hp-col-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.hp-steps li::after{display:none}}
@media(max-width:900px){
 .hp-about,.hp-intel,.hp-start-quick{grid-template-columns:1fr}
 .hp-col-body{grid-template-columns:1fr}.hp-col-intro{min-height:180px}
 .hp-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}
 .hp-tile.t0,.hp-tile.t5{grid-column:span 2;grid-row:span 1}
 .hp-flow,.hp-why-grid,.hp-cap-grid,.hp-start-paths{grid-template-columns:1fr}
 .hp-market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hp-markets{position:static;margin-top:10px;background:var(--hp-navy)}
}
@media(max-width:620px){
 .hp-pillars{grid-template-columns:1fr}
 .hp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-stats div:nth-child(3){border:0}
 .hp-col-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hp-bento{grid-template-columns:1fr;grid-auto-rows:190px}.hp-tile.t0,.hp-tile.t5{grid-column:auto}
 .hp-tile .hp-tile-more{display:none}
 .hp-steps{grid-template-columns:1fr}
 .hp-start #quote-form{grid-template-columns:1fr}
 .hp-intel-panel{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.hp-tile img,.hp-col-media img,.hp-dem-card,.hp-steps li,.hp-bars i{animation:none!important;transition:none!important}}
/* dark sections: force own background over generic section styles */
.homepage-main .hp-intel{background:radial-gradient(circle at 85% 20%,rgba(10,168,239,.35),transparent 45%),linear-gradient(135deg,#021a3d,#03305f)!important;color:#fff!important}
.homepage-main .hp-intel .section-tag{color:#9fe3ff!important}
.homepage-main .hp-intel h2,.homepage-main .hp-intel h2 *{color:#fff!important;-webkit-text-fill-color:#fff}
.homepage-main .hp-start{background:radial-gradient(circle at 10% 0%,rgba(10,168,239,.3),transparent 45%),linear-gradient(160deg,#021a3d,#04356b)!important;color:#fff}
.homepage-main .hp-start .section-tag{color:#9fe3ff!important}
.homepage-main .hp-start h2,.homepage-main .hp-start h2 *{color:#fff!important;-webkit-text-fill-color:#fff}
.homepage-main .hp-start .hp-start-head p{color:rgba(255,255,255,.82)}
.homepage-main .hp-start #quote-form{padding:20px;border-radius:20px;background:#fff;color:var(--hp-ink)}
.homepage-main .hp-start .contact-links a{color:#9fe3ff}

/* Card headings sit beside their icon / number (owner, 2026-10-03) */
.hp-pillars article,.hp-flow article,.hp-steps li,.hp-why-grid article,.hp-path{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;align-content:start}
.hp-pillars article>:not(i):not(h3),.hp-flow article>:not(span):not(h3),.hp-steps li>:not(span):not(h3),.hp-why-grid article>:not(.hp-why-ico):not(h3),.hp-path>:not(span):not(b){grid-column:1/-1}
.hp-pillars h3,.hp-flow h3,.hp-steps h3,.hp-why-grid h3{margin:0;line-height:1.35}
.hp-pillars p,.hp-steps p,.hp-why-grid p{margin-top:12px}
.hp-flow p{margin:12px 0 8px}
.hp-flow span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--hp-blue),var(--hp-sky));color:#fff}
.hp-path{row-gap:8px}.hp-path small{margin-top:4px}
#demand.is-examples .hp-pulse{display:none}
/* selected products: automatic rotation between sectors */
#hp-col-tabs button{position:relative;overflow:hidden}
#hp-col-tabs button span{position:relative;z-index:1}
.hp-col-bar{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left;animation:hpColBar var(--col-dur,7000ms) linear forwards}
[dir=rtl] .hp-col-bar{transform-origin:right}
.hp-col-paused .hp-col-bar{animation-play-state:paused}
@keyframes hpColBar{to{transform:scaleX(1)}}
.hp-col-in{animation:hpColIn .5s ease both}
@keyframes hpColIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hp-col-in{animation:none}.hp-col-bar{display:none}}
