/* v3 layer: loaded last. Fixes from review round 2. */
:root{--rest:#E4D4C6}

/* buttons: fill grows from where the cursor enters; the offset shape underneath goes away while filled */
.rbtn::before{transition:opacity .25s var(--ease)}
.rbtn:hover::before,.rbtn:focus-visible::before{opacity:0}
.rbtn .rc{left:var(--mx,0%);top:var(--my,50%);width:260%}
.rbtn.ink{--bc:var(--ink)}

/* transition pane wears the catalogue pattern of the destination */
.pane{background:var(--rest) center/cover no-repeat}
html[data-pane=corn] .pane{background-color:#FC5340;background-image:url(pat/pane-corn.webp)}
html[data-pane=corn-confection] .pane{background-color:#6A4EA1;background-image:url(pat/pane-corn-confection.webp)}
html[data-pane=sunflower] .pane{background-color:#FDAF19;background-image:url(pat/pane-sunflower.webp)}
html[data-pane=sunflower-confection] .pane{background-color:#1A7277;background-image:url(pat/pane-sunflower-confection.webp)}
html[data-pane=nutrition] .pane{background-color:#3953A4;background-image:url(pat/pane-nutrition.webp);background-size:100% auto;background-repeat:repeat-y}
html[data-pane=protection] .pane{background-color:#C01A86;background-image:url(pat/pane-protection.webp);background-size:100% auto;background-repeat:repeat-y}
.patt-nutrition{background-image:url(pat/pane-nutrition.webp);background-size:100% auto;background-repeat:repeat-y}
.patt-protection{background-image:url(pat/pane-protection.webp);background-size:100% auto;background-repeat:repeat-y}

/* landing: video on top with the tagline moving left */
.vtop{height:min(78vh,760px);min-height:380px}
.mq{position:absolute;left:0;right:0;bottom:clamp(14px,3vw,40px);overflow:hidden;white-space:nowrap}
.mq .track{display:inline-flex;align-items:center;animation:mq 38s linear infinite;will-change:transform}
.mq span{font:400 clamp(60px,15vw,270px)/.9 var(--mono);text-transform:uppercase;letter-spacing:-.045em;padding:0 .18em}
.mq i{width:.5em;height:.5em;border:2px solid #fff;border-radius:50%;font-size:clamp(40px,8vw,140px);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}
body.paused .mq .track{animation-play-state:paused}

/* bag slider under the video */
.rhero{padding:clamp(40px,5vw,80px) 0 clamp(30px,4vw,60px)}
.rgrid{margin-top:0;align-items:center}
.rhero .left h2{font-size:clamp(26px,3.3vw,56px);font-weight:400;margin-bottom:14px}
.rhero .bags{max-height:66vh}
.rhero .right{min-height:300px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.rhero .hs{top:50%;inset:auto 0 auto 0;top:calc(50% - 90px)}
.rhero .ctrl{left:0;right:0;justify-content:space-between;align-items:center;gap:18px}
.dashes{display:flex;gap:10px;align-items:center;flex:1}
.dash{position:relative;width:18px;height:22px;background:none;border:0;padding:0;cursor:pointer;transition:width .4s var(--ease)}
.dash::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink-2)}
.dash i{position:absolute;left:0;top:calc(50% - 1.5px);height:3px;width:0;background:var(--ink)}
.dash.on{width:46px}
.dash.on i{animation:dash 5.5s linear forwards}
@keyframes dash{to{width:100%}}
.rhero:hover .dash.on i{animation-play-state:paused}
.arrows{display:flex;gap:8px}

/* cards: darker beige at rest with the right line motif; hover tilts left, fills with colour, pieces fall */
.card .box{background:var(--rest);transition:background-color .35s var(--ease),transform .5s var(--ease)}
.card .lines{inset:0;opacity:.9;background-size:cover;background-position:center}
.card:hover .box,.card:focus-visible .box{background:var(--t);transform:rotate(-3deg)}
.pcs{background:none;opacity:1}
.pc{transition:none;transform:translateY(-460%) rotate(calc(var(--r) - 35deg))}
.card:hover .pc,.card:focus-visible .pc{transition:none;transform:rotate(var(--r));animation:fall .8s cubic-bezier(.5,0,.85,.6) both;animation-delay:var(--d)}
@keyframes fall{0%{transform:translateY(-460%) rotate(calc(var(--r) - 35deg))}70%{transform:translateY(0) rotate(var(--r))}84%{transform:translateY(-5%) rotate(calc(var(--r) + 4deg))}100%{transform:translateY(0) rotate(var(--r))}}
@media (hover:none){.card .box{background:var(--t)}}
.vstage{background:var(--t)}

/* product page: larger spec icons */
.vspecs{gap:18px}.vspecs img{width:72px;height:72px}
.vspecs b{font-size:clamp(17px,1.4vw,22px)}

/* no green bands: plain closing block */
.cta3{padding-bottom:clamp(50px,7vw,100px)}
.cta3 .in{position:relative;text-align:center;padding:clamp(50px,7vw,110px) 0 0;display:grid;justify-items:center;gap:18px}
.cta3 p{max-width:44ch;color:var(--ink-2)}
.cta3 .deco{position:absolute;top:30%;width:min(16vw,190px);aspect-ratio:1/1.1;background:url(pat/lines-corn.svg) center/260% no-repeat;filter:invert(1);opacity:.1;pointer-events:none}
.cta3 .deco.l{left:0}.cta3 .deco.r{right:0;background-image:url(pat/lines-sunflower.svg)}
@media (max-width:700px){.cta3 .deco{display:none}}
.lp{background:var(--canvas);color:var(--ink);border-left:1px solid var(--ink)}
.lp .top button{color:var(--ink)}
.hex{display:none}

/* footer, symmetrical around the logo */
.f3 .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,50px)}
.f3 .cols>div:nth-child(4),.f3 .cols>div:nth-child(5){text-align:right}
.f3 .logo{justify-self:center;padding:0 clamp(10px,3vw,60px)}
.f3 li{line-height:1.9;color:var(--ink-2)}.f3 li a{color:var(--ink-2)}.f3 li a:hover{color:var(--ink)}
@media (max-width:900px){.f3 .cols{grid-template-columns:1fr 1fr}.f3 .cols>div:nth-child(4),.f3 .cols>div:nth-child(5){text-align:left}.f3 .logo{grid-column:1/-1;order:-1;justify-self:start;padding:0}}

/* crop pages: category tabs */
.tabs{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.6vw,40px);border-bottom:1px solid var(--line-strong);margin-bottom:clamp(24px,3vw,40px)}
.tab{background:none;border:0;padding:14px 0;font:500 clamp(15px,1.3vw,19px)/1.2 var(--sans);text-transform:uppercase;color:var(--ink-2);cursor:pointer;position:relative;transition:color .2s var(--ease)}
.tab sup{font:400 11px var(--mono);margin-left:4px}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tab.on,.tab:hover{color:var(--ink)}.tab.on::after{transform:scaleX(1)}
.tabpanel[hidden]{display:none}
@media (pointer:coarse){.tab{min-height:44px}}

/* contact page */
.cbig{font-size:clamp(34px,5.4vw,86px);font-weight:400;max-width:16ch}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.maps{display:grid;gap:20px}
.map{border:1px solid var(--line);position:relative;background:var(--canvas);display:flex;align-items:center;justify-content:center;min-height:220px;overflow:hidden}
.map figcaption{position:absolute;left:16px;top:14px;font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;z-index:1;background:var(--canvas);padding-right:8px}
.map img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fpanel{background:var(--panel);padding:clamp(20px,3vw,44px)}
.fpanel .fi{font:400 clamp(16px,1.4vw,20px)/1.45 var(--mono);margin-bottom:12px}
form.cf.dark{margin-top:22px}
form.cf.dark input,form.cf.dark select,form.cf.dark textarea{color:var(--ink);border:1px solid var(--ink-2);padding:11px 12px;background:var(--panel)}
form.cf.dark input:focus-visible,form.cf.dark select:focus-visible,form.cf.dark textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
form.cf.dark label{font:400 12px var(--mono);letter-spacing:.04em}
form.cf.dark .note{color:var(--ink-2)}
@media (max-width:900px){.cgrid{grid-template-columns:1fr}}
.locs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.loc{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}
.loc .ph{aspect-ratio:16/10;background:var(--canvas);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.loc .ph img{width:100%;height:100%;object-fit:cover}
.loc .pin{width:26px;height:26px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);position:relative}
.loc .pin::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--canvas)}
.loc .pl{font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.loc .tx{padding:18px 20px 22px;display:grid;gap:10px}
.loc h3{font:500 clamp(17px,1.5vw,21px)/1.2 var(--sans);text-transform:uppercase}
.loc p{font-size:15px;color:var(--ink-2)}.loc a{color:var(--ink)}
@media (max-width:860px){.locs{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.mq .track{animation:none}.dash.on i{animation:none;width:100%}.card:hover .pc{animation:none}.card:hover .box{transform:none}}

/* coloured page tops use .hero only so the header logo turns white; they keep their natural height */
.hero.cband{height:auto}

/* round 3: lighter rest colour, simulated falling pieces */
:root{--rest:#FFE9D7}
.pcs.phys .pc{left:0;top:0;animation:none!important;transition:none;will-change:transform}
.card .pcs.phys{opacity:0;transition:opacity .2s var(--ease)}
.card:hover .pcs.phys,.card:focus-visible .pcs.phys{opacity:1}
.card:hover .lines,.card:focus-visible .lines{opacity:0}
/* without the simulation (touch, reduced motion, no JS) pieces sit in a resting stack */
@media (hover:none){.card .pc{transform:rotate(var(--r))}}

/* round 4: no outlines around the card rectangle or the pieces */
.card .box,.vstage{border:0}
.pc{stroke:none}

/* round 5: rounded card rectangle, as on the Agrumea cards */
.card .box,.vstage{border-radius:18px}

/* round 6: pane patterns are high-resolution mirrored tiles, repeated small */
html[data-pane] .pane{background-repeat:repeat;background-position:center top;background-size:1100px auto}
html[data-pane=nutrition] .pane,html[data-pane=protection] .pane{background-size:1500px auto;background-repeat:repeat}
.patt-nutrition,.patt-protection{background-size:1500px auto;background-repeat:repeat}

/* round 7: seed panes use the seamless repeat cut from the bag artwork, drawn small and sharp */
html[data-pane=corn] .pane,html[data-pane=corn-confection] .pane{background-size:620px auto;background-repeat:repeat}
html[data-pane=sunflower] .pane,html[data-pane=sunflower-confection] .pane{background-size:465px auto;background-repeat:repeat}
/* cards: no line motif at rest */
.card .lines{display:none}

/* ---- round 8 ---- */
/* transition pane: smaller repeat, so the pattern reads finer and sharper */
html[data-pane=corn] .pane,html[data-pane=corn-confection] .pane{background-size:340px auto}
html[data-pane=sunflower] .pane,html[data-pane=sunflower-confection] .pane{background-size:255px auto}
html[data-pane=nutrition] .pane,html[data-pane=protection] .pane,.patt-nutrition,.patt-protection{background-size:760px auto}
/* buttons: the fill takes its time */
.rbtn .rc{transition:transform 1.5s cubic-bezier(.22,.61,.36,1)}
.rbtn .rl{transition:color .7s var(--ease) .2s}
.rbtn::before{transition:opacity .6s var(--ease) .3s}
.rbtn.sm{font-size:12px}.rbtn.sm .rl{padding:7px 12px}
/* tags in the button style: crop in its family colour, use in the family tint, "new" as an outline */
.rtags{display:flex;gap:12px;flex-wrap:wrap}
.rtag{position:relative;display:inline-block;padding:0 4px 4px 0;font:700 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.02em;color:var(--tc,var(--ink))}
.rtag::before{content:"";position:absolute;left:4px;top:4px;right:0;bottom:0;border:1px solid var(--tb,var(--ink));background:var(--canvas)}
.rtag span{position:relative;display:block;padding:8px 11px;border:1px solid var(--tb,var(--ink));background:var(--tf,var(--canvas))}
/* variety page: larger spec icons; text and buttons sit clear of the coloured box; buttons hug their label */
.vspecs{gap:20px}.vspecs li{gap:18px}.vspecs img{width:96px;height:96px}
.vgrid{column-gap:clamp(48px,6vw,104px)}
.vstage{left:-7%;right:-7%}
.vbtns{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media (max-width:900px){.vspecs img{width:72px;height:72px}}
/* portfolio: black and white in-field photos that change; the button reacts only to its own hover */
.pfc .ph.slides img{top:0;height:100%;opacity:0;filter:grayscale(1) contrast(1.06);transition:opacity 1.4s var(--ease),scale .9s var(--ease)}
.pfc .ph.slides img.on{opacity:1}
/* contact: maps without doubled frame; locations as tall black and white photos */
.map{padding:clamp(34px,4vw,56px) clamp(14px,2vw,28px) clamp(14px,2vw,28px)}
.map figcaption{background:none}
.loc .ph{aspect-ratio:4/5}
.loc .ph img{transition:scale 1.2s var(--ease)}.loc:hover .ph img{scale:1.03}
/* catalogue cover graphics on empty paper space */
main{overflow-x:clip}
.sec>.wrap,.page-top>.wrap,.cta3 .in{position:relative}
.dk{position:absolute;display:block;pointer-events:none;background:center/contain no-repeat;filter:invert(1);opacity:.1;z-index:0}
.dk-corn{background-image:url(pat/deco-corn.svg);aspect-ratio:257/249}
.dk-sun{background-image:url(pat/deco-sunflower.svg);aspect-ratio:222/336}
.dk-chem{background-image:url(pat/deco-chem.svg);aspect-ratio:265/250}
.sec>.wrap>:not(.dk),.page-top>.wrap>:not(.dk),.cta3 .in>:not(.dk){position:relative;z-index:1}
.dkrow{display:flex;align-items:center;gap:clamp(20px,4vw,60px);margin-top:50px}.dkrow .note-box{flex:1;margin:0}.dkrow .dk{flex:none}
@media (max-width:700px){.dk{display:none}}
/* ---- about page ---- */
.abbig{font-size:clamp(44px,19.2vw,380px);line-height:.86;letter-spacing:-.035em;white-space:nowrap;text-transform:uppercase;font-weight:400}
.abtop{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,3vw,50px);align-items:end;margin-top:clamp(-30px,-1.6vw,-8px)}
.abtop .l{position:relative;display:grid;gap:22px;justify-items:start;padding-bottom:6px}
.abtop .l>:not(.dk){position:relative;z-index:1}
.abtop .ph{aspect-ratio:1600/860;overflow:hidden}.abtop .ph img{width:100%;height:100%;object-fit:cover}
.abstate{position:relative;margin-top:clamp(50px,7vw,110px);display:grid;gap:clamp(24px,4vw,56px);padding-bottom:clamp(40px,6vw,90px)}
.abstate .h-m{max-width:26em;text-transform:uppercase}
.abstate .sig{justify-self:end;text-align:right;font:500 13px/1.5 var(--sans);text-transform:uppercase;max-width:30ch}
.abstate .sig b{display:block;margin-top:10px;color:#8FAE1B;font-size:16px;letter-spacing:.04em}
.absplit{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);background:var(--panel);margin-bottom:12px}
.absplit.flip{grid-template-columns:minmax(0,7.8fr) minmax(0,4.2fr)}.absplit.flip .ph{order:-1}
.absplit .txt{padding:clamp(24px,3.4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.absplit .txt p{font-size:clamp(15px,1.1vw,17px);max-width:44ch}
.absplit .txt .eyebrow{font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.absplit .txt .h-m{text-transform:uppercase;margin-bottom:6px;font-size:clamp(22px,2.2vw,32px)}
.absplit .who b{display:block;text-transform:uppercase;font-weight:500}.absplit .who span{color:var(--ink-2);font-size:14px}
.absplit .ph{position:relative;min-height:clamp(260px,32vw,470px);overflow:hidden}
.absplit .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.absplit.pres .ph{background:#fff}.absplit.pres .ph img{object-position:50% 20%}
.abdo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.abdo article{display:flex;flex-direction:column}
.abdo .ph{aspect-ratio:1312/756;overflow:hidden}.abdo .ph img{width:100%;height:100%;object-fit:cover}
.abdo .bx{flex:1;background:var(--panel);border:1px solid var(--line);border-top:0;padding:20px 20px 30px}
.abdo h3{font:500 clamp(18px,1.6vw,23px)/1.2 var(--sans);text-transform:uppercase;margin-bottom:10px}
.abdo .bx p{font-size:15px}
.abdo .ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font:500 13px var(--sans);text-transform:uppercase}
.abvalues{background-size:cover;background-position:center;color:#fff;padding:clamp(50px,7vw,110px) 0 clamp(60px,9vw,140px)}
.abvalues h2{margin-bottom:clamp(26px,4vw,56px)}
.abvalues .vals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.abvalues .vals div{border-left:1px solid rgba(255,255,255,.45);padding:0 18px}
.abvalues h3{font:500 15px/1.3 var(--sans);text-transform:uppercase;margin-bottom:10px}
.abvalues p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.88)}
.abresp{position:relative;padding-bottom:clamp(70px,9vw,130px)}
.abresp img{width:100%;aspect-ratio:4034/1569;object-fit:cover;display:block}
.abresp .bx{position:absolute;left:3.5%;right:3.5%;bottom:0;background:var(--panel);padding:clamp(22px,3vw,44px) clamp(20px,8vw,150px);text-align:center;display:grid;gap:12px}
.abresp h2{font-size:clamp(18px,1.9vw,26px);text-transform:uppercase;font-weight:400}
.abresp p{font-size:clamp(14px,1.05vw,16px)}
.abwhere{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr);gap:clamp(20px,3vw,50px);align-items:start}
.abwhere img{width:100%;height:auto;mix-blend-mode:multiply}
.abwhere .sub{margin-top:18px;font:500 13px var(--sans);text-transform:uppercase}
.abwhere .stats{display:flex;gap:clamp(18px,2.4vw,40px);margin-top:26px}
.abwhere .stats b{display:block;font-size:clamp(24px,2.4vw,34px);font-weight:400}.abwhere .stats span{font:500 11px var(--sans);text-transform:uppercase;color:var(--ink-2)}
.abwhere .legend{margin-top:clamp(30px,5vw,80px);display:grid;gap:8px;font-size:14px}
.abwhere .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:12px}
.abmk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,30px);margin-top:clamp(26px,4vw,50px)}
.abmk>div{border-top:1px solid var(--ink);padding-top:12px}
.abmk h3{font:600 13px var(--sans);text-transform:uppercase}.abmk .st{font:500 11px var(--sans);text-transform:uppercase;color:var(--ink-2);margin:2px 0 12px}
.abmk li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:4px 0}.abmk em{font-style:normal;font-size:12px;color:var(--ink-2);text-align:right}
.abteam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.abteam article{background:var(--panel);display:flex;flex-direction:column}
.abteam .ph{aspect-ratio:1297/1253;background:#E9E3DE;display:flex;align-items:center;justify-content:center;overflow:hidden}
.abteam .ph img{width:100%;height:100%;object-fit:cover}.abteam .ph span{font-size:clamp(40px,5vw,72px);color:rgba(19,19,19,.28);letter-spacing:.04em}
.abteam .bx{padding:18px 20px 28px;display:grid;gap:8px}
.abteam h3{font-size:clamp(18px,1.6vw,22px);font-weight:400;text-transform:uppercase}.abteam .role{font-size:13px;color:var(--ink-2)}.abteam .bx p:last-child{font-size:14.5px;margin-top:8px}
.abfind{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.abfind .bx{background:var(--panel);padding:clamp(24px,3.4vw,56px)}
.abfind .h-m{text-transform:uppercase;margin-bottom:26px}
.abfind h3{font:600 14px var(--sans);text-transform:uppercase;margin:20px 0 6px}.abfind p{font-size:14.5px}.abfind a{color:var(--ink)}
.abfind .map{min-height:300px}
@media (max-width:900px){
  .abtop,.absplit,.absplit.flip,.abwhere,.abfind{grid-template-columns:1fr}.absplit .ph,.absplit.flip .ph{order:-1}
  .abdo,.abteam{grid-template-columns:1fr}.abvalues .vals{grid-template-columns:1fr 1fr;row-gap:26px}.abmk{grid-template-columns:1fr 1fr}
  .abresp{padding-bottom:0}.abresp .bx{position:static;padding:22px 18px}.abstate .sig{justify-self:start;text-align:left}
}
/* maps fill their frame edge to edge, so there is one border and no inner box */
.map{padding:0;min-height:0;display:block}.map img{display:block;width:100%;height:auto;object-fit:cover;mix-blend-mode:normal}
.abfind .map{min-height:0;align-self:stretch;display:flex}.abfind .map img{height:100%}
.abfind .map{background:rgb(252,245,243);align-items:center}.abfind .map img{height:auto;object-fit:contain}
@media (max-width:900px){.abtop{margin-top:18px}}
/* header: category menus under Corn and Sunflower */
.navi{position:relative}
.navi .sub{position:absolute;left:-18px;top:100%;padding-top:16px;opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .25s var(--ease),translate .25s var(--ease),visibility 0s .25s}
.navi:hover .sub,.navi:focus-within .sub{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.navi .in{background:var(--canvas);color:var(--ink);border:1px solid var(--ink);box-shadow:5px 5px 0 -1px var(--canvas),5px 5px 0 0 var(--ink);padding:8px 0;min-width:230px;display:grid}
.hdr .navi .in a{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:14px;white-space:nowrap}
.hdr .navi .in a::after{display:none}.hdr .navi .in a:hover{background:rgba(19,19,19,.06)}
.navi .in i{width:8px;height:8px;border-radius:50%;flex:none}
.tabs{scroll-margin-top:90px}
/* "new" badge on cards: square corners with the offset shadow shape, like the buttons */
.badge.rtag{position:absolute;top:14px;left:14px;padding:0 4px 4px 0;border:0;border-radius:0;background:none;font:700 12px/1 var(--sans)}
.badge.rtag::before{background:var(--canvas)}
/* the shadow shape under a button disappears at once on hover; only the fill is slow */
.rbtn::before{transition:opacity .25s var(--ease)}
.rbtn:hover::before,.rbtn:focus-visible::before{transition:none;opacity:0}
/* ---- round 9 ---- */
/* language menu in the header */
.langm .lang{display:flex;align-items:center;gap:8px;background:none;color:inherit;cursor:pointer}
.langm .car{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .25s var(--ease),translate .25s var(--ease)}
.langm:hover .car,.langm.open .car{rotate:225deg;translate:0 2px}
.langm .sub{left:auto;right:0}.langm .in{min-width:170px}
.langm.open .sub{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.hdr .navi .in a[aria-current]{font-weight:700}
/* cover graphics: larger, complete shapes that drift in from the page edge */
.dk{opacity:.13;will-change:transform}
.dk-sun{aspect-ratio:235/395}

/* ---- round 10: catalogues on the home page ---- */
.cathint{justify-self:end;text-align:right;font:500 13px/1.5 var(--sans);max-width:30ch}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--panel)}
.cat .cstage{position:relative;background:#B9B3B0;display:grid;place-items:center;padding:clamp(22px,3vw,44px) 0;perspective:1100px;overflow:hidden;min-height:clamp(260px,26vw,400px)}
.cat .cstage::after{content:"";position:absolute;left:50%;bottom:7%;width:52%;height:16px;translate:-50% 0;border-radius:50%;background:rgba(19,19,19,.28);filter:blur(10px)}
.book{position:relative;z-index:1;width:min(46%,210px);aspect-ratio:595/842;transform-style:preserve-3d;transform:rotateY(var(--ry,-26deg));will-change:transform;--th:12px}
.book img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.book .f{transform:translateZ(calc(var(--th)/2))}
.book .b{transform:rotateY(180deg) translateZ(calc(var(--th)/2))}
.book .sp,.book .pg{position:absolute;top:0;height:100%;width:var(--th);display:block}
.book .sp{left:calc(var(--th)/-2);transform:rotateY(90deg);background:#131313}
.book .pg{right:calc(var(--th)/-2);transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#fff 0 1px,#e2ddd9 1px 2px)}
.cat .tx{padding:clamp(18px,2.4vw,36px);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cat h3{font:500 clamp(18px,1.6vw,23px)/1.2 var(--sans);text-transform:uppercase}
.cat .fm{font:500 12px var(--sans);text-transform:uppercase;color:var(--ink-2)}
.cat .tx>p:not(.fm){font-size:14.5px;color:var(--ink-2);max-width:34ch}
.cat .lgs{display:flex;gap:8px;margin-top:auto;padding-top:18px}
.cat .lg{font:700 12px/1 var(--sans);padding:8px 11px;border:1px solid var(--ink);background:var(--canvas);color:var(--ink);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.cat .lg.on{background:var(--ink);color:#fff}
.cat .lg:only-child{cursor:default}
.cat .rbtn.dl{margin-top:8px;font-size:13px}
@media (max-width:1000px){.cats{grid-template-columns:1fr}}
@media (max-width:520px){.cat{grid-template-columns:1fr}.cathint{justify-self:start;text-align:left}}
/* finder: chosen chips use the tag colours; hybrids that do not match are taken out of the grid */
.chip[aria-pressed=true]{background:var(--cf);border-color:var(--cb);color:var(--ct);box-shadow:inset 0 0 0 1px var(--cb),4px 4px 0 -1px var(--panel),4px 4px 0 0 var(--cb)}
.card.dim{display:none}

/* ---- round 11: the catalogue reads as a real stapled catalogue: thin, soft fold at the spine, visible page
   edges on three sides, a light sheen on the cover, lying slightly tipped back ---- */
.cat .cstage{perspective:1400px;touch-action:pan-y;cursor:grab}
.cat .cstage::after{bottom:9%;width:60%;height:22px;background:rgba(19,19,19,.34);filter:blur(14px)}
.book{width:min(56%,250px);--th:7px;transform:rotateX(var(--rx,14deg)) rotateY(var(--ry,-30deg))}
.book img{border-radius:1px 2px 2px 1px}
.book .f{transform:translateZ(calc(var(--th)/2 + .5px))}
.book .b{transform:rotateY(180deg) translateZ(calc(var(--th)/2 + .5px))}
/* spine: a rounded paper fold with two staples */
.book .sp{background:linear-gradient(#8a8a8a,#8a8a8a) 50% 27%/1.5px 16px no-repeat,linear-gradient(#8a8a8a,#8a8a8a) 50% 73%/1.5px 16px no-repeat,linear-gradient(90deg,#cfc9c4,#fff 45%,#fff 55%,#cfc9c4);border-radius:3px}
/* fore edge, head and tail: the stack of pages, set in slightly from the cover */
.book .pg{top:.6%;height:98.8%;background:repeating-linear-gradient(90deg,#fbfaf8 0 1px,#d8d2cd 1px 1.6px)}
.book .tp,.book .bt{position:absolute;left:.5%;width:99%;height:var(--th);display:block;background:repeating-linear-gradient(0deg,#fbfaf8 0 1px,#d8d2cd 1px 1.6px)}
.book .tp{top:calc(var(--th)/-2);transform:rotateX(90deg)}
.book .bt{bottom:calc(var(--th)/-2);transform:rotateX(90deg)}
.book .gl{position:absolute;inset:0;display:block;transform:translateZ(calc(var(--th)/2 + 1px));backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.3) 0,rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 50%,rgba(0,0,0,.08) 100%),linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,0) 3.2%)}
/* team portraits: square, same framing */
.abteam .ph{aspect-ratio:1}.abteam .ph img{object-position:50% 30%}
/* ---- markets map on the About page: drawn from country outlines, names on hover ---- */
.wmap{position:relative}
.wmap svg{display:block;width:100%;height:auto;overflow:hidden}
.wmap path{fill:#fff;stroke:#E9E1DC;stroke-width:.7;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .2s var(--ease)}
.wmap path[data-en]:hover{fill:#EFE8E3}
.wmap path.m{fill:var(--accent);stroke:#fff;stroke-width:1}.wmap path.m:hover{fill:#1F7A42}
.wmap path.h{fill:#8FAE1B;stroke:#fff;stroke-width:1}.wmap path.h:hover{fill:#A2C322}
.wmap .tip{position:absolute;z-index:2;translate:-50% calc(-100% - 14px);background:var(--ink);color:#fff;padding:7px 10px;font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s var(--ease);text-align:center}
.wmap .tip.on{opacity:1}
.wmap .tip b{display:block;font-weight:500}.wmap .tip span{display:block;font-size:10px;opacity:.75;margin-top:2px}
/* on hover the box tips the other way: its left side lifts */
.card:hover .box,.card:focus-visible .box{transform:rotate(3deg)}
@media (prefers-reduced-motion:reduce){.card:hover .box,.card:focus-visible .box{transform:none}}
/* arrow buttons: compact, about 38 by 27 px, with a short arrow */
.rbtn.sq{padding:0 3px 3px 0}.rbtn.sq::before{left:3px;top:3px}
.rbtn.sq .rl{padding:0;width:38px;height:27px;min-height:0}
.rbtn.sq .arr{width:16px}.rbtn.sq .arr::after{width:5px;height:5px;top:-2.5px}
.rhero .arrows{display:flex;gap:6px}
@media (pointer:coarse){.rbtn.sq .rl{width:46px;height:44px}}

/* ---- round 12: button layers as on Rye Island ----
   top layer: a border and no fill; bottom layer (the offset shape): a fill and no border.
   The bottom layer is a light tint of the button's own colour and shows through the top layer. */
.rbtn .rl{background:transparent}
.rbtn::before{border:0;background:rgba(19,19,19,.13);background:color-mix(in srgb,var(--bc,var(--accent)) 20%,transparent)}
.rbtn.fill .rl{background:transparent;color:var(--bc,var(--accent))}
.rbtn.fill .rc{background:var(--bc,var(--accent))}
.rbtn.fill:hover .rl,.rbtn.fill:focus-visible .rl{color:var(--hc,#fff)}
.rbtn.light::before{border:0;background:rgba(255,255,255,.24)}
.rbtn.onc::before{border:0;background:rgba(19,19,19,.16)}
/* tags: same two layers; coloured tags keep their fill, plain ones are outline only */
.rtag::before{border:0;background:rgba(19,19,19,.13);background:color-mix(in srgb,var(--tb,var(--ink)) 24%,transparent)}
.rtag span{background:var(--tf,transparent)}
.badge.rtag::before{background:rgba(19,19,19,.16)}
/* filter chips: outline on top, soft filled shape offset underneath (also visible through the chip) */
.chip{background:linear-gradient(rgba(19,19,19,.1),rgba(19,19,19,.1)) 3px 3px/100% 100% no-repeat;box-shadow:4px 4px 0 0 rgba(19,19,19,.1)}
.chip[aria-pressed=true]{background:var(--cf);box-shadow:inset 0 0 0 1px var(--cb),4px 4px 0 0 rgba(19,19,19,.14);box-shadow:inset 0 0 0 1px var(--cb),4px 4px 0 0 color-mix(in srgb,var(--cb) 30%,transparent)}
/* header menus: same offset shape under the panel */
.navi .in{box-shadow:5px 5px 0 0 rgba(19,19,19,.14)}

/* ---- round 13 ---- */
/* seed graphics: groups of separate objects from the brand pattern sheet (one kernel, one sunflower seed) */
.dkg{position:absolute;display:flex;align-items:center;pointer-events:none;z-index:0}
.sec>.wrap>.dkg,.page-top>.wrap>.dkg,.cta3 .in>.dkg,.abtop .l>.dkg{position:absolute;z-index:0}
.dkg .dk{position:relative;flex:1 1 0;min-width:0;filter:invert(1);opacity:.16}
.dk-corn{aspect-ratio:109/218}
.dk-sun{aspect-ratio:132/165}
.dk-sun.flip{rotate:180deg}
.dkrow .dkg{flex:none}
@media (max-width:700px){.dkg{display:none}}
/* home marquee: outline leaf between the repeats, same line weight as before */
.mq .lf{height:.62em;width:auto;flex:none;font-size:clamp(40px,8vw,140px);fill:none;stroke:#fff;stroke-width:2;overflow:visible}
.mq .lf path{vector-effect:non-scaling-stroke}
/* a plain zero: the monospace face draws a dot inside 0, so that one character comes from Manrope */
@font-face{font-family:"Rayal Zero";src:url(fonts/manrope-latin.woff2) format("woff2");font-weight:560 800;font-display:swap;unicode-range:U+0030}
:root{--mono:"Rayal Zero","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
/* About and Contact: plain light-green pane, no pattern */
html[data-pane=green] .pane{background:#A5B129;background-image:none}
/* "New": white second layer */
.badge.rtag::before,.rtag:not([style])::before{background:#fff}
/* home video: stacked players cross-fade */
.bgv[data-list],.bgv.alt{opacity:0;transition:opacity 1s linear}
.bgv.show{opacity:1}
/* bag slider, laid out like the reference: three lines of text, the button, then the line of dashes with the
   two arrows directly after it */
.rhero .right{justify-self:start;width:min(100%,420px);min-height:clamp(300px,26vw,400px);padding-left:clamp(0px,2vw,40px)}
.rhero .hs{top:calc(50% - clamp(110px,9vw,150px))}
.rhero .hn{font:500 clamp(26px,2.3vw,36px)/1.1 var(--sans)}
.rhero .hm{font:400 clamp(20px,1.75vw,28px)/1.2 var(--sans);text-transform:uppercase;color:var(--ink);margin:8px 0 0}
.rhero .hx{font:400 clamp(14px,1.15vw,18px)/1.3 var(--sans);text-transform:uppercase;margin:12px 0 clamp(26px,2.6vw,40px)}
.rhero .hs .rbtn{font-size:clamp(15px,1.2vw,18px)}.rhero .hs .rbtn .rl{padding:11px 20px}
.rhero .ctrl{left:clamp(0px,2vw,40px);right:auto;justify-content:flex-start;gap:clamp(20px,2.2vw,34px)}
.dashes{flex:none;gap:9px}
.dash{width:13px}
.dash::before{background:rgba(19,19,19,.45)}
.dash.on{width:22px}
.dash.on::before{height:3px;top:calc(50% - 1.5px);background:var(--ink)}
.dash i{display:none}
@media (max-width:860px){.rhero .right{padding-left:0}.rhero .ctrl{left:0}}

/* ---- round 14: 3D cob / sunflower head that turns on scroll (crop pages) ---- */
.spin3d{position:absolute;right:3%;top:calc(-1 * clamp(150px,17vw,290px));width:clamp(170px,19vw,320px);aspect-ratio:1;background-repeat:no-repeat;background-position:0 0;z-index:3;pointer-events:none;will-change:transform;filter:drop-shadow(0 26px 30px rgba(19,19,19,.28))}
.sec>.wrap>.spin3d{position:absolute;z-index:3}
@media (max-width:700px){.spin3d{width:150px;top:-120px;right:2%}}
@media (max-width:700px){.spin3d{width:104px;top:-64px;right:1%}}

/* ---- round 15 ---- */
/* crop pages: a full-width band under the field video in the product colour, with its seed pattern drifting
   diagonally (45 degrees). The band follows the chosen category: red, purple, yellow or teal. */
.pband{height:clamp(84px,11vw,170px);background-repeat:repeat;background-position:0 0;transition:background-color .4s var(--ease)}
.pband[data-fam=corn]{background-color:#FC5340;background-image:url(pat/pane-corn.webp);background-size:340px 170px;animation:pb-corn 22s linear infinite}
.pband[data-fam=corn-confection]{background-color:#6A4EA1;background-image:url(pat/pane-corn-confection.webp);background-size:340px 170px;animation:pb-corn 22s linear infinite}
.pband[data-fam=sunflower]{background-color:#FDAF19;background-image:url(pat/pane-sunflower.webp);background-size:255px 170px;animation:pb-sun 33s linear infinite}
.pband[data-fam=sunflower-confection]{background-color:#1A7277;background-image:url(pat/pane-sunflower-confection.webp);background-size:255px 170px;animation:pb-sun 33s linear infinite}
/* equal travel across and down = 45 degrees; the distances are whole tiles, so the loop has no jump */
@keyframes pb-corn{to{background-position:340px 340px}}
@keyframes pb-sun{to{background-position:510px 510px}}
@media (prefers-reduced-motion:reduce){.pband{animation:none!important}}
/* locations: Google Maps view instead of a photo */
.loc .ph.gmap{aspect-ratio:4/3;display:block;background:#E9E3DE}
.loc .ph.gmap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.loc .gl{font:500 13px var(--sans);text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:1px}
/* markets table now has six groups */
.abmk{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.abmk{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.abmk{grid-template-columns:1fr 1fr}}

/* ---- round 16 ---- */
/* seed objects are solid: filled with the page colour, with their outline on top, so they cover what is behind
   them (including each other when they meet). Boxes that sit over them are filled with the page colour too. */
.dkg .dk{filter:none;opacity:1}
.note-box,.tabs,.finder,.sec-head .lead{background-color:var(--canvas)}
.note-box{position:relative;z-index:1}
details{background:var(--canvas)}
/* photos that drift inside their frames need a little extra size so no edge shows */
.absplit .ph img,.abdo .ph img,.abtop .ph img,.story .ph img{scale:1.16}
.story .ph img{top:0;height:100%}
/* headings and cards that move with scroll */
[data-parx],.card[data-par]{will-change:transform}
.card.reveal[data-par]{transition:opacity .8s var(--ease),transform .25s linear}
/* pattern panes between sections */
.pband.gap{margin-top:clamp(10px,2vw,30px)}
/* the values band: the photo stays put while the page moves over it */
@media (min-width:900px) and (hover:hover){.abvalues{background-attachment:fixed}}

/* ---- round 17 ---- */
/* home page: a pattern pane above each family, as wide as the filter box, with the product boxes' round corners.
   Seeds drop in from the top and settle; then the family's full pattern appears. */
.pband.fall{position:relative;overflow:hidden;border-radius:18px;height:clamp(96px,10.5vw,160px);margin:0 0 clamp(18px,2vw,28px);background-image:none!important;animation:none!important;z-index:1}
.pband.fall .pp{position:absolute;inset:0;display:block;opacity:0;background-repeat:repeat;transition:opacity 1.1s var(--ease) 2.1s}
.pband.fall[data-fam=corn] .pp{background-image:url(pat/pane-corn.webp);background-size:340px 170px}
.pband.fall[data-fam=corn-confection] .pp{background-image:url(pat/pane-corn-confection.webp);background-size:340px 170px}
.pband.fall[data-fam=sunflower] .pp{background-image:url(pat/pane-sunflower.webp);background-size:255px 170px}
.pband.fall[data-fam=sunflower-confection] .pp{background-image:url(pat/pane-sunflower-confection.webp);background-size:255px 170px}
.pband.fall.in .pp{opacity:1}
.pband.fall.done .pp{transition:none}
.sd{position:absolute;left:var(--l);top:var(--t);width:var(--w);display:block;background:center/contain no-repeat;opacity:0;will-change:transform}
.sd-corn{aspect-ratio:109/218;background-image:url(pat/seed-corn-w.svg)}
.sd-sun{aspect-ratio:132/165;background-image:url(pat/seed-sunflower-w.svg)}
.pband.fall.in:not(.done) .sd{animation:sd-fall 1.15s cubic-bezier(.45,0,.75,.55) var(--d) both,sd-out .9s linear 2.5s forwards}
@keyframes sd-fall{0%{transform:translateY(-320px) rotate(var(--r0));opacity:1}72%{transform:translateY(8px) rotate(var(--r1));opacity:1}86%{transform:translateY(-5px) rotate(var(--r1));opacity:1}100%{transform:translateY(0) rotate(var(--r1));opacity:1}}
@keyframes sd-out{to{opacity:0}}
/* headline: the supplied white leaf, and a slower crawl */
.mq img.lf{height:.66em;width:auto;flex:none;font-size:clamp(40px,8vw,140px);margin:0 .08em}
.mq .track{animation-duration:64s}
/* loose seed pieces spread through the family sections, the crop pages and the variety pages */
.fam{position:relative}
.fam>.dkg,.sec>.wrap>.dkg.sc{position:absolute;z-index:0}
.fam>:not(.dkg){position:relative;z-index:1}
.dkg.sc{display:block}.dkg.sc .dk{display:block;width:100%}
@media (max-width:700px){.dkg.sc{display:none}}

/* ---- round 18 ---- */
/* headline leaf: as tall as the lettering, with the same space on both sides */
.mq span{padding:0}
.mq img.lf{height:clamp(52px,12.5vw,225px);margin:0 clamp(26px,5vw,90px);font-size:inherit}
/* seed stacks: tidy groups of separate pieces */
.dkg{display:block}
.dkg .dkp{position:absolute;display:block;will-change:transform}
.dkg .dkp .dk{position:absolute;left:50%;top:50%;translate:-50% -50%;flex:none;display:block;min-width:0}
.dkrow .dkg{position:relative;flex:none}
/* portfolio: four line icons */
.pfi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.pfic{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(18px,2vw,30px) 0 clamp(18px,2vw,26px);border-top:1px solid var(--ink)}
.pfic img{width:clamp(120px,13vw,190px);height:auto;margin:0 0 clamp(10px,1.4vw,22px) -8px;transition:transform .6s var(--ease)}
.pfic:hover img{transform:translateY(-6px) rotate(-4deg)}
.pfic h3{font:500 clamp(22px,2.2vw,34px)/1.05 var(--sans);text-transform:uppercase}
.pfic p{font-size:clamp(14px,1.1vw,17px);color:var(--ink-2);max-width:26ch;min-height:2.9em}
.pfic .rbtn{margin-top:8px}
.pfic::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pfic:hover::after{transform:scaleX(1)}
@media (max-width:900px){.pfi{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.pfi{grid-template-columns:1fr}}
.pfic img{margin-left:0}
/* catalogues: one white box with a thin grey border; text on the left, the catalogue on the right */
.cat{border:1px solid var(--line);background:var(--panel)}
.cat .cstage{order:2;background:none}
.cat .tx{order:1}
.cat .cstage::after{background:rgba(19,19,19,.22)}
@media (max-width:520px){.cat .cstage{order:0}}

/* ---- round 20: calmer pages ---- */
/* transition panes: solid family colour, no pattern */
html[data-pane] .pane{background-image:none!important}
/* with parallax off, photos sit at their natural size and the values photo scrolls with the page */
.absplit .ph img,.abdo .ph img,.abtop .ph img,.story .ph img{scale:1}
.abvalues{background-attachment:scroll}
.dkrow{display:block}

/* ---- team: former-employer logos as tags under each portrait (black outline, white layer underneath) ---- */
.ltags{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:2px 0 10px}
.rtag.lg{padding:0 4px 4px 0}
.rtag.lg span{display:flex;align-items:center;justify-content:center;height:46px;padding:0 12px;background:#fff;border-color:var(--ink)}
.rtag.lg::before{background:#fff;border:1px solid rgba(19,19,19,.28)}
.rtag.lg img{display:block;width:auto}

/* team logo tags: all the same size, a single outlined box with no second layer, each linking to the company */
.ltags{gap:10px}
.ltag{display:flex;align-items:center;justify-content:center;width:132px;height:48px;border:1px solid var(--ink);background:#fff;transition:background .2s var(--ease)}
.ltag:hover,.ltag:focus-visible{background:var(--canvas)}
.ltag img{display:block;width:auto;max-width:104px}

/* ---- round 23 ---- */
/* headline: outline circle between the repeats again, centred like the leaf was */
.mq i{width:.5em;height:.5em;border:2px solid #fff;border-radius:50%;font-size:clamp(40px,8vw,140px);flex:none;margin:0 clamp(26px,5vw,90px)}
/* bag slider: the earlier layout is back. Left and right text start at exactly the same height, the variety
   name is set in the heading typeface at the heading's size, and the dashes and arrows sit at the two ends. */
.rgrid{--rt:clamp(50px,8vw,140px);align-items:start}
.rhero .bags{align-self:center}
.rhero .left{align-self:start;padding-top:var(--rt)}
.rhero .left h2{line-height:1.05}
.rhero .right{justify-self:end;align-self:stretch;width:min(100%,330px);padding-left:0;min-height:300px;display:block}
.rhero .hs{top:var(--rt)}
.rhero .hn{font:400 clamp(26px,3.3vw,56px)/1.05 var(--mono);text-transform:uppercase;letter-spacing:-.02em}
.rhero .hm{font:400 clamp(15px,1.2vw,18px)/1.4 var(--sans);text-transform:uppercase;color:var(--ink-2);margin:14px 0 22px}
.rhero .hs .rbtn{font-size:15px}.rhero .hs .rbtn .rl{padding:10px 18px}
.rhero .ctrl{left:0;right:0;justify-content:space-between;gap:18px}
.dashes{flex:1;gap:10px}
.dash{width:18px}.dash::before{background:var(--ink-2)}
.dash.on{width:46px}.dash.on::before{height:1px;top:50%;background:var(--ink-2)}
.dash i{display:block}
@media (max-width:860px){.rgrid{--rt:0px}.rhero .right{justify-self:start;min-height:210px}}
/* transition pane: fixed colours. Red corn, purple corn confection, yellow sunflower, blue sunflower
   confection, light green for About, Contact and every other page. */
html[data-pane=sunflower-confection] .pane{background-color:#1A7277}
html[data-pane=plain] .pane,html[data-pane=green] .pane{background:#A5B129}
/* the plain zero comes from Manrope, which is lighter than the monospace face at the same weight. Declaring this
   face as starting at a heavier weight makes regular text pick that heavier cut, so the 0 matches its neighbours. */
@font-face{font-family:"Rayal Zero";src:url(fonts/manrope-latin.woff2) format("woff2");font-weight:560 800;font-display:swap;unicode-range:U+0030}

/* ---- round 24 ---- */
/* buttons that used the dark green now use the light Rayal green. The label turns dark when the button fills,
   because white on light green is hard to read. */
.rbtn{--accent:#A5B129}
.rbtn:not([style*="--bc"]):not(.ink):not(.light):not(.onc){--hc:var(--ink)}
/* enquiry list: header counter */
.hdr .cartl{display:inline-flex;align-items:center;gap:8px}
.hdr .cartl .n{display:none;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#A5B129;color:var(--ink);font:700 12px/20px var(--sans);text-align:center}
.hdr .cartl.has .n{display:inline-block}
/* add button on the variety pages */
.addc .plus{position:relative;width:13px;height:13px;flex:none}
.addc .plus::before,.addc .plus::after{content:"";position:absolute;left:0;top:6px;width:13px;height:1px;background:currentColor;transition:transform .3s var(--ease)}
.addc .plus::after{transform:rotate(90deg)}
.addc.on .plus::before{transform:rotate(45deg) scaleX(.6) translate(-3px,3px)}
.addc.on .plus::after{transform:rotate(-45deg) translate(1px,-1px)}
/* prompt after adding */
.cartp{position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:120;width:min(380px,calc(100vw - 24px));background:var(--canvas);border:1px solid var(--ink);box-shadow:6px 6px 0 0 rgba(19,19,19,.14);padding:20px 22px 22px;display:grid;gap:16px;transform:translateY(calc(100% + 40px));opacity:0;visibility:hidden;transition:transform .45s var(--ease),opacity .3s var(--ease),visibility 0s .45s}
.cartp.show{transform:none;opacity:1;visibility:visible;transition-delay:0s}
.cartp p{font:400 16px/1.4 var(--sans);padding-right:44px}.cartp .who{font:400 18px var(--mono);text-transform:uppercase}
.cartp .x{position:absolute;right:14px;top:12px;font:400 13px var(--mono);background:none;border:0;cursor:pointer;color:var(--ink)}
.cartp .row{display:flex;flex-wrap:wrap;gap:12px}
/* contact form: the chosen varieties */
.cartbox{border:1px solid var(--line);padding:14px 16px 16px;background:var(--canvas)}
.cartbox p{font:500 13px var(--sans);text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.cartbox ul{display:flex;flex-wrap:wrap;gap:8px}
.cartbox li{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:#fff;padding:6px 6px 6px 11px;font:400 14px var(--mono);text-transform:uppercase}
.cartbox li button{width:22px;height:22px;border:0;background:var(--ink);color:#fff;font:400 15px/1 var(--sans);cursor:pointer}
@media (max-width:860px){.hdr .cartl{font-size:0;gap:0}.hdr .cartl .n{font-size:12px}}
/* light green buttons: green outline, layer and fill; the label stays dark so it can be read */
.rbtn:not([style*="--bc"]):not(.ink):not(.light):not(.onc) .rl{color:var(--ink);border-color:#A5B129}
.rbtn:not([style*="--bc"]):not(.ink):not(.light):not(.onc){--bc:#A5B129}
/* enquiry box: a small heading per crop and category, with that group of varieties underneath */
.cartbox .grp{display:grid;gap:14px}
.cartbox h4{font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid var(--line)}

/* ---- round 26 ---- */
/* header: question-bubble icon with the number of varieties in the enquiry */
.hdr .cartl{position:relative;display:inline-flex;align-items:center;width:34px;height:34px;font-size:0;gap:0}
.hdr .cartl svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hdr .cartl svg .dot{fill:currentColor;stroke:none}
.hdr .cartl .n{display:block;position:absolute;right:-5px;bottom:-4px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;background:var(--ink);color:#fff;font:700 11px/19px var(--sans);text-align:center}
.hdr.over .cartl .n{background:#fff;color:var(--ink)}
.hdr .cartl.has .n{background:#A5B129;color:var(--ink)}
/* pop-up after adding a variety */
html.modal{overflow:hidden}
.cartm{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
.cartm[hidden]{display:none}
.cartm .bd{position:absolute;inset:0;background:rgba(19,19,19,.45);opacity:0;transition:opacity .3s var(--ease)}
.cartm .panel{position:relative;width:min(1040px,100%);max-height:100%;overflow:auto;background:#fff;border:1px solid var(--ink);padding:clamp(22px,3.4vw,48px);opacity:0;transform:translateY(18px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cartm.open .bd{opacity:1}.cartm.open .panel{opacity:1;transform:none}
.cartm h2{font:400 clamp(18px,1.7vw,24px)/1.2 var(--sans);text-transform:uppercase;letter-spacing:.01em;padding-right:44px}
.cartm .x{position:absolute;right:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);width:30px;height:30px;border:0;background:none;cursor:pointer}
.cartm .x::before,.cartm .x::after{content:"";position:absolute;left:3px;right:3px;top:14px;height:1px;background:var(--ink)}
.cartm .x::before{transform:rotate(45deg)}.cartm .x::after{transform:rotate(-45deg)}
.cartm .it{display:flex;align-items:center;gap:clamp(18px,3vw,44px);margin:clamp(16px,2.4vw,30px) 0}
.cartm .it img{width:clamp(96px,12vw,170px);height:auto}
.cartm .it .nm{font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;line-height:1.05}
.cartm .mt{font:400 14px/1.4 var(--sans);text-transform:uppercase;color:var(--ink-2);margin-top:8px}
.cartm .it .mt i{display:inline-block;width:1px;height:12px;background:#C97B2A;margin:0 9px;vertical-align:-1px}
.cartm .act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;max-width:520px}
.cartm .act .rbtn{flex:1 1 260px}
.cartm .stay{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 2px;font:500 13px var(--sans);text-transform:uppercase;cursor:pointer;color:var(--ink)}
.cartm h3{font:400 clamp(16px,1.4vw,20px)/1.2 var(--sans);text-transform:uppercase;margin:clamp(26px,3.6vw,50px) 0 clamp(12px,1.6vw,20px);padding-top:clamp(18px,2.4vw,30px);border-top:1px solid var(--line)}
.cartm h3 span{font-size:13px;color:var(--ink-2);margin-left:10px;text-transform:none}
.cartm .sim{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.8vw,26px)}
.cartm .si{position:relative;display:grid}
.cartm .si a{display:grid;gap:4px;padding-right:26px}
.cartm .si img{width:100%;height:auto;margin-bottom:8px;transition:transform .5s var(--ease)}
.cartm .si a:hover img{transform:translateY(-4px)}
.cartm .si .nm{font:400 13px/1.25 var(--sans);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartm .si .mt{margin-top:0;font-size:12px}
.cartm .addm{position:absolute;right:0;bottom:14px;width:24px;height:24px;border:0;background:none;cursor:pointer}
.cartm .addm::before,.cartm .addm::after{content:"";position:absolute;left:5px;top:11.5px;width:14px;height:1px;background:var(--ink);transition:transform .25s var(--ease)}
.cartm .addm::after{transform:rotate(90deg)}
.cartm .addm.on::before{transform:rotate(45deg) scaleX(.55) translate(-5px,4px)}
.cartm .addm.on::after{transform:rotate(-45deg) translate(1px,-1px)}
.cartm .addm.on{background:#A5B129;border-radius:50%}
@media (max-width:820px){.cartm .sim{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.cartm .sim{grid-template-columns:1fr 1fr}.cartm .it{align-items:flex-start}}

/* the enquiry icon only appears once something is in the enquiry */
.hdr .cartl{display:none}
.hdr .cartl.has{display:inline-flex}

/* ---- round 29 ---- */
/* contact: locations on the left, form on the right */
.locside{display:grid;gap:18px;align-content:start}
.locside .h-m{font-size:clamp(24px,2.4vw,36px)}
.locside .locs{grid-template-columns:1fr;gap:14px}
.locside .loc{flex-direction:row;align-items:stretch}
.locside .loc .ph.gmap{flex:0 0 44%;aspect-ratio:auto;min-height:190px}
.locside .loc .tx{flex:1;padding:16px 18px 18px;align-content:start}
@media (max-width:560px){.locside .loc{flex-direction:column}.locside .loc .ph.gmap{flex:none;aspect-ratio:16/10;min-height:0}}
/* portfolio: icons the size of the product-page icons. On hover the circle fills with that product's colour
   (from where the cursor enters, slowly, like the buttons), the white disc underneath goes, and the glyph
   turns white. No button, no line above. */
.pfic{border-top:0;padding-top:0;gap:8px}
.pfic::after{display:none}
.pfw{position:relative;display:block;width:96px;height:96px;margin:0 0 14px}
.pfw::before{content:"";position:absolute;left:7px;top:6px;width:100%;height:100%;border-radius:50%;background:#fff}
.pfico{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;border:1.5px solid var(--ink);overflow:hidden;color:var(--ink);transition:color .7s var(--ease) .2s,border-color .7s var(--ease) .2s}
.pfico .rc{position:absolute;left:var(--mx,50%);top:var(--my,50%);width:260%;aspect-ratio:1;border-radius:50%;background:var(--c);transform:translate(-50%,-50%) scale(0);transition:transform 1.5s cubic-bezier(.22,.61,.36,1)}
.pfico svg{position:relative;height:54%;width:auto;display:block}
.pfic:hover .pfw::before,.pfic:focus-visible .pfw::before{opacity:0}
.pfic:hover .pfico,.pfic:focus-visible .pfico{color:#fff;border-color:var(--c)}
.pfic:hover .pfico .rc,.pfic:focus-visible .pfico .rc{transform:translate(-50%,-50%) scale(1.02)}
@media (prefers-reduced-motion:reduce){.pfico .rc{transition:none}}
/* portfolio glyphs a little larger inside their circles */
.pfico svg{height:68%}

/* ---- round 31: spec icons on the variety pages ----
   Same hover as the portfolio icons, in black: the circle fills from where the cursor enters, the white disc
   underneath goes and the artwork turns white. A short definition appears beside it. */
.vspecs li{position:relative;--c:var(--ink);outline-offset:6px}
.vspecs .pfw{flex:none;margin:0}
.vspecs .pfico svg{width:100%;height:100%}
.vspecs li:hover .pfw::before,.vspecs li:focus-visible .pfw::before{opacity:0}
.vspecs li:hover .pfico,.vspecs li:focus-visible .pfico{color:#fff;border-color:var(--c)}
.vspecs li:hover .pfico .rc,.vspecs li:focus-visible .pfico .rc{transform:translate(-50%,-50%) scale(1.02)}
.stip{position:absolute;left:0;top:calc(100% + 6px);z-index:6;width:max-content;max-width:min(300px,78vw);background:var(--ink);color:#fff;padding:10px 12px;font:400 13px/1.45 var(--sans);text-transform:none;opacity:0;visibility:hidden;translate:0 -4px;transition:opacity .2s var(--ease),translate .2s var(--ease),visibility 0s .2s;pointer-events:none}
.vspecs li .stip{color:#fff;text-transform:none}
.vspecs li:hover .stip,.vspecs li:focus-visible .stip{opacity:1;visibility:visible;translate:0 0;transition-delay:.15s,.15s,0s}
@media (max-width:900px){.vspecs .pfw{width:72px;height:72px}}
/* spec rows: ordinary arrow cursor, no question mark */
.vspecs li{cursor:default}

/* spec tooltips sit to the right of the row, level with it, so they cover neither the icon nor the row below */
.vl{position:relative;z-index:4}
.vspecs{justify-items:start}
.vspecs li{width:fit-content;max-width:100%}
.stip{left:calc(100% + 18px);top:50%;translate:-6px -50%;max-width:min(260px,40vw)}
.stip::before{content:"";position:absolute;right:100%;top:50%;margin-top:-6px;border:6px solid transparent;border-right-color:var(--ink)}
.vspecs li:hover .stip,.vspecs li:focus-visible .stip{translate:0 -50%}
/* on narrow screens there is no room beside the row, so the definition opens underneath and pushes the list down */
@media (max-width:900px){
  .vspecs li{flex-wrap:wrap;width:auto}
  .stip{position:static;display:none;flex:1 1 100%;width:auto;max-width:none;translate:none;opacity:1;visibility:visible}
  .stip::before{display:none}
  .vspecs li:hover .stip,.vspecs li:focus-visible .stip{display:block;translate:none}
}
@media (max-width:900px){.vspecs li .stip{display:none}.vspecs li:hover .stip,.vspecs li:focus .stip,.vspecs li:focus-visible .stip{display:block}}

/* contact: the form box starts level with the first location box and the three location boxes together are
   exactly as tall as the form box. The form box has the same thin grey border as the location boxes. */
.fpanel{border:1px solid var(--line)}
@media (min-width:901px){
  .cgrid{grid-template-rows:auto 1fr;align-items:stretch;row-gap:18px}
  .locside{display:contents}
  .locside>h2{grid-column:1;grid-row:1}
  .locside>.locs{grid-column:1;grid-row:2;grid-template-rows:repeat(3,minmax(0,1fr));height:100%}
  .cgrid>.fpanel{grid-column:2;grid-row:2}
  .locside .loc{min-height:0}
  .locside .loc .ph.gmap{min-height:0}
  .locside .loc .tx{overflow:hidden}
}

/* location boxes: the country's flag in a small outlined rectangle, bottom right */
.loc .tx{position:relative}
.flagtag{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;justify-content:center;width:64px;height:44px;border:1px solid var(--ink);background:#fff}
.flagtag svg{display:block;width:42px;height:28px;box-shadow:0 0 0 1px rgba(19,19,19,.12)}
.locside .loc .tx{padding-bottom:18px}
@media (max-width:560px){.flagtag{right:14px;bottom:14px}}
/* the flag fills its rectangle edge to edge */
.flagtag{width:66px;height:44px;padding:0;overflow:hidden;background:none}
.flagtag svg{width:100%;height:100%;box-shadow:none}

/* header menus: pointing at a category opens a second list, to the right, with that category's varieties */
.navi>.sub>.in{overflow:visible}
.navc{position:relative}
.hdr .navc>a{justify-content:flex-start;padding-right:14px}
.navc>a .car{margin-left:auto;width:6px;height:6px;border-right:1px solid currentColor;border-top:1px solid currentColor;rotate:45deg;flex:none;opacity:.6}
.navc>a i+.car{margin-left:auto}
.navc .sub2{position:absolute;left:100%;top:-9px;padding-left:6px;opacity:0;visibility:hidden;translate:-6px 0;transition:opacity .2s var(--ease),translate .2s var(--ease),visibility 0s .2s}
.navc:hover .sub2,.navc:focus-within .sub2{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.navc .sub2 .in{min-width:210px}
.hdr .navc .sub2 .in a{font:400 13px var(--mono);letter-spacing:.02em}
.navc:hover>a,.navc:focus-within>a{background:rgba(19,19,19,.06)}

/* header menus: the variety list uses the same typeface as the category list */
.hdr .navc .sub2 .in a{font:400 14px/1.4 var(--sans);letter-spacing:.01em;text-transform:uppercase}
/* enquiry counter: over dark photos and video it is a white outline with a white number, no fill */
.hdr.over .cartl .n,.hdr.over .cartl.has .n{background:none;color:#fff;box-shadow:inset 0 0 0 1px #fff}

/* enquiry counter: its outline is as thick as the bubble's, and the bubble stops short of it */
.hdr .cartl svg{overflow:visible}
.hdr.over .cartl .n,.hdr.over .cartl.has .n{box-shadow:inset 0 0 0 1.8px #fff;font-weight:600}
/* green counter on light headers: large enough to cover the whole cut in the bubble, so no gap or stray
   pieces of the bubble's line show around it */
.hdr:not(.over) .cartl .n{min-width:25px;height:25px;line-height:25px;border-radius:13px;right:-8px;bottom:-7px;font-size:12.5px;padding:0 5px}

/* round 32: crop nutrition / protection panel uses the hexagon motif from the chemicals catalogue cover.
   It sits in its own layer inside the panel and is moved diagonally by fx.js while scrolling. */
.hero.patt-nutrition,.hero.patt-protection{background-image:none}
.cpat{position:absolute;inset:0;pointer-events:none;background:url(pat/chem-cover-tile.svg) 0 0/460px auto repeat;will-change:background-position}
.cband>.wrap{position:relative;z-index:1}
@media (max-width:700px){.cpat{background-size:300px auto}}

/* round 32b: pattern lines in the earlier darker tone of each panel (drawn through a mask so the colour is free);
   enquiry button on every crop nutrition / protection product row */
.cpat{background:var(--pc,#fff);-webkit-mask:url(pat/chem-cover-tile.svg) 0 0/460px auto repeat;mask:url(pat/chem-cover-tile.svg) 0 0/460px auto repeat;will-change:mask-position}
.patt-nutrition .cpat{--pc:#183880}
.patt-protection .cpat{--pc:#A00C6C}
@media (max-width:700px){.cpat{-webkit-mask-size:300px auto;mask-size:300px auto}}
.ptable td.padd{text-align:right;padding-right:0;white-space:nowrap;vertical-align:middle;width:1%}
.ptable th:last-child{padding-right:0}
@media (max-width:700px){.ptable td.padd{text-align:left;padding-top:12px}}

/* round 33: team cards without portraits for now */
.abteam .ph[hidden]{display:none}
.abteam .bx{padding-top:24px}
@media (max-width:1100px){.abstate .dkg{display:none}}

/* round 34: seed pieces can never draw over anything. Everything else in their block sits on a layer above
   them, and the section clips them, so a moving piece cannot reach a neighbouring section either. */
.wrap>.dkg~*,.cta3 .in>.dkg~*,.abstate>.dkg~*{position:relative;z-index:1}
.sec:has(.dkg),.page-top:has(.dkg){overflow:clip}
@media (max-width:1300px){.abstate .dkg,.cta3 .dkg{display:none}}
@media (max-width:1000px){.sec>.wrap>.dkg{display:none}}

/* round 36: seed pieces fall in from above the window. They live on the lowest layer of the page, behind every
   text, picture, box and button, so on their way down they can only be seen where the page is empty. */
.dkg,.sec>.wrap>.dkg,.page-top>.wrap>.dkg,.cta3 .in>.dkg,.abstate>.dkg{z-index:-1}
.sec:has(.dkg),.page-top:has(.dkg){overflow:visible}
/* the blocks that hold a seed stack must not form a layer of their own, or the falling pieces would ride above the sections before them */
.cta3 .in:has(>.dkg),.abstate:has(>.dkg){z-index:auto!important}

/* round 37: landing page - a row of seed pieces on each family's divider line. --u is one design pixel of a
   1440 px window. The lower strip is behind everything (pieces pass under the line); the upper strip is above
   the line and clips its pieces, so they pass over the line but can never reach a card. */
.fam.hasshelf{--u:min(calc(100vw / 1440),1.05px);margin-top:calc(70px + 150*var(--u))}
.fam>.dkg.shelf{left:0;right:0;top:calc(-150*var(--u));height:calc(150*var(--u) + 64px);display:block;z-index:-1!important}
.fam>.dkg.shelf.over{z-index:2!important;overflow:clip}
@media (max-width:900px){.fam.hasshelf{margin-top:clamp(36px,5vw,70px)}.fam>.dkg.shelf{display:none}}

/* round 39: seed groups wait hidden until they are scrolled to, then drop; corn and sunflower pages get a row
   on a divider line above the note; big boxes slide sideways with the scroll */
.dkg.wait .dkp{visibility:hidden}
.fam.shelfline .fam-head{margin-bottom:0;padding-top:0;min-height:44px}
.slidebox{transition:opacity .8s var(--ease)!important;will-change:transform}

/* round 40: pinned-element scrolling (after lesintranquilles.com) and a sideways journey (after landonorris.com) */

/* 1. Every section is an opaque sheet above the video hero; the hero stays pinned and the page slides up over it */
:where(main>section){position:relative;z-index:1;background-color:var(--canvas)}
@media (min-width:761px) and (min-height:560px){main>section.hero.hero-dark{position:sticky;top:0;z-index:0}}

/* 2. Landing page: the family name stays pinned on the left while its cards move past on the right */
@media (min-width:1100px){
  .fam.famside{display:grid;grid-template-columns:minmax(170px,2.2fr) minmax(0,9.8fr);column-gap:clamp(20px,2.4vw,40px);align-items:start;border-top:1px solid var(--line-strong);padding-top:22px}
  .fam.famside .fam-head{position:sticky;top:96px;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:10px 12px;border-top:0;padding-top:0;margin-bottom:0}
  .fam.famside .fam-head h3{font-size:clamp(22px,2vw,30px)}
  .fam.famside .fam-head span{grid-column:1/-1;margin-left:0}
  .fam.famside .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 3. Crop pages: the category tabs stay pinned under the header while the cards move */
.tabs{position:sticky;top:64px;z-index:6;background:var(--canvas);padding-top:10px}

/* 4. Crop nutrition / protection: brand name and description pinned left, product table moves right */
@media (min-width:1100px){
  .bsplit{display:grid;grid-template-columns:minmax(0,3.6fr) minmax(0,8.4fr);column-gap:clamp(24px,4vw,70px);align-items:start}
  .bsplit .sec-head{position:sticky;top:110px;display:block;margin:0}
  .bsplit .sec-head .lead{margin-top:18px;max-width:34ch}
  .bsplit .ptable{margin-top:0}
  .bsplit .bnote{grid-column:2}
}

/* 5. About: the president's portrait stays pinned while the message moves past it */
@media (min-width:901px){
  .absplit.pres{align-items:start}
  .absplit.pres .ph{position:sticky;top:76px;height:calc(100vh - 100px);min-height:0}
  .absplit.pres .txt{padding-top:clamp(60px,14vh,160px);padding-bottom:clamp(60px,14vh,160px);justify-content:flex-start;gap:22px}
  .absplit.pres .txt p{font-size:clamp(17px,1.35vw,21px);line-height:1.55;max-width:38ch}
  .absplit.pres .txt .h-m{font-size:clamp(28px,3vw,46px);margin-bottom:14px}
}

/* 6. About journey. Default: a plain vertical list. With .hz (set by the script on wide screens) the section is
   pinned and its panels travel sideways. */
.hjour{padding:clamp(40px,6vw,90px) 0}
.hjour .track{display:grid;gap:14px;padding:0 var(--gut)}
.hjour .hp{position:relative;background:var(--panel);display:grid;grid-template-columns:1fr;overflow:hidden}
.hjour .hp .ph{position:relative;min-height:240px;overflow:hidden}.hjour .hp .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hjour .hp .tx{padding:clamp(22px,3vw,48px);display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.hjour .yr{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.hjour h3{font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.4vw,36px);line-height:1.05;letter-spacing:-.02em;margin-bottom:6px}
.hjour .tx p:not(.yr){font-size:clamp(15px,1.1vw,17px);max-width:44ch}
.hjour .hp-title{background:none;padding:10px 0 16px;display:block}
.hjour .hp-title h2{font-weight:400;text-transform:uppercase;font-size:clamp(44px,9vw,170px);line-height:.9;letter-spacing:-.04em}
.hjour .hp-title .eyebrow{font:400 13px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:14px}
.hjour .hint,.hjour .hbar,.hjour .no{display:none}
.hjour.hz{padding:0}
.hjour.hz .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.hjour.hz .track{display:flex;align-items:stretch;gap:clamp(16px,2vw,32px);padding:0 var(--gut);height:min(66vh,620px);margin-top:40px;will-change:transform}
.hjour.hz .hp{flex:none;width:min(74vw,1080px);grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr)}
.hjour.hz .hp .ph{min-height:0}
.hjour.hz .hp .tx{justify-content:flex-end;padding-bottom:clamp(28px,4vw,60px)}
.hjour.hz .hp-title{width:min(60vw,820px);display:flex;flex-direction:column;justify-content:center;padding:0}
.hjour.hz .hint{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.hjour.hz .hint i{display:block;width:70px;height:1px;background:currentColor;position:relative}
.hjour.hz .hint i::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1px solid;border-right:1px solid;rotate:45deg}
.hjour.hz .no{display:block;position:absolute;right:clamp(16px,2vw,34px);top:clamp(6px,1vw,18px);font-weight:400;font-size:clamp(80px,11vw,190px);line-height:1;letter-spacing:-.05em;color:rgba(19,19,19,.07);pointer-events:none;will-change:transform}
.hjour.hz .hbar{display:block;position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(22px,5vh,54px);height:1px;background:var(--line-strong)}
.hjour.hz .hbar i{display:block;height:3px;margin-top:-1px;background:#A5B129;transform-origin:left center;transform:scaleX(0)}
/* an older rule makes direct children of a section relative; the pinned ones must win */
.sec>.wrap>.tabs{position:sticky;top:72px}
@media (min-width:1100px){.sec>.wrap.bsplit>.sec-head{position:sticky}}
.sec>.wrap>.tabs{z-index:8!important;top:80px}

/* header menu: every item sits on one line, level with Contact */
.hdr nav{align-items:center}
.hdr nav>a,.hdr nav>.navi>a{display:block;line-height:21px}
.hdr nav>.navi{display:flex;align-items:center}

/* round 41: variety name as a band running right to left, edge to edge; dots in the family colour */
.vmq{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;white-space:nowrap;font-size:clamp(60px,17.5vw,360px);line-height:.84;letter-spacing:-.045em;text-transform:uppercase;padding:.04em 0}
.vmq .track{display:inline-flex;align-items:center;animation:vmq var(--dur,40s) linear infinite;will-change:transform}
.vmq i{flex:none;width:.2em;height:.2em;border-radius:50%;background:var(--dot,#A5B129);margin:0 .22em}
@keyframes vmq{to{transform:translateX(-50%)}}
body.paused .vmq .track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.vmq .track{animation:none}}
.vbag img,.vstage{will-change:transform}

/* running text bands 30% slower (speed x0.7): landing headline 64s -> 91.4s, variety names likewise */
.mq .track{animation-duration:91.4s}
.vmq .track{animation-duration:calc(var(--dur,40s) / .7)}

/* round 42 */
/* contact form: hidden trap field, success note */
.cf .hpot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf .note.ok{color:#155F30;font-weight:500}

/* product cards: round add-to-enquiry control, top right of the picture */
.card .addq{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);background:var(--canvas);cursor:pointer;transition:background-color .25s var(--ease),transform .25s var(--ease)}
.card .addq::before,.card .addq::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:var(--ink);transition:transform .25s var(--ease),width .25s var(--ease)}
.card .addq::after{transform:rotate(90deg)}
.card .addq:hover{transform:scale(1.08)}
.card .addq:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.card .addq.on{background:#A5B129}
.card .addq.on::before{width:7px;transform:translate(-4.5px,2.5px) rotate(45deg)}
.card .addq.on::after{width:13px;transform:translate(2px,0) rotate(-48deg)}

/* links to the comparison page */
.cmplink{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cmplink:hover{text-decoration-thickness:2px}

/* comparison page */
.cmppick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:26px}
.cmpsel select{width:100%;font:400 16px var(--sans);padding:14px 40px 14px 14px;border:1px solid var(--line-strong);border-radius:0;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23131313' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center/12px no-repeat;appearance:none;color:var(--ink)}
.cmpnone{color:var(--ink-2);padding:40px 0;border-top:1px solid var(--line-strong)}
.cmpout{overflow-x:auto}
.cmptable{width:100%;border-collapse:collapse;table-layout:fixed;min-width:520px}
.cmptable th,.cmptable td{text-align:left;padding:15px 14px 15px 0;border-top:1px solid var(--line);vertical-align:top;font-size:16px}
.cmptable thead th{border-top:0;padding-bottom:20px;vertical-align:bottom}
.cmptable tbody th{font:400 13px var(--mono);text-transform:uppercase;color:var(--ink-2);width:17%;padding-top:18px}
.cmptable td.na{color:var(--ink-2)}
.cmptable tr.acts td{padding-top:20px}
.cmphead{display:grid;gap:12px;max-width:230px}
.cmphead .cb{display:block;aspect-ratio:4/4.4;background:var(--t);border-radius:18px;overflow:hidden;padding:8% 14% 0}
.cmphead .cb img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.cmphead .nm{font:400 clamp(18px,1.7vw,24px)/1.1 var(--mono);text-transform:uppercase;letter-spacing:-.02em}
.cmpview{text-decoration:underline;text-underline-offset:3px;font-size:14.5px}
@media (max-width:700px){.cmppick{grid-template-columns:1fr}.cmptable tbody th{width:26%}}

/* variety page: small bag card pinned on the left, text and photos move on the right */
.vcard{display:none}
@media (min-width:1100px){
  .vpin{display:grid;grid-template-columns:minmax(200px,2.6fr) minmax(0,9.4fr);column-gap:clamp(30px,4vw,70px);align-items:start}
  .sec>.wrap.vpin>.vcard{display:grid;gap:10px;position:sticky;top:110px;justify-items:start}
  .vcard .vcbox{width:100%;aspect-ratio:4/4.5;background:var(--t);border-radius:18px;padding:9% 16% 0;overflow:hidden;margin-bottom:6px}
  .vcard .vcbox img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
  .vcard .nm{font-size:clamp(20px,1.9vw,28px);line-height:1.05;text-transform:uppercase;letter-spacing:-.02em}
  .vcard .mt{font-size:13.5px;color:var(--ink-2);margin-bottom:8px}
  .vcard .cmplink{font-size:14px;margin-top:4px}
}

/* About: What we do and Values as sideways sections (shared rules are under .hjour, round 40) */
.hjour.hdo .tx .rbtn{align-self:flex-start;margin-top:8px}
.hjour.hz.hdo .hp{width:min(62vw,900px)}
.hjour.hval{padding:0}
.hjour.hval .pin{background-size:cover;background-position:center;color:#fff;padding:clamp(50px,7vw,100px) 0}
.hjour.hval .hp.hv{background:none;display:block;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.5)}
.hjour.hval .hp.hv h3{font-size:clamp(20px,2vw,30px);margin-bottom:10px}
.hjour.hval .hp.hv p{max-width:34ch;color:rgba(255,255,255,.9)}
.hjour.hval .hp-title .hint{color:rgba(255,255,255,.8)}
.hjour.hz.hval .pin{padding:0}
.hjour.hz.hval .track{height:auto;align-items:center}
.hjour.hz.hval .hp.hv{width:min(30vw,400px);padding:26px clamp(20px,2vw,34px) 10px 0}
.hjour.hz.hval .hp-title{width:min(52vw,760px)}
.hjour.hz.hval .hp.hv .no{position:static;display:block;color:rgba(255,255,255,.28);font-size:clamp(60px,7vw,120px);margin-bottom:18px}
.hjour.hz.hval .hbar{background:rgba(255,255,255,.4)}

/* card enquiry control: a proper tick when the product is in the list (one L-shaped stroke, not two bars) */
.card .addq.on::before{width:6px;height:11px;margin:0;background:none;border:solid var(--ink);border-width:0 1.6px 1.6px 0;transform:translate(-50%,-62%) rotate(45deg);transition:none}
.card .addq.on::after{display:none}

/* round 44: the bag boxes on the comparison page and on the pinned variety card are the product card's box:
   same 4:5 shape, same bag size and position, same soft shadow */
.cmphead .cb,.vcard .vcbox{display:block;position:relative;aspect-ratio:4/5;padding:0;border-radius:18px;overflow:hidden;background:var(--t)}
.cmphead .cb img,.vcard .vcbox img{position:absolute;left:50%;top:52%;height:72%;width:auto;max-width:none;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 16px 18px rgba(19,19,19,.18))}
.cmphead{max-width:none}
.cmptable .cb.empty{display:block;aspect-ratio:4/5;border-radius:18px;border:1px dashed var(--line-strong);background:none}

/* comparison page: three fixed columns, each with its drop-down directly above its bag */
.cmp.js .cmppick{display:none}
.cmpout{overflow:visible}
.cmptable{min-width:0}
.cmptable thead th{padding:0 14px 14px 0;vertical-align:top}
.cmptable thead th:first-child,.cmptable tbody th{width:16%}
.cmptable thead tr.bags th{padding-bottom:22px}
.csel{position:relative}
.cbtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;font:400 clamp(14px,1.2vw,17px)/1.2 var(--mono);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:0;padding:14px 14px;cursor:pointer}
.cbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbtn::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.csel.open .cbtn::after{transform:translateY(2px) rotate(-135deg)}
.csel.open .cbtn,.cbtn:hover{border-color:var(--ink)}
.cpanel{position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:20;max-height:min(52vh,420px);overflow-y:auto;background:var(--panel);border:1px solid var(--ink);padding:6px 0;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.cpanel::-webkit-scrollbar{width:6px}.cpanel::-webkit-scrollbar-track{background:transparent}.cpanel::-webkit-scrollbar-thumb{background:var(--ink);border-radius:0}
.cgrp{font:400 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);padding:12px 14px 5px;border-top:1px solid var(--line);margin-top:6px}
.copt{display:block;width:100%;text-align:left;font:400 15px/1.2 var(--mono);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);background:none;border:0;border-radius:0;padding:9px 14px;cursor:pointer}
.copt.none{text-transform:none;font-family:var(--sans);color:var(--ink-2)}
.copt:hover,.copt:focus-visible{background:#FFE9D7;outline:none}
.copt.cur{background:var(--ink);color:#fff}
@media (max-width:700px){
  .cmptable thead th:first-child,.cmptable tbody th{width:20%}
  .cmptable th,.cmptable td{font-size:13px;padding-right:8px}
  .cmptable thead th{padding-right:6px}
  .cbtn{padding:10px 8px;font-size:12px}.cbtn::after{width:6px;height:6px}
  .cmphead .nm{font-size:13px}
  .cpanel{left:auto;right:auto;width:min(240px,74vw)}
  .cmptable thead tr.pick th:last-child .cpanel{right:0}
  .cmptable thead tr.pick th:nth-child(3) .cpanel{left:50%;transform:translateX(-50%)}
}

/* round 45: consent line under the form; privacy page text */
form.cf label.consent{display:flex;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;font-weight:400;font-size:14.5px;line-height:1.45}
form.cf label.consent input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:#155F30}
form.cf label.consent a{text-decoration:underline;text-underline-offset:3px}
.privacy{max-width:820px}
.privacy h2{font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.7vw,24px);letter-spacing:-.02em;margin:34px 0 10px}
.privacy p{max-width:66ch}
form.cf label.consent,form.cf label.consent span{font-family:var(--sans)}

/* round 47: About - the three location cards side by side, map on top */
.ablocs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ablocs .loc .ph.gmap{aspect-ratio:4/3}
.ablocs .loc .tx{position:relative;padding-bottom:70px;flex:1}
@media (max-width:900px){.ablocs{grid-template-columns:1fr}}

/* round 48: header logo is the plain Rayal wordmark, a little larger; two-up layouts where the Turkey edition has
   one item fewer (locations, what we do) */
.hdr .logo img{height:52px}
@media (max-width:900px){.hdr .logo img{height:42px}}
.ablocs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.abdo.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.ablocs.two,.abdo.two{grid-template-columns:1fr}}
.cpanel [hidden]{display:none}

/* contact: however many location boxes there are (two or three), they share the height of the form beside them */
@media (min-width:901px){.locside>.locs{grid-template-rows:none;grid-auto-rows:minmax(0,1fr)}}

/* layouts that lost an item in the Turkey edition still fill their row */
@media (min-width:901px){.pfi:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.ftr.f3 .cols>:nth-child(4):last-child{grid-column:5}}