/* Purpose: style the complete site with editable values, genuine local fonts and no external CSS dependencies. */
/* Editing: each rule explains its role; change the brand tokens first when adjusting colours or spacing. */
@font-face { /* Register the local body font without contacting a font provider. */
    font-family: 'Poppins'; /* Match the requested body typeface in all body rules. */
    src: url('../fonts/poppins-latin-400.woff2') format('woff2'); /* Load the licensed Latin regular font shipped with this site. */
    font-weight: 400; /* Use the genuine regular face rather than synthetic weight. */
    font-style: normal; /* Keep body copy upright. */
    font-display: swap; /* Display readable fallback text while the local font loads. */
} /* Finish the regular Poppins font definition. */
@font-face { /* Register the matching medium body face for labels and actions. */
    font-family: 'Poppins'; /* Share the same family so weight controls selection. */
    src: url('../fonts/poppins-latin-500.woff2') format('woff2'); /* Load the licensed medium face locally. */
    font-weight: 500; /* Match buttons and labels to the downloaded weight. */
    font-style: normal; /* Avoid artificial italics in interface labels. */
    font-display: swap; /* Keep labels visible during font loading. */
} /* Finish the medium Poppins font definition. */
@font-face { /* Register genuine local Poppins 600 for the revised heading system. */
    font-family: 'Poppins'; /* Keep headings and body text within the requested family. */
    src: url('../fonts/poppins-latin-600.woff2') format('woff2'); /* Load the licensed local heading weight without external requests. */
    font-weight: 600; /* Select the real downloaded weight instead of synthetic bold. */
    font-style: normal; /* Keep page headings upright. */
    font-display: swap; /* Show readable headings while the local font loads. */
} /* Finish the local Poppins 600 definition. */
@font-face { /* Register genuine local Poppins 700 for the revised heading system. */
    font-family: 'Poppins'; /* Keep headings and body text within the requested family. */
    src: url('../fonts/poppins-latin-700.woff2') format('woff2'); /* Load the licensed local heading weight without external requests. */
    font-weight: 700; /* Select the real downloaded weight instead of synthetic bold. */
    font-style: normal; /* Keep page headings upright. */
    font-display: swap; /* Show readable headings while the local font loads. */
} /* Finish the local Poppins 700 definition. */
:root { /* Centralise the design values an editor is most likely to adjust. */
    --ink: #151515; /* Apply the owner's exact near-black brand colour. */
    --blue: #245bff; /* Apply the owner's exact action-blue brand colour. */
    --red: #e53935; /* Use the owner's exact red for small graphic accents. */
    --paper: #ffffff; /* Keep the main reading surface white. */
    --soft: #d8d8d8; /* Separate editorial sections with a restrained grey surface. */
    --muted: #c5c5c5; /* Keep secondary text readable on light backgrounds. */
    --line: #555555; /* Reserve quiet rules for content separation and form fields. */
    --page: 1248px; /* Set a comfortable maximum content width. */
    --gutter: clamp(20px, 4vw, 48px); /* Keep fluid page margins without crowding small screens. */
    --body-font: 'Poppins', Arial, sans-serif; /* Prefer the requested body typeface with readable fallbacks. */
    --heading-font: 'Poppins', Arial, sans-serif; /* Use Poppins for every heading as requested. */
} /* Finish the shared design tokens. */
.site-header { /* Give the shared dark header a restrained strip of the supplied brand blue. */
    border-top: 4px solid var(--blue); /* Keep the accent substantial and separate from links or buttons. */
} /* Finish the shared header accent. */
.service-item:nth-child(2) .service-icon, .category-section .route-index li:nth-child(3) .icon { /* Highlight selected stock categories while leaving most icons neutral. */
    color: var(--blue); /* Use the exact blue as a decorative accent beside readable text. */
} /* Finish selected blue icon highlights. */
.service-item:nth-child(5) .service-icon, .process-list li:first-child .process-icon, .export-section .text-link .icon { /* Repeat a small red detail across stock, process and export content. */
    color: var(--red); /* Keep the exact red confined to symbols rather than small text. */
} /* Finish selected red icon highlights. */
*, *::before, *::after { /* Make widths include padding so layouts remain predictable. */
    box-sizing: border-box; /* Prevent padding from creating accidental horizontal overflow. */
} /* Finish the box-model reset. */
html { /* Establish the root reading and anchor behaviour. */
    font-size: 100%; /* Respect the visitor's browser text-size preference. */
    scroll-padding-top: 24px; /* Leave room above anchored form errors and headings. */
    -webkit-text-size-adjust: 100%; /* Preserve intended text sizing on mobile browsers. */
} /* Finish root behaviour. */
body { /* Establish the stronger charcoal brand across every page. */
    margin: 0; /* Remove the browser outer margin. */
    color: #f4f4f4; /* Use clear light text across the darker brand surfaces. */
    background: #292929; /* Make charcoal the main page surface instead of white. */
    font: 400 1rem/1.8 var(--body-font); /* Keep Poppins body copy readable. */
    overflow-wrap: break-word; /* Allow long editable words to wrap safely. */
} /* Finish establish the stronger charcoal brand across every page. */
[hidden] { /* Keep native hidden state dependable for consent and progressive controls. */
    display: none !important; /* Ensure layout rules cannot accidentally reveal a hidden region. */
} /* Finish hidden-state enforcement. */
img, picture { /* Prevent image assets from exceeding their layout column. */
    max-width: 100%; /* Allow intrinsic images to shrink on narrow screens. */
} /* Finish image width protection. */
img { /* Give images block geometry without an inline baseline gap. */
    display: block; /* Remove unused line-box space underneath images. */
    height: auto; /* Preserve aspect ratio unless a deliberate crop overrides it. */
} /* Finish the image reset. */
a, a:visited, a:hover, a:active, a:focus { /* Honour the owner's no-underlined-links preference in every state. */
    text-decoration: none; /* Never draw an underline on a link. */
} /* Finish link-decoration handling. */
a { /* Keep links clear without depending on an underline. */
    color: inherit; /* Navigation adopts the appropriate surface colour. */
    -webkit-tap-highlight-color: rgb(36 91 255 / 18%); /* Give touch interaction a subtle brand-colour cue. */
} /* Finish the basic link style. */
a:hover { /* Preserve readable link colours across the darker design. */
    color: inherit; /* Keep links readable on their actual dark or grey surface. */
} /* Finish preserve readable link colours across the darker design. */
button, input, select, textarea { /* Make form controls use the same legible typography as the site. */
    font: inherit; /* Replace browser-specific control fonts. */
} /* Finish the control typography reset. */
button { /* Establish predictable control affordance. */
    cursor: pointer; /* Show that the element accepts an action. */
    border: 0; /* Keep all buttons free of thin decorative borders. */
} /* Finish the button reset. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { /* Preserve an obvious keyboard indicator on every interactive element. */
    outline: 3px solid var(--blue); /* Use a substantial focus ring rather than an underline or thin border. */
    outline-offset: 5px; /* Separate focus feedback from the element's shape. */
} /* Finish shared keyboard-focus styling. */
h1, h2, h3 { /* Use one deliberate Poppins heading system. */
    margin: 0 0 0.6em; /* Keep titles associated with their following copy. */
    font-family: var(--heading-font); /* Use genuine Poppins throughout the heading hierarchy. */
    font-weight: 600; /* Use the real semibold heading weight. */
    line-height: 1.18; /* Give the wider Poppins letterforms adequate vertical room. */
    letter-spacing: -0.035em; /* Keep larger headings compact without condensed type. */
} /* Finish use one deliberate poppins heading system. */
h1 { /* Size page titles for genuine Poppins bold. */
    font-size: clamp(2.35rem, 4.2vw, 4.1rem); /* Fit full SEO headings naturally without a condensed font. */
    font-weight: 700; /* Give the single main heading strong emphasis. */
} /* Finish size page titles for genuine poppins bold. */
h2 { /* Set the revised section heading hierarchy. */
    font-size: clamp(1.85rem, 2.85vw, 2.7rem); /* Keep section titles strong without relying on preheading labels. */
} /* Finish set the revised section heading hierarchy. */
h3 { /* Size service and process titles for the wider heading family. */
    font-size: clamp(1.15rem, 1.6vw, 1.4rem); /* Give service headings an appropriate Poppins scale. */
    line-height: 1.35; /* Let longer linked titles wrap comfortably. */
} /* Finish size service and process titles for the wider heading family. */
p { /* Give each thought a separate, readable block. */
    margin: 0 0 1.2em; /* Use paragraph spacing instead of decorative dividers. */
} /* Finish paragraph rhythm. */
p:last-child { /* Avoid excess space at the bottom of content groups. */
    margin-bottom: 0; /* Let the parent section own final spacing. */
} /* Finish paragraph-group cleanup. */
strong { /* Use a real available weight for important inline wording. */
    font-weight: 500; /* Avoid synthetic heavy Poppins where no bold face is supplied. */
} /* Finish emphasis styling. */
.container { /* Align the header, body sections and footer to the same grid. */
    width: min(var(--page), calc(100% - var(--gutter) * 2)); /* Preserve fluid gutters and the maximum reading width. */
    margin-inline: auto; /* Centre the content grid. */
} /* Finish the site-width utility. */
.section { /* Establish the main homepage section rhythm. */
    padding-block: clamp(64px, 7vw, 104px); /* Keep deliberate space between substantial topics. */
} /* Finish section spacing. */
.text-link { /* Make contextual links clear through typography and relevant icons. */
    display: inline-flex; /* Align descriptive labels with relevant Lucide icons. */
    align-items: center; /* Keep the icon centred beside wrapping text. */
    gap: 10px; /* Separate each meaning-bearing icon from its label. */
    color: inherit; /* Keep links readable on both charcoal and grey surfaces. */
    font-size: 0.92rem; /* Make actions compact but comfortably legible. */
    font-weight: 500; /* Distinguish linked text without using underlines. */
    padding-block: 8px; /* Give contextual links practical touch height. */
} /* Finish make contextual links clear through typography and relevant icons. */
.text-link:hover { /* Give contextual links restrained surface-safe feedback. */
    color: inherit; /* Preserve contrast on the current surface. */
    opacity: 0.8; /* Provide visible hover feedback without arrows or underlines. */
} /* Finish give contextual links restrained surface-safe feedback. */
.button { /* Use substantial solid action surfaces with no thin border. */
    display: inline-flex; /* Let actions align their label and relevant Lucide icon. */
    justify-content: center; /* Keep the label balanced inside its button. */
    align-items: center; /* Centre multiline labels vertically. */
    min-height: 52px; /* Provide a comfortable tap target. */
    max-width: 100%; /* Prevent a long editable button label from exceeding its column. */
    padding: 14px 23px; /* Give labels enough breathing room. */
    border: 0; /* Explicitly avoid the owner's unwanted thin button outlines. */
    border-radius: 6px; /* Use restrained corner rounding rather than pill shapes. */
    color: var(--paper); /* Keep labels readable on the brand-blue fill. */
    background: var(--blue); /* Apply the exact requested action colour. */
    font-size: 0.89rem; /* Keep long action labels manageable. */
    font-weight: 500; /* Use the genuine Poppins medium face. */
    line-height: 1.5; /* Support wrapping at high zoom or small widths. */
    text-align: center; /* Keep wrapped labels visually centred. */
} /* Finish the primary button style. */
.button:hover, .button:active { /* Give primary actions clear solid hover feedback. */
    color: #151515; /* Keep the label readable against its lighter hover surface. */
    background: #e4e4e4; /* Use a solid neutral interaction state on dark pages. */
} /* Finish give primary actions clear solid hover feedback. */
.button-dark { /* Supply an equally substantial secondary action surface. */
    background: var(--ink); /* Use the exact near-black brand colour. */
} /* Finish the dark button variant. */
.button-dark:hover { /* Differentiate interaction on a dark action. */
    background: var(--blue); /* Swap to the approved blue without an outline. */
} /* Finish the dark button hover. */
.button-small { /* Fit the main enquiry action into the desktop header. */
    min-height: 46px; /* Retain an accessible minimum target. */
    padding: 12px 18px; /* Use compact but comfortable header spacing. */
    font-size: 0.79rem; /* Keep the navigation line from overcrowding. */
} /* Finish the compact action variant. */
.skip-link { /* Keep a direct keyboard route to the main content. */
    position: absolute; /* Remove the normally hidden control from layout. */
    z-index: 20; /* Show the focused link above the header. */
    top: 12px; /* Position it comfortably inside the viewport. */
    left: var(--gutter); /* Align it with the document gutter. */
    padding: 12px 18px; /* Provide a substantial keyboard target. */
    background: var(--ink); /* Use strong contrast against its white label. */
    color: var(--paper); /* Keep the focused action legible. */
    transform: translateY(-180%); /* Hide it visually until reached by keyboard. */
} /* Finish the offscreen skip-link state. */
.skip-link:focus { /* Reveal the skip link on keyboard interaction. */
    transform: translateY(0); /* Bring the action into the visible header area. */
    color: var(--paper); /* Preserve the contrasting label. */
} /* Finish skip-link focus behaviour. */
.site-header { /* Present the original brand on a charcoal header. */
    background: #151515; /* Use the owner's exact charcoal brand colour. */
    color: #f4f4f4; /* Keep navigation readable beside the dark-background logo. */
} /* Finish present the original brand on a charcoal header. */
.header-utility { /* Place the business context and telephone on a quiet top line. */
    display: flex; /* Put the context and contact at opposite edges. */
    justify-content: space-between; /* Leave open space between these two short details. */
    gap: 20px; /* Prevent collision when the utility line narrows. */
    padding-top: 14px; /* Keep the top line comfortably inset. */
    font-size: 0.72rem; /* Make this contextual information smaller than navigation. */
    color: var(--muted); /* Maintain sufficient contrast on white. */
} /* Finish the utility-row layout. */
.header-utility a { /* Style the header contact route with a meaningful phone icon. */
    display: inline-flex; /* Align the verified phone number and its Lucide icon. */
    align-items: center; /* Keep the contact icon vertically centred. */
    gap: 9px; /* Separate the number from its icon. */
    color: #ededed; /* Preserve contrast on the dark header. */
    font-weight: 500; /* Give the verified contact route clear emphasis. */
} /* Finish style the header contact route with a meaningful phone icon. */
.header-main { /* Align the brand and desktop navigation. */
    display: flex; /* Arrange the logo and navigation horizontally. */
    align-items: center; /* Centre controls against the logo height. */
    justify-content: space-between; /* Use the full content width without crowding the logo. */
    gap: 24px; /* Keep identity separate from the first navigation item. */
    padding-block: 24px 30px; /* Give the brand a considered white-space frame. */
} /* Finish the main header geometry. */
.brand { /* Give the supplied horizontal logo a stable desktop footprint. */
    display: block; /* Make the whole logo one clean linked block. */
    width: 248px; /* Keep the wordmark legible at normal desktop sizes. */
    flex-shrink: 0; /* Prevent navigation from squeezing the original logo. */
} /* Finish logo sizing. */
.brand img { /* Preserve the exact cropped SVG proportions. */
    width: 100%; /* Fit the logo to its responsive wrapper. */
    height: auto; /* Use the SVG's true aspect ratio. */
} /* Finish logo image sizing. */
.site-nav ul { /* Lay out the crawlable menu as a simple horizontal list. */
    display: flex; /* Keep menu items and the CTA on one desktop row. */
    align-items: center; /* Align links with the solid action button. */
    gap: clamp(15px, 1.7vw, 26px); /* Make the menu fit without reducing the logo excessively. */
    margin: 0; /* Remove browser list margins. */
    padding: 0; /* Remove browser list indentation. */
    list-style: none; /* Avoid bullets in a conventional navigation bar. */
} /* Finish primary-navigation layout. */
.site-nav a:not(.button) { /* Give each navigation link a practical target. */
    display: block; /* Make vertical padding clickable. */
    padding-block: 11px; /* Provide at least a useful touch-height area. */
    font-size: 0.78rem; /* Fit the agreed navigation labels on standard desktops. */
    font-weight: 500; /* Distinguish menu actions from body copy. */
} /* Finish navigation-link spacing. */
.site-nav a[aria-current='page'] { /* Mark the current page through a solid neutral surface. */
    color: #ffffff; /* Keep the current route legible on charcoal. */
    background: #333333; /* Distinguish the current destination without an underline. */
    border-radius: 4px; /* Keep the active navigation shape restrained. */
    padding-inline: 10px; /* Give the current page label modest horizontal space. */
} /* Finish mark the current page through a solid neutral surface. */
.menu-toggle { /* Provide a solid menu control suited to the darker header. */
    display: none; /* Reveal the control only after mobile navigation is enhanced. */
    align-items: center; /* Align the label with its Lucide menu icon. */
    gap: 10px; /* Separate the word Menu from its symbol. */
    min-height: 44px; /* Keep the menu action easy to tap. */
    padding: 10px 13px; /* Give the mobile action a comfortable area. */
    border-radius: 6px; /* Match the restrained action geometry. */
    color: #ffffff; /* Keep the label readable on charcoal. */
    background: #383838; /* Use a solid dark-grey action instead of a thin outline. */
    font-size: 0.82rem; /* Fit the action beside the full wordmark. */
} /* Finish provide a solid menu control suited to the darker header. */
.hero { /* Present the homepage with a grounded split photographic composition. */
    display: grid; /* Give text and image independent proportions. */
    grid-template-columns: 45% 55%; /* Follow the planned text-to-image balance. */
    min-height: 590px; /* Give the opening message substantial breathing room. */
    background: var(--ink); /* Keep text contrast predictable behind the entire left panel. */
    color: var(--paper); /* Set readable text on the dark hero. */
} /* Finish the main hero composition. */
.hero-copy { /* Align the hero wording with the global page grid. */
    display: flex; /* Vertically centre the message within the image height. */
    align-items: center; /* Prevent the message appearing attached to the top edge. */
    padding: 70px 48px 72px max(var(--gutter), calc((100vw - var(--page)) / 2)); /* Align its left edge to the shared content width on large screens. */
} /* Finish the hero-copy frame. */
.hero-copy-inner { /* Keep the opening explanation comfortably readable. */
    max-width: 490px; /* Avoid overly long paragraph lines beside the image. */
    min-width: 0; /* Allow grid content to shrink instead of overflowing. */
} /* Finish the hero's text measure. */
.hero h1 { /* Use a confident Poppins homepage title without a preheading. */
    margin-bottom: 27px; /* Separate the title from its practical introduction. */
    font-size: clamp(3rem, 4.9vw, 4.65rem); /* Give Poppins a strong but readable opening scale. */
    font-weight: 700; /* Use the genuine bold face for the main business message. */
    line-height: 1.08; /* Allow clear spacing between wider headline lines. */
} /* Finish use a confident poppins homepage title without a preheading. */
.hero-copy p { /* Keep hero prose quieter than the white headline. */
    color: #dedede; /* Maintain high contrast on the near-black surface. */
    font-size: 0.93rem; /* Fit practical copy without making the opening dense. */
    line-height: 1.85; /* Preserve a comfortable reading rhythm. */
} /* Finish hero body-copy styling. */
.hero-actions { /* Keep related actions together while allowing wrapping. */
    display: flex; /* Arrange primary and contextual actions side by side when space permits. */
    align-items: center; /* Align links and solid buttons vertically. */
    flex-wrap: wrap; /* Prevent controls colliding at mobile widths or high zoom. */
    gap: 14px 24px; /* Separate controls in both horizontal and stacked arrangements. */
    margin-top: 30px; /* Give the actions space below the explanation. */
} /* Finish the shared action group. */
.hero .text-link, .cta-section .text-link, .site-footer .text-link { /* Keep links legible on dark brand surfaces. */
    color: var(--paper); /* White supports contrast without an underline. */
} /* Finish dark-surface contextual links. */
.hero .button:hover, .cta-section .button:hover { /* Retain a visible solid action when hovering over a dark section. */
    color: var(--ink); /* Switch to dark text on the light hover fill. */
    background: var(--paper); /* Avoid a dark button disappearing into its background. */
} /* Finish dark-surface button interaction. */
.hero-visual { /* Make the primary photo fill its half of the split layout. */
    min-width: 0; /* Allow the image column to shrink with the viewport. */
    min-height: 100%; /* Match the content-driven hero height. */
} /* Finish the hero image wrapper. */
.stock-figure { /* Keep stock photographs aligned with the surrounding layout. */
    margin: 0; /* Remove default figure margins that would disturb the grid. */
    min-width: 0; /* Allow figures inside flex or grid columns to shrink. */
} /* Finish the shared figure reset. */
.stock-picture { /* Give responsive picture markup a reliable block box. */
    display: block; /* Ensure image dimensions contribute to layout normally. */
    overflow: hidden; /* Keep deliberate crops within their photograph frame. */
    background: #e4e4e4; /* Reserve a neutral surface while the image loads. */
} /* Finish the responsive image wrapper. */
.stock-picture img { /* Make the actual image fill its allocated photographic area. */
    width: 100%; /* Cover the figure width without gaps. */
    height: 100%; /* Follow the explicit wrapper ratio when supplied. */
    object-fit: cover; /* Crop proportionally instead of stretching image content. */
} /* Finish photographic image fit. */
.hero-image { /* Make the hero image a complete edge-to-edge panel. */
    position: relative; /* Keep the hero photograph in its own layout context. */
    height: 100%; /* Fill the hero's text-driven height. */
} /* Finish the hero figure sizing. */
.hero-image .stock-picture { /* Let the hero photo extend to every edge of its panel. */
    height: 100%; /* Remove a gap beneath a tall desktop hero. */
} /* Finish hero picture height. */
.hero-image img { /* Preserve the warehouse scene's central subject during cropping. */
    min-height: 590px; /* Match the minimum desktop hero height. */
    object-position: 50% 50%; /* Centre the scene rather than cutting one edge arbitrarily. */
} /* Finish the main photographic crop. */
.editorial-layout, .category-layout { /* Use an asymmetric title-and-copy composition for text-led sections. */
    display: grid; /* Keep headings and longer content aligned in separate columns. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); /* Give practical body copy more width than the title. */
    gap: clamp(40px, 7vw, 112px); /* Let the two columns breathe without decorative boxes. */
} /* Finish editorial-section geometry. */
.editorial-layout > h2 { /* Keep introductory headings from becoming one long line. */
    max-width: 360px; /* Reinforce the editorial left-column silhouette. */
} /* Finish editorial heading measure. */
.intro-section { /* Use a mid-grey introduction within the darker page composition. */
    background: #d0d0d0; /* Create a substantial mid-grey panel after the dark hero. */
    color: #151515; /* Keep detailed copy readable on the grey surface. */
    --muted: #454545; /* Keep secondary text accessible within this lighter panel. */
    --line: #aeaeae; /* Adapt quiet content dividers to the grey surface. */
} /* Finish use a mid-grey introduction within the darker page composition. */
.section-heading { /* Limit section introductions before wider indexes or sequences. */
    max-width: 690px; /* Keep heading and introductory lines readable. */
    margin-bottom: 42px; /* Separate the topic introduction from its entries. */
} /* Finish section-title spacing. */
.service-index { /* Present six buying routes as two structured editorial columns. */
    display: grid; /* Align service entries without floating card chrome. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Use equal widths for the paired service descriptions. */
    column-gap: 68px; /* Keep the central gutter visually open. */
} /* Finish service-index layout. */
.service-item { /* Pair practical service descriptions with recognisable category icons. */
    display: grid; /* Place each relevant stock icon beside its service copy. */
    grid-template-columns: 44px minmax(0, 1fr); /* Reserve a deliberate but compact icon column. */
    gap: 20px; /* Separate the icon from the descriptive heading. */
    padding-block: 30px 33px; /* Keep each buying route substantial and easy to scan. */
    border-top: 1px solid var(--line); /* Separate content rows without outlining actions. */
} /* Finish pair practical service descriptions with recognisable category icons. */
.service-item h3 a { /* Keep service titles plain and useful beside their category icon. */
    display: block; /* Let the complete service title act as its linked label. */
} /* Finish keep service titles plain and useful beside their category icon. */
.service-item p:not(.index-number) { /* Keep brief service descriptions visually secondary. */
    color: var(--muted); /* Distinguish description from the linked service name. */
    font-size: 0.88rem; /* Keep two-column descriptions at a comfortable density. */
    line-height: 1.8; /* Retain readability across short paragraphs. */
} /* Finish service description type. */
.section-link { /* Separate an onward route from the index above it. */
    margin-top: 28px; /* Make the final hub link a distinct next step. */
} /* Finish section-level link spacing. */
.process-section { /* Separate the process with a stronger dark-grey panel. */
    background: #3a3a3a; /* Give the selling sequence a distinct medium-charcoal surface. */
} /* Finish separate the process with a stronger dark-grey panel. */
.process-list { /* Keep the selling process explicitly ordered and easy to follow. */
    display: grid; /* Align the four short steps in an open row. */
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Give each stage equal reading space. */
    gap: 32px; /* Separate steps without enclosing them. */
    margin: 0; /* Let the section heading own top spacing. */
    padding: 0; /* Remove native list indentation. */
    list-style: none; /* Use larger custom numbers while retaining ordered-list semantics. */
    counter-reset: stock-step; /* Restart the sequence for this process list. */
} /* Finish process-grid geometry. */
.process-list h3 { /* Fit process titles to the real Poppins proportions. */
    font-size: 1.2rem; /* Give process titles a readable Poppins size within four columns. */
    line-height: 1.35; /* Let longer factual stage names wrap cleanly. */
} /* Finish fit process titles to the real poppins proportions. */
.process-list p { /* Keep the short stage explanations readable. */
    font-size: 0.85rem; /* Fit the factual detail without dense visual weight. */
    color: var(--muted); /* Make explanatory text secondary to the stage title. */
} /* Finish process prose. */
.feature-layout, .export-layout { /* Give warehouse and export information different photographic compositions. */
    display: grid; /* Pair the photograph with its own copy column. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); /* Give the first feature image slightly more space. */
    align-items: center; /* Centre text against the photograph's height. */
    gap: clamp(36px, 6vw, 88px); /* Keep the feature open and editorial. */
} /* Finish feature-section geometry. */
.feature-image .stock-picture { /* Establish a calm landscape crop for warehouse detail. */
    aspect-ratio: 5 / 4; /* Keep the composition substantial beside the copy. */
} /* Finish the warehouse image frame. */
.feature-copy p, .export-layout p { /* Keep feature prose slightly lighter than its heading. */
    font-size: 0.93rem; /* Balance the longer copy with the photograph. */
} /* Finish feature prose sizing. */
.export-section { /* Differentiate the export discussion with a dark neutral surface. */
    background: var(--ink); /* Connect the section to the brand's restrained palette. */
    color: var(--paper); /* Maintain clear contrast on the dark section. */
} /* Finish the export feature surface. */
.export-layout { /* Reverse the emphasis for export so the page avoids repetitive image layouts. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Give the approved brand-protection wording sufficient width. */
} /* Finish the export column balance. */
.export-layout h2 { /* Keep the longer export heading within a considered measure. */
    max-width: 510px; /* Prevent the heading spanning the whole section. */
} /* Finish export heading measure. */
.export-layout .text-link { /* Preserve link readability on the export surface. */
    color: var(--paper); /* Keep the relevant export icon readable in white. */
} /* Finish export contextual links. */
.export-image .stock-picture { /* Use a broad export scene rather than a tall card crop. */
    aspect-ratio: 4 / 3; /* Keep a consistent commercial-photography proportion. */
} /* Finish the export image frame. */
.plain-section { /* Create a purposeful medium-grey bridge for practical instructions. */
    padding-block: 72px; /* Keep practical bridge sections substantial. */
    background: #4b4b4b; /* Use a visible medium-grey section between darker topics. */
} /* Finish create a purposeful medium-grey bridge for practical instructions. */
.category-section { /* Give product categories a strong neutral panel. */
    background: #d0d0d0; /* Use a mid-grey directory panel instead of a white section. */
    color: #151515; /* Keep category titles clear on the lighter grey. */
    --muted: #454545; /* Adapt supporting text contrast to this panel. */
    --line: #aeaeae; /* Use suitable quiet dividers on grey. */
} /* Finish give product categories a strong neutral panel. */
.route-index { /* Provide reusable text-led directories for categories and the sitemap. */
    margin: 0; /* Let the enclosing heading control list spacing. */
    padding: 0; /* Remove default list indentation. */
    list-style: none; /* Use linked rows instead of decorative bullets. */
} /* Finish the directory reset. */
.route-index li { /* Separate linked directory rows with a content rule. */
    border-top: 1px solid #c9c9c9; /* Keep row boundaries understated and distinct from buttons. */
} /* Finish directory separators. */
.route-index a { /* Identify stock categories through useful icons rather than arrows. */
    display: flex; /* Align each category icon and its descriptive label. */
    align-items: center; /* Centre the category symbol beside its title. */
    gap: 16px; /* Separate relevant icons from text. */
    padding: 20px 0; /* Keep every full row comfortably clickable. */
    font: 600 1.2rem/1.4 var(--heading-font); /* Use a calm Poppins hierarchy for directory labels. */
} /* Finish identify stock categories through useful icons rather than arrows. */
.questions-container { /* Keep homepage questions within a deliberately narrow reading area. */
    max-width: 910px; /* Avoid very long disclosure labels on wide screens. */
} /* Finish homepage question measure. */
.questions h2 { /* Separate the FAQ heading from the first disclosure. */
    margin-bottom: 32px; /* Give the question group a clear starting point. */
} /* Finish question-heading spacing. */
.question { /* Present FAQs as plain native disclosures with reliable no-script support. */
    border-top: 1px solid var(--line); /* Separate questions without enclosing each in a card. */
} /* Finish question separators. */
.question:last-child { /* Close the question sequence with the same quiet rule. */
    border-bottom: 1px solid var(--line); /* Give the disclosure group a clean final edge. */
} /* Finish the final question boundary. */
.question summary { /* Turn the entire question label into an accessible disclosure target. */
    display: flex; /* Place the text and open cue on one flexible row. */
    align-items: baseline; /* Keep the cue aligned with the first line. */
    justify-content: space-between; /* Place the plus at a consistent end position. */
    gap: 24px; /* Prevent a long question touching its cue. */
    padding-block: 23px; /* Give each disclosure a generous click area. */
    font-weight: 500; /* Make questions distinct from their answers. */
    font-size: 0.96rem; /* Keep the question text clear and balanced. */
    cursor: pointer; /* Indicate the native interactive affordance. */
    list-style: none; /* Use the visible plus instead of inconsistent browser triangles. */
} /* Finish the question-summary action. */
.question summary::-webkit-details-marker { /* Remove Safari's duplicate disclosure marker. */
    display: none; /* Retain only the designed plus cue. */
} /* Finish the Safari marker reset. */
.question-answer { /* Keep answers visually subordinate and comfortably inset. */
    max-width: 760px; /* Limit answer measure on large page layouts. */
    padding: 0 40px 25px 0; /* Leave breathing room below the revealed answer. */
    color: var(--muted); /* Separate answer text from the darker question. */
    font-size: 0.92rem; /* Support dense practical answers without oversized type. */
} /* Finish FAQ answer presentation. */
.cta-section { /* Give commercial pages a clear final enquiry destination. */
    padding-block: 72px; /* Make the closing action area substantial. */
    background: var(--ink); /* Use the approved near-black surface. */
    color: var(--paper); /* Keep the text readable against it. */
} /* Finish final-action surface styling. */
.cta-layout { /* Align the closing message with its primary actions. */
    display: grid; /* Separate explanatory copy from controls. */
    grid-template-columns: minmax(0, 1fr) auto; /* Allow copy to grow while actions retain usable widths. */
    align-items: center; /* Centre the controls against the copy block. */
    gap: 60px; /* Keep the action area free of clutter. */
} /* Finish the closing-action grid. */
.cta-layout p { /* Keep the short closing instruction at a readable measure. */
    max-width: 660px; /* Avoid a long single line beside the actions. */
    color: #dedede; /* Soften supporting copy while retaining contrast. */
    font-size: 0.92rem; /* Keep the instruction secondary to its heading. */
} /* Finish closing-action body text. */
.cta-actions { /* Give the enquiry action and telephone a clear vertical order. */
    display: flex; /* Let actions align without fixed widths. */
    flex-direction: column; /* Keep the contact alternative directly beneath the main action. */
    align-items: flex-start; /* Retain natural control widths. */
    gap: 14px; /* Separate the two contact choices. */
} /* Finish closing-action controls. */
.site-footer { /* Finish the site with a strong charcoal business footer. */
    background: #151515; /* Use exact brand charcoal for the final business navigation. */
    color: #f4f4f4; /* Maintain clear contrast for the business details. */
    padding-top: 68px; /* Give the footer a deliberate opening space. */
} /* Finish finish the site with a strong charcoal business footer. */
.footer-main { /* Arrange contact identity and two useful navigation groups. */
    display: grid; /* Align footer columns with predictable wrapping. */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); /* Give the contact email extra room. */
    gap: 72px; /* Keep navigation groups visually separate. */
    padding-bottom: 54px; /* Separate main links from the legal strip. */
} /* Finish footer-column geometry. */
.footer-name { /* Use the same Poppins identity throughout the footer. */
    margin-bottom: 24px; /* Separate identity from the descriptive line. */
    font: 700 1.95rem/1.15 var(--heading-font); /* Use genuine Poppins bold for the footer identity. */
    letter-spacing: -0.035em; /* Keep the business name compact without condensed type. */
} /* Finish use the same poppins identity throughout the footer. */
.footer-identity > p:not(.footer-name) { /* Keep the factual descriptor subdued. */
    max-width: 300px; /* Avoid long body lines in the contact column. */
    font-size: 0.78rem; /* Make the descriptor secondary to the business name. */
    color: #cdcdcd; /* Preserve clear contrast on the dark footer. */
} /* Finish footer descriptor styling. */
.footer-identity .text-link { /* Put each verified contact method on its own line. */
    display: flex; /* Keep the contact cue aligned beside the label. */
    width: fit-content; /* Limit the clickable area to the contact item. */
    max-width: 100%; /* Prevent the email from escaping the contact column. */
    font-size: 0.81rem; /* Accommodate the long domain without shrinking excessively. */
} /* Finish footer contact links. */
.footer-email { /* Allow the business email to wrap on small screens and at high zoom. */
    overflow-wrap: anywhere; /* Break the long address only when necessary. */
} /* Finish long-email overflow protection. */
.site-footer nav h2 { /* Distinguish navigation groups using a compact heading. */
    margin-bottom: 22px; /* Separate the group title from links. */
    font: 500 0.85rem/1.4 var(--body-font); /* Keep footer titles quieter than page-section headings. */
    letter-spacing: 0; /* Avoid inherited display-heading spacing at small sizes. */
} /* Finish footer navigation titles. */
.site-footer nav ul { /* Keep footer navigation semantic and visually simple. */
    list-style: none; /* Remove native bullets from the navigation groups. */
    margin: 0; /* Use deliberate spacing around the group. */
    padding: 0; /* Align link labels with their heading. */
} /* Finish footer list reset. */
.footer-main nav a { /* Make each footer route a comfortable text target. */
    display: inline-block; /* Apply clickable vertical spacing to each label. */
    padding-block: 7px; /* Maintain clear separation between consecutive links. */
    color: #cdcdcd; /* Keep group links readable but subordinate to headings. */
    font-size: 0.79rem; /* Fit longer service labels on common screen widths. */
} /* Finish footer route links. */
.site-footer a:hover { /* Give footer links feedback against their dark background. */
    color: var(--paper); /* Brighten the full label instead of underlining it. */
} /* Finish footer hover feedback. */
.footer-bottom { /* Separate legal information from the main footer links. */
    display: flex; /* Align copyright and legal navigation horizontally on desktop. */
    justify-content: space-between; /* Give the two short groups separate edges. */
    align-items: center; /* Vertically align copyright with the links. */
    gap: 20px; /* Leave space if the groups wrap. */
    padding-block: 24px; /* Give the closing line comfortable vertical space. */
    border-top: 1px solid #444444; /* Use a content separator without adding button borders. */
    color: #c9c9c9; /* Keep legal copy readable on the footer. */
    font-size: 0.69rem; /* Make legal navigation quieter than primary footer routes. */
} /* Finish the footer legal strip. */
.footer-bottom p { /* Align the copyright line with the legal menu. */
    margin: 0; /* Remove paragraph spacing inside the closing flex row. */
} /* Finish copyright spacing. */
.footer-bottom nav ul { /* Keep legal links on a simple wrapping row. */
    display: flex; /* Lay legal items beside one another. */
    flex-wrap: wrap; /* Let legal items wrap on small screens. */
    gap: 10px 24px; /* Separate clickable labels in both directions. */
} /* Finish legal-navigation layout. */
.text-button { /* Make optional cookie settings feel like a normal footer action. */
    padding: 0; /* Align the label with nearby legal links. */
    color: inherit; /* Match its surrounding footer text colour. */
    background: transparent; /* Avoid inventing a second prominent action surface. */
    font: inherit; /* Keep the legal-row typography consistent. */
    border: 0; /* Honour the borderless button requirement. */
} /* Finish footer text-control styling. */
.breadcrumbs { /* Keep the page hierarchy clear without competing with the title. */
    padding-top: 28px; /* Separate the breadcrumb from the site header. */
    padding-bottom: 18px; /* Leave space before the main page intro. */
    font-size: 0.71rem; /* Keep hierarchy secondary to page content. */
    color: var(--muted); /* Use a readable neutral on white. */
} /* Finish breadcrumb typography and spacing. */
.breadcrumbs ol { /* Display each hierarchy step in a wrapping row. */
    display: flex; /* Put short breadcrumb items beside one another. */
    flex-wrap: wrap; /* Preserve readability at narrow widths. */
    gap: 8px 13px; /* Separate items even when they wrap. */
    list-style: none; /* Replace numbering with neutral hierarchy cues. */
    margin: 0; /* Remove the default list outer spacing. */
    padding: 0; /* Align the first breadcrumb with the content edge. */
} /* Finish breadcrumb-list geometry. */
.breadcrumbs li:not(:last-child)::after { /* Keep linked hierarchy steps visibly distinct. */
    content: '/'; /* Use a conventional hierarchy separator without drawing an underline. */
    margin-left: 13px; /* Leave room around the separator. */
    color: #777777; /* Keep separators quieter than linked text. */
} /* Finish breadcrumb separators. */
.inner-hero { /* Give each buying page a useful introduction and relevant photograph. */
    display: grid; /* Keep intro and image in complementary columns. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Balance the service-specific copy and scene. */
    align-items: center; /* Centre the text against the photograph. */
    gap: 64px; /* Prevent long headings crowding the image. */
    padding-block: 38px 76px; /* Give the page introduction a clear breathing area. */
} /* Finish service-page introduction geometry. */
.inner-hero-copy h1 { /* Fit service titles to their revised heading family. */
    font-size: clamp(2.25rem, 3.5vw, 3.55rem); /* Keep long service H1s readable with Poppins bold. */
} /* Finish fit service titles to their revised heading family. */
.inner-hero-copy p { /* Keep the opening practical explanation readable. */
    font-size: 0.94rem; /* Match the rest of the site body hierarchy. */
    color: var(--muted); /* Separate the description from the main title. */
} /* Finish service-introduction copy. */
.inner-hero-copy .button { /* Separate the enquiry action from the introduction. */
    margin-top: 10px; /* Create a clear next step after the final paragraph. */
} /* Finish service-hero action spacing. */
.inner-hero-image .stock-picture { /* Keep service images consistent without a decorative card frame. */
    aspect-ratio: 5 / 4; /* Provide useful scene height beside a substantial title. */
} /* Finish service-image framing. */
.article-layout { /* Place full service copy next to a small contextual sidebar. */
    display: grid; /* Keep long-form content and related routes clearly separate. */
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr); /* Give the substantive article most of the space. */
    gap: 100px; /* Prevent the sidebar feeling attached to the body text. */
    padding-bottom: 96px; /* Leave room before the closing action section. */
} /* Finish service article geometry. */
.article-copy { /* Protect readable long-form text from excessive line length. */
    min-width: 0; /* Allow long links and words to wrap within the grid. */
    max-width: 800px; /* Keep detailed explanations at a comfortable measure. */
} /* Finish article text measure. */
.prose-section { /* Group each authored topic with deliberate vertical rhythm. */
    margin-bottom: 48px; /* Separate subjects without decorative boxes. */
} /* Finish prose-section spacing. */
.prose-section h2 { /* Use a clear supporting hierarchy for detailed article topics. */
    font-size: clamp(1.55rem, 2.3vw, 2rem); /* Give detailed article headings a useful Poppins scale. */
    margin-bottom: 22px; /* Keep each topic heading separate from the explanation. */
} /* Finish use a clear supporting hierarchy for detailed article topics. */
.article-copy p, .prose p, .prose-section li { /* Set the tone of detailed practical content. */
    font-size: 0.94rem; /* Keep longer explanations comfortably readable. */
} /* Finish article body sizing. */
.content-list { /* Use real lists for practical seller checklists. */
    margin: 20px 0; /* Separate a checklist from surrounding paragraphs. */
    padding-left: 23px; /* Keep native bullets close to their text. */
} /* Finish content-list indentation. */
.content-list li { /* Give each practical checklist item its own reading space. */
    padding-left: 5px; /* Separate the bullet marker from its wording. */
    margin-bottom: 12px; /* Keep multi-line items from running together. */
} /* Finish checklist-item spacing. */
.content-list li::marker { /* Add a restrained brand cue to practical lists. */
    color: var(--blue); /* Distinguish markers without adding decorative icons. */
} /* Finish list-marker colour. */
.aside-contact { /* Keep supporting contact advice integrated with the darker palette. */
    background: #3c3c3c; /* Use a medium-charcoal contact panel within darker pages. */
    padding: 30px; /* Give the practical prompt enough space. */
    border-top: 4px solid var(--red); /* Use one restrained substantial red brand accent. */
} /* Finish keep supporting contact advice integrated with the darker palette. */
.aside-contact h2, .related-links h2, .form-aside h2 { /* Size sidebar headings for the requested typeface. */
    font-size: 1.45rem; /* Fit Poppins headings naturally within supporting columns. */
} /* Finish size sidebar headings for the requested typeface. */
.aside-contact p, .form-aside p { /* Make supporting guidance compact but readable. */
    font-size: 0.83rem; /* Balance the narrow sidebar with concise copy. */
} /* Finish supporting-column body type. */
.aside-contact .button { /* Fit the clear enquiry action within the narrow aside. */
    padding-inline: 16px; /* Avoid long labels creating an oversized button. */
    font-size: 0.8rem; /* Keep the call to action legible at the sidebar width. */
} /* Finish sidebar-button sizing. */
.related-links { /* Separate the authored onward routes from nearby article content. */
    margin-top: 44px; /* Establish a clear supporting navigation block. */
} /* Finish related-route spacing. */
.related-links ul { /* Keep contextual routes as a semantic plain list. */
    list-style: none; /* Relevant route icons already identify the linked destinations. */
    padding: 0; /* Align labels with the block heading. */
    margin: 18px 0 0; /* Set a comfortable gap beneath the title. */
} /* Finish related-link list geometry. */
.related-links li { /* Give each onward route a separate touch area. */
    margin-bottom: 8px; /* Avoid adjacent links appearing as continuous text. */
} /* Finish related-link item spacing. */
.article-copy .questions { /* Separate FAQs from preceding detailed sections. */
    margin-top: 64px; /* Give the question group its own place in the page hierarchy. */
} /* Finish article FAQ spacing. */
.standard-layout { /* Position supporting and legal pages at a comfortable reading width. */
    padding-top: 38px; /* Leave space after the breadcrumb. */
    padding-bottom: 88px; /* Give the final paragraph space before the footer. */
} /* Finish supporting-page wrapper spacing. */
.standard-layout > .article-copy { /* Place a readable article slightly inside the broader page grid. */
    margin-inline: auto; /* Centre legal and company-page copy without widening the line length. */
} /* Finish supporting-article alignment. */
.page-intro { /* Separate the title and introduction from supporting content. */
    padding-bottom: 36px; /* Give the main message a clear opening area. */
    max-width: 820px; /* Keep introductions readable on wide screens. */
} /* Finish standard page introduction spacing. */
.page-intro p { /* Make the page introduction slightly more prominent than detailed copy. */
    font-size: 1rem; /* Keep the opening explanation clear without oversized paragraphs. */
    color: var(--muted); /* Distinguish introductory prose from headings. */
} /* Finish introduction copy styling. */
.standard-image { /* Give an assigned supporting-page photo enough space around the article. */
    margin: 0 0 42px; /* Separate the image from the first detailed section. */
} /* Finish supporting-image spacing. */
.standard-image .stock-picture { /* Keep supporting photographs broad rather than card-shaped. */
    aspect-ratio: 16 / 9; /* Use a calm editorial image proportion. */
} /* Finish supporting-image crop. */
.hub-intro { /* Make the buying-directory opening useful and concise. */
    display: grid; /* Pair the main introduction with a short assessment note. */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); /* Give the page title most of the available width. */
    align-items: end; /* Align the note with the introduction's lower edge. */
    gap: 100px; /* Keep the short note visually distinct. */
    padding-block: 38px 80px; /* Separate the opening from the directories below. */
} /* Finish buying-hub introduction geometry. */
.hub-note { /* Make the assessment condition visible without turning it into a badge. */
    border-left: 4px solid var(--red); /* Mark the note with a substantial simple brand accent. */
    padding-left: 20px; /* Separate the condition from its marker. */
    color: var(--muted); /* Keep the practical note secondary to the introduction. */
    font-size: 0.87rem; /* Fit the short condition neatly beside the larger copy. */
} /* Finish buying-hub note styling. */
.hub-group { /* Use a mid-grey stock directory within the dark site. */
    background: #d0d0d0; /* Separate the first directory with a mid-grey surface. */
    color: #151515; /* Keep labels readable on the grey panel. */
    --muted: #454545; /* Adapt supporting copy to the lighter background. */
} /* Finish use a mid-grey stock directory within the dark site. */
.hub-group-light { /* Alternate directory surfaces without returning to white. */
    background: #373737; /* Alternate the second directory with medium charcoal. */
    color: #f4f4f4; /* Preserve bright readable category labels. */
    --muted: #c5c5c5; /* Restore muted light copy on the dark surface. */
} /* Finish alternate directory surfaces without returning to white. */
.hub-support, .form-support { /* Keep authored supporting copy below directories and forms readable. */
    max-width: 850px; /* Limit long paragraphs to a useful reading measure. */
    padding-bottom: 80px; /* Leave room before the next major page area. */
} /* Finish supporting-content wrapper. */
.contact-layout { /* Present the verified business contact details beside the introduction. */
    display: grid; /* Give introduction and direct contact their own columns. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Keep the two contact routes balanced. */
    gap: 80px; /* Leave enough room for the long email address. */
    padding-block: 38px 58px; /* Make the verified contact details the page's main focus. */
} /* Finish contact-page geometry. */
.contact-intro .button { /* Separate the detailed enquiry action from opening copy. */
    margin-top: 14px; /* Make the form link a distinct next step. */
} /* Finish contact-intro action spacing. */
.contact-details { /* Give verified contact methods a substantial dark panel. */
    padding: 38px; /* Frame contact information with useful white space. */
    background: var(--ink); /* Use the exact brand-black surface. */
    color: var(--paper); /* Keep details highly readable on that surface. */
} /* Finish direct-contact panel styling. */
.contact-details h2 { /* Keep the contact heading strong without crowding its column. */
    font-size: 2rem; /* Fit the Poppins contact heading inside its dark panel. */
} /* Finish keep the contact heading strong without crowding its column. */
.contact-details dl { /* Space the labelled methods away from the panel title. */
    margin: 32px 0; /* Give telephone and email their own clear block. */
} /* Finish contact-definition spacing. */
.contact-details dl > div + div { /* Separate the two contact methods without a decorative box. */
    margin-top: 24px; /* Give each verified route a distinct reading area. */
} /* Finish contact-method separation. */
.contact-details dt { /* Label the contact information before the actual linked value. */
    color: #c9c9c9; /* Make labels quieter than their actionable value. */
    font-size: 0.77rem; /* Keep contact labels subordinate. */
} /* Finish contact-label styling. */
.contact-details dd { /* Keep actual contact values aligned with the labels. */
    margin: 7px 0 0; /* Remove the browser's definition-list indentation. */
    font-size: 1rem; /* Keep the full address and number readable. */
    overflow-wrap: anywhere; /* Protect layout from the long business email at high zoom. */
} /* Finish contact-value typography. */
.contact-details a:hover { /* Preserve contact-link visibility on the dark panel. */
    color: #d4dfff; /* Give a subtle high-contrast hover response without underlines. */
} /* Finish dark contact-link feedback. */
.contact-details > p:last-child { /* Keep the practical contact instruction subordinate. */
    font-size: 0.8rem; /* Avoid competing with the verified methods. */
    color: #dedede; /* Maintain readable contrast against the panel. */
} /* Finish contact-panel supporting copy. */
.form-intro { /* Keep the enquiry-page introduction clear before the fields begin. */
    padding-block: 36px; /* Leave breathing room between hierarchy and the form. */
} /* Finish form-introduction spacing. */
.form-intro h1, .form-intro p { /* Keep form-opening lines from stretching across the entire desktop. */
    max-width: 850px; /* Use a comfortable title and instruction measure. */
} /* Finish form-introduction measure. */
.form-layout { /* Give the secure form most of the page width and supporting advice less. */
    display: grid; /* Separate fields from optional photographic guidance. */
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.8fr); /* Let two-column fields fit naturally in the main area. */
    gap: 74px; /* Avoid crowding the form with secondary advice. */
    align-items: start; /* Prevent the aside stretching to match a long form. */
    padding-bottom: 80px; /* Keep subsequent instructions away from the submit action. */
} /* Finish enquiry-page geometry. */
.form-panel { /* Set a calm practical area for entering stock details. */
    min-width: 0; /* Prevent long filenames or messages forcing the layout wider. */
} /* Finish form-panel width protection. */
fieldset { /* Keep semantic form groups free of default browser box decoration. */
    min-width: 0; /* Prevent intrinsic fieldset sizing from overflowing small screens. */
    margin: 0 0 34px; /* Separate contact, stock and photograph groups clearly. */
    padding: 0; /* Let the field grid own its internal spacing. */
    border: 0; /* Avoid generic boxes around every form section. */
} /* Finish form-group reset. */
legend { /* Give each native fieldset a clear section title. */
    padding: 0 0 22px; /* Separate group names from their first fields. */
    font: 600 1.85rem/1.2 var(--heading-font); /* Match the site's substantive smaller headings. */
} /* Finish form-group heading style. */
.field-optional, .field-required { /* Keep requirement labels distinct but subordinate to their field names. */
    font: 400 0.73rem/1.5 var(--body-font); /* Preserve legibility without competing with the label. */
    color: var(--muted); /* Use the accessible neutral hint colour. */
} /* Finish requirement-label typography. */
.form-details { /* Give optional access and food information the same calm disclosure surface. */
    margin-block: 28px; /* Separate optional context from the main form sections. */
    padding: 22px; /* Keep controls away from the grey panel edge. */
    background: var(--soft); /* Group specialist fields without thin outlined cards. */
} /* Finish optional form-detail grouping. */
.form-details > summary { /* Keep optional context accessible without custom disclosure scripting. */
    cursor: pointer; /* Show that the native summary reveals more fields. */
    font-weight: 500; /* Make the label distinct from explanatory copy. */
    font-size: 0.9rem; /* Keep the disclosure title proportional to form labels. */
} /* Finish optional-detail control style. */
.form-details[open] > summary { /* Leave space beneath an expanded optional-details label. */
    margin-bottom: 22px; /* Prevent the first field or explanation crowding the summary. */
} /* Finish optional-detail expanded spacing. */
.form-details > p, #photos-help { /* Keep specialist instructions and upload guidance readable and secondary. */
    font-size: 0.81rem; /* Fit practical explanatory copy without oversized body text. */
    line-height: 1.75; /* Let date and file conditions wrap comfortably. */
} /* Finish specialist form-instruction typography. */
.form-privacy, .form-alternative { /* Give privacy information and direct-contact alternatives a clear supporting hierarchy. */
    font-size: 0.8rem; /* Keep these instructions proportionate to the form. */
    margin-block: 22px; /* Separate support copy from the main submission action. */
    overflow-wrap: anywhere; /* Keep the full contact email within the form on small screens. */
} /* Finish form-supporting copy. */
.form-grid { /* Arrange related fields side by side only when the page allows it. */
    display: grid; /* Align labels and controls in a predictable layout. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Use two equal desktop field columns. */
    gap: 26px 24px; /* Keep fields clearly separated. */
} /* Finish form-field grid. */
.form-field { /* Keep each field's label, hint and error together. */
    min-width: 0; /* Allow native inputs and long hints to shrink within the grid. */
} /* Finish individual-field width protection. */
.form-field--wide { /* Let descriptions, photographs and conditions span the form. */
    grid-column: 1 / -1; /* Use the full available field-grid width. */
} /* Finish full-width field placement. */
.form-field label, .form-field legend { /* Make field labels clear without oversized interface typography. */
    display: block; /* Put each label above its control. */
    margin-bottom: 8px; /* Separate the label from the input surface. */
    font-size: 0.87rem; /* Keep labels readable and compact. */
    font-weight: 500; /* Use the genuine medium face for form labels. */
} /* Finish field-label typography. */
input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea { /* Provide strong, practical form fields without styling hidden security tokens. */
    width: 100%; /* Fill the field's responsive grid column. */
    max-width: 100%; /* Prevent native controls exceeding the grid at small widths. */
    min-height: 52px; /* Give every visible control a usable touch height. */
    padding: 12px 13px; /* Keep entered text away from the field edge. */
    border: 2px solid #b8b8b8; /* Use an accessible field boundary, distinct from forbidden thin button borders. */
    border-radius: 4px; /* Keep input corners modest and consistent. */
    color: var(--ink); /* Preserve strong contrast for typed values. */
    background: var(--paper); /* Keep entered content on a plain reading surface. */
    font-size: 0.92rem; /* Use comfortably readable control text. */
    line-height: 1.5; /* Accommodate multiline controls and browser differences. */
} /* Finish text-like control styling. */
textarea { /* Give the seller room to describe condition and quantities. */
    min-height: 180px; /* Avoid a cramped one-line message field. */
    resize: vertical; /* Permit useful expansion without breaking horizontal layout. */
} /* Finish the stock-description control. */
input::placeholder, textarea::placeholder { /* Keep any optional examples readable but clearly distinct. */
    color: #626262; /* Retain contrast against the white input surface. */
    opacity: 1; /* Prevent browsers from making placeholder examples too faint. */
} /* Finish placeholder treatment. */
input[type='checkbox'], input[type='radio'] { /* Keep consent and acknowledgment controls easy to see and use. */
    width: 20px; /* Give the native control a practical visual size. */
    height: 20px; /* Match width so checkbox geometry stays square. */
    flex-shrink: 0; /* Prevent a long label compressing its control. */
    accent-color: var(--blue); /* Use the exact action colour for checked state. */
    vertical-align: middle; /* Align controls with adjacent label text. */
    margin-right: 8px; /* Separate the clickable control from its wording. */
} /* Finish native choice-control styling. */
.form-field small, .field-help, .field-hint, .form-note { /* Give instructions and upload limits a distinct quieter text level. */
    display: block; /* Put supporting information on a readable line. */
    margin-top: 7px; /* Keep hints associated with their input. */
    color: var(--muted); /* Maintain clear contrast on white. */
    font-size: 0.76rem; /* Make hints subordinate to field labels. */
    line-height: 1.7; /* Let longer instructions wrap comfortably. */
} /* Finish field-hint presentation. */
.form-field .text-link { /* Make policy and supporting links visible within field guidance. */
    font-size: inherit; /* Keep guidance links aligned with their surrounding text. */
} /* Finish form contextual-link sizing. */
.field-error { /* Give validation errors an unmistakable text treatment. */
    margin: 8px 0 0; /* Keep each error close to its affected control. */
    color: #a61d1a; /* Use a dark accessible error red on the white surface. */
    font-size: 0.79rem; /* Keep errors clear without overwhelming the form. */
    font-weight: 500; /* Distinguish errors from neutral field hints. */
} /* Finish inline validation feedback. */
[aria-invalid='true'] { /* Make invalid fields visually identifiable without relying only on text. */
    border-color: #a61d1a !important; /* Apply the accessible error colour to the actual control boundary. */
} /* Finish invalid-field styling. */
.error-summary { /* Present server-side form errors as a readable actionable group. */
    margin-bottom: 32px; /* Separate the summary from the first form field. */
    padding: 24px; /* Give error explanations enough reading space. */
    border-left: 4px solid var(--red); /* Use a substantial red cue without enclosing every item. */
    background: #fff0ef; /* Distinguish feedback from ordinary field content. */
} /* Finish error-summary surface. */
.error-summary h2 { /* Keep the correction heading at a sensible form scale. */
    font-size: 1.9rem; /* Make the error group clear without competing with the page H1. */
} /* Finish error-summary heading. */
.error-summary ul { /* Lay out individual correction routes as real list items. */
    margin: 16px 0 0; /* Separate errors from their introductory sentence. */
    padding-left: 20px; /* Keep bullets visible inside the summary. */
} /* Finish error-summary list geometry. */
.error-summary a { /* Give each correction link a persistent visual action cue. */
    color: #a61d1a; /* Match the accessible error text colour. */
    font-weight: 500; /* Distinguish field-jump links from plain explanatory copy. */
} /* Finish error-summary link styling. */
.form-trap { /* Remove the anti-spam field from normal visual and keyboard interaction. */
    position: absolute; /* Keep the trap outside normal page layout. */
    width: 1px; /* Reduce the offscreen element to minimal geometry. */
    height: 1px; /* Prevent hidden trap content reserving vertical space. */
    overflow: hidden; /* Ensure the hidden field cannot appear visually. */
    clip-path: inset(50%); /* Hide the trap without breaking ordinary form submission. */
    white-space: nowrap; /* Keep its hidden label from creating unintended wrap dimensions. */
} /* Finish anti-spam field hiding. */
#food-details { /* Keep food-specific information available with native no-script disclosure behaviour. */
    margin-block: 28px; /* Separate conditional details from the main field grid. */
    background: var(--soft); /* Group these specialist fields without another bordered card. */
    padding: 22px; /* Give labels and disclosure controls breathing room. */
} /* Finish food-detail grouping. */
#food-details > summary { /* Make the specialist information reveal clear and keyboard accessible. */
    cursor: pointer; /* Indicate the native disclosure action. */
    font-weight: 500; /* Keep the disclosure label prominent enough to notice. */
    font-size: 0.9rem; /* Match the surrounding form-label hierarchy. */
} /* Finish the food-detail disclosure label. */
#food-details[open] > summary { /* Separate the expanded label from its additional fields. */
    margin-bottom: 24px; /* Keep an open disclosure from crowding the first label. */
} /* Finish expanded food-detail spacing. */
input[type='file'] { /* Keep native file selection usable on mobile without custom scripting. */
    overflow: hidden; /* Prevent a long selected filename pushing outside the form. */
    font-size: 0.79rem !important; /* Fit native upload labels within narrow field columns. */
} /* Finish file-input containment. */
input[type='file']::file-selector-button { /* Make the native upload action follow the borderless button direction. */
    border: 0; /* Remove thin browser-default button borders. */
    border-radius: 4px; /* Match the form's restrained corner styling. */
    padding: 8px 12px; /* Give the upload control a practical click area. */
    margin-right: 12px; /* Separate the upload action from the selected filename. */
    background: var(--ink); /* Use a solid brand-black action fill. */
    color: var(--paper); /* Keep the native action label readable. */
    font: inherit; /* Match surrounding upload-control typography. */
    cursor: pointer; /* Retain the conventional pointer affordance. */
} /* Finish the native file-selector action. */
.form-actions { /* Separate the main submit action from final acknowledgements. */
    margin-top: 30px; /* Give the final action a clear place in the form. */
} /* Finish form action spacing. */
.form-aside { /* Integrate enquiry guidance with the darker business design. */
    background: #3c3c3c; /* Place optional photo guidance on medium charcoal. */
    padding: 28px; /* Keep the advice readable beside the embedded form. */
} /* Finish integrate enquiry guidance with the darker business design. */
.form-support-image { /* Place any supporting example between useful photo instructions. */
    margin-block: 24px; /* Avoid attaching the picture directly to surrounding text. */
} /* Finish form illustration spacing. */
.form-support-image .stock-picture { /* Keep the optional photo example compact. */
    aspect-ratio: 4 / 3; /* Match the site's practical photographic proportions. */
} /* Finish form illustration framing. */
.sitemap-groups { /* Arrange the human sitemap as meaningful named groups. */
    display: grid; /* Put service and information groups beside each other. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Avoid a dense four-column wall of links. */
    gap: 58px 88px; /* Keep grouped routes visually distinct. */
    padding-block: 30px 56px; /* Space the directory away from its opening copy. */
} /* Finish the HTML-sitemap layout. */
.sitemap-groups h2 { /* Keep group headings compact relative to the sitemap title. */
    font-size: 2.3rem; /* Use a clear but subordinate heading scale. */
} /* Finish sitemap group-title sizing. */
.confirmation-page { /* Give genuine form confirmation a calm, readable layout. */
    max-width: 860px; /* Keep the short confirmation from spreading across the viewport. */
    padding-block: 90px 120px; /* Leave room around the submitted-state message. */
} /* Finish confirmation-page geometry. */
.confirmation-guidance { /* Separate neutral follow-up guidance from the actual submission state. */
    margin-top: 40px; /* Give the status explanation its own readable opening area. */
} /* Finish confirmation-guidance spacing. */
.confirmation-page p { /* Keep the factual confirmation explanation comfortably sized. */
    max-width: 680px; /* Limit its reading line length. */
    color: var(--muted); /* Make the explanation secondary to its heading. */
} /* Finish confirmation body type. */
.consent-banner { /* Keep optional analytics choices readable within the stronger dark brand. */
    position: fixed; /* Keep the optional choice region available without moving page content. */
    z-index: 30; /* Place choices above ordinary content. */
    left: 20px; /* Keep controls away from viewport edges. */
    right: 20px; /* Let the region shrink on small screens. */
    bottom: 20px; /* Keep the panel above the browser edge. */
    max-width: 1120px; /* Limit the explanation to a useful width. */
    max-height: calc(100dvh - 40px); /* Keep choices reachable at high zoom. */
    overflow-y: auto; /* Allow vertical scrolling in short viewports. */
    margin-inline: auto; /* Centre the consent panel. */
    padding: 28px; /* Leave space around explanation and controls. */
    display: grid; /* Align explanation and equivalent choices. */
    grid-template-columns: minmax(0, 1fr) auto; /* Keep buttons usable beside explanatory copy. */
    gap: 32px; /* Separate the controls from their explanation. */
    align-items: center; /* Align both parts vertically. */
    background: #e0e0e0; /* Use a light-grey decision panel rather than pure white. */
    color: #151515; /* Keep the decision text readable. */
    box-shadow: 0 8px 48px rgb(0 0 0 / 30%); /* Separate the temporary choice region from dark content. */
    border-top: 4px solid var(--blue); /* Use one restrained brand-blue accent. */
} /* Finish keep optional analytics choices readable within the stronger dark brand. */
.consent-banner h2 { /* Keep the consent title proportionate to a small decision region. */
    font-size: 1.8rem; /* Avoid overwhelming the page's main message. */
} /* Finish consent-heading sizing. */
.consent-banner p, .consent-banner .text-link { /* Keep the analytics explanation concise and readable. */
    font-size: 0.78rem; /* Fit the necessary purpose and policy information. */
} /* Finish consent-copy typography. */
.consent-banner p { /* Reduce unnecessary gaps inside the short consent explanation. */
    margin-bottom: 2px; /* Keep the policy route close to the stated purpose. */
} /* Finish consent paragraph spacing. */
.consent-actions { /* Keep reject and accept equally available as explicit choices. */
    display: flex; /* Put both decisions beside each other when space allows. */
    flex-wrap: wrap; /* Let choices wrap instead of shrinking their targets. */
    gap: 12px; /* Give both controls comparable separation. */
} /* Finish consent-choice layout. */
.consent-actions .button { /* Give both optional-analytics choices equivalent geometry. */
    min-width: 158px; /* Match the visual weight of reject and accept. */
    font-size: 0.78rem; /* Fit the explicit decision labels. */
} /* Finish consent-button parity. */

.icon { /* Give every bundled Lucide symbol the same crisp accessible geometry. */
    display: inline-block; /* Keep symbols available beside ordinary text labels. */
    width: 22px; /* Use a practical default size for action and contact icons. */
    height: 22px; /* Preserve the square Lucide viewbox proportions. */
    flex-shrink: 0; /* Prevent wrapping labels from compressing their icon. */
    vertical-align: middle; /* Align inline contact symbols with their label. */
    color: currentColor; /* Follow the contrast of the surrounding link or action. */
} /* Finish the shared local icon presentation. */
.button { /* Keep the primary action and its relevant symbol comfortably separated. */
    gap: 11px; /* Keep labels separated from their relevant Lucide action icon. */
} /* Finish action icon alignment. */
.service-icon { /* Identify the service with a real category symbol instead of arbitrary numbering. */
    padding-top: 3px; /* Align the symbol with the linked service title. */
    color: #e0e0e0; /* Keep the icon clear against the charcoal service section. */
} /* Finish service-icon positioning. */
.service-icon .icon { /* Give service symbols enough detail to read without decorative badges. */
    width: 34px; /* Use a clear size for the relevant stock symbol. */
    height: 34px; /* Preserve the original icon proportions. */
} /* Finish service-icon dimensions. */
.process-icon { /* Give every factual selling stage a recognisable relevant symbol. */
    margin-bottom: 24px; /* Separate the symbol from its practical heading. */
    color: #f0f0f0; /* Keep the icon readable on medium charcoal. */
} /* Finish process icon spacing. */
.process-icon .icon { /* Make process symbols clear within the open step layout. */
    width: 36px; /* Reserve enough size for the clipboard, search, agreement and truck. */
    height: 36px; /* Preserve square Lucide proportions. */
} /* Finish process icon geometry. */
.route-index .icon { /* Keep category symbols visually distinct from their Poppins label. */
    width: 26px; /* Give stock and asset icons a readable directory size. */
    height: 26px; /* Keep icon proportions consistent. */
} /* Finish category icon sizing. */
.question summary > .icon { /* Use the real Lucide plus as the native disclosure indicator. */
    width: 22px; /* Keep the control cue proportionate to the question text. */
    height: 22px; /* Preserve the plus shape without a text-glyph substitute. */
    color: inherit; /* Maintain contrast on the current question surface. */
} /* Finish question control icon styling. */
.question[open] summary > .icon { /* Show the open disclosure state without changing the question text. */
    transform: rotate(45deg); /* Turn the plus into a clear closing symbol. */
} /* Finish the native disclosure state cue. */
.menu-close-icon, .menu-toggle[aria-expanded='true'] .menu-open-icon { /* Display only the appropriate native menu-state icon. */
    display: none; /* Avoid showing both open and close controls together. */
} /* Finish hidden menu-state icons. */
.menu-toggle[aria-expanded='true'] .menu-close-icon { /* Show the real Lucide close symbol while navigation is open. */
    display: inline-flex; /* Keep the close icon aligned with the Menu label. */
} /* Finish the open-menu icon state. */
.menu-open-icon { /* Align the compact Lucide menu symbol beside its label. */
    display: inline-flex; /* Avoid inline baseline space around the symbol. */
} /* Finish the closed-menu icon alignment. */
.header-utility { /* Preserve the factual top-line contact detail on charcoal. */
    color: #c5c5c5; /* Keep secondary header text readable. */
} /* Finish dark utility-line contrast. */
.contact-details dd a { /* Align contact values with meaningful phone and mail icons. */
    display: inline-flex; /* Keep the icon attached to the contact route. */
    align-items: center; /* Centre icons against the visible number or address. */
    gap: 12px; /* Separate each value from its relevant icon. */
    max-width: 100%; /* Keep long email labels within the contact panel. */
} /* Finish direct-contact icon alignment. */
.cognito-form-shell { /* Give the independent Cognito enquiry a clear light-grey working surface. */
    padding: clamp(22px, 3vw, 40px); /* Keep the embedded fields readable at desktop and mobile widths. */
    background: #e4e4e4; /* Separate the working form from the surrounding charcoal page. */
    color: #151515; /* Provide readable context before the embedded form loads. */
    min-width: 0; /* Prevent the third-party embed from forcing horizontal overflow. */
    border-top: 4px solid var(--blue); /* Introduce a single restrained action-colour accent. */
    --muted: #454545; /* Keep local form guidance readable on light grey. */
} /* Finish the embedded enquiry surface. */
.cognito-form-shell h2 { /* Make the form's real title visible before its fields. */
    margin-bottom: 26px; /* Separate Your stock enquiry from the hosted form. */
    font: 600 clamp(1.45rem, 2.3vw, 2rem)/1.25 var(--heading-font); /* Use genuine Poppins instead of a capitalised preheading. */
    color: #151515; /* Preserve contrast on the light-grey form surface. */
} /* Finish the visible enquiry form heading. */
.cognito-form-shell iframe { /* Keep the hosted form inside its allocated responsive column. */
    width: 100%; /* Follow the same width as the working surface. */
    max-width: 100%; /* Prevent native embed dimensions from causing overflow. */
    border: 0; /* Avoid a thin iframe outline around the embedded fields. */
} /* Finish the embedded form frame. */
.form-layout { /* Give the real hosted form more working room beside its supporting guidance. */
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 0.8fr); /* Let the hosted field layout use most of the available width. */
    gap: 48px; /* Keep guidance separate without squeezing the embed. */
} /* Finish the revised hosted-form composition. */

@media (max-width: 1150px) { /* Reflow the header before labels or the logo begin to collide. */
    .header-main { /* Allow the menu to occupy its own row at narrower desktop widths. */
        flex-wrap: wrap; /* Keep both logo and navigation fully visible without scripting. */
        row-gap: 23px; /* Separate the brand row from the navigation row. */
    } /* Finish intermediate header layout. */
    .site-nav { /* Give the full menu enough width on smaller laptops. */
        width: 100%; /* Place the navigation below the logo when space is limited. */
    } /* Finish intermediate navigation width. */
    .site-nav ul { /* Distribute the readable menu across the available row. */
        justify-content: space-between; /* Avoid a dense cluster of menu links. */
    } /* Finish intermediate menu distribution. */
    .hero-copy { /* Reduce side padding while keeping the main content readable. */
        padding-right: 32px; /* Free up headline width in the 45-percent column. */
    } /* Finish intermediate hero spacing. */
    .article-layout { /* Reduce the gap between detailed content and its sidebar. */
        gap: 58px; /* Preserve useful column widths on narrower desktops. */
    } /* Finish intermediate article spacing. */
    .footer-main { /* Keep the footer columns readable at laptop widths. */
        gap: 40px; /* Reduce open space before shrinking any contact text. */
    } /* Finish intermediate footer spacing. */
} /* Finish intermediate-width adjustments. */
@media (max-width: 900px) { /* Switch complex multi-column layouts before content becomes cramped. */
    .header-main { /* Keep identity and the progressive mobile control on one row. */
        padding-block: 22px; /* Maintain a compact but deliberate mobile header. */
        gap: 20px; /* Leave space beside the brand mark. */
    } /* Finish compact-header spacing. */
    .brand { /* Keep the full horizontal logo legible on medium screens. */
        width: 230px; /* Leave space for the optional menu action. */
    } /* Finish medium logo size. */
    .js .menu-toggle { /* Reveal the menu control only when its handler is installed. */
        display: inline-flex; /* Keep Menu and its plus aligned as one button. */
        align-items: center; /* Centre the symbol beside its label. */
    } /* Finish progressive-menu visibility. */
    .site-nav ul { /* Keep the no-script menu usable as a wrapping row. */
        flex-wrap: wrap; /* Allow all routes to appear without horizontal overflow. */
        justify-content: flex-start; /* Give each wrapped item natural placement. */
        gap: 10px 25px; /* Separate both rows and individual menu links. */
    } /* Finish no-script compact navigation. */
    .js .site-nav[data-open='false'] { /* Collapse mobile navigation only after enhancement is available. */
        display: none; /* Remove closed navigation from both view and keyboard order. */
    } /* Finish enhanced closed-menu state. */
    .js .site-nav[data-open='true'] ul { /* Make the opened navigation easy to scan and use. */
        display: grid; /* Put each route on its own accessible row. */
        grid-template-columns: 1fr; /* Avoid compressed side-by-side mobile labels. */
        gap: 0; /* Let each link's padding provide its target spacing. */
    } /* Finish open-menu layout. */
    .js .site-nav a:not(.button) { /* Enlarge mobile navigation targets. */
        padding-block: 13px; /* Give each open menu row comfortable height. */
        font-size: 0.95rem; /* Use readable mobile navigation typography. */
    } /* Finish mobile link targets. */
    .js .nav-action { /* Separate the primary action from the last ordinary route. */
        padding-top: 12px; /* Keep the solid button from crowding Contact. */
    } /* Finish mobile menu action spacing. */
    .hero { /* Stack the main message before its supporting image on smaller screens. */
        grid-template-columns: minmax(0, 1fr); /* Preserve a clear reading and action order. */
        min-height: auto; /* Let content determine the stacked hero height. */
    } /* Finish compact hero structure. */
    .hero-copy { /* Align the stacked hero wording with the page gutters. */
        padding: 62px var(--gutter); /* Give the opening message generous but controlled space. */
    } /* Finish stacked-hero spacing. */
    .hero-copy-inner { /* Let the short opening paragraph use a useful mobile measure. */
        max-width: 650px; /* Avoid an artificially narrow column on tablets. */
    } /* Finish stacked hero text measure. */
    .hero h1 { /* Keep the short homepage title prominent in its wider stacked panel. */
        font-size: clamp(3rem, 6.5vw, 4.5rem); /* Scale smoothly without relying on desktop column widths. */
        max-width: 610px; /* Retain a strong headline shape on larger tablets. */
    } /* Finish stacked hero headline. */
    .hero-image .stock-picture { /* Reserve image height without maintaining the tall desktop panel. */
        aspect-ratio: 16 / 9; /* Use a broad mobile editorial crop. */
    } /* Finish compact hero crop. */
    .hero-image img { /* Remove the desktop photograph's minimum height. */
        min-height: 0; /* Let the responsive picture ratio determine the image size. */
    } /* Finish compact hero image sizing. */
    .editorial-layout, .category-layout { /* Keep title and copy readable on medium screens. */
        gap: 40px; /* Reduce the wide desktop editorial gutter. */
    } /* Finish compact editorial spacing. */
    .service-index { /* Preserve two useful service columns at tablet width. */
        column-gap: 36px; /* Reduce empty space before reducing text size. */
    } /* Finish compact service spacing. */
    .process-list { /* Give each process explanation enough width on tablets. */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Use two rows instead of four cramped columns. */
        gap: 38px; /* Keep stage groups distinct in both directions. */
    } /* Finish compact process layout. */
    .feature-layout, .export-layout { /* Keep image features balanced when the viewport narrows. */
        gap: 36px; /* Reduce the open desktop gutter while retaining separate columns. */
    } /* Finish compact feature spacing. */
    .inner-hero { /* Preserve enough width for long service titles. */
        gap: 34px; /* Reduce the intro-to-image gap on tablets. */
    } /* Finish compact inner-page hero spacing. */
    .article-layout { /* Move supporting routes below the substantive article at tablet widths. */
        grid-template-columns: minmax(0, 1fr); /* Give the full content a readable single-column measure. */
        gap: 48px; /* Separate the supporting material from the article. */
    } /* Finish compact article layout. */
    .article-aside { /* Keep the enquiry prompt and related routes compact below the article. */
        display: grid; /* Arrange supporting groups beside each other when possible. */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Give both groups a practical half-width area. */
        gap: 36px; /* Separate the two supporting groups. */
    } /* Finish compact article aside. */
    .article-aside .related-links { /* Align related navigation with the enquiry block. */
        margin-top: 0; /* Remove desktop vertical separation in the new horizontal arrangement. */
    } /* Finish compact related-link alignment. */
    .hub-intro, .contact-layout { /* Keep introductory content and verified details from becoming too narrow. */
        gap: 42px; /* Reduce the desktop gap at tablet widths. */
    } /* Finish compact hub and contact spacing. */
    .form-layout { /* Give field labels and upload controls more room on tablets. */
        grid-template-columns: minmax(0, 1fr); /* Move optional advice below the usable form. */
        gap: 42px; /* Separate the supporting guidance from submission controls. */
    } /* Finish compact enquiry layout. */
    .form-aside { /* Avoid an unnecessarily tall guidance block after the form. */
        max-width: 720px; /* Keep the photo advice at a comfortable reading width. */
    } /* Finish compact form-advice measure. */
    .form-support-image { /* Keep an optional image proportionate below the form. */
        max-width: 360px; /* Avoid making secondary photo guidance visually dominant. */
    } /* Finish compact form-example sizing. */
    .cta-layout { /* Keep the final action group readable when horizontal space is limited. */
        grid-template-columns: minmax(0, 1fr); /* Place actions below the full message. */
        gap: 28px; /* Keep the actions associated with the closing instruction. */
    } /* Finish compact closing-action layout. */
    .cta-actions { /* Use available width for the two contact alternatives. */
        flex-direction: row; /* Let button and telephone sit together where possible. */
        flex-wrap: wrap; /* Preserve usability when either action wraps. */
        align-items: center; /* Align the text route with the button's centre. */
        gap: 18px 26px; /* Keep both contact methods separate. */
    } /* Finish compact closing-action group. */
    .footer-main { /* Avoid squeezing the contact details into three small columns. */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Keep navigation groups in two readable columns. */
        gap: 36px; /* Give each group enough separation. */
    } /* Finish compact footer grid. */
    .footer-identity { /* Let the verified contact information use the full footer width. */
        grid-column: 1 / -1; /* Put identity above the two navigation groups. */
    } /* Finish compact footer-identity placement. */
    .footer-bottom { /* Keep legal links readable instead of compressing them beside copyright. */
        align-items: flex-start; /* Align wrapped groups at the top. */
        flex-direction: column; /* Place legal navigation below copyright. */
    } /* Finish compact footer legal strip. */
    .consent-banner { /* Keep analytics choices usable on medium or zoomed viewports. */
        grid-template-columns: minmax(0, 1fr); /* Move buttons below the purpose explanation. */
        gap: 18px; /* Keep the two parts visually connected. */
    } /* Finish compact consent layout. */
} /* Finish tablet and compact-desktop adjustments. */
@media (max-width: 620px) { /* Simplify all content layouts for narrow phones and high zoom. */
    body { /* Keep body text comfortable without creating narrow lines. */
        font-size: 0.94rem; /* Use readable near-default phone text sizing. */
    } /* Finish narrow body type. */
    .header-utility { /* Keep the top contact line uncluttered on phones. */
        font-size: 0.65rem; /* Fit both short verified details naturally. */
        gap: 12px; /* Avoid excessive separation on the smallest screens. */
    } /* Finish narrow utility typography. */
    .header-main { /* Keep the brand and menu action on one compact line. */
        gap: 12px; /* Leave enough room for the complete logo. */
        padding-block: 21px; /* Preserve deliberate white space without a tall header. */
    } /* Finish narrow header geometry. */
    .brand { /* Scale the horizontal wordmark without cutting it off. */
        width: min(210px, calc(100% - 104px)); /* Reserve room for the mobile menu control at 320px. */
    } /* Finish narrow logo sizing. */
    .menu-toggle { /* Keep Menu readable beside the smaller wordmark. */
        padding-inline: 12px; /* Reduce extra space without shrinking the touch height. */
    } /* Finish narrow menu-control spacing. */
    .hero-copy { /* Keep the phone opening concise while preserving hierarchy. */
        padding-block: 50px; /* Make room for the H1 and two practical actions. */
    } /* Finish narrow hero spacing. */
    .hero h1 { /* Retain a distinctive headline without overwhelming small screens. */
        font-size: clamp(2.65rem, 10vw, 3.9rem); /* Allow the short headline to wrap naturally. */
    } /* Finish narrow hero typography. */
    .hero-copy p { /* Keep the opening paragraph legible on narrow displays. */
        font-size: 0.9rem; /* Avoid tiny text while fitting a practical introduction. */
    } /* Finish narrow hero prose. */
    .hero-actions { /* Make the two starting routes comfortable on narrow phones. */
        gap: 14px 22px; /* Preserve clear spacing when actions stack. */
    } /* Finish narrow action-group spacing. */
    .hero-image .stock-picture { /* Use the planned dedicated mobile scene with enough visible height. */
        aspect-ratio: 4 / 3; /* Show more of the practical warehouse subject on phones. */
    } /* Finish narrow hero crop. */
    .editorial-layout, .category-layout, .service-index, .feature-layout, .export-layout, .inner-hero, .article-aside, .hub-intro, .contact-layout, .sitemap-groups { /* Use one readable column whenever paired text would become cramped. */
        grid-template-columns: minmax(0, 1fr); /* Stack each topic in its existing logical source order. */
        gap: 30px; /* Keep related content grouped without excessive mobile gaps. */
    } /* Finish narrow single-column layouts. */
    .editorial-layout > h2 { /* Let short section titles use the available phone width. */
        max-width: none; /* Remove a desktop-only editorial measure. */
        margin-bottom: 0; /* Let the grid gap supply the title-to-copy spacing. */
    } /* Finish narrow editorial headings. */
    .section-heading { /* Reduce desktop spacing before compact indexes. */
        margin-bottom: 28px; /* Keep related entries close to their heading. */
    } /* Finish narrow section-title spacing. */
    .service-index { /* Let the service-entry rules create the list's vertical rhythm. */
        row-gap: 0; /* Avoid duplicate spacing between divided entries. */
    } /* Finish narrow service-list rhythm. */
    .service-item { /* Keep service descriptions comfortably aligned on phones. */
        grid-template-columns: 36px minmax(0, 1fr); /* Preserve the marker without taking too much text width. */
        gap: 11px; /* Tighten the icon-to-heading gap slightly. */
        padding-block: 25px; /* Retain a substantial linked-entry touch area. */
    } /* Finish narrow service-entry geometry. */
    .service-item h3 { /* Keep linked service titles readable beside their arrows. */
        font-size: 1.2rem; /* Avoid overly tall wraps in the smaller text column. */
    } /* Finish narrow service-heading scale. */
    .process-list { /* Keep four process steps readable in two compact columns where possible. */
        gap: 32px 24px; /* Leave enough separation between stage explanations. */
    } /* Finish narrow process spacing. */
    .process-list h3 { /* Make process titles fit their smaller phone columns. */
        font-size: 1.1rem; /* Keep the step heading above body copy without crowding. */
    } /* Finish narrow process-heading size. */
    .process-list p { /* Give process descriptions enough density for two small columns. */
        font-size: 0.78rem; /* Retain readable explanatory text with natural wrapping. */
    } /* Finish narrow process-description sizing. */
    .feature-image .stock-picture { /* Keep the warehouse illustration from dominating the phone page. */
        aspect-ratio: 4 / 3; /* Use a practical landscape crop before its copy. */
    } /* Finish narrow feature crop. */
    .export-image { /* Separate the reversed export photograph from its explanatory link. */
        margin-top: 10px; /* Give the image a modest visual pause. */
    } /* Finish narrow export-image spacing. */
    .question summary { /* Keep narrow disclosure labels readable beside their cue. */
        gap: 18px; /* Leave space for wrapping questions. */
        font-size: 0.9rem; /* Balance long questions within the phone width. */
        padding-block: 21px; /* Preserve a generous tap target. */
    } /* Finish narrow question-summary geometry. */
    .question-answer { /* Use most of the phone width for the detailed answer. */
        padding-right: 0; /* Remove the desktop cue-column inset. */
        font-size: 0.88rem; /* Keep the practical answer legible without excessive line length. */
    } /* Finish narrow FAQ answer measure. */
    .cta-section { /* Keep the closing action area proportionate on phones. */
        padding-block: 58px; /* Maintain strong separation from the article. */
    } /* Finish narrow closing-action spacing. */
    .footer-main { /* Keep the two navigation groups readable on phones. */
        column-gap: 24px; /* Preserve enough width for long service labels. */
    } /* Finish narrow footer-column spacing. */
    .footer-main nav a { /* Give wrapped footer labels comfortable line spacing. */
        line-height: 1.6; /* Prevent two-line links from looking crowded. */
        font-size: 0.74rem; /* Fit practical labels while retaining readable navigation. */
    } /* Finish narrow footer link typography. */
    .footer-bottom nav ul { /* Keep the legal row manageable at small widths. */
        gap: 12px 18px; /* Preserve distinct clickable labels. */
    } /* Finish narrow legal-navigation spacing. */
    .breadcrumbs { /* Reduce hierarchy spacing on small screens without removing it. */
        padding-top: 20px; /* Keep the first content visible sooner. */
        font-size: 0.67rem; /* Allow long service labels to wrap comfortably. */
    } /* Finish narrow breadcrumbs. */
    .inner-hero { /* Stack useful service copy before its image on phones. */
        padding-block: 30px 58px; /* Preserve separation from the detailed article. */
    } /* Finish narrow service introduction spacing. */
    .inner-hero-image .stock-picture { /* Keep the category photograph proportionate below its message. */
        aspect-ratio: 4 / 3; /* Use the common practical mobile image shape. */
    } /* Finish narrow service image crop. */
    .article-layout { /* Keep the full article and next steps separated on phones. */
        gap: 42px; /* Maintain hierarchy after the questions. */
        padding-bottom: 64px; /* Reduce the large desktop closing gap. */
    } /* Finish narrow article spacing. */
    .prose-section { /* Keep long articles well paced without oversized mobile gaps. */
        margin-bottom: 38px; /* Give each topic a clear but compact separation. */
    } /* Finish narrow topic spacing. */
    .aside-contact { /* Preserve useful sidebar guidance after it stacks below the article. */
        padding: 25px; /* Fit the contact prompt within the phone gutter. */
    } /* Finish narrow contact-aside spacing. */
    .standard-layout { /* Keep supporting articles comfortably framed on phones. */
        padding-top: 28px; /* Reduce the desktop opening whitespace. */
        padding-bottom: 64px; /* Leave a clear but proportionate final gap. */
    } /* Finish narrow supporting-page spacing. */
    .hub-intro { /* Keep the buying-directory opening compact after stacking. */
        padding-block: 28px 56px; /* Retain clear separation from the linked directories. */
    } /* Finish narrow hub introduction spacing. */
    .contact-details { /* Fit verified contact information naturally inside a phone viewport. */
        padding: 28px 24px; /* Give the long email room to wrap without excessive inset. */
    } /* Finish narrow direct-contact panel spacing. */
    .contact-details dd { /* Preserve a readable full address on the narrow panel. */
        font-size: 0.9rem; /* Allow clear natural wrapping of the verified email. */
    } /* Finish narrow contact-value sizing. */
    .form-grid { /* Keep labels and native controls comfortable on small phones. */
        grid-template-columns: minmax(0, 1fr); /* Put every field on its own readable row. */
        gap: 24px; /* Separate fields consistently. */
    } /* Finish narrow form-field layout. */
    .form-intro { /* Reduce the gap before fields on the mobile enquiry page. */
        padding-block: 26px; /* Keep the form near its practical introduction. */
    } /* Finish narrow form-introduction spacing. */
    #food-details { /* Keep specialist food fields usable within narrow form gutters. */
        padding: 20px; /* Preserve enough control width at 320px. */
    } /* Finish narrow specialist-detail inset. */
    .form-aside { /* Keep supporting photo advice compact below the mobile form. */
        padding: 24px; /* Match the site's restrained phone panel spacing. */
    } /* Finish narrow form-advice spacing. */
    .confirmation-page { /* Give genuine enquiry confirmation a calm phone presentation. */
        padding-block: 60px 85px; /* Keep a clear final action area without excessive whitespace. */
    } /* Finish narrow confirmation spacing. */
    .consent-banner { /* Keep optional analytics decisions fully reachable on small screens. */
        left: 10px; /* Preserve a small gap from the browser edge. */
        right: 10px; /* Fit the consent region within the phone viewport. */
        bottom: 10px; /* Keep controls above the bottom browser edge. */
        padding: 22px; /* Reserve room for text and equal-priority buttons. */
    } /* Finish narrow consent-region geometry. */
    .consent-actions { /* Keep both analytics choices equally easy to select on phones. */
        display: grid; /* Align choices in equal-width rows. */
        grid-template-columns: minmax(0, 1fr); /* Avoid squeezing decision labels side by side. */
    } /* Finish narrow consent-choice layout. */
} /* Finish phone-width adjustments. */
@media (max-width: 380px) { /* Preserve comfortable content at the explicit 320px minimum. */
    .process-list { /* Avoid tiny process explanations on the narrowest phones. */
        grid-template-columns: minmax(0, 1fr); /* Give each ordered stage a full readable line length. */
    } /* Finish minimum-width process layout. */
    .process-list p { /* Restore normal readable prose once the steps stack. */
        font-size: 0.85rem; /* Avoid unnecessarily small body copy on 320px screens. */
    } /* Finish minimum-width process typography. */
    .footer-main { /* Keep long service links readable at the smallest supported width. */
        grid-template-columns: minmax(0, 1fr); /* Stack the two navigation groups when half-width becomes cramped. */
    } /* Finish minimum-width footer layout. */
    .brand { /* Keep the logo and menu together at 320px without overlap. */
        width: 158px; /* Leave room for the menu when a narrow browser also reserves scrollbar space. */
    } /* Finish minimum-width logo sizing. */
    .header-main { /* Keep the original wordmark and compact menu on one minimum-width row. */
        column-gap: 8px; /* Recover enough space at 305px content width without reducing the control target. */
    } /* Finish minimum-width header spacing. */
} /* Finish explicit minimum-width adjustments. */
@media (prefers-reduced-motion: reduce) { /* Respect visitors who ask the system to reduce motion. */
    *, *::before, *::after { /* Apply the preference even if a later editor adds animation. */
        scroll-behavior: auto !important; /* Prevent smooth scrolling from creating unwanted movement. */
        animation-duration: 0.01ms !important; /* Reduce future decorative animations to an imperceptible duration. */
        transition-duration: 0.01ms !important; /* Keep future hover transitions immediate. */
    } /* Finish reduced-motion overrides. */
} /* Finish system motion-preference handling. */
@media (forced-colors: active) { /* Keep borderless actions identifiable in Windows high-contrast mode. */
    .button, .menu-toggle { /* Preserve the shape of the interactive actions in forced colours. */
        outline: 2px solid ButtonText; /* Use an accessibility outline instead of a normal decorative button border. */
        outline-offset: -2px; /* Keep the forced-colour outline within the control shape. */
    } /* Finish forced-colour action affordances. */
} /* Finish high-contrast compatibility. */
@media print { /* Keep printed service details useful without repeated navigation and controls. */
    .site-header, .site-footer, .cta-section, .consent-banner, .menu-toggle, .article-aside, .hero-actions { /* Remove interactive chrome from printed pages. */
        display: none !important; /* Prioritise the substantive page content on paper. */
    } /* Finish print navigation removal. */
    body, .hero, .export-section { /* Avoid dark full-page backgrounds in printouts. */
        background: #ffffff !important; /* Keep printed information clear and economical. */
        color: #000000 !important; /* Retain strong print contrast. */
    } /* Finish print surface handling. */
    .container { /* Use the printable sheet width rather than desktop gutters. */
        width: 100%; /* Avoid narrow print columns caused by viewport-based spacing. */
    } /* Finish print content width. */
    .hero, .inner-hero, .article-layout, .editorial-layout { /* Simplify complex screen layouts on paper. */
        display: block; /* Let text follow ordinary printable reading order. */
    } /* Finish print layout simplification. */
} /* Finish print-specific adjustments. */

#cognito-stock-form button[type="submit"] { /* Style the provider's real submit control to match the site's primary action. */
    display: inline-flex; /* Place the supplied button label beside a meaningful mail icon. */
    align-items: center; /* Centre the label and icon vertically. */
    justify-content: center; /* Keep the action content balanced within its button. */
    gap: 12px; /* Separate the action wording from its icon without an arrow cue. */
    min-height: 52px; /* Give pointer and touch users a comfortable activation target. */
    padding: 14px 24px; /* Match the surrounding website's filled action spacing. */
    border: 0; /* Honour the owner's no thin-outline button requirement. */
    border-radius: 6px; /* Use the restrained corner shape of the existing interface. */
    background: #245bff; /* Use the exact blue from the supplied brand palette. */
    color: #fff; /* Keep the submit label readable on the blue fill. */
    font: inherit; /* Use the locally hosted Poppins face rather than browser-default text. */
    font-weight: 600; /* Make the primary form action easy to identify. */
    cursor: pointer; /* Identify the real interactive control on desktop. */
} /* Finish the provider submit-button appearance without changing its behaviour. */
#cognito-stock-form button[type="submit"]::after { /* Add a relevant locally bundled Lucide mail symbol. */
    content: ""; /* Treat the symbol as decorative beside the existing readable label. */
    width: 20px; /* Keep the icon aligned with the website's other action symbols. */
    height: 20px; /* Preserve the square source icon proportions. */
    flex: 0 0 20px; /* Prevent the symbol collapsing beside longer provider labels. */
    background: currentColor; /* Match the readable button label colour. */
    -webkit-mask: url('/assets/icons/mail.svg') center / contain no-repeat; /* Render the original Lucide asset in browsers using WebKit mask syntax. */
    mask: url('/assets/icons/mail.svg') center / contain no-repeat; /* Render the same local SVG without adding an external icon service. */
} /* Finish the decorative form-action icon. */
#cognito-stock-form button[type="submit"]:hover { /* Show a clear hover state while preserving the filled button. */
    background: #1849df; /* Darken the blue slightly while retaining readable white text. */
} /* Finish the pointer-hover response. */
#cognito-stock-form button[type="submit"]:focus-visible { /* Keep keyboard focus obvious on the provider-managed control. */
    outline: 3px solid #151515; /* Draw a substantial focus ring against the light form panel. */
    outline-offset: 4px; /* Separate keyboard focus from the filled button edge. */
} /* Finish keyboard focus visibility. */
#cognito-stock-form button[type="submit"]:disabled { /* Respect the provider's in-progress or disabled state. */
    opacity: 0.65; /* Indicate temporary unavailability without hiding the label. */
    cursor: wait; /* Avoid suggesting that repeated submission clicks are needed. */
} /* Finish the disabled submit state. */