/* Corridor — Trade corridor — a rotating dot globe over deep teal, arcs from India to its markets, and a farm-to-air journey rail. Reference: unitedcarriers.com. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Manrope:wght@300;400;500;700&display=swap');
:root{--bg:#06252E;--surface:rgba(255,255,255,0.07);--ink:#EAF2ED;--muted:#9FB3AA;
--line:rgba(255,255,255,0.16);--brand:#5FD3A0;--accent:#E3B23C;--onBrand:#06221B;
--gold:#E3B23C;
--r:18px;--rs:12px;--dur:300ms;--ease:cubic-bezier(.22,.61,.36,1);
--fh:'Sora',Georgia,serif;--fb:'Manrope',system-ui,sans-serif;
--pad:clamp(28px,6vw,72px);}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);
font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--fh);line-height:1.1;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:600}
h3{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:600}
p{margin:0 0 1em;color:var(--muted);max-width:68ch}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.82);
border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--fh);font-weight:700;
letter-spacing:-.01em;text-decoration:none;font-size:1.05rem}
.brand img{height:38px;width:auto}
nav{margin-left:auto;display:flex;gap:clamp(12px,2vw,30px);flex-wrap:wrap}
nav a{text-decoration:none;color:var(--muted);font-size:.95rem;font-weight:500;
padding:6px 0;border-bottom:2px solid transparent;cursor:pointer;
transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
nav a:hover,nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
nav a:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* sections */
section{padding:var(--pad) 0}
.kicker{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
font-weight:700;margin-bottom:10px}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);max-width:60ch}
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{border-color:var(--accent)}
.card .body{padding:clamp(16px,2vw,24px)}
.card.txt{display:flex}
.card.txt .body{display:flex;flex-direction:column;justify-content:center;flex:1}
.card img{max-width:100%;width:auto;height:auto}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--rs);
background:var(--brand);color:var(--onBrand);text-decoration:none;font-weight:600;cursor:pointer;
border:2px solid var(--brand);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:transparent;color:var(--brand)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
/* footer */
footer{background:var(--surface);border-top:1px solid var(--line);padding:var(--pad) 0 28px;margin-top:var(--pad)}
footer .cols{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
footer h4{font-family:var(--fh);font-size:.95rem;margin:0 0 12px;letter-spacing:.04em}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px;color:var(--muted);font-size:.93rem}
footer a{text-decoration:none;color:var(--muted);cursor:pointer;transition:color var(--dur) var(--ease)}
footer a:hover{color:var(--accent)}
.legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
font-size:.85rem;color:var(--muted);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* reveal (disabled for instant/minimal themes and for reduced-motion users) */
.js .rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto} .rv{opacity:1;transform:none} *{animation:none!important;transition:none!important}}
.skip{position:absolute;left:0;top:0;z-index:100;background:var(--brand);color:var(--onBrand);
padding:11px 18px;text-decoration:none;font-weight:600;transform:translateY(-140%)}
.skip:focus{transform:translateY(0)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.navbtn{display:none;margin-left:auto;background:none;border:1px solid var(--line);
border-radius:var(--rs);width:44px;height:44px;cursor:pointer;padding:0;
align-items:center;justify-content:center;flex-direction:column;gap:5px}
.navbtn .bar{display:block;width:20px;height:2px;background:var(--ink)}
@media (max-width:640px){.hdr .wrap{min-height:62px;flex-wrap:wrap}
.navbtn{display:flex}
nav{display:none;width:100%;margin:0 0 10px;flex-direction:column;gap:0}
nav.open{display:flex}
nav a{min-height:44px;display:flex;align-items:center;padding:12px 2px;
border-bottom:1px solid var(--line)}}
.hero{position:relative;display:block;padding:clamp(26px,3.6vw,50px) 0 clamp(30px,4vw,58px)}
.hero .wrap{position:relative;z-index:2}
.hero h1{margin-top:0}
.hero .lead{max-width:62ch}

.card,.bx{position:relative}
/* Material depth. Grain lives on a FIXED, pointer-events:none pseudo-element -
   never a scrolling container. The ambient ramp sits at z-index:-1 so it paints
   above the body fill but beneath all content. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:300;
opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");background-size:160px 160px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
background:
radial-gradient(120% 70% at 50% -12%,color-mix(in srgb,var(--brand) var(--amb),transparent),transparent 62%),
radial-gradient(90% 55% at 100% 108%,color-mix(in srgb,var(--accent) var(--amb),transparent),transparent 60%)}
/* the worst void on every page is the hero-to-content run */
main{position:relative}
main::before{content:"";position:absolute;left:0;right:0;top:0;height:min(46vh,430px);
pointer-events:none;z-index:0;
background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 6%,transparent),transparent)}
main>section{z-index:1}
/* Kintsugi seam: one golden thread down the page gutter. Masked, not filled, so a
   single path takes --gold from each palette. Sits in the outer margin, so it can
   never collide with the row grounds or be clipped by .sbands{overflow:hidden}. */
main::after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none;z-index:2;
left:max(6px,calc((100% - 1272px)/2));
background:linear-gradient(180deg,transparent 0,var(--gold) 7%,var(--gold) 93%,transparent 100%);
opacity:.62;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='240'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M13 0 C9 34 17 52 12 86 C7 120 18 138 13 170 C8 202 15 220 13 240'/%3E%3Cpath d='M12 86 l-6 -11'/%3E%3Cpath d='M13 170 l7 -9'/%3E%3Cpath d='M12 44 l6 -8'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='86' r='2.2'/%3E%3Ccircle cx='13' cy='170' r='1.9'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='240'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M13 0 C9 34 17 52 12 86 C7 120 18 138 13 170 C8 202 15 220 13 240'/%3E%3Cpath d='M12 86 l-6 -11'/%3E%3Cpath d='M13 170 l7 -9'/%3E%3Cpath d='M12 44 l6 -8'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='86' r='2.2'/%3E%3Ccircle cx='13' cy='170' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
-webkit-mask-size:26px 240px;mask-size:26px 240px;
filter:drop-shadow(0 0 7px color-mix(in srgb,var(--gold) 38%,transparent))}
@media (max-width:1000px){main::after{display:none}}
@media (prefers-reduced-motion:reduce){main::after{animation:none!important}}
.btn{position:relative;overflow:hidden}
main>section{position:relative}
main>section:nth-of-type(even){background:var(--surface)}
main>section:nth-of-type(even)::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--brand) 0%,var(--accent) 60%,transparent 100%)}
.flogo{height:42px;width:auto;margin-bottom:12px}
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.panel-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,40px);align-items:center}
.hero-plate{margin:0;background:var(--surface);padding:14px;border:1px solid var(--line);
border-radius:var(--r)}
.hero-plate img{max-width:100%;width:auto;height:auto;display:block;margin:0 auto}
figure.mat{margin:0;background:var(--surface);padding:12px;border:1px solid var(--line);
border-radius:var(--rs)}
figure.mat img{max-width:100%;width:auto;height:auto;display:block;margin:0 auto}
.lead-fig{margin:24px 0 4px;max-width:820px}
#main,section[id],:target{scroll-margin-top:96px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.subs{margin:14px 0 0;display:grid;gap:9px}
.bx.sp6 .subs,.sp6 .subs{display:block;columns:2;column-gap:38px}
.bx.sp6 .subs dt,.sp6 .subs dt{break-inside:avoid;margin-top:9px}
.bx.sp6 .subs dd,.sp6 .subs dd{break-inside:avoid}
@media (max-width:760px){.bx.sp6 .subs,.sp6 .subs{columns:1}}
.subs dt{font-family:var(--fh);font-weight:700;color:var(--ink);font-size:.97rem;line-height:1.3}
.subs dd{margin:2px 0 0;color:var(--muted);font-size:.93rem;line-height:1.6;
padding-left:13px;border-left:2px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.dlist{border-top:1px solid var(--line);margin-top:26px}
.drow{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
gap:clamp(16px,3vw,44px);padding:clamp(18px,2.6vw,30px) 0;
border-bottom:1px solid var(--line);align-items:baseline}
.drow h3{margin:0}
.drow p{margin:0;color:var(--muted);max-width:62ch}
@media(max-width:720px){.drow{grid-template-columns:1fr;gap:6px}}
h1,h2,h3{text-wrap:balance}
.inum,.snum,.cnum,.idx{font-variant-numeric:tabular-nums}
@media(max-width:820px){.hero-split,.panel-split{grid-template-columns:1fr}}
.card{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.sec-title{position:relative}
.cgrid{display:grid;gap:clamp(16px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.intro-band{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,52px);align-items:center}
.intro-band img{max-width:100%;width:auto;height:auto;border-radius:var(--r);justify-self:center}
@media(max-width:780px){.intro-band{grid-template-columns:1fr}}
.mapwrap{position:relative;aspect-ratio:16/7;margin-top:clamp(20px,3vw,32px);
border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:620px){.mapwrap{aspect-ratio:4/3}}

body{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
background-size:26px 26px;background-attachment:fixed}
main>section:nth-of-type(even){background:
linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%),var(--surface)}
:root{--grain:.055;--amb:22%}

.prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;pointer-events:none;
background:linear-gradient(90deg,var(--brand),var(--accent))}
.card,.bx{--mx:50%;--my:0%}
.card::after,.bx::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
border-radius:inherit;transition:opacity .25s ease;
background:radial-gradient(260px circle at var(--mx) var(--my),
color-mix(in srgb,var(--accent) 20%,transparent),transparent 62%)}
.card:hover::after,.bx:hover::after{opacity:1}
.btn::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
transform:skewX(-18deg);pointer-events:none}
.btn:hover::before{animation:shine .7s ease}
@keyframes shine{to{left:135%}}
@media (prefers-reduced-motion:reduce){.btn:hover::before{animation:none}
.card::after,.bx::after{display:none}}
.rv{filter:blur(7px)}
.rv.in{filter:none;transition:opacity var(--dur) var(--ease),
transform var(--dur) var(--ease),filter var(--dur) var(--ease)}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:30px}
/* Cardamom: drifting aurora ribbon - slow vertical bloom */
main::after{-webkit-mask-image:none;mask-image:none;width:150px;opacity:.55;z-index:0;
left:max(0px,calc((100% - 1420px)/2));
background:
radial-gradient(58% 16% at 50% 18%,color-mix(in srgb,var(--brand) 60%,transparent),transparent 72%),
radial-gradient(48% 13% at 50% 58%,color-mix(in srgb,var(--accent) 50%,transparent),transparent 72%);
filter:blur(16px);animation:auroradrift 15s ease-in-out infinite alternate}
@keyframes auroradrift{from{transform:translateY(-30px)}to{transform:translateY(70px)}}
/* Bento background diversity: a multi-cell grid cannot be N identical cards. */
.bento>.bx:nth-child(4n+1){background:linear-gradient(150deg,
color-mix(in srgb,var(--brand) 18%,var(--surface)),var(--surface) 62%)}
.bento>.bx:nth-child(4n+3){background:linear-gradient(210deg,
color-mix(in srgb,var(--accent) 11%,var(--surface)),var(--surface) 60%)}
.bento>.bx{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 9%,transparent)}
.bento{align-items:start}
.bx{grid-column:span 2;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.bx.sp2{grid-column:span 2}.bx.sp3{grid-column:span 3}
.bx.sp4{grid-column:span 4}.bx.sp6{grid-column:span 6}
.bx img{max-width:100%;width:auto;height:auto}

.bxb{padding:clamp(15px,2vw,22px);display:flex;flex-direction:column;justify-content:center;flex:1}
.bx.nopic .bxb{min-height:152px}
.bxb h3{margin:0 0 8px}
.bxb p{margin:0;color:var(--muted);font-size:.97rem}
.lay-bento .cgrid{grid-template-columns:2fr 3fr}
.bx{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
.bx:hover{transform:translateY(-4px) scale(1.006);
box-shadow:0 18px 50px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb,var(--brand) 40%,transparent)}
.panel{box-shadow:0 24px 70px rgba(0,0,0,.34)}
.hero{--sh:0deg}
.hero::before,.hero::after{filter:blur(90px) hue-rotate(var(--sh))}
main>section:nth-of-type(odd)::after{content:"";position:absolute;inset:0;pointer-events:none;
opacity:.16;background:linear-gradient(104deg,transparent 42%,
color-mix(in srgb,var(--brand) 55%,transparent) 50%,transparent 58%)}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}
.bento .bx{grid-column:span 1}.bento .bx:nth-child(1){grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}
.bento .bx,.bento .bx:nth-child(1){grid-column:span 1}}

/* ---- Corridor: globe hero ---- */
.hero-globe{position:relative;overflow:hidden;padding:clamp(40px,6vw,86px) 0 clamp(30px,4vw,60px)}
.gwrap{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
gap:clamp(24px,4vw,60px);align-items:center}
.gstage{position:relative;display:grid;place-items:center;min-height:clamp(340px,52vw,760px);transform:translateX(clamp(0px,5vw,90px))}
.gstage canvas{width:min(100%,760px);height:auto;display:block;position:relative;z-index:1}
.gring{position:absolute;top:50%;left:50%;width:min(94%,720px);aspect-ratio:1/1;
transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
box-shadow:0 0 90px color-mix(in srgb,var(--brand) 22%,transparent) inset}
.gring::after{content:"";position:absolute;inset:-9%;border-radius:50%;
border:1px dashed color-mix(in srgb,var(--accent) 24%,transparent);
animation:gspin 46s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}
.gcopy h1{font-size:clamp(2.2rem,5.2vw,4rem)}
/* images integrate with the ground: no matte panel, no border, no tint.
   object-fit stays CONTAIN - cover would crop the client's photography. */
figure.mat,.hero-plate{background:none;padding:0;border:0;box-shadow:none}
figure.mat img,.hero-plate img{border-radius:var(--rs)}
.bento>.bx img{background:none}
/* Vision / Mission / Core Values are clipart on white: give them an
   intentional light card rather than a keyed-out rim. */
.bento>.bx img[src*="HSPREximVision"],
.bento>.bx img[src*="HSPREximMission"],
.bento>.bx img[src*="HSPREximCoreValues"]{
background:#F7F5F0;padding:14px;border-radius:var(--rs);
box-shadow:0 10px 30px -18px rgba(0,0,0,.55);object-fit:contain}
.brand img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
/* opaque header: at .82 alpha the tile copy scrolling beneath stays
   readable through the bar. Solid matches the composited look already. */
.hdr{background:#0A0A0A}
/* footer: logo beside the company name so that heading sits on the same
   baseline as Products / Company / Our Address */
.fbrand{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.fbrand .flogo{margin:-9px 0 0;flex:0 0 auto}
.fbrand h4{margin:0}
/* one line wherever the five-column grid runs; the size eases down so it fits
   the narrower column at ~1024 instead of wrapping */
@media (min-width:1000px){.fbrand h4{white-space:nowrap;
font-size:clamp(.80rem,1.08vw,.95rem)}}
/* .wrap's 1200px cap includes its padding, so the content box is 1120px -
   minmax(210px,1fr) fits only four columns and dropped the fifth to its own
   row. Explicit columns on wide screens; auto-fit still stacks on phones. */
@media (min-width:1000px){footer .cols{grid-template-columns:1.85fr 1fr 1fr 1.05fr 1.15fr}}
/* nowrap + a floor on the icon size: the row can never break to two lines,
   and stays at a 40px touch target wherever there is room for it. */
.socrow{display:flex;gap:clamp(6px,1.2vw,10px);flex-wrap:nowrap}
.soc{width:clamp(36px,3.2vw,40px);height:clamp(36px,3.2vw,40px);flex:0 0 auto;
border-radius:50%;display:grid;place-items:center;
background:color-mix(in srgb,#fff 8%,transparent);
border:1px solid color-mix(in srgb,#fff 14%,transparent);color:var(--ink);
transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
transform var(--dur) var(--ease)}
.soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
a.soc:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
a.soc:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.soc-off{opacity:.42;cursor:default}
/* Large displays: a fixed 1200px column left 4K ~31% filled. Step the
   container up; .lead keeps its 62ch cap so the measure stays readable. */
@media (min-width:1500px){.wrap{max-width:1380px}}
@media (min-width:1800px){.wrap{max-width:1560px}}
@media (min-width:2400px){.wrap{max-width:1900px}}
@media (min-width:3000px){.wrap{max-width:2400px}}
@media (min-width:3600px){.wrap{max-width:2800px}}
@media (min-width:2400px){html{font-size:17.5px}}
@media (min-width:3400px){html{font-size:19px}}
/* the enquiry form is a grid, so the button stretches full width; .btn is
   flex, where text-align is inert - the label needs justify-content. */
.btn{justify-content:center}
/* Ambient hero waves: flowing lines + expanding ripples, scoped to the top
   section (the reference runs it fixed across the whole viewport). */
.hero{overflow:hidden}
canvas.hwaves{position:absolute;inset:0;width:100%;height:100%;
z-index:0;pointer-events:none;opacity:.72}
.hero>.wrap{position:relative;z-index:2}
/* Scroller, re-skinned from Masala into Corridor's palette */
.ticker{position:relative;overflow:hidden;white-space:nowrap;padding:13px 0;
background:color-mix(in srgb,var(--brand) 8%,transparent);
border-top:1px solid color-mix(in srgb,var(--brand) 40%,transparent);
border-bottom:1px solid color-mix(in srgb,var(--brand) 40%,transparent)}
.ticker .run{display:inline-block;animation:mqv6 30s linear infinite}
.ticker span{display:inline-block;padding-right:46px;font-family:var(--fh);
font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;
color:color-mix(in srgb,var(--brand) 86%,white)}
.tkbtn{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;
font:inherit;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
background:var(--bg);color:var(--ink);border:1px solid var(--line);
border-radius:var(--rs);padding:10px 15px;min-height:44px;cursor:pointer;
transition:border-color .25s ease,color .25s ease}
.tkbtn:hover{border-color:var(--accent);color:var(--accent)}
.ticker.paused .run,.ticker:hover .run,.ticker:focus-within .run{animation-play-state:paused}
@keyframes mqv6{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .run{animation:none}
canvas.hwaves{display:none}}
.flogo{height:46px}
/* Home portfolio tiles are links to their Products counterpart. The stretched
   ::before makes the whole tile clickable with ONE link - no nested anchors. */
.bx.linked{position:relative}
.tile-link{display:inline-flex;align-items:center;gap:9px;margin-top:15px;
font-family:var(--fh);font-weight:600;font-size:.95rem;color:var(--accent);
text-decoration:none;letter-spacing:.01em}
.tile-link::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.tile-link::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .3s ease}
.bx.linked:hover{border-color:color-mix(in srgb,var(--accent) 52%,transparent);
transform:translateY(-3px)}
.bx.linked{transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s ease}
.bx.linked:hover .tile-link::after{transform:rotate(-45deg) translate(3px,3px)}
.tile-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
/* deep-link targets must clear the sticky header, and say where you landed */
.bento>.bx[id]{scroll-margin-top:clamp(92px,11vh,112px)}
.bento>.bx[id]:target{outline:calc(2px + 1mm) solid color-mix(in srgb,var(--accent) 75%,transparent);
outline-offset:5px;opacity:1}
@media (prefers-reduced-motion:reduce){.bx.linked,.tile-link::after{transition:none}
.bx.linked:hover{transform:none}}
/* Curated Product Portfolio: lead photo spans the whole grid, every tile equal */
.lead-fig{max-width:none;margin:26px 0 6px}
.lead-fig img{width:100%;height:auto}
@media (min-width:901px){
.bento>.bx.sp2,.bento>.bx.sp3,.bento>.bx.sp4,.bento>.bx.sp6{grid-column:span 2}
}
.bento>.bx img{width:100%;height:clamp(150px,15vw,208px);object-fit:contain;
background:none}
.bento>.bx .bxb{min-height:0}
/* Bento bodies stretch now, and .bxb centres its content - that dragged the
   headings down 145px on the short tiles. Text flows from the top instead. */
.bento>.bx>.bxb{justify-content:flex-start}
/* About borrows the band arrangement. v3's spice hatch and diagonal stripe are
   that theme's identity and are deliberately NOT carried over. */
.sbands{margin-top:26px;border-top:2px solid color-mix(in srgb,var(--brand) 70%,transparent);
position:relative}
.sbands>.sband:nth-child(odd){background:linear-gradient(180deg,
color-mix(in srgb,var(--brand) 7%,transparent),transparent 62%),
linear-gradient(90deg,color-mix(in srgb,var(--accent) 4%,transparent),transparent 40%)}
.sbands>.sband:nth-child(odd)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--brand),transparent 70%)}
.sbands>.sband::after{content:"";position:absolute;right:clamp(12px,3vw,46px);top:50%;
transform:translateY(-50%);width:clamp(60px,9vw,128px);height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand) 42%,transparent))}
.sband{border-bottom:1px solid var(--line);position:relative;transition:background .18s ease}
.sband:hover{background:color-mix(in srgb,var(--brand) 6%,transparent)}
.sbwrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;
gap:clamp(16px,3vw,36px);padding:clamp(22px,3.4vw,40px) 0;align-items:center}
.sbwrap.solo{grid-template-columns:minmax(0,1fr)}
/* numerals dropped - and the column they sat in, or every band keeps a gutter */
.snum{display:none}
.sbtx h3{margin:0 0 9px;font-size:clamp(1.25rem,3vw,2.05rem);line-height:1.12}
.sbtx p{margin:0;color:var(--muted);max-width:80ch}
/* a band is 1103px wide - one column here runs ~150 characters per line */
.sbtx .subs{display:block;columns:2;column-gap:44px}
.sbtx .subs dt{margin-top:10px}
.sbtx .subs dt:first-of-type{margin-top:0}
@media(max-width:860px){.sbtx .subs{columns:1}}
.sbpic img{max-width:100%;width:auto;height:auto;border-radius:var(--rs)}
@media(max-width:780px){.sbwrap{grid-template-columns:minmax(0,1fr)}.sbpic{grid-column:1}}
/* Tiles fill their row so the bottoms align - .bento ships align-items:start,
   which left ragged gaps of up to 341px under the shorter cards. */
.bento{align-items:stretch}
.bento>.bx{display:flex;flex-direction:column}
.bento>.bx>.bxb{flex:1 1 auto;display:flex;flex-direction:column}
/* Home only (its tiles are links): identical rows, CTA pinned to the bottom
   edge so all six "Know More" sit on one line. */
.bento:has(.bx.linked){grid-auto-rows:1fr}
.bento>.bx.linked>.bxb .tile-link{margin-top:auto}
/* Product Focus detail now lives in the category tiles. At tile width a
   two-column list collapses to ~19 characters per line, so tiles get a
   single column; the two text-only boxes keep the full row and two cols. */
/* a term must never be stranded in one column with its description in the next */
.subs>div,.subs dt{break-inside:avoid}
.subs dt{break-after:avoid;page-break-after:avoid}
.subs dd{break-before:avoid;page-break-before:avoid}
.bento>.bx:not(.nopic) .subs{columns:1;column-gap:0}
.bento>.bx:not(.nopic) .subs dt{margin-top:11px}
.bento>.bx:not(.nopic) .subs dt:first-of-type{margin-top:0}
@media (min-width:901px){.bento>.bx.sp6.nopic{grid-column:span 6}}
/* ---- Corridor: farm -> mill -> port -> air journey rail ---- */
.journey{position:relative;padding:clamp(30px,5vw,64px) 0}
.jrail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);
margin-top:clamp(26px,3vw,44px);padding-top:56px}
.jrail::before{content:"";position:absolute;left:6%;right:6%;top:102px;height:2px;
background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--brand) 55%,transparent) 0 10px,transparent 10px 20px)}
.jrail::after{content:"";position:absolute;left:6%;top:102px;height:2px;width:var(--jp,0%);
background:linear-gradient(90deg,var(--brand),var(--accent));
box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent);
transition:width 1.1s cubic-bezier(.22,.61,.36,1)}
.jstop{position:relative;text-align:center;padding-top:0}
.jicon{width:92px;height:92px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--brand) 22%,transparent),var(--surface));
border:1px solid var(--line);position:relative;z-index:1;
transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease}
.jstop:hover .jicon{transform:translateY(-6px);box-shadow:0 16px 34px -18px var(--brand)}
/* scroll-told sequence: each stage lights as the carrier reaches it */
.jstop{opacity:.42;transform:translateY(10px);
transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.jstop.on{opacity:1;transform:none}
.jstop.on .jicon{border-color:color-mix(in srgb,var(--accent) 60%,transparent);
box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 10%,transparent),
0 18px 38px -20px var(--brand)}
.jstop.on .jicon svg{stroke:var(--accent)}
.jstop.on .jn{color:var(--accent)}
.jcar{position:absolute;top:2px;left:6%;width:68px;height:44px;z-index:3;pointer-events:none;
transform:translateX(var(--jpx,0px));
transition:transform 1.4s cubic-bezier(.22,.61,.36,1);will-change:transform}
.jcar::before{content:"";position:absolute;inset:-6px -4px;border-radius:999px;
background:color-mix(in srgb,var(--bg) 88%,#000);
border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
box-shadow:0 0 20px color-mix(in srgb,var(--accent) 38%,transparent)}
.jcar .m{position:absolute;inset:0;width:68px;height:44px;stroke:var(--accent);fill:none;
stroke-width:2.1;opacity:0;transform:scale(.72) translateY(4px);
transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .42s cubic-bezier(.22,.61,.36,1);
filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 60%,transparent))}
.jcar[data-m="1"] .m1,.jcar[data-m="2"] .m2,.jcar[data-m="3"] .m3{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.jstop{opacity:1;transform:none}
.jcar{transition:none}}
.jicon svg{width:44px;height:44px;stroke:var(--brand);fill:none;stroke-width:1.6}
.jstop h3{margin:0 0 6px;font-size:clamp(.98rem,1.5vw,1.14rem)}
.jstop p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.jstop .jn{display:block;font-family:var(--fh);font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);margin-bottom:8px}
@media (max-width:860px){.gwrap{grid-template-columns:1fr}
.jrail{grid-template-columns:repeat(2,1fr);row-gap:30px}
.jrail::before,.jrail::after{display:none}}