/* theme.css — everything theme.json cannot express. Values come from theme.json presets/custom (tokens/*.json). No literal colours here. */
/* Inter's metrics on Arial (the values Next.js ships for Inter): while the woff2 loads, text sets in a fallback that fills the same box, so the swap to Inter no longer re-breaks the hero heading. In the stack via scripts/build-tokens.mjs. */
@font-face{font-family:"Inter fallback";src:local("Arial"),local("ArialMT");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--wp--custom--color--action-focus);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
main{display:block}#main{scroll-margin-top:var(--wp--custom--size--nav-height)}
/* rhythm — header, main and footer are full-bleed bands: no root block gap between them */
.wp-site-blocks>*{margin-block-start:0}
.hf-section{padding:var(--wp--custom--component--section--padding) 0 0}
.hf-section__head{display:grid;grid-template-columns:1fr 1fr;gap:var(--wp--custom--component--section--head-gap);align-items:start;margin-bottom:var(--wp--preset--spacing--09)}
.hf-section__title{font-size:var(--wp--preset--font-size--h-1);line-height:var(--wp--custom--font--line-height--snug);letter-spacing:var(--wp--custom--font--letter-spacing--h1);margin:0;text-wrap:balance}
.hf-section__aside{padding-top:12px;display:grid;gap:12px}.hf-section__aside p{margin:0}
.hf-section__head--link{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--wp--preset--spacing--04) var(--wp--custom--component--section--head-gap)} /* round 95: a head with only a link (post-grid) — the link ends on the right content edge at every width */.hf-section__head--link .hf-section__aside{padding-top:0;margin-left:auto}
.hf-eyebrow{font-size:var(--wp--preset--font-size--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--wp--preset--color--muted);margin:0 0 var(--wp--preset--spacing--03)}
.hf-band{padding:var(--wp--preset--spacing--10) 0}
.hf-band__inner{max-width:var(--wp--custom--size--wide);margin:0 auto;padding:0 var(--wp--custom--size--gutter)} /* wide + gutter = the 1312 content box, same as header, main and footer */
.hf-band--paper{background:var(--wp--preset--color--paper)}.hf-band--sand{background:var(--wp--custom--color--surface-band-sand)} /* surface.band-sand (sand.50), round 55 */.hf-band--tint{background:var(--wp--custom--color--surface-tint-soft)} /* surface.tint-soft (blue.50) — the FAQ band, rounds 63–64 */ .hf-band--boxed{padding:var(--wp--preset--spacing--09)} /* round 95: a band inside constrained page content (Brochures and guides data-sheet banner) — wide-aligned panel, square like the cards */.hf-band--boxed>*{margin-block:0}.hf-band--boxed>*+*{margin-top:var(--wp--preset--spacing--04)}.hf-band--boxed .hf-cta-p{margin-top:var(--wp--preset--spacing--06)}@media (max-width:639px){.hf-band--boxed{padding:var(--wp--preset--spacing--07)}}.hf-band--panel{background:var(--wp--preset--color--panel)}
.hf-band--band{background:var(--wp--preset--color--band);color:var(--wp--preset--color--white)}.hf-band--band h2,.hf-band--band h3{color:inherit}.hf-band--band .hf-eyebrow{color:var(--wp--preset--color--blue-tint)}
.hf-band--blue{background:var(--wp--preset--color--brand-blue);color:var(--wp--preset--color--white)}.hf-band--blue h2{color:inherit}
.hf-band--navy{background:var(--wp--custom--color--surface-band-blue);color:var(--wp--preset--color--white)}.hf-band--navy h2,.hf-band--navy h3{color:inherit}.hf-band--navy :focus-visible{outline-color:var(--wp--preset--color--white)} /* surface.band-blue (blue.900): heavier than paper, not an action colour; the blue.500 ring is lost on it */
/* every full-bleed band gets a section of air above it, wherever it sits (inside or after main); bands that touch another band, the hero or the top of main don't */
.hf-band{margin-top:var(--wp--custom--component--section--padding)}.hf-band+.hf-band,.hf-hero+.hf-band,.hf-highlights+.hf-band,main>.hf-band:first-child,.hf-band:first-child{margin-top:0}
.hf-hero+.hf-highlights{margin-top:0} /* Round 55: the highlights band is the hero's foot — flush under it */
/* icon tile: duotone icon in a soft tinted square (tokens component.icon-tile) */
.hf-icon-tile{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--wp--custom--component--icon-tile--size);height:var(--wp--custom--component--icon-tile--size);border-radius:var(--wp--custom--component--icon-tile--radius);background:var(--wp--custom--component--icon-tile--bg);color:var(--wp--custom--component--icon-tile--fg);--hf-icon-tint:var(--wp--custom--component--icon-tile--tint);transition:background var(--wp--custom--motion--fast),color var(--wp--custom--motion--fast)}
a:hover>.hf-icon-tile,.hf-icon-tile--hover{background:var(--wp--custom--component--icon-tile--bg-hover);color:var(--wp--custom--component--icon-tile--fg-hover);--hf-icon-tint:var(--wp--custom--component--icon-tile--tint-hover)}
/* duotone contrast rule (tokens color.icon.duotone*): fill is the lighter layer, line-art the darker, in every state */
:root{--hf-icon-tint:var(--wp--custom--color--icon-duotone-tint)} /* default duotone fill; components override the property on a parent and the svg inherits it */
/* accent state for any duotone icon: add .is-accent to the icon or its parent → sand duotone */
.hf-icon--duotone.is-accent,.is-accent>.hf-icon--duotone{color:var(--wp--custom--color--icon-duotone-accent);--hf-icon-tint:var(--wp--custom--color--icon-duotone-accent-tint)}.hf-icon-tile svg{transition:color var(--wp--custom--motion--fast)}
.hf-icon-tile--small{width:var(--wp--custom--component--icon-tile--size-small);height:var(--wp--custom--component--icon-tile--size-small)}
/* round 127: AS 2700 swatches (color.swatch.* — the colour chart site's own on-screen values; content, never chrome). The rating idiom: a modifier sets --hf-swatch. */
.hf-swatch{display:block;min-width:0;background:var(--hf-swatch)}.hf-swatch--n23{--hf-swatch:var(--wp--custom--color--swatch-n-23)}.hf-swatch--n35{--hf-swatch:var(--wp--custom--color--swatch-n-35)}.hf-swatch--n43{--hf-swatch:var(--wp--custom--color--swatch-n-43)}.hf-swatch--n45{--hf-swatch:var(--wp--custom--color--swatch-n-45)}.hf-swatch--n44{--hf-swatch:var(--wp--custom--color--swatch-n-44)}.hf-swatch--n64{--hf-swatch:var(--wp--custom--color--swatch-n-64)}.hf-swatch--n61{--hf-swatch:var(--wp--custom--color--swatch-n-61)}.hf-swatch--y56{--hf-swatch:var(--wp--custom--color--swatch-y-56)}.hf-swatch--y14{--hf-swatch:var(--wp--custom--color--swatch-y-14)}.hf-swatch--r13{--hf-swatch:var(--wp--custom--color--swatch-r-13)}.hf-swatch--g27{--hf-swatch:var(--wp--custom--color--swatch-g-27)}.hf-swatch--ral5015{--hf-swatch:var(--wp--custom--color--swatch-ral-5015)}
/* the colour chart's icon tile (round 127, sphere pass — Gabriel's pick from mockup set 4, pins 34 / 38 / 39): a glowing orb of the colour sphere's six chart colours inside the plain icon tile, turning slowly (html.hf-motion only) — the same sphere in the menu, drawer, hub card, product aside and search; hover never tints the tile */
.hf-swatch-tile{position:relative}.hf-swatch-tile__orb{position:absolute;inset:var(--wp--custom--component--colour-chart--tile-orb-inset);border-radius:50%;overflow:hidden;isolation:isolate}.hf-swatch-tile__orb::before{content:"";position:absolute;inset:-25%;background:conic-gradient(var(--wp--custom--color--swatch-y-13),var(--wp--custom--color--swatch-x-14),var(--wp--custom--color--swatch-p-41),var(--wp--custom--color--swatch-ral-5015),var(--wp--custom--color--swatch-b-34),var(--wp--custom--color--swatch-g-37),var(--wp--custom--color--swatch-y-13));filter:blur(var(--wp--custom--component--colour-chart--tile-orb-blur))}html.hf-motion .hf-swatch-tile__orb::before{animation:hf-swatch-spin var(--wp--custom--component--colour-chart--tile-spin-duration) linear infinite}a:hover>.hf-icon-tile.hf-swatch-tile{background:var(--wp--custom--component--icon-tile--bg)}@keyframes hf-swatch-spin{to{transform:rotate(1turn)}}
/* a link to another site: the Lucide external icon after the label (hychem_ext_mark) */
.hf-ext{flex:none;margin-left:var(--wp--custom--component--colour-chart--ext-gap);color:var(--wp--preset--color--muted);vertical-align:-2px}
/* links & buttons */
/* ---- text link (component.link): label + 16px icon. Hairline underline under the label at rest, solid on hover, trailing arrow nudges. --inverse on dark/photo, --small at body-sm. Built by hychem_link(). ---- */
.hf-link{display:inline-flex;align-items:center;gap:var(--wp--custom--component--link--gap);font-size:var(--wp--custom--component--link--font-size);font-weight:var(--wp--custom--component--link--font-weight);line-height:1.3;color:var(--wp--custom--component--link--color);text-decoration:none}
.hf-link:hover,.hf-link:focus-visible{color:var(--wp--custom--component--link--color);text-decoration:none}
.hf-link__label{text-decoration:underline;text-decoration-thickness:var(--wp--custom--component--link--underline-thickness);text-underline-offset:var(--wp--custom--component--link--underline-offset);text-decoration-color:color-mix(in srgb,currentColor calc(var(--wp--custom--component--link--underline-opacity) * 100%),transparent);transition:text-decoration-color var(--wp--custom--motion--fast)}
.hf-link:hover .hf-link__label,.hf-link:focus-visible .hf-link__label{text-decoration-color:currentColor}
.hf-link__icon{flex:0 0 auto;width:var(--wp--custom--component--link--icon-size);height:var(--wp--custom--component--link--icon-size);transition:transform var(--wp--custom--motion--fast)}
.hf-link:hover .hf-link__label+.hf-link__icon,.hf-link:focus-visible .hf-link__label+.hf-link__icon{transform:translateX(var(--wp--custom--component--link--nudge))} /* only a trailing arrow moves */
.hf-link--inverse,.hf-link--inverse:hover,.hf-link--inverse:focus-visible{color:var(--wp--custom--component--link--color-inverse)}
.hf-link--small{font-size:var(--wp--custom--component--link--font-size-small)}
.hf-link--muted{color:var(--wp--preset--color--muted)}.hf-link--muted:hover,.hf-link--muted:focus-visible{color:var(--wp--custom--component--link--color)} /* quiet secondary link: muted at rest, link colour on hover */
.hf-link:focus-visible{outline:2px solid var(--wp--custom--color--action-focus);outline-offset:3px}
.hf-button{display:inline-flex;align-items:center;gap:8px;min-height:var(--wp--custom--component--button--min-height);box-sizing:border-box;padding:var(--wp--custom--component--button--padding-y) var(--wp--custom--component--button--padding-x);font-size:var(--wp--custom--component--button--font-size);font-weight:var(--wp--custom--component--button--font-weight);line-height:1.2;border-radius:var(--wp--custom--component--button--radius);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background var(--wp--custom--motion--fast),color var(--wp--custom--motion--fast),border-color var(--wp--custom--motion--fast)}
.hf-button--primary{background:var(--wp--custom--component--button--primary-bg);color:var(--wp--custom--component--button--primary-fg)}.hf-button--primary:hover{background:var(--wp--custom--component--button--primary-bg-hover);color:var(--wp--custom--component--button--primary-fg);text-decoration:none}
.hf-button--secondary{background:transparent;color:var(--wp--custom--component--button--secondary-fg);border-color:var(--wp--custom--component--button--secondary-border)}.hf-button--secondary:hover{background:var(--wp--custom--component--button--secondary-bg-hover);color:var(--wp--custom--component--button--secondary-fg);border-color:var(--wp--custom--component--button--secondary-border);text-decoration:none} /* hover rule (tokens component.button): step the surface one tone, never invert */
.hf-button--inverse{background:var(--wp--custom--component--button--inverse-bg);color:var(--wp--custom--component--button--inverse-fg)}.hf-button--inverse:hover{background:var(--wp--custom--component--button--inverse-bg-hover);color:var(--wp--custom--component--button--inverse-fg);text-decoration:none}
.hf-button--accent{background:var(--wp--custom--component--button--accent-bg);color:var(--wp--custom--component--button--accent-fg);border-color:var(--wp--custom--component--button--accent-border)}.hf-button--accent:hover{background:var(--wp--custom--component--button--accent-bg-hover);color:var(--wp--custom--component--button--accent-fg-hover);text-decoration:none} /* sand-700 on navy: the hairline keeps the edge (the two are equally dark); hover inverts */
.hf-button--ghost{background:transparent;color:var(--wp--custom--component--button--ghost-fg);border-color:var(--wp--custom--component--button--ghost-border)}.hf-button--ghost:hover{border-color:var(--wp--custom--component--button--ghost-fg);background:var(--wp--custom--component--button--ghost-bg-hover);color:var(--wp--custom--component--button--ghost-fg);text-decoration:none}
.wp-block-button__link{border-radius:0;min-height:var(--wp--custom--component--button--min-height);box-sizing:border-box;display:inline-flex;align-items:center;transition:background var(--wp--custom--motion--fast),color var(--wp--custom--motion--fast)}.wp-block-button__link:hover{background:var(--wp--custom--component--button--primary-bg-hover);color:var(--wp--custom--component--button--primary-fg)}.is-style-secondary .wp-block-button__link{background:transparent;color:var(--wp--custom--component--button--secondary-fg);border:1px solid var(--wp--custom--component--button--secondary-border)}.is-style-secondary .wp-block-button__link:hover{background:var(--wp--custom--component--button--secondary-bg-hover);color:var(--wp--custom--component--button--secondary-fg)}.is-style-inverse .wp-block-button__link{background:var(--wp--custom--component--button--inverse-bg);color:var(--wp--custom--component--button--inverse-fg)}.is-style-inverse .wp-block-button__link:hover{background:var(--wp--custom--component--button--inverse-bg-hover);color:var(--wp--custom--component--button--inverse-fg)}
/* ---- social links (hychem_social_links): an icon row shared by the top strip, the drawer foot and the footer. Colour comes from the parent; each block sets its own gap/size through its variant class. ---- */
.hf-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp--preset--spacing--04)}.hf-social li{flex:none} /* round 103: the client adds channels — a long row wraps, it never squeezes the targets */
.hf-social a{display:inline-flex;align-items:center;justify-content:center;padding:6px;color:inherit;transition:color var(--wp--custom--motion--fast)}
.hf-social a:hover{text-decoration:none}.hf-social a:focus-visible{outline:2px solid var(--wp--custom--color--action-focus);outline-offset:2px}
/* ---- hero loops (home hero, project hero — hychem_loop_media(), scripts/loop-stills.mjs): a blurred inline preview of the clip's first frame paints first, the still (same frame) over it, the video over both. The video fades in once it is actually playing; the still under it is the same picture, so the fade only hides the JPEG/H.264 tone step. ---- */
:has(>.hf-loop__lqip){isolation:isolate}
.hf-loop__lqip{position:absolute;inset:-24px;z-index:-1;background:center/cover no-repeat;filter:blur(24px)}
video[data-hf-loop]{opacity:0}video[data-hf-loop][data-ready]{opacity:1;transition:opacity var(--wp--custom--motion--fast)}
@media (prefers-reduced-motion:reduce){video[data-hf-loop]{display:none}}
/* forms */
.hf-input,input[type=text],input[type=search],input[type=email],input[type=tel],select,textarea{font:inherit;font-size:var(--wp--preset--font-size--body);color:var(--wp--preset--color--heading);background:#fff;border:1px solid var(--wp--preset--color--rule);border-radius:0;padding:10px var(--wp--custom--component--control--padding-x);width:100%;box-sizing:border-box}
.hf-input,input[type=text],input[type=search],input[type=email],input[type=tel],select{height:var(--wp--custom--component--control--height);padding-top:0;padding-bottom:0;line-height:1.4}
/* ---- search suggestions (component.suggest; theme.js → hychem suggest on any [data-hf-suggest] field, Round 34): a listbox under the field — product name with the typed part bold, descriptor beneath, category as quiet meta on wide screens; category rows and "See all N in the A–Z" at the foot. Sibling of the form inside the anchor so the form's entrance transform never moves it; under the header (50), above the bands. */
.hf-suggest__anchor{position:relative}
/* round 138: Find with an empty field — a hint under the field (theme.js adds it), the field's border in the error colour; on the navy band the light pair */
.hf-search__hint{margin:var(--wp--custom--component--search--hint-gap) 0 0;font-size:var(--wp--preset--font-size--body-sm);line-height:1.4;color:var(--wp--preset--color--muted)}
.hf-search__hint[hidden]{display:none}
.hf-input[aria-invalid="true"]{border-color:var(--wp--custom--component--search--invalid-border)}
.hf-band--navy .hf-search__hint{color:var(--wp--custom--color--text-inverse)}
.hf-band--navy .hf-input[aria-invalid="true"]{border-color:var(--wp--custom--component--search--invalid-border-inverse);box-shadow:0 0 0 1px var(--wp--custom--component--search--invalid-border-inverse)}
.hf-suggest{position:absolute;left:0;right:0;top:100%;z-index:20;margin:4px 0 0;padding:var(--wp--custom--component--suggest--padding-y) 0;list-style:none;max-height:var(--wp--custom--component--suggest--max-height);overflow-y:auto;background:var(--wp--custom--component--suggest--bg);border:1px solid var(--wp--preset--color--rule);border-radius:var(--wp--custom--component--suggest--radius);box-shadow:var(--wp--custom--component--suggest--shadow);text-align:left}
.hf-suggest[hidden]{display:none}
.hf-suggest__row{margin:0}.hf-suggest__row a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--wp--preset--spacing--04);align-items:baseline;padding:var(--wp--custom--component--suggest--row-padding-y) var(--wp--custom--component--suggest--row-padding-x);color:var(--wp--preset--color--heading);text-decoration:none;font-size:var(--wp--preset--font-size--body)}
.hf-suggest__row a:hover,.hf-suggest__row a[aria-selected="true"]{background:var(--wp--custom--component--suggest--bg-active);text-decoration:none;color:var(--wp--preset--color--heading)}
.hf-suggest__name{font-weight:var(--wp--custom--font--weight--medium)}.hf-suggest__name mark{background:none;color:inherit;font-weight:var(--wp--custom--font--weight--semibold)}
.hf-suggest__desc{grid-column:1;font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--muted);line-height:1.4}
.hf-suggest__meta{grid-column:2;grid-row:1;font-size:var(--wp--preset--font-size--caption);color:var(--wp--custom--component--suggest--meta-color);white-space:nowrap} /* round 83: muted, not caption — axe color-contrast */
.hf-suggest__docs{grid-column:2;grid-row:2;justify-self:end;font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted);white-space:nowrap} /* TDS · SDS — which sheets the product carries (Round 35) */
.hf-suggest__row--foot{border-top:1px solid var(--wp--preset--color--rule);margin-top:var(--wp--custom--component--suggest--padding-y);padding-top:var(--wp--custom--component--suggest--padding-y)}.hf-suggest__row--foot a{display:flex;align-items:center;gap:var(--wp--custom--component--link--gap);font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--custom--component--link--color)}.hf-suggest__row--foot .hf-link__icon{width:16px;height:16px}
.hf-suggest__term a{grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--wp--custom--component--suggest--term-gap);align-items:center}.hf-suggest__term .hf-suggest__name{grid-column:2}.hf-suggest__term .hf-suggest__meta{grid-column:3}.hf-suggest__term .hf-suggest__desc{grid-column:2}
.hf-suggest__term-icon{grid-column:1;grid-row:1;align-self:center;width:var(--wp--custom--component--suggest--icon-size);height:var(--wp--custom--component--suggest--icon-size);background:var(--wp--custom--color--icon-section);-webkit-mask:var(--hf-icon) center/contain no-repeat;mask:var(--hf-icon) center/contain no-repeat}
.hf-suggest__swatch.hf-icon-tile{grid-column:1;grid-row:1;align-self:center;width:var(--wp--custom--component--suggest--icon-size);height:var(--wp--custom--component--suggest--icon-size)} /* round 127: the colour chart row's swatch tile in the term icon's place */
.hf-suggest__row a>.hf-icon-tile.hf-suggest__swatch{background:none}.hf-suggest__swatch .hf-swatch-tile__orb{inset:0} /* in the suggestions only the circle shows, at the full icon size (Gabriel) */
.hf-suggest__term--last{border-bottom:1px solid var(--wp--preset--color--rule);padding-bottom:var(--wp--custom--component--suggest--padding-y);margin-bottom:var(--wp--custom--component--suggest--padding-y)}
.hf-suggest__none{margin:0;padding:var(--wp--custom--component--suggest--row-padding-y) var(--wp--custom--component--suggest--row-padding-x);font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--muted)}.hf-suggest__none a{color:var(--wp--custom--component--link--color)}
@media (max-width:767px){.hf-suggest__meta,.hf-suggest__docs{display:none}}
/* selects: native arrow off, Lucide chevron inset by the control padding (mask → takes currentColor) */
select{appearance:none;-webkit-appearance:none;padding-right:calc(var(--wp--custom--component--control--padding-x) * 2 + 16px);background-image:none}
:root{--hf-chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")} /* the select chevron (Lucide chevron-down) as a mask — .hf-select and the phone filter dock (product-grid) */
.hf-select{position:relative;display:block}.hf-select>select{font-weight:var(--wp--custom--component--select--font-weight)} /* the closed control reads like the inputs beside it (font inherited, regular weight); the open list has its own size */.hf-select::after{content:'';position:absolute;right:var(--wp--custom--component--control--padding-x);top:50%;width:16px;height:16px;transform:translateY(-50%);pointer-events:none;background:currentColor;color:var(--wp--preset--color--muted);-webkit-mask:var(--hf-chevron) center/contain no-repeat;mask:var(--hf-chevron) center/contain no-repeat}
/* ---- enhanced select (component.select, theme.js → hychem select, Round 42): on pointer devices the native select is kept (forms, no-JS) but hidden behind a button + listbox — check on the selected row, count as meta, a Light icon where the option carries data-icon. Touch keeps the OS picker. */
.hf-select.is-custom select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.hf-select__button{display:flex;align-items:center;gap:var(--wp--custom--component--select--gap);width:100%;height:var(--wp--custom--component--control--height);padding:0 calc(var(--wp--custom--component--control--padding-x) * 2 + 16px) 0 var(--wp--custom--component--control--padding-x);font:inherit;font-weight:var(--wp--custom--component--select--font-weight);text-align:left;color:var(--wp--preset--color--heading);background:var(--wp--custom--component--card--bg);border:1px solid var(--wp--preset--color--rule);border-radius:0;cursor:pointer}
.hf-select__button.is-open,.hf-select__button:focus-visible{border-color:var(--wp--preset--color--brand-blue);outline:2px solid var(--wp--custom--color--action-focus);outline-offset:0}
.hf-select__button .hf-select__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-select__list{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0;padding:var(--wp--custom--component--select--padding-y) 0;list-style:none;max-height:var(--wp--custom--component--select--list-max-height);overflow-y:auto;background:var(--wp--custom--component--select--bg);border:1px solid var(--wp--preset--color--rule);border-radius:var(--wp--custom--component--select--radius);box-shadow:var(--wp--custom--component--select--shadow)}
.hf-select__list[hidden]{display:none}
.hf-select__option{display:grid;grid-template-columns:var(--wp--custom--component--select--check-size) minmax(0,1fr) auto;column-gap:var(--wp--custom--component--select--gap);align-items:center;padding:var(--wp--custom--component--select--row-padding-y) var(--wp--custom--component--select--row-padding-x);font-size:var(--wp--custom--component--select--font-size);font-weight:var(--wp--custom--component--select--font-weight);color:var(--wp--preset--color--heading);cursor:pointer}
.hf-select__list.has-icons .hf-select__option{grid-template-columns:var(--wp--custom--component--select--check-size) var(--wp--custom--component--select--icon-size) minmax(0,1fr) auto}
.hf-select__option.is-active{background:var(--wp--custom--component--select--bg-active)}
.hf-select__option[aria-disabled="true"]{color:var(--wp--preset--color--caption);cursor:default}.hf-select__option[aria-disabled="true"].is-active{background:none}
.hf-select__check{width:var(--wp--custom--component--select--check-size);height:var(--wp--custom--component--select--check-size);visibility:hidden;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat}
.hf-select__option[aria-selected="true"] .hf-select__check{visibility:visible}
.hf-select__icon{width:var(--wp--custom--component--select--icon-size);height:var(--wp--custom--component--select--icon-size);background:var(--wp--custom--color--icon-section);-webkit-mask:var(--hf-icon) center/contain no-repeat;mask:var(--hf-icon) center/contain no-repeat}.hf-select__option[aria-disabled="true"] .hf-select__icon{background:var(--wp--preset--color--caption)}
.hf-select__button .hf-select__icon{flex:0 0 auto}
.hf-select__count{font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--caption)}
.hf-input:focus,input:focus,select:focus,textarea:focus{border-color:var(--wp--preset--color--brand-blue);outline:2px solid var(--wp--custom--color--action-focus);outline-offset:0}
/* tables (technical data) */
.hf-table{width:100%;border-collapse:collapse;font-size:var(--wp--custom--component--table--font-size);font-variant-numeric:tabular-nums}
.hf-table th,.hf-table td{text-align:left;padding:var(--wp--custom--component--table--row-padding) 12px;border-bottom:1px solid var(--wp--preset--color--rule);vertical-align:top}
.hf-table th{font-weight:500;color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--caption);letter-spacing:.04em;text-transform:uppercase}
.hf-table tbody th{color:var(--wp--preset--color--heading);text-transform:none;letter-spacing:0;font-size:inherit;width:40%}
/* chemical-resistance tables (round 19): scroll on narrow screens, group rows, rating words carry a dot in an existing token colour */
.hf-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--wp--preset--spacing--05)}
/* a picture inside data-sheet text (round 146: the system build-up from Hychem's sheet) */
.hf-figure{margin:0 0 var(--wp--preset--spacing--05)}.hf-figure img{display:block;width:100%;height:auto}.hf-figure--narrow img{width:60%}@media (max-width:639px){.hf-figure--narrow img{width:100%}} /* a small original (round 148: Deckproof's diagram, the specification photos) */
.hf-table--chem tbody th{width:auto;white-space:nowrap;font-weight:400}.hf-table--chem td{white-space:nowrap}
.hf-table--chem .hf-table__group th{font-weight:500;color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--caption);letter-spacing:.04em;text-transform:uppercase;padding-top:var(--wp--preset--spacing--05)}
/* ratings by exposure (component.rating, Round 52): the dot takes the tier colour, the word stays body text; hychem_rating_tier() decides the tier */
.hf-rating{display:inline-flex;align-items:center;gap:var(--wp--custom--component--rating--gap);color:var(--wp--preset--color--body)}.hf-rating::before{content:"";width:var(--wp--custom--component--rating--dot-size);height:var(--wp--custom--component--rating--dot-size);border-radius:50%;background:var(--hf-rating-dot,currentColor);flex:0 0 auto}
.hf-rating--resistant{--hf-rating-dot:var(--wp--custom--component--rating--resistant)}.hf-rating--limited{--hf-rating-dot:var(--wp--custom--component--rating--limited)}.hf-rating--not{--hf-rating-dot:var(--wp--custom--component--rating--not)}
.hf-rating-key{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--02) var(--wp--preset--spacing--05);list-style:none;margin:calc(-1 * var(--wp--preset--spacing--03)) 0 var(--wp--preset--spacing--05);padding:0;font-size:var(--wp--preset--font-size--caption)}.hf-rating-key .hf-rating{color:var(--wp--preset--color--muted)}
.hf-chem__body p{max-width:var(--wp--custom--size--measure)}
/* core block tidy-ups */
.wp-block-group.is-style-band{background:var(--wp--preset--color--band);color:var(--wp--custom--color--text-inverse);padding:var(--wp--preset--spacing--10) var(--wp--custom--size--gutter);margin-inline:calc(-1 * var(--wp--custom--size--gutter))}
.wp-block-group.is-style-paper{background:var(--wp--preset--color--paper);padding:var(--wp--preset--spacing--09) var(--wp--custom--size--gutter);margin-inline:calc(-1 * var(--wp--custom--size--gutter))}
.is-style-rules{list-style:none;padding:0}.is-style-rules li{padding:12px 0;border-bottom:1px solid var(--wp--preset--color--rule)}
.wp-block-post-title a{color:inherit;text-decoration:none}.wp-block-post-title a:hover{color:var(--wp--preset--color--brand-blue)}
/* generic archive cards (news, projects) */
.hf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wp--preset--spacing--08) var(--wp--preset--spacing--06)}.hf-cards>*{margin-block-start:0!important}
.hf-card{display:grid;gap:8px;align-content:start;color:inherit}.hf-card>*{margin:0}.hf-card .wp-block-post-featured-image{margin-bottom:8px}.hf-card .wp-block-post-featured-image img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--wp--preset--color--panel)}
.hf-thumb-placeholder{width:100%;aspect-ratio:3/2;background:var(--wp--preset--color--panel);margin:0;position:relative}.hf-thumb-placeholder__link{position:absolute;inset:0}.hf-card .wp-block-post-excerpt__excerpt{margin:0;font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--body)}.hf-card .wp-block-post-excerpt__more-text{display:none}.hf-card__img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--wp--preset--color--panel)}
.hf-card__title{font-size:var(--wp--preset--font-size--card);font-weight:500;line-height:1.25;margin:0}.hf-card__meta{font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted)}
@media (max-width:1023px){.hf-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hf-section__head{grid-template-columns:1fr;gap:var(--wp--preset--spacing--04)}}
@media (max-width:639px){.hf-cards{grid-template-columns:1fr}.hf-section{padding-top:var(--wp--preset--spacing--10)}}
/* the News card, round 22 (hychem_post_card): editorial, rule-based — media · hairline · TOPIC · DATE · N MIN READ · title · standfirst · "Read article". One stretched link (the title); the topic label is a raised second link.
   Hover / focus-within = image scale(1.03) (the tile move), title brand-blue, rule to heading, foot arrow nudge. No box, no shadow, no radius. Projects archive / search still use the core card above. */
.hf-cards--post{list-style:none;margin:0;padding:0}
/* linked archive card (.hf-card--linked — Projects archive, core Query Loop blocks): the post card's behaviour on core markup — one link, the title, stretched over the card;
   hover / focus-within = image zoom 1.03, blue title, the foot's (hychem/card-link) underline + arrow nudge; focus ring on the card */
.hf-card--linked{position:relative}
.hf-card--linked .wp-block-post-featured-image{overflow:hidden}.hf-card--linked .wp-block-post-featured-image img,.hf-card--linked .hf-thumb-placeholder{transition:transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease),opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--ease)}
.hf-card--linked .hf-card__title a{color:var(--wp--preset--color--heading);text-decoration:none;transition:color var(--wp--custom--motion--fast)}.hf-card--linked .hf-card__title a::after{content:"";position:absolute;inset:0}.hf-card--linked .hf-card__title a:focus-visible{outline:none}
.hf-card--linked:has(.hf-card__title a:focus-visible){outline:2px solid var(--wp--custom--color--action-focus);outline-offset:4px}
.hf-card--linked:hover .wp-block-post-featured-image img,.hf-card--linked:focus-within .wp-block-post-featured-image img,.hf-card--linked:hover .hf-thumb-placeholder,.hf-card--linked:focus-within .hf-thumb-placeholder{transform:scale(1.03)}
.hf-card--linked:hover .hf-card__title a,.hf-card--linked:focus-within .hf-card__title a{color:var(--wp--preset--color--brand-blue)}
.hf-card--linked:hover .hf-card__foot .hf-link__label,.hf-card--linked:focus-within .hf-card__foot .hf-link__label{text-decoration-color:currentColor}.hf-card--linked:hover .hf-card__foot .hf-link__label+.hf-link__icon,.hf-card--linked:focus-within .hf-card__foot .hf-link__label+.hf-link__icon{transform:translateX(var(--wp--custom--component--link--nudge))}
.hf-card--post{position:relative;gap:var(--wp--custom--component--card--gap-tight)}
.hf-card__link{color:inherit;text-decoration:none}.hf-card__link::after{content:"";position:absolute;inset:0}.hf-card__link:focus-visible{outline:none}
.hf-card--post:has(.hf-card__link:focus-visible){outline:2px solid var(--wp--custom--color--action-focus);outline-offset:4px}
.hf-card__media{display:block;position:relative;overflow:hidden;aspect-ratio:var(--wp--custom--component--card--media-ratio);background:var(--wp--preset--color--panel);margin-bottom:var(--wp--custom--component--card--gap-tight)}
.hf-card__img{display:block;object-fit:cover}.hf-card__img,.hf-card__media .hf-thumb-placeholder{width:100%;height:100%;aspect-ratio:auto;transition:transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease),opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--ease)}
.hf-card__rule{display:block;height:var(--wp--custom--border--rule);background:var(--wp--preset--color--rule);transition:background-color var(--wp--custom--motion--fast)}
.hf-card--post .hf-card__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin:0;font-size:var(--wp--preset--font-size--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.hf-card__meta>*:not(:last-child)::after{content:"·";margin-left:8px;color:var(--wp--preset--color--caption)} /* trailing, so a wrapped row ends "12 AUG 2022 ·" rather than starting with the dot */
.hf-card__cat{position:relative;z-index:1;color:var(--wp--preset--color--heading);font-weight:500;text-decoration:none;transition:color var(--wp--custom--motion--fast)}.hf-card__cat:hover,.hf-card__cat:focus-visible{color:var(--wp--preset--color--brand-blue);text-decoration:none}
.hf-card--post .hf-card__title{color:var(--wp--preset--color--heading);transition:color var(--wp--custom--motion--fast)}
.hf-card__excerpt{margin:0;font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--body);line-height:1.45}
.hf-card__foot{padding-top:var(--wp--custom--component--card--gap-tight)}
.hf-card--post:hover .hf-card__img,.hf-card--post:focus-within .hf-card__img,.hf-card--post:hover .hf-card__media .hf-thumb-placeholder,.hf-card--post:focus-within .hf-card__media .hf-thumb-placeholder{transform:scale(1.03)}
.hf-card--post:hover .hf-card__title,.hf-card--post:focus-within .hf-card__title{color:var(--wp--preset--color--brand-blue)}
.hf-card--post:hover .hf-card__rule,.hf-card--post:focus-within .hf-card__rule{background:var(--wp--preset--color--heading)}
.hf-card--post:hover .hf-card__foot .hf-link__label,.hf-card--post:focus-within .hf-card__foot .hf-link__label{text-decoration-color:currentColor}.hf-card--post:hover .hf-card__foot .hf-link__label+.hf-link__icon,.hf-card--post:focus-within .hf-card__foot .hf-link__label+.hf-link__icon{transform:translateX(var(--wp--custom--component--link--nudge))}
/* branded placeholder (hychem_post_placeholder): floor-topcoat gradient + topic icon; shared by the News card, the core Featured Image fallback (projects, search) and related posts */
.hf-thumb-placeholder--brand{background:linear-gradient(160deg,var(--wp--preset--color--paper),var(--wp--custom--color--floor-topcoat-lit));display:grid;place-items:center;color:var(--wp--custom--color--floor-topcoat-mid)} /* light floor tone; the icon is the same family, one step darker — never blue */
.hf-thumb-placeholder__icon{opacity:1}.hf-card--lead .hf-thumb-placeholder__icon{width:56px;height:56px}
/* pagination rail (round 24; the core query-pagination blocks reshaped by admin.php): hairline · PAGE N OF M · quiet numbers · Previous / Next hf-links. Zero radius, no fills; the current page is ruled, not filled. */
.hf-pager.wp-block-query-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--wp--preset--spacing--05);margin-top:var(--wp--preset--spacing--09);padding-top:var(--wp--preset--spacing--06);border-top:var(--wp--custom--border--rule) solid var(--wp--preset--color--rule)}
.hf-pager__count{font-size:var(--wp--preset--font-size--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.hf-pager .wp-block-query-pagination-numbers{display:flex;gap:4px;margin:0}
.hf-pager .page-numbers{display:inline-grid;place-items:center;min-width:var(--wp--custom--component--control--height);height:var(--wp--custom--component--control--height);padding:0 4px;font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--muted);text-decoration:none;border-bottom:var(--wp--custom--border--rule) solid transparent;transition:color var(--wp--custom--motion--fast),border-color var(--wp--custom--motion--fast)}
.hf-pager a.page-numbers:hover,.hf-pager a.page-numbers:focus-visible{color:var(--wp--preset--color--heading)}.hf-pager a.page-numbers:focus-visible{outline:2px solid var(--wp--custom--color--action-focus);outline-offset:3px}
.hf-pager .page-numbers.current{color:var(--wp--preset--color--heading);font-weight:500;border-bottom-color:var(--wp--preset--color--heading)}.hf-pager .page-numbers.dots{color:var(--wp--preset--color--caption);min-width:24px}
.hf-pager__previous,.hf-pager__next{white-space:nowrap}.hf-pager__previous{justify-self:start;grid-column:1;grid-row:2}.hf-pager__next{justify-self:end}
.hf-pager .wp-block-query-pagination-previous,.hf-pager .wp-block-query-pagination-next{margin:0}
.hf-pager__previous:hover .hf-link__icon,.hf-pager__previous:focus-visible .hf-link__icon{transform:translateX(calc(-1 * var(--wp--custom--component--link--nudge)))} /* a leading arrow moves the other way */
.hf-pager .is-disabled{visibility:hidden}
/* desktop: count | numbers | previous + next together on the right */
@media (min-width:640px){.hf-pager.wp-block-query-pagination{grid-template-columns:1fr auto 1fr auto}.hf-pager__count{grid-column:1}.hf-pager .wp-block-query-pagination-numbers{grid-column:2}.hf-pager__previous{grid-column:3;grid-row:1;justify-self:end}.hf-pager__next{grid-column:4;grid-row:1}}
/* mobile: previous · PAGE N OF M · next on one row, the numbers centred beneath */
@media (max-width:639px){.hf-pager.wp-block-query-pagination{grid-template-columns:auto 1fr auto;row-gap:var(--wp--preset--spacing--04)}.hf-pager__count{grid-column:2;grid-row:1;text-align:center}.hf-pager__previous{grid-column:1;grid-row:1}.hf-pager__next{grid-column:3;grid-row:1}.hf-pager .wp-block-query-pagination-numbers{grid-column:1/-1;grid-row:2;justify-self:center}.hf-pager .page-numbers{min-width:40px}}
/* page header */
.hf-page-head{padding:var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--07);border-bottom:1px solid var(--wp--preset--color--rule);margin-bottom:var(--wp--preset--spacing--09)}
/* one gap under the page head's rule, site-wide: the head's margin (spacing-09) is it — the first section after it drops its own top spacing (Systems, Technical, About, term pages had 112–136px); bands keep theirs */
.hf-page-head+:is(.hf-section,.hf-apsec):not([class*="hf-band"]),.hf-page-head+.hf-fullpage>:first-child:not([class*="hf-band"]){padding-top:0;margin-top:0}
.hf-page-head h1{margin:0 0 var(--wp--preset--spacing--03)}.hf-page-head p:not(.hf-breadcrumb){max-width:64ch;color:var(--wp--preset--color--muted);margin:0} /* the standfirst; a breadcrumb paragraph keeps .hf-breadcrumb's gap to the h1 (same as the block heads' nav) */
/* measure: page copy that would otherwise run the full 1312 content box. Direct children are capped at the article column
   the project template uses, so a page of running text reads at the same width as a case study (round 48). */
.hf-measure>*{max-width:var(--wp--custom--size--article)}
.hf-breadcrumb{font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted);margin-bottom:var(--wp--preset--spacing--04)}.hf-breadcrumb a{color:inherit}
.hf-breadcrumb--inverse{color:rgba(255,255,255,.85)} /* over a picture (category head) */
/* product page */
.hf-product{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--wp--preset--spacing--10);align-items:start}
.hf-product__aside,.hf-project__aside{align-self:stretch} /* the sticky rail's containing block must span the row, or top: has no scroll range (the aside itself keeps its own height) */
@media (max-width:1023px){.hf-product{grid-template-columns:minmax(0,1fr)}.hf-product__aside{order:-1}} /* minmax(0,…): a bare 1fr let the widest content (a long word, a table) stretch the column past the phone screen — round 66 */
/* ---- featured project (home, project-feature block) — shared here, not in the block's style.css, so the class survives on pages the block is not on ---- */
.hf-feature{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--wp--preset--spacing--09);align-items:start}
.hf-feature__img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--wp--preset--color--panel)}
.hf-feature__title{font-size:var(--wp--preset--font-size--h-2);margin:0 0 var(--wp--preset--spacing--04)}.hf-feature__title a{color:inherit;text-decoration:none;transition:color var(--wp--custom--motion--fast)}
/* linked hover: the photo, the title or "See the project" plays one effect — image zoom (the .hf-projcard value), blue title, CTA underline + arrow nudge. The zoom sits on a wrapper: the img's own transform belongs to the parallax (GSAP), and the anchor is the clip box. The Systems link in the facts keeps its own hover. */
.hf-feature__media{display:block;overflow:clip}.hf-feature__zoom{display:block;transition:transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease)}
.hf-feature:has(.hf-feature__media:hover,.hf-feature__title a:hover,.hf-feature__title a:focus-visible,.hf-feature__body>.hf-link:hover,.hf-feature__body>.hf-link:focus-visible) .hf-feature__zoom{transform:scale(1.03)}
.hf-feature:has(.hf-feature__media:hover,.hf-feature__title a:hover,.hf-feature__title a:focus-visible,.hf-feature__body>.hf-link:hover,.hf-feature__body>.hf-link:focus-visible) .hf-feature__title a{color:var(--wp--preset--color--brand-blue)}
.hf-feature:has(.hf-feature__media:hover,.hf-feature__title a:hover,.hf-feature__title a:focus-visible) .hf-feature__body>.hf-link .hf-link__label{text-decoration-color:currentColor}
.hf-feature:has(.hf-feature__media:hover,.hf-feature__title a:hover,.hf-feature__title a:focus-visible) .hf-feature__body>.hf-link .hf-link__icon{transform:translateX(var(--wp--custom--component--link--nudge))}
@media (prefers-reduced-motion:reduce){.hf-feature__zoom{transition:none;transform:none!important}}
.hf-feature__excerpt{margin:0 0 var(--wp--preset--spacing--06)}
@media (max-width:1023px){.hf-feature{grid-template-columns:1fr}}
/* ---- project card (component.project-card): "Specified on" under a product. Image flush left, text padded and centred, one stretched link (the title); hover = border to heading, paper bg, image scale, title + cue to blue. Built by blocks/related-project. ---- */
.hf-projcard{position:relative;display:grid;grid-template-columns:var(--wp--custom--component--project-card--media-span) var(--wp--custom--component--project-card--body-span);border:var(--wp--custom--border--rule) solid var(--wp--custom--component--project-card--border);background:var(--wp--custom--component--project-card--bg);overflow:hidden;margin-bottom:var(--wp--custom--component--section--padding);transition:border-color var(--wp--custom--motion--fast),background-color var(--wp--custom--motion--fast)}
.hf-section.hf-projcard{padding-top:0;margin-top:var(--wp--custom--component--section--padding)} /* the section rhythm as margins, so the border hugs the card */
.hf-projcard:hover,.hf-projcard:focus-within{border-color:var(--wp--custom--component--project-card--border-hover);background:var(--wp--custom--component--project-card--bg-hover)}
.hf-projcard:has(.hf-projcard__title a:focus-visible){box-shadow:0 0 0 2px var(--wp--custom--color--action-focus)}.hf-projcard__title a:focus-visible{outline:none}
.hf-projcard__media{background:var(--wp--preset--color--panel);overflow:hidden;min-height:100%}
.hf-projcard__img{width:100%;height:100%;aspect-ratio:var(--wp--custom--component--project-card--media-ratio);object-fit:cover;display:block;transition:transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease)}
.hf-projcard:hover .hf-projcard__img,.hf-projcard:focus-within .hf-projcard__img{transform:scale(1.03)}
.hf-projcard__body{display:grid;align-content:center;gap:var(--wp--custom--component--project-card--gap);padding:var(--wp--custom--component--project-card--padding)}
.hf-projcard__body .hf-eyebrow{margin:0}
.hf-projcard__title{font-size:var(--wp--preset--font-size--h-3);margin:0}.hf-projcard__title a{color:var(--wp--preset--color--heading);text-decoration:none;transition:color var(--wp--custom--motion--fast)}.hf-projcard__title a::after{content:"";position:absolute;inset:0}
.hf-projcard__excerpt{margin:0;max-width:var(--wp--custom--size--measure)}
.hf-projcard__cta{color:var(--wp--custom--component--link--color)}
.hf-projcard:hover .hf-projcard__title a,.hf-projcard:focus-within .hf-projcard__title a{color:var(--wp--preset--color--brand-blue)}
.hf-projcard:hover .hf-projcard__cta .hf-link__label{text-decoration-color:currentColor}.hf-projcard:hover .hf-projcard__cta .hf-link__icon{transform:translateX(var(--wp--custom--component--link--nudge))}
@media (max-width:1023px){.hf-projcard{grid-template-columns:1fr}.hf-projcard__img{height:auto}.hf-projcard__body{padding:var(--wp--custom--component--project-card--padding-mobile)}}
/* technical + contact + project pages */
.hf-lead{font-size:var(--wp--preset--font-size--lead);color:var(--wp--preset--color--body);max-width:60ch}
.hf-contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--wp--preset--spacing--11);align-items:start;padding-bottom:var(--wp--preset--spacing--11)}
.hf-contact__aside{display:grid;gap:var(--wp--preset--spacing--08)}.hf-contact__aside .hf-callout{padding:var(--wp--preset--spacing--06);background:var(--wp--preset--color--paper)}.hf-contact__aside .hf-callout h2{font-size:var(--wp--preset--font-size--h-3);margin:0 0 8px}
@media (max-width:1023px){.hf-contact{grid-template-columns:1fr;gap:var(--wp--preset--spacing--09)}}
/* inline links in running text are underlined (WCAG 1.4.1 — not colour alone); navigation, cards and buttons opt out via their own classes */
.entry-content p a:not(.hf-button):not(.hf-link):not(.hf-chip):not(.hf-card__cat):not([class*="wp-block-hychem-"] a),.entry-content li a:not(.hf-button):not(.hf-link):not(.hf-chip):not(.hf-card a):not([class*="wp-block-hychem-"] a),.wp-block-paragraph a:not(.hf-button):not(.hf-link):not(.hf-chip),.hf-office p a:not(.hf-link),.hf-callout p a{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px} /* round 67: prose links only — a Hychem block placed in page content (the industry cards, product and post cards on the office pages) keeps its own component styling, as it looks on the home page */
/* a component's own links keep their designed state when the block sits inside page content (the SDS page holds the data-sheet index in its content, the TDS page in the template) */
.entry-content .hf-dsindex__rail li a:not(.hf-button):not(.hf-link),.entry-content .hf-dsindex__link:not(.hf-button):not(.hf-link):not(.hf-chip){text-decoration:none} /* the empty-state "Ask us for the sheet" is running text and stays underlined */
/* project (case study): 68ch measure beside a sticky facts rail */
.hf-project{display:grid;grid-template-columns:minmax(0,var(--wp--custom--size--article)) 360px;justify-content:space-between;gap:var(--wp--preset--spacing--10);align-items:start;padding-top:var(--wp--preset--spacing--09)} /* the main column is the article width: text, stats and quote share one edge */
.hf-project__main h2{font-size:var(--wp--preset--font-size--h-3);margin:var(--wp--preset--spacing--07) 0 var(--wp--preset--spacing--03)}
/* fact lists — shared by project-feature (home) and project-facts (project page), so they live here */
.hf-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--wp--preset--spacing--04) var(--wp--preset--spacing--06);margin:0 0 var(--wp--preset--spacing--06);padding-top:var(--wp--preset--spacing--04);border-top:1px solid var(--wp--preset--color--rule)}
.hf-facts dt{font-size:var(--wp--preset--font-size--caption);text-transform:uppercase;letter-spacing:.06em;color:var(--wp--preset--color--muted)}.hf-facts dd{margin:2px 0 0;font-size:var(--wp--preset--font-size--body-sm)}
.hf-facts--stacked{grid-template-columns:1fr}.hf-facts dd .hf-chips{margin-top:4px}
@media (max-width:1023px){.hf-project{grid-template-columns:1fr;gap:var(--wp--preset--spacing--07)}} /* stacked in DOM order: head → write-up → facts card (round 98 — order:-1 had put the ~750px card above the h1 and out of step with focus order) */

/* ---- chips & badges (round 14) — one component, loaded everywhere. Chips are term links: quiet outline at rest, blue tint on hover/selected, brand blue when a selected chip is about to be removed. Tokens: component.chip / component.badge. ---- */
.hf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp--custom--component--chip--gap)}
.hf-chips__label{font-size:var(--wp--preset--font-size--caption);text-transform:uppercase;letter-spacing:.05em;color:var(--wp--preset--color--muted);margin-right:var(--wp--preset--spacing--01)}
.hf-chip{display:inline-flex;align-items:center;gap:6px;height:var(--wp--custom--component--chip--height);padding:0 var(--wp--custom--component--chip--padding-x);border:1px solid var(--wp--custom--component--chip--border);border-radius:var(--wp--custom--component--chip--radius);background:var(--wp--custom--component--chip--bg);color:var(--wp--custom--component--chip--fg);font-size:var(--wp--custom--component--chip--font-size);font-weight:var(--wp--custom--component--chip--font-weight);line-height:1;text-decoration:none;white-space:nowrap;transition:background-color var(--wp--custom--motion--fast),color var(--wp--custom--motion--fast),border-color var(--wp--custom--motion--fast)}
.hf-chip:hover,.hf-chip:focus-visible{background:var(--wp--custom--component--chip--bg-hover);border-color:transparent;color:var(--wp--custom--component--chip--fg-hover);text-decoration:none}
.hf-chip--inverse{background:transparent;border-color:var(--wp--custom--component--chip--inverse-border);color:var(--wp--custom--component--chip--inverse-fg)}.hf-chip--inverse:hover,.hf-chip--inverse:focus-visible{background:var(--wp--custom--component--chip--inverse-bg-hover);border-color:transparent;color:var(--wp--custom--component--chip--inverse-fg)}
.hf-chip:focus-visible{outline:2px solid var(--wp--custom--color--action-focus);outline-offset:2px}
.hf-chip--active{background:var(--wp--custom--component--chip--bg-hover);border-color:transparent;color:var(--wp--custom--component--chip--fg-hover)}
.hf-chip--active .hf-icon{width:14px;height:14px;margin-right:-2px}
.hf-chip--active:hover,.hf-chip--active:focus-visible{background:var(--wp--custom--component--chip--bg-selected-hover);color:var(--wp--custom--component--chip--fg-selected-hover)}
/* chip lists (round 112, hychem_link_chips): a run of links as one chip each instead of commas. Phones: 36px targets, same 8px gap. A list with a limit starts collapsed ([data-collapsed]); theme.js flips it from the "+N more" button, which ships hidden (no JS = all chips, via a <noscript> rule in the markup). */
.hf-chips--list{list-style:none;margin:0;padding:0}.hf-chips--list>li{display:flex;margin:0;min-width:0;max-width:100%}
.hf-chips--list .hf-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hf-chips--list[data-collapsed]>li[data-extra]{display:none}
.hf-chips__more{font-family:inherit;cursor:pointer;border-style:dashed;color:var(--wp--preset--color--brand-blue)}.hf-chips__more[hidden]{display:none}
.hf-chips__more-item:has(>[hidden]){display:none}
@media (max-width:639px){.hf-chips--list .hf-chip{height:auto;min-height:36px}} /* one chip size site-wide: the Round 114 small variant was removed in Round 141 (too small to tap on phones) */
.hf-badge{display:inline-block;font-size:var(--wp--preset--font-size--caption);font-weight:500;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--wp--preset--color--muted);border:1px solid var(--wp--preset--color--rule);border-radius:var(--wp--custom--component--badge--radius);padding:var(--wp--custom--component--badge--padding);white-space:nowrap}
.hf-badge--solid{background:var(--wp--preset--color--brand-blue);border-color:transparent;color:var(--wp--preset--color--white)}
.hf-badge--muted{background:var(--wp--preset--color--panel);border-color:transparent}
/* ---- notice (component.notice): tinted box, left rule + icon in the tone colour, text in body/heading colours, links in link blue. Tones read color.status.*. Built by hychem_notice() / the hychem/notice block; [data-hf-dismiss] hides it (theme.js, no persistence). ---- */
.hf-notice{--hf-notice-fg:var(--wp--custom--color--status-info-fg);--hf-notice-bg:var(--wp--custom--color--status-info-bg);display:flex;align-items:flex-start;gap:var(--wp--custom--component--notice--gap);padding:var(--wp--custom--component--notice--padding-y) var(--wp--custom--component--notice--padding-x);background:var(--hf-notice-bg);border-left:var(--wp--custom--component--notice--rule) solid var(--hf-notice-fg);border-radius:var(--wp--custom--component--notice--radius);color:var(--wp--preset--color--body);font-size:var(--wp--custom--component--notice--font-size);line-height:1.45}
.hf-notice--success{--hf-notice-fg:var(--wp--custom--color--status-success-fg);--hf-notice-bg:var(--wp--custom--color--status-success-bg)}.hf-notice--warning{--hf-notice-fg:var(--wp--custom--color--status-warning-fg);--hf-notice-bg:var(--wp--custom--color--status-warning-bg)}.hf-notice--error{--hf-notice-fg:var(--wp--custom--color--status-error-fg);--hf-notice-bg:var(--wp--custom--color--status-error-bg)}
.hf-notice__icon{flex:0 0 auto;display:inline-flex;margin-top:1px;color:var(--hf-notice-fg)}.hf-notice__icon .hf-icon{width:var(--wp--custom--component--notice--icon-size);height:var(--wp--custom--component--notice--icon-size)}
.hf-notice__body{flex:1 1 auto;min-width:0}.hf-notice__title{margin:0 0 2px;font-weight:var(--wp--custom--component--notice--title-weight);color:var(--wp--preset--color--heading)}.hf-notice__text{margin:0}.hf-notice__text strong{font-weight:var(--wp--custom--component--notice--title-weight);color:var(--wp--preset--color--heading)}
.hf-notice__text a{color:var(--wp--preset--color--brand-blue);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}.hf-notice__text a:hover{color:var(--wp--preset--color--brand-blue-deep)}
.hf-notice__close{flex:0 0 auto;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -8px -4px auto;padding:0;border:0;background:none;color:var(--wp--preset--color--muted);cursor:pointer;border-radius:var(--wp--custom--radius--small);transition:color var(--wp--custom--motion--fast)}.hf-notice__close:hover{color:var(--wp--preset--color--heading)}
.hf-notice[hidden]{display:none}.hf-notice+.hf-notice{margin-top:var(--wp--preset--spacing--03)}
.wp-block-hychem-notice{margin:var(--wp--preset--spacing--05) 0}.hf-enquiry .hf-notice{margin:0 0 var(--wp--preset--spacing--06)}
/* product cards — one card site-wide (product-grid, project-systems, works-with). One link = the whole card (stretched ::after); the data sheet is a second, quiet link in the foot row. Tokens: component.card. */
/* cards carry their own hairline (box-shadow) so an incomplete last row leaves plain white, not a grey block */
.hf-pgrid__list{list-style:none;margin:0;padding:1px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px}
/* Round 116: industry pages — one grid with a system tab row (the search tabs' chip links) and the system as a small label on each card; the
   categories that suit every industry follow as link cards (the industry finder's card, shared from here) */
.hf-pgrid__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--wp--preset--spacing--04)}
.hf-pgrid__tab-n{color:var(--wp--preset--color--muted);margin-left:2px}.hf-chip--active .hf-pgrid__tab-n{color:inherit}
.hf-pcard.hf-pcard--system{grid-template-rows:auto auto 1fr auto auto} /* the label is one more row above the title; the descriptor row still takes the slack */
.hf-pcard__system{font-size:var(--wp--preset--font-size--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--wp--preset--color--muted);line-height:1.3;margin-bottom:calc(-1 * var(--wp--custom--component--card--gap) + var(--wp--custom--component--card--gap-tight))}
.hf-pgrid__every{margin-top:var(--wp--preset--spacing--10)} /* Round 136: a section of its own under the grid — 64px, the spec panels' gap-before (was 32) */
@media (max-width:639px){.hf-pgrid__every{margin-top:var(--wp--preset--spacing--09)}}
.hf-pgrid__every-title{font-size:var(--wp--preset--font-size--h-3);margin:0 0 var(--wp--preset--spacing--04)}
.hf-pgrid__every-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--wp--custom--component--industry-finder--gap)} /* the home industry finder's grid: 4 / 2 */
.hf-pgrid__every-list>li{display:flex}
@media (max-width:1023px){.hf-pgrid__every-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hf-industries__card{flex:1;display:grid;grid-template-columns:auto auto;grid-template-rows:auto 1fr;justify-content:space-between;align-items:start;row-gap:var(--wp--preset--spacing--06);min-height:var(--wp--custom--component--industry-finder--card-min-height);padding:var(--wp--custom--component--industry-finder--card-padding);background:var(--wp--custom--component--industry-finder--card-bg);border:1px solid var(--wp--custom--component--industry-finder--card-border);border-radius:var(--wp--custom--component--industry-finder--radius);color:var(--wp--preset--color--heading);text-decoration:none;transition:border-color var(--wp--custom--motion--fast)}
.hf-industries__card:hover,.hf-industries__card:focus-visible{border-color:var(--wp--custom--component--industry-finder--card-border-hover);color:var(--wp--preset--color--heading);text-decoration:none}
.hf-industries__card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--wp--custom--color--action-focus)}
.hf-industries__go{justify-self:end;align-self:center;color:var(--wp--custom--component--industry-finder--arrow);transition:color var(--wp--custom--motion--fast),transform var(--wp--custom--motion--fast)}
.hf-industries__card:hover .hf-industries__go,.hf-industries__card:focus-visible .hf-industries__go{color:var(--wp--preset--color--heading);transform:translateX(var(--wp--custom--component--link--nudge))}
.hf-industries__text{grid-column:1 / -1;align-self:end;display:grid;gap:2px;min-width:0}
.hf-industries__name{font-size:var(--wp--preset--font-size--card);font-weight:500;line-height:1.3;transition:color var(--wp--custom--motion--fast)}
.hf-industries__card:hover .hf-industries__name,.hf-industries__card:focus-visible .hf-industries__name{color:var(--wp--preset--color--brand-blue)}
.hf-industries__count{font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted)}
@media (max-width:639px){.hf-industries__card{min-height:var(--wp--custom--component--industry-finder--card-min-height-small);padding:var(--wp--preset--spacing--05);row-gap:var(--wp--preset--spacing--04)}}
.hf-pgrid__note{margin:var(--wp--preset--spacing--02) 0 var(--wp--preset--spacing--04);font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--muted)}
.hf-pcard{background:var(--wp--custom--component--card--bg-product);box-shadow:0 0 0 1px var(--wp--preset--color--rule);padding:var(--wp--custom--component--card--padding);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto auto;gap:var(--wp--custom--component--card--gap) 12px;min-height:200px;position:relative;transition:background-color var(--wp--custom--motion--fast)} /* rows: title · descriptor (flexes) · chips · foot row (View system | Data sheet) */
.hf-pcard>*,.hf-pcard__link>*{grid-column:1/-1}
.hf-pcard:hover,.hf-pcard:focus-within{background:var(--wp--custom--component--card--bg-hover)}
.hf-pcard:has(.hf-pcard__link:focus-visible){box-shadow:0 0 0 2px var(--wp--custom--color--action-focus)}
.hf-pcard__link{display:contents;color:inherit;text-decoration:none}.hf-pcard__link::after{content:"";position:absolute;inset:0}
.hf-pcard__title{font-size:var(--wp--preset--font-size--card);font-weight:500;line-height:1.25;display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--wp--preset--color--heading);transition:color var(--wp--custom--motion--fast)}.hf-pcard:hover .hf-pcard__title,.hf-pcard:focus-within .hf-pcard__title{color:var(--wp--preset--color--brand-blue)}
.hf-pcard__desc{font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--body);line-height:1.45;margin-top:calc(-1 * var(--wp--custom--component--card--gap) + var(--wp--custom--component--card--gap-tight))} /* title + descriptor read as one unit */
.hf-pcard__chips{position:relative;z-index:1;order:5}
.hf-pcard__cta,.hf-pcard__tds{order:10;align-self:end;padding-top:var(--wp--custom--component--card--gap-tight);white-space:nowrap} /* both are hf-link--small; the CTA's hover comes from the card (paper) — mirrored below */
.hf-pcard__cta{grid-column:1}
.hf-pcard__cta,.hf-pcard__tds{grid-row:-2} /* Round 116: the foot sits on the last row even when a card has no chips (it rose a row and broke the line-up) */
.hf-pcard:hover .hf-pcard__cta .hf-link__label,.hf-pcard:focus-within .hf-pcard__cta .hf-link__label{text-decoration-color:currentColor}.hf-pcard:hover .hf-pcard__cta .hf-link__icon,.hf-pcard:focus-within .hf-pcard__cta .hf-link__icon{transform:translateX(var(--wp--custom--component--link--nudge))}
.hf-pcard__tds{grid-column:2;justify-self:end;position:relative;z-index:1;transition:color var(--wp--custom--motion--fast)}
@media (max-width:1023px){.hf-pgrid__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.hf-pgrid__list{grid-template-columns:1fr}}
.hf-termchips{margin-top:var(--wp--preset--spacing--07)}
/* ---- article page (round 18): one reading column (size.article); head, image, body, terms all sit in it ---- */
.hf-article__head{padding:var(--wp--preset--spacing--09) 0 var(--wp--preset--spacing--06);border-bottom:1px solid var(--wp--preset--color--rule);margin-bottom:var(--wp--preset--spacing--07)}
.hf-article__title{font-size:var(--wp--preset--font-size--h-1);line-height:1.15;letter-spacing:var(--wp--custom--font--letter-spacing--h1);margin:0 0 var(--wp--preset--spacing--04);text-wrap:balance}
.hf-article__standfirst{font-size:var(--wp--preset--font-size--lead);line-height:1.45;color:var(--wp--preset--color--muted);max-width:64ch;margin:0 0 var(--wp--preset--spacing--05)}
.hf-article__meta{font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted);margin:0}
.hf-article__image{margin:0 0 var(--wp--preset--spacing--07)}.hf-article__image img{width:100%;display:block;background:var(--wp--preset--color--panel)}
.hf-article .wp-block-post-content{font-size:var(--wp--preset--font-size--body);line-height:1.6}
.hf-article .wp-block-post-content>*{margin-block-start:0}
.hf-article .wp-block-post-content p,.hf-article .wp-block-post-content ul,.hf-article .wp-block-post-content ol{margin:0 0 var(--wp--preset--spacing--05)}
.hf-article .wp-block-post-content h2{font-size:var(--wp--preset--font-size--h-3);font-weight:500;line-height:1.25;margin:var(--wp--preset--spacing--07) 0 var(--wp--preset--spacing--03)}
.hf-article .wp-block-post-content h3,.hf-article .wp-block-post-content h4{font-size:var(--wp--preset--font-size--card);font-weight:500;line-height:1.3;margin:var(--wp--preset--spacing--06) 0 var(--wp--preset--spacing--03)}
.hf-article .wp-block-post-content ul,.hf-article .wp-block-post-content ol{padding-left:1.2em}.hf-article .wp-block-post-content li{margin-bottom:6px}
.hf-article .wp-block-post-content img{max-width:100%;height:auto}.hf-article .wp-block-post-content figure{margin:0 0 var(--wp--preset--spacing--06)}
.hf-article .hf-termchips{margin-top:var(--wp--preset--spacing--07);padding-top:var(--wp--preset--spacing--05);border-top:1px solid var(--wp--custom--color--border-soft)} /* round 130: the light rule, the same as the share row's under it (Gabriel) */
/* ---- project page (round 20): image-only hero, head in the main column so the facts rail starts level with the title ---- */
.hf-project__head{padding-bottom:var(--wp--preset--spacing--06);margin-bottom:var(--wp--preset--spacing--07);border-bottom:1px solid var(--wp--preset--color--rule)}
.hf-project__title{font-size:var(--wp--preset--font-size--h-1);line-height:1.15;letter-spacing:var(--wp--custom--font--letter-spacing--h1);margin:0 0 var(--wp--preset--spacing--03);max-width:var(--wp--custom--size--measure);text-wrap:balance}
.hf-project__meta{margin:0 0 var(--wp--preset--spacing--05);font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--muted)}
.hf-project__statement{font-size:var(--wp--preset--font-size--lead);line-height:1.45;margin:0;color:var(--wp--preset--color--body);max-width:var(--wp--custom--size--measure)}
/* stats: 2×2 paper panels, Light icon, light-weight figure, caption label */
.hf-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wp--preset--spacing--04);list-style:none;margin:var(--wp--preset--spacing--07) 0;padding:0}
.hf-stats li{display:grid;gap:6px;padding:var(--wp--custom--component--card--padding);background:var(--wp--preset--color--paper);border-radius:var(--wp--custom--radius--medium)}
.hf-stats__icon{color:var(--wp--custom--color--icon-section);margin-bottom:6px}
.hf-stats strong{display:block;font-size:var(--wp--preset--font-size--h-2);font-weight:400;line-height:1.1;letter-spacing:-.01em;color:var(--wp--preset--color--heading);font-variant-numeric:tabular-nums}.hf-stats span{font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--muted);line-height:1.4}
.hf-stats--row{grid-template-columns:repeat(4,minmax(0,1fr))} /* four across where the row has the full content width (About); the base stays 2×2 for the project column */
@media (max-width:1023px){.hf-stats--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.hf-stats{grid-template-columns:1fr}.hf-stats--row{grid-template-columns:1fr}}
/* pull quote (round 20; opt-in since round 28 — hf-pullquote on classic HTML, the "Pull quote" block style in the editor): paper panel, sand opening mark, light h-2 quote, name + role with a short sand rule */
.hf-pullquote,.wp-block-quote.is-style-pullquote{margin:var(--wp--preset--spacing--08) 0;padding:var(--wp--preset--spacing--07);background:var(--wp--preset--color--paper);border:0;border-radius:var(--wp--custom--radius--medium)}
.hf-pullquote::before,.wp-block-quote.is-style-pullquote::before{content:"\201C";display:block;font-size:calc(var(--wp--preset--font-size--display) * 1.25);line-height:.55;height:.5em;color:var(--wp--custom--color--icon-duotone-accent);font-weight:400;margin-bottom:var(--wp--preset--spacing--04)}
.hf-pullquote p,.wp-block-quote.is-style-pullquote p{font-size:var(--wp--preset--font-size--h-2);font-weight:400;line-height:1.3;letter-spacing:-.01em;margin:0 0 var(--wp--preset--spacing--05);color:var(--wp--preset--color--heading);max-width:var(--wp--custom--size--measure);text-wrap:balance}
.hf-pullquote cite,.wp-block-quote.is-style-pullquote cite{display:block;font-style:normal;font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted);padding-top:var(--wp--preset--spacing--03);position:relative}
.hf-pullquote cite::before,.wp-block-quote.is-style-pullquote cite::before{content:"";display:block;width:24px;height:2px;background:var(--wp--custom--color--icon-duotone-accent);margin-bottom:var(--wp--preset--spacing--03)}
.hf-pullquote cite strong,.wp-block-quote.is-style-pullquote cite strong{display:block;font-weight:500;color:var(--wp--preset--color--heading);font-size:var(--wp--preset--font-size--body-sm)}
.hf-cta-p{margin:var(--wp--preset--spacing--07) 0 0} /* the button paragraph under a section (see render_block_core/paragraph in hychem-core) */
/* ---- article prose (round 28, tokens component.prose): the reading column's furniture. Global selectors first (block styles and patterns must preview in the editor, where .hf-article does not exist); the reading-column rules follow. ---- */
/* key takeaways: paper panel after the lead — eyebrow + a short list (pattern hychem/post-key-takeaways) */
.hf-takeaways{background:var(--wp--custom--component--prose--takeaways-bg);border-radius:var(--wp--custom--radius--medium);padding:var(--wp--custom--component--prose--takeaways-padding);margin:var(--wp--preset--spacing--07) 0}
.hf-takeaways>*{margin-block-start:0}.hf-takeaways .hf-eyebrow,.hf-article .wp-block-post-content .hf-takeaways .hf-eyebrow{margin:0 0 var(--wp--preset--spacing--03)}
.hf-takeaways ul,.hf-article .wp-block-post-content .hf-takeaways ul{margin:0;padding-left:1.2em}.hf-takeaways li{margin-bottom:6px}.hf-takeaways li:last-child{margin-bottom:0}.hf-takeaways li::marker{color:var(--wp--custom--component--prose--marker-color)}
/* steps: a large caption-grey numeral (h-2 / 400 / tabular) beside a bold step title (Sana pattern). Inline column below 1024px; in the left margin inside the article above it. */
.wp-block-list.is-style-steps{list-style:none;padding:0;margin:var(--wp--preset--spacing--07) 0;counter-reset:hf-step}
.wp-block-list.is-style-steps li{position:relative;padding-left:var(--wp--custom--component--prose--numeral-col);margin:0 0 var(--wp--preset--spacing--05);counter-increment:hf-step}
.wp-block-list.is-style-steps li::before{content:counter(hf-step,decimal-leading-zero);position:absolute;left:0;top:-.06em;font-size:var(--wp--preset--font-size--h-2);font-weight:400;line-height:1;letter-spacing:-.01em;color:var(--wp--custom--component--prose--numeral-color);font-variant-numeric:tabular-nums}
.wp-block-list.is-style-steps li>strong:first-child{display:block;font-weight:500;color:var(--wp--preset--color--heading);margin-bottom:4px}
/* checks: the Lucide check as a mask (the .hf-select chevron idiom) in the duotone blue */
.wp-block-list.is-style-checks{list-style:none;padding:0}
.wp-block-list.is-style-checks li{position:relative;padding-left:calc(var(--wp--custom--component--prose--check-size) + var(--wp--preset--spacing--03))}
.wp-block-list.is-style-checks li::before{content:"";position:absolute;left:0;top:.2em;width:var(--wp--custom--component--prose--check-size);height:var(--wp--custom--component--prose--check-size);background:currentColor;color:var(--wp--custom--component--prose--check-color);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat}
/* numbered heading (h2.hf-numbered[data-n], from an <ol> used as a heading): the numeral reads before the title, in the margin at ≥ 1024px; kept out of the accessible name */
.hf-numbered{position:relative}
.hf-numbered::before{content:attr(data-n) / "";display:inline-block;margin-right:var(--wp--preset--spacing--03);font-size:var(--wp--preset--font-size--h-2);font-weight:400;line-height:1;letter-spacing:-.01em;color:var(--wp--custom--component--prose--numeral-color);font-variant-numeric:tabular-nums;vertical-align:baseline}
/* reading column */
.hf-article .wp-block-post-content .hf-lead{font-size:var(--wp--preset--font-size--lead);line-height:1.5;color:var(--wp--preset--color--body);max-width:none;margin:0 0 var(--wp--preset--spacing--06)}
.hf-article .wp-block-post-content blockquote:not(.hf-pullquote):not(.is-style-pullquote){margin:var(--wp--preset--spacing--07) 0;padding:0 0 0 var(--wp--custom--component--prose--quote-inset);border:0;border-left:var(--wp--custom--component--prose--quote-rule) solid var(--wp--custom--component--prose--quote-rule-color);background:none;border-radius:0}
.hf-article .wp-block-post-content blockquote:not(.hf-pullquote):not(.is-style-pullquote) p{font-size:var(--wp--preset--font-size--lead);line-height:1.45;color:var(--wp--preset--color--body);margin:0 0 var(--wp--preset--spacing--03)}
.hf-article .wp-block-post-content blockquote:not(.hf-pullquote):not(.is-style-pullquote) cite{display:block;font-style:normal;font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted)}
.hf-article .wp-block-post-content blockquote:not(.hf-pullquote):not(.is-style-pullquote) cite strong{font-weight:500;color:var(--wp--preset--color--heading)}.hf-article .wp-block-post-content blockquote:not(.hf-pullquote):not(.is-style-pullquote) cite strong::after{content:" · "}
.hf-article .wp-block-post-content ol{padding-left:1.6em}.hf-article .wp-block-post-content ol>li::marker{color:var(--wp--custom--component--prose--marker-color);font-weight:500;font-variant-numeric:tabular-nums}.hf-article .wp-block-post-content ul>li::marker{color:var(--wp--custom--component--prose--marker-color)}
.hf-article .wp-block-post-content strong,.hf-article .wp-block-post-content b{font-weight:500;color:var(--wp--preset--color--heading)}
.hf-article .wp-block-post-content hr{border:0;border-top:var(--wp--custom--border--rule) solid var(--wp--preset--color--rule);margin:var(--wp--preset--spacing--08) 0}
.hf-article .wp-block-post-content figcaption,.hf-article .wp-block-post-content .wp-caption-text{font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted);margin:var(--wp--preset--spacing--02) 0 0;text-align:left}
/* old-site inline images ([caption] and bare img.alignleft/right, 300px mediums): stacked at column width below 640px, floated beside the text above it — never stretched to the column, they would blur */
.hf-article .wp-block-post-content .wp-caption{max-width:100%;width:auto!important;margin:0 0 var(--wp--preset--spacing--06)}.hf-article .wp-block-post-content .wp-caption img{display:block}
.hf-article .wp-block-post-content img.alignleft,.hf-article .wp-block-post-content img.alignright,.hf-article .wp-block-post-content .wp-caption.alignleft,.hf-article .wp-block-post-content .wp-caption.alignright{display:block;float:none;margin:0 0 var(--wp--preset--spacing--05)}
@media (min-width:640px){
.hf-article .wp-block-post-content img.alignright,.hf-article .wp-block-post-content .wp-caption.alignright{float:right;max-width:50%;margin:6px 0 var(--wp--preset--spacing--05) var(--wp--preset--spacing--06)}
.hf-article .wp-block-post-content img.alignleft,.hf-article .wp-block-post-content .wp-caption.alignleft{float:left;max-width:50%;margin:6px var(--wp--preset--spacing--06) var(--wp--preset--spacing--05) 0}
.hf-article .wp-block-post-content .wp-caption.alignright,.hf-article .wp-block-post-content .wp-caption.alignleft{width:auto!important}
}
.hf-article .wp-block-post-content .hf-table-wrap,.hf-article .wp-block-post-content blockquote,.hf-article .wp-block-post-content .hf-takeaways,.hf-article .wp-block-post-content .hf-numbered{clear:both} /* headings and text flow beside a floated image; panels and tables never do */
/* prose tables (inc/prose.php adds hf-table hf-table--prose + the scroll wrapper): panel-tinted uppercase thead, caption above, group rows as in the chemical tables */
.hf-article .wp-block-post-content .hf-table-wrap{margin:0 0 var(--wp--preset--spacing--06)}
.hf-table--prose thead th{background:var(--wp--custom--component--prose--table-head-bg);color:var(--wp--preset--color--body);white-space:normal;vertical-align:bottom} /* body colour on the tint — muted fails 4.5:1 there */.hf-table--prose thead th[rowspan]{vertical-align:bottom}
.hf-table--prose .hf-table__group th{font-weight:500;color:var(--wp--preset--color--muted);font-size:var(--wp--preset--font-size--caption);letter-spacing:.04em;text-transform:uppercase;padding-top:var(--wp--preset--spacing--05)}
.hf-table--prose tbody th{width:auto;font-weight:400}.hf-table--prose td{color:var(--wp--preset--color--body)}
.wp-block-table.hf-table-wrap{margin:0 0 var(--wp--preset--spacing--06)}.wp-block-table.hf-table-wrap table{border-collapse:collapse}.wp-block-table.hf-table-wrap th,.wp-block-table.hf-table-wrap td{border:0;border-bottom:1px solid var(--wp--preset--color--rule)}.wp-block-table.hf-table-wrap thead,.wp-block-table.hf-table-wrap tfoot{border:0}.wp-block-table.hf-table-wrap th,.wp-block-table.hf-table-wrap td{text-align:left;vertical-align:top;padding:var(--wp--custom--component--table--row-padding-loose) var(--wp--custom--component--table--cell-padding-x)} /* round 67: headings on the cells' left edge (core centred them), more air in the rows */.wp-block-table.hf-table-wrap figcaption{margin:var(--wp--preset--spacing--02) 0 0;text-align:left} /* the table block: core's wp-block-styles cell borders off, hairlines only */
.hf-table.hf-table--prose caption{text-transform:none;letter-spacing:0;font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--muted);padding-bottom:10px} /* prose captions are sentences, not labels */
/* lists under the article rhythm: the steps and checks styles keep their own left edge */
.hf-article .wp-block-post-content .is-style-steps,.hf-article .wp-block-post-content .is-style-checks{padding-left:0}
@media (min-width:1024px){
.hf-article .wp-block-post-content .hf-numbered::before{position:absolute;right:calc(100% + var(--wp--preset--spacing--05));top:-.08em;margin:0}
.hf-article .wp-block-post-content .is-style-steps li{padding-left:0}.hf-article .wp-block-post-content .is-style-steps li::before{left:calc(-1 * var(--wp--custom--component--prose--numeral-col))}
}
/* ---- disclosure (component.accordion): native details/summary on hairline rules. Plus at rest → minus when open (the second path of the Lucide plus rotates onto the first). The open header sits on a panel bar that bleeds padding-x past the text column so labels stay flush with the h2 and the tables; the body is inset behind a 2px blue rule so rows inside never merge with the row dividers. Built by hychem_details(); [data-hf-details-group] + [data-hf-details-all] get Expand all / Collapse all from theme.js. ---- */
.hf-details{border-bottom:1px solid var(--wp--preset--color--rule)}
.hf-details summary{display:flex;justify-content:space-between;align-items:center;gap:var(--wp--custom--component--accordion--gap);padding:var(--wp--custom--component--accordion--padding-y) var(--wp--custom--component--accordion--padding-x);margin:0 calc(-1 * var(--wp--custom--component--accordion--padding-x));font-size:var(--wp--custom--component--accordion--font-size);font-weight:var(--wp--custom--component--accordion--font-weight);line-height:1.3;color:var(--wp--custom--component--accordion--fg);cursor:pointer;list-style:none;border-radius:var(--wp--custom--radius--small);transition:background-color var(--wp--custom--motion--fast)}
.hf-details summary::-webkit-details-marker{display:none}
.hf-details summary:hover{background:var(--wp--custom--component--accordion--bg-hover)}.hf-details[open]>summary{background:var(--wp--custom--component--accordion--bg-open)}
.hf-details__icon{flex:0 0 auto;width:var(--wp--custom--component--accordion--icon-size);height:var(--wp--custom--component--accordion--icon-size);color:var(--wp--custom--component--accordion--icon)}.hf-details[open]>summary .hf-details__icon{color:var(--wp--custom--component--accordion--icon-open)}
.hf-details__icon path{transform-box:fill-box;transform-origin:center;transition:transform var(--wp--custom--motion--fast)}.hf-details[open] .hf-details__icon path:last-child{transform:rotate(90deg)}
.hf-details__body{margin:var(--wp--preset--spacing--02) 0 var(--wp--preset--spacing--05);padding:0 0 0 var(--wp--custom--component--accordion--body-inset);border-left:2px solid var(--wp--custom--component--accordion--body-rule);font-size:var(--wp--custom--component--accordion--body-font-size)}.hf-details__body p:last-child,.hf-details__body ul:last-child,.hf-details__body .hf-table-wrap:last-child,.hf-details__body .hf-lines:last-child{margin-bottom:0}
.hf-details__body ol,.hf-details__body ul:not(.hf-lines){margin:0 0 1em;padding-left:1.4em}.hf-details__body li{margin:0 0 .35em}.hf-details__body .hf-table-wrap{margin:var(--wp--preset--spacing--03) 0}
.hf-details__body p>strong:only-child{font-weight:var(--wp--custom--font--weight--medium);color:var(--wp--preset--color--heading)} /* inline sub-heading ("Roller application") shaped by the importer */
.hf-details__body p>strong:first-child,.hf-details__body li>strong:first-child{font-weight:var(--wp--custom--font--weight--medium)} /* run-in labels ("POLYAC® 12:", "CLEAN UP:") — a label, not a shout */
.hf-details-group__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--wp--preset--spacing--04);margin:0 0 var(--wp--preset--spacing--04)}
.hf-details-group__all{appearance:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;white-space:nowrap}.hf-details-group__all[hidden]{display:none}
/* guideline accordions (product pages): fact rows as a tight list, tab rows as tables — never bullets for key–value lines */
.hf-lines{list-style:none;margin:0 0 var(--wp--preset--spacing--05);padding:0;font-size:var(--wp--preset--font-size--body-sm)}.hf-lines li{padding:8px 0;border-bottom:1px solid var(--wp--preset--color--rule)}.hf-lines li:first-child{border-top:1px solid var(--wp--preset--color--rule)}
.hf-table--lines th,.hf-table--lines td{white-space:normal}.hf-table--lines tbody th{font-weight:400;width:auto}
.hf-table caption{text-align:left;caption-side:top;font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted);text-transform:uppercase;letter-spacing:.05em;padding:0 0 8px}

/* motion layer (assets/js/motion.js, docs/README.md → Motion). Only reveal/stagger roots and the hero copy are pre-hidden, with opacity (still focusable) and only under html.hf-motion,
   which the head gate adds on the front end alone — the editor never hides anything. The 1.5 s keyframe is the failsafe: content appears even if motion.js never runs; motion.js removes it by adding hf-motion-ready. */
.hf-motion:not(.hf-motion-ready) :is([data-hf-motion="reveal"],[data-hf-motion="stagger"],[data-hf-motion="prose"]>:not([data-hf-motion]):not(h1):not(:has(h1)),[data-hf-motion="head"]>:not(h1):not(:has(h1)):not([data-hf-media]),[data-hf-motion="figure"]>img,[data-hf-hero-copy]>:not(h1),[data-hf-hero-caption]){opacity:0;animation:hf-unhide 0s var(--wp--custom--motion--failsafe) forwards}
[data-hf-motion="figure"]{overflow:clip}
[data-hf-motion="head"]:has(>[data-hf-media]){overflow:clip} /* a photo head's picture settles from 1.04 inside the head */ /* the featured image settles from 1.04 inside its box */
/* image arrival (theme.js adds html.hf-img and marks each lazy image on load): a lazy image fades in from its reserved box, tinted panel-grey while empty; one the browser already had shows at once.
   Hero, project hero and the featured image are never handled here (eager, LCP — the featured image is the `figure` preset). Logos and images inline in prose get no tint. */
.hf-motion.hf-img img[loading="lazy"]:not([data-hf-loaded]){opacity:0}
:where(img[loading="lazy"]){transition:opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--ease)} /* zero specificity: an image with its own transition (tile, card, mega) lists opacity itself */
.hf-motion.hf-img :is(a,div,span,figure,li):not(p):has(>img[loading="lazy"]:not([data-hf-loaded]):not(.hf-logos__img):only-child){background:var(--wp--preset--color--panel)}
/* prose and head items are always the root's direct children (post-content paragraphs, product-body sections, a head's breadcrumb/standfirst/meta) — the h1 and whatever wraps it are never pre-hidden */
@keyframes hf-unhide{to{opacity:1}}
.hf-motion :has(>[data-hf-parallax]){overflow:clip} /* parallax media is scaled 1.12 and drifts; its box clips */
/* page transition between documents — native View Transitions, no JS: the old page fades out, then the new one fades in and rises; never both at once (two headings would stack).
   The header is its own group (view-transition-name) and never fades or moves; if the old page had it hidden by scroll the group morphs it back into place. Firefox: hard cut, as before. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hf-header{view-transition-name:hf-header}
  ::view-transition-old(root){animation:hf-page-out var(--wp--custom--motion--page-out) var(--wp--custom--motion--ease) both}
  ::view-transition-new(root){animation:hf-page-in var(--wp--custom--motion--page-in) var(--wp--custom--motion--ease-out) var(--wp--custom--motion--page-out) both}
  ::view-transition-old(hf-header){animation:none;opacity:0}::view-transition-new(hf-header){animation:none}
  @keyframes hf-page-out{to{opacity:0}}
  @keyframes hf-page-in{from{opacity:0;transform:translateY(var(--wp--custom--motion--page-shift))}}
}
.hf-office{padding:var(--wp--preset--spacing--05) 0;border-top:1px solid var(--wp--preset--color--rule);display:grid;gap:6px;font-size:var(--wp--preset--font-size--body-sm)}
.hf-office__name{font-size:var(--wp--preset--font-size--body);margin:0}.hf-office p{margin:0}.hf-office__people{color:var(--wp--preset--color--muted)}
.hf-office__links{display:flex;flex-wrap:wrap;gap:6px 18px}.hf-office__links a{display:inline-flex;gap:6px;align-items:center;color:var(--wp--preset--color--brand-blue);text-decoration:none;font-weight:500}.hf-office__links a:hover{text-decoration:underline}
.hf-office .hf-office__page{margin-top:var(--wp--preset--spacing--03)} /* contact offices: the office-page link sits apart from the phone and email row */

/* ---- application pages (round 58, SEO strategy §5): industry / performance / chemistry term pages carry service conditions, the build-up, standards and questions.
   One section shape for all four blocks (.hf-apsec): an h-2 title over a measured column; tables use the shared .hf-table. The office card is the location pages' head panel.
   .hf-office* moved here from blocks/contact-offices (two blocks print it now). ---- */
.hf-apsec{padding-top:var(--wp--preset--spacing--10)}
.hf-apsec__title{font-size:var(--wp--preset--font-size--h-2);margin:0 0 var(--wp--preset--spacing--05);max-width:var(--wp--custom--size--measure);text-wrap:balance}
.hf-apsec__lead{margin:0 0 var(--wp--preset--spacing--06);max-width:var(--wp--custom--size--measure);color:var(--wp--preset--color--muted)}
.hf-apsec__note{margin:var(--wp--preset--spacing--04) 0 0;font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--muted)}
.hf-apsec .hf-details-group{max-width:var(--wp--custom--size--article)}
.hf-page-head p.hf-ahead__intro{font-size:var(--wp--preset--font-size--lead);line-height:1.45;color:var(--wp--preset--color--body);max-width:var(--wp--custom--size--measure);margin:0 0 var(--wp--preset--spacing--04)} /* the answer-first paragraph under a term page's H1 */
.hf-conditions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--wp--preset--spacing--08);margin:0}
.hf-conditions__row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:var(--wp--preset--spacing--04);padding:var(--wp--preset--spacing--04) 0;border-top:1px solid var(--wp--preset--color--rule)}
.hf-conditions dt{font-weight:var(--wp--custom--font--weight--medium);color:var(--wp--preset--color--heading)}.hf-conditions dd{margin:0}.hf-conditions dd::first-letter{text-transform:uppercase}
.hf-conditions__row:has(>dd:only-child){grid-template-columns:1fr}
.hf-buildup tbody th{width:28%}.hf-buildup td:nth-child(2){width:30%;font-weight:var(--wp--custom--font--weight--medium)}.hf-buildup td a{color:var(--wp--preset--color--brand-blue)}
.hf-buildup__n{display:inline-grid;place-items:center;width:1.75em;height:1.75em;margin-right:var(--wp--preset--spacing--03);border-radius:50%;background:var(--wp--preset--color--panel);color:var(--wp--preset--color--heading);font-size:var(--wp--preset--font-size--caption);font-weight:var(--wp--custom--font--weight--medium)}
.hf-standards tbody th{width:20%;white-space:nowrap}.hf-standards td:nth-child(2){width:34%}
@media (max-width:767px){
  .hf-conditions{grid-template-columns:1fr}.hf-conditions__row{grid-template-columns:1fr;gap:var(--wp--preset--spacing--01)}
  .hf-buildup thead,.hf-standards thead{display:none}
  .hf-buildup tr,.hf-standards tr{display:grid;gap:var(--wp--preset--spacing--02);padding:var(--wp--preset--spacing--04) 0;border-bottom:1px solid var(--wp--preset--color--rule)}
  .hf-buildup th,.hf-buildup td,.hf-standards th,.hf-standards td{border:0;padding:0;width:auto!important;white-space:normal}
}
.hf-officecard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--wp--preset--spacing--06) var(--wp--preset--spacing--08);align-items:stretch;padding:var(--wp--preset--spacing--07);background:var(--wp--preset--color--paper);border-radius:var(--wp--custom--radius--medium);margin:var(--wp--preset--spacing--08) 0 var(--wp--preset--spacing--09)}
.hf-officecard .hf-office{border-top:0;padding:0;gap:var(--wp--preset--spacing--04)}.hf-officecard .hf-eyebrow{margin:0}.hf-officecard__name{margin-bottom:var(--wp--preset--spacing--02)}
.hf-officecard__people{list-style:none;margin:0;padding:0;display:grid;gap:var(--wp--preset--spacing--01)} /* round 67: one person per row, the card's text groups spaced apart */
.hf-officecard__also{color:var(--wp--preset--color--muted)}.hf-officecard .hf-office__links{gap:var(--wp--preset--spacing--03) var(--wp--preset--spacing--06)}.hf-officecard__name{font-size:var(--wp--preset--font-size--h-3)}
.hf-officecard__main{display:flex;flex-direction:column;justify-content:space-between;gap:var(--wp--preset--spacing--06)}
.hf-officecard__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp--preset--spacing--04) var(--wp--preset--spacing--06);padding-top:var(--wp--preset--spacing--06);border-top:1px solid var(--wp--custom--component--office-map--rule)} /* round 67: the actions sit under the office, after a rule */
/* round 67: the map — Google's keyless embed, in Google's own colours (a brand tint by CSS filter was tried and dropped) */
.hf-officecard__map{position:relative;min-height:var(--wp--custom--component--office-map--min-height);border-radius:var(--wp--custom--radius--medium);overflow:hidden;background:var(--wp--preset--color--panel)}
.hf-officecard__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:1023px){.hf-officecard{grid-template-columns:1fr}}
/* core Details blocks in page content (the installation and location pages' questions) take the shared disclosure look (component.accordion) */
.wp-block-details{border-bottom:1px solid var(--wp--preset--color--rule);margin:0;max-width:var(--wp--custom--size--article)}
.wp-block-details>summary{padding:var(--wp--custom--component--accordion--padding-y) var(--wp--custom--component--accordion--padding-x);margin:0 calc(-1 * var(--wp--custom--component--accordion--padding-x));font-size:var(--wp--custom--component--accordion--font-size);font-weight:var(--wp--custom--component--accordion--font-weight);color:var(--wp--custom--component--accordion--fg);cursor:pointer;border-radius:var(--wp--custom--radius--small);transition:background-color var(--wp--custom--motion--fast)}
.wp-block-details>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--wp--custom--component--accordion--gap);list-style:none}.wp-block-details>summary::-webkit-details-marker{display:none}
.wp-block-details>summary::after{content:"";flex:0 0 auto;width:var(--wp--custom--component--accordion--icon-size);height:var(--wp--custom--component--accordion--icon-size);background:var(--wp--custom--component--accordion--icon);-webkit-mask:url(../icons/lucide/plus.svg) center/contain no-repeat;mask:url(../icons/lucide/plus.svg) center/contain no-repeat;transition:transform var(--wp--custom--motion--fast)}
.wp-block-details[open]>summary::after{background:var(--wp--custom--component--accordion--icon-open);transform:rotate(45deg)} /* the same plus as .hf-details; it turns to a close mark when open */
.wp-block-details>summary:hover,.wp-block-details[open]>summary{background:var(--wp--custom--component--accordion--bg-hover)}
.wp-block-details>:not(summary){margin:var(--wp--preset--spacing--02) 0 var(--wp--preset--spacing--05);padding-left:var(--wp--custom--component--accordion--body-inset);border-left:2px solid var(--wp--custom--component--accordion--body-rule);font-size:var(--wp--custom--component--accordion--body-font-size)}
/* round 59: links inside running text are underlined, never colour alone (axe link-in-text-block) — notes, table cells, the fact sheet */
.hf-apsec__note a,.hf-buildup td a,.wp-block-table a,.hf-details__body a,.wp-block-details a{color:var(--wp--preset--color--brand-blue);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
/* round 60: questions inside the product's main column take the product sections' heading (h-3 over a hairline — .hf-pbody__section h2) */
.hf-apsec.hf-apsec--product{padding-top:0;margin-top:var(--wp--preset--spacing--08)}
.hf-apsec--product .hf-apsec__title{font-size:var(--wp--preset--font-size--h-3);max-width:none;margin:0 0 var(--wp--preset--spacing--04);padding-bottom:10px;border-bottom:1px solid var(--wp--preset--color--rule)}

/* ---- photo head band (component.category-head; moved from blocks/category-head in round 61 — hychem/page-head prints it too) ---- */
/* A band, not a second hero (component.category-head): shorter than the home hero, the copy on the page's content edge at the foot of the picture.
   The inline padding puts the copy on the page's own content column (size.content, centred), so the H1 lines up with the filter bar and the product grid at every width.
   The percentage resolves against <main>'s content box, hence the extra gutter — the band is pulled full-bleed out of that box, so its padding has to add the box's own inset back.
   The scrim runs the full height rather than the hero's bottom-anchored shade: on a band this short the four category frames leave bright patches under the lead (1.8–3.5:1 with hero.shade, 5.6:1 or better with this). */
.hf-chead{position:relative;height:var(--wp--custom--component--category-head--height);display:flex;flex-direction:column;justify-content:flex-end;color:var(--wp--preset--color--white);background:var(--wp--preset--color--panel);margin-bottom:var(--wp--preset--spacing--09);padding:0 max(var(--wp--custom--size--gutter),calc((100% - var(--wp--custom--size--content))/2 + var(--wp--custom--size--gutter))) var(--wp--custom--component--category-head--pad-bottom)}
.hf-chead__media{position:absolute;inset:0;overflow:hidden}
.hf-chead__img{width:100%;height:100%;object-fit:cover;display:block}
.hf-chead__scrim{position:absolute;inset:0;background:var(--wp--custom--component--category-head--scrim)}
.hf-chead>:not(.hf-chead__media){position:relative} /* the copy sits over the picture, and stays a direct child so the head motion reaches it */
.hf-chead__title{margin:0 0 var(--wp--preset--spacing--03);color:inherit}
.hf-chead__lead{max-width:60ch;font-size:var(--wp--preset--font-size--lead);color:rgba(255,255,255,.92)}.hf-chead__lead p{margin:0}
@media (max-width:639px){.hf-chead{height:auto;min-height:var(--wp--custom--component--category-head--height);padding-top:var(--wp--preset--spacing--10)}
.hf-chead__scrim{background:var(--wp--custom--component--category-head--scrim-compact)} /* round 91: the copy reaches the top of the band on phones */ /* the description runs long at 390 — the band grows rather than clipping it */
.hf-chead__lead{font-size:var(--wp--preset--font-size--body)}}
/* round 128 — the Hychem Architectural card (component.division-card): the division's own warm surface and green, its mark, one question, one line, a button that
   leaves for hychemarchitectural.com.au in a new tab. From 1200px (division-card.beside-from) it stands on the band's right, its foot on the lead's baseline gap
   (the band's pad-bottom), its right edge on the content edge — the % in `right` resolves against the band, which is full-bleed, hence no gutter is added back.
   Below that the band grows and the card is a full-width block under the photo: one row on tablets (mark · words · button); on phones one slim row (round 133, below).
   `.hf-chead > .hf-chead__division` outranks the band's `.hf-chead > :not(.hf-chead__media){position:relative}`. */
:is(.hf-chead,.hf-page-head)>.hf-chead__division{display:grid;gap:var(--wp--preset--spacing--04);align-items:center;background:var(--wp--custom--component--division-card--bg);color:var(--wp--preset--color--heading);padding:var(--wp--custom--component--division-card--padding)}
.hf-chead__division-logo{display:block;height:var(--wp--custom--component--division-card--logo-height);width:auto}
.hf-chead__division-body{display:grid;gap:var(--wp--preset--spacing--02)}
.hf-chead__division-heading{margin:0;font-size:var(--wp--preset--font-size--card);font-weight:500;line-height:var(--wp--custom--font--line-height--heading);color:var(--wp--preset--color--heading)}
.hf-chead__division-text{margin:0;font-size:var(--wp--preset--font-size--body-sm);line-height:var(--wp--custom--font--line-height--body);color:var(--wp--preset--color--muted)}
.hf-button--division{justify-self:start;background:var(--wp--custom--component--division-card--accent);color:var(--wp--preset--color--white)}
.hf-button--division:hover,.hf-button--division:focus-visible{background:var(--wp--custom--component--division-card--accent-hover);color:var(--wp--preset--color--white)}
.hf-button--division:focus-visible{outline:2px solid var(--wp--custom--component--division-card--accent);outline-offset:3px}
@media (min-width:1200px){
  .hf-chead>.hf-chead__division{position:absolute;right:max(var(--wp--custom--size--gutter),calc((100% - var(--wp--custom--size--content))/2));bottom:var(--wp--custom--component--category-head--pad-bottom);width:var(--wp--custom--component--division-card--width);box-sizing:border-box}
  .hf-chead--division>:is(.hf-breadcrumb,.hf-chead__title,.hf-chead__lead){max-width:min(60ch,calc(100% - var(--wp--custom--component--division-card--width) - var(--wp--preset--spacing--08)))} /* a longer category name wraps before it reaches the card */
}
@media (max-width:1199px){
  .hf-chead--division{height:auto;min-height:var(--wp--custom--component--category-head--height);padding-top:var(--wp--preset--spacing--10)}
  .hf-chead>.hf-chead__division{margin:var(--wp--custom--component--category-head--pad-bottom) calc(-1 * var(--wp--custom--size--gutter)) calc(-1 * var(--wp--custom--component--category-head--pad-bottom));padding-inline:var(--wp--custom--size--gutter);grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--wp--preset--spacing--06)}
  .hf-page-head>.hf-chead__division{margin:var(--wp--preset--spacing--06) 0 0} /* the paper head (a category without a picture): a card under the lead, not a bleed */
}
/* round 133 — phones: a slim strip, quieter than the flooring (Gabriel; Mobbin: Tabby's partner row, Zip's merchant rows). Two columns pushed apart: on the right
   edge the question over the division's green button at the small-button size (component.button small-*, the .hf-button--small sizes), the button always on one line;
   on the left the mark, which takes whatever width is left (up to its full logo-height) — so on a narrow phone the mark shrinks, never the button. The line is
   dropped (computers and tablets keep it); the button's ::after covers the strip, so the whole strip is the tap target. */
@media (max-width:767px){
  :is(.hf-chead,.hf-page-head)>.hf-chead__division{position:relative;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--wp--preset--spacing--04);row-gap:var(--wp--preset--spacing--03);padding-block:var(--wp--custom--component--division-card--compact-padding-y)}
  .hf-chead__division-logo{grid-row:span 2;width:100%;height:auto;max-height:var(--wp--custom--component--division-card--logo-height);object-fit:contain;object-position:left center}
  .hf-chead__division-body{grid-column:2;align-self:end;width:0;min-width:100%} /* the button alone sets the column's width; the question wraps inside it */
  .hf-chead__division-heading{font-size:var(--wp--preset--font-size--body-sm)}
  .hf-chead__division-text{display:none}
  .hf-chead__division .hf-button--division{grid-column:2;justify-self:start;align-self:start;white-space:nowrap;min-height:var(--wp--custom--component--button--small-min-height);padding:var(--wp--custom--component--button--small-padding-y) var(--wp--custom--component--button--small-padding-x);font-size:var(--wp--custom--component--button--small-font-size)}
  .hf-chead__division .hf-button__icon{flex:none}
  .hf-chead__division .hf-button--division::after{content:'';position:absolute;inset:0}
}
/* ---- round 61: office cards (hychem/office-grid — Intercom / Sprout Social) and picked products; the installation template's full-width flow ---- */
.hf-offgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--wp--preset--spacing--06)}
.hf-offgrid__card{display:flex;flex-direction:column;gap:var(--wp--preset--spacing--02);padding:var(--wp--custom--component--card--padding);background:var(--wp--preset--color--white);border:1px solid var(--wp--preset--color--rule);border-radius:var(--wp--custom--radius--medium)}
.hf-offgrid__card .hf-icon-tile{margin-bottom:var(--wp--preset--spacing--04)}
.hf-offgrid__city{font-size:var(--wp--preset--font-size--h-3);margin:0}
.hf-offgrid__name{margin:0;font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--muted)}
.hf-offgrid__addr{margin:var(--wp--preset--spacing--02) 0 0;font-size:var(--wp--preset--font-size--body-sm)}
.hf-offgrid__links{display:grid;gap:var(--wp--preset--spacing--02);margin:var(--wp--preset--spacing--04) 0 0}
.hf-offgrid__links>a:first-child{display:inline-flex;gap:6px;align-items:center;color:var(--wp--preset--color--brand-blue);font-weight:500;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.hf-offgrid__cta{margin:auto 0 0;padding-top:var(--wp--preset--spacing--05)} /* round 67: the page button sits on the card's foot, level across the row */
/* round 67: .hf-button--small — a compact button inside a card */
.hf-button.hf-button--small{min-height:var(--wp--custom--component--button--small-min-height);padding:var(--wp--custom--component--button--small-padding-y) var(--wp--custom--component--button--small-padding-x);font-size:var(--wp--custom--component--button--small-font-size)}
/* round 67: a pull quote as a full-width band — centred, no box of its own */
.hf-quote-band .wp-block-quote.is-style-pullquote{background:none;padding:0;margin:0 auto;max-width:var(--wp--custom--size--measure);text-align:center}
.hf-quote-band .wp-block-quote.is-style-pullquote p{margin-inline:auto}.hf-quote-band .wp-block-quote.is-style-pullquote cite::before{margin-inline:auto}
.hf-picks__list{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){.hf-picks__list{grid-template-columns:1fr}}
/* the full-width page (templates/page-installation.html): bands sit edge to edge; running copy and the office card keep the content box */
.hf-fullpage>.hf-band:not([class*="hf-band--"])+.hf-band:not([class*="hf-band--"]){padding-top:0} /* two white bands in a row share one gap; a white band after a toned one keeps its padding */
.hf-fullpage>.wp-block-group.hf-measure,.hf-fullpage>.hf-officecard,.hf-fullpage>.hf-split{margin-top:var(--wp--preset--spacing--10)}
/* round 67: more air on the full-width pages — bands pad, and unbanded sections sit, at component.section.padding-roomy (the photo head is not a band) */
.hf-fullpage{--wp--custom--component--section--padding:var(--wp--custom--component--section--padding-roomy)}
.hf-fullpage>.hf-band{padding-block:var(--wp--custom--component--section--padding-roomy)}
.hf-fullpage>.hf-officecard,.hf-fullpage>.hf-split{margin-top:var(--wp--custom--component--section--padding-roomy)}.hf-fullpage>.hf-split{margin-bottom:var(--wp--custom--component--section--padding-roomy)}
@media (max-width:767px){.hf-fullpage .wp-block-table.hf-table-wrap table{min-width:var(--wp--custom--component--table--scroll-min)}}
.hf-fullpage>.wp-block-group.alignfull.hf-band{padding-inline:var(--wp--custom--size--gutter)} /* round 67: a band built from a core group (the quote, the systems table) — the theme's root padding is 0, so it takes the gutter the hf-band__inner blocks use */
.hf-fullpage>.hf-phead+.hf-band{margin-top:0} /* a toned band sits straight under the photo head */
/* round 61: questions as a full-width split (Vizcom / KÖPPEN) — heading and contact left, the accordion right. Round 88: the light-blue FAQ band (layout "centred") uses the same grid with the heading alone on the left; its open and hover rows go white (.hf-band--tint below) */
.hf-faqsplit{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--wp--preset--spacing--10);align-items:start}
.hf-faqsplit__aside{display:grid;gap:var(--wp--preset--spacing--04)}.hf-faqsplit__aside p{margin:0;color:var(--wp--preset--color--body);max-width:40ch}
.hf-faqsplit__contact{display:grid;gap:var(--wp--preset--spacing--03);justify-items:start}
.hf-faqsplit__contact>a:first-child{display:inline-flex;gap:8px;align-items:center;font-size:var(--wp--preset--font-size--h-3);color:var(--wp--preset--color--heading);text-decoration:none}
.hf-faqsplit__contact>a:first-child:hover{color:var(--wp--preset--color--brand-blue)}
@media (max-width:1023px){.hf-faqsplit{grid-template-columns:1fr;gap:var(--wp--preset--spacing--07)}}
/* round 88b: on the band the heading, Expand all and the rows are three grid items — Expand all sits in a row of its own above the rows, so the heading's top lines up with the first question; stacked, they run heading → Expand all → rows */
.hf-faqsplit--band{row-gap:0}
@media (min-width:1024px){.hf-faqsplit--band>.hf-section__title{grid-column:1;grid-row:2}.hf-faqsplit--band>.hf-faqhead{grid-column:2;grid-row:1}.hf-faqsplit--band>.hf-faq{grid-column:2;grid-row:2}}
@media (max-width:1023px){.hf-faqsplit--band>.hf-section__title{margin-bottom:var(--wp--preset--spacing--07)}}
/* round 66: the questions head — heading left, Expand all right (the product guidelines' .hf-details-group__head pattern); wraps under a long heading on phones. On products the rule under the heading moves to the row, so it spans under the button too */
.hf-faqhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--wp--preset--spacing--03) var(--wp--preset--spacing--05);margin:0 0 var(--wp--preset--spacing--05)}
.hf-faqhead>h2{margin:0;flex:1 1 10ch;min-width:0}.hf-faqhead--end{justify-content:flex-end} /* the heading shrinks (to 10ch) before the button drops under it */
.hf-faqhead .hf-details-group__all{flex:none}
@media (max-width:767px){.hf-faqhead>h2{flex-basis:100%}} /* phones: the button goes under the heading rather than squeezing it */
.hf-apsec--product .hf-faqhead{margin:0 0 var(--wp--preset--spacing--04);padding-bottom:var(--wp--preset--spacing--02);border-bottom:1px solid var(--wp--preset--color--rule)}.hf-apsec--product .hf-faqhead .hf-apsec__title{margin:0;padding:0;border:0}.hf-apsec--product .hf-details-group{max-width:none} /* the questions span the product column, like the application guidelines, so Expand all sits over the rows' right edge */
.hf-band--tint .hf-details summary:hover{background:var(--wp--custom--component--accordion--bg-hover-on-tint)}.hf-band--tint .hf-details[open]>summary{background:var(--wp--custom--component--accordion--bg-open-on-tint)}
/* Round 123: home hero A/B test — both versions are in the page; the <head> script marks <html data-hf-hero> and the other version is hidden (no script = version A) */
html:not([data-hf-hero="b"]) [data-hf-hero-variant="b"],html[data-hf-hero="b"] [data-hf-hero-variant="a"]{display:none}
.hf-hero-test-tag{position:fixed;left:var(--wp--preset--spacing--03);bottom:var(--wp--preset--spacing--03);z-index:30;margin:0;padding:var(--wp--preset--spacing--01) var(--wp--preset--spacing--02);border-radius:var(--wp--custom--radius--small);background:var(--wp--preset--color--heading);color:var(--wp--preset--color--white);font-size:var(--wp--preset--font-size--caption);pointer-events:none}
/* door cards (Round 139; the Round 110 404's cards, shared with the thank-you page): hychem_door_grid() — tokens component.doors; the Technical hub card language */
.hf-doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wp--custom--component--doors--card-gap)}
.hf-door{display:flex}
.hf-door a{flex:1;display:flex;flex-direction:column;gap:var(--wp--preset--spacing--03);padding:var(--wp--custom--component--doors--card-padding);border:1px solid var(--wp--preset--color--rule);background:var(--wp--custom--component--card--bg);color:var(--wp--preset--color--heading);text-decoration:none;transition:border-color var(--wp--custom--motion--fast),background-color var(--wp--custom--motion--fast)}
.hf-door a:hover,.hf-door a:focus-visible{border-color:var(--wp--preset--color--heading);background:var(--wp--custom--component--card--bg-hover);color:var(--wp--preset--color--heading);text-decoration:none}
.hf-door a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--wp--custom--color--action-focus)}
.hf-door__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--wp--preset--spacing--02)}
.hf-door a:hover .hf-door__icon,.hf-door a:focus-visible .hf-door__icon{background:var(--wp--preset--color--white)}
.hf-door__go{color:var(--wp--custom--component--index-row--icon-color);transition:color var(--wp--custom--motion--fast),transform var(--wp--custom--motion--fast)}
.hf-door a:hover .hf-door__go,.hf-door a:focus-visible .hf-door__go{color:var(--wp--preset--color--heading);transform:translateX(var(--wp--custom--component--link--nudge))}
.hf-door__title{font-size:var(--wp--preset--font-size--card);font-weight:500;line-height:1.3;transition:color var(--wp--custom--motion--fast)}
.hf-door a:hover .hf-door__title,.hf-door a:focus-visible .hf-door__title{color:var(--wp--preset--color--brand-blue)}
.hf-door__text{font-size:var(--wp--preset--font-size--body-sm);color:var(--wp--preset--color--body)}
.hf-door__meta{margin-top:auto;padding-top:var(--wp--preset--spacing--02);font-size:var(--wp--preset--font-size--caption);color:var(--wp--preset--color--muted)}
@media (max-width:1023px){.hf-doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.hf-doors{grid-template-columns:1fr}.hf-door a{padding:var(--wp--custom--component--doors--card-padding-small)}}