/* Shared touch, tablet and small-screen safeguards, loaded after page styles. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video{max-width:100%}input,textarea,select{max-width:100%}textarea{resize:vertical}
main,section,article,form,fieldset{min-width:0}fieldset{min-inline-size:0}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
header.site-header{padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}
@media(max-width:1300px){
 header.site-header.site-open #site-menu{padding-bottom:max(40px,env(safe-area-inset-bottom));overscroll-behavior:contain}
 header.site-header.site-open #site-menu a{min-height:44px;display:flex;align-items:center}
 header.site-header.site-open #site-menu .products-submenu a{min-height:44px}
 header.site-header.site-open #site-menu .products-submenu{gap:8px 18px}
}
@media(pointer:coarse){button,select,.category-nav a,.product-index a,.small-link{min-height:44px}input[type=radio],input[type=checkbox]{min-height:auto;min-width:20px;width:20px;height:20px}.products-submenu a{min-height:44px}}
@media(max-width:1024px){
 .product-index{flex-wrap:wrap;justify-content:center;height:auto}
 .product-index>a{display:block!important;padding:10px 0}
 .category-nav{flex-wrap:wrap}
 .tabs{min-width:0}.tabs .category-link{min-width:0}
 .report-row h3{overflow-wrap:anywhere}
}
@media(max-width:1024px){
 input,textarea,select{font-size:16px!important}
 .hero h1{font-size:clamp(44px,9vw,64px)}
 .almond-hero h1{font-size:clamp(65px,15vw,100px)}
 .category-nav>a{display:block!important;min-height:44px}
 .copy,.chapter-copy,.letter-copy{min-width:0;overflow-wrap:break-word}
 .copy h1,.copy h2,.chapter-copy h1,.chapter-copy h2{overflow-wrap:break-word}
 .reasons{min-width:0}.reasons article{min-width:0}
 footer{gap:20px;flex-wrap:wrap}footer a{padding:8px 0}
 .enquiry-invitation h2{font-size:clamp(40px,9vw,57px)}
 .fields{min-width:0}.fields>*{min-width:0}
 .scene:has(>.canvas){height:auto;min-height:0}
 .scene:not(.personal-letter)>.canvas{position:relative;height:auto;min-height:0;padding:440px 7vw 60px;overflow:hidden}
 .scene>.canvas .copy{position:relative;left:auto!important;top:auto!important;right:auto!important;translate:none!important;transform:none!important;width:auto!important;max-width:none!important;margin:0}
 .scene>.canvas .copy p:not(.eyebrow){font-size:17px;max-width:none}
 .scene>.canvas .eyebrow{font-size:11px;line-height:1.5}
 .chapters{display:none}
}
@media(min-width:751px) and (max-width:1024px){
 .scene>.canvas .product-art{width:38vw;height:35vw;max-height:none;top:45px!important;bottom:auto!important}
 .scene>.canvas .product-1{left:4%!important;right:auto!important}
 .scene>.canvas .product-2{left:auto!important;right:4%!important}
 .scene>.canvas .shadow-messages{left:10%!important;top:305px!important;width:80%!important;height:100px!important}
}
@media(max-width:420px){
 .botanical-grid{gap:28px 10px}.botanical-item figcaption{font-size:23px}
 .art,.reverse .art{height:310px}.whisper{font-size:28px}
 .tabs{gap:12px}.tabs .category-link{font-size:22px}
 .report-row,#report-list .report-row{grid-template-columns:80px minmax(0,1fr);gap:12px}
 .report-row h3{font-size:23px}.report-botanical,#report-list .report-botanical{height:110px}
 .form-choice{grid-template-columns:18px 75px minmax(0,1fr) 12px}
 .calendar-head,.harvest-row{grid-template-columns:1fr;gap:12px}
 .almond-art{height:310px}.pack-options{flex-wrap:wrap}
}
@media(max-height:500px) and (orientation:landscape){header.site-header .brand{width:75px}header.site-header.site-open #site-menu{padding-top:100px;gap:8px}header.site-header.site-open #site-menu>a{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.motion-allowed .motion-target.motion-seen{animation:section-arrival .7s ease-out both}
@keyframes section-arrival{from{opacity:.45;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.motion-target{animation:none!important}}

/* Tablet scenes keep text in document flow, including portrait iPads. */
@media(min-width:751px) and (max-width:1024px){
 .scene:not(.personal-letter)>.canvas{padding-top:520px}
 .scene>.canvas .shadow-messages{top:390px!important;height:100px!important}
 .scene.personal-letter>.canvas{display:flex;flex-direction:column;padding:65px 7vw;gap:32px;height:auto;min-height:0}
 .scene.personal-letter .heritage-art{width:100%;max-width:440px}
}
@media(max-width:1024px){
 header.site-header.site-open #site-menu{min-height:100vh;min-height:100dvh;max-height:100dvh}
 .scene .text-link{min-height:44px;padding-top:10px}
}

/* Official social profiles */
.footer-social{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}.footer-social a,.contact-social a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}.contact-social{display:flex;flex-wrap:wrap;gap:6px 24px}@media(max-width:760px){.footer-social{flex-basis:100%;justify-content:flex-start}}

/* Gallery and privacy navigation */
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;flex-basis:100%}.footer-legal a{display:inline-flex;align-items:center;min-height:44px}.footer-legal button{font-size:inherit}

/* Comfortable mobile reading and breadcrumb touch areas. */
@media(max-width:760px){
body .eyebrow,body .kicker{font-size:12px;line-height:1.6;letter-spacing:.09em}
body .breadcrumbs a,body .breadcrumb a{display:inline-flex!important;align-items:center;min-height:32px;padding-block:5px}
}


/* Phone composition only. Desktop and tablet artwork keep their original layout. */
@media(max-width:760px){
 html:root{scroll-padding-top:88px}
 body header.site-header{height:82px;padding:7px 5vw;align-items:center;background:#eee5ce;border-bottom:1px solid #753d4822}
 body header.site-header .brand{width:74px;padding:0}
 body header.site-header .site-menu-toggle{margin:0;min-height:44px;padding:8px 14px}
 body header.site-header.site-open #site-menu{padding-top:100px;padding-bottom:90px}
 body .mobile-decoration{display:none!important}
 body .tabs .category-link span:after{content:none}
 /* Keep the original atlas proportions, but remove both CSS transform systems. */
 body .art .crop,body .product-art,body .category-art .crop,body .family-illustration,body .visual-stage .illustration,body .almond-botanical,body .product-botanical,body .report-botanical,body .heritage-rider,body .heritage-label,body .rider,body .archive{
 transform:none!important;rotate:0deg!important;scale:1!important;
 }
 body .scene:not(:has(>.canvas)){padding:54px 7vw;gap:25px}
 body .scene.hero:not(:has(>.canvas)){padding-top:114px}
 body .scene:not(:has(>.canvas))>.art{height:auto;min-height:0;aspect-ratio:1.125;max-width:360px;width:100%;isolation:isolate}
 body .art .large{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.125}
 body .hero-art .first{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.125}
 body .hero-art .second,body .hero-art .third{display:none}
 body .art .disc,body .reverse .art .disc{inset:5% 4%;width:92%;height:86%;transform:none!important;border-radius:50%;z-index:-1}
 body .art .orbit{inset:0;transform:none!important;rotate:0deg;translate:none}
 body .art .whisper{display:none}
 body .category-art{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:20px}
 body .category-art .crop,body .category-art .crop+.crop{width:100%;height:auto;aspect-ratio:1.125;margin:0}
 body .family-illustration{position:relative;inset:auto;display:block;width:100%;height:100%;object-fit:contain}
 /* Buyer/supplier scenes: copy and specimens share normal flow, no floating layers. */
 body .scene:has(>.canvas){height:auto;min-height:0}
 body .scene:not(.personal-letter)>.canvas{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 8px;height:auto;min-height:0;padding:48px 7vw}
 body .scene.opening>.canvas{padding-top:112px}
 body .scene>.canvas .copy{grid-column:1/-1;grid-row:1;position:relative;inset:auto!important;width:100%!important;max-width:none!important;transform:none!important;translate:none!important;padding:0}
 body .scene>.canvas .product-art{position:relative;inset:auto!important;grid-row:2;width:100%;height:auto;aspect-ratio:1.125;max-height:none;margin:0;align-self:center}
 body .scene>.canvas .product-1{grid-column:1}
 body .scene>.canvas .product-2{grid-column:2}
 body .scene.single-specimen>.canvas .product-1{grid-column:1/-1;width:min(100%,310px);justify-self:center}
 body .scene>.canvas .shadow-messages,body .scene>.canvas .chapter-end,body .scene>.canvas .giant-circle,body .scene>.canvas .orbit,body .scene>.canvas .fit-disc,body .scene>.canvas .choice-disc,body .scene>.canvas .time-disc,body .scene>.canvas .sun-ring,body .scene>.canvas .person-disc,body .scene>.canvas .floating-word,body .scene>.canvas .back-word,body .scene>.canvas .giant-type{display:none}
 body .scene>.canvas:before{display:none}
 body .copy h1,body .copy h2{font-size:clamp(36px,9vw,46px);line-height:1.1}
 body .copy>p:not(.eyebrow){font-size:16px;line-height:1.65;margin-top:20px}
 body .copy .eyebrow{margin-bottom:18px}
 body .actions{gap:16px;margin-top:24px}
 body .actions .button{padding:12px 18px}
 body #category-caption{font-size:15px;line-height:1.6}
 body .report-row h3{font-size:24px;line-height:1.2}
}


/* Keep botanical motion inside the corrected phone composition. */
@media(max-width:760px){
 @keyframes phone-botanical-breathe{0%,100%{translate:0 3px}50%{translate:0 -5px}}
 .motion-allowed body .motion-art{animation:phone-botanical-breathe 5.5s ease-in-out infinite!important;animation-delay:var(--float-delay,0s)!important;animation-play-state:paused!important}
 .motion-allowed body .motion-art.motion-in-view{animation-play-state:running!important}
 .motion-page-hidden body .motion-art,body.still .motion-art{animation-play-state:paused!important}
}
@media(prefers-reduced-motion:reduce){body .motion-art{animation:none!important;translate:none!important}}
/* Phone artwork and captions have separate space; motion stays on the specimen. */
@media(max-width:760px){
 body .scene:not(:has(>.canvas))>.art{margin-inline:auto;justify-self:center}
 body .scene.family>.art{aspect-ratio:auto;height:auto;display:grid;justify-items:center;padding:18px 12px;gap:20px}
 body .scene.family .family-illustration{height:auto;max-height:340px;width:90%;object-fit:contain}
 body .scene.family .art .whisper{display:block;position:relative;inset:auto;font-size:26px;text-align:center;transform:none;rotate:0deg;margin:0}
 body .category-art{align-items:center;padding:10px 0 20px;gap:16px}
 body .category-art .crop{position:relative;inset:auto!important;min-width:0;align-self:center}
 body #category-caption{position:relative;clear:both;margin:20px auto;max-width:32ch;text-align:center}
 body .almond-art{height:auto;display:grid;justify-items:center;gap:14px;padding:18px 8px;transform:none!important;max-width:360px;margin-inline:auto}
 body .almond-art .almond-botanical{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.125;grid-row:1}
 body .almond-art .art-disc{inset:0 0 25%;transform:none!important;rotate:0deg}
 body .almond-art .art-orbit{inset:0 0 25%;transform:none!important;rotate:0deg}
 body .almond-art .botanical-name{position:relative;inset:auto;writing-mode:horizontal-tb;transform:none!important;rotate:0deg;text-align:center;font-size:15px}
 body .almond-art .art-caption{position:relative;inset:auto;transform:none!important;rotate:0deg;text-align:center;font-size:29px;line-height:1.2;color:var(--wine)}
 body .detail-art{height:auto;display:grid;justify-items:center;gap:18px;padding:15px 8px}
 body .detail-art .product-specimen{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.1;object-fit:contain}
 body .detail-art .detail-disc{inset:0 0 20%;rotate:0deg}
 body .detail-art .whisper{position:relative;inset:auto;transform:none;rotate:0deg;text-align:center;font-size:28px}
}
@media(max-width:760px){
 body #harvest #product-globe .stage,body #product-globe .stage{height:auto;display:flex;flex-direction:column;margin:0;background:transparent;gap:14px}
 body #product-globe .stage canvas{height:300px;flex:none;width:100%}
 body #product-globe .annotation{position:static;max-width:none;text-align:center;font-size:11px;order:1}
 body #product-globe .controls{position:static;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;order:2;margin:0 0 12px}
 body #product-globe .controls button{width:100%;min-width:0;font-size:13px}
 body #harvest #product-globe .countries,body #product-globe .countries{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:8px;padding:12px 0 20px;scroll-padding-inline:8px}
 body #product-globe .countries button{flex:0 0 auto;white-space:nowrap;font-size:13px}
}
/* Give the phone collection a compact editorial rhythm and larger specimens. */
@media(max-width:760px){
 body .products{padding:42px 7vw}
 body .products-heading h2{font-size:clamp(35px,9vw,44px);line-height:1.08}
 body .product-explorer{margin-top:26px;gap:14px}
 body .tabs{gap:14px}
 body .tabs .category-link{font-size:22px;padding:12px 0;min-height:48px}
 body .category-art{width:calc(100% + 10vw);margin:0 -5vw;padding:8px 0;gap:0}
 body .category-art .crop,body .category-art .crop+.crop{aspect-ratio:1;min-height:190px}
 body #category-caption{margin:10px auto 16px;font-size:15px;line-height:1.5;max-width:30ch}
 body #category .link{margin-top:0;padding:8px 0;display:inline-block}
}

/* Direct contact replaces preview enquiry forms in both languages. */
.contact-invitation{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;padding:30px 0;min-width:0}
.contact-invitation p{margin:0;max-width:46ch;line-height:1.7}
.contact-invitation .contact-email{display:inline-block;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}
@media(max-width:760px){
 body .scene>.canvas .margin-note,body .scene>.canvas .scroll-cue{position:static!important;grid-column:1/-1;writing-mode:horizontal-tb;transform:none;translate:none;text-align:left;width:100%;max-width:none;margin:0;justify-self:start;align-self:start;line-height:1.6}
 body .scene>.canvas .margin-note{grid-row:3;margin-top:16px}
 body .scene>.canvas .scroll-cue{grid-row:4;margin-top:0}
 body .scene>.canvas .scroll-cue span{display:none}
 body .chapter-copy p+h2{margin-top:48px}
 body .chapter-copy h2+p{margin-top:24px}
 .contact-invitation{padding:20px 0;gap:22px}
}
/* Compact mobile storytelling; desktop retains its full editorial composition. */
@media(max-width:760px){
 body .scene.opening>.canvas{padding-bottom:28px;row-gap:16px}
 body .scene.opening>.canvas .margin-note,body .scene.opening>.canvas .scroll-cue{display:none}
 body .scene>.canvas .copy{max-width:100%;width:100%}
 body .scene>.canvas .copy h1,body .scene>.canvas .copy h2{text-wrap:balance}
 body .scene>.canvas .copy .text-link{margin-top:20px;margin-bottom:4px}
 body .scene>.canvas .product-art{max-width:175px;justify-self:center}
 body .scene>.canvas{row-gap:24px}
}
/* One botanical illustration per scene on phones; preserve desktop pairs. */
@media(max-width:760px){
 body .scene>.canvas .product-art{grid-column:1/-1;width:min(100%,285px);max-width:285px;justify-self:center;margin:0 auto}
 body .scene>.canvas .product-1{grid-column:1/-1;grid-row:2}
 body .scene>.canvas .product-2{display:none}
 body .scene>.canvas .margin-note{grid-row:3}
 body .scene>.canvas .scroll-cue{grid-row:4}
}
/* Scroll-linked movement owns translate; existing illustration transforms are preserved. */
html body .scroll-product-art.scroll-product-art{animation:none!important;translate:0 var(--product-scroll-y,0px)!important;transition:translate .18s ease-out}
@media(prefers-reduced-motion:reduce){html body .scroll-product-art{translate:none!important;transition:none}}
html body.still .scroll-product-art{translate:none!important;transition:none}

@media(max-width:760px){
 body .scene>.canvas .product-art{margin-block:34px}
 body .scene>.canvas .heritage-rider{margin-block:34px}
}

/* Homepage reports stay steady while reading; only the hovered image responds. */
html body .market-home .report-botanical,html body .market-home .report-botanical .crop{animation:none!important;translate:none!important}
html body .market-home .report-botanical .crop{transform:none;transition:transform .25s ease-out}
@media(hover:hover) and (prefers-reduced-motion:no-preference){html body:not(.still) .market-home .report-botanical:hover .crop{transform:scale(1.015)}}
