:root{
 /* Surfaces */
 --ft-page:#f8f3e6;          /* the page, and the footer, which must match */
 --ft-card:#fff;             /* the packaging slide */
 --ft-card-soft:#fffdf8;     /* chips, pills, small raised things */
 --ft-foot:#fcf8f1;          /* the footnote bar at the base of the slide */
 --ft-pill:#efe9e0;          /* the pale half of a step pill */
 --ft-dark:#2b2523;          /* the dark half of a step pill */
 --ft-on-dark:#fff;

 /* Ink. The alphas are the ones already in use, named by what they are for
    rather than by their value, so a dark set can change them all at once. */
 --ft-ink:#030100;
 --ft-ink-strong:rgba(3,1,0,.8);
 --ft-ink-mid:rgba(3,1,0,.72);
 --ft-ink-soft:rgba(3,1,0,.62);
 --ft-ink-faint:rgba(3,1,0,.5);
 --ft-ink-ghost:rgba(3,1,0,.45);

 /* Lines */
 --ft-line:rgba(3,1,0,.16);
 --ft-line-soft:rgba(3,1,0,.09);

 /* Brand */
 --ft-accent:#e4032d;        /* the red, for marks and emphasis */
 --ft-accent-ink:#b5142f;    /* the red as running text, which needs to be darker */
 --ft-art:#b5a179;           /* the warm grey gold the pack drawings are drawn in */
 --ft-ink-body:#4a4340;      /* running body copy, warmer than the heading ink */

 /* Elevation. Two stops of the same shadow, so a dark set can drop them
    both to nothing rather than having to find them in six files. */
 --ft-shadow-edge:rgba(3,1,0,.05);
 --ft-shadow-cast:rgba(3,1,0,.28);
}


/* Panel sizes itself. 82dvh is a ceiling now, not a target. */
.header-link.active .header-link-mega-menu.ft-panel,
.header-link.active .header-link-content.ft-panel{height:auto;max-height:82dvh;overflow-y:auto}

/* ------------------------------------------------------------------ hover --
   Said, 2026-08-03: "just the act of hovering should either expand or collapse
   the menu. Now, I click and it stays open."

   Desktop only. The panel is a DOM child of its trigger, so moving the pointer
   down into the panel keeps the trigger hovered and it stays open; there is no
   gap to fall through even though the panel is absolutely positioned well
   below. Leaving closes it, with no state to get stuck in.

   Doing this in CSS rather than JavaScript is deliberate. The last two
   hover implementations on this menu were JavaScript writing inline styles and
   both broke it, one of them permanently. Nothing here can outlive a pointer.
*/
@media (min-width:992px){
.header-link:hover > .header-link-mega-menu{opacity:1;pointer-events:all;
height:auto;max-height:82dvh;overflow-y:auto;z-index:12}
.header-link:hover > .header-link-content{opacity:1;pointer-events:all;z-index:12}
.header-link:hover .header-link-top::after{width:100%}

/* Brands escapes the 25.8rem dropdown box. Pairs with .ft-wide on the trigger,
   which is what releases it to resolve against .header. */
.header-link.has-submenu.ft-wide{position:static}

/* Both panels are held to the site container instead of running the full width
   of the screen. Said, 2026-08-03: "fix the width dropdown when it drops down
   so that it does not cover the entire screen." Centred under the header with
   a rounded lower edge and a shadow, so it reads as a card that dropped rather
   than a second page. Height still follows content. */
/* One background for all four panels. The theme gave the Products mega menu a
   white gradient and the other three a flat cream, so they did not match. The
   gradient wins because it is the one that was designed for a wide panel. */
.header-link-mega-menu.ft-panel,
.header-link-content.ft-panel{
background:linear-gradient(180deg,#fbf9f6 20.89%,#fff 84.18%);
left:50%;transform:translateX(-50%);
width:min(var(--container-width,124rem),calc(100vw - 6rem));
min-width:0;top:12.5rem;
padding:3.5rem 3.5rem 3rem;
border-radius:0 0 1.6rem 1.6rem;
box-shadow:0 2.4rem 4.8rem -2.4rem rgba(0,0,0,.28)}

/* Focus pins a panel open. The filter field below lives inside a panel that
   otherwise closes the moment the pointer leaves, which would take the field
   away mid-word. */
.header-link.ft-pinned > .header-link-mega-menu,
.header-link.ft-pinned > .header-link-content{opacity:1;pointer-events:all;
height:auto;max-height:82dvh;overflow-y:auto;z-index:12}
}

/* ------------------------------------------------------------ the filter -- */
.ft-mm-filter{margin:0 0 .6rem}
.ft-mm-filter-input{width:100%;max-width:38rem;font-size:1.5rem;font-family:inherit;
padding:1.1rem 1.6rem;border:1px solid rgba(110,110,110,.28);border-radius:.8rem;
background:#fff;color:#1a1a1a;outline:none;transition:border-color .2s}
.ft-mm-filter-input::placeholder{color:#a89b86}
.ft-mm-filter-input:focus{border-color:#e3262e}
.ft-mm-noresult{font-size:1.5rem;color:#5c5445;padding:2rem 0 0;margin:0}
/* [hidden] has to outrank the display rules on these, hence the attribute. */
.ft-mm-type[hidden],.ft-mm-group[hidden],.ft-mm-col[hidden],
.ft-mm-mobile-type[hidden],.ft-mm-mobile-fam[hidden]{display:none}

/* --------------------------------------------------- top bar descriptions -- */
/* Said: "when it hovers on top of the menu above (become a distributor) a
   description can show subtly". The theme keeps these links at opacity .4 and
   lifts them to 1 on hover; opacity on a parent caps its children, so the hint
   can only ever be as visible as its link, which is exactly the behaviour
   wanted. */
.header-right .top-header-link{position:relative}
.ft-hint{position:absolute;top:calc(100% + .6rem);left:0;z-index:120;
white-space:nowrap;font-size:1.25rem;font-weight:400;line-height:1.4;
color:#5c5445;background:#fff;padding:.7rem 1.1rem;border-radius:.6rem;
border:1px solid rgba(110,110,110,.14);
box-shadow:0 .8rem 1.6rem -.8rem rgba(0,0,0,.22);
opacity:0;transform:translateY(-.4rem);pointer-events:none;
transition:opacity .25s ease,transform .25s ease}
.header-right .top-header-link:hover .ft-hint{opacity:1;transform:translateY(0)}
@media (max-width:991px){.ft-hint{display:none}}
@media (prefers-reduced-motion:reduce){.ft-hint{transition:none}}

/* Products: four columns, families packed into them and stacked where short. */
.ft-mm-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:1.6rem 3rem;padding:1.6rem 0 0}
.ft-mm-col{min-width:0}
.ft-mm-group + .ft-mm-group{margin-top:2.4rem}
.ft-mm-fam{display:flex;align-items:center;gap:.7rem;font-size:1.5rem;font-weight:500;
color:#1a1a1a;text-decoration:none;padding-bottom:.7rem;margin-bottom:.7rem;
border-bottom:1px solid rgba(110,110,110,.22)}
.ft-mm-fam:hover{color:#e3262e}
.ft-mm-icon{width:2.4rem;height:2.4rem;object-fit:contain;flex:none;display:block}
.ft-mm-type{display:block;font-size:1.35rem;line-height:2.1;color:#5c5445;text-decoration:none}
.ft-mm-type:hover{color:#e3262e}
.ft-mm-foot{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid rgba(110,110,110,.22)}
.ft-mm-all{font-size:1.4rem;font-weight:500;color:#e3262e;text-decoration:none}
.ft-mm-all:hover{text-decoration:underline}

/* Brands: logo tiles, four across. Ten brands makes three rows, so the last
   row holds two. Flex rather than grid purely so justify-content centres that
   short final row instead of hanging it off the left edge. */
.ft-bm-grid{display:flex;flex-wrap:wrap;justify-content:center;
gap:1.2rem;padding:1.6rem 0 0}
.ft-bm-tile{display:flex;flex-direction:column;align-items:center;gap:.2rem;
background:#fff;border:1px solid rgba(110,110,110,.16);border-radius:10px;
padding:.6rem .8rem .5rem;flex:0 0 calc(25% - .9rem);max-width:24rem;
text-decoration:none;transition:border-color .2s,transform .2s}
.ft-bm-tile:hover{border-color:#e3262e;transform:translateY(-2px)}
/* Logo size: 50px wide, Said 2026-08-03. In px, not rem, so it stays 50 at
   every breakpoint rather than shrinking with the root font. Height follows the
   real 262:180 artwork ratio. Tiles are capped narrow to match, otherwise a
   50px logo floats in a 340px box.

   width and height are BOTH set on purpose. These logos are SVGs, and
   WordPress cannot read an intrinsic size out of an SVG, so it stamps
   width="960" height="960" on the tag from the square "medium" image size.
   That gives the element aspect-ratio 1:1, and with width:auto the box
   collapses to a square the height of max-height, painting artwork whose real
   ratio is 262:180 at a fraction of the width asked for. Fixing both axes and
   letting object-fit:contain do the scaling sidesteps it, with no distortion.

   NB: no apostrophes in this block. It lives inside a single-quoted PHP
   string and one contraction takes the whole file out. */
/* Box height cut 15%, from about 133px to about 112px, WITHOUT narrowing the
   logo. The artwork is 262:180, so at 125 wide it is 86 tall; the box was 88,
   carrying 2px of dead space. Dropping the box to 86 and tightening the padding,
   the gap and the caption is where the 21px comes from. Shrinking the box
   further would shrink the logo with it, because object-fit:contain scales to
   whichever axis runs out first, and the 125 width was the point. */
.ft-bm-logo{width:125px;height:86px;aspect-ratio:auto;object-fit:contain;display:block}
.ft-bm-logo--text{display:flex;align-items:center;justify-content:center;
width:125px;height:86px;font-size:1.5rem;font-weight:500;color:#2b2b2b;
overflow:hidden;text-align:center;line-height:1.15}
.ft-bm-desc{font-size:1.05rem;color:#8a7f6d;text-align:center;line-height:1.25;
margin-top:0}

/* Mobile: same tree, stacked, inside the existing modal. */
.ft-mm-mobile{display:flex;flex-direction:column;padding:.5rem 0}
.ft-mm-mobile-fam{display:flex;align-items:center;gap:.7rem;font-size:1.6rem;font-weight:500;
color:#1a1a1a;text-decoration:none;padding:1.1rem 0 .6rem;
border-bottom:1px solid rgba(110,110,110,.18);margin-bottom:.4rem}
.ft-mm-mobile-type{display:block;font-size:1.4rem;line-height:2.4;color:#5c5445;
text-decoration:none;padding-left:1.2rem}

/* The accordion caps its content at 50rem, which is fine for a text list and
   clips a ten tile logo grid mid row. */
.header-mobile-menu-link.ft-brand-accordion.active .header-mobile-menu-content{max-height:none}

/* Narrower desktops. The mega menu only exists above 991px, but four columns
   of long type names get cramped before 1280px, so drop to three. */
@media (max-width:1279px){
.ft-mm-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 2rem}
}

@media (max-width:991px){
.ft-bm-grid{gap:.7rem}
.ft-bm-tile{flex:0 0 calc(50% - .35rem);padding:.6rem .6rem .5rem}
.ft-bm-logo,.ft-bm-logo--text{width:100px;height:69px}
.ft-bm-desc{font-size:1rem}
}

/* ------------------------------------------------ WooCommerce img override --
   WooCommerce ships this in woocommerce-layout.css:

       .woocommerce img, .woocommerce-page img { height: auto }

   Every product archive and every single product page carries the
   woocommerce-page body class, and that selector is one class plus one element,
   which outranks the single class on .ft-bm-logo and .ft-mm-icon. So on those
   pages, and only those pages, WooCommerce stripped the fixed height off every
   image in the header menu. Measured: a brand logo 125 by 1500 inside a tile
   1528 tall, against 125 by 86 on the homepage. Said saw it as the menu being
   fixed on the homepage but not anywhere else, which is exactly what it was.

   The class is repeated rather than an ancestor added, so the rule wins on
   specificity alone without depending on where in the menu the image sits. That
   matters because the desktop panel and the mobile panel do not share a parent.
   No !important: this beats the plugin fairly and stays beatable in turn. */
.ft-bm-logo.ft-bm-logo{width:125px;height:86px}
.ft-mm-icon.ft-mm-icon{width:2.4rem;height:2.4rem}
@media (max-width:991px){
.ft-bm-logo.ft-bm-logo{width:100px;height:69px}
}
/*# sourceURL=ft-menu-panels-inline-css */



@media (min-width:992px){
.ft-header-spacer{height:0}
/* 0.42s, which is 0.35 slowed by 20% at Said request, 2026-08-03. The easing
   curve is unchanged, so it decelerates the same way, just over longer. */
.header-wrapper.is-detached{position:fixed;top:0;left:0;right:0;z-index:200;
transform:translateY(-100%);will-change:transform;
transition:transform .42s cubic-bezier(.22,.61,.36,1);
box-shadow:0 1rem 2.4rem -1.2rem rgba(0,0,0,.26)}
.header-wrapper.is-detached.is-peeking{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
.header-wrapper.is-detached{transition:none}
}
/*# sourceURL=ft-header-peek-inline-css */



/* Links: quiet, scannable, sentence case, and tight.

   Said, 2026-08-04: "the distance between the lines for these is way too large.
   it should be 1".

   The 40px pitch between links was three things stacked, which is why it looked
   so loose: a 26.25px line box from line-height 1.75, an 8px margin-bottom the
   theme puts on every .footer-item, and a 6px row-gap. Line-height goes to 1 as
   asked and the stray margin is zeroed, so the only thing left holding the
   links apart is one gap value that can be reasoned about. */
.footer .footer-item,
.footer .footer-links a{text-transform:none;font-weight:400;font-size:1.5rem;
letter-spacing:normal;line-height:1;margin-bottom:0;color:rgba(3,1,0,.68);
transition:color .2s ease}
.footer .footer-item:hover,
.footer .footer-links a:hover,
.footer .footer-item:focus-visible,
.footer .footer-links a:focus-visible{color:#e4032d}

/* Headings: now the strongest thing in the column, which is the job they were
   already doing and being outshouted for. */
.footer .footer-links-title{font-weight:700;font-size:1.5rem;
letter-spacing:normal;text-transform:none;color:#030100;
margin-bottom:1.2rem;line-height:1.4}

/* With line-height at 1 the text boxes are 15px tall, so if the gap went to
   zero as well the links would physically touch. One gap value, deliberately
   chosen, is all that separates them now: pitch falls from 40px to 25px.

   It does not go tighter than this on a phone. At line-height 1 the link box is
   15px, and a 15px tap target with nothing around it is below any reasonable
   threshold and produces mis-taps on the wrong link. So small screens keep more
   room between them, which costs nothing on a layout that is a single column
   there anyway. */
.footer .footer-links{row-gap:1rem}
@media (max-width:767px){.footer .footer-links{row-gap:1.8rem}}

/* The address and phone were already sentence case; matching them to the links
   so the whole footer reads at one level. */
.footer .footer-left-item{font-size:1.5rem;color:rgba(3,1,0,.68);
line-height:1.75}

/* The copyright is the quietest line on the page, not a paragraph of body
   copy. */
.footer .footer-copyright-text{font-size:1.4rem;line-height:1.6;
color:rgba(3,1,0,.55)}

/* Terms row, same treatment as the links so it stops competing with them. */
.footer .footer-terms,
.footer .footer-terms a{font-size:1.4rem;text-transform:none;font-weight:400;
letter-spacing:normal;color:rgba(3,1,0,.6)}
.footer .footer-terms a:hover{color:#e4032d}

/*# sourceURL=ft-footer-type-inline-css */

/* Shared FlavourTech interface palette. Keep partner/product artwork unchanged. */
:root{--ft-brand-red:#ED0039;--ft-brand-beige:#F8F3E6;--ft-brand-white:#FFFFFF;--ft-brand-ink:#423E3B;--ft-brand-line:#E4D9C8}
header.header,header.header.active,header.header .bottom-header{background:var(--ft-brand-beige);background-image:none;border-color:var(--ft-brand-line)}
header.header .top-header{background:var(--ft-brand-white);background-image:none}
header.header .search-btn,header.header .header-mobile-menu,header.header .header-link-content,header.header .header-link-mega-menu,header.header .header-link-content.ft-panel,header.header .header-link-mega-menu.ft-panel{background:var(--ft-brand-beige);background-image:none}
header.header .search-wrapper .search-content .input,header.header .header-mobile-menu .input,header.header .langs-menu-content{background:var(--ft-brand-white);background-image:none}
header.header .top-header-link{color:var(--ft-brand-ink);opacity:1}
header.header .header-link-top,header.header .call-us,header.header .search-btn,header.header .header-mobile-menu-link,header.header .header-link-content-item{color:var(--ft-brand-ink)}
header.header .top-header-social{color:var(--ft-brand-ink);stroke:var(--ft-brand-ink)}
header.header .top-header-social:hover,header.header .top-header-link:hover,header.header .top-header-link:focus-visible,header.header .header-link-top:hover,header.header .header-link-top:focus-visible,header.header .search-btn:hover,header.header .header-link-content-item:hover{color:var(--ft-brand-red);stroke:var(--ft-brand-red);opacity:1}
header.header .header-link-top svg,header.header .header-link-top .icon-font,header.header .header-link-content-item-icon,header.header .header-mobile-menu-link svg.left-icon,header.header .header-mobile-menu-contact .header-mobile-menu-link-social,header.header .call-us svg,header.header .ft-mm-group h3,header.header .ft-mm-group h4,header.header .header-link-mega-menu-title{color:var(--ft-brand-red)}
header.header .header-link-top:after{background:var(--ft-brand-red)}
header.header .header-link-content-item:hover{background:var(--ft-brand-white)}
header.header .header-menu-opener span{background:var(--ft-brand-ink)}
header.header .search-btn,header.header .ft-mm-filter input,header.header .search-wrapper .search-content .input{border-color:var(--ft-brand-line)}
header.header .search-wrapper .search-content .input:focus{border-color:var(--ft-brand-red)}
/* Generic FlavourTech accents use the same red as the navigation and spots. */
#ft-main .hero-title-h1,#ft-main .section-h2,#ft-main .color-primary{color:var(--ft-brand-red)}
#ft-main .btn-fx-1{background:var(--ft-brand-red);border-color:var(--ft-brand-red);color:var(--ft-brand-white)}
#ft-main .btn-fx-1:before,#ft-main .btn-fx-1:after{background:var(--ft-brand-red)}
#ft-main .btn-fx-ghost:hover{background:var(--ft-brand-red);border-color:var(--ft-brand-red);color:var(--ft-brand-white)}
body:not(.page-id-2998) #ft-main .hero-section_private:not(.hero-section_private--noimg) .hero-title-h1{color:var(--ft-brand-red)!important}
/* Use the same beige in photographic scrims, rather than a second cream. */
#ft-main .hero-section_private:not(.hero-section_private--noimg):before{background:linear-gradient(90deg,rgba(248,243,230,.97) 0%,rgba(248,243,230,.95) 50%,rgba(248,243,230,.74) 66%,rgba(248,243,230,.26) 83%,rgba(248,243,230,0) 96%)}
@media(max-width:991px){#ft-main .hero-section_private:not(.hero-section_private--noimg):before{background:linear-gradient(180deg,rgba(248,243,230,.93) 0%,rgba(248,243,230,.88) 58%,rgba(248,243,230,.7) 100%)}}
/* Editorial heroes have a separate photo: their exposed canvas is solid beige. */
#ft-main.ft-industry-page .hero-section_private:before,#ft-main.ft-contract-page .hero-section_private:before{background:none}
/* Transparent brand separators: the page surface shows through, without a box. */
.divider:has(>.divider-logo){--ft-divider-line:var(--ft-brand-line,#E4D9C8);background:linear-gradient(to right,var(--ft-divider-line) 0,var(--ft-divider-line) calc(50% - 40px),transparent calc(50% - 40px),transparent calc(50% + 40px),var(--ft-divider-line) calc(50% + 40px),var(--ft-divider-line) 100%)}
.divider.divider--light:has(>.divider-logo){--ft-divider-line:rgba(255,255,255,.18)}
.divider .divider-logo,.divider .divider-logo__v2,.section .border-shape,.contact-us-wrapper .border-shape{background:transparent!important;background-image:none!important;box-shadow:none}
.divider .divider-logo img,.section .border-shape img,.contact-us-wrapper .border-shape img{object-fit:contain}
.section.with-top-border:has(>.border-shape){position:relative;border-top-color:transparent}
.section.with-top-border:has(>.border-shape):before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(to right,var(--ft-brand-line,#E4D9C8) 0,var(--ft-brand-line,#E4D9C8) calc(50% - 40px),transparent calc(50% - 40px),transparent calc(50% + 40px),var(--ft-brand-line,#E4D9C8) calc(50% + 40px),var(--ft-brand-line,#E4D9C8) 100%)}

.ft-privacy-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin:20px 0 0;font:400 13px/1.5 Montserrat,Arial,sans-serif}.ft-privacy-links button{border:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:3px;padding:4px 0;text-align:left;cursor:pointer;font:inherit}
@media(max-width:782px){#wpadminbar #wp-admin-bar-top-secondary{position:absolute;top:0;right:0}#wpadminbar #wp-admin-bar-root-default{max-width:calc(100% - 52px);height:46px;overflow:hidden}.admin-bar header .modal--full{top:46px;height:calc(100dvh - 46px)}.admin-bar header .modal--full .modal-main{height:100%;max-height:100%}}