), hiding the icon's own wrapper along with the text
label and leaving a genuinely empty circle, not an icon-only button. */
.site-side-tab__label{display:none}
.site-side-tab__icon{display:block}
.site-side-tab:hover,.site-side-tab:focus-visible{padding-inline:0}
.home-back-to-top{right:14px;bottom:80px;width:40px;height:40px}
}
/* R3: card-free. Research flagged R2's dark-green cards with a watermarked
icon as the generic "stock SaaS pricing tile" pattern — the icon
competes with the number for visual weight instead of supporting it.
Bare typography instead: numbers in the brand dark-green sitting
directly on this section's own soft-grey background, separated by a
hairline divider rather than card boundaries. No card box left to
overlap the hero photo against, so this section no longer overlaps it —
a plain padded band underneath instead. */
.hero-stat-band-section{background:var(--bg-soft);position:relative;padding-block:clamp(48px,7vw,72px)}
@media(min-width:901px){
.hero-stat-band-section{width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
}
.hero-stat-row{display:flex;flex-wrap:wrap;position:relative}
.hero-stat{flex:1 1 0;min-width:180px;text-decoration:none;color:inherit;
display:flex;flex-direction:column;gap:var(--space-2);padding:0 clamp(20px,3.5vw,48px);position:relative}
.hero-stat:first-child{padding-left:0}
.hero-stat:not(:first-child){border-left:1px solid rgba(21,61,46,.14)}
/* Impeccable live-variant round ("Rhythm"): every stat now carries the
small lime accent mark, not just the lead one — full opacity on the
lead, reduced on the rest, so the row reads as a regular, considered
rhythm rather than one stat dominating via a bigger type scale. */
.hero-stat::before{content:"";position:absolute;top:-16px;left:clamp(20px,3.5vw,48px);width:24px;height:3px;
border-radius:2px;background:var(--lime-500);opacity:.55}
.hero-stat:first-child::before{left:0;opacity:1}
.hero-stat__value{font-family:var(--font-head);font-weight:700;color:var(--green-900);
font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;
font-size:var(--fs-h2)}
.hero-stat__plus{color:var(--lime-700)}
/* Same size as every other stat-style label on the site (.stat__label) —
was a one-off var(--fs-xl), nearly 70% bigger than its sitewide
equivalent for no reason tied to this component specifically. Darker
than --muted's default grey, since it still needs to hold its own next
to the bold number above it at this smaller size. */
.hero-stat__label{font-size:var(--fs-micro);font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:#48564e}
.hero-stat:hover .hero-stat__value,.hero-stat:focus-visible .hero-stat__value{color:var(--green-700)}
@media (max-width:640px){
.hero-stat-row{flex-direction:column;gap:var(--space-7)}
.hero-stat{padding:0}
.hero-stat:not(:first-child){border-left:none;padding-top:var(--space-6);border-top:1px solid rgba(21,61,46,.14)}
.hero-stat::before{top:-14px}
}
/* Cohesive-homepage brief: three entry routes under the trust stats, and
a shared "journey-heading" split (heading left, supporting copy/link
right) reused across Product Families, Industries and Certifications
so those three intros read as one consistent narrative device rather
than three independently-styled section heads. */
.journey-links{display:flex;align-items:center;gap:var(--space-7);margin-top:var(--space-7);
border-top:1px solid var(--line);padding-block:var(--space-6)}
.journey-links>span{font-size:var(--fs-micro);color:var(--muted);margin-right:auto}
.journey-links a{display:inline-flex;align-items:center;min-height:32px;font-size:var(--fs-caption);font-weight:600;text-decoration:none;color:var(--green-900)}
.journey-links a span{margin-left:var(--space-4)}
.journey-links a:hover,.journey-links a:focus-visible{color:var(--lime-700)}
@media(max-width:640px){
.journey-links{flex-wrap:wrap;gap:var(--space-5) var(--space-6);padding-block:var(--space-5);margin-top:var(--space-5)}
.journey-links>span{width:100%}
}
/* !important on display/gap/align-items/h2 max-width: this class is applied
alongside each section's own pre-existing intro class (.explorer__head,
.impact-intro, .section--dark's plain heading) which already sets its
own display/grid-template-columns/align-items at equal specificity and
LATER in the cascade — without !important here, that older rule silently
wins and .journey-heading's grid never actually applies. */
.journey-heading{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:var(--space-9)!important;align-items:end!important;margin-bottom:var(--space-8)}
.journey-heading h2{max-width:23ch!important;margin:0!important}
/* Scoped to .journey-heading__context specifically, not a bare descendant
"p" — .journey-heading's OTHER child div also holds a
eyebrow (and h2), and a bare "p" selector here was silently overriding
that pill's own font-size/color with the supporting copy's, since both
are
elements under the same .journey-heading ancestor. */
.journey-heading__context p{margin:0;max-width:48ch;line-height:1.65;font-size:var(--fs-h5)}
.journey-heading__context>a{margin-top:var(--space-5)}
.journey-heading--light .journey-heading__context p{color:var(--on-dark)}
.journey-heading--light .pill{color:var(--lime-500);border-color:rgba(255,255,255,.25);background:transparent}
@media(max-width:800px){
.journey-heading{grid-template-columns:1fr!important;gap:var(--space-5)!important;margin-bottom:var(--space-6)}
}
.journey-text-link{display:inline-block;margin-top:var(--space-5);color:inherit;
font-size:var(--fs-h6);text-decoration:underline;text-underline-offset:5px}
.journey-text-link span{padding-left:var(--space-3)}
/* Manufacturing + Certifications share this pale background so the two
sit together as one "assurance chapter" instead of two unrelated blocks.
!important: both sections already carry their own background rule
(.section--soft, .standards-section) that's equal specificity and later
in the cascade — without this, that rule wins and the two backgrounds
never actually match. */
.journey-assurance{background:#f0f3ec!important}
/* R2: one large award photograph (was two stacked / a 2-photo slider —
with only two real photos a slider read sparse, not prestigious)
alongside the dark story panel. */
/* MASTER-PROMPT.md section H: a dedicated two-column grid (not the generic
.split, used elsewhere for top-aligned text pairs) — align-items:stretch
so the panel's outer top/bottom match the photo's full height. */
.awards-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--space-6);align-items:stretch;position:relative}
.award-photo{margin:0;border-radius:var(--radius);overflow:hidden;background:#fff;
border:1px solid var(--line);height:100%;display:flex;flex-direction:column}
.award-photo img{width:100%;aspect-ratio:900/700;object-fit:cover;display:block;flex:1}
.award-photo figcaption{padding:var(--space-3) var(--space-4);font-size:var(--fs-micro);color:var(--muted);border-top:1px solid var(--line)}
.award-story{background:var(--green-900);border-radius:var(--radius);padding:clamp(24px,3vw,32px);
color:var(--on-dark);display:flex;flex-direction:column}
.award-story h2{color:#fff;margin-top:0}
.award-story__logo-badge{display:inline-flex;width:64px;height:64px;border-radius:50%;
background:#fff;align-items:center;justify-content:center;margin-bottom:var(--space-5);flex:none}
.award-story__logo-badge img{width:40px;height:auto}
/* Pull-quote scale for the credential statement itself — this is the
visual hero of the section, not a regular section heading. */
.award-story__quote{font-size:var(--fs-h3);line-height:1.24}
.award-story__cta{margin-top:auto;padding-top:var(--space-5)}
@media(min-width:901px){
/* Badge pulled left out of the panel's own padding box via negative
margin so it visually straddles the photo/panel seam like a medallion,
rather than sitting tucked inside the text block. Pure flow + margin —
no absolute positioning/reparenting needed. */
.award-story__logo-badge{width:88px;height:88px;margin-left:-64px;margin-bottom:var(--space-6);
box-shadow:0 10px 30px rgba(21,61,46,.28);border:4px solid var(--bg-soft);position:relative;z-index:2}
.award-story__logo-badge img{width:52px}
}
@media (max-width:900px){
.awards-grid{grid-template-columns:1fr;align-items:stretch}
.award-story{height:auto}
}
/* ---------- homepage award carousel (both PLEXCONCIL cycles) ----------
R5: the text/badge caption used to sit overlaid on the photo (dark
scrim + white text) — read as a mismatched layer glued onto the image
rather than part of the page. Rebuilt as a contained, rounded photo
frame (matching every other card/photo treatment on the site, not a
full-bleed break-out) with the caption and controls living in their own
row underneath, on the section's own background — the photo stays
purely photographic, the text reads as normal page copy. Crossfade
between cycles is still opacity-only (no layout-affecting animation);
gentle autoplay (6s) pauses on hover/focus/interaction and never starts
under prefers-reduced-motion (see the inline script). */
/* R4: was .wrap and .award-intro combined on one element — .wrap's own
margin-inline:auto centering plus this narrower max-width centered a
64ch column on the viewport instead of leaving it flush with the left
edge every other section's content starts from. Now a plain .wrap
wraps this div (matching every other section's structure below), so
.award-intro just needs to sit at the start of that already-correctly-
positioned box, not centered again itself. */
.award-intro{max-width:64ch;margin:0 auto var(--space-7) 0}
.award-intro__quote{line-height:1.22;color:var(--green-900);margin:var(--space-3) 0 0}
/* Cohesive-homepage brief REFINE: side-by-side split (text .8fr | carousel
1.2fr) — was text stacked full-width above a second full-width carousel
block. .award-intro's own max-width/centering (above) is for when it's
NOT inside this grid; within it, the grid column is the width. */
.revision-awards{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-9);align-items:center}
.revision-awards .award-intro{max-width:none;margin:0}
.revision-awards .award-carousel{width:100%;max-width:none;margin:0}
@media(max-width:900px){
.revision-awards{grid-template-columns:1fr;gap:var(--space-7)}
}
/* R6: research pass (IBM/HashiCorp/Sanity DESIGN.md references) — enterprise
credential surfaces are consistently thin-bordered white/near-white tiles
with one accent color used sparingly (IBM Blue, HashiCorp's per-product
accent), never a loud solid-fill block for this kind of proof content.
Mirrors the hairline-divider rhythm of .story-timeline__item above it, so
the two "considered facts" lists on this page (who-we-are, this award
proof) read as one system rather than two different components. */
.award-proof{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(28px,4vw,36px);display:flex;flex-direction:column}
/* The PLEXCONCIL source artwork (plexconcil-logo.webp) is a tall 220x300
seal — the round emblem plus a pointed tail hanging below it, not a
square icon. Squashing it to a fixed 30px width (the old rule) shrank
the whole tall shape into the circle, leaving the seal's fine print
illegible and the tail spilling out past the circular background as a
stray red sliver. object-fit:cover + overflow:hidden crops to just the
round emblem (roughly the image's own top 220/300) instead. */
.award-proof__badge{flex:none;width:52px;height:52px;border-radius:50%;background:var(--bg-soft);
overflow:hidden;display:grid;place-items:center;margin-bottom:var(--space-5)}
.award-proof__badge img{width:52px;height:52px;object-fit:cover;object-position:top}
.award-proof__value{font-family:var(--font-head);font-weight:700;line-height:1;letter-spacing:-.02em;
color:var(--green-900);font-size:var(--fs-h1)}
.award-proof__label{margin:var(--space-2) 0 0;color:var(--muted);max-width:32ch}
.award-proof__cycles{list-style:none;margin:var(--space-6) 0 0;padding:0}
.award-proof__cycles li{display:flex;flex-direction:column;gap:3px;padding:var(--space-4) 0;
border-top:1px solid var(--line);font-size:var(--fs-micro);color:var(--ink)}
.award-proof__cycles li:first-child{border-top:none;padding-top:0}
.award-proof__year{font-family:var(--font-head);font-weight:600;color:var(--lime-700);
font-variant-numeric:tabular-nums}
.award-carousel__frame{position:relative;aspect-ratio:21/9;min-height:240px;overflow:hidden;
border-radius:var(--radius);background:var(--green-900)}
.award-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s var(--ease-standard, ease)}
.award-slide.is-active{opacity:1}
.award-slide img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.03)}
/* FY23-25 slide's real file is 900x593 (not the 1920x822 the ![]()
attrs
claim) — a centered crop into this 21:9 stage cuts the tops of the
standing recipients' heads. Biased toward the top of the frame instead,
which keeps the trophy (well below head height in this photo) fully
in view either way. */
.award-slide[data-award-slide="0"] img{object-position:center 25%}
.award-carousel__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-6)}
.award-carousel__badge{flex:none;width:48px;height:48px;border-radius:50%;background:var(--bg-soft);
overflow:hidden;display:grid;place-items:center;box-shadow:0 1px 0 var(--line) inset}
.award-carousel__badge img{width:48px;height:48px;object-fit:cover;object-position:top}
.award-carousel__text{flex:1 1 auto;min-width:220px;display:flex;flex-direction:column;gap:3px}
.award-carousel__year{font-family:var(--font-head);font-weight:700;font-variant-numeric:tabular-nums;
letter-spacing:-.02em;font-size:var(--fs-h5);color:var(--green-900)}
.award-carousel__title{font-size:var(--fs-micro);color:var(--muted);max-width:44ch}
.award-carousel__controls{flex:none;display:flex;align-items:center;gap:var(--space-4);margin-left:auto}
.award-carousel__arrow{position:static;width:36px;height:36px;flex:none;
border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--green-900);cursor:pointer;
display:grid;place-items:center;transition:background .2s ease,color .2s ease,border-color .2s ease}
.award-carousel__arrow:hover{background:var(--lime-500);border-color:var(--lime-500)}
.award-carousel__dots{display:flex;gap:var(--space-2);align-items:center}
.award-carousel__dot{width:7px;height:7px;border-radius:50%;border:none;background:var(--line);
cursor:pointer;padding:0;transition:background .2s ease,transform .2s ease}
.award-carousel__dot.is-active{background:var(--lime-500);transform:scale(1.35)}
@media(max-width:640px){
.award-carousel__meta{gap:var(--space-3)}
.award-carousel__title{display:none}
.award-carousel__controls{margin-left:0}
/* Real ~390px overflow bug: aspect-ratio:21/9 (desktop's cinematic crop)
combined with the desktop min-height:240px fought each other once the
frame's own width dropped below ~515px — the UA satisfies both by
solving the ratio from the taller min-height instead of the actual
available width, computing a ~560px-wide box that overflowed a 390px
viewport (confirmed via getBoundingClientRect: width came back 560px,
exactly 240 * 21/9). A calmer 4:3 crop + min-height:0 here removes the
conflict at its source instead of clipping the symptom globally. */
.award-carousel__frame{aspect-ratio:4/3;min-height:0}
}
/* Section 5: enquiry-image composition on /contact-us/ only (the one page
that keeps a full contact form) — image sits alongside the form on
desktop, but is DOM-ordered after it so mobile always reaches the
fields first; a short max-height on mobile keeps it compact rather
than a full-bleed photo pushing the rest of the page down. */
.contact-form-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-7);align-items:start}
.contact-form-layout>*{min-width:0}
.contact-form-layout__image{position:sticky;top:100px;border-radius:var(--radius);overflow:hidden}
.contact-form-layout__image img{width:100%;height:auto;display:block}
@media (max-width:900px){
.contact-form-layout{grid-template-columns:1fr}
.contact-form-layout__image{position:static;order:2;max-height:220px}
.contact-form-layout__image img{height:220px;object-fit:cover}
}
/* A01: .section owns BLOCK spacing only (padding-block, not the `padding`
shorthand) so it never resets .wrap's inline gutters when both classes
land on the same element (`class="section wrap"`, used throughout the
templates). Using the shorthand here previously zeroed the container's
left/right padding on every combined element. */
.section{padding-block:var(--gap-section)}
.section--tight{padding-block:clamp(40px,6vw,64px)}
.section--tight-top{padding-top:clamp(28px,4vw,40px)}
.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--green-800);color:var(--on-dark);border-radius:var(--radius);margin-inline:var(--space-6)}
.section--dark h2{color:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:start}
/* The thermoforming copy column is shorter than the tall dark studio
panel beside it — top-aligning left it pinned to the top with a large
dead gap below the stat line. Centering distributes it against the
panel's full height instead. */
.split--center{align-items:center}
/* "Who We Are" home section — stacked, full-width text, then (R2) a
vertical timeline paired with a supporting photo underneath, replacing
an earlier 4-box click-to-expand accordion row that read monotonous and
hid content behind a click a B2B skimmer wouldn't bother with.
.who-we-are-head caps the text block's width so it doesn't stretch into
an unreadably long line now that it's not sharing the row with anything. */
.who-we-are-head{max-width:62ch}
/* R11: the intro row (pill/heading/lede/CTA) had nothing on its right —
same empty-column problem the award section had. The team photo now
fills it here (a real photo earning its place next to the "who we are"
claim) instead of sitting lower against the facts grid, which reads
better full-width and unadorned — see .story-timeline below. */
/* Dedicated row class (not the generic .split, used elsewhere for
top-aligned text pairs — same precedent as .awards-grid below) with
align-items:stretch, so the photo fills the same height as the text
column instead of sitting as a small square beside it. object-position:
top anchors the crop to the building signage and faces (the top ~70% of
the source) so only the bottom (grass/legs) is ever cropped. */
.who-we-are-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:stretch}
/* position:relative/absolute, not height:100% on the img directly — a
grid row's height is resolved from items' natural content size BEFORE
align-items:stretch applies, and an ![]()
with no aspect-ratio override
contributes its own real file dimensions (1200x1200, square) to that
calculation regardless of the height:100% rule. Absolutely positioning
the img removes it from that calculation entirely, so the row's height
comes only from .who-we-are-head's actual text content, and the photo
genuinely fills whatever that turns out to be. */
.who-we-are-photo{border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);
height:100%;position:relative}
.who-we-are-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block}
@media(max-width:900px){
.who-we-are-row{grid-template-columns:1fr}
.who-we-are-photo{height:auto;aspect-ratio:16/9;position:relative}
}
.story-timeline-layout{margin-top:var(--space-2)}
/* R7: a single stacked column of 4 full-paragraph rows made this section
the tallest thing on the homepage before the page "took shape" — the
owner flagged the section as too tall. Compressed into a data-grid
(spec-table device, not a scrolling list) with the copy itself tightened
to one line each, so all four facts read in one glance. Runs full-width
and unadorned — the photo lives in the intro row above instead (R11).
Border lines only between cells, matching the "considered facts, not
decoration" device on the award-proof card. */
.story-timeline{list-style:none;margin:0;padding:0;counter-reset:story-row;
display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.story-timeline__item{counter-increment:story-row;padding:var(--space-6)}
.story-timeline__item:not(:nth-child(4n+1)){border-left:1px solid var(--line)}
.story-timeline__marker{display:block;font-family:var(--font-head);font-weight:700;line-height:1;color:var(--lime-600);
font-variant-numeric:tabular-nums;font-size:var(--fs-h5);margin-bottom:var(--space-2)}
.story-timeline__marker::before{content:counter(story-row,decimal-leading-zero)}
/* min-height reserves space for a 2-line label — one of the four ("One
facility, vertically integrated") wraps to 2 lines while its siblings
are 1, which pushed only that card's body copy down and broke the
aligned row the other three cards shared. */
.story-timeline__label{margin:0 0 var(--space-2);font-family:var(--font-head);font-weight:600;color:var(--green-900);
font-size:var(--fs-caption);line-height:1.3;min-height:2.6em}
.story-timeline__body{margin:0;color:var(--muted);font-size:var(--fs-micro);line-height:1.5}
@media(max-width:900px){
.story-timeline{grid-template-columns:1fr 1fr}
.story-timeline__item:not(:nth-child(4n+1)){border-left:none}
.story-timeline__item:nth-child(even){border-left:1px solid var(--line)}
.story-timeline__item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:560px){
.story-timeline{grid-template-columns:1fr}
.story-timeline__item{border-left:none!important}
.story-timeline__item:nth-child(n+2){border-top:1px solid var(--line)}
}
/* S24: a contained, rounded card version of .split — for the product-page
Overview panel sitting directly under the hero image, distinct from
.section--soft's full-bleed tinted band used for the same pill/heading
pattern elsewhere (ui1/ui3/ui4). */
.overview-box{background:var(--bg-soft);border-radius:var(--radius);padding:clamp(28px,4vw,48px)}
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6);margin-top:var(--space-8)}
@media (min-width:901px){
.cards-3:has(> :only-child){grid-template-columns:minmax(260px,420px)}
.cards-3:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(260px,1fr));max-width:760px}
}
.card-dark{background:var(--card-dark);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:var(--space-7);display:flex;flex-direction:column}
.card-dark h3{color:#fff}
.card-dark p{color:var(--on-dark);font-size:var(--fs-micro)}
/* Grid rows already stretch every card to the tallest card's height
(.cards-3's default grid stretch), but the arrow used to sit right after
the blurb text — so a short blurb left its arrow floating high while a
longer blurb's arrow sat much lower, and the three never lined up. This
pins the arrow to the bottom of every card regardless of blurb length. */
.card-dark .btn-arrow{margin-top:auto;align-self:flex-start}
/* ---------- product families ----------
R4: removed the "Closer look" reveal chip/caption overlay entirely (was
a second interaction system layered over the photo) — heading → image →
description → explore link, nothing else. Fixed equal-width columns
(grid, not flex-basis tricks) so nothing shifts between cards. A plain
hover zoom on the photo is kept — a simple, sitewide-standard image
treatment, not a second affordance. */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-7)}
.pf-card{display:flex;flex-direction:column;gap:var(--space-3)}
.pf-card__kicker{margin:0;font-family:var(--font-head);font-weight:700;font-size:var(--fs-caption);
letter-spacing:.09em;text-transform:uppercase;color:var(--lime-500)}
.pf-card h3{color:#fff;margin:0;font-size:var(--fs-h2)}
.pf-card__blurb{margin:0;color:var(--on-dark);font-size:var(--fs-h5);line-height:1.5;min-height:3em}
.pf-card__media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--green-800)}
.pf-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pf-card:hover .pf-card__media img{transform:scale(1.08)}
.pf-card__link{color:#fff;margin-top:auto;padding-top:var(--space-1);font-size:var(--fs-caption)}
@media(max-width:900px){.pf-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
.pf-card__media img{transition:none}
}
/* ---------- award plaques (Awards & Recognition page) ----------
Two named, government-issued award titles read as awards — rank, fiscal
year, exact title — rather than as generic capability-proof cards.
Built from the same card-dark-on-section--dark pairing "Three product
families" already uses on the homepage, so it sits naturally in the
existing visual system instead of introducing a new card language. */
.award-plaques-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-6);flex-wrap:wrap}
.award-plaques-logo{flex:none;width:56px;height:auto;background:#fff;border-radius:12px;padding:var(--space-2)}
.award-plaques{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-7)}
.award-plaque__rank{display:block;font-family:var(--font-head);font-weight:600;
font-size:var(--fs-h2);line-height:1;color:var(--lime-500)}
.award-plaque__year{display:inline-block;margin:var(--space-2) 0 var(--space-4);padding:var(--space-1) var(--space-3);border-radius:999px;
background:rgba(255,255,255,.1);font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--on-dark)}
.award-plaque h3{font-size:var(--fs-h6);line-height:1.3}
@media (max-width:800px){ .award-plaques{grid-template-columns:1fr} }
/* ---------- responsive ---------- */
@media (max-width:600px){
:root{--gap-section:44px}
.section--tight{padding-block:var(--space-7)}
}
@media (max-width:900px){
/* nav rules moved to the "mega-menu: mobile modal drawer" section at end of file */
.split,.cards-3,.stat-band,.site-footer__inner,.site-footer__addresses{grid-template-columns:1fr}
.stat+.stat{border-left:0;border-top:1px solid var(--line)}
.section--dark{margin-inline:0;border-radius:0}
}
/* ---------- ui1: format grid ---------- */
.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-8)}
.format-card{background:var(--bg-soft);border-radius:var(--radius-sm);overflow:hidden}
.format-card__img{aspect-ratio:4/3;display:grid;place-items:center;border-radius:0}
.format-card__code{font-family:var(--font-head);font-weight:600;color:var(--green-900);margin:var(--space-4) var(--space-4) var(--space-1)}
.format-card__meta{color:var(--muted);font-size:var(--fs-micro);margin:0 var(--space-4) var(--space-4)}
/* ---------- dark card grids ---------- */
.cards-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5);margin-top:var(--space-8)}
/* :has() selectors below are guarded to >560px: their specificity otherwise
beats the mobile single-column override at line ~315 regardless of source
order, forcing fixed-width columns that overflow narrow viewports. */
@media (min-width:561px){
.cards-4:has(> :only-child){grid-template-columns:minmax(220px,380px)}
.cards-4:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(220px,1fr));max-width:680px}
.cards-4:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(220px,1fr))}
/* S11: a wide enough minimum to actually drop to 3 columns at desktop
widths (260px still let 4 fit) — used on the downloadable-catalogues
grid specifically, whose titles are longer than a typical card label. */
.cards-3.dl-cards{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
}
/* Flexible count (1-4 items, e.g. an industry's recommended-products row) —
never stretches a single strong match into a fake 3-up grid. */
.cards-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5)}
.cards-auto:has(> :only-child){max-width:340px}
.cards-auto:has(> :nth-child(2):last-child){max-width:620px}
.cards-auto:has(> :nth-child(3):last-child){max-width:900px}
/* 4+ items: no cap — auto-fit already has enough real items to fill the
full wrap width evenly (the 900px cap here was forcing a real 4-item
row to wrap its 4th card onto its own line instead of filling out) */
/* S17: was a hardcoded "◆" placeholder glyph — a CSS-styled dot, the same
no-glyph-icon technique .fit-canvas__dot already uses elsewhere, replaces
it as a real (if plain) icon rather than leftover placeholder text. */
.card-dark__icon{width:16px;height:16px;border-radius:50%;background:var(--lime-500);
display:block;margin-bottom:var(--space-4);box-shadow:0 0 0 4px rgba(166,215,32,.18)}
/* ---------- faq accordion ---------- */
.faq__item{border-bottom:1px solid var(--line);scroll-margin-top:96px}
.faq__item.is-target{border-color:var(--green-700);box-shadow:0 0 0 3px rgba(37,107,79,.15)}
.faq__item summary{list-style:none;cursor:pointer;padding:var(--space-5) var(--space-8) var(--space-5) 0;position:relative;
font-family:var(--font-head);font-weight:500;color:var(--green-900);font-size:var(--fs-caption)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:6px;top:18px;width:28px;height:28px;
border:1px solid var(--line);border-radius:999px;display:grid;place-items:center;color:var(--muted)}
.faq__item[open] summary::after{content:"–"}
.faq__body{padding:0 0 var(--space-5);color:var(--muted)}
.faq__body p{margin:0}
/* S15: sub-heading between FAQ groups (item.group in the data) — the first
one sits flush with the list, later ones get breathing room from the
group above. */
.faq__group-heading{font-family:var(--font-head);font-weight:700;font-size:var(--fs-micro);
letter-spacing:.08em;text-transform:uppercase;color:var(--lime-700);
margin:var(--space-7) 0 var(--space-1)}
.faq__group-heading:first-child{margin-top:0}
/* ---------- filter chips ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7)}
.chip{display:inline-flex;align-items:center;gap:var(--space-3);background:var(--bg-soft);border-radius:999px;
padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5);text-decoration:none;color:var(--green-900);font-family:var(--font-head);font-weight:500;
border:1px solid transparent;cursor:pointer;font-size:inherit}
.chip span{width:28px;height:28px;border-radius:999px;background:var(--green-900);color:#fff;display:grid;place-items:center;font-size:var(--fs-micro)}
button.chip[aria-current="true"]{background:var(--green-900);color:#fff}
/* Active-filter/search chips (catalogue toolbar's "Search: stra" / "Kiwi" /
application tags) are their own component, not `.chip` — `.chip span`
above is sized as a 28px circular icon for a trailing arrow glyph
(see ui1.html's related-content chips), which previously also caught
this component's actual label text and squeezed it into that same tiny
circle, clipping it down to 3-4 letters. */
.filter-chip{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--bg-soft);
border:1px solid var(--line);border-radius:999px;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);
font-size:var(--fs-micro);color:var(--green-900);font-weight:500;max-width:100%}
.filter-chip>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-chip button{flex-shrink:0;width:22px;height:22px;border-radius:999px;border:1px solid var(--line);
background:#fff;color:var(--muted);cursor:pointer;font-size:var(--fs-micro);line-height:1;padding:0;
display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease}
.filter-chip button:hover{background:var(--green-900);color:#fff;border-color:var(--green-900)}
/* ---------- pre-footer contact card ---------- */
.pre-footer{margin:var(--gap-section) auto clamp(48px,6vw,80px)}
.contact-card{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--bg-soft);border-radius:var(--radius);overflow:hidden}
.contact-card__form{padding:clamp(28px,4vw,48px)}
.contact-card__sub{color:var(--muted);margin-bottom:var(--space-6)}
.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.lead-form label{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-micro);color:var(--muted);font-weight:500}
.lead-form input,.lead-form textarea{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font:inherit;font-size:var(--fs-caption);background:#fff}
.lead-form__full{grid-column:1/-1}
.lead-form .btn{grid-column:1/-1;justify-self:start;margin-top:var(--space-1)}
.contact-card__aside{position:relative;background:var(--green-800);min-height:340px}
.contact-card__trust{position:absolute;inset:0;padding:clamp(28px,4vw,44px) var(--space-6) 96px;
display:flex;flex-direction:column;justify-content:center;color:#fff}
.contact-card__trust-eyebrow{margin:0 0 var(--space-3);color:var(--lime-500);font-family:var(--font-head);
font-weight:700;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase}
.contact-card__trust-line{margin:0 0 var(--space-6);font-family:var(--font-head);font-weight:500;
font-size:var(--fs-h6);line-height:1.35;max-width:26ch}
.contact-card__trust-list{list-style:none;margin:0;padding:var(--space-5) 0 0;border-top:1px solid rgba(255,255,255,.18);
display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--fs-micro);color:var(--on-dark)}
.contact-card__trust-list span{color:var(--lime-500);font-family:var(--font-head);font-weight:600;margin-right:var(--space-2)}
.contact-card__note{position:absolute;left:20px;right:20px;bottom:20px;background:#fff;border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);font-size:var(--fs-micro);margin:0}
/* ---------- newsletter bar ---------- */
.newsletter{background:var(--green-800);color:var(--on-dark)}
.newsletter__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);padding:var(--space-8) 0;flex-wrap:wrap}
.newsletter__inner p{max-width:52ch;margin:0}
.newsletter__form{display:flex;align-items:center;gap:var(--space-3);background:#fff;border-radius:999px;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-6);min-width:320px}
.newsletter__success{display:none;color:var(--lime-500);font-family:var(--font-head);font-weight:600;margin:0;padding:var(--space-3) var(--space-6)}
.newsletter__success[data-open="true"]{display:block}
.newsletter__form input{border:0;font:inherit;padding:var(--space-3) 0;flex:1;min-width:0;background:transparent}
.newsletter__form input:focus-visible{outline:2px solid var(--green-700);outline-offset:2px;border-radius:4px}
/* footer heading -> lime, legal/social rows */
.site-footer__heading{color:var(--lime-500)}
.site-footer__legal{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin:0;padding:0;text-transform:uppercase;font-size:var(--fs-micro);letter-spacing:.06em}
.site-footer__bar{flex-wrap:wrap;gap:var(--space-4)}
@media (max-width:900px){
.format-grid,.cards-4{grid-template-columns:1fr 1fr}
.contact-card,.lead-form{grid-template-columns:1fr}
.newsletter__form{min-width:0;width:100%}
}
@media (max-width:560px){ .format-grid,.cards-4{grid-template-columns:1fr} }
/* ---------- ui4 / ui3: feature + link cards, centered sections, spec list ---------- */
.centered{text-align:center}
.centered .pill,.centered .cards-4,.centered .cards-3{text-align:left}
.centered>.pill{display:inline-block}
.lede{color:var(--muted);max-width:60ch;margin:0 auto var(--space-2)}
.feature-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-6)}
/* S16: a compact, scannable row near the top of Contact — email/phone/
offices at a glance before the form, not only after it. */
.quick-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.quick-contact__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5) var(--space-5)}
.quick-contact__item h3{font-size:var(--fs-micro);font-family:var(--font-head);font-weight:700;
text-transform:uppercase;letter-spacing:.04em;color:var(--lime-700);margin:0 0 var(--space-2)}
.quick-contact__item p{margin:0;font-size:var(--fs-micro);line-height:1.5;color:var(--ink)}
.quick-contact__item a{color:var(--green-900);text-decoration:none}
.quick-contact__item a:hover{text-decoration:underline}
.feature-card__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:999px;background:var(--lime-500);color:var(--green-900);margin-bottom:var(--space-4)}
.feature-card h3{margin-bottom:var(--space-2)}
.feature-card p{color:var(--muted);font-size:var(--fs-micro);margin:0}
/* Applications Served (ui2.html) — icon-card grid matching the reference
design's own treatment: a plain bordered card, icon centred above a
label chip, the whole card filling lime on hover/focus so the grid
reads as interactive rather than static.
Named .app-tile*, not .app-card* — that name was already taken by
ui6.html's own, differently-styled format-code card, and reusing it
here silently let ui6's rules (declared later in this file) win the
cascade for shared property names, which is what actually made these
cards render wrong. Label radius is 16px, not a full stadium pill —
these labels run 2-5 lines ("Selected medical-packaging applications
(qualification required)"), and a stadium shape draws a lozenge around
wrapped text instead of a clean rounded rectangle. */
.app-tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-5)}
.app-tile{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
padding:var(--space-6) var(--space-5);text-align:center;transition:background .2s ease,border-color .2s ease}
.app-tile:hover,.app-tile:focus-within{background:var(--lime-500);border-color:var(--lime-500)}
.app-tile__icon{display:flex;align-items:center;justify-content:center;height:100px}
.app-tile__icon img{max-width:100%;max-height:100%}
.app-tile__label{margin:var(--space-4) 0 0;background:#fff;border:1px solid var(--line);border-radius:16px;
padding:var(--space-3) var(--space-4);font-family:var(--font-head);font-weight:600;color:var(--green-900);
font-size:var(--fs-micro);line-height:1.3;transition:background .2s ease,border-color .2s ease}
.app-tile:hover .app-tile__label,.app-tile:focus-within .app-tile__label{background:#fff;border-color:transparent}
/* Feature checklist — now lives inside Technical Window (ui2.html), a
quick scannable pass right before the full spec table, not a
standalone section repeating the same facts a second time. */
.check-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:var(--space-4) var(--space-6);margin:var(--space-5) 0 0;padding:0}
.check-grid__item{display:flex;align-items:flex-start;gap:var(--space-3);background:#fff;
border:1px solid var(--line);border-radius:14px;padding:var(--space-4) var(--space-4)}
.check-grid__icon{flex:none;width:20px;height:20px;color:var(--lime-700);margin-top:1px}
.check-grid__item span{font-size:var(--fs-micro);color:var(--ink);line-height:1.4}
.link-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;position:relative;padding-bottom:var(--space-4)}
.link-card:has(.link-card__teaser){padding-bottom:var(--space-10)}
.link-card__img{aspect-ratio:16/10;border-radius:0;display:grid;place-items:center}
img.link-card__img{object-fit:cover;width:100%;height:100%}
.link-card h3{margin:var(--space-5) var(--space-5) 0}
/* line-clamp, not just the 110-char truncation already applied upstream —
a ~110-char sentence can still wrap to 3 lines at this card width, and
the arrow button (absolutely positioned, opaque) painted over that 3rd
line instead of the padding-bottom actually clipping it. Clamping here
guarantees 2 lines max regardless of source text length. */
.link-card__teaser{margin:var(--space-2) 56px 0 var(--space-5);color:var(--muted);font-size:var(--fs-micro);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-card .btn-arrow{position:absolute;right:16px;bottom:16px;width:40px;height:40px;background:var(--green-900);color:#fff}
/* No approved photo: a clean text card, not a repeated "coming soon"
tile (section 3F) — top accent rule stands in for the image, h3 gets
the image's usual top spacing instead. */
.link-card--text{border-top:3px solid var(--lime-500)}
.link-card--text h3{margin-top:var(--space-6)}
/* Labelled placeholder: the same "photo not approved yet" honesty pattern
used by the Find My Pack finder's product cards, applied to these smaller
card placeholders so an unphotographed product/format reads as pending
rather than a plain, unexplained gradient box. */
.app-card__img.page-hero__image--accent,.link-card__img.page-hero__image--accent{display:flex;align-items:center;justify-content:center}
.app-card__img.page-hero__image--accent span,.link-card__img.page-hero__image--accent span{position:relative;color:#fff;font-family:var(--font-head);font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 var(--space-3)}
/* ---------- shared product image stage ----------
One component for every product cutout on the site: the catalogue card,
the product-detail gallery's main frame, and compare/search results.
4:3, soft neutral ground, contain (never crop/stretch a pack), ~10-12%
breathing room by default. --stage-offset-x/-y and --stage-scale are
set inline per image from image_metadata.json's "presentation" field —
a modest optical correction only, never a crop. Missing-image state
reuses the exact same box so layout never jumps between products. */
.avi-stage{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
background:var(--bg-soft);overflow:hidden;border-radius:var(--radius-sm)}
.avi-stage img{width:100%;height:100%;object-fit:contain;padding:11%;
object-position:calc(50% + var(--stage-offset-x,0%)) calc(50% + var(--stage-offset-y,0%));
transform:scale(var(--stage-scale,1))}
.avi-stage--pending{color:var(--muted);font-family:var(--font-head);font-size:var(--fs-micro);
font-weight:600;letter-spacing:.03em;text-align:center;padding:0 var(--space-4)}
.avi-stage--pending svg{display:block;margin:0 auto var(--space-2);opacity:.55}
.avi-stage__note{font-size:var(--fs-micro);color:var(--muted);background:var(--bg-soft);
border-radius:6px;padding:var(--space-1) var(--space-2);display:inline-block;width:fit-content;margin-top:var(--space-2)}
/* interactive 3D view (tools/3d-product-viewer/) — same box as the photo,
swapped in by the gallery thumb JS instead of a second, separate stage. */
.avi-stage__3d:not([hidden]){width:100%;height:100%;border:0;display:block}
/* the 3D thumb reads as the premium option, not just a 4th photo angle --
lime-filled instead of the neutral bg-soft/dashed treatment every plain
photo thumb uses. */
.avi-gallery__thumb--3d{background:var(--lime-500);border-color:var(--lime-500)}
.avi-gallery__thumb--3d svg{width:22px;height:22px;color:var(--green-900)}
.avi-gallery__thumb--3d .avi-gallery__thumb-label{color:var(--green-900);font-weight:700}
.avi-gallery__thumb--3d:hover{background:var(--lime-600);border-color:var(--lime-600)}
.avi-gallery__thumb--3d[aria-current="true"]{border-color:var(--green-900)}
/* on-photo callout: the feature needs to be discovered by looking at the
product photo itself, not just by scanning a row of small thumbnails
underneath it -- this is the site's one interactive, play-with-it
feature, so it gets a visible invitation, not a quiet icon. */
.avi-stage__3d-badge:not([hidden]){position:absolute;top:12px;right:12px;z-index:1;
display:inline-flex;align-items:center;gap:var(--space-2);
background:var(--lime-500);color:var(--green-900);border:0;border-radius:999px;
padding:var(--space-2) var(--space-4) var(--space-2) var(--space-3);font-family:var(--font-head);font-weight:700;font-size:var(--fs-micro);
box-shadow:0 8px 20px rgba(21,61,46,.22);cursor:pointer;
animation:avi-3d-badge-pulse 2.6s ease-in-out infinite;
transition:background .2s ease,transform .2s ease}
.avi-stage__3d-badge:hover{background:var(--lime-600);transform:translateY(-1px)}
.avi-stage__3d-badge svg{flex:none}
@keyframes avi-3d-badge-pulse{
0%,100%{box-shadow:0 8px 20px rgba(21,61,46,.22),0 0 0 0 rgba(166,215,32,.55)}
50%{box-shadow:0 8px 20px rgba(21,61,46,.22),0 0 0 8px rgba(166,215,32,0)}
}
@media (prefers-reduced-motion:reduce){.avi-stage__3d-badge{animation:none}}
@media (max-width:480px){
.avi-stage__3d-badge span{display:none}
.avi-stage__3d-badge{padding:var(--space-3);border-radius:50%}
}
/* ---------- material specification request panel (ui2.html, film
grade pages only) ---------- */
.avi-spec-request{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-6);margin-top:var(--space-5);max-width:640px}
.avi-spec-request__mode{border:0;padding:0;margin:0 0 var(--space-4)}
.avi-spec-request__mode legend{font-weight:600;margin-bottom:var(--space-2);padding:0}
.avi-spec-request__mode label{display:block;font-size:var(--fs-micro);margin:var(--space-2) 0;font-weight:400}
.avi-spec-request__field{display:block;font-size:var(--fs-micro);font-weight:500;color:var(--ink);margin:0 0 var(--space-4)}
.avi-spec-request__field input,.avi-spec-request__field select,.avi-spec-request__field textarea{
display:block;width:100%;margin-top:var(--space-2);padding:var(--space-3) var(--space-3);border:1px solid var(--line);
border-radius:8px;font:inherit;font-size:var(--fs-micro);background:var(--bg-soft);color:var(--ink)}
.avi-spec-request__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-4)}
.avi-spec-request__field[hidden]{display:none}
@media(max-width:600px){.avi-spec-request__grid{grid-template-columns:1fr}}
/* ---------- enquiry review row (A16) ----------
Desktop: thumbnail + identity on the left, quantity + Remove on the
right, one row. Mobile: identity keeps its own row (name never
crushed to ~100px), quantity + Remove drop to a second, full-width
row below — never squeezed into the same 390px row as everything
else. */
.enquiry-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);
background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.enquiry-row__identity{display:flex;align-items:center;gap:var(--space-4);flex:1 1 260px;min-width:0}
.enquiry-row__text{min-width:0}
.enquiry-row__name{margin:0;font-family:var(--font-head);font-weight:600;color:var(--green-900)}
.enquiry-row__meta{margin:2px 0 0;color:var(--muted);font-size:var(--fs-micro)}
.enquiry-row__controls{display:flex;align-items:center;gap:var(--space-4);flex:0 0 auto}
.enquiry-row__qty{display:flex;flex-direction:column;font-size:var(--fs-micro);color:var(--muted);white-space:nowrap}
.enquiry-row__qty input{width:110px;padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:8px;margin-top:var(--space-1);font-size:var(--fs-micro)}
/* Section 3: two distinct requirements on one line need visual separation,
and a long original-request quote needs a collapsed default state. */
.enquiry-row__requirement-group{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px dashed var(--line)}
.enquiry-row__requirement-group:first-of-type{margin-top:2px;padding-top:0;border-top:0}
.enquiry-row__requirement-text{margin:2px 0 0;color:var(--muted);font-size:var(--fs-micro);font-style:italic}
details.enquiry-row__requirement-text summary{cursor:pointer;font-style:normal}
details.enquiry-row__requirement-text p{margin:var(--space-1) 0 0}
.btn-link{background:none;border:0;padding:0;color:var(--green-800,#1f5c3f);text-decoration:underline;cursor:pointer;font-family:inherit}
.btn-link:hover{color:var(--green-900)}
@media (max-width:480px){
.enquiry-row{flex-wrap:wrap}
.enquiry-row__identity{flex:1 1 100%}
.enquiry-row__controls{flex:1 1 100%;justify-content:space-between;padding-top:var(--space-3);border-top:1px solid var(--line)}
.enquiry-row__qty{flex:1 1 auto}
.enquiry-row__qty input{width:100%}
}
/* ---------- compact thumbnail (compare / enquiry review) ----------
Same visual language as .avi-stage (bg-soft ground, object-fit:contain,
never cropped) at a fixed small size for rows/table headers where a
full catalogue card would be too heavy. Not the gallery's nav thumb
(.avi-gallery__thumb) — this one is never clickable. */
.compact-thumb{width:56px;height:56px;border-radius:10px;border:1px solid var(--line);
background:var(--bg-soft);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.compact-thumb img{width:100%;height:100%;object-fit:contain;padding:9%}
.compact-thumb--pending{color:var(--muted)}
.compact-thumb--pending svg{width:20px;height:20px;opacity:.5;display:block}
/* S17: the compare table's own image is each column's hero, not a small
identifying icon like every other .compact-thumb context (enquiry
drawer, enquiry-review list) — a dedicated, much larger size. */
.compact-thumb--hero{width:100%;max-width:220px;height:220px;border-radius:14px;margin-inline:auto}
.compact-thumb--hero.compact-thumb--pending svg{width:40px;height:40px}
@media(max-width:600px){.compact-thumb--hero{max-width:140px;height:140px}}
/* ---------- shared gallery (product detail) ----------
Only rendered with 2+ real images — see ded-catalogue-product.html.
Thumbnails are real alternate views/roles, never fake duplicate crops. */
.avi-gallery__thumbs{display:flex;gap:var(--space-2);margin-top:var(--space-3);overflow-x:auto;
-webkit-overflow-scrolling:touch;padding-bottom:2px}
.avi-gallery__thumb{flex:0 0 auto;width:64px;height:64px;border-radius:10px;
border:1.5px solid var(--line);background:var(--bg-soft);padding:var(--space-2);cursor:pointer;
display:grid;place-items:center}
.avi-gallery__thumb img{width:100%;height:100%;object-fit:contain}
.avi-gallery__thumb[aria-current="true"]{border-color:var(--green-700)}
.avi-gallery__thumb:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
.avi-gallery__thumb-label{font-size:var(--fs-micro);color:var(--muted);text-align:center;margin-top:2px;
display:block;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- shared catalogue product card (integration) ----------
Same shell language as .link-card (white card, var(--radius)),
extended with the section-5 info order: image stage, descriptor, code,
dimensions, 1-2 distinguishing attributes, View Product (primary),
Compare + a restrained quick-enquiry action. */
.catalogue-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 420px}
/* A08 follow-up: the JS filter sets the `hidden` attribute/property on
cards that don't match, but this class's own `display:flex` has higher
specificity than the UA `[hidden]{display:none}` rule, so a "hidden"
card still rendered at full height with display:flex — a filter that
said "0 results" while all 269 cards stayed visible. Same fix pattern
as .cat-pager/#cat-clear-all above: an explicit [hidden] override that
wins the cascade. */
.catalogue-card[hidden]{display:none}
.catalogue-card__img-wrap{position:relative}
.catalogue-card__img{aspect-ratio:3/2;display:grid;place-items:center;background:var(--bg-soft);overflow:hidden}
.catalogue-card__img img{width:100%;height:100%;object-fit:contain;padding:11%;
object-position:calc(50% + var(--stage-offset-x,0%)) calc(50% + var(--stage-offset-y,0%));
transform:scale(var(--stage-scale,1))}
/* Conversion redesign (component picks: full-bleed photo, pill-chip specs,
single primary CTA + a text link, Compare demoted to a quiet corner
toggle on the photo rather than a third competing button) — see the
mockup round this replaced. */
/* 44px, not the visually-tempting 32px — this sits over the photo corner
on a touch target that's otherwise unoccupied, so there's no reason to
shrink it below the mobile minimum tap size (checked on a 375px
viewport: the smaller size measured out at 32x32, an easy mis-tap). */
.catalogue-card__compare{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:999px;
background:#fff;border:1px solid var(--line);color:var(--green-900);display:grid;place-items:center;
transition:background .15s,border-color .15s}
.catalogue-card__compare:hover{border-color:var(--green-700)}
.catalogue-card__compare.is-active{background:var(--green-900);border-color:var(--green-900);color:#fff}
.catalogue-card__body{padding:var(--space-4) var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);flex:1}
.catalogue-card__descriptor{color:var(--muted);font-size:var(--fs-micro);margin:0;text-transform:uppercase;letter-spacing:.04em}
.catalogue-card__code{font-family:var(--font-head);font-weight:600;color:var(--green-900);margin:0;font-size:var(--fs-micro);text-decoration:none}
.catalogue-card__code:hover{color:var(--green-700)}
.catalogue-card__chips{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:2px 0 0}
.catalogue-card__chip{background:var(--bg-soft);border-radius:7px;padding:3px var(--space-2);font-size:var(--fs-micro);color:var(--ink)}
.catalogue-card__variant-note{font-size:var(--fs-micro);color:var(--muted);background:var(--bg-soft);border-radius:6px;padding:var(--space-1) var(--space-2);display:inline-block;width:fit-content}
/* One primary action (full-width, >=44px) plus a quiet text link, not two
equal-weight buttons — a buyer scanning a grid gets one obvious next
step; "view full details" stays reachable without competing for
attention (the photo and code are also already links). Compact sizing
throughout (image, padding, type) is the default everywhere now, not a
mobile-only override — more grid columns (see .catalogue-grid) mean
every card is narrower at every viewport, not just on small screens. */
.catalogue-card__actions{display:flex;flex-direction:column;gap:var(--space-2);margin-top:auto;padding-top:var(--space-2);align-items:center}
.catalogue-card__actions .btn--primary,.catalogue-card__actions .btn--outline{width:100%;justify-content:center;min-height:44px;padding:var(--space-3) var(--space-4);font-size:var(--fs-micro)}
.catalogue-card__link{display:inline-flex;align-items:center}
.ded-product__code{font-family:var(--font-head);font-weight:600;font-size:var(--fs-h6);color:var(--green-700);margin:0}
/* Fixed 3-column cap on desktop, not auto-fill — auto-fill let a wide
monitor pack in a 4th column once the results pane passed ~900px, which
read as cramped next-to-the-sidebar rather than premium. 3 fixed columns
keep every card the same, more generous width regardless of how wide the
browser window gets. 2 on tablet, 1 on mobile (where the sidebar becomes
an off-canvas drawer, per .catalogue-browse-layout's own 900px break). */
.catalogue-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5);margin-top:var(--space-6)}
.catalogue-grid[hidden]{display:none}
@media(min-width:560px){.catalogue-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.catalogue-grid{grid-template-columns:repeat(3,1fr)}}
/* ---------- A08/A09: catalogue toolbar, filter drawer, chips, pager,
grid/table toggle. Desktop keeps a sticky sidebar; mobile becomes a
real off-canvas drawer (not a stacked always-visible column). ---------- */
.cat-toolbar{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.cat-search-wrap{position:relative;flex:1;min-width:220px}
.cat-toolbar #cat-search{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--fs-caption)}
/* Search suggestions — AVI Finder's own interpretation engine, merged into
this one search box (see ded-product-catalogue.html for the JS). Only
ever shown once there's real structured guidance to add on top of the
plain grid filter, never for a bare code/keyword search. */
.cat-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:0 18px 40px rgba(21,61,46,.16);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.cat-suggest[hidden]{display:none}
.cat-suggest__hint{align-self:flex-start;background:var(--bg-soft);border:1px solid var(--line);
border-radius:999px;padding:var(--space-2) var(--space-4);font-size:var(--fs-micro);color:var(--green-900);cursor:pointer}
.cat-suggest__hint:hover,.cat-suggest__hint:focus-visible{background:var(--lime-500);border-color:var(--lime-500)}
.cat-suggest__note{margin:0;font-size:var(--fs-micro);color:var(--muted)}
.cat-suggest__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cat-suggest__list a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);
padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);text-decoration:none;color:inherit}
.cat-suggest__list a:hover,.cat-suggest__list a:focus-visible{background:var(--bg-soft)}
.cat-suggest__code{font-weight:600;color:var(--green-900);white-space:nowrap}
.cat-suggest__reason{color:var(--muted);font-size:var(--fs-micro);text-align:right}
.cat-suggest__material,.cat-suggest__ask{font-size:var(--fs-micro);color:var(--green-900);
font-weight:600;text-decoration:none;padding-top:var(--space-2);border-top:1px solid var(--line)}
.cat-suggest__material:hover,.cat-suggest__ask:hover{text-decoration:underline}
@media(max-width:640px){
.cat-suggest__list a{flex-direction:column;align-items:flex-start;gap:2px}
.cat-suggest__reason{text-align:left}
}
/* "My enquiry" reads as a live cart, not just another outline button
alongside "Filters" — a soft fill + resting shadow gives it a touch of
depth, and the count badge (wired sitewide via chrome.js's existing
[data-enquiry-badge]/[data-enquiry-count] pair — same markup as the
header icon) shows a buyer their list is building without opening it. */
.cat-toolbar__enquiry{position:relative;background:var(--bg-soft);border-color:var(--line);
box-shadow:0 1px 2px rgba(21,61,46,.06);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease}
.cat-toolbar__enquiry:hover{background:var(--lime-500);border-color:var(--lime-500);box-shadow:0 6px 16px rgba(21,61,46,.16);transform:translateY(-1px)}
.cat-toolbar__enquiry-count{background:var(--green-900);color:#fff;border-radius:999px;
min-width:20px;height:20px;padding:0 var(--space-2);display:inline-flex;align-items:center;justify-content:center;
font-size:var(--fs-micro);font-weight:700;line-height:1}
/* same defect class as .enq__f/.cat-pager above (see their comments) --
the class's own display beat [hidden], so the count badge showed even
at zero, before JS ever cleared its hidden attribute. */
.cat-toolbar__enquiry-count[hidden]{display:none}
#cat-filter-toggle{display:none}
.catalogue-browse-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--space-7);align-items:start}
.catalogue-browse-layout__filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-5);position:sticky;top:90px;max-height:calc(100dvh - 110px);overflow-y:auto}
.cat-filter-drawer__head{display:none}
.cat-filter-group{border:0;padding:0;margin:0 0 var(--space-5)}
.cat-filter-group legend{font-family:var(--font-head);font-weight:600;font-size:var(--fs-micro);color:var(--green-900);padding:0;margin:0 0 var(--space-2)}
.cat-filter-group label{display:flex;gap:var(--space-2);align-items:center;font-size:var(--fs-micro);padding:var(--space-1) 0;cursor:pointer}
.cat-filter-group__scroll{max-height:190px;overflow-y:auto;padding-right:var(--space-1)}
.cat-filter-group__search{display:none}
.cat-dim-row{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-2)}
.cat-dim-row__label{font-size:var(--fs-micro);width:44px;flex:0 0 auto;color:var(--muted)}
.cat-dim-row input{width:100%;min-width:0;padding:var(--space-2) var(--space-2);border:1px solid var(--line);border-radius:6px;font-size:var(--fs-micro)}
.cat-filter-drawer__actions{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
#cat-clear-all[hidden]{display:none}
.cat-result-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}
.cat-result-count{color:var(--muted);margin:0}
.cat-view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.cat-view-toggle button{padding:var(--space-2) var(--space-5);background:#fff;border:0;font-size:var(--fs-micro);font-weight:500;color:var(--muted);cursor:pointer}
.cat-view-toggle button[aria-pressed="true"]{background:var(--green-900);color:#fff}
.cat-pager{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-7)}
.cat-pager[hidden]{display:none}
#cat-page-indicator{font-size:var(--fs-micro);color:var(--muted)}
.cat-drawer-scrim{display:none}
@media(max-width:900px){
.catalogue-browse-layout{grid-template-columns:1fr}
#cat-filter-toggle{display:inline-flex}
.catalogue-browse-layout__filters{
position:fixed;top:0;right:0;bottom:0;left:auto;width:min(340px,88vw);max-height:none;
transform:translateX(100%);transition:transform .2s ease;z-index:301;
border-radius:0;border:0;box-shadow:-8px 0 30px rgba(21,61,46,.18);padding:var(--space-5);
}
.catalogue-browse-layout__filters.is-open{transform:translateX(0)}
.cat-filter-drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.cat-filter-drawer__close{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:var(--fs-h6);line-height:1;cursor:pointer}
.cat-filter-drawer__actions{position:sticky;bottom:-20px;background:#fff;padding:var(--space-4) 0 var(--space-2);margin-top:var(--space-4)}
.cat-drawer-scrim:not([hidden]){display:block;position:fixed;inset:0;background:rgba(21,30,26,.4);z-index:300}
/* Mobile-only: typing narrows the checkbox list right below it instead
of scrolling a cramped 190px box blind (see the inline comment in
ded-product-catalogue.html) — desktop's sidebar list is unaffected,
this input doesn't even render there. */
.cat-filter-group__search{display:block;width:100%;padding:var(--space-2) var(--space-3);margin:0 0 var(--space-2);
border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--fs-micro)}
}
/* ---------- product-detail hero: media | decision panel ----------
Desktop: image stage + gallery on the left, name/code sit above the
grid (both breakpoints), then key specs and actions on the right.
Mobile: single column — the DOM order (media, then panel) already
reads name/code (above the grid) -> image -> key specs -> actions,
matching section 10's mobile sequence without a second markup copy. */
.product-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-8);align-items:start}
@media(max-width:900px){.product-hero-grid{grid-template-columns:1fr;gap:var(--space-5)}}
.product-hero-grid__panel{display:flex;flex-direction:column;gap:var(--space-1)}
.product-hero-grid__actions{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-5)}
/* Equal-width, not auto-sized-to-text — "Request Sample" and "Compare"
were two different widths from unequal label lengths, reading lopsided
under the full-width primary button above them. flex:1 each, not a
third button added just to visually balance the row (nothing for it to
do — the primary CTA plus two related-but-secondary actions is already
the complete action set for this page). */
.product-hero-grid__actions-secondary{display:flex;gap:var(--space-3);flex-wrap:wrap}
.product-hero-grid__actions-secondary>*{flex:1;text-align:center;justify-content:center;min-width:0}
/* Hero "Key specification" panel: a 2-up grid of bordered stat cards
instead of a plain dt/dd list — scannable at a glance next to the photo,
distinct from the full dt/dd Specifications table further down the page
(.spec-list, unchanged) which stays a list since it's read top-to-bottom
once the buyer's already committed to the detail page. */
.spec-list--compact{margin-top:var(--space-3);border-top:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.spec-list--compact .spec-list__row{display:block;padding:var(--space-3) var(--space-3);background:var(--bg-soft);border-radius:10px;border-bottom:0}
.spec-list--compact dt{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--fs-micro);color:var(--muted);margin-bottom:2px}
.spec-list--compact dd{font-weight:600;font-size:var(--fs-caption);color:var(--ink)}
@media(max-width:480px){.spec-list--compact{grid-template-columns:1fr}}
.applications-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.applications-pill{background:#e9f2dc;color:var(--green-900);font-size:var(--fs-micro);border-radius:999px;padding:var(--space-2) var(--space-4)}
.spec-list{margin-top:var(--space-7);border-top:1px solid var(--line)}
.spec-list__row{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-6);padding:var(--space-5) 0;border-bottom:1px solid var(--line)}
.spec-list dt{font-family:var(--font-head);font-weight:500;color:var(--green-900)}
.spec-list dd{margin:0;color:var(--muted)}
@media(max-width:700px){ .spec-list__row{grid-template-columns:1fr;gap:var(--space-1)} }
/* ---------- product-detail accordion (native , no JS) ---------- */
.pdp-accordion-group{display:flex;flex-direction:column;gap:0}
.pdp-accordion{border-top:1px solid var(--line)}
.pdp-accordion:last-child{border-bottom:1px solid var(--line)}
.pdp-accordion__summary{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-1);cursor:pointer;list-style:none}
.pdp-accordion__summary::-webkit-details-marker{display:none}
.pdp-accordion__summary h2{margin:0;font-size:var(--fs-h6)}
.pdp-accordion__summary::after{content:"+";margin-left:auto;font-size:var(--fs-h5);line-height:1;color:var(--green-700);flex-shrink:0}
.pdp-accordion[open] .pdp-accordion__summary::after{content:"\2212"}
.pdp-accordion__body{padding:0 var(--space-1) var(--space-7)}
.pdp-accordion .spec-list{margin-top:0}
/* ---------- comparison-style spec table (reused: Q-Bic formats, APET technical window, PET-grade comparison) ---------- */
.table-scroll{overflow-x:auto;margin-top:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-sm);-webkit-overflow-scrolling:touch}
.spec-table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-micro)}
.spec-table caption{text-align:left;padding:var(--space-4) var(--space-5);color:var(--muted);font-size:var(--fs-micro);border-bottom:1px solid var(--line)}
.spec-table th,.spec-table td{padding:var(--space-3) var(--space-5);text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table thead th{background:var(--bg-soft);font-family:var(--font-head);font-weight:600;color:var(--green-900);border-bottom:1px solid var(--line)}
.spec-table tbody th[scope=row]{font-family:var(--font-head);font-weight:600;color:var(--green-900);background:var(--bg-soft);position:sticky;left:0}
.spec-table tbody tr:last-child td,.spec-table tbody tr:last-child th{border-bottom:0}
.spec-table tbody tr:hover td{background:rgba(21,61,46,.03)}
.spec-table .cell-muted{color:var(--muted);font-style:italic}
/* Round 2: per-product actions live in that product's own header cell
instead of a separate row of full-width buttons stacked below the
table. */
.cmp-table thead th{min-width:180px}
.cmp-table__code{margin-top:var(--space-2);font-weight:700}
.cmp-table__actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-3)}
.cmp-table__actions .btn{padding:var(--space-2) var(--space-4);font-size:var(--fs-micro);width:100%;justify-content:center}
.cmp-table__addcell{vertical-align:middle;text-align:center;background:var(--bg-soft)}
.cmp-table__addlink{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
color:var(--muted);text-decoration:none;font-weight:600;font-size:var(--fs-micro);
border:1.5px dashed var(--line);border-radius:var(--radius-sm);padding:var(--space-6) var(--space-3);
transition:border-color .2s ease,color .2s ease}
.cmp-table__addlink span{font-size:var(--fs-h5);line-height:1;color:var(--lime-700)}
.cmp-table__addlink:hover{border-color:var(--lime-500);color:var(--green-900)}
/* Non-scrolling "what's selected, remove it here" strip above the compare
table (ded-compare.html) — the table itself scrolls horizontally to fit
3 products, and on a narrow screen the row-label column alone can fill
the viewport, pushing every column's own Remove control off-screen. This
strip never scrolls, so removing a product never depends on finding the
right place to swipe. */
.cmp-selected{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.cmp-selected[hidden]{display:none}
.cmp-selected__item{display:flex;align-items:center;gap:var(--space-3);background:#fff;
border:1px solid var(--line);border-radius:999px;padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2)}
.cmp-selected__item .compact-thumb{width:36px;height:36px;border-radius:8px;flex:none}
.cmp-selected__name{font-family:var(--font-head);font-weight:600;font-size:var(--fs-micro);color:var(--green-900)}
.cmp-selected__remove{flex:none;width:32px;height:32px;border-radius:50%;border:0;
background:var(--bg-soft);color:var(--muted);font-size:var(--fs-h6);line-height:1;
display:grid;place-items:center;cursor:pointer;transition:background .2s ease,color .2s ease}
.cmp-selected__remove:hover,.cmp-selected__remove:focus-visible{background:#b3261e;color:#fff;outline:none}
@media(max-width:600px){
.cmp-selected__item{width:100%;padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2)}
.cmp-selected__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-selected__remove{width:44px;height:44px}
}
/* ---------- fit-canvas: "Is this right for your process?" / technical-spec connected canvas ---------- */
.fit-canvas{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--space-4);margin-top:var(--space-6);
background:var(--bg-soft);border-radius:var(--radius);padding:var(--space-4)}
.fit-canvas__primary{background:var(--green-900);color:#fff;border-radius:var(--radius-sm);
padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;justify-content:center}
.fit-canvas__primary h3,.fit-canvas__primary h4{color:#fff;font-family:var(--font-head);font-weight:600;margin:0 0 var(--space-2)}
.fit-canvas__primary p{color:var(--on-dark,#eaf1ec);margin:0}
.fit-canvas__primary .link-arrow{color:var(--lime-500);margin-top:var(--space-4);display:inline-flex}
.fit-canvas__routes{display:flex;flex-direction:column;gap:var(--space-3);justify-content:center}
.fit-canvas__route{display:flex;gap:var(--space-4);background:#fff;border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5)}
.fit-canvas__route h4{margin:0 0 var(--space-1);font-family:var(--font-head);font-weight:600;color:var(--green-900);font-size:var(--fs-caption)}
.fit-canvas__route p{margin:0;color:var(--muted);font-size:var(--fs-micro)}
.fit-canvas__dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--lime-500);margin-top:var(--space-2)}
/* full-width published-spec callout above the specs table (not squeezed
into a fit-canvas grid column — see ui2.html section 4) */
.specs-note{background:var(--green-900);color:#fff;border-radius:var(--radius-sm);
padding:var(--space-5) var(--space-6);margin-top:var(--space-5)}
.specs-note p{color:var(--on-dark,#eaf1ec);margin:0}
.specs-note .link-arrow{color:var(--lime-500);margin-top:var(--space-4);display:inline-flex}
@media(max-width:820px){.fit-canvas{grid-template-columns:1fr}}
/* S17 (Fix 6): exploded-layer structure diagram — a plain, real-data SVG
(page.layer_diagram in ui2.html), not a stock cutaway graphic. Card
treatment matches .fit-canvas's own soft-background convention. Captions
are real HTML (a numbered list beside the SVG), not SVG — SVG text
never wraps, so a full-sentence caption clipped at phone width when it
lived inside the SVG itself; this also gives each layer name/caption a
real, selectable, screen-reader-friendly text node. */
.layer-diagram{background:var(--bg-soft);border-radius:var(--radius);
padding:clamp(16px,3vw,28px);margin-top:var(--space-5);
display:grid;grid-template-columns:1fr 1.3fr;gap:var(--space-5);align-items:center}
.layer-diagram__svg{display:block;width:100%;height:auto;font-family:var(--font-body)}
.layer-diagram__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.layer-diagram__list li{display:flex;flex-direction:column;gap:2px}
.layer-diagram__list b{font-family:var(--font-head);color:var(--green-900);font-size:var(--fs-caption)}
.layer-diagram__list span{color:var(--muted);font-size:var(--fs-micro)}
@media(max-width:820px){.layer-diagram{grid-template-columns:1fr}}
/* ---------- doc-list: real documents for qualification (product pages, certifications) ---------- */
.doc-list{list-style:none;margin:var(--space-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.doc-list__row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5)}
.doc-list__name{font-family:var(--font-head);font-weight:600;color:var(--green-900);margin:0}
.doc-list__note{margin:2px 0 0;color:var(--muted);font-size:var(--fs-micro)}
.doc-list__pending{color:var(--muted);font-size:var(--fs-micro);font-style:italic;white-space:nowrap}
/* ---------- app-grid: applications shown as image cards, not text chips ---------- */
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.app-card{border-radius:var(--radius-sm);overflow:hidden;background:#fff;border:1px solid var(--line)}
.app-card__img{width:100%;height:120px;object-fit:cover;display:block}
.app-card__label{margin:0;padding:var(--space-4) var(--space-4);font-family:var(--font-head);font-weight:600;color:var(--green-900);font-size:var(--fs-micro)}
/* No repeated "image coming soon" tiles across a grid (section 3F) — a card
with no approved photo is a clean, intentional text card instead: a
little more vertical padding and a top accent rule stand in for the
missing image, so the grid still reads as a deliberate set of cards. */
.app-card--text{border-top:3px solid var(--lime-500)}
.app-card--text .app-card__label{padding:var(--space-6) var(--space-4)}
/* ---------- ui5 listing / ui7 posts ---------- */
.post-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;padding-bottom:var(--space-5)}
/* S02: same defect class as A08 — the class's own explicit `display` beats
the browser's built-in [hidden]{display:none}, so site.js's category
filter set `hidden` correctly but every card (and the always-grid
featured post) stayed fully rendered regardless of category. */
.post-card[hidden]{display:none}
.post-card__img{aspect-ratio:16/10;border-radius:0;display:grid;place-items:center;overflow:hidden}
.post-card__img img{width:100%;height:100%;object-fit:cover}
/* S11: no reserved image slot at all when there's no real photo — a
top border stands in for the missing visual anchor instead of a
gradient box, and the tag gets its own top padding since it's no
longer sitting right below an image. */
.post-card--text{border-top:3px solid var(--lime-500)}
.post-card--text .post-card__tag{margin-top:var(--space-5)}
.post-card__tag{color:var(--lime-700);font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;margin:var(--space-4) var(--space-5) var(--space-2)}
/* min-height reserves 2 lines — post titles vary in length, so in a 3-up
grid a longer title pushed only its own card's meta/date down, breaking
the row's alignment against its shorter siblings. */
.post-card h3{margin:0 var(--space-5) var(--space-2);font-size:var(--fs-caption);line-height:1.25;min-height:2.5em}
.post-card__meta{color:var(--muted);font-size:var(--fs-micro);margin:0 var(--space-5)}
.post-card__excerpt{color:var(--muted);font-size:var(--fs-micro);margin:0 var(--space-5) var(--space-3);line-height:1.55}
/* Homepage catalogue-preview cards only (see .home-showcase in home.html):
the shared .post-card component's tag/code/meta sizes (var(--fs-2xs) /
var(--fs-base) / var(--fs-sm), ~9-12px on this site's 75% root) read as
fine print for a product name+code a visitor is meant to actually read
here. Bumped in this scope only — /knowledge-hub/blogs/ and every other
.post-card usage is untouched. */
.home-showcase .post-card__tag{font-size:var(--fs-h6);letter-spacing:.06em}
.home-showcase .post-card h3{font-size:var(--fs-h4);min-height:0}
.home-showcase .post-card__spec{margin:0 var(--space-5) var(--space-1);color:var(--muted);font-size:var(--fs-h6);
font-variant-numeric:tabular-nums}
.home-showcase .post-card__meta{font-size:var(--fs-h6);font-weight:500}
.home-showcase .link-arrow{color:var(--green-700)}
/* featured post — the lead article gets a full-width editorial band, not
the same square card as everything else */
.post-feature{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-8);align-items:center;
text-decoration:none;color:inherit;background:var(--bg-soft);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;margin-bottom:var(--space-7)}
.post-feature[hidden]{display:none}
.post-feature__media{aspect-ratio:16/11;border-radius:0;overflow:hidden}
.post-feature__media img{width:100%;height:100%;object-fit:cover;display:block}
.post-feature__body{padding:var(--space-7) var(--space-8) var(--space-7) 0}
.post-feature--text{grid-template-columns:1fr}
.post-feature--text .post-feature__body{padding:var(--space-7) var(--space-8)}
.post-feature__body h2{font-size:var(--fs-h3);color:var(--green-900);margin:0 0 var(--space-3)}
.post-feature__standfirst{color:var(--muted);font-size:var(--fs-caption);line-height:1.6;margin:0 0 var(--space-4);max-width:52ch}
.post-feature .post-card__tag{margin:0 0 var(--space-3)}
.post-feature .post-card__meta{margin:0}
@media (max-width:800px){
.post-feature{grid-template-columns:1fr}
.post-feature__body{padding:var(--space-6)}
}
/* Homepage-only "Latest from AVI" — two cards, image on top with the
category tag floating over its corner (MASTER-PROMPT.md section I,
redesigned per the Finovate reference's editorial-card treatment: image
leads, tag as a pill overlay, heading and arrow below). Distinct from
.post-feature above (a single full-width lead-article band used
elsewhere) and from the plain .post-card grid /knowledge-hub/blogs/
itself keeps. */
.post-feature-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.post-feature-card{position:relative;display:flex;flex-direction:column;background:var(--bg-soft);
border:1px solid var(--line);border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;
transition:transform .18s ease,box-shadow .18s ease}
.post-feature-card__img{aspect-ratio:16/11}
.post-feature-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.post-feature-card__body{flex:1;min-width:0;padding:var(--space-5) var(--space-5) var(--space-5);display:flex;flex-direction:column}
.post-feature-card--text{border-top:3px solid var(--lime-500)}
.post-feature-card--text .post-feature-card__body{padding-top:var(--space-6)}
.post-feature-card .post-card__tag{margin:0 0 var(--space-3)}
.post-feature-card__img ~ .post-feature-card__body .post-card__tag{
position:absolute;top:16px;right:16px;margin:0;background:#fff;color:var(--lime-700);
padding:var(--space-2) var(--space-4);border-radius:999px}
.post-feature-card h3{margin:0 0 var(--space-2);font-size:var(--fs-h6);line-height:1.3}
.post-feature-card .post-card__meta{margin:0}
.post-feature-card__arrow{margin-top:auto;align-self:flex-end;width:36px;height:36px;border-radius:50%;
background:var(--green-900);color:#fff;display:flex;align-items:center;justify-content:center;
transition:background .2s ease,color .2s ease,transform .2s ease}
.post-feature-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(21,61,46,.14)}
.post-feature-card:hover .post-feature-card__arrow{background:var(--lime-500);color:var(--green-900);transform:translate(2px,-2px)}
@media (max-width:800px){
.post-feature-2col{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.post-feature-card,.post-feature-card__arrow{transition:none}
.post-feature-card:hover{transform:none}
.post-feature-card:hover .post-feature-card__arrow{transform:none}
}
.pager{display:flex;justify-content:center;margin-top:var(--space-8)}
.empty-state{background:var(--bg-soft);border:1px dashed var(--line);border-radius:var(--radius);
padding:var(--space-8) var(--space-7);text-align:center;color:var(--muted)}
.empty-state a{color:var(--green-700)}
/* ---------- leadership / jobs / downloads ---------- */
.leader-card__photo{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;margin-bottom:var(--space-4)}
.leader-card__photo img{width:100%;height:100%;object-fit:cover;display:block}
/* No portrait supplied: a clean typographic monogram, never a placeholder box */
.leader-card__initials{aspect-ratio:1/1;border-radius:var(--radius);margin-bottom:var(--space-4);
display:grid;place-items:center;background:var(--green-900);color:var(--lime-500);
font-family:var(--font-head);font-weight:600;font-size:var(--fs-h2);letter-spacing:.02em}
.job-list{list-style:none;padding:0;margin:var(--space-6) 0 0;border-top:1px solid var(--line)}
.job-list__row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);padding:var(--space-5) 0;border-bottom:1px solid var(--line);font-family:var(--font-head);font-weight:500;color:var(--green-900)}
.dl-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5)}
.dl-card__cover{aspect-ratio:3/4;border-radius:var(--radius-sm);display:grid;place-items:center;margin-bottom:var(--space-4)}
.dl-card h3{font-size:var(--fs-caption);margin:0 0 var(--space-2)}
.dl-card .btn{margin-top:var(--space-3)}
/* editorial leadership rows — one profile per row, not a cramped 3-card grid */
.leader-rows{display:flex;flex-direction:column;gap:0;margin-top:var(--space-6)}
.leader-row{display:grid;grid-template-columns:160px 1fr;gap:var(--space-8);padding:var(--space-8) 0;
border-top:1px solid var(--line)}
.leader-row:last-child{border-bottom:1px solid var(--line)}
.leader-row__photo{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;align-self:start}
.leader-row__photo img{width:100%;height:100%;object-fit:cover;display:block}
.leader-row__initials{aspect-ratio:1/1;border-radius:var(--radius);align-self:start;
display:grid;place-items:center;background:var(--green-900);color:var(--lime-500);
font-family:var(--font-head);font-weight:600;font-size:var(--fs-h2);letter-spacing:.02em}
.leader-row__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap}
.leader-row__head h3{margin:0;font-size:var(--fs-h5);color:var(--green-900)}
.leader-row__role{color:var(--lime-700);font-family:var(--font-head);font-weight:600;
font-size:var(--fs-micro);margin:var(--space-1) 0 0}
.leader-row__bio{color:var(--muted);max-width:68ch;margin:var(--space-4) 0 0}
@media (max-width:700px){
.leader-row{grid-template-columns:96px 1fr;gap:var(--space-5);padding:var(--space-7) 0}
.leader-row__head{flex-direction:column;gap:var(--space-2)}
}
/* S17: leadership page redesign — Executive Leadership as the lead (large
blocks) with a Founder tribute panel alongside, Departmental Leadership
(reuses .leader-card / .team-grid, same component as the homepage's own
team preview) as smaller cards in its own section below. */
.exec-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-7);margin-top:var(--space-6);align-items:start}
.exec-blocks{display:flex;flex-direction:column;gap:var(--space-6)}
.exec-block{display:grid;grid-template-columns:200px 1fr;gap:var(--space-7);background:var(--bg-soft);
border-radius:var(--radius);padding:var(--space-7)}
.exec-block__photo{aspect-ratio:1/1;border-radius:16px;overflow:hidden;align-self:start}
.exec-block__photo img{width:100%;height:100%;object-fit:cover;display:block}
.exec-block__initials{aspect-ratio:1/1;border-radius:16px;align-self:start;
display:grid;place-items:center;background:var(--green-900);color:var(--lime-500);
font-family:var(--font-head);font-weight:600;font-size:var(--fs-h2)}
.exec-block__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap}
.exec-block__head h3{margin:0;font-size:var(--fs-h3);color:var(--green-900)}
.exec-block__role{color:var(--lime-700);font-family:var(--font-head);font-weight:600;
font-size:var(--fs-h6);margin:var(--space-2) 0 0}
.exec-block__bio{color:var(--muted);margin:var(--space-4) 0 0}
@media (max-width:900px){
.exec-layout{grid-template-columns:1fr}
}
@media (max-width:600px){
.exec-block{grid-template-columns:1fr;text-align:left}
.exec-block__photo,.exec-block__initials{width:120px}
}
/* Departmental Leadership — deliberately denser/smaller than Executive
Leadership above, so visual weight stays with the two people actually
running the company day to day; department heads read as a supporting
team, not equal billing. */
.ded-leadership .team-grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.ded-leadership .team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.ded-leadership .team-grid{grid-template-columns:1fr 1fr}}
/* S18: Executive Leadership hero blocks — large, alternating photo/content
rows so Akhilesh and Sukhdeep read as the clear centre of the page.
Odd-indexed block (--reverse) mirrors the layout left/right rather than
repeating the same photo-left row twice. */
.leader-hero{display:grid;grid-template-columns:380px 1fr;gap:var(--space-8);align-items:center;
margin-top:var(--space-8);padding-bottom:var(--space-8);border-bottom:1px solid var(--line)}
.leader-hero:first-of-type{margin-top:var(--space-6)}
.leader-hero--reverse{grid-template-columns:1fr 380px}
.leader-hero--reverse .leader-hero__media{order:2}
.leader-hero--reverse .leader-hero__body{order:1}
/* Institutional executive treatment: the photograph is shown clean and
full-bleed inside a plain rounded container — no gradient wash, no
colour blend, no decorative glow behind it — with a solid (not glass)
name/role card overlapping its lower edge. The three highlight items
render as real bordered cards (icon chip + title + description),
matching the "Our Values"/"How AVI Operates" card language elsewhere
on this page rather than a bare bullet list. */
.leader-hero__media{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;
background:var(--bg-soft);box-shadow:0 18px 40px rgba(15,23,20,.14);transition:box-shadow .35s ease}
.leader-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
display:block;transition:transform .45s ease}
.leader-hero__media:hover{box-shadow:0 22px 50px rgba(15,23,20,.18)}
.leader-hero__media:hover img{transform:scale(1.02)}
.leader-hero__initials{position:absolute;inset:0;display:grid;place-items:center;
background:var(--bg-soft);color:var(--green-700);font-family:var(--font-head);
font-weight:600;font-size:var(--fs-h1)}
.leader-hero__badge{position:absolute;z-index:2;left:20px;bottom:20px;width:fit-content;
max-width:calc(100% - 40px);background:#fff;border:1px solid var(--line);border-radius:16px;
padding:var(--space-5) var(--space-6);box-shadow:0 10px 28px rgba(15,23,20,.10);
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.leader-hero__media:hover .leader-hero__badge{transform:translateY(-8px);
border-color:var(--lime-500);box-shadow:0 20px 44px rgba(15,23,20,.18)}
.leader-hero__badge strong{display:block;font-family:var(--font-head);font-size:var(--fs-h5);
font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--green-900);position:relative}
.leader-hero__badge span{display:block;color:var(--muted);font-size:var(--fs-micro);margin-top:var(--space-1)}
.leader-hero__badge::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;
border-radius:3px 3px 0 0;background:var(--lime-500);transform:scaleX(0);transform-origin:left;
transition:transform .35s ease}
.leader-hero__media:hover .leader-hero__badge::after{transform:scaleX(1)}
.leader-hero__body h3{margin:0 0 var(--space-3);font-size:var(--fs-h3);color:var(--green-900)}
.leader-hero__intro{color:var(--muted);font-size:var(--fs-micro);max-width:60ch}
.leader-hero__points{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-6)}
.leader-hero__point{display:flex;gap:var(--space-4);align-items:flex-start;background:#fff;
border:1px solid var(--line);border-radius:16px;padding:var(--space-5) var(--space-5)}
.leader-hero__point-icon{flex:none;width:38px;height:38px;border-radius:11px;
background:#eaf1fb;color:#3a6a94;display:grid;place-items:center}
.leader-hero__point-icon svg{width:18px;height:18px}
.leader-hero__point h4{margin:0;font-size:var(--fs-micro);color:var(--green-900)}
.leader-hero__point p{margin:var(--space-1) 0 0;color:var(--muted);font-size:var(--fs-micro)}
@media(max-width:800px){
.leader-hero,.leader-hero--reverse{grid-template-columns:1fr}
.leader-hero--reverse .leader-hero__media,.leader-hero--reverse .leader-hero__body{order:initial}
/* width:100% is required: auto margins stop a grid item stretching, and with the photo
absolutely positioned the box would otherwise shrink to zero width and vanish */
.leader-hero__media{width:100%;max-width:320px;margin:0 auto}
}
/* S19: Founder closing spread — the page's final, largest editorial
moment rather than a compact side-panel or a click-to-reveal accordion.
Always visible, full section framing (pill + heading) to match every
section above it. Photo runs full-height beside a large pull-quote;
name/role/years sit as a small caption below the quote rather than a
boxed panel, so the quote itself carries the visual weight. */
.founder-close{background:var(--green-900);border-radius:calc(var(--radius) + 8px);
padding:clamp(32px,5vw,56px);margin-top:var(--space-6)}
.founder-close .pill,.founder-close h2{color:#fff}
.founder-close .pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.founder-close h2{margin:0 0 var(--space-7)}
.founder-close__grid{display:grid;grid-template-columns:320px 1fr;gap:clamp(28px,4vw,48px);align-items:center}
.founder-close__media{border-radius:20px;overflow:hidden}
.founder-close__media img{width:100%;height:100%;object-fit:cover;display:block}
.founder-close__quote{margin:0;position:relative;font-family:var(--font-head);
font-size:var(--fs-h3);line-height:1.4;font-weight:500;
color:var(--lime-300,#c6ee45);letter-spacing:-.01em}
.founder-close__mark{font-size:var(--fs-h2);line-height:0;vertical-align:-.32em;
margin-right:2px;color:rgba(255,255,255,.35)}
.founder-close__bio{color:var(--on-dark);font-size:var(--fs-micro);margin:var(--space-5) 0 0;max-width:60ch}
.founder-close__meta{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.16)}
.founder-close__name{margin:0;color:#fff;font-family:var(--font-head);font-weight:700;font-size:var(--fs-h6)}
.founder-close__sub{margin:var(--space-1) 0 0;color:var(--on-dark);font-size:var(--fs-micro)}
@media(max-width:800px){
.founder-close__grid{grid-template-columns:1fr}
.founder-close__media{max-width:280px;margin:0 auto;aspect-ratio:4/5}
}
/* ==================== polish pass ==================== */
/* consistent hover/lift + transitions on interactive cards -- subtle on
purpose (small translate + soft shadow, ~0.2s), not a SaaS-landing-page
flourish. catalogue-card and pillar-card added to the shared treatment
below (were previously flat, no hover feedback at all); card-dark gets
its own slightly different lift (on-dark cards read better with a
lighter fill than a shadow, which barely shows against a dark section). */
.link-card,.post-card,.feature-card,.dl-card,.leader-card,.format-card,.card-dark,.catalogue-card,.pillar-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease}
.link-card:hover,.post-card:hover,.dl-card:hover,.catalogue-card:hover,.pillar-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(21,61,46,.12);border-color:var(--lime-500)}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(21,61,46,.10);border-color:var(--lime-500)}
.format-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(21,61,46,.10)}
.card-dark:hover{transform:translateY(-3px);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
/* card thumbnail images: a small, contained zoom on the card's hover (not
the image's own hover, so the whole card is the trigger) -- overflow is
already clipped by the card's own border-radius on every card this
applies to, so the zoomed image never escapes the rounded corner. */
.link-card:hover .link-card__img img,.catalogue-card:hover .catalogue-card__img img,.post-card:hover img{transform:scale(1.04)}
.link-card__img img,.catalogue-card__img img,.post-card img{transition:transform .3s ease}
.btn,.chip,.btn-arrow,.site-header__icon,.link-arrow span{transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease,box-shadow .2s ease}
/* every button variant gets the same quiet lift on hover, not just the two
solid-fill ones that already had a sheen sweep -- outline/quiet/arrow
controls were the only interactive elements left with zero hover
feedback of their own. */
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{transform:none}
@media (prefers-reduced-motion:reduce){
.btn,.chip,.btn-arrow,.site-header__icon,.link-arrow span{transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.link-card,.post-card,.feature-card,.dl-card,.leader-card,.format-card,.card-dark,.catalogue-card,.pillar-card,.link-card__img img,.catalogue-card__img img,.post-card img{transition:none}
.btn:hover,.link-card:hover,.post-card:hover,.dl-card:hover,.catalogue-card:hover,.pillar-card:hover,.feature-card:hover,.format-card:hover,.card-dark:hover{transform:none}
}
.chip:hover{background:var(--green-900);color:#fff}
.chip:hover span{background:#fff;color:var(--green-900)}
/* header: solid apps icon + active nav in lime */
.site-header__icon{border:0;cursor:pointer}
.site-header__icon--solid{background:var(--green-900);color:#fff}
.site-header__icon--solid:hover{background:var(--green-800)}
@media (min-width:901px){
/* the "all sections" grid-dots icon was crowding Knowledge Hub onto two
lines on desktop — removed there only, mobile keeps it */
.site-header__icon--solid{display:none}
}
.primary-nav__item.is-active>.primary-nav__link{color:var(--lime-700);background:transparent}
.primary-nav__link:hover{color:var(--green-700)}
/* newsletter bar */
.newsletter__inner{align-items:center}
.newsletter__copy{display:flex;gap:var(--space-4);align-items:center}
.newsletter__icon{width:44px;height:44px;flex:none;border-radius:999px;background:var(--lime-500);color:var(--green-900);display:grid;place-items:center;font-size:var(--fs-h6)}
.newsletter__title{font-family:var(--font-head);font-weight:500;color:#fff;margin:0}
.newsletter__sub{margin:0;color:#bcd0c4;font-size:var(--fs-micro)}
.newsletter__form .btn{white-space:nowrap}
/* ---------- ui7 article ---------- */
.article-hero{padding-top:var(--space-7)}
.article-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center;margin-top:var(--space-2)}
.article-hero__head h1{margin:.2em 0 .4em}
.article-meta{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-5);padding:0;margin:0 0 var(--space-5);color:var(--muted);font-size:var(--fs-micro)}
.article-standfirst{font-size:var(--fs-h6);color:var(--ink);max-width:46ch}
.article-hero__media img,.article-hero__media .placeholder-box{width:100%;border-radius:var(--radius);object-fit:cover}
.article-body{display:grid;grid-template-columns:260px 1fr;gap:56px;margin-top:var(--gap-section)}
.article-rail{align-self:start;position:sticky;top:100px;display:flex;flex-direction:column;gap:var(--space-7)}
.article-rail__label{font-family:var(--font-head);font-weight:500;color:var(--green-900);margin:0 0 var(--space-3)}
.article-share ul{list-style:none;display:flex;gap:var(--space-3);padding:0;margin:0}
.article-share a{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;color:var(--green-900);text-decoration:none;font-size:var(--fs-micro);font-weight:700}
.article-share a:hover{background:var(--green-900);color:#fff;border-color:var(--green-900)}
.article-toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3);border-left:2px solid var(--line)}
.article-toc li{padding-left:var(--space-4);position:relative}
.article-toc li::before{content:"";position:absolute;left:-5px;top:.55em;width:8px;height:8px;border-radius:999px;background:var(--lime-500)}
.article-toc a{color:var(--muted);text-decoration:none;font-size:var(--fs-micro)}
.article-toc a:hover{color:var(--green-900)}
.article-note{background:#f2f8e4;border-radius:var(--radius);padding:var(--space-6)}
.article-note__icon{color:var(--lime-600);font-size:var(--fs-h6)}
.article-note__head{font-family:var(--font-head);font-weight:500;color:var(--green-900);margin:var(--space-3) 0 var(--space-2)}
.article-note p{font-size:var(--fs-micro);color:var(--muted);margin:0}
.article-cta{display:block;margin-top:var(--space-4);padding:var(--space-4) var(--space-5);border:1px solid var(--line);
border-radius:var(--radius);color:var(--green-900);font-weight:600;text-decoration:none;font-size:var(--fs-micro)}
.article-cta:hover{border-color:var(--lime-500);background:var(--bg-soft)}
.article-content h2{scroll-margin-top:100px;margin-top:1.6em}
.article-content h2:first-child{margin-top:0}
.article-content blockquote{border-left:4px solid var(--lime-500);background:var(--bg-soft);margin:1.6em 0;padding:var(--space-5) var(--space-6);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.article-content blockquote cite{display:block;margin-top:var(--space-2);color:var(--muted);font-size:var(--fs-micro);font-style:normal}
.article-author{display:flex;gap:var(--space-4);align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5);margin-top:2.4em}
.article-author__avatar{width:48px;height:48px;flex:none;border-radius:999px;background:var(--green-900);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-size:var(--fs-micro);font-weight:600}
.article-author__name{font-family:var(--font-head);font-weight:500;color:var(--green-900);margin:0 0 var(--space-1)}
.article-author p{font-size:var(--fs-micro);color:var(--muted);margin:0}
@media (max-width:900px){
.article-hero__grid{grid-template-columns:1fr;gap:var(--space-6)}
.article-body{grid-template-columns:1fr;gap:var(--space-7)}
.article-rail{position:static}
.newsletter__inner{align-items:flex-start}
}
/* ---------- section head (title left, link right) ---------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-2)}
/* ---------- careers ---------- */
.value-cell{padding:var(--space-2) var(--space-5)}
.value-cell+.value-cell{border-left:1px solid rgba(255,255,255,.15)}
.value-cell__icon{color:var(--lime-500);font-size:var(--fs-h5);display:block;margin-bottom:var(--space-3)}
.value-cell h3{color:#fff;margin-bottom:var(--space-2)}
.value-cell p{color:var(--on-dark);font-size:var(--fs-micro);margin:0}
.job-list__title{display:flex;flex-direction:column;gap:var(--space-1)}
.job-list__title small{color:var(--muted);font-weight:400;font-family:var(--font-body)}
.job-list__actions{display:flex;align-items:center;gap:var(--space-4)}
.tag{background:var(--bg-soft);border-radius:999px;padding:var(--space-2) var(--space-4);font-size:var(--fs-micro);color:var(--muted)}
.apply-card{display:grid;grid-template-columns:1fr 1.3fr .9fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.apply-card__intro{padding:var(--space-7);background:var(--bg-soft)}
.apply-card__form{padding:var(--space-7)}
.perk-list{list-style:none;padding:0;margin:var(--space-5) 0;display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--fs-micro);color:var(--green-900)}
.perk-list span{color:var(--lime-600)}
.apply-card__q{font-size:var(--fs-micro);color:var(--muted)}
.apply-card__steps{background:var(--green-900);color:var(--on-dark);padding:var(--space-7)}
.apply-card__steps h3{color:#fff}
.apply-card__steps ol{list-style:none;padding:0;margin:var(--space-4) 0 0;display:flex;flex-direction:column;gap:var(--space-5)}
.apply-card__steps li{display:flex;gap:var(--space-4);align-items:flex-start}
.apply-card__steps b{width:26px;height:26px;flex:none;border-radius:999px;border:1px solid var(--lime-500);color:var(--lime-500);display:grid;place-items:center;font-size:var(--fs-micro)}
.apply-card__steps strong{display:block;color:#fff;font-family:var(--font-head);font-weight:500;font-size:var(--fs-micro)}
.apply-card__steps span{font-size:var(--fs-micro)}
/* ---------- dark hero (catalogue) ---------- */
.hero-dark{background:var(--green-900);color:var(--on-dark);padding:clamp(32px,5vw,64px) 0 clamp(72px,9vw,110px)}
.hero-dark .breadcrumbs a,.hero-dark .breadcrumbs{color:#9fb8ab}
.hero-dark__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}
.hero-dark h1{color:#fff}
.hero-dark__sub{color:var(--lime-500);font-family:var(--font-head);font-size:var(--fs-h5);margin:.2em 0 .6em}
.hero-dark__lead{max-width:44ch}
.hero-dark__points{list-style:none;padding:0;margin:var(--space-6) 0 0;display:flex;gap:var(--space-7);flex-wrap:wrap;font-size:var(--fs-micro)}
.hero-dark__points span{color:var(--lime-500)}
.hero-dark__media{min-height:320px;border:0;background:#20553f;color:var(--on-dark);
border-radius:var(--radius);overflow:hidden}
.hero-dark__media img{width:100%;height:100%;min-height:320px;object-fit:cover;display:block}
.catalogue-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,44px);margin-top:-64px;position:relative;box-shadow:0 30px 60px rgba(21,61,46,.10)}
.catalogue-panel .chip-row{margin-bottom:var(--space-7)}
.chip.is-active{background:var(--green-900);color:#fff}
/* ---------- info bar ---------- */
.info-bar{display:flex;gap:var(--space-4);align-items:center;background:var(--bg-soft);border-radius:var(--radius);padding:var(--space-6) var(--space-7);margin-top:var(--gap-section)}
.info-bar__icon{width:44px;height:44px;flex:none;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;color:var(--green-900)}
.info-bar p{margin:0;font-size:var(--fs-micro)}
.page-hero__title{max-width:22ch}
@media(max-width:900px){
.apply-card{grid-template-columns:1fr}
.value-cell+.value-cell{border-left:0;border-top:1px solid rgba(255,255,255,.15);padding-top:var(--space-5);margin-top:var(--space-5)}
.hero-dark__grid{grid-template-columns:1fr}
.catalogue-panel{margin-top:-40px}
}
/* ---------- vision / mission / values ---------- */
.vmv-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-2)}
.vmv-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-7)}
.vmv-card p:last-child{margin:0;color:var(--ink);font-size:var(--fs-caption)}
@media(max-width:700px){.vmv-grid{grid-template-columns:1fr}}
/* ---------- cookie consent banner ---------- */
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:200;max-width:640px;
margin-inline:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
box-shadow:0 24px 60px rgba(21,61,46,.22);padding:var(--space-6)}
.cookie-banner__inner{display:flex;flex-direction:column;gap:var(--space-4)}
.cookie-banner p{margin:0;font-size:var(--fs-micro);color:var(--muted)}
.cookie-banner a{color:var(--green-900);text-decoration:underline}
.cookie-banner__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.cookie-banner__actions .btn{padding:var(--space-3) var(--space-5);font-size:var(--fs-micro)}
.cookie-banner__manage{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:var(--space-3)}
.cookie-banner__manage[hidden]{display:none}
.cookie-toggle{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-micro);color:var(--ink)}
.cookie-banner__manage .btn{align-self:flex-start;padding:var(--space-3) var(--space-5);font-size:var(--fs-micro)}
/* ---------- download-gate modal (assets/js/download-gate.js) ---------- */
.dlgate-backdrop{position:fixed;inset:0;background:rgba(12,36,27,.5);z-index:500}
.dlgate{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:501;
width:min(440px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow-y:auto;
background:#fff;border-radius:var(--radius);box-shadow:0 24px 60px rgba(21,61,46,.28);
padding:var(--space-7)}
.dlgate__close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:0;background:transparent;
color:var(--muted);border-radius:50%;display:grid;place-items:center;cursor:pointer}
.dlgate__close:hover{background:var(--bg-soft);color:var(--ink)}
.dlgate h3{margin:var(--space-2) 0 var(--space-3);font-size:var(--fs-h6)}
.dlgate__doc{margin:0 0 var(--space-5);font-size:var(--fs-micro);color:var(--muted)}
.dlgate form{display:flex;flex-direction:column;gap:var(--space-4)}
.dlgate label{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-micro);font-weight:500;color:var(--ink)}
.dlgate__optional{font-weight:400;color:var(--muted)}
.dlgate input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
font:inherit;font-size:var(--fs-caption);background:#fff}
.dlgate input:focus-visible{outline:2px solid var(--green-800);outline-offset:1px}
.dlgate .btn{width:100%;justify-content:center;margin-top:var(--space-1)}
.dlgate__error{margin:0;color:#b3261e;font-size:var(--fs-micro)}
.dlgate__note{margin:var(--space-1) 0 0;font-size:var(--fs-micro);color:var(--muted)}
.dlgate__note a{color:var(--green-900)}
@media(max-width:480px){.dlgate{padding:var(--space-6)}}
/* ---------- Level-1 template-enrichment helpers ---------- */
.leader-card__role{color:var(--muted);font-size:var(--fs-micro);margin:2px 0 0}
a.feature-card{text-decoration:none;color:inherit;display:block}
/* S21: numbered step cards, adapted from the Finovate reference's process
grid — the first step gets the lime "featured" treatment, its number
badge inverting to white; steps 2+ stay on the soft background with a
lime badge. Dark-green text throughout (not the reference's white-on-
lime) to keep this site's one text-on-lime contrast rule intact. */
.steps-list{list-style:none;padding:0;margin:var(--space-6) 0 0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5)}
.steps-list li{display:flex;flex-direction:column;gap:var(--space-4);background:var(--bg-soft);
border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-6) var(--space-5)}
.steps-list b{width:44px;height:44px;flex:none;border-radius:999px;background:var(--lime-500);color:var(--green-900);display:grid;place-items:center;font-size:var(--fs-micro);font-weight:700}
.steps-list strong{display:block;font-family:var(--font-head);font-weight:600;color:var(--green-900);font-size:var(--fs-micro);margin-bottom:var(--space-2)}
.steps-list span{font-size:var(--fs-micro);color:var(--muted);line-height:1.5}
.steps-list li:first-child{background:var(--lime-500);border-color:var(--lime-500)}
.steps-list li:first-child b{background:#fff}
.steps-list li:first-child span{color:var(--green-800)}
.basic-page__section{margin-top:2.4em}
.contact-map{margin-top:var(--space-7);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/6}
.contact-map iframe{width:100%;height:100%;border:0}
.page-body :is(h2,h3){margin-top:1.4em}
/* ---------- homepage: added sections (industries, custom forming, initiatives, sustainability numbers, team, insights) ---------- */
.home-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-8)}
@media(max-width:900px){.home-ind-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.home-ind-grid{grid-template-columns:1fr}}
.home-ind-grid a.feature-card{display:flex;flex-direction:column;gap:var(--space-2);height:100%}
.home-ind-grid a.feature-card h3{margin:0}
.home-ind-grid a.feature-card .link-arrow{margin-top:auto;padding-top:var(--space-4)}
.systems-section{position:relative}
/* ---------- AVI Trace: 5-stage journey ----------
Desktop: a connected vertical stage list beside one detail panel — a
click swaps the panel's kicker/description/watermark, nothing else on
the page moves. Mobile: the stage list and panel stack, so all 5 stages
stay reachable by scrolling — never a horizontally-scrolling strip. */
/* One shared card holding Trace + Q-Bic (see home.html) so the section
reads as one "Smart Packaging Systems" unit with two parts, instead of a
rich full-bleed Trace panel followed by a visibly smaller, sparser Q-Bic
block floating on its own beneath it. */
.systems-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(28px,4vw,44px);margin-top:var(--space-7);box-shadow:0 30px 60px -42px rgba(21,61,46,.3)}
.systems-card__divider{height:1px;background:var(--line);margin:clamp(32px,4vw,48px) 0}
.trace-intro{margin-bottom:var(--space-6);max-width:64ch}
.trace-intro__eyebrow{margin:0 0 var(--space-2);font-family:var(--font-head);font-weight:700;font-size:var(--fs-micro);
letter-spacing:.08em;text-transform:uppercase;color:var(--lime-700)}
.trace-intro h3{margin:0 0 var(--space-2);font-size:var(--fs-h2)}
/* :not(...) excludes the sibling above —
a bare "p" here was also silently overriding that eyebrow's own
font-size, since both are
elements inside .trace-intro. */
.trace-intro p:not(.trace-intro__eyebrow){margin:0;color:var(--muted);font-size:var(--fs-h5);line-height:1.55;max-width:58ch}
/* Desktop: selector | photograph | heading+description, three genuine
columns with real width each (not squeezed) — a distinct photo per
stage, swapped together with the panel's text on every click. */
/* Used to be its OWN white, bordered, rounded box nested directly inside
.systems-card's identical white/bordered/rounded frame — a visible
frame-within-a-frame around the journey (and inset from it by
.systems-card's own padding, so the two frames never even touched at the
edge; the second frame was purely decorative repetition). .systems-card
is already the outer frame for this whole "Smart Packaging Systems" card
(Trace + Q-Bic both live inside it), so the journey grid no longer
repeats it — the stage-list/media/panel columns keep their own internal
dividers (border-right / border-bottom below) for grouping. */
/* Final cohesive-homepage reference topology: five connected tabs in ONE
horizontal row above a two-column image/content row — not three side-
by-side columns (stage-list | media | panel) the way this used to read.
Values (columns, aspect-ratio, the panel's fixed per-row grid) are
ported directly from the reference's own unconditional (!important)
override, which is the authoritative final layout, not its earlier,
now-superseded three-column draft. */
.trace-journey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-areas:"stages stages" "media panel";height:auto;gap:var(--space-5)}
.trace-journey__stages{grid-area:stages;display:flex;flex-direction:row;
position:relative;gap:var(--space-2);overflow-x:auto;padding:0 0 var(--space-3)}
/* Connecting track: a single bar the full width of the row, centred on the
number badges and painted BEHIND the (opaque) stage pills — see
.trace-journey__stage's z-index below. It is only ever visible in the
8px gaps between pills, so it can never cross a title. An earlier pass
here tried a connecting-line-between-circles treatment (an
absolutely-positioned ::before per stage) that visually cut straight
through the adjacent stage's title text at this row's real width/gap;
that never matched any approved design and was removed. This track is
a different, safer construction: --trace-progress (set by selectStage()
in site.js) draws the lime-to-neutral split without any per-stage
geometry. */
.trace-journey__stages::before{content:"";position:absolute;left:0;right:0;top:50%;
height:2px;transform:translateY(-50%);z-index:0;pointer-events:none;
background:linear-gradient(to right,#88a65c 0%,#88a65c var(--trace-progress,0%),var(--line) var(--trace-progress,0%),var(--line) 100%)}
/* Bordered-pill stages, per the reference's actual final rendering. Active =
solid dark-green fill + lime number + white title; path-complete = light
green tint; everything else is a plain white/bordered default. z-index:1
keeps every pill's opaque background painting over the track above. */
.trace-journey__stage{position:relative;z-index:1;display:flex;flex:1;min-width:150px;
align-items:center;gap:var(--space-3);text-align:left;
border:1px solid var(--line);border-radius:10px;background:#fff;
padding:var(--space-3) var(--space-2);cursor:pointer;font-family:inherit;overflow:visible;
transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}
.trace-journey__stage:hover{background:#e7f1d3;border-color:#507a13;box-shadow:0 3px 8px rgba(21,61,46,.08)}
.trace-journey__stage:focus-visible{outline:3px solid #70961c;outline-offset:3px}
.trace-journey__stage.is-path-complete{background:#edf3e5;border-color:#88a65c}
.trace-journey__stage.is-active{background:var(--green-900);border-color:var(--green-900);
box-shadow:0 4px 10px rgba(21,61,46,.1)}
.trace-journey__stage.is-active:hover{background:#254f3d}
.trace-journey__num{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
font-family:var(--font-head);font-weight:700;font-size:var(--fs-micro);
background:#fff;color:var(--muted);border:1px solid var(--line);transition:background .2s ease,color .2s ease,border-color .2s ease}
.trace-journey__stage.is-active .trace-journey__num{background:var(--lime-500);color:var(--green-900);border-color:var(--lime-500)}
.trace-journey__stage-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.trace-journey__title{font-family:var(--font-head);font-weight:600;color:var(--green-900);font-size:var(--fs-h6);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trace-journey__stage.is-active .trace-journey__title{color:#fff}
/* Sub-labels ("Where the journey begins") don't fit a compact horizontal
tab and the reference's final row hides them here — full stage context
still lives in the panel's own kicker/description once selected. */
.trace-journey__sub{display:none}
.trace-journey__media{grid-area:media;width:100%;height:auto;min-height:0;
aspect-ratio:4/3;position:relative;align-self:start;border-radius:12px;overflow:hidden;background:var(--bg-soft)}
.trace-journey__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.trace-journey__media img[hidden]{display:none}
.trace-journey__placeholder{position:absolute;inset:12px;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:var(--space-2);border:1.5px dashed var(--line);border-radius:12px;
color:var(--muted);text-align:center;font-size:var(--fs-micro);padding:var(--space-4)}
.trace-journey__placeholder[hidden]{display:none}
/* Fixed per-row heights (not a min-height on the whole panel) — every
stage's content occupies the SAME six reserved rows regardless of
whether that stage actually has location/date metadata, so a shorter
description or missing metadata never collapses the frame. */
.trace-journey__panel{grid-area:panel;position:relative;overflow:hidden;background:var(--green-900);color:var(--on-dark);
aspect-ratio:4/3;height:auto;min-height:0;padding:var(--space-6);display:grid;
grid-template-rows:18px 56px 66px 54px 44px 30px;gap:var(--space-2);border-radius:12px;align-content:start}
/* All explicit px below, matching the reference's own measured values —
1rem resolves to 12px on this site (html{font-size:75%}), so the earlier
rem-based sizes here (meant to read as ~16px body / ~13px caption) were
quietly rendering at 3/4 that size. */
.trace-journey__watermark{position:absolute;top:8px;right:24px;font-family:var(--font-head);
font-weight:700;font-size:var(--fs-display);line-height:1;color:rgba(255,255,255,.07)}
.trace-journey__eyebrow{position:relative;margin:0;font-family:var(--font-head);font-weight:700;
font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--lime-500)}
.trace-journey__kicker{position:relative;margin:0;font-family:var(--font-head);font-weight:600;
color:#fff;font-size:var(--fs-h3);line-height:1.15}
.trace-journey__desc{position:relative;margin:0;color:var(--on-dark);font-size:var(--fs-h5);
line-height:1.5;max-width:44ch}
.trace-journey__meta{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-7);margin:0}
.trace-journey__meta[hidden]{display:flex;visibility:hidden}
.trace-journey__meta-item{display:flex;flex-direction:column;gap:3px}
.trace-journey__meta-item[hidden]{visibility:hidden}
.trace-journey__meta-label{font-family:var(--font-head);font-weight:700;font-size:var(--fs-micro);
letter-spacing:.08em;text-transform:uppercase;color:var(--lime-500)}
.trace-journey__meta-value{font-size:var(--fs-h6);color:#fff}
/* Plain, readable body text — was small lime italic, which read as a
decorative aside rather than the plain factual disclosure it actually is
("illustrative journey, one example order"). */
.trace-journey__note{position:relative;margin:0;padding-top:var(--space-2);border-top:1px solid rgba(255,255,255,.14);
color:var(--on-dark);font-size:var(--fs-caption);font-style:normal;line-height:1.45;max-width:46ch}
.trace-journey .link-arrow{position:relative;color:#fff;margin:0;font-size:var(--fs-h6)}
@media(max-width:1100px){
/* Below 1100px the reference drops the media/panel side-by-side split
too — stages row, then media, then panel, each full width. */
.trace-journey{grid-template-columns:1fr;
grid-template-areas:"stages" "media" "panel"}
.trace-journey__panel{aspect-ratio:auto;min-height:384px;
grid-template-rows:18px 56px 66px 54px 44px 30px}
.trace-journey__stage{flex:none}
}
@media(max-width:600px){
.trace-journey__stages{gap:var(--space-2)}
.trace-journey__stage{min-width:130px;padding:var(--space-3) var(--space-2)}
.trace-journey__panel{min-height:410px;padding:var(--space-5);
grid-template-rows:18px 60px 72px 60px 54px 30px}
}
/* ---------- Q-Bic: sliding 3-option photo selector ----------
One stable stage (fixed aspect-ratio, object-fit:contain so nothing
crops) — swapping the active slide crossfades opacity while the pill
behind the selected label slides via transform, matching the approved
study's mechanics without CSS-generated cubes or a repeated photo. */
/* Image left, copy right — deliberately mirrored from the Trace panel
directly above it (stage-list-then-panel, reading left to right) so the
two sections don't repeat the same visual rhythm back to back. */
.qbic-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:center}
.qbic-panel__copy{order:2}
.qbic-panel__stage-wrap{order:1}
@media(max-width:820px){.qbic-panel__copy,.qbic-panel__stage-wrap{order:0}}
.qbic-panel__kicker{margin:0 0 var(--space-3);font-family:var(--font-head);font-weight:700;font-size:var(--fs-micro);
letter-spacing:.08em;text-transform:uppercase;color:var(--lime-700)}
.qbic-panel__copy h3{margin:0 0 var(--space-3);font-size:var(--fs-h2)}
/* :not(...) excludes the sibling
above —
same bare-"p"-also-matches-the-eyebrow issue as .trace-intro p. */
.qbic-panel__copy p:not(.qbic-panel__kicker){color:var(--muted);max-width:42ch;font-size:var(--fs-h5);line-height:1.6}
.qbic-panel__pills{position:relative;display:inline-flex;gap:2px;background:var(--bg-soft);
border-radius:999px;padding:var(--space-1);margin:var(--space-5) 0 0}
/* Separated from the selector above (own top margin + hairline rule)
instead of sitting right under it with only the pills' own margin — a
different action (leave the panel to read more), not a fourth option. */
.qbic-panel__discover{display:inline-flex;margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line)}
.qbic-panel__pill-bg{position:absolute;top:4px;left:0;bottom:4px;background:var(--green-900);
border-radius:999px;transition:transform .3s ease,width .3s ease;z-index:0}
.qbic-panel__pill{position:relative;z-index:1;background:none;border:0;border-radius:999px;
padding:var(--space-3) var(--space-5);font-family:var(--font-head);font-weight:600;font-size:var(--fs-caption);
color:var(--muted);cursor:pointer;transition:color .2s ease}
.qbic-panel__pill.is-active{color:#fff}
.qbic-panel__stage-wrap{display:flex;flex-direction:column}
/* Left-aligned (not centered) so its left edge lines up with the Trace
panel's left edge directly above it — centering here was the cause of
the two sections reading as different widths/margins down the page. */
/* Bigger stage than before (340 -> 440px) plus a touch of shadow/lift —
Trace's photo+dark-panel combination reads as the heavier of the two
parts otherwise; a larger, slightly elevated frame gives Q-Bic
comparable visual weight instead of reading as the "minor" section. */
.qbic-panel__frame{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;margin:0;
border-radius:var(--radius);background:var(--bg-soft);border:1px solid var(--line);overflow:hidden;
box-shadow:0 24px 48px -34px rgba(21,61,46,.28)}
/* The three real source photos don't share one studio background (two are
on a clean seamless backdrop, the third shows a kraft shipping case) —
cropping/recolouring that difference out would mean editing the actual
photos, which is out of scope here. Instead a soft neutral vignette,
shared by all three slides, fades each photo's own edge into the frame's
--bg-soft so the three read as one consistent "stage" even though the
underlying photography isn't uniform. Sits above the images, below the
caption/selector (which live outside this frame). */
.qbic-panel__frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
box-shadow:inset 0 0 0 44px var(--bg-soft);
-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 58%,#000 84%);
mask-image:radial-gradient(circle at 50% 50%,transparent 58%,#000 84%)}
.qbic-panel__slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
opacity:0;transition:opacity .4s ease;padding:var(--space-8)}
.qbic-panel__slide.is-active{opacity:1}
.qbic-panel__slide img{width:100%;height:100%;object-fit:contain}
/* R4: the 6-punnet case photo is ~1.3:1 (wide), unlike the other two
near-square photos — object-fit:contain left it visibly smaller within
the same square frame, with much more empty vignette around it than
its siblings ("not square" — it wasn't filling the frame the same way).
cover fills the frame like the other two; only the case's outer left/
right edges are trimmed, not the punnets themselves. */
.qbic-panel__slide[data-qbic-slide="2"] img{object-fit:cover;object-position:center 45%}
.qbic-panel__placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
color:var(--muted);text-align:center;font-size:var(--fs-caption);border:1.5px dashed var(--line);
border-radius:14px;padding:var(--space-7);width:100%;height:100%;justify-content:center}
.qbic-panel__caption{margin:var(--space-5) 0 0;color:var(--muted);font-size:var(--fs-h5);line-height:1.5;
min-height:2.6em;max-width:440px;text-align:left}
@media(max-width:820px){.qbic-panel{grid-template-columns:1fr}.qbic-panel__frame{max-width:320px}}
@media(prefers-reduced-motion:reduce){
.qbic-panel__slide,.qbic-panel__pill-bg,.trace-journey__stage{transition:none}
}
.bignum{background:var(--lime-500);color:var(--green-900);border-radius:var(--radius);padding:clamp(28px,4vw,40px);display:flex;flex-direction:column;justify-content:center}
.bignum__value{font-family:var(--font-head);font-weight:600;font-size:var(--fs-display);line-height:1}
.bignum__label{font-size:var(--fs-caption);max-width:28ch;margin-top:var(--space-2)}
.bignum__list{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-3)}
.bignum__list li{font-size:var(--fs-micro);padding-left:var(--space-5);position:relative}
.bignum__list li::before{content:"\25C6";position:absolute;left:0;color:var(--green-900)}
/* ---------- custom thermoforming product studio ----------
Presentation matches the approved reference (avi-component-direction.html):
a dark, isolated stage with a layered "stacked base" shadow accent
underneath, and a sliding-pill tab indicator for Form/Detail/Dimensions
(the reference's own cited pattern: Aceternity "Animated Tabs"). The
reference's own 3D geometry is explicitly labelled illustrative
("not a verified AVI product model") — this implementation keeps that
presentation but drives it with a REAL catalogue product (PNG 250/55,
a verified, caveat-free STEP-derived 3D model — see
3D-VIEWER-HANDOFF.md) and real dimensions_mm, never invented numbers. */
/* One unified card holding both halves (see home.html) instead of a light
column beside a separate floating dark box: the outer card supplies the
single shared border/shadow/radius, and overflow:hidden lets the two
zones' background colours meet edge-to-edge with no visible seam. */
.thermoform-card{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius);
overflow:hidden;background:#fff;border:1px solid var(--line);
box-shadow:0 30px 60px -40px rgba(21,61,46,.35)}
.thermoform-card__copy{padding:clamp(32px,4vw,56px)}
@media(max-width:900px){.thermoform-card{grid-template-columns:1fr}}
.studio-panel{position:relative;isolation:isolate;
background:radial-gradient(140% 120% at 15% 0%,#1d4a38 0%,#123726 46%,#081f18 100%);
padding:clamp(28px,3.4vw,40px);display:flex;flex-direction:column}
.studio-panel__stage-top{display:flex;justify-content:space-between;gap:var(--space-3);
font-family:var(--font-head);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;
color:#b8cbae;margin-bottom:var(--space-4)}
/* Stage + a control sidebar sit side by side, not stacked -- controls
beside the pack instead of in a full-width row underneath it, which
read as a large image with a disproportionate empty-feeling strip below
it. */
.studio-panel__body{display:grid;grid-template-columns:1fr 200px;gap:var(--space-6);align-items:stretch}
/* One frame, not two: .stage used to be its own bordered/rounded box with
.scene as a SECOND independently-rounded/backgrounded box nested right
inside it — a visible frame-within-a-frame around a comparatively small
pack. .stage is now a plain, unstyled positioning wrapper; .scene alone
carries the border/radius/background, so the illustrative pack sits
inside a single frame that can also be given more room to be enlarged. */
.studio-panel__stage{position:relative;height:100%}
.studio-panel__scene{position:relative;height:100%;min-height:360px;perspective:850px;overflow:hidden;
background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(166,215,32,.16) 0%,rgba(123,153,94,.14) 38%,transparent 70%),
linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%);
border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.studio-panel__sidebar{display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);min-width:0}
.studio-panel__floor-shadow{position:absolute;left:15%;top:68%;width:70%;height:35px;
background:rgba(86,100,80,.25);filter:blur(15px);border-radius:50%;transform:rotate(-14deg)}
/* The illustrative pack itself: a handful of absolutely-positioned divs
given a shared rotateX + rotateZ(--angle) transform (rotation slider
below writes directly to --angle) — the exact "CSS pack" construction
from the approved reference, not a photograph or a real 3D model.
Sized up ~1.3x from the original reference (175x128 -> 228x166, walls/rim
scaled to match) so the object reads as the stage's clear focal point
instead of a small shape floating in a lot of empty frame — the Detail
view's extra scale(1.55) and Dimensions view's scale(.88) still apply on
top of this larger base, so all three tabs grow together. */
.studio-panel__pack{--angle:-18deg;position:absolute;width:228px;height:166px;top:64px;
left:calc(50% - 114px);transform-style:preserve-3d;
transform:rotateX(58deg) rotateZ(var(--angle));transition:transform .55s ease}
.studio-panel__pack-bottom{position:absolute;inset:9px;border:3px double rgba(123,143,130,.42);
border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(193,206,198,.36) 40%,
rgba(255,255,255,.66) 70%,rgba(158,173,159,.27) 100%);transform:translateZ(-74px);
box-shadow:inset 0 0 0 7px rgba(255,255,255,.24)}
.studio-panel__pack-rim{position:absolute;inset:-6px;border:6px solid rgba(238,247,216,.87);
border-radius:28px;box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.6);
transform:translateZ(2px)}
.studio-panel__wall{position:absolute;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.65) 0px,rgba(248,255,243,.16) 3px,
rgba(117,143,126,.33) 5px,rgba(242,250,237,.49) 7px,rgba(252,255,245,.27) 12px);
border:1px solid rgba(129,151,135,.5)}
.studio-panel__wall--front{width:228px;height:74px;top:166px;transform-origin:top;
transform:rotateX(-90deg);border-radius:0 0 22px 22px}
.studio-panel__wall--back{width:228px;height:74px;top:0;transform-origin:top;transform:rotateX(-90deg)}
.studio-panel__wall--left{width:74px;height:166px;left:0;transform-origin:left;transform:rotateY(90deg)}
.studio-panel__wall--right{width:74px;height:166px;left:228px;transform-origin:left;transform:rotateY(90deg)}
.studio-panel__feature-note,.studio-panel__dimension{position:absolute;font-family:var(--font-head);
font-size:var(--fs-micro);opacity:0;transition:opacity .25s ease;color:#d3e4c3}
.studio-panel__feature-note{right:10px;top:28px;display:flex;gap:var(--space-2);align-items:center}
.studio-panel__feature-note span{width:45px;border-top:1px solid rgba(100,123,96,.7);
transform:rotate(-25deg);transform-origin:right}
.studio-panel__feature-note b{font-weight:500;background:#d4e6a8;color:#1f432e;border-radius:5px;padding:var(--space-1) var(--space-2)}
.studio-panel__scene[data-view="detail"] .studio-panel__pack{
transform:translate(-25px,35px) scale(1.55) rotateX(53deg) rotateZ(-18deg)}
.studio-panel__scene[data-view="detail"] .studio-panel__feature-note{opacity:1}
.studio-panel__scene[data-view="dimensions"] .studio-panel__pack{
transform:rotateX(28deg) rotateZ(0deg) scale(.88)}
.studio-panel__scene[data-view="dimensions"] .studio-panel__dimension{opacity:1}
.studio-panel__dim--length{bottom:22px;left:23%;width:54%;text-align:center;
border-top:1px solid rgba(101,127,100,.7);padding-top:var(--space-1)}
.studio-panel__dim--height{right:3px;top:100px;border-left:1px solid rgba(101,127,100,.7);padding:var(--space-4) 0 var(--space-4) var(--space-1)}
.studio-panel__caption{margin:0;color:#c8d6bf;font-size:var(--fs-h6);line-height:1.5}
/* Vertical now (stacked in the sidebar beside the pack) -- the sliding
indicator moves on the Y axis instead of X, see moveIndicator() in
home.html. */
.studio-panel__tabs{position:relative;display:flex;flex-direction:column;gap:3px;background:#0a251d;
border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:var(--space-1);width:100%;
box-shadow:inset 0 1px 4px rgba(0,0,0,.4)}
.studio-panel__tab-indicator{position:absolute;left:4px;right:4px;top:4px;
height:calc((100% - 14px) / 3);border-radius:5px;background:var(--lime-500);
box-shadow:0 2px 10px rgba(166,215,32,.35);
transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:0}
.studio-panel__tab{position:relative;z-index:1;background:none;border:0;border-radius:5px;
padding:var(--space-2) var(--space-4);font-family:var(--font-head);font-weight:600;font-size:var(--fs-caption);color:#baccad;
cursor:pointer;transition:color .25s ease;text-align:left}
.studio-panel__tab.is-active{color:var(--green-900)}
.studio-panel__tab:not(.is-active):hover{color:#fff}
.studio-panel__rotation{display:flex;flex-direction:column;gap:var(--space-3);align-items:stretch;
font-family:var(--font-head);font-size:var(--fs-micro);color:#aabd9f;letter-spacing:.06em;text-transform:uppercase}
.studio-panel__rotation[hidden]{display:none}
.studio-panel__rotation input{width:100%;min-width:0;-webkit-appearance:none;appearance:none;
height:4px;border-radius:999px;background:rgba(255,255,255,.14);outline:none}
.studio-panel__rotation input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
width:16px;height:16px;border-radius:50%;background:var(--lime-500);
box-shadow:0 2px 8px rgba(166,215,32,.5);cursor:pointer;border:2px solid #0a251d}
.studio-panel__rotation input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
background:var(--lime-500);box-shadow:0 2px 8px rgba(166,215,32,.5);cursor:pointer;
border:2px solid #0a251d}
@media(max-width:640px){.studio-panel__dimension{font-size:var(--fs-micro)}}
@media(max-width:560px){
/* Stage on top, sidebar (still vertical tabs) below -- simpler than
flipping the indicator's axis for one breakpoint, and a narrow
vertical tab column reads fine full-width too. */
.studio-panel__body{grid-template-columns:1fr}
.studio-panel__sidebar{max-width:280px}
}
@media(prefers-reduced-motion:reduce){.studio-panel__pack,.studio-panel__tab-indicator{transition:none}}
/* ---------- Sustainability + Standards & Certifications ----------
Ported from the approved reference (avi-impact-and-standards.html): composition, colours and
spacing match it. Type uses the shared --fs-* scale (the reference's px sizes were mapped to the
nearest step; the big 70px figure is now --fs-display). Scoped to .impact-section/
.standards-section so nothing here leaks into other sections. */
/* No padding override here any more — both used to sit much closer to
42px/48-38px than every other section's shared --gap-section rhythm
(64-80px via .section), making the page's vertical spacing uneven
between sections. Plain .section now, same breathing room everywhere. */
.impact-section{background:#f2f3ec;color:#193e32}
.standards-section{background:#fff;color:#193e32}
/* R4: was a bespoke dot+text eyebrow, inconsistent with the .pill badge
used for every other section label on the homepage — now plain .pill. */
/* Both headings below used to carry their own one-off font-size (36px,
33px) instead of the shared h2 rule every other homepage section
heading falls back to (Systems, Product Families) — three more
one-off sizes (clamp() on Explorer and Awards) are removed the same
way, below. Plain h2 now, no override, so every sectional headline on
the page reads at the same size. */
.impact-heading{margin:0}
.impact-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-7);align-items:end;margin-bottom:var(--space-7)}
.standards-intro{margin-bottom:var(--space-6)}
.impact-copy{font-size:var(--fs-h6);line-height:1.65;color:#58695f;margin:0;max-width:46ch}
.impact-body{display:grid;grid-template-columns:1fr 1.12fr;gap:var(--space-7)}
.impact-figure{margin:0;position:relative;min-height:300px;border-radius:10px;overflow:hidden;background:#173d32}
.impact-figure img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.impact-figcaption{position:absolute;bottom:0;left:0;right:0;padding:var(--space-8) var(--space-5) var(--space-5);
background:linear-gradient(transparent,#0b281de6);color:#fff;font-size:var(--fs-h5);line-height:1.4}
.impact-figcaption small{display:block;font-size:var(--fs-micro);letter-spacing:1.5px;text-transform:uppercase;
color:#c8e98e;margin-bottom:var(--space-1)}
.impact-major{padding:var(--space-1) 0 var(--space-6);border-bottom:1px solid #cad2c7}
.impact-number{font-size:var(--fs-display);line-height:1;letter-spacing:-4px;font-weight:500}
.impact-unit{font-size:var(--fs-h3);letter-spacing:-.5px;margin-left:var(--space-2)}
.impact-label{font-size:var(--fs-h6);line-height:1.5;margin:var(--space-2) 0 0;color:#516659}
.impact-minor{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);padding:var(--space-6) 0}
.impact-minor .impact-number{font-size:var(--fs-h2);letter-spacing:-1px}
.impact-minor .impact-unit{font-size:var(--fs-caption);letter-spacing:0;margin-left:var(--space-1)}
.impact-action{color:inherit;text-decoration:none;font-size:var(--fs-caption);font-weight:700;
display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px}
.impact-arrow{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:#addb18;font-size:var(--fs-h5);color:#193e32;flex:none}
/* Bumped from 11px/#6c786f — read as fine print at a glance rather than a
readable methodology note, especially now that it carries a real link. */
.impact-source{font-size:var(--fs-h6);line-height:1.65;color:#4a564d;margin:var(--space-4) 0 0}
.impact-source a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.impact-source a:hover{color:var(--green-900)}
/* Cohesive-homepage brief REFINE: one report composition (photo banner +
four EQUAL metrics + source/action footer) replacing the old asymmetric
1-major/2-minor layout. !important on .revision-report-intro's display:
same cascade issue as .journey-heading — .impact-intro (above) already
sets display:grid at equal specificity, later in the source than nothing
would otherwise beat it. */
.revision-report-intro{display:flex!important;align-items:flex-end;justify-content:space-between;gap:var(--space-7);margin-bottom:var(--space-7)}
.revision-report-intro h2{max-width:none!important}
/* .impact-copy already declares its own font-size/color below — a bare
"p" selector here was also silently catching the sibling
eyebrow in this same intro block (both are
elements) and, with
!important, forcing it to the copy's size/color too. */
.revision-report{overflow:hidden;border-radius:var(--radius);background:#fff;border:1px solid #cad6c7}
.revision-report .impact-figure{min-height:0;height:220px;border-radius:0}
.revision-report .impact-figure img{object-position:center 46%}
.revision-report .impact-figcaption{padding:56px var(--space-7) var(--space-6);font-size:var(--fs-h4);font-weight:500;
background:linear-gradient(transparent,rgba(11,40,29,.92))}
.revision-report .impact-figcaption small{font-size:var(--fs-caption);margin-bottom:var(--space-2)}
.reference-impact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:var(--space-7) var(--space-3)}
.reference-impact-metric{border:0;padding:var(--space-2) var(--space-6);min-width:0}
.reference-impact-metric:not(:last-child){border-right:1px solid #d8e0d4}
.revision-report .impact-number{font-size:var(--fs-h2);white-space:nowrap;letter-spacing:-1.2px}
.revision-report .impact-unit{font-size:var(--fs-h6);margin:var(--space-3) 0 0;display:block}
.revision-report .impact-label{font-size:var(--fs-h5);line-height:1.4;max-width:20ch;margin:0}
.revision-report-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
padding:var(--space-5) var(--space-8);border-top:1px solid #d8e0d4;background:#f8faf5}
.revision-report-footer .impact-source{margin:0;font-size:var(--fs-h6)}
.revision-report-footer .impact-action{margin:0}
@media(max-width:1100px){
.reference-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-7)}
.reference-impact-metric:nth-child(2){border-right:0}
.revision-report .impact-number{font-size:var(--fs-h2)}
}
@media(max-width:600px){
.revision-report-intro{display:block!important}
.revision-report-intro .impact-copy{margin-top:var(--space-4)!important}
.revision-report .impact-figure{height:180px}
.revision-report .impact-figcaption{font-size:var(--fs-h5);padding:var(--space-8) var(--space-5) var(--space-5)}
.reference-impact-grid{padding:var(--space-6) var(--space-2);row-gap:var(--space-6)}
.reference-impact-metric{padding:var(--space-1) var(--space-3)}
.revision-report .impact-number{font-size:var(--fs-h3);letter-spacing:-1px}
.revision-report .impact-label{font-size:var(--fs-h6)}
.revision-report-footer{padding:var(--space-5);flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.revision-report-footer .impact-source{font-size:var(--fs-caption)}
}
/* Evidence grid: 4 columns / 2 rows on desktop, thin neutral dividers, plain
white cells — no floating cards, shadows or glass. Logo positions are
fixed (no JS shuffling); .standards-cell is a plain link per cell. */
.standards-grid{display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid #dfe5dd;border-left:1px solid #dfe5dd}
.standards-cell{padding:var(--space-5) var(--space-3) var(--space-4);border-right:1px solid #dfe5dd;border-bottom:1px solid #dfe5dd;
min-width:0;background:#fff;color:inherit;text-decoration:none;transition:background .2s ease;
text-align:center;display:flex;flex-direction:column;align-items:center}
.standards-cell:hover{background:#f5f7ef}
.standards-cell img{display:block;width:100%;height:56px;object-fit:contain;margin-bottom:var(--space-4)}
/* Optical balance only — object-fit:contain still preserves each mark's own
aspect ratio (no stretch); this just gives the thinner-margined marks a
taller box so they carry the same visual weight as their neighbours. */
.standards-cell img[data-logo-size="lg"]{height:68px;margin-bottom:2px}
.standards-cell h3{font-size:var(--fs-h6);line-height:1.4;font-weight:700;margin:0 0 var(--space-1)}
/* 11px/#617067 read as fine print; bumped for readability, still compact
enough for a dense 7-cell grid. */
.standards-cell p{font-size:var(--fs-body);line-height:1.55;color:#4f5d54;margin:0}
.standards-cell--action{background:#f0f4e9;display:flex;flex-direction:column;justify-content:center;gap:var(--space-3)}
.standards-cell--action:hover{background:#e9f0dd}
.standards-cell--action h3{font-size:var(--fs-h5);font-weight:500;line-height:1.25}
/* The certificate grid's 8th cell: quieter than a heading+paragraph card —
same pale-green treatment as .standards-cell--action, one left-aligned
label and a small lime circular arrow stacked beneath it, matching the
grid's own dimensions/dividers via the shared .standards-cell base. */
.standards-cell--scope{display:flex;flex-direction:column;justify-content:center;
align-items:flex-start;gap:var(--space-4);background:#f0f4e9;text-align:left}
.standards-cell--scope:hover{background:#e9f0dd}
.standards-cell--scope__label{font-family:var(--font-head);font-weight:500;
font-size:var(--fs-h6);line-height:1.35;color:var(--green-900)}
.standards-cell--scope__arrow{width:30px;height:30px;border-radius:999px;
background:var(--lime-500);color:var(--green-900);display:grid;place-items:center;
font-size:var(--fs-micro);transition:transform .2s ease,background .2s ease}
.standards-cell--scope:hover .standards-cell--scope__arrow{transform:translate(2px,-2px);background:var(--lime-600)}
.standards-foot{font-size:var(--fs-micro);line-height:1.6;color:#6c786f;margin:var(--space-4) 0 0}
@media(max-width:900px){
.impact-intro{grid-template-columns:1fr;gap:var(--space-4);align-items:start}
.impact-copy{max-width:none}
}
@media(max-width:550px){
.impact-body{grid-template-columns:1fr;gap:var(--space-5)}
.impact-figure{min-height:210px}
.impact-number{font-size:var(--fs-display)}
.standards-grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
.standards-cell,.standards-cell--scope__arrow{transition:none}
.standards-cell--scope:hover .standards-cell--scope__arrow{transform:none}
}
/* Sustainability pillars (3-4 named sections, each with a hard-number stat)
and the certification/award timeline — see ui4.html. Data-driven, opt-in
via page.sustainability_pillars / page.sustainability_timeline so no
other ui4 page is affected. */
.pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6);margin-top:var(--space-6)}
.pillar-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);padding:clamp(26px,3vw,32px);display:flex;flex-direction:column;gap:var(--space-4)}
.pillar-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--lime-500),var(--lime-700))}
.pillar-card__stat-value{display:block;font-family:var(--font-head);font-weight:700;
font-size:var(--fs-h2);color:var(--green-900);line-height:1;letter-spacing:-.02em}
.pillar-card__stat-label{display:block;margin-top:var(--space-2);font-size:var(--fs-micro);color:var(--muted);
text-transform:uppercase;letter-spacing:.05em}
.pillar-card h3{margin:0;padding-top:var(--space-4);border-top:1px solid var(--line);
font-size:var(--fs-h6);color:var(--green-900)}
.pillar-card:not(:has(.pillar-card__stat)) h3{padding-top:0;border-top:0}
.pillar-card p{margin:0;color:var(--muted);font-size:var(--fs-micro);line-height:1.6}
/* UN SDG chips — 14 numbered goals need to be scannable at a glance, not
read as 14 full descriptions; the number itself carries the reference
(SDG 12, SDG 13, …) buyers already recognise. */
.sdg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--space-4)}
.sdg-chip{display:flex;align-items:center;gap:var(--space-3);background:#fff;border:1px solid var(--line);
border-radius:14px;padding:var(--space-4) var(--space-4)}
.sdg-chip__num{flex:none;width:36px;height:36px;border-radius:10px;background:var(--green-900);
color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:var(--fs-micro)}
.sdg-chip__title{font-size:var(--fs-micro);color:var(--green-900);font-weight:600;line-height:1.3}
.cert-timeline{list-style:none;margin:var(--space-6) 0 0;padding:0;position:relative}
.cert-timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.cert-timeline__item{position:relative;display:flex;gap:var(--space-5);padding:0 0 var(--space-6) var(--space-7)}
.cert-timeline__item:last-child{padding-bottom:0}
.cert-timeline__item::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--lime-500);border:2px solid var(--bg)}
.cert-timeline__year{flex:none;font-family:var(--font-head);font-weight:700;color:var(--green-900);min-width:4ch}
.cert-timeline__title{margin:0;color:var(--ink)}
.cert-timeline__source{font-size:var(--fs-micro);color:var(--green-700);text-decoration:none}
.cert-timeline__source:hover{text-decoration:underline}
@media(max-width:520px){.cert-timeline__item{gap:var(--space-3)}.cert-timeline__year{min-width:auto}}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-8)}
@media(max-width:800px){.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:360px){.team-grid{grid-template-columns:1fr}}
.team-grid .leader-card{position:relative;display:block;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);padding:var(--space-5);text-decoration:none;color:inherit;
transition:background .2s ease,border-color .2s ease,transform .18s ease,box-shadow .18s ease}
.team-grid .leader-card h3{margin:0;font-size:var(--fs-caption);color:var(--green-900)}
.team-grid .leader-card__photo{aspect-ratio:1/1;border-radius:14px;margin-bottom:var(--space-4)}
.team-grid .leader-card__initials{aspect-ratio:1/1;border-radius:14px;margin-bottom:var(--space-4);font-size:var(--fs-h3)}
/* S17: was a plain, unlinked card with a transition set on it but no
:hover state to transition to — the hover effect never actually fired.
Adapted from the Finovate reference's team-card hover (card tints,
corner arrow inverts) to AVI's own square-photo card shape. */
.team-grid .leader-card__arrow{position:absolute;right:14px;bottom:14px;width:36px;height:36px;
border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--green-900);
display:grid;place-items:center;font-size:var(--fs-micro);
transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
/* The "clickable" lime-flip treatment below was built for the homepage's
team-preview cards, which are real links ( to /about/our-people/) —
the corner arrow and background flip signal "click me". The Departmental
Leadership grid on /about/our-people/ reuses .leader-card/.team-grid but
renders plain, unlinked s (leader-card--static) since there's no
per-person page to drill into. Applying the same "this is clickable"
hover there was misleading (card lit up, nothing happened on click), so
it's scoped out here rather than shared. */
.team-grid .leader-card:not(.leader-card--static):hover,.team-grid .leader-card:not(.leader-card--static):focus-visible{background:var(--lime-500);border-color:var(--lime-500);
transform:translateY(-3px);box-shadow:0 14px 30px rgba(21,61,46,.14)}
.team-grid .leader-card:not(.leader-card--static):hover .leader-card__role,.team-grid .leader-card:not(.leader-card--static):focus-visible .leader-card__role{color:var(--green-800)}
.team-grid .leader-card:not(.leader-card--static):hover .leader-card__arrow,.team-grid .leader-card:not(.leader-card--static):focus-visible .leader-card__arrow{
background:var(--green-900);color:#fff;border-color:var(--green-900);transform:translate(2px,-2px)}
.team-grid .leader-card--static{cursor:default}
.team-grid .leader-card--static:hover,.team-grid .leader-card--static:focus-visible{transform:translateY(-2px);box-shadow:0 10px 22px rgba(21,61,46,.08)}
@media (prefers-reduced-motion:reduce){
.team-grid .leader-card,.team-grid .leader-card__arrow{transition:background .2s ease,color .2s ease,border-color .2s ease}
.team-grid .leader-card:hover,.team-grid .leader-card:focus-visible{transform:none}
.team-grid .leader-card:hover .leader-card__arrow,.team-grid .leader-card:focus-visible .leader-card__arrow{transform:none}
}
/* ---------- review 1: form validation + enquiry context (CRO-01/03/04) ---------- */
.lead-form__context{grid-column:1/-1;margin:0 0 var(--space-1);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm,14px);
background:var(--bg-soft);border:1px solid var(--line);font-size:var(--fs-micro);color:var(--green-900)}
.lead-form__context b{font-weight:600}
.lead-form label{display:block}
.lead-form .req{color:var(--lime-700)}
.lead-form :is(input,textarea,select)[aria-invalid="true"]{border-color:#b3261e;outline-color:#b3261e}
.field-error{display:block;margin-top:var(--space-1);font-size:var(--fs-micro);color:#b3261e}
.form-success{display:none;grid-column:1/-1;padding:var(--space-5) var(--space-6);border-radius:var(--radius-sm,14px);
background:var(--bg-soft);border:1px solid var(--line)}
.form-success[data-open="true"]{display:block}
.form-success h3{margin:0 0 var(--space-2)}
.form-success p{margin:0;color:var(--muted)}
/* ---------- review 1: mobile overflow containment (UX-01) ---------- */
.home-hero__head,.cta-pair{min-width:0}
.cta-pair{flex-wrap:wrap}
/* contact-handler: honeypot field — present for bots, hidden from people + AT */
.lead-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ============================================================================
MEGA-MENU: desktop behaviour support + mobile modal-drawer accordion
(rolled in from prototype/mega-menu/ per Codex review of ffb9e9b + 2bf5cb0)
============================================================================ */
/* the mobile-only category accordion button is hidden on desktop */
.mega__pane-toggle{display:none}
/* the mobile-only group heading link (desktop gets the same link via the
linked .mega__rail-label instead — see the max-width:900px block below) */
.mega__group-heading{display:none}
/* the mobile-drawer-only utility row (Find My Pack / Compare Products) —
desktop keeps these as the existing header icons instead (data-compare-badge/
data-all-sections-icon); shown via display:flex inside the max-width:900px
block below */
.primary-nav__utility{display:none}
/* ============================================================================
MOBILE (<=900px) — REBUILT per Codex review of b69dee8.
On rollout this REPLACES the mobile nav block in src/assets/css/site.css
(not an append). Nested accordion; the drawer owns its own scroll.
============================================================================ */
@media (max-width:900px){
.nav-toggle{display:flex;margin-left:auto}
.site-header{z-index:302} /* header > drawer(301) > scrim(300) */
/* A02/A03: at narrow widths the header row only needs the Logo and the
Menu toggle — Search, My Enquiry, Compare and Find My Pack all move
into the drawer itself (see .primary-nav__utility below) instead of
competing with the logo for space in the same row. */
.site-header__inner{gap:var(--space-3)}
.site-header__actions{display:none}
/* fixed utility row at the top of the drawer, above the scrolling list —
same treatment as .primary-nav__close (flex:0 0 auto, never scrolls). */
.primary-nav__utility{
flex:0 0 auto;display:flex;flex-direction:column;gap:var(--space-2);
padding:0 var(--space-5) var(--space-4);
}
.primary-nav__utility-link{
display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
padding:var(--space-3) var(--space-5);border-radius:999px;font-family:var(--font-head);font-weight:500;
font-size:var(--fs-micro);text-decoration:none;border:1.5px solid var(--green-900);color:var(--green-900);
}
.primary-nav__utility-link--cta{background:var(--lime-500);border-color:var(--lime-500);color:var(--green-900)}
.primary-nav__utility-count{
background:var(--green-900);color:#fff;border-radius:999px;min-width:20px;height:20px;
padding:0 var(--space-2);font-size:var(--fs-micro);line-height:20px;text-align:center;font-weight:700;
}
}
@media (max-width:340px){
.site-header__logo img{width:120px}
}
@media (max-width:900px){
/* the drawer: fixed to the viewport, below the real header height.
A non-scrolling close bar sits above a scrolling link list. */
.primary-nav{
display:none;
position:fixed;left:0;right:0;
top:var(--drawer-top,60px);
height:calc(100dvh - var(--drawer-top,60px));
max-height:calc(100dvh - var(--drawer-top,60px));
background:#fff;border-top:1px solid var(--line);z-index:301;
}
.primary-nav.is-open{display:flex;flex-direction:column}
/* close control: fixed row at the top of the drawer, never scrolls away */
.primary-nav__close{
flex:0 0 auto;align-self:flex-end;
display:flex;align-items:center;justify-content:center;
width:44px;height:44px;margin:var(--space-2) var(--space-3);
background:var(--green-900);border:0;border-radius:999px;color:#fff;cursor:pointer;
}
.primary-nav__close:hover{background:var(--green-800)}
.primary-nav__close:focus-visible{outline:2px solid var(--lime-500);outline-offset:2px}
.primary-nav__list{
flex:1 1 auto;min-height:0;flex-direction:column;gap:0;padding:0 0 var(--space-8);margin:0;
overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
touch-action:pan-y; /* allow finger panning inside the drawer list */
}
.primary-nav__item{display:block;border-top:1px solid var(--line)}
.primary-nav__item:first-child{border-top:0}
.primary-nav__list>li>.primary-nav__link{
display:flex;width:100%;justify-content:space-between;align-items:center;gap:var(--space-3);
padding:var(--space-4) var(--space-5);border-radius:0;font-size:var(--fs-caption);
}
.primary-nav__item .caret{transition:transform .15s ease}
.primary-nav__item.is-open>.primary-nav__link .caret{transform:rotate(-135deg)}
/* level-2 panel (mega / submenu) — collapsed unless the top-level row is open */
.primary-nav__item .mega,
.primary-nav__item .submenu{
display:none;position:static;transform:none;box-shadow:none;border:0;border-radius:0;
padding:0;background:var(--bg-soft);
}
.primary-nav__item.is-open>.mega,
.primary-nav__item.is-open>.submenu{display:block}
.submenu__list a{padding:var(--space-3) var(--space-5) var(--space-3) var(--space-7);border-radius:0}
.mega__panel{max-width:none;border:0;border-radius:0;box-shadow:none;padding:0}
.mega__head{display:flex;padding:var(--space-3) var(--space-5);margin:0;border:0}
.mega__eyebrow{display:none}
.mega__viewall{font-size:var(--fs-micro)}
.mega__body{display:block}
.mega__rail{display:none} /* the desktop tablist is not used on mobile */
.mega__content{display:block}
/* each category = an accordion row. data-mega-pane keeps role=tabpanel in the
static HTML; mega.js drops that role at this width and drives the
.mega__pane-toggle / #megadest-* disclosure instead. */
.mega__pane{display:block;padding:0;border-top:1px solid var(--line)}
.mega__pane[hidden]{display:none} /* respect hidden — no !important, no override */
.mega__pane-title,.mega__pane-desc{display:none} /* the toggle button carries the label */
/* Group heading ("Films" / "Thermoforming") shown only on mobile, where the
desktop rail (which carries the same link) is hidden. A real
, not a
.mega__pane-toggle button: filled/muted background and no caret keep it
visually distinct from the accordion rows below it, so "go to this page"
never reads as "expand this section". */
.mega__group-heading{
display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
padding:var(--space-3) var(--space-5) var(--space-3) var(--space-7);background:var(--bg-soft);
}
.mega__pane:first-child .mega__group-heading{border-top:0}
.mega__group-heading-label{
font-family:var(--font-head);font-weight:700;font-size:var(--fs-micro);letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);
}
.mega__group-heading-link{
display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--fs-micro);font-weight:600;
color:var(--green-900);text-decoration:none;
}
.mega__group-heading-link:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
.mega__pane-toggle{
display:flex;width:100%;justify-content:space-between;align-items:center;gap:var(--space-3);
background:none;border:0;cursor:pointer;text-align:left;
padding:var(--space-4) var(--space-5) var(--space-4) var(--space-7);
font-family:var(--font-head);font-weight:500;font-size:var(--fs-caption);color:var(--ink);
}
.mega__pane-toggle:focus-visible{outline:2px solid var(--green-700);outline-offset:-2px}
.mega__pane-toggle .caret{transition:transform .15s ease}
.mega__pane-toggle[aria-expanded="true"] .caret{transform:rotate(-135deg)}
.mega__dest{grid-template-columns:1fr;gap:0;padding:2px 0 var(--space-2)}
.mega__dest[hidden]{display:none}
.mega__dest-item{border:0;border-radius:0;padding:var(--space-3) var(--space-5) var(--space-3) var(--space-9);background:#fff}
.mega__dest-item:hover{background:var(--bg-soft)}
.mega__pane-foot{padding:var(--space-3) var(--space-5) var(--space-4) var(--space-7);margin:0;border-top:1px solid var(--line)}
.mega__pane-toggle[aria-expanded="false"] ~ .mega__pane-foot{display:none}
.site-header.is-compact .site-header__inner{min-height:0}
}
/* ---------- NO-JS mobile: stacked, coherent header, headings before links ---- */
@media (max-width:900px){
html.no-js .site-header__inner{flex-wrap:wrap}
html.no-js .nav-toggle{display:none}
html.no-js .primary-nav{
display:block;position:static;height:auto;max-height:none;overflow:visible;
flex-basis:100%;order:3;padding:0;z-index:auto;border-top:1px solid var(--line);
}
html.no-js .primary-nav__close{display:none}
html.no-js .primary-nav__item .mega,
html.no-js .primary-nav__item .submenu{display:block}
html.no-js .mega__rail{display:none}
html.no-js .mega__pane-toggle{display:none}
html.no-js .mega__pane[hidden]{display:block} /* show every category (page is static) */
html.no-js .mega__pane-title{display:block;padding:var(--space-3) var(--space-5) var(--space-1) var(--space-7);font-size:var(--fs-caption)}
html.no-js .mega__dest,html.no-js .mega__dest[hidden]{display:block}
html.no-js .mega__pane-foot,
html.no-js .mega__pane-toggle[aria-expanded="false"] ~ .mega__pane-foot{display:block}
}
/* ============================================================================
BEHAVIOUR SUPPORT (desktop scope) — no visual redesign.
============================================================================ */
/* No-JS desktop: hover / focus-within reveals the panel; show all categories */
html.no-js .primary-nav__item--mega:hover > .mega,
html.no-js .primary-nav__item--mega:focus-within > .mega{display:block}
html.no-js .primary-nav__item--dropdown:hover .submenu,
html.no-js .primary-nav__item--dropdown:focus-within .submenu{display:block}
@media (min-width:901px){
html.no-js .mega__rail{display:none}
html.no-js .mega__body{grid-template-columns:1fr}
html.no-js .mega__pane[hidden]{display:block!important}
html.no-js .mega__pane-toggle{display:none}
html.no-js .mega__pane + .mega__pane{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--line)}
}
/* Mobile drawer scrim + scroll-lock (shadcn Sheet).
Only `overflow:hidden` here — `touch-action:none` on would also block
finger panning inside the drawer list, so the list opts back in with pan-y. */
.nav-scrim{position:fixed;inset:0;background:rgba(12,36,27,.4);z-index:300;border:0;cursor:default;touch-action:none}
body.nav-locked{overflow:hidden}
@media (min-width:901px){ .nav-scrim{display:none} }
/* the drawer close control is mobile-only (shown by the <=900px block) */
@media (min-width:901px){ .primary-nav__close{display:none} }
/* Quiet sticky-header compression (21st resizable-navbar, P2 — desktop only) */
.site-header__inner{transition:min-height .2s ease}
.site-header__logo img{transition:width .2s ease}
.site-header{transition:box-shadow .2s ease}
@media (min-width:901px){
.site-header.is-compact .site-header__inner{min-height:60px}
.site-header.is-compact .site-header__logo img{width:clamp(130px,42vw,164px)}
.site-header.is-compact{box-shadow:0 6px 20px rgba(21,61,46,.06)}
}
/* Corrective pass: the header shell's own position/background already eased
via the transitions above and the .page--home top/left/right/background
rule, but everything INSIDE it (logo margin, nav-list padding, nav-link
font-size/padding, search-button padding) only ever had two hard-coded
values (home-glass vs default) with no transition of their own — those
snapped to the new value in the same instant the .is-compact class
toggled, while the shell around them was still mid-ease. That mismatch
(shell easing, contents snapping) was the reported "menu group jumps ~90px
while shrinking ~102px" / "pill re-forming" discontinuity. Same .2s ease
timing as the shell so every dependent dimension interpolates together
instead of some parts drifting and others cutting instantly. */
.site-header__logo{transition:margin .2s ease}
.primary-nav__list{transition:padding .2s ease}
.primary-nav__link{transition:font-size .2s ease,padding .2s ease}
.site-header__actions{transition:padding .2s ease}
.site-header__icon:not([hidden]){transition:background .2s ease,color .2s ease,width .2s ease,padding .2s ease}
@media (prefers-reduced-motion:reduce){
.site-header,.site-header__inner,.site-header__logo,.site-header__logo img,.caret,
.primary-nav__list,.primary-nav__link,.site-header__actions,.site-header__icon,
.page--home .site-header,.site-header__icon:not([hidden]),
.page--home .site-header .site-header__inner,
.page--home .site-header .site-header__nav-glass{transition:none}
}
/* ==========================================================================
Global-reach section (homepage) — integrated from prototype/globe/ (P07,
Codex-approved 5ae592d). COBE globe vendored at /assets/js/vendor/;
renderer script /assets/js/globe.js (ES module, lazy). Globe-only design
tokens are scoped to .globe-section so they never leak into the site scale.
========================================================================== */
.globe-section{
--lime:#b4e717; --muted-dark:#c4d5ce;
--frame-radius:34px; --canvas-radius:28px;
--g-ink:#17372f; --g-muted:#687871; --g-line:#dce4df;
position:relative;isolation:isolate;overflow-x:clip;
padding:clamp(36px,6vw,80px) clamp(14px,4vw,40px) clamp(48px,7vw,88px);
color:#fff;
}
.globe-frame{
max-width:1500px;margin-inline:auto;
background:#fff;border:1px solid var(--g-line);border-radius:var(--frame-radius);
padding:clamp(10px,1.4vw,18px);
box-shadow:0 24px 70px rgba(16,46,38,.09);
}
.globe-canvas-grid{
position:relative;border-radius:var(--canvas-radius);overflow:hidden;
display:grid;grid-template-columns:minmax(0,60%) minmax(0,40%);
grid-template-areas:"globe copy" "globe controls";
background:radial-gradient(circle at 27% 46%,#1c5a46,#0a2c23 42%,#04140f 82%);
}
.globe-col::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(circle at 50% 48%,transparent 58%,rgba(2,12,9,.36) 100%);
}
.globe-canvas-grid::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
background-image:radial-gradient(#d9eee4 .7px,transparent .7px);
background-size:35px 35px;
-webkit-mask-image:linear-gradient(90deg,#000,transparent 75%);
mask-image:linear-gradient(90deg,#000,transparent 75%);
}
.globe-col{grid-area:globe;position:relative;min-height:clamp(520px,52vw,720px);overflow:hidden}
.globe-stage{position:absolute;inset:clamp(18px,3.4vw,52px) clamp(10px,2vw,30px);overflow:hidden}
.globe-stage::before{
content:"";position:absolute;left:50%;top:50%;height:82%;aspect-ratio:1;width:auto;
transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
background:radial-gradient(circle at 34% 28%,#3f7460,#173f30 40%,#0a2820 66%,#04140f 86%);
box-shadow:inset -55px -38px 95px rgba(0,0,0,.7), 0 0 90px 8px rgba(75,139,105,.22);
}
.globe-stage::after{
content:"";position:absolute;left:50%;top:50%;height:92%;aspect-ratio:1;width:auto;
transform:translate(-50%,-50%);border-radius:50%;z-index:2;pointer-events:none;
background:radial-gradient(circle,transparent 60%,rgba(75,139,105,.12) 78%,transparent 92%);
}
.globe-canvas,.globe-arcs,.globe-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.globe-arcs{pointer-events:none}
.globe-fallback{z-index:1}
.globe-stage.is-live .globe-fallback{display:none}
.globe-stage.is-dragging{cursor:grabbing}
.globe-stage.is-live .globe-canvas,.globe-stage.is-live .globe-arcs{
animation:globe-in 1s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes globe-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.globe-madein{
position:absolute;left:6%;bottom:7%;z-index:3;
background:var(--lime);color:#173f35;border-radius:16px;padding:var(--space-3) var(--space-4);
box-shadow:0 16px 34px rgba(0,0,0,.22);
}
.globe-madein small{display:block;margin-bottom:var(--space-1);font:800 var(--fs-micro)/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.globe-madein b{font:700 var(--fs-body)/1 var(--font-head)}
.globe-tip{
position:absolute;transform:translate(-50%,calc(-100% - 6px));z-index:4;
background:#fff;color:var(--g-ink);border-radius:999px;padding:var(--space-2) var(--space-3);
font:800 var(--fs-micro)/1 var(--font-body);letter-spacing:.02em;white-space:nowrap;
pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.globe-tip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:var(--space-2);vertical-align:1px}
.globe-copy{grid-area:copy;position:relative;z-index:2;align-self:end;min-width:0;
padding:clamp(40px,5vw,72px) clamp(24px,3.4vw,52px) var(--space-2) clamp(10px,1.6vw,18px)}
.globe-controls{grid-area:controls;position:relative;z-index:2;align-self:start;min-width:0;
padding:var(--space-4) clamp(24px,3.4vw,52px) clamp(40px,5vw,72px) clamp(10px,1.6vw,18px)}
.globe-eyebrow{margin:0 0 var(--space-4);color:var(--lime);font:700 var(--fs-micro)/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase}
.globe-heading{margin:0 0 var(--space-5);color:#fff;max-width:20ch;text-wrap:balance;
font:500 var(--fs-h2)/1 var(--font-head);letter-spacing:-.03em}
.globe-sub{margin:0;color:var(--muted-dark);font-size:var(--fs-caption);line-height:1.5;max-width:34ch}
.globe-stats{display:grid;grid-template-columns:1fr 1fr;max-width:360px;margin:var(--space-6) 0 0;border-block:1px solid rgba(255,255,255,.17)}
.globe-stat{padding:var(--space-4) 0}
.globe-stat + .globe-stat{padding-left:var(--space-6);border-left:1px solid rgba(255,255,255,.17)}
.globe-stat__num{display:block;color:var(--lime);font:600 var(--fs-h3)/1 var(--font-head)}
.globe-stat__label{display:block;margin-top:var(--space-2);color:var(--muted-dark);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase}
.globe-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0}
.globe-chip{appearance:none;flex:0 0 auto;background:transparent;border:1px solid rgba(255,255,255,.2);
color:var(--muted-dark);border-radius:999px;padding:0 var(--space-4);min-height:44px;
font:600 var(--fs-micro)/1 var(--font-body);letter-spacing:.02em;cursor:pointer;
transition:background .16s ease,border-color .16s ease,color .16s ease}
.globe-chip:hover:not([disabled]){border-color:rgba(255,255,255,.42);color:#fff}
.globe-chip:focus-visible{outline:2px solid var(--lime);outline-offset:2px;color:#fff}
.globe-chip[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:#173f35;font-weight:800}
.globe-chip[disabled]{cursor:default;opacity:.55;border-style:dashed;border-color:rgba(255,255,255,.16)}
.globe-chip[disabled][aria-pressed="true"]{opacity:.8}
.globe-disclosure{margin:clamp(8px,1.4vw,14px) 0 0;background:#fff;border:1px solid var(--g-line);border-radius:18px}
.globe-disclosure > summary{list-style:none;cursor:pointer;padding:var(--space-4) var(--space-5);display:flex;align-items:center;gap:var(--space-3);
font:700 var(--fs-caption)/1.2 var(--font-head);color:var(--g-ink)}
.globe-disclosure > summary::-webkit-details-marker{display:none}
.globe-disclosure > summary:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:18px}
.globe-disclosure__caret{margin-left:auto;width:9px;height:9px;flex:0 0 auto;
border-right:2px solid var(--g-muted);border-bottom:2px solid var(--g-muted);
transform:rotate(45deg);transition:transform .18s ease}
.globe-disclosure[open] .globe-disclosure__caret{transform:rotate(225deg)}
.globe-disclosure__body{padding:0 var(--space-1) var(--space-2)}
.globe-disclosure__grouphd{margin:var(--space-4) var(--space-5) var(--space-1);font:700 var(--fs-micro)/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--g-muted)}
.globe-markets{list-style:none;margin:0;padding:var(--space-1) var(--space-5) var(--space-5);display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px var(--space-3)}
.globe-markets li{margin:0}
.globe-markets button{all:unset;box-sizing:border-box;display:block;width:100%;padding:var(--space-2) var(--space-2);border-radius:8px;cursor:pointer;
font:500 var(--fs-micro)/1.2 var(--font-body);color:#3a4a43}
.globe-markets button:hover:not([disabled]){background:#f2f5f0;color:#173f35}
.globe-markets button:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.globe-markets .is-india button{color:#4e7d0e;font-weight:700}
.globe-markets button[disabled]{cursor:default;color:var(--g-muted)}
.globe-markets .is-india button[disabled]{color:#6f8a4e}
.globe-fallback [hidden]{display:none}
.globe-section .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:950px){
.globe-canvas-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "globe" "controls"}
.globe-col{min-height:clamp(360px,78vw,460px)}
.globe-copy{align-self:auto;padding:clamp(28px,7vw,40px) clamp(20px,6vw,32px) var(--space-2)}
.globe-controls{align-self:auto;padding:var(--space-4) clamp(20px,6vw,32px) clamp(30px,8vw,44px)}
.globe-stage::before{height:auto;width:82%}
}
@media (max-width:600px){
.globe-frame{border-radius:24px;padding:var(--space-2)}
.globe-canvas-grid{border-radius:20px}
.globe-copy{padding:clamp(26px,7vw,36px) var(--space-5) var(--space-1)}
.globe-controls{padding:var(--space-4) var(--space-5) clamp(26px,7vw,40px)}
.globe-heading{font-size:var(--fs-h3);max-width:none}
.globe-stats{max-width:none}
.globe-stat + .globe-stat{padding-left:var(--space-4)}
.globe-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.globe-chips::-webkit-scrollbar{display:none}
.globe-madein{left:14px;bottom:15px;padding:var(--space-3) var(--space-4)}
.globe-disclosure > summary{padding:var(--space-4) var(--space-4)}
.globe-markets{grid-template-columns:1fr 1fr}
.globe-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
.globe-stage.is-live .globe-fallback{display:block}
.globe-canvas,.globe-arcs{display:none}
.globe-stage.is-live .globe-canvas,.globe-stage.is-live .globe-arcs{animation:none}
}
/* ============================================================================
PROTOTYPE 09 (rolled in) — shared motion tokens
----------------------------------------------------------------------------
One small motion system for the whole site, not per-section bespoke effects.
Degrades to instant/fully-visible with no JS and under prefers-reduced-motion.
Utilities are inert until an element opts in via data-motion / data-motion-count
(none do yet in production templates — safe, additive rollout; retrofitting
existing reveal/count effects onto these tokens is tracked as follow-up work).
============================================================================ */
:root{
--motion-fast:120ms;
--motion-normal:220ms;
--motion-deliberate:420ms;
--ease-standard:cubic-bezier(.2,0,0,1);
--ease-emphasized:cubic-bezier(.3,0,0,1);
--ease-exit:cubic-bezier(.4,0,1,1);
--motion-shift:8px;
--motion-shift-max:16px;
--motion-stagger:60ms;
--motion-stagger-cap:5;
--motion-count:900ms;
--motion-sticky:220ms;
}
[data-motion="reveal"]{
opacity:0;transform:translateY(var(--motion-shift));
transition:opacity var(--motion-deliberate) var(--ease-standard),
transform var(--motion-deliberate) var(--ease-standard);
will-change:opacity,transform;
}
[data-motion="reveal"].is-in{opacity:1;transform:none}
[data-motion="stagger"] > *{
opacity:0;transform:translateY(var(--motion-shift));
transition:opacity var(--motion-normal) var(--ease-standard),
transform var(--motion-normal) var(--ease-standard);
transition-delay:calc(min(var(--i,0), var(--motion-stagger-cap)) * var(--motion-stagger));
}
[data-motion="stagger"].is-in > *{opacity:1;transform:none}
.motion-interactive{transition:background var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard),
color var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard)}
.motion-panel{transition:opacity var(--motion-normal) var(--ease-standard),
transform var(--motion-normal) var(--ease-standard)}
[hidden] .motion-panel,.motion-panel[hidden]{opacity:0;transform:translateY(calc(var(--motion-shift) * -1))}
[data-motion-count]{font-variant-numeric:tabular-nums}
[data-motion="sticky-panel"]{transition:opacity var(--motion-sticky) var(--ease-standard),
transform var(--motion-sticky) var(--ease-standard)}
[data-motion="sticky-panel"]:not([data-active]){opacity:0;transform:translateY(var(--motion-shift));position:absolute;inset:0}
html.no-js [data-motion]{opacity:1!important;transform:none!important}
html.no-js [data-motion] > *{opacity:1!important;transform:none!important}
@media (scripting: none){
[data-motion],[data-motion] > *{opacity:1!important;transform:none!important}
}
@media (prefers-reduced-motion: reduce){
[data-motion],[data-motion] > *{opacity:1!important;transform:none!important}
}
/* ============================================================================
PROTOTYPE 05 (rolled in) — PET Sheets technical comparison canvas
One real semantic : sticky attribute column, grouped rowgroup
sections, one selectable grade column. Included only on
/product/films/pet-sheets/ (see partials/pet-sheets-comparison.html).
Tokens/reset/.pill/.hl/.wrap/.section reuse the site-wide :root above.
============================================================================ */
.cmp__head{max-width:56ch;margin-bottom:var(--space-6)}
.cmp__head .pill{color:var(--lime-700)}
.cmp__head h2{font-size:var(--fs-h2);letter-spacing:-.02em;color:var(--green-900)}
.cmp__head p{color:var(--muted);margin:.6em 0 0}
.cmp__canvas{
background:var(--bg);border:1px solid var(--line);border-radius:24px;
box-shadow:0 24px 60px rgba(21,61,46,.10);
overflow:hidden;
}
.cmp__scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.cmp__table{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;font-size:var(--fs-micro)}
/* S17: the High Barrier Films comparison has only 3 structures — small
enough to read as a plain 3-column table at phone width, unlike the
7-grade PET / 6-grade PVC tables which genuinely need the horizontal
scroll .cmp__table's default min-width forces. Drops that min-width (and
narrows the sticky label column) so it reflows instead of scrolling. */
.cmp__table--compact{min-width:0;table-layout:fixed}
.cmp__table--compact col{width:25%}
.cmp__table--compact th[scope=row],.cmp__table--compact .cmp__rowlab{min-width:0}
.cmp__table--compact th,.cmp__table--compact td{overflow-wrap:anywhere}
.cmp__table--compact .cmp__pick b{overflow-wrap:anywhere;white-space:normal}
.cmp__table caption{text-align:left;padding:var(--space-4) var(--space-5);color:var(--muted);font-size:var(--fs-micro);
border-bottom:1px solid var(--line)}
.cmp__table th,.cmp__table td{padding:var(--space-4) var(--space-5);text-align:left;vertical-align:top;
border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
/* S17: grade names in the header (APET, ESD / Anti-Static, Laminated
Films...) were wrapping onto multiple lines with no min-width to size
against and no white-space rule stopping the wrap — unprofessional on a
table whose whole point is a clean row of column headers. Each grade
header gets a real minimum width (never true on the --compact variant,
which intentionally reflows instead of scrolling — see its own rules
above) and its name never wraps. */
.cmp__table:not(.cmp__table--compact) thead th{min-width:150px}
.cmp__pick b,.cmp__pick small{white-space:nowrap}
.cmp__table tbody tr:nth-child(even) td{background:var(--bg-soft)}
.cmp__table tbody tr:nth-child(even):hover td{background:rgba(21,61,46,.05)}
.cmp__table th[scope=row],
.cmp__table .cmp__rowlab{
position:sticky;left:0;z-index:2;background:var(--bg-soft);
font-family:var(--font-head);font-weight:600;color:var(--green-900);
min-width:190px;box-shadow:1px 0 0 var(--line)}
.cmp__table thead th{position:sticky;top:0;z-index:3;background:var(--green-900);
color:#fff;font-family:var(--font-head);font-weight:600;border-bottom:0;vertical-align:bottom}
.cmp__table thead th:first-child{z-index:4;background:var(--green-900);box-shadow:1px 0 0 rgba(255,255,255,.12)}
.cmp__pick{display:flex;flex-direction:column;gap:2px;width:100%;
background:none;border:0;color:inherit;cursor:pointer;text-align:left;font:inherit;padding:var(--space-1) 0}
.cmp__pick b{font-size:var(--fs-caption)}
.cmp__pick small{color:var(--lime-300,#c6ee45);font-weight:500;font-size:var(--fs-micro);letter-spacing:.02em}
.cmp__pick:focus-visible{outline:2px solid var(--lime-300,#c6ee45);outline-offset:3px;border-radius:4px}
.cmp__pick[aria-pressed=true] small::after{content:" · selected"}
.cmp__pick:disabled{cursor:default;color:#fff;opacity:1}
.cmp__pick:disabled small{display:none}
.cmp__gradelink{display:inline-flex;align-items:center;gap:var(--space-1);margin-top:var(--space-2);
font-family:var(--font-body);font-weight:600;font-size:var(--fs-micro);color:var(--lime-300,#c6ee45);
text-decoration:none;border-bottom:1px solid transparent}
.cmp__gradelink:hover{border-bottom-color:var(--lime-300,#c6ee45)}
.cmp__gradelink:focus-visible{outline:2px solid var(--lime-300,#c6ee45);outline-offset:3px;border-radius:3px}
.cmp__group th{background:#fff;color:var(--muted);font-family:var(--font-head);
font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-micro);
padding-top:var(--space-5);border-bottom:1px solid var(--line)}
.cmp__table tbody tr:hover td{background:rgba(21,61,46,.03)}
.cmp__ask{color:var(--muted);font-style:italic}
.cmp__table col.is-selected{background:var(--sel,#eef6dd)}
.cmp__table thead th.is-selected{background:var(--green-700)}
.cmp__table td.is-dim{opacity:.5}
.cmp__hintbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.cmp__hint{display:none;margin:0;color:var(--muted);font-size:var(--fs-micro)}
.cmp__hint span{color:var(--lime-700);font-weight:700}
/* S17: scroll-by-click arrows beside the (mobile-only) swipe hint — a
visitor on a non-touch desktop has no swipe gesture to rely on for a
table wider than its container, only the (easy to miss) native
scrollbar. Always visible, not just at the mobile breakpoint. */
.cmp__scroll-btns{display:flex;gap:var(--space-2);flex:none}
.cmp__scroll-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
background:#fff;color:var(--green-900);font-size:var(--fs-h6);line-height:1;cursor:pointer;
display:grid;place-items:center;transition:background .2s ease,color .2s ease}
.cmp__scroll-btn:hover{background:var(--green-900);color:#fff}
@media (max-width:820px){
.cmp__hint--top{display:block}
.cmp__table{font-size:var(--fs-micro);min-width:600px}
.cmp__table th,.cmp__table td{padding:var(--space-3) var(--space-4)}
.cmp__table th[scope=row],.cmp__table .cmp__rowlab{min-width:150px}
.cmp__table--compact{min-width:0}
.cmp__table--compact th[scope=row],.cmp__table--compact .cmp__rowlab{min-width:90px}
}
@media (prefers-reduced-motion:reduce){
.cmp__table col.is-selected,.cmp__table td,.cmp__table th{transition:none}
}
html.no-js .cmp__pick{cursor:default}
html.no-js .cmp__pick small{display:none}
/* ============================================================================
PROTOTYPE 06 (rolled in) — evidence / document library
Grouped certificate/verification rows in one canvas. Included only on
Sustainability > Programmes & Certifications (partials/evidence-library.html).
Tokens/reset/.pill/.hl/.wrap/.section reuse the site-wide :root above.
============================================================================ */
.ev__head{max-width:58ch;margin-bottom:var(--space-6)}
.ev__head .pill{color:var(--lime-700)}
.ev__head h2{font-size:var(--fs-h2);letter-spacing:-.02em;color:var(--green-900)}
.ev__head p{color:var(--muted);margin:.6em 0 0}
.ev.section{padding-top:0}
.ev__canvas{background:var(--bg);border:1px solid var(--line);border-radius:24px;
box-shadow:0 24px 60px rgba(21,61,46,.10);padding:clamp(14px,2vw,22px)}
.ev__cta{margin-top:var(--space-5);background:var(--green-900);border-radius:16px;
padding:clamp(20px,3vw,28px);display:flex;flex-wrap:wrap;gap:var(--space-5);
align-items:center;justify-content:space-between}
.ev__cta-eyebrow{color:var(--lime-500);font-family:var(--font-head);font-weight:700;
font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--space-2)}
.ev__cta-body{color:var(--on-dark,#eaf1ec);margin:0;max-width:52ch;font-size:var(--fs-micro)}
.ev__cta .btn{flex:0 0 auto}
.ev__notice{display:flex;gap:var(--space-3);align-items:flex-start;
background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
padding:var(--space-4) var(--space-4);font-size:var(--fs-micro);color:var(--muted);margin-bottom:var(--space-4)}
.ev__notice b{color:var(--green-900);font-family:var(--font-head);font-weight:600}
.ev__group{margin-top:var(--space-5)}
.ev__group:first-of-type{margin-top:0}
.ev__group h3{font-family:var(--font-head);font-weight:700;letter-spacing:.1em;
text-transform:uppercase;font-size:var(--fs-micro);color:var(--muted);margin:0 0 var(--space-2) 2px}
.ev__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.ev__row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center;
border:1px solid var(--line);border-radius:12px;padding:var(--space-4) var(--space-4);background:var(--bg)}
.ev__row:hover{border-color:#d7ded9;background:#fcfdfb}
.ev__type{flex:0 0 auto;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
background:#eef4e4;color:var(--green-800);font-family:var(--font-head);font-weight:700;
font-size:var(--fs-micro);letter-spacing:.04em;text-align:center;line-height:1.1}
/* S14: a genuine issuer/scheme logo where one is available — same slot and
size as the plain-text abbreviation badge, never replacing the
certificate/scope/date text next to it. */
.ev__type--logo{background:#fff;border:1px solid var(--line);padding:var(--space-2)}
.ev__type--logo img{width:100%;height:100%;object-fit:contain}
.ev__body{min-width:0}
.ev__name{font-family:var(--font-head);font-weight:600;color:var(--green-900);font-size:var(--fs-caption)}
.ev__meta{color:var(--muted);font-size:var(--fs-micro);margin-top:2px}
.ev__meta .sep{opacity:.5;margin:0 var(--space-2)}
.ev__action{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)}
.ev__dl{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;
font-family:var(--font-head);font-weight:600;font-size:var(--fs-micro);
border:1px solid var(--green-900);color:var(--green-900);background:var(--bg);
border-radius:999px;padding:var(--space-2) var(--space-4);text-decoration:none;cursor:pointer}
.ev__dl:hover{background:var(--green-900);color:#fff}
.ev__dl:focus-visible{outline:2px solid var(--lime-700);outline-offset:3px}
.ev__dl .ic{width:14px;height:14px;flex:0 0 auto}
.ev__size{color:var(--muted);font-size:var(--fs-micro)}
.ev__pending{color:var(--muted);font-size:var(--fs-micro);font-style:italic;white-space:nowrap}
.ev__filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.ev__filterbtn{font-family:var(--font-head);font-weight:600;font-size:var(--fs-micro);
border:1px solid var(--line);background:var(--bg);color:var(--muted);
border-radius:999px;padding:var(--space-2) var(--space-4);cursor:pointer}
.ev__filterbtn:hover{border-color:var(--green-700);color:var(--green-900)}
.ev__filterbtn.is-active{background:var(--green-900);border-color:var(--green-900);color:#fff}
.ev__filterbtn:focus-visible{outline:2px solid var(--lime-700);outline-offset:2px}
@media (max-width:720px){
.ev__row{grid-template-columns:auto 1fr}
.ev__action{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;
margin-top:2px;padding-left:58px}
.ev__dl{padding:var(--space-2) var(--space-4)}
}
/* ============================================================================
PROTOTYPE 08 (rolled in) — contextual enquiry form
One dark-green Finovate canvas, two progressive-disclosure stages, request-
type selector, business-type + page-context product recommendations.
mode=compact (pre-footer) / mode=full (Contact Us, quote/sample/spec/
compliance/consultation/custom-pack pages) — see partials/enquiry-form.html.
Tokens/reset/.wrap/.visually-hidden/[hidden]/.btn* reuse the site-wide rules
above; .pill and .field-error get an .enq-scoped override below since the
form sits on a dark canvas (the global versions are light-background).
============================================================================ */
.enq .pill{border-color:rgba(255,255,255,.25);color:var(--on-dark,#eaf1ec);background:transparent}
.enq .field-error{grid-column:1 / -1;color:#ffb4a8;font-weight:600;font-size:var(--fs-micro);margin:-2px 0 0}
.enq{background:var(--green-900);color:var(--on-dark);border-radius:28px;
padding:clamp(20px,3.4vw,40px);box-shadow:0 30px 70px rgba(21,61,46,.18);
scroll-margin-top:100px;min-width:0}
.enq__head h2{color:#fff;font-size:var(--fs-h4);letter-spacing:-.01em}
.enq__head h2:focus-visible{outline:2px solid var(--lime-500);outline-offset:6px;border-radius:4px}
/* :not(.pill) matters: the pill is also a direct-child of .enq__head,
and this selector's own specificity (class+tag) beat .pill's (class
alone), so the pill was inheriting this rule's font-size/margin instead
of its own compact sizing -- rendered as a huge, oddly-spaced pill that
didn't match any other pill on the site. */
.enq__head > p:not(.pill){color:var(--on-dark);margin:.5em 0 0;max-width:56ch;font-size:var(--fs-caption)}
/* contextual line — "You're enquiring about: rPET Sheet" — a small status
pill, not a full-width callout box; was sized closer to the latter.
:not([hidden]) matters: without it this class's own display:inline-flex
has the same specificity as the UA stylesheet's [hidden]{display:none}
and (being an author rule) wins, so the element still rendered as an
empty pill even while hidden, whenever no context had been set. */
.enq__ctx:not([hidden]){display:inline-flex;margin:var(--space-3) 0 2px;padding:var(--space-2) var(--space-4);border-radius:999px;
background:rgba(166,215,32,.16);border:1px solid rgba(166,215,32,.5);
font-size:var(--fs-micro);color:#fff}
.enq__ctx b{font-family:var(--font-head);font-weight:600;color:var(--lime-300)}
/* ---------- request-type selector (semantic radio group as buttons) ---------- */
.enq__form{margin-top:var(--space-5);border:0;padding:0;min-width:0}
.enq-seg{border:0;padding:0;margin:var(--space-4) 0 0;min-width:0}
.enq-seg > legend{font-size:var(--fs-micro);font-weight:700;color:#fff;padding:0;margin-bottom:var(--space-2)}
/* Cohesive-homepage brief REFINE: "full-width outlined radio choices in a
tidy grid, not scattered text pills" — was flex-wrap chips sized to their
own text, is now a real 2-column grid (1 column on mobile) of full-width
options, each large enough to read as a deliberate choice, not a tag. */
.enq-seg__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.enq-seg__opt{position:relative;min-width:0}
.enq-seg__opt input{position:absolute;opacity:0;width:1px;height:1px}
.enq-seg__opt span{display:flex;align-items:center;min-height:52px;cursor:pointer;
border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:var(--space-3) var(--space-4);
font-size:var(--fs-h6);font-weight:600;color:var(--on-dark);
transition:background .15s,border-color .15s,color .15s}
.enq-seg__opt span:hover{border-color:rgba(255,255,255,.55);color:#fff}
.enq-seg__opt input:checked + span{background:var(--lime-500);border-color:var(--lime-500);color:var(--green-900)}
.enq-seg__opt input:focus-visible + span{outline:2px solid var(--lime-300);outline-offset:2px}
@media(max-width:520px){
.enq-seg__grid{grid-template-columns:1fr}
}
/* ---------- progress ---------- */
/* .enq__progress is now .visually-hidden in the template (see
enquiry-form.html) — kept in the DOM only because enquiry.js still
writes to it defensively; the graphical stepper below is the one and
only visible step indicator. No rules needed here any more beyond
letting .visually-hidden do its job. */
/* ---------- stepper (6-step full-mode journey) ----------
Numbered circles + a connecting line, current step labelled. Reuses the
same dark-canvas/lime-accent language as .enq-seg__opt/.enq-pill so it
reads as part of this form, not a bolted-on widget.
Only the CURRENT step ever shows its text label — this form gets
embedded at very different widths (a ~450-650px column next to a photo
on Contact Us, vs. a full-width panel on the homepage), and a fixed
viewport-width breakpoint for "show every label" doesn't know which
context it's in. Six full labels ("About you", "Sourcing"...) crammed
into a narrow column left each step's leftover connector-line segment a
different, inconsistent length — the stray floating dash the owner
flagged. One label + evenly-sized numbered dots stays clean at any
embedding width, and the step's own heading (which gets focus on every
transition) already states its name in full a moment later anyway. */
.enq-stepper[hidden]{display:none}
/* Cohesive-homepage brief HIGH priority: all six step labels visible at
once (Request, About you, Contact, Sourcing, Details, Review) — was only
the CURRENT step's label shown (display:none on every other .is-current),
so a visitor on step 1 saw "Request" plus five bare numbers and had no
way to tell what step2-6 actually were until they got there. */
.enq-stepper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-1);list-style:none;margin:var(--space-5) 0 0;padding:0}
.enq-stepper li{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);min-width:0;position:relative}
.enq-stepper__num{flex:none;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;
font-size:var(--fs-micro);font-weight:700;background:rgba(255,255,255,.1);color:var(--on-dark);
border:1px solid rgba(255,255,255,.25);
transition:background .2s ease,color .2s ease,border-color .2s ease}
.enq-stepper__label{display:block;margin:0;font-size:var(--fs-micro);font-weight:600;line-height:1.25;
color:var(--on-dark);white-space:normal;text-align:center}
.enq-stepper li.is-current .enq-stepper__num{background:var(--lime-500);color:var(--green-900);
border-color:var(--lime-500);box-shadow:0 0 0 3px rgba(166,215,32,.25)}
.enq-stepper li.is-current .enq-stepper__label{color:#fff}
.enq-stepper li.is-done .enq-stepper__num{background:rgba(166,215,32,.35);color:#fff;border-color:transparent}
@media(max-width:480px){
.enq-stepper__label{font-size:var(--fs-micro)}
}
/* ---------- stages ---------- */
.enq__stage{border:0;padding:0;margin:var(--space-4) 0 0;min-width:0}
.enq__stage-lg{font-family:var(--font-head);font-weight:600;font-size:var(--fs-h6);color:#fff;
padding:0;margin:0 0 var(--space-3)}
.enq__stage-lg:focus-visible{outline:2px solid var(--lime-300);outline-offset:3px;border-radius:6px}
/* ---------- the field grid ---------- */
.enq__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4) var(--space-4)}
.enq__grid>*{min-width:0}
.enq__f{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--fs-micro);font-weight:600;color:#fff;
border:0;padding:0;margin:0;min-width:0}
.enq__f.full{grid-column:1 / -1}
/* S04: same defect class as A08/S02 — the class's own explicit display
beats the browser's built-in [hidden]{display:none}, so business
description/best-time/timezone stayed fully rendered (with real
layout height) even though enquiry.js correctly set el.hidden. */
.enq__f[hidden]{display:none}
.enq__cap{display:block;line-height:1.35}
.enq__f .req{color:var(--lime-300)}
.enq__opttag{color:var(--lime-300);font-weight:500}
.enq__f > input,.enq__f > select,.enq__f > textarea,
.enq__phone input,.enq__tz > input,.enq__qty-row > *{
font:inherit;font-size:var(--fs-caption);font-weight:400;color:var(--ink);background:#fff;
border:1px solid transparent;border-radius:10px;padding:var(--space-3) var(--space-3);width:100%}
.enq__f > textarea{resize:vertical;min-height:96px}
.enq__f input::placeholder,.enq__f textarea::placeholder{color:#9aa8a1}
.enq__f > input:focus-visible,.enq__f > select:focus-visible,.enq__f > textarea:focus-visible,
.enq__phone input:focus-visible,.enq__qty-row > *:focus-visible,.enq__tz input:focus-visible{
outline:2px solid var(--lime-300);outline-offset:2px}
.enq__f [aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px rgba(255,180,168,.25)}
select.enq__f,.enq__f > select{appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6b63' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center;padding-right:var(--space-7)}
/* phone: prefix + number */
.enq__phone{display:grid;grid-template-columns:84px 1fr;gap:var(--space-2)}
.enq__phone .enq__phone-prefix{text-align:center}
/* timezone row */
.enq__tz{display:flex;flex-direction:column;gap:var(--space-2)}
/* radio rows (contact method / best time) */
.enq__radiorow{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:flex-start}
.enq__radiorow[hidden]{display:none}
.enq__radiorow > legend{flex:1 0 100%;font-size:var(--fs-micro);font-weight:600;color:#fff;padding:0;margin:0 0 var(--space-1);float:none}
.enq-pill{position:relative;font-weight:500}
.enq-pill input{position:absolute;opacity:0;width:1px;height:1px}
.enq-pill span{display:block;cursor:pointer;border:1px solid rgba(255,255,255,.22);
border-radius:999px;padding:var(--space-2) var(--space-3);font-size:var(--fs-micro);color:var(--on-dark);
transition:background .15s,border-color .15s,color .15s}
.enq-pill span:hover{border-color:rgba(255,255,255,.5);color:#fff}
.enq-pill input:checked + span{background:rgba(166,215,32,.16);border-color:var(--lime-300);color:#fff}
.enq-pill input:focus-visible + span{outline:2px solid var(--lime-300);outline-offset:2px}
.enq-check{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-micro);font-weight:500;color:var(--on-dark)}
.enq-check input{width:16px;height:16px;flex:0 0 auto}
/* follow-up question injected under business type */
.enq__followup:empty{display:none}
.enq__followup[hidden]{display:none}
.enq__followup{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--fs-micro);font-weight:600;color:#fff}
.enq__followup select{font:inherit;font-size:var(--fs-caption);font-weight:400;color:var(--ink);
background:#fff;border:1px solid transparent;border-radius:10px;padding:var(--space-3) var(--space-7) var(--space-3) var(--space-3);width:100%;
appearance:none;background-repeat:no-repeat;background-position:right 13px center;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6b63' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.enq__followup select:focus-visible{outline:2px solid var(--lime-300);outline-offset:2px}
/* quantity: value + unit + frequency */
.enq__qty{gap:var(--space-2)}
.enq__qty > legend{font-size:var(--fs-micro);font-weight:600;color:#fff;padding:0;margin-bottom:var(--space-1)}
.enq__qty-row{display:grid;grid-template-columns:1fr 1.1fr 1.3fr;gap:var(--space-2)}
.enq__qty-row select{appearance:none;background-repeat:no-repeat;background-position:right 11px center;padding-right:var(--space-7);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6b63' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
/* additional products */
.enq__extra-products{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.enq__extra-products:empty{display:none}
.enq__xrow{display:grid;grid-template-columns:1fr auto;gap:var(--space-2);align-items:center}
.enq__xrow select{font:inherit;font-size:var(--fs-micro);color:var(--ink);background:#fff;border:1px solid transparent;
border-radius:10px;padding:var(--space-3) var(--space-3);width:100%}
.enq__addrow{grid-column:1 / -1;margin:0}
.enq__linkbtn{background:none;border:0;color:var(--lime-300);font:inherit;font-weight:600;
font-size:var(--fs-micro);cursor:pointer;padding:var(--space-2) 2px}
.enq__linkbtn:hover{text-decoration:underline}
.enq__linkbtn:focus-visible{outline:2px solid var(--lime-300);outline-offset:2px;border-radius:6px}
/* inline field errors + summary */
.field-error{grid-column:1 / -1;color:var(--err);font-weight:600;font-size:var(--fs-micro);margin:-2px 0 0}
.enq__errsum{grid-column:1 / -1;margin:var(--space-4) 0 0;border-radius:12px;padding:var(--space-3) var(--space-4);
background:rgba(255,180,168,.12);border:1px solid rgba(255,180,168,.4);color:#ffd9d2;font-size:var(--fs-micro)}
.enq__errsum h3{margin:0 0 var(--space-2);font-size:var(--fs-micro);color:#fff;font-family:var(--font-head)}
.enq__errsum ul{margin:0;padding-left:var(--space-5)}
.enq__errsum a{color:#fff;text-decoration:underline}
/* honeypot */
.enq__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---------- drop-zone (Uiverse anatomy, AVI tokens) ---------- */
.enq__drop{grid-column:1 / -1;margin-top:2px}
.enq__droplab{display:block;font-size:var(--fs-micro);font-weight:600;color:#fff;margin-bottom:var(--space-2)}
.enq__dz{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center;
cursor:pointer;background:rgba(255,255,255,.04);border:1.5px dashed rgba(198,238,69,.5);
border-radius:14px;padding:var(--space-6) var(--space-5);color:var(--on-dark);font:inherit}
.enq__dz:hover{background:rgba(255,255,255,.07);border-color:rgba(198,238,69,.8)}
.enq__dz:disabled{cursor:default}
.enq__dz:focus-visible{outline:2px solid var(--lime-300);outline-offset:3px}
.enq__dz.is-drag{background:rgba(166,215,32,.14);border-color:var(--lime-300);border-style:solid}
.enq__dz b{font-family:var(--font-head);font-weight:600;color:#fff;font-size:var(--fs-caption)}
.enq__dz small{color:var(--on-dark);font-size:var(--fs-micro)}
.enq__dz .ic{width:22px;height:22px}
.enq__form .enq__file-input{position:absolute;width:1px;height:1px;min-height:0;padding:0;
opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0)}
.enq__files{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.enq__file{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-3);align-items:center;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:var(--space-2) var(--space-3)}
.enq__file-type{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
background:rgba(166,215,32,.16);color:var(--lime-300);font-family:var(--font-head);font-weight:700;
font-size:var(--fs-micro);letter-spacing:.03em}
.enq__file-name{min-width:0;color:#fff;font-size:var(--fs-micro);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.enq__file-size{color:var(--on-dark);font-size:var(--fs-micro)}
.enq__file-rm{background:none;border:0;color:var(--lime-300);font:inherit;font-weight:600;font-size:var(--fs-micro);
cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:6px}
.enq__file-rm:hover{text-decoration:underline}
.enq__file-rm:focus-visible{outline:2px solid var(--lime-300);outline-offset:2px}
.enq__dz-note{color:var(--err);font-size:var(--fs-micro);font-weight:600;margin:var(--space-2) 0 0}
.enq__dz-note:empty{display:none}
/* ---------- stage nav + submit ---------- */
.enq__stage-nav{margin:var(--space-4) 0 0;display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:var(--space-3)}
/* same defect class as .enq__f above -- without this, every stage's own
nav row showed at once regardless of which [data-enq-stage] was active,
instead of only the current stage's Back/Continue row. */
.enq__stage-nav[hidden]{display:none}
.enq__foot{margin-top:var(--space-5)}
/* Submit lives only on the final (Review & send) stage — every earlier
stage keeps it hidden. Default stays visible (not the other way round)
so a no-js visitor, who never gets a data-enq-active-stage attribute at
all, still sees and can use Send. */
.enq.is-full[data-enq-active-stage="1"] .enq__foot,
.enq.is-full[data-enq-active-stage="2"] .enq__foot,
.enq.is-full[data-enq-active-stage="3"] .enq__foot,
.enq.is-full[data-enq-active-stage="4"] .enq__foot,
.enq.is-full[data-enq-active-stage="5"] .enq__foot{display:none}
/* ---------- review (stage 6) ---------- */
.enq__review-lede{color:var(--on-dark);max-width:60ch}
.enq__review-group{border-top:1px solid rgba(255,255,255,.14);padding:var(--space-4) 0}
.enq__review-group:first-child{border-top:0;padding-top:0}
.enq__review-group-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2)}
.enq__review-group-head h3{margin:0;font-family:var(--font-head);font-weight:600;font-size:var(--fs-caption);color:#fff}
.enq__review-group dl{margin:0;display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-2) var(--space-4)}
.enq__review-group dt{color:var(--on-dark);font-size:var(--fs-micro);font-weight:600}
.enq__review-group dd{margin:0;color:#fff;font-size:var(--fs-micro);white-space:pre-line}
.enq__review-empty{color:var(--on-dark)}
@media (max-width:520px){ .enq__review-group dl{grid-template-columns:1fr} }
.enq__actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
/* S17: this pair was written as bare .btn/.btn--light instead of scoped to
the one button it actually styles (the enquiry form's own submit
button, .enq__actions .btn) — same specificity as, and declared after,
every sitewide .btn rule above, so it silently reset border to
transparent (and padding/font-size) on EVERY button on the entire
site, not just this one. That's the real cause of "the second pill has
no border" — .btn--outline's own border-color was always correct, it
was just being overwritten back to transparent by this rule right
after. Scoped to where it's actually used. */
.enq__actions .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
padding:var(--space-3) var(--space-6);font-family:var(--font-head);font-weight:600;font-size:var(--fs-caption);
text-decoration:none;border:1px solid transparent;cursor:pointer}
.enq__actions .btn--light{background:var(--lime-500);color:var(--green-900)}
.enq__actions .btn--light:hover{background:var(--lime-600)}
.enq__actions .btn--light:focus-visible{outline:2px solid #fff;outline-offset:3px}
.enq__reply{color:var(--on-dark);font-size:var(--fs-micro)}
.enq__consent{margin:var(--space-3) 0 0;color:var(--on-dark);font-size:var(--fs-micro);max-width:60ch}
.enq__consent a{color:var(--lime-300)}
/* ---------- ready panel ---------- */
.enq__ready{margin-top:var(--space-4);border-radius:14px;padding:var(--space-4) var(--space-5);
background:rgba(166,215,32,.12);border:1px solid rgba(166,215,32,.35);color:#fff}
.enq__ready h3{margin:0 0 var(--space-1);font-family:var(--font-head);font-weight:600;font-size:var(--fs-caption);color:#fff}
.enq__ready p{margin:0;color:var(--on-dark);font-size:var(--fs-micro)}
.enq__ready .note{color:var(--lime-300);font-weight:600}
.enq__schema{margin-top:var(--space-3)}
.enq__schema summary{cursor:pointer;color:var(--lime-300);font-size:var(--fs-micro);font-weight:600}
.enq__schema pre{margin:var(--space-2) 0 0;padding:var(--space-3);border-radius:10px;background:rgba(0,0,0,.28);
color:var(--on-dark);font-size:var(--fs-micro);line-height:1.5;overflow:auto;max-height:280px}
/* ---------- compact mode (CRO-07) ---------- */
/* P8-06: in compact, hide the request-type selector, stage chrome, every
non-kept Stage-1 field AND every .enq__compact-extra (Stage-2 detail incl.
the drop-zone, which is not an .enq__f). Reveal the extras only when the
expander has set .is-compact-expanded. */
.enq.is-compact .enq-seg,
.enq.is-compact .enq__progress,
.enq.is-compact .enq-stepper,
.enq.is-compact .enq__stage-lg,
.enq.is-compact .enq__stage-nav,
.enq.is-compact .enq__review-lede,
.enq.is-compact .enq__review,
.enq.is-compact .enq__radiorow,
.enq.is-compact .enq__followup,
.enq.is-compact .enq__f:not(.enq__compact-keep),
.enq.is-compact .enq__compact-extra,
.enq.is-compact .enq__head > p:not(.pill){display:none}
.enq.is-compact .enq__compact-more{display:block;margin:var(--space-1) 0 0}
.enq.is-compact .enq__compact-more[hidden]{display:none}
.enq.is-compact.is-compact-expanded .enq__compact-extra{display:flex}
.enq.is-compact.is-compact-expanded .enq__drop.enq__compact-extra,
.enq.is-compact.is-compact-expanded p.enq__compact-extra,
.enq.is-compact.is-compact-expanded ul.enq__compact-extra{display:block}
/* when a product arrived via page context, don't ask for it again in compact */
.enq.is-compact.has-product-context .enq__compact-extra[data-enq-product-label],
.enq.is-compact.has-product-context .enq__compact-extra[data-enq-family-label]{display:none}
/* ---------- responsive ---------- */
@media (max-width:640px){
.enq__grid{grid-template-columns:1fr}
.enq__qty-row{grid-template-columns:1fr}
.enq__actions{flex-direction:column;align-items:stretch}
/* Scoped to the enquiry form's own action buttons — a bare .btn--light
here reached every lime button sitewide, including the unrelated
newsletter Subscribe button, forcing it to width:100% inside its flex
row and squeezing the email input it sits beside down to 0 width
(invisible and unusable) on any page at this breakpoint. */
.enq__actions .btn--light{width:100%}
}
@media (max-width:380px){
.enq{padding:var(--space-4)}
.enq__phone{grid-template-columns:72px 1fr}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
.enq-seg__opt span,.enq-pill span,.enq__dz,.enq__file{transition:none}
}
/* ---------- no-JS: one plain form, real file input, no stage/progress chrome ---------- */
html.no-js .enq__progress,
html.no-js .enq-stepper,
html.no-js .enq__stage-nav,
html.no-js .enq__review-lede,
html.no-js .enq__review,
html.no-js .enq__compact-more,
html.no-js [data-enq-add-product],
html.no-js [data-enq-followup]{display:none!important}
html.no-js .enq__stage{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--space-4)}
html.no-js .enq__dz{display:none}
html.no-js .enq__file-input{position:static;width:auto;height:auto;opacity:1;pointer-events:auto;
color:var(--ink);font-size:var(--fs-micro);background:#fff;border-radius:10px;padding:var(--space-3) var(--space-3);border:1px solid transparent}
html.no-js .enq__file-input:focus-visible{outline:2px solid var(--lime-300);outline-offset:2px}
html.no-js .enq__ready,html.no-js .enq__errsum{display:none}
/* ---------- prototype chrome ---------- */
/* ============================================================================
PROTOTYPE 02 (rolled in) — buyer-led industry/product explorer
Replaces the homepage's generic "Explore by industry, or by product" CTA
strip. One large canvas: a category rail swaps a large application image +
relevant formats + one proof point + industry link. Tokens/reset/.pill/.hl
reuse the site-wide rules above.
============================================================================ */
/* ---------- explorer ---------- */
/* R5: this card's width/padding already matched every other section on the
page exactly (same .wrap, same 1160px content width as the AVI Trace/
Q-Bic card right below it) — confirmed on inspection, not a sizing bug.
The owner still wanted it to read as bigger/more substantial than the
site's standard content column, so this section alone gets a wider cap
than --wrap (1240px) — a deliberate one-off, not a fix to a shared rule
that would ripple across the other 400-odd pages using .wrap. */
.explorer.wrap{max-width:1560px}
.explorer__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-7);
flex-wrap:wrap;margin-bottom:var(--space-8)}
.explorer__head h2{max-width:18ch;letter-spacing:-.02em}
.explorer__lede{color:var(--muted);max-width:44ch;margin:0}
.explorer__canvas{
display:grid;grid-template-columns:218px 1fr;gap:var(--space-4);width:100%;
background:#fff;border:1px solid var(--line);border-radius:28px;padding:var(--space-4);
box-shadow:0 24px 60px rgba(21,61,46,.10);
}
/* left rail = shadcn Tabs, AVI rounded geometry (matches the mega rail) */
.explorer__rail{background:var(--bg-soft);border-radius:16px;padding:var(--space-3);
display:flex;flex-direction:column;gap:2px}
.explorer__tab{
display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;
background:none;border:0;border-left:3px solid transparent;border-radius:10px;
padding:var(--space-4) var(--space-4);cursor:pointer;text-align:left;
font-family:var(--font-head);font-weight:500;font-size:var(--fs-caption);color:var(--ink);
}
.explorer__tab:hover{background:rgba(255,255,255,.7)}
.explorer__tab:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
.explorer__tab[aria-selected="true"]{background:#e9f2dc;border-left-color:var(--lime-500);color:var(--green-900)}
.explorer__chev{color:var(--muted);font-size:var(--fs-caption);line-height:1}
.explorer__tab[aria-selected="true"] .explorer__chev{color:var(--green-700)}
/* Fixed (not min-) height on the panel, per the cohesive-homepage
reference — 512px min-height was oversized for the actual 7-industry
content, leaving visible dead space below the rail and the panel copy
at every state; 416px is what the reference measured across all 7 and
still never reflows switching between them. */
.explorer__stage{min-width:0;height:auto;display:grid}
.explorer__panel{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-4);height:416px}
.explorer__panel[hidden]{display:none} /* author rule beats .explorer__panel{display:grid} */
.explorer__panel:focus{outline:none}
/* EXP-06: allow the grid tracks / media to shrink below their content width so a
narrow viewport can't be forced wider than the screen. */
.explorer__panel,.explorer__media,.explorer__media--slot{min-width:0}
.explorer__media{border-radius:20px;overflow:hidden;position:relative;background:#dfe5e1}
.explorer__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* labelled asset slot — names the exact subject the image manifest must supply.
Not a photo, not generic stock. Rollout is gated on the real asset. */
.explorer__media--slot{
display:grid;place-content:center;align-content:center;text-align:center;gap:var(--space-3);padding:var(--space-7);
border:1px dashed var(--lime-600);border-radius:20px;
background:repeating-linear-gradient(45deg,#fafdf3,#fafdf3 10px,#f1f8e0 10px,#f1f8e0 20px)}
.explorer__media--slot b{font-family:var(--font-head);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;font-size:var(--fs-micro);color:var(--green-700)}
.explorer__media--slot span{color:var(--green-800);font-size:var(--fs-micro);line-height:1.4;max-width:34ch}
.explorer__media--slot em{color:var(--muted);font-size:var(--fs-micro);font-style:normal}
.explorer__body{background:var(--green-900);color:var(--on-dark);border-radius:20px;
padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-4)}
.explorer__title{color:#fff;font-size:var(--fs-h2)}
/* Explicit px, not var(--fs-base): this site's html{font-size:75%} means
1rem here is 12px, not the reference's intended ~16px body copy — a
token that reads as "base size" everywhere else quietly meant something
smaller here. */
.explorer__desc{color:var(--on-dark);font-size:var(--fs-h5);line-height:1.5;margin:0}
.explorer__formats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.explorer__formats li{border:1px solid rgba(255,255,255,.2);border-radius:999px;
padding:var(--space-2) var(--space-3);font-size:var(--fs-micro)}
.explorer__proof{position:relative;margin:0;padding:var(--space-4) 0 0 var(--space-5);font-size:var(--fs-micro);
border-top:1px solid rgba(255,255,255,.16)}
.explorer__proof::before{content:"";position:absolute;left:0;top:24px;width:8px;height:8px;
border-radius:50%;background:var(--lime-500)}
.explorer__link{margin-top:auto;font-family:var(--font-head);font-weight:600;color:#fff}
.explorer__link span{color:var(--lime-300)}
.explorer__link:hover{color:var(--lime-300)}
/* image-accordion "energy": the media fades on switch — IMAGES ONLY, never text.
(Provisional; the shared motion system is Prototype 09.) */
.explorer__panel:not([hidden]) .explorer__media:not(.explorer__media--slot){animation:exp-fade .22s ease both}
@keyframes exp-fade{from{opacity:0}to{opacity:1}}
/* ---------- responsive ---------- */
@media (max-width:900px){
.explorer__head{margin-bottom:var(--space-6)}
.explorer__canvas{grid-template-columns:1fr;padding:var(--space-3);border-radius:22px}
/* horizontal selector: one full button + a peek of the next (~44px), with
scroll snapping so it settles on a button edge (Codex P1). Rail keeps its
rounded styling; the active lime bar just moves to the bottom edge. */
.explorer__rail{
flex-direction:row;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;
scroll-snap-type:x mandatory;scroll-padding-inline:10px;overscroll-behavior-x:contain;
}
.explorer__rail::-webkit-scrollbar{display:none}
.explorer__tab{
flex:0 0 calc(100% - 44px);scroll-snap-align:start;
border-left:0;border-bottom:3px solid transparent;padding:var(--space-3) var(--space-4);justify-content:flex-start;
}
.explorer__tab[aria-selected="true"]{border-left:0;border-bottom-color:var(--lime-500)}
.explorer__tab>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.explorer__chev{display:none}
/* natural height on mobile */
.explorer__stage{min-height:0;display:block}
.explorer__panel{grid-template-columns:1fr;min-height:0;height:auto} /* the 416px desktop height must not clip the stacked mobile panel */
/* EXP-06: `min-height` + `aspect-ratio:16/10` was resolving the media to
~352px wide at a 360px viewport (44px of real page overflow). Drive the
height directly and let width follow the 1fr column. Crop (object-fit:cover)
and rounded geometry are unchanged. */
.explorer__media,.explorer__media--slot{
width:100%;min-height:0;height:clamp(190px,56vw,220px);aspect-ratio:auto;
}
.explorer__media--slot{padding:var(--space-5)}
.explorer__body{padding:var(--space-6)}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
.explorer__panel .explorer__media{animation:none}
.explorer__rail{scroll-behavior:auto}
}
/* NB: the rail deliberately does NOT set scroll-behavior:smooth in CSS — the
smooth-vs-instant choice for programmatic reveal lives in explorer.js
(reduced-motion aware). A CSS scroll-behavior here would also animate the
internal scrollLeft the script sets, which some engines then swallow. */
/* ---------- no-JS fallback: every industry reachable ---------- */
html.no-js .explorer__rail{display:none}
html.no-js .explorer__canvas{grid-template-columns:1fr}
html.no-js .explorer__stage{min-height:0;display:block}
html.no-js .explorer__panel[hidden]{display:grid!important}
html.no-js .explorer__panel{grid-template-columns:1fr;min-height:0;height:auto}
/* EXP-06: no aspect-ratio here either — a fixed ratio + min-height forces the
media wider than a narrow viewport. Drive height directly; width follows the
1fr column. object-fit:cover keeps the crop. */
html.no-js .explorer__media{min-height:0;height:clamp(220px,42vw,300px);aspect-ratio:auto}
html.no-js .explorer__media--slot{min-height:180px;height:auto;aspect-ratio:auto}
html.no-js .explorer__panel + .explorer__panel{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--line)}
html.no-js .explorer__panel .explorer__media{animation:none}
/* ============================================================================
Prototype 03 — proof canvas (product-page "What We Prove" bento)
============================================================================ */
.proof__head{max-width:52ch;margin-bottom:var(--space-7)}
.proof__head .pill{color:var(--lime-700)}
.proof__head h2{font-size:var(--fs-h2);letter-spacing:-.02em;color:var(--green-900)}
.proof__head p{color:var(--muted);margin:.6em 0 0}
.proof__canvas{
background:var(--green-900);color:var(--on-dark);
border-radius:28px;
padding:clamp(16px,2.4vw,24px);
box-shadow:0 30px 70px rgba(21,61,46,.16);
}
.proof__bento{
display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;
gap:var(--space-3);align-items:stretch;
}
.proof__tile{
background:var(--card-dark);border:1px solid rgba(255,255,255,.12);
border-radius:18px;padding:clamp(20px,2.4vw,30px);
display:flex;flex-direction:column;gap:var(--space-3);min-width:0;
}
.proof__tile--lead{grid-column:span 3;grid-row:span 2;justify-content:center;gap:var(--space-4);
position:relative;padding-top:clamp(46px,5vw,64px);
background:linear-gradient(180deg,rgba(166,215,32,.14),rgba(166,215,32,.04));
border-color:rgba(166,215,32,.35)}
.proof__tile--lead>.proof__kicker{position:absolute;top:clamp(20px,2.4vw,30px);left:clamp(20px,2.4vw,30px)}
.proof__tile--wide{grid-column:span 3}
.proof__tile--full{grid-column:span 6;flex-direction:row;align-items:center;
justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.proof__tile--full>div{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.proof__kicker{font-family:var(--font-head);font-weight:700;letter-spacing:.12em;
text-transform:uppercase;font-size:var(--fs-micro);color:var(--lime-300);margin:0}
.proof p{margin:0}
.proof__num{font-family:var(--font-head);font-weight:600;line-height:1;
color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.proof__tile--lead .proof__num{font-size:var(--fs-display)}
.proof__num--md{font-size:var(--fs-h2)}
.proof__label{font-family:var(--font-head);font-weight:500;color:#fff;font-size:var(--fs-caption);margin:0}
.proof__note{color:var(--on-dark);font-size:var(--fs-micro);margin:0}
.proof__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.proof__list li{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:var(--space-2) var(--space-3);font-size:var(--fs-micro)}
.proof__link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-2);
font-family:var(--font-head);font-weight:600;font-size:var(--fs-micro);color:#fff;text-decoration:none;
border-bottom:2px solid var(--lime-500);padding-bottom:2px}
.proof__link:hover{color:var(--lime-300);border-color:var(--lime-300)}
.proof__link:focus-visible{outline:2px solid var(--lime-300);outline-offset:3px;border-radius:2px}
html.js .proof__tile{opacity:0;transform:translateY(10px)}
html.js .proof__tile.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
html.js .proof__tile:nth-child(2).is-in{transition-delay:.06s}
html.js .proof__tile:nth-child(3).is-in{transition-delay:.12s}
html.js .proof__tile:nth-child(4).is-in{transition-delay:.18s}
@media (min-width:620px) and (max-width:900px){
.proof__bento{grid-template-columns:repeat(2,1fr)}
.proof__tile--wide{grid-column:span 1;grid-row:auto}
.proof__tile--lead{grid-column:span 2;grid-row:auto;gap:var(--space-4)}
.proof__tile--full{grid-column:span 2}
}
@media (max-width:619px){
.proof__canvas{padding:var(--space-3)}
.proof__bento{grid-template-columns:1fr;gap:var(--space-3)}
.proof__tile--lead,.proof__tile--wide,.proof__tile--full{grid-column:span 1;grid-row:auto}
.proof__tile{padding:var(--space-5);gap:var(--space-2)}
.proof__tile--lead{gap:var(--space-3);padding-top:var(--space-8)}
.proof__tile--lead>.proof__kicker{top:16px;left:16px}
.proof__tile--lead>div{display:flex;flex-direction:column;gap:var(--space-2)}
.proof__list{gap:var(--space-2)}
.proof__list li{padding:var(--space-1) var(--space-3)}
.proof__num--md{font-size:var(--fs-h3)}
.proof__tile--full{flex-direction:row;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:var(--space-3) var(--space-4);padding:var(--space-4) var(--space-4)}
.proof__tile--full>div{gap:3px;flex:1 1 190px}
.proof__tile--full .proof__note{font-size:var(--fs-micro)}
.proof__tile--full .proof__link{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
html.js .proof__tile{opacity:1;transform:none;transition:none}
}
html.no-js .proof__tile{opacity:1;transform:none}
/* ============================================================================
Prototype 04 — integrated-manufacturing story (mfg-story.html partial)
============================================================================ */
.mfg__head{max-width:56ch;margin-bottom:var(--space-2)}
.mfg__head .pill{color:var(--lime-700)}
.mfg__head h2{font-size:var(--fs-h2);letter-spacing:-.02em;color:var(--green-900)}
.mfg__head p{color:var(--muted);margin:.6em 0 0}
.mfg__steps{position:relative;padding-left:var(--space-7)}
.mfg__steps::before{content:"";position:absolute;left:3px;top:8px;bottom:8px;width:2px;background:var(--line)}
.mfg__step{padding:clamp(24px,4vh,40px) 0;position:relative}
.mfg__step:first-child{padding-top:var(--space-1)}
.mfg__step:last-child{padding-bottom:var(--space-1)}
.mfg__num{position:relative;font-family:var(--font-head);font-weight:700;font-size:var(--fs-micro);
letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mfg__num::before{content:"";position:absolute;left:-30px;top:50%;transform:translateY(-50%);
width:12px;height:12px;border-radius:50%;background:var(--line);outline:4px solid var(--bg)}
.mfg__step[data-active] .mfg__num{color:var(--lime-700)}
.mfg__step[data-active] .mfg__num::before{background:var(--lime-500)}
.mfg__step h3{font-size:var(--fs-h4);color:var(--green-900);margin:.35em 0 .5em}
.mfg__step p{color:var(--muted);max-width:46ch}
.mfg__step .mfg__ctrl{margin-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;padding:0}
.mfg__step .mfg__ctrl li{border:1px solid var(--line);border-radius:999px;padding:var(--space-2) var(--space-3);
font-size:var(--fs-micro);color:var(--green-800)}
.mfg__canvas{position:sticky;top:clamp(16px,8vh,72px);
background:var(--green-900);color:var(--on-dark);border-radius:28px;
padding:clamp(16px,2vw,22px);box-shadow:0 30px 70px rgba(21,61,46,.16);
min-height:min(72vh,560px)}
.mfg__stagewrap{position:relative;height:min(72vh,560px)}
.mfg__panel{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--space-4);
opacity:0;transition:opacity .4s ease;pointer-events:none}
.mfg__panel[data-shown]{opacity:1;pointer-events:auto}
.mfg__panel-top{display:flex;align-items:baseline;gap:var(--space-4)}
.mfg__panel-top b{font-family:var(--font-head);font-weight:700;font-size:var(--fs-h2);color:#fff;
line-height:1;font-variant-numeric:tabular-nums}
.mfg__panel-top span{font-family:var(--font-head);font-weight:600;color:var(--lime-300);font-size:var(--fs-caption)}
.mfg__media{flex:1;border-radius:18px;overflow:hidden;display:grid}
.mfg__media img{width:100%;height:100%;object-fit:cover}
.mfg__media--accent{border:1px dashed rgba(198,238,69,.5);
background:repeating-linear-gradient(45deg,rgba(255,255,255,.03),rgba(255,255,255,.03) 12px,
rgba(255,255,255,.06) 12px,rgba(255,255,255,.06) 24px);
place-content:center;align-content:center;text-align:center;gap:var(--space-3);padding:var(--space-7)}
.mfg__media--accent b{font-family:var(--font-head);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;font-size:var(--fs-micro);color:var(--lime-300)}
.mfg__media--accent span{color:#fff;font-size:var(--fs-caption);line-height:1.4;max-width:38ch}
.mfg__panel p{color:var(--on-dark);font-size:var(--fs-micro)}
.mfg__count{margin-top:var(--space-4);font-family:var(--font-head);font-weight:600;font-size:var(--fs-micro);
color:var(--on-dark);opacity:.75;text-align:right}
/* default = vertical stack; sticky canvas is a desktop+JS+motion enhancement */
.mfg__grid{display:block}
.mfg__canvas{display:none}
.mfg__step-media{margin-top:var(--space-4);border-radius:16px;overflow:hidden;min-height:160px;display:grid}
.mfg__step-media img{width:100%;height:100%;object-fit:cover}
.mfg__step-media--accent{border:1px dashed var(--lime-600);
background:repeating-linear-gradient(45deg,#fafdf3,#fafdf3 10px,#f1f8e0 10px,#f1f8e0 20px);
place-content:center;align-content:center;text-align:center;gap:var(--space-2);padding:var(--space-6)}
.mfg__step-media--accent b{font-family:var(--font-head);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;font-size:var(--fs-micro);color:var(--green-700)}
.mfg__step-media--accent span{color:var(--green-800);font-size:var(--fs-micro);line-height:1.4;max-width:44ch}
@media (max-width:900px){ .mfg__steps{padding-left:var(--space-6)} .mfg__step{padding:var(--space-6) 0} }
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
html.js .mfg__grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(24px,4vw,64px);align-items:start}
html.js .mfg__canvas{display:block}
html.js .mfg__step-media{display:none}
html.js .mfg__step{min-height:58vh;display:flex;flex-direction:column;justify-content:center}
html.js .mfg__step:first-child{min-height:0;justify-content:flex-start}
html.js .mfg__step:last-child{min-height:0}
}
@media (prefers-reduced-motion:reduce){ .mfg__panel{transition:none} }
.mfg-after{margin-top:var(--space-8);color:var(--muted)}
/* ============================================================================
AVI Trace — five-stage connected record (ded-trace.html)
============================================================================ */
.trace__rail{position:relative;margin-top:var(--space-6)}
.trace__stage{position:relative;padding:var(--space-7) 0;border-top:1px solid var(--line)}
.trace__stage:first-child{border-top:none;padding-top:var(--space-2)}
.trace__stagehead{display:flex;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-4)}
.trace__num{font-family:var(--font-head);font-weight:700;font-size:var(--fs-h4);color:var(--lime-700);
min-width:2ch}
.trace__stagehead h3{font-size:var(--fs-h4);color:var(--green-900)}
.trace__stagebody{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-7);align-items:start}
.trace__explain{color:var(--ink);max-width:56ch}
.trace__evidence{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg-soft);border-radius:var(--radius-sm);
font-size:var(--fs-micro);color:var(--green-800)}
.trace__evidence strong{color:var(--green-900)}
.trace__source{margin-top:var(--space-3);font-size:var(--fs-micro);color:var(--muted);font-style:italic}
.trace__media{border-radius:var(--radius-sm);overflow:hidden;min-height:180px;display:grid}
.trace__media img{width:100%;height:100%;object-fit:cover}
.trace__media--accent{border:1px dashed var(--lime-600);
background:repeating-linear-gradient(45deg,#fafdf3,#fafdf3 10px,#f1f8e0 10px,#f1f8e0 20px);
place-content:center;align-content:center;text-align:center;gap:var(--space-2);padding:var(--space-6)}
.trace__media--accent b{font-family:var(--font-head);font-weight:700;letter-spacing:.14em;
text-transform:uppercase;font-size:var(--fs-micro);color:var(--green-700)}
.trace__media--accent span{color:var(--green-800);font-size:var(--fs-micro);line-height:1.4;max-width:36ch}
@media (max-width:800px){
.trace__stagebody{grid-template-columns:1fr}
.trace__media{min-height:160px}
}
.check-list{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-4);max-width:70ch}
.check-list li{display:flex;gap:var(--space-3);align-items:flex-start;color:var(--ink)}
.check-list__mark{flex:none;width:24px;height:24px;border-radius:50%;background:var(--lime-500);
color:var(--green-900);display:grid;place-items:center;font-size:var(--fs-micro);font-weight:700;margin-top:2px}
/* ============================================================================
AVI packaging finder — host-page frame (ded-finder.html)
The component itself (assets/integrations/avi-finder/) is a self-styled
Shadow DOM element; this just gives it page-consistent breathing room.
============================================================================ */
.finder-frame{margin-top:var(--space-2)}
.finder-frame #avi-packaging-finder{display:block}
/* ============================================================================
Impact & Tax Savings Calculator (ded-calculator.html / impact-calculator.js)
Light-DOM widget (unlike the finder's shadow root) — inherits site tokens
directly, no encapsulation needed since it's a single-purpose panel.
============================================================================ */
.calc-frame{margin-top:var(--space-2)}
.calc-panel{background:var(--bg-soft);border-radius:var(--radius);padding:clamp(24px,4vw,40px)}
.calc-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-bottom:var(--space-7)}
@media(max-width:800px){.calc-inputs{grid-template-columns:1fr}}
.calc-field{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-micro);font-weight:600;color:var(--ink)}
.calc-field span{display:flex;justify-content:space-between;align-items:baseline}
.calc-field b{font-family:var(--font-head);color:var(--green-900);font-size:var(--fs-body)}
.calc-field input[type="number"],.calc-field select{font:inherit;font-weight:400;padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.calc-field input[type="range"]{width:100%;accent-color:var(--green-700)}
.calc-outputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media(max-width:800px){.calc-outputs{grid-template-columns:1fr}}
.calc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:var(--space-1)}
.calc-card .pill{margin-bottom:var(--space-2)}
.calc-result__row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-2) 0;border-bottom:1px solid var(--line);gap:var(--space-3)}
.calc-result__row span{color:var(--muted);font-size:var(--fs-micro)}
.calc-result__row b{font-family:var(--font-head);color:var(--green-900);white-space:nowrap}
.calc-result__row--big{padding-bottom:var(--space-3)}
.calc-result__row--big b{font-size:var(--fs-h4)}
.calc-result__status{margin:var(--space-3) 0 0;font-size:var(--fs-micro);color:var(--ink);padding:var(--space-3) var(--space-4);border-radius:8px;background:var(--bg-soft)}
.calc-result__status.is-ok{background:#eaf6d8;color:var(--green-900)}
.calc-result__status.is-warn{background:#fdeee9;color:#8a3b1f}
.calc-note{margin:var(--space-3) 0 0;font-size:var(--fs-micro);color:var(--muted)}
.calc-disclaimer{grid-column:1/-1;margin:var(--space-6) 0 0;font-size:var(--fs-micro);color:var(--muted);border-top:1px solid var(--line);padding-top:var(--space-4)}
/* header "Find My Pack" — a quiet text link after search, not a loud CTA
pill (the homepage band, mega-menu promo and footer link already carry
the emphasis) */
.site-header__finder-cta{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;
background:var(--lime-500);color:var(--green-900);border-radius:999px;padding:var(--space-2) var(--space-4);
font-family:var(--font-head);font-weight:600;font-size:var(--fs-micro);text-decoration:none}
.site-header__finder-cta:hover{background:var(--lime-600)}
@media (max-width:640px){
.site-header__finder-cta{padding:var(--space-2) var(--space-3);font-size:var(--fs-micro)}
}
@media (max-width:400px){
/* not enough room beside logo + search + menu icons at very narrow widths —
the mega-menu, homepage band and footer link remain reachable */
.site-header__finder-cta{display:none}
}
/* mega-menu promo tile */
.mega__finder-promo{display:flex;align-items:center;gap:var(--space-3);background:var(--green-900);color:#fff;
border-radius:var(--radius-sm);padding:var(--space-3) var(--space-5);text-decoration:none;font-family:var(--font-head);
font-weight:600;font-size:var(--fs-micro);margin-left:var(--space-4)}
.mega__finder-promo:hover{background:var(--green-800)}
.mega__finder-promo span.tag{background:var(--lime-500);color:var(--green-900);border-radius:999px;
padding:2px var(--space-2);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em}
/* homepage finder promo band */
.finder-promo-band{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);flex-wrap:wrap;
text-decoration:none;color:inherit;background:var(--bg-soft);border:1px solid var(--line);
border-radius:var(--radius);padding:clamp(28px,4vw,44px)}
.finder-promo-band h2{margin:var(--space-3) 0 var(--space-2);font-size:var(--fs-h3)}
.finder-promo-band p{color:var(--muted);max-width:56ch;margin:0}
.finder-promo-band .btn{flex:none}
@media (max-width:640px){.finder-promo-band{flex-direction:column;align-items:flex-start}}
/* ==========================================================================
My Enquiry drawer (FINDER-AND-ENQUIRY-DRAWER-SPEC.md Phase 2) — one
shared instance, appended once to
by assets/js/catalogue/
enquiry-drawer.js. Above the mega-menu/mobile-nav stack (z-index 300-302)
since it is a true modal overlay; the two are never open at once (the
drawer closes the mobile nav before opening, see the JS). */
.enq-drawer-backdrop{position:fixed;inset:0;z-index:400;background:rgba(21,30,26,.5);
opacity:0;transition:opacity .2s ease;cursor:default}
.enq-drawer-backdrop.is-open{opacity:1}
.enq-drawer{position:fixed;top:0;right:0;bottom:0;z-index:401;
width:440px;max-width:100vw;height:100vh;height:100dvh;
background:#fff;color:var(--ink);display:flex;flex-direction:column;
box-shadow:-8px 0 32px rgba(21,30,26,.18);
transform:translateX(100%);transition:transform .2s ease}
.enq-drawer.is-open{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
.enq-drawer-backdrop,.enq-drawer{transition:none}
}
@media (max-width:600px){
.enq-drawer{width:100%}
}
.enq-drawer__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
padding:var(--space-6);border-bottom:1px solid var(--line)}
@media (max-width:600px){.enq-drawer__header{padding:var(--space-5);padding-top:max(20px,env(safe-area-inset-top))}}
.enq-drawer__title{margin:0 0 var(--space-1);font-size:var(--fs-h6)}
.enq-drawer__title:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
.enq-drawer__title span{color:var(--muted);font-weight:500;font-size:var(--fs-caption)}
.enq-drawer__sub{margin:0;color:var(--muted);font-size:var(--fs-micro)}
.enq-drawer__close{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.enq-drawer__close:hover{background:var(--bg-soft)}
.enq-drawer__status{margin:0;padding:var(--space-3) var(--space-6);background:var(--bg-soft);color:var(--green-900);
font-size:var(--fs-micro);font-weight:600;border-bottom:1px solid var(--line)}
.enq-drawer__status--error{background:#fdecea;color:#8a2a1f}
@media (max-width:600px){.enq-drawer__status{padding:var(--space-3) var(--space-5)}}
.enq-drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-6);
display:flex;flex-direction:column;gap:var(--space-5)}
@media (max-width:600px){.enq-drawer__body{padding:var(--space-5)}}
.enq-drawer__row{display:flex;gap:var(--space-4);padding-bottom:var(--space-5);border-bottom:1px solid var(--line)}
.enq-drawer__row:last-child{border-bottom:0;padding-bottom:0}
.enq-drawer__row.is-highlighted{outline:2px solid var(--lime-600);outline-offset:4px;border-radius:var(--radius-sm)}
.enq-drawer__row--unavailable{opacity:.85}
.enq-drawer__row-media{flex:none;width:80px;height:80px;border-radius:var(--radius-sm);
border:1px solid var(--line);padding:var(--space-3);display:flex;align-items:center;justify-content:center;
background:#fff}
.enq-drawer__row-media img{max-width:100%;max-height:100%;object-fit:contain}
.enq-drawer__row-media--pending{color:var(--muted)}
@media (max-width:600px){.enq-drawer__row-media{width:72px;height:72px}}
.enq-drawer__row-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:var(--space-1)}
.enq-drawer__row-name{font-family:var(--font-head);font-weight:600;color:var(--green-900);
text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
a.enq-drawer__row-name:hover{text-decoration:underline}
.enq-drawer__row-code{margin:0;color:var(--muted);font-size:var(--fs-micro)}
.enq-drawer__row-note{margin:0;color:#8a5a00;font-size:var(--fs-micro)}
.enq-drawer__row-intent{margin:0 0 var(--space-1);color:var(--muted);font-size:var(--fs-micro)}
.enq-drawer__req-line{margin:0;font-size:var(--fs-micro);color:var(--ink)}
.enq-drawer__req-disclosure{font-size:var(--fs-micro)}
.enq-drawer__req-disclosure summary{cursor:pointer;color:var(--green-800);font-weight:600}
.enq-drawer__req-group{margin:var(--space-2) 0;padding:var(--space-2) var(--space-3);background:var(--bg-soft);border-radius:var(--radius-sm)}
.enq-drawer__req-group:first-child{margin-top:var(--space-2)}
.enq-drawer__req-actions{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
.enq-drawer__requirement-text{margin:2px 0;font-size:var(--fs-micro);color:var(--muted)}
.enq-drawer__qty{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:var(--space-2)}
.enq-drawer__qty-row{display:flex;gap:var(--space-2);margin-top:var(--space-1)}
.enq-drawer__qty-input{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);
padding:0 var(--space-3);font-size:var(--fs-micro);color:var(--ink);font-family:var(--font-body)}
.enq-drawer__qty-unit{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);
padding:0 var(--space-3);font-size:var(--fs-micro);color:var(--ink);font-family:var(--font-body);background:#fff}
@media (max-width:900px){
.enq-drawer__qty-input,.enq-drawer__qty-unit,.enquiry-row__qty input{font-size:var(--fs-control)}
.enquiry-row__qty input{min-height:44px}
}
.enq-drawer__qty-error{margin:var(--space-1) 0 0;color:#b3261e;font-size:var(--fs-micro)}
.enq-drawer__remove{align-self:flex-start;margin-top:var(--space-2);background:none;border:0;padding:0;
color:var(--muted);font-size:var(--fs-micro);font-weight:600;text-decoration:underline;cursor:pointer;font-family:var(--font-body)}
.enq-drawer__remove:hover{color:#b3261e}
.enq-drawer__empty{text-align:center;padding:var(--space-9) var(--space-4);color:var(--muted)}
.enq-drawer__empty-title{margin:0 0 var(--space-2);font-family:var(--font-head);font-weight:600;color:var(--green-900);font-size:var(--fs-caption)}
.enq-drawer__empty-body{margin:0}
.enq-drawer__footer{border-top:1px solid var(--line);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
@media (max-width:600px){.enq-drawer__footer{padding:var(--space-5);padding-bottom:max(20px,env(safe-area-inset-bottom))}}
.enq-drawer__primary{display:flex;justify-content:center;height:48px;width:100%;box-sizing:border-box}
.enq-drawer__secondary{display:flex;justify-content:center;height:44px;width:100%;box-sizing:border-box}
.enq-drawer__helper{margin:0;text-align:center;color:var(--muted);font-size:var(--fs-micro)}
/* ==========================================================================
Comparison-selection tray (MASTER-PROMPT.md section D) — non-modal,
bottom-fixed, a different component from the enquiry drawer above.
z-index 250: above ordinary content, below the mobile-nav stack (300-302)
and the enquiry drawer (400/401) — .is-suspended (JS, both overlays and
the cookie banner) is the real hide mechanism; this ordering is a
fallback for the instant during a transition. */
.cmp-tray{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
width:calc(100% - 32px);max-width:1200px;z-index:250;
background:#fff;border:1px solid var(--line);border-radius:20px;
box-shadow:0 -12px 40px rgba(21,61,46,.16);
padding:var(--space-4);transition:opacity .2s ease,transform .2s ease}
.cmp-tray.is-suspended,.cmp-tray__launcher.is-suspended{opacity:0;pointer-events:none}
.cmp-tray__summary{display:none}
.cmp-tray__panel-head{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-3)}
.cmp-tray__panel-head strong{font-family:var(--font-head);color:var(--green-900)}
.cmp-tray__panel-head [data-cmp-tray-count-full]{color:var(--muted);font-size:var(--fs-micro);margin-right:auto}
.cmp-tray__row{display:flex;gap:var(--space-4);align-items:stretch}
.cmp-tray__slots{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.cmp-tray__slot{border:1px solid var(--line);border-radius:12px;padding:var(--space-3);
display:flex;align-items:center;gap:var(--space-3);min-width:0}
.cmp-tray__slot--empty{color:var(--muted);font-size:var(--fs-micro);justify-content:center}
.cmp-tray__slot-media{flex:none;width:56px;height:56px;border-radius:10px;background:var(--bg-soft);
display:flex;align-items:center;justify-content:center;overflow:hidden}
.cmp-tray__slot-media img{max-width:100%;max-height:100%;object-fit:contain}
.cmp-tray__slot-text{min-width:0;font-size:var(--fs-micro);color:var(--muted);overflow:hidden}
.cmp-tray__slot-text b{display:block;color:var(--green-900);font-size:var(--fs-micro);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-tray__slot-remove{flex:none;width:44px;height:44px;margin-left:auto;border:0;background:none;
font-size:var(--fs-h5);line-height:1;color:var(--muted);cursor:pointer;border-radius:50%}
.cmp-tray__slot-remove:hover{background:var(--bg-soft);color:#b3261e}
.cmp-tray__action{flex:0 0 180px;display:flex;flex-direction:column;justify-content:center;gap:var(--space-2)}
.cmp-tray__go{width:100%;justify-content:center;height:48px;box-sizing:border-box}
.cmp-tray__msg{margin:0;font-size:var(--fs-micro);color:var(--muted);text-align:center;min-height:1.2em}
.cmp-tray__launcher{position:fixed;right:16px;bottom:16px;z-index:250;
background:var(--green-900);color:#fff;border:0;border-radius:999px;
padding:var(--space-4) var(--space-6);font-family:var(--font-head);font-weight:600;font-size:var(--fs-micro);
min-height:44px;cursor:pointer;box-shadow:0 12px 32px rgba(21,61,46,.24);
transition:background .2s ease,transform .2s ease}
.cmp-tray__launcher:hover{background:var(--green-800);transform:translateY(-2px)}
@media (max-width:700px){
.cmp-tray{padding:var(--space-3);border-radius:20px 20px 0 0;left:0;right:0;bottom:0;transform:none;
width:100%;max-width:none;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.cmp-tray__summary{display:flex;align-items:center;gap:var(--space-3);width:100%;
background:none;border:0;padding:var(--space-1) 2px;cursor:pointer;text-align:left;font-family:var(--font-body)}
.cmp-tray__summary-label{font-family:var(--font-head);font-weight:600;color:var(--green-900);font-size:var(--fs-micro)}
.cmp-tray__summary-thumbs{display:flex;margin-left:auto}
.cmp-tray__summary-thumbs img,.cmp-tray__summary-thumb-pending{width:28px;height:28px;border-radius:50%;
border:2px solid #fff;background:var(--bg-soft);object-fit:cover;margin-left:-8px}
.cmp-tray__summary-count{color:var(--muted);font-size:var(--fs-micro);white-space:nowrap}
.cmp-tray__chevron{transition:transform .2s ease;color:var(--muted);font-size:var(--fs-micro)}
.cmp-tray.is-expanded .cmp-tray__chevron{transform:rotate(180deg)}
.cmp-tray__panel{display:none;max-height:45dvh;overflow-y:auto;overscroll-behavior:contain;
margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}
.cmp-tray.is-expanded .cmp-tray__panel{display:block}
.cmp-tray__row{flex-direction:column}
.cmp-tray__slots{grid-template-columns:1fr}
.cmp-tray__action{flex:none}
.cmp-tray__launcher{left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:auto}
}
@media (prefers-reduced-motion:reduce){.cmp-tray,.cmp-tray__launcher,.cmp-tray__chevron{transition:none}}
/* ==========================================================================
Responsible sourcing / circularity — homepage section L */
.sourcing-banner{display:block;position:relative;border-radius:var(--radius);overflow:hidden;
min-height:320px;background:linear-gradient(135deg,var(--green-900),var(--green-800));
text-decoration:none;color:inherit}
.sourcing-banner__copy{position:relative;z-index:1;max-width:52ch;padding:clamp(28px,4vw,48px);
display:flex;flex-direction:column;gap:var(--space-4);min-height:320px;justify-content:flex-end}
.sourcing-banner__copy h2{color:#fff;font-size:var(--fs-h3);margin:0}
.sourcing-banner__copy p{color:var(--on-dark);margin:0;font-size:var(--fs-caption)}
.sourcing-banner__copy .btn{align-self:flex-start}
.sourcing-banner:hover .btn--light{background:var(--lime-600)}
.sourcing-banner__motif{position:absolute;right:clamp(-40px,2vw,40px);top:50%;transform:translateY(-50%);
width:clamp(200px,26vw,340px);height:auto;opacity:.9;pointer-events:none}
@media (max-width:900px){.sourcing-banner__motif{display:none}}
.circularity .lede{color:var(--muted)}
.pathway{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,36px) var(--space-6)}
.pathway__steps{display:flex;align-items:flex-start;position:relative}
.pathway__steps::before{content:"";position:absolute;top:26px;left:calc(10% + 26px);right:calc(10% + 26px);
height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);z-index:0}
.pathway__step{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;
padding:0 var(--space-2);position:relative;z-index:1}
.pathway__icon{width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--line);
color:var(--green-700);display:flex;align-items:center;justify-content:center;flex:none}
.pathway__step--avi .pathway__icon{background:var(--green-900);border-color:var(--green-900);color:var(--lime-500)}
.pathway__label{font-size:var(--fs-micro);font-weight:600;color:var(--green-900);line-height:1.3;max-width:14ch}
.pathway__note{color:var(--muted);font-size:var(--fs-micro);margin-top:var(--space-5)}
@media (max-width:900px){
.pathway__steps{flex-direction:column;align-items:stretch;gap:var(--space-5)}
.pathway__steps::before{display:none}
.pathway__step{flex-direction:row;text-align:left;justify-content:flex-start}
.pathway__label{max-width:none}
}
/* ==========================================================================
Sitewide polish pass (2026-10-03): spacing consistency, bug fixes,
footer brand band, floating "All Products" tab, hero second CTA.
========================================================================== */
/* --- Section rhythm: adjacent sections that share a background used to
stack both paddings (80 + 80 = a 160px dead band, 88px on mobile).
Collapse the second one's top padding so every gap between two
same-coloured sections is one --gap-section, the same as everywhere
else. Homepage excluded: its sections carry their own tinted
backgrounds without the .section--soft class. */
body:not(.page--home) .section--soft + .section--soft{padding-top:0}
body:not(.page--home) .section:not(.section--soft):not(.section--dark):not([style*="padding-bottom:0"])
+ .section:not(.section--soft):not(.section--dark){padding-top:0}
/* ...and the same double gap between a white last section and the
pre-footer enquiry card's own top margin. */
/* Only a plain, background-less section that is genuinely last (nothing
but scripts after it) -- a dark/tinted closing card keeps its gap. */
main:has(> * > section.section:not(.section--soft):not(.section--dark):not(.founder-close):last-of-type):not(:has(> * > section:last-of-type ~ :not(script))) + .pre-footer{margin-top:0}
/* --- Legal / basic pages (Privacy, Terms, Cookie Policy, Accessibility):
the H1 sat flush under the header with no top spacing and body lines
ran the full 1160px container width. */
.basic-page{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(8px,2vw,24px)}
.basic-page > *{max-width:76ch}
.basic-page h1{margin-bottom:.6em}
.basic-page h2{margin-top:1.6em;margin-bottom:.4em;font-size:var(--fs-h5)}
/* --- Link cards: img.link-card__img{height:100%} resolved against the
stretched grid card, so the photo grew to fill the whole card and
pushed the title/teaser out the bottom (clipped by overflow:hidden) on
every image link-card grid -- e.g. High Barrier Films' range cards. */
img.link-card__img{height:auto}
/* --- Calculators: the Material & Emissions result cards overflowed the
screen at 390px (1fr tracks can't shrink below their content). */
.calc-outputs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:800px){.calc-outputs{grid-template-columns:minmax(0,1fr)}}
.calc-card{min-width:0}
/* The root cause: result values are white-space:nowrap, so a long one
("Recycled PET sheet, 150-1,300 microns") couldn't wrap. Let the value
wrap right-aligned and keep the label on one line. */
.calc-result__row span{flex:none}
.calc-result__row b{white-space:normal;text-align:right;min-width:0}
/* --- Homepage hero: second, browse-first CTA beside Get a Quote. */
.home-hero__cta{gap:var(--space-3)}
.btn--glass{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.45);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--glass:hover{background:#fff;color:var(--green-900);border-color:#fff}
.btn--glass:focus-visible{outline:2px solid var(--lime-500);outline-offset:3px}
/* --- Floating side tabs: "All Products" stacked above "Get in Touch". */
.side-tabs{position:fixed;right:0;top:58%;transform:translateY(-50%);z-index:150;
display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2)}
.side-tabs .site-side-tab{position:static;transform:none;top:auto;right:auto;bottom:auto}
.site-side-tab--products{background:var(--lime-500);color:var(--green-900)}
.site-side-tab--products:hover,.site-side-tab--products:focus-visible{background:var(--green-900);color:#fff}
@media(max-width:640px){
.side-tabs{top:auto;bottom:134px;right:14px;transform:none;gap:var(--space-3)}
.page--home .side-tabs{bottom:134px}
}
/* --- Footer brand band: full-colour logo, tagline, primary CTAs. */
.site-footer__top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-6) var(--space-9);
padding-bottom:var(--space-8);margin-bottom:var(--space-9);border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer__logo{display:inline-block;line-height:0}
.site-footer__logo img{width:clamp(200px,20vw,252px);height:auto}
.site-footer__tagline{margin:0;max-width:40ch;font-family:var(--font-head);font-weight:500;
font-size:var(--fs-h6);line-height:1.4;color:#fff}
.site-footer__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.site-footer__cta .btn--outline{border-color:rgba(255,255,255,.55);color:#fff}
.site-footer__cta .btn--outline:hover{background:var(--lime-500);border-color:var(--lime-500);color:var(--green-900)}
.site-footer a.btn--light,.site-footer a.btn--light:hover{color:var(--green-900)}
.site-footer__brand .site-footer__heading{color:var(--lime-500)}
.site-footer__contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--fs-micro)}
.site-footer__contact a{display:inline-flex;align-items:center;gap:var(--space-3)}
.site-footer__contact svg{flex:none;color:var(--lime-500)}
@media(max-width:1100px){
.site-footer__top{grid-template-columns:auto 1fr}
.site-footer__cta{grid-column:1 / -1}
}
@media(max-width:640px){
.site-footer__top{grid-template-columns:1fr;gap:var(--space-5);padding-bottom:var(--space-7);margin-bottom:var(--space-8)}
.site-footer__cta .btn{flex:1 1 auto;justify-content:center}
}
/* ---------- Google Ads landing pages (layouts/ded-landing.html) ----------
/blueberry-clamshell/ and /grapes-clamshell/. Section layout mirrors the
old WordPress landing pages one for one; only the finish follows the site
(tokens, Geist, radii, soft shadows). Colours: the old teal is mapped to
--green-900, the old pale grey-green grounds to --lp-mist. */
.lp{--lp-mist:#e3ebe7;--lp-field:#eef3f0;--lp-shadow:0 14px 34px rgba(21,61,46,.12)}
.lp h2{font-weight:600;letter-spacing:-.01em}
/* hero: headline + form left, product shot right */
.lp-hero{padding-block:var(--space-8) var(--space-10);scroll-margin-top:90px}
.lp-hero__grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.lp-hero__title{font-weight:600;margin:0 0 var(--space-6);max-width:13ch;letter-spacing:-.015em}
.lp-hero__media{align-self:center}
.lp-hero__img{width:100%;height:auto}
.lp-hero__img--mobile{display:none}
/* form: the old field set, restyled */
.lp-form{display:grid;gap:var(--space-3)}
.lp-form input,.lp-form select{width:100%;min-height:46px;border:1px solid transparent;border-radius:var(--radius-sm);
background-color:var(--lp-field);color:var(--ink);font:inherit;font-size:var(--fs-body);padding:0 var(--space-4);
transition:border-color .15s,background-color .15s,box-shadow .15s}
.lp-form input::placeholder{color:#7b8a82}
.lp-form input:hover,.lp-form select:hover{border-color:#cdd9d3}
.lp-form input:focus,.lp-form select:focus{outline:none;background-color:#fff;border-color:var(--green-700);box-shadow:0 0 0 3px rgba(166,215,32,.35)}
.lp-form [aria-invalid="true"]{border-color:#c0392b;background-color:#fff6f5}
.lp-form select{appearance:none;cursor:pointer;padding-right:var(--space-8);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23153d2e' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center}
.lp-form select:invalid{color:#7b8a82}
.lp-field{display:block}
.lp-field--phone{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--space-2)}
.lp-cc{text-align:center}
.lp-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.lp-row--time{grid-template-columns:minmax(0,1fr) 96px 84px;align-items:center}
.lp-time-label{font-size:var(--fs-caption);color:var(--muted);line-height:1.3}
.lp-ampm select{padding-right:var(--space-6);background-position:right 10px center}
.lp-form__submit{justify-self:start;margin-top:var(--space-3);min-height:48px;padding-inline:var(--space-7)}
.lp-form__error{margin:0;color:#b03a2e;font-size:var(--fs-caption);font-weight:600}
.lp-form__done{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-5);border-radius:var(--radius-sm);
background:#f1f8e0;border:1px solid var(--lime-500);color:var(--green-900)}
.lp-form__done:focus{outline:none}
.lp-form__done[hidden],.lp-form__error[hidden]{display:none}
.lp-form.is-done > :not(.lp-form__done){display:none}
/* Built for Global Supply Chains: world-map band, 2x2 tiles + headline */
.lp-reach{background:#aac0b8 url(../img/landing/shared-supply-chain-bg.webp) center/cover no-repeat;padding-block:clamp(48px,6vw,64px)}
.lp-reach__grid{display:grid;grid-template-columns:auto 1fr;gap:var(--space-9);align-items:center}
.lp-reach__tiles{display:grid;grid-template-columns:repeat(2,168px);gap:var(--space-5)}
.lp-reach__tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-1);
min-height:148px;padding:var(--space-5) var(--space-4);border-radius:var(--radius-sm);background:var(--green-900);color:#fff;
box-shadow:var(--lp-shadow);transition:transform .2s ease}
.lp-reach__tile:hover{transform:translateY(-3px)}
.lp-reach__tile strong{font-family:var(--font-head);font-size:var(--fs-h2);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.lp-reach__tile span{font-size:var(--fs-h6);line-height:1.3;color:var(--on-dark)}
.lp-reach__title{text-align:center;font-size:var(--fs-display);font-weight:500;line-height:1.08;color:#36463e;margin:0}
.lp-reach__title span{display:block;color:var(--green-900)}
/* formats grid: product shot on white + green caption block */
.lp-formats{padding-block:var(--gap-section)}
.lp-formats__head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-8)}
.lp-formats__head h2{margin:0;max-width:14ch}
.lp-formats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.lp-format{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:#fff;
border:1px solid var(--line);box-shadow:0 4px 14px rgba(21,61,46,.06);transition:transform .2s ease,box-shadow .2s ease}
.lp-format:hover{transform:translateY(-4px);box-shadow:var(--lp-shadow)}
.lp-format__img{aspect-ratio:1;display:grid;place-items:center;background:#fff;overflow:hidden}
.lp-format__img img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.lp-format:hover .lp-format__img img{transform:scale(1.04)}
.lp-format__body{background:var(--green-900);color:#fff;padding:var(--space-4) var(--space-5) var(--space-5);flex:1}
.lp-format__body h3{color:#fff;font-size:var(--fs-h5);margin:0 0 var(--space-1)}
.lp-format__body p{margin:0;font-size:var(--fs-caption);line-height:1.6;color:var(--on-dark)}
/* Why Choose AVI: carousel of green cards with round icon badges */
.lp-why{background:var(--lp-mist);padding-block:var(--gap-section)}
.lp-why__title{text-align:center;margin-bottom:var(--space-9)}
.lp-why__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--space-5)) / 4);gap:var(--space-5);
overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-top:46px;outline:none}
.lp-why__track::-webkit-scrollbar{display:none}
.lp-why__track:focus-visible{outline:2px solid var(--green-700);outline-offset:4px;border-radius:var(--radius)}
.lp-why__card{scroll-snap-align:start;position:relative;background:var(--green-900);color:#fff;border-radius:var(--radius);
padding:62px var(--space-6) var(--space-7);text-align:center}
.lp-why__icon{position:absolute;top:-44px;left:50%;transform:translateX(-50%);width:88px;height:88px;border-radius:50%;
background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(21,61,46,.15)}
.lp-why__icon img{width:60px;height:60px}
.lp-why__card h3{color:#fff;font-size:var(--fs-h4);font-weight:600;margin:0 0 var(--space-3)}
.lp-why__card p{color:var(--on-dark);font-size:var(--fs-body);line-height:1.65;margin:0}
.lp-why__nav{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-7)}
.lp-why__carousel.is-static .lp-why__nav{display:none}
.lp-why__arrow{width:40px;height:40px;border-radius:50%;border:1px solid #c3d0ca;background:#fff;color:var(--green-900);cursor:pointer;
font-size:var(--fs-h6);transition:background .15s,border-color .15s}
.lp-why__arrow:hover{background:var(--lime-500);border-color:var(--lime-500)}
.lp-why__dots{display:flex;gap:var(--space-2)}
.lp-why__dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#a9bbb3;cursor:pointer;transition:width .2s,background .2s}
.lp-why__dot[aria-current="true"]{width:24px;background:var(--green-900)}
/* AVI Sustainable Advantages: forest panel, 2x2 white tiles + headline */
.lp-impact{padding-block:var(--gap-section)}
.lp-impact__panel{display:grid;grid-template-columns:auto 1fr;gap:var(--space-9);align-items:center;border-radius:28px;overflow:hidden;
padding:clamp(32px,4vw,56px) clamp(24px,5vw,64px);background:#1d4a24 url(../img/landing/shared-sustainability-bg.webp) center/cover no-repeat;
box-shadow:var(--lp-shadow)}
.lp-impact__tiles{display:grid;grid-template-columns:repeat(2,168px);gap:var(--space-5)}
.lp-impact__tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-2);
min-height:172px;padding:var(--space-5) var(--space-3);border-radius:var(--radius-sm);background:rgba(255,255,255,.96);
box-shadow:0 10px 26px rgba(0,0,0,.18);transition:transform .2s ease}
.lp-impact__tile:hover{transform:translateY(-3px)}
.lp-impact__tile strong{font-family:var(--font-head);font-size:var(--fs-h2);font-weight:600;line-height:1.05;color:var(--green-900);letter-spacing:-.02em}
.lp-impact__tile strong small{display:block;font-size:var(--fs-h4);font-weight:500;margin-top:var(--space-1)}
.lp-impact__tile span{font-size:var(--fs-h6);font-weight:600;line-height:1.3;color:var(--green-800)}
.lp-impact__title{justify-self:end;max-width:9ch;margin:0 clamp(0px,4vw,64px) 0 0;color:#fff;font-size:var(--fs-display);font-weight:600;
line-height:1.08;text-shadow:0 2px 18px rgba(0,0,0,.35)}
/* closing form */
.lp-contact{background:var(--lp-mist);padding-block:var(--gap-section)}
.lp-contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(32px,6vw,96px);align-items:start}
.lp-contact h2{font-size:var(--fs-h1);font-weight:600;max-width:11ch;margin:0 0 var(--space-4)}
.lp-contact__sub{font-family:var(--font-head);font-size:var(--fs-h4);font-weight:600;color:var(--ink);margin:0}
.lp-contact .lp-form{background:#fff;padding:clamp(20px,3vw,32px);border-radius:var(--radius);box-shadow:var(--lp-shadow)}
@media(max-width:1100px){
.lp-formats__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-why__track{grid-auto-columns:calc((100% - 2 * var(--space-5)) / 3)}
}
@media(max-width:900px){
.lp-hero{padding-top:var(--space-6)}
.lp-hero__grid{grid-template-columns:1fr}
.lp-hero__title{max-width:none}
.lp-hero__media{display:none}
.lp-hero__img--mobile{display:block;margin:0 0 var(--space-6)}
.lp-reach__grid,.lp-impact__panel,.lp-contact__grid{grid-template-columns:1fr}
.lp-reach__grid{gap:var(--space-7)}
.lp-reach__title{order:-1;font-size:var(--fs-h1)}
.lp-reach__tiles,.lp-impact__tiles{justify-content:center}
.lp-impact__panel{background-image:url(../img/landing/shared-sustainability-bg-mobile.webp)}
.lp-impact__title{order:-1;justify-self:center;text-align:center;max-width:none;margin:0;font-size:var(--fs-h1)}
.lp-formats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.lp-why__track{grid-auto-columns:calc((100% - var(--space-5)) / 2)}
}
@media(max-width:560px){
.lp-reach__tiles,.lp-impact__tiles{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.lp-why__track{grid-auto-columns:86%}
.lp-format__body{padding:var(--space-3) var(--space-4) var(--space-4)}
.lp-row--time{grid-template-columns:1fr 1fr}
.lp-time-label{grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){
.lp-format,.lp-format__img img,.lp-reach__tile,.lp-impact__tile{transition:none}
}
/* =====================================================================
PHONE LAYOUT (mobile brief, plan/CLAUDE-CODE-MOBILE-AND-EMAIL-BRIEF.md, 7 Oct 2026)
Phones only (max-width:640px); tablet and desktop layouts are untouched.
- Normal vertical scrolling. Sideways galleries only for optional content
([data-rail]: catalogue examples, insights) with tap controls added by site.js.
- Choices stay immediately before the result they change.
- Height comes from tighter hierarchy and spacing, never from smaller text or clipping.
===================================================================== */
/* Catalogue table view (all widths): the results column is a grid item, so its default
min-width:auto let the wide table stretch the whole page and it panned sideways.
Only the table's own scroll box should scroll. */
.catalogue-browse-layout > *{min-width:0}
/* labelled phone-only controls are hidden by default */
.explorer__picker,.rail-nav,.site-side-tab__short,.systems-switch,.trace-intro__actions{display:none}
@media (max-width:640px){
:root{--gap-section:40px}
.section-head,.journey-heading{margin-bottom:var(--space-5)}
/* 1. Opening: compact photo, value proposition and one dominant browse action */
.home-hero__media{height:auto;display:flex;flex-direction:column}
.home-hero__media picture{display:block}
.home-hero__img{position:relative;height:210px;object-position:66% 40%}
.home-hero__duotone,.home-hero__scrim{bottom:auto;height:210px}
.home-hero__scrim{background:linear-gradient(180deg,rgba(4,22,16,0) 55%,rgba(4,22,16,.5) 100%)}
.home-hero__overlay{position:static;display:block;background:var(--green-900)}
.home-hero__overlay-inner{padding:var(--space-5) var(--space-5) var(--space-6)}
.home-hero__title{max-width:none}
.home-hero__eyebrow{margin-bottom:var(--space-3)}
.home-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.home-hero__cta .btn{flex:1 1 140px;justify-content:center;min-height:48px;padding-inline:var(--space-4)}
.home-hero__cta .btn--glass{order:-1;background:var(--lime-500);border-color:var(--lime-500);color:var(--green-900)}
.home-hero__cta .btn--light{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
/* trust statistics: one compact three-column row instead of three stacked rows */
.hero-stat-band-section{padding-block:var(--space-6)}
.hero-stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.hero-stat{min-width:0;padding:0 var(--space-3)}
.hero-stat:first-child{padding-left:0}
.hero-stat:not(:first-child){border-top:0;padding-top:0;border-left:1px solid rgba(21,61,46,.14)}
.hero-stat::before{display:none}
/* 2. Product families: three compact linked rows, all visible, whole row tappable */
.pf-grid{grid-template-columns:1fr;gap:var(--space-3)}
.pf-card{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);
grid-template-areas:"media title" "media blurb" "media link";column-gap:var(--space-4);row-gap:var(--space-1);
align-items:start;padding:var(--space-3);border:1px solid rgba(255,255,255,.14);border-radius:16px}
.pf-card h3{grid-area:title;font-size:var(--fs-h4)}
.pf-card__media{grid-area:media;aspect-ratio:1;border-radius:10px}
.pf-card__blurb{grid-area:blurb;min-height:0;font-size:var(--fs-body)}
.pf-card__link{grid-area:link;margin-top:var(--space-1);padding-block:var(--space-2)}
.pf-card__link::after{content:"";position:absolute;inset:0;border-radius:16px}
/* 3. Industry explorer: labelled choice before the selected result */
.explorer__picker{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}
.explorer__picker-label{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.explorer__select{width:100%;min-height:48px;padding:0 var(--space-4);font:inherit;font-size:16px;font-weight:600;
color:var(--green-900);background:#fff;border:1.5px solid var(--green-900);border-radius:12px}
.explorer__select:focus-visible{outline:3px solid var(--lime-500);outline-offset:2px}
.explorer__rail{display:none}
.explorer__canvas{grid-template-rows:auto!important;padding:var(--space-3)}
.explorer__media{max-height:170px}
/* 4. Optional galleries: catalogue examples and insights (next-card peek + controls) */
[data-rail]{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:84%;
max-width:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:var(--space-4);
margin-inline:calc(-1 * var(--space-6));padding-inline:var(--space-6);scroll-padding-inline:var(--space-6);scrollbar-width:none}
[data-rail]::-webkit-scrollbar{display:none}
[data-rail] > *{scroll-snap-align:start;min-width:0}
.rail-nav{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-3)}
.rail-nav[hidden]{display:none}
.rail-nav__btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--green-900);background:#fff;
color:var(--green-900);font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer}
.rail-nav__btn:disabled{opacity:.35;cursor:default}
.rail-nav__btn:focus-visible{outline:3px solid var(--lime-500);outline-offset:2px}
.rail-nav__pos{font-size:var(--fs-caption);font-weight:600;color:var(--green-900);min-width:4.5em;text-align:center;font-variant-numeric:tabular-nums}
/* link cards elsewhere (industry and Q-Bic pages): compact rows instead of tall image cards */
.cards-3 > .link-card:has(> .link-card__img){display:grid;grid-template-columns:96px minmax(0,1fr);
grid-template-areas:"img title" "img text";column-gap:var(--space-4);align-items:start;padding:var(--space-3);padding-right:56px}
.cards-3 > .link-card:has(> .link-card__img) .link-card__img{grid-area:img;width:96px;height:96px;aspect-ratio:1;object-fit:cover;border-radius:10px}
.cards-3 > .link-card:has(> .link-card__img) h3{grid-area:title;margin:0}
.cards-3 > .link-card:has(> .link-card__img) .link-card__teaser{grid-area:text;margin:var(--space-1) 0 0}
.cards-3 > .link-card:has(> .link-card__img) .btn-arrow{right:12px;bottom:12px;width:36px;height:36px}
.cards-3,.cards-4{gap:var(--space-3);margin-top:var(--space-6)}
/* 5. AVI Trace and Q-Bic: no reserved empty space, one stage selector, before its content */
.trace-journey{grid-template-rows:auto!important}
.trace-journey__panel{min-height:0!important}
.trace-journey__media{max-height:170px}
.trace-journey__watermark{display:none}
.systems-card{padding:var(--space-5)}
.qbic-panel{gap:var(--space-5)}
.qbic-panel__frame{max-height:220px}
.systems-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:var(--space-5);
background:var(--bg-soft);border:1px solid var(--line);border-radius:14px}
.systems-switch__btn{min-height:44px;border:0;border-radius:10px;background:transparent;font:inherit;
font-weight:700;font-size:var(--fs-h6);color:var(--green-900);cursor:pointer}
.systems-switch__btn.is-active{background:var(--green-900);color:#fff}
.systems-switch__btn:focus-visible{outline:3px solid var(--lime-500);outline-offset:2px}
.systems-card__divider{display:none}
.systems-card[data-view="qbic"] .trace-intro,.systems-card[data-view="qbic"] .trace-journey{display:none}
.systems-card:not([data-view="qbic"]) .qbic-panel{display:none}
.systems-card:not(.is-trace-open) .trace-journey{display:none}
.trace-intro__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);margin-top:var(--space-4)}
.trace-more{min-height:44px;padding:0 var(--space-5);border-radius:999px;border:1.5px solid var(--green-900);
background:#fff;color:var(--green-900);font:inherit;font-weight:700;font-size:var(--fs-h6);cursor:pointer}
.trace-more[aria-expanded="true"]{background:var(--green-900);color:#fff}
.trace-more:focus-visible{outline:3px solid var(--lime-500);outline-offset:2px}
.systems-card.is-trace-open .trace-journey{margin-top:var(--space-5)}
/* 6. Custom-pack studio: natural scene height, three visible options in one row, selected button filled */
.studio-panel{padding:var(--space-5)}
.studio-panel__body{grid-template-columns:1fr;gap:var(--space-4)}
.studio-panel__stage{height:auto}
.studio-panel__scene{height:240px;min-height:0}
.studio-panel__sidebar{max-width:none;gap:var(--space-3)}
.studio-panel__tabs{flex-direction:row;gap:var(--space-1)}
.studio-panel__tab-indicator{display:none}
.studio-panel__tab{flex:1 1 0;min-height:44px;text-align:center;padding:var(--space-2)}
.studio-panel__tab.is-active{background:var(--lime-500);color:var(--green-900)}
/* 7. Assurance: certificate cells as compact two-column rows (all visible, no swiping) */
.standards-cell{padding:var(--space-3)}
.standards-cell img{height:40px;margin-bottom:var(--space-2)}
.standards-cell img[data-logo-size="lg"]{height:44px}
.standards-cell p{font-size:var(--fs-caption)}
/* 8. Enquiry: shorter opening; step numbers with only the current step's label */
.enq__head > p:not(.pill){margin-top:var(--space-2)}
.enq-stepper{margin-top:var(--space-4)}
.enq-stepper li:not(.is-current) .enq-stepper__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.enq-seg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.enq-seg__opt span{min-height:48px;padding:var(--space-2) var(--space-3)}
.contact-form-layout__image{display:none} /* decorative photo under the form */
/* calculator: every result readable at 320px (long values wrap instead of being cut off) */
.calc-result__row{flex-wrap:wrap}
.calc-result__row b{white-space:normal;text-align:right;overflow-wrap:anywhere;margin-left:auto}
/* 9. One labelled action bar (Products / Enquire) replaces the floating icons */
.side-tabs{top:auto;left:0;right:0;bottom:0;transform:none;flex-direction:row;align-items:stretch;gap:var(--space-2);
padding:var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom,0px));
background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(21,61,46,.08)}
.page--home .side-tabs{bottom:0}
.side-tabs .site-side-tab{flex:1 1 0;width:auto;height:48px;border-radius:12px;padding:0 var(--space-3);
display:flex;align-items:center;justify-content:center;background:var(--green-900);color:#fff}
.side-tabs .site-side-tab--products{background:var(--lime-500);color:var(--green-900)}
.side-tabs .site-side-tab__inner{gap:var(--space-2)}
.side-tabs .site-side-tab__icon{display:block;width:18px;height:18px}
.side-tabs .site-side-tab__short{display:inline;font-weight:700;font-size:var(--fs-h6)}
.home-back-to-top{display:none!important}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
/* never cover a focused field, the cookie notice or an open drawer */
body:has(:is(input,select,textarea):focus) .side-tabs,
body:has(.cookie-banner:not([hidden])) .side-tabs,
body:has(.enq-drawer.is-open) .side-tabs{display:none}
body.is-typing .side-tabs{display:none}
/* while the hero's own buttons are on screen the bar would repeat them: it slides in only once
the hero has been scrolled past (site.js adds .hero-passed) */
.side-tabs{transition:transform .25s ease,visibility .25s}
body:has(:is(.home-hero__cta,.page-hero__cta,.product-hero-grid__actions)):not(.hero-passed) .side-tabs{
transform:translateY(110%);visibility:hidden}
/* the comparison launcher sits just above the bar */
.cmp-tray__launcher{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.side-tabs{transition:none}}