Utilities

Responsive Utilities

Every mobile-first breakpoint override in the stylesheet, kept as one ordered block per breakpoint rather than scattered @media queries inside each component partial.

Fieldcraft's three breakpoints — 1100px, 860px and 560px — match the reference values noted in tokens.css (--bp-lg/ --bp-md/--bp-sm; kept as a comment only, since a CSS custom property can't be read inside a media query condition). Each block below lists exactly what changes at that width, reusing each component's own class names — there's no separate .u-hidden-down@tablet-style utility vocabulary (see Utilities).

1100px and narrower

Selector	What changes
`.fgrid` (Footer)	Drops from five columns to two; the brand column spans the full row width.
`.jobs .grid`, `.job-grid`, `.reviews .grid`, `.review-grid`	Drop from three columns to two.
`.crew` (Team)	Drops from four columns to two.

860px and narrower

Selector	What changes
`.hero .meta`, `.phero .meta`	The stat meta box hides entirely.
`.hero .sub`, `.phero .sub`	Switches from a row to a stacked column, left-aligned.
`.svc` (Service Rows)	Column width for the row number shrinks; the `.tag` spec text and trailing `.arrow` hide.
`.manifesto .grid`, `.closer .grid`, `.proof .grid`	Drop from two columns to one, stacking their content.
`.step` (Process)	Row-number column shrinks; the paragraph/event column spans the remaining width on its own row.
`.jobs .grid`, `.job-grid`, `.reviews .grid`, `.review-grid`	Drop to a single column.
`.notes li a`, `.notes-list li a`, `.rail-list li a`	Drop from a three-column row (title, meta, arrow) to two columns; the trailing `.go` arrow hides.
`.trow` (Trades Rows)	Drops to a single column with a larger row gap; a `.flip` row's media returns to source order; the photo frame switches to a shorter 4:3 aspect ratio.
`.feature-band .frame`	Switches to the shorter 4:3 aspect ratio.
`.receipts`	Switches from a wrapped row to a stacked column.
`.topbar`	Centers its text; the click-to-call phone link (`.tb-phone`) hides.
`.sitehead nav .navlink`, `.sitehead nav .phone`	Hide (the inline primary nav is replaced by the mobile menu button below).
`.menu-btn`	Becomes visible — this is the width where the mobile nav overlay takes over.
`.two` (Closer Form)	Drops from a two-column field row to one.
`.ledger .stat`, `.rate`	Drop from a two-column row to one, with a smaller gap; the label/number column left-aligns instead of right-aligning.
`.rate .no`	The row-number column hides; the `.amount` column left-aligns.
`.countdown` (Coming Soon)	Wraps onto multiple lines instead of forcing one row.

560px and narrower

Selector	What changes
`.crew`	Drops to a single column.
`.fgrid`	Drops to a single column.
`.trust ul`	Switches from a wrapped row to a stacked column.
`.coming .coords`	The coordinate readout in the Coming Soon page's top bar hides.